/* kcc.css: the Kick Community College cutouts kcc.js pins into the painting (see kcc.js for where and why). */
.kcc-cut{position:fixed;left:0;top:0;pointer-events:none;user-select:none;-webkit-user-drag:none;
  /* the painting's light: a low warm sun, so the printed brand colours sit in the same air as the crowd */
  filter:sepia(.14) saturate(.94) brightness(.95)}
.kcc-far{z-index:2}                 /* over #back, under the sign (3): #mid and #near still draw over it */
.kcc-near,.kcc-banner{z-index:4}   /* over #mid (same z, later in the page), under the crowd (5) */
.kcc-rail{z-index:5}               /* over the crowd canvas (same z, later in the page), under #near (6) */
.kcc-far{filter:sepia(.2) saturate(.88) brightness(.9) contrast(.96)}   /* a touch of haze for the far ones */
img.kcc-cut{height:auto}
/* the Florida board: the base map plus one lifted copy of each region, shown when a question is about it */
.kcc-map{aspect-ratio:1634/1508;filter:sepia(.2) saturate(.97) brightness(.92) drop-shadow(-4px 6px 5px rgba(30,12,4,.5))}
.kcc-map .kcc-bob{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.kcc-map img{display:block;width:100%;height:auto}
/* a right answer: the fan pushes the poster up and it bobs back down (once; transform only) */
.kcc-map .kcc-bob.bob{animation:kcc-bob .9s cubic-bezier(.3,1.3,.5,1)}
@keyframes kcc-bob{0%{transform:none}28%{transform:translateY(-9%) rotate(-1.5deg)}58%{transform:translateY(-2%) rotate(1deg)}100%{transform:none}}
.kcc-map .kcc-reg{position:absolute;height:auto;opacity:0;transform:translate(0,0);transform-origin:50% 60%;
  transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.6,.5,1),filter .35s ease}
.kcc-map .kcc-reg.on{opacity:1;transform:translate(1%,-10%) scale(1.14);
  filter:drop-shadow(-3px 5px 3px rgba(40,16,4,.55)) drop-shadow(0 0 5px rgba(83,252,24,.85))}
.kcc-map .kcc-reg.hop{animation:kcc-hop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes kcc-hop{0%{transform:translate(1%,-10%) scale(1.14)}40%{transform:translate(2%,-24%) scale(1.22) rotate(-4deg)}100%{transform:translate(1%,-10%) scale(1.14)}}
/* portrait: the sign takes the width and the cover-fit crops the towers, so the bridge dressing would crowd it */
.cb-portrait .kcc-near.kcc-wide,.cb-portrait #kcc-ribbon{display:none}
@media (prefers-reduced-motion:reduce){.kcc-map .kcc-reg{transition:opacity .2s}.kcc-map .kcc-reg.hop,.kcc-map .kcc-bob.bob{animation:none}}

/* ---- the sign's top badge: a flat cut of the KICK COMMUNITY COLLEGE ribbon on the bridge (kcc/kcc-ribbon.webp) ----
   black board, cream pinstripe, rough kraft rim; swallowtail ends tucked behind; embossed paper-white KCC Cardboard
   letters, Kick-green stars. The rank face's red YOUR RANK badge is a plain .badge and keeps its own look. */
@font-face{font-family:'KCC Cardboard';src:url(fonts/KCC-Cardboard.woff2) format('woff2');font-display:swap}
.badge.kcc-badge{--kb-ink:#0f1115;--kb-cream:#e9dfc4;--kb-kraft:#b98a52;
  font:clamp(11px,2.7cqw,21px)/1 'KCC Cardboard','Homecoming Parade',Rockwell,Georgia,serif;letter-spacing:.06em;
  gap:.55em;padding:.62em 1.25em .55em;margin:0 2.2em .4em;border-radius:2px;isolation:isolate;
  color:#f4eee0;
  text-shadow:0 -.5px 0 #fff,-1px 1px 0 #9a917c,-2px 2px 0 #5d5546,-2px 3px 0 #2c2820,-3px 5px 5px rgba(0,0,0,.55);
  background:var(--cb-fiber),linear-gradient(170deg,rgba(255,255,255,.07),transparent 45%,rgba(0,0,0,.25)),var(--kb-ink);
  outline:none;
  box-shadow:inset 0 0 0 3px var(--kb-ink),inset 0 0 0 4.5px var(--kb-cream),inset 0 0 0 6px rgba(15,17,21,.6),
    0 0 0 2px #d8b47c,0 0 0 4px var(--kb-kraft),-1px 1px 0 4.5px #6b4a22,-5px 8px 7px 2px rgba(35,14,3,.45)}
.badge.kcc-badge i{color:var(--cb-kick);font-family:Georgia,serif;font-size:1.05em;
  text-shadow:-1px 1px 0 #1d6b06,-2px 2px 0 #0b3302,-2px 3px 4px rgba(0,0,0,.6)}
/* swallowtail ends: hang a little low and tuck behind the board (one SVG, mirrored for the right) */
.badge.kcc-badge::before,.badge.kcc-badge::after{content:'';position:absolute;z-index:-1;top:.62em;bottom:-.72em;width:3em;height:auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'><path d='M60 3H3l22 17L3 37h57z' fill='%23b98a52' stroke='%23b98a52' stroke-width='5' stroke-linejoin='round'/><path d='M60 3H3l22 17L3 37h57z' fill='%230f1115' stroke='%23e9dfc4' stroke-width='1.6' stroke-linejoin='round'/><path d='M60 3v34l-14-9V3z' fill='%23000' fill-opacity='.45'/></svg>") center/100% 100% no-repeat;
  filter:drop-shadow(-3px 5px 4px rgba(35,14,3,.4))}
.badge.kcc-badge::before{left:-2.45em;right:auto}
.badge.kcc-badge::after{right:-2.45em;transform:scaleX(-1)}
.cb-portrait .badge.kcc-badge{font-size:12px;margin:0 1.4em}

/* ---- the curved KICK COMMUNITY COLLEGE ribbon (it used to hang on the bridge) now crowns the sign's start face ---- */
.kcc-ribbon-top{display:block;width:min(50cqw,420px);height:auto;margin:-1.4cqw auto -1.6cqw;pointer-events:none;user-select:none;
  filter:drop-shadow(-3px 5px 4px rgba(35,14,3,.45))}
.cb-portrait .kcc-ribbon-top{width:min(78cqw,420px)}