/* enroll.css: KCC ENROLLMENT on the closed gates (enroll.js). Cut from the cardboard kit in style.css (cb-*) and the gates
   in immersion.css. Light, as everywhere: the low sun behind-right, so shadows fall down-left and rims catch on the right.
   html.en-on    the card is up: the gates hold (no failsafe fade), their SETTING UP tag steps aside for the card
   html.en-gates this visit enrolled: the crest rides small at the top of the doors, the doors stand cracked open by
                 --en-crack (one more notch per answer), the parade's light (.en-light) shows through the crack
   Sizes are in em off #en-stage's --u, so the card scales with the window (laptops to 1080p and up). */

/* ---------------- the gates while enrolling ---------------- */
html.en-on:not(.im-gone)::before,html.en-on:not(.im-gone)::after{animation:none;
  transition:transform .8s cubic-bezier(.3,1.5,.45,1),opacity .4s}
html.en-on:not(.im-gone) body::before,html.en-on:not(.im-gone) body::after{display:none}
/* the float's apron (footer) would show under the cracked doors: it stays out of sight until they swing */
html.en-gates:not(.im-open) #bar{visibility:hidden}
/* the crest goes up top and small: the card hangs under its bow */
html.en-gates:not(.im-gone)::before,html.en-gates:not(.im-gone)::after{--im-crest:min(19vh,15vw);
  --im-latch-y:52vh}   /* the drop-latch hides behind the card (and shows at the seam once it comes off) */
html.en-gates:not(.im-gone)::before{--im-half:url(kcc/kcc-crest.webp) calc(100% + var(--im-crest) / 2) calc(var(--im-m) + 1.2vh)/var(--im-crest) auto no-repeat}
html.en-gates:not(.im-gone)::after{--im-half:url(kcc/kcc-crest.webp) calc(0% - var(--im-crest) / 2) calc(var(--im-m) + 1.2vh)/var(--im-crest) auto no-repeat}
@media (prefers-reduced-motion:no-preference){
  html.en-gates:not(.im-open):not(.im-gone)::before{transform:perspective(1700px) rotateY(var(--en-crack,0deg))}
  html.en-gates:not(.im-open):not(.im-gone)::after{transform:perspective(1700px) rotateY(calc(var(--en-crack,0deg) * -1))}
}
/* the parade's light through the crack (under the doors, so only the gap shows it) */
.en-light{position:fixed;top:0;bottom:0;left:50%;width:34vw;translate:-50% 0;z-index:59;pointer-events:none;opacity:var(--en-glow,0);transition:opacity 1s ease-out;
  background:radial-gradient(ellipse 22% 70% at 50% 52%,#fff3cf,rgba(255,206,120,.85) 30%,rgba(240,138,50,.45) 60%,transparent 100%)}
html.im-open .en-light{opacity:0;transition:opacity .5s}
html.im-gone .en-light{display:none}

/* ---------------- the stage + the card ---------------- */
#en-stage{position:fixed;left:0;right:0;top:21.6vh;bottom:2.2vh;z-index:62;display:grid;justify-items:center;align-items:start;pointer-events:none;
  --u:clamp(12px,min(1.66vh,1.02vw),20px);font-size:var(--u)}
.en-card{pointer-events:auto;position:relative;box-sizing:border-box;width:min(61em,calc(100vw - 48px));max-height:100%;overflow:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:.7em;padding:.95em 1.25em 1em;color:#22160b;rotate:-.35deg;
  background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,radial-gradient(130% 90% at 30% 10%,#f8ebcf,#ecd3a8) padding-box,var(--cb-flutes) border-box;
  border:6px solid transparent;border-radius:6px;box-shadow:-16px 22px 26px rgba(4,14,4,.55),-3px 4px 0 rgba(20,40,16,.35),inset -2px 0 0 rgba(255,214,150,.5)}
.en-card::-webkit-scrollbar{display:none}
.en-card.en-wait{visibility:hidden}
.en-card.en-pinned{animation:en-pin .75s cubic-bezier(.25,1.35,.45,1) both}
.en-card.en-out{animation:en-unpin .5s cubic-bezier(.5,0,.75,.3) both;pointer-events:none}
@keyframes en-pin{0%{opacity:0;transform:translateY(-46px) rotate(-3.5deg)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes en-unpin{0%{transform:none}100%{opacity:0;transform:translateY(40px) rotate(2.5deg)}}
.en-brad{position:absolute;top:.55em;z-index:3;width:1.15em;height:1.15em;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#fff2c0 0 8%,#d9a441 30%,#6b4a16 62%,#3a2408 72%,transparent 76%);filter:drop-shadow(-1.5px 2px 1px rgba(40,16,4,.5))}
.en-brad.l{left:.55em}.en-brad.r{right:.55em}
.en-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the header: a strip cut from the KICK COMMUNITY COLLEGE ribbon's black board (cream pinstripe, kraft rim) */
.en-head{display:flex;align-items:center;gap:.6em 1em;margin:.15em .9em 0;padding:.55em 1em .5em;border-radius:2px;rotate:-.5deg;
  background:var(--cb-fiber),linear-gradient(170deg,rgba(255,255,255,.07),transparent 45%,rgba(0,0,0,.25)),#0f1115;
  box-shadow:inset 0 0 0 3px #0f1115,inset 0 0 0 4.5px #e9dfc4,inset 0 0 0 6px rgba(15,17,21,.6),0 0 0 2px #d8b47c,0 0 0 4px #b98a52,-1px 1px 0 4.5px #6b4a22,-5px 8px 7px 2px rgba(35,14,3,.4)}
.en-title{margin:0;flex:none;font:400 1.55em/1 'KCC Cardboard','Homecoming Parade',Rockwell,Georgia,serif;letter-spacing:.06em;color:#f4eee0;padding-top:.06em;
  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)}
.en-t-k{color:var(--cb-kick);text-shadow:-1px 1px 0 #1d6b06,-2px 2px 0 #0b3302,-2px 3px 4px rgba(0,0,0,.6)}
.en-form{flex:1;min-width:0;font:700 max(11.5px,.78em)/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;color:#d8c39a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-chip{flex:none;font:700 max(12px,.8em)/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#2a1806;padding:.4em .6em .34em;border-radius:2px;rotate:3deg;
  background:var(--cb-fiber),var(--cb-light),var(--cb-mustard);box-shadow:0 2px 0 var(--cb-mustard-dk)}

.en-body{display:grid;grid-template-columns:minmax(0,1fr) 22.5em;gap:1.5em;align-items:stretch;padding:.35em .2em 0}

/* ---------------- the left half: the question ---------------- */
.en-left{min-width:0}
.en-step{display:flex;flex-direction:column;align-items:flex-start}
.en-done-step{height:100%;justify-content:center;padding-bottom:2em;box-sizing:border-box}
.en-step.en-in{animation:en-step .4s cubic-bezier(.2,.8,.3,1) both}
@keyframes en-step{0%{opacity:0;transform:translateX(18px)}100%{opacity:1;transform:none}}
.en-kicker{margin:.25em 0 0 .3em;font:max(11.5px,.82em)/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.12em;--rot:-2deg}
.en-q{margin:.3em 0 .12em;font:400 2.3em/1.02 'Homecoming Reference','Alfa Slab One',Georgia,serif;letter-spacing:.02em;max-width:100%}
.en-q .cb-letters>span{text-wrap:balance}
.en-q .cb-l-face{--cb-lface:#2b7a3f}
.en-q.en-big{font-size:3.5em;margin-top:.15em}
.en-hint,.en-say{margin:.2em 0 .7em;font:italic 500 1.02em/1.32 'Zilla Slab',Georgia,serif;color:#4a3420;mix-blend-mode:multiply;max-width:30em;text-wrap:pretty}
.en-say{font-style:normal;font-weight:600;font-size:1.08em;color:#2a1d10}
.en-say .kv{font-size:1.1em}

/* the answers sit in a tray pressed into the card */
.en-opts{box-sizing:border-box;width:100%;display:grid;gap:.75em .65em;padding:.85em .8em .95em;border-radius:8px;background:var(--cb-fiber),rgba(120,70,25,.13);
  box-shadow:inset -3px 4px 6px rgba(60,28,6,.38),inset 2px -2px 0 rgba(255,244,220,.55),0 0 0 1px rgba(110,64,24,.22),0 1px 0 1px rgba(255,244,220,.45)}
.en-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.22em;min-width:0;text-align:left;cursor:pointer;
  padding:.58em .9em .5em 1.05em;transition:transform .12s,box-shadow .12s,--e .12s,filter .25s,opacity .25s}
.en-opt:nth-child(3n+1){--rot:-.5deg}.en-opt:nth-child(3n+2){--rot:.4deg}.en-opt:nth-child(3n){--rot:-.2deg}
.en-code{font:1.32em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.06em;padding-top:.08em;white-space:nowrap}
.en-city{font:700 max(11px,.78em)/1.05 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#5a3d22}
/* the key to press, printed small in the corner */
.en-n{position:absolute;top:.42em;right:.5em;min-width:1.35em;padding:.18em .22em .12em;box-sizing:border-box;border-radius:3px;text-align:center;
  font:700 max(12px,.72em)/1 'Barlow Condensed',sans-serif;color:rgba(70,40,15,.7);box-shadow:inset 0 0 0 1px rgba(110,70,30,.45)}
.en-opt.en-picked{--cb-face:var(--cb-mustard);--cb-edge-c:var(--cb-mustard-dk);--cb-score:rgba(90,55,10,.45);z-index:2}
.en-opt.en-picked::after{content:'✓';position:absolute;right:.45em;bottom:.3em;font:700 1.15em/1 'Barlow Condensed',sans-serif;color:#1f5a2f}
.en-opt.en-picked .en-n{visibility:hidden}
.en-opt.en-dim{opacity:.4;filter:saturate(.55)}
.en-opt:disabled{cursor:default}

/* 1. area codes: three across, each with its region's colour from the map down the left edge */
.en-areas{grid-template-columns:repeat(3,minmax(0,1fr))}
.en-area{min-height:4.35em;padding-left:1.35em;padding-right:2.1em;
  background:var(--cb-fiber),linear-gradient(90deg,var(--rc) 0 .55em,rgba(40,16,4,.28) .55em .64em,transparent .64em),var(--cb-grain),var(--cb-light),var(--cb-face)}
.en-area .en-code{font-size:1.85em;letter-spacing:.05em}
.en-area.wide .en-code{font-size:1.02em;letter-spacing:.05em}
.en-area.wide{padding-right:2.3em}
/* 2. ranks: a ladder, lowest first */
.en-ranks{grid-template-columns:1fr;gap:.5em}
.en-rank{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:.75em;padding:.78em 2.2em .66em 1em}
.en-rank .en-code{font-size:1.25em;min-width:8.6em}
.en-rank .en-city{font:italic 500 .95em/1.1 'Zilla Slab',Georgia,serif;letter-spacing:0;color:#4a3420}
/* 3. sections: a felt swatch cut like the pennant */
.en-secs{grid-template-columns:1fr;gap:.5em}
.en-sec{flex-direction:row;align-items:center;justify-content:flex-start;gap:.7em;padding:.8em 2.2em .7em .95em}
.en-sec .en-code{font-size:1.22em}
.en-swatch{flex:none;width:1.7em;height:1.05em;clip-path:polygon(0 0,100% 50%,0 100%);background:var(--cb-fiber),linear-gradient(90deg,#1f5a2f 0 .3em,transparent .3em),var(--felt);
  filter:drop-shadow(-1px 1px 0 rgba(40,16,4,.4))}

/* 4. sign your file: ENROLL WITH [Kick] (board.css .kick-login), or audit */
.en-final{grid-template-columns:1fr;gap:.6em;padding:1em 1em 1.05em}
.en-final .kick-login{font-size:1.6em;width:100%;--rot:-.5deg}
.en-final .kick-login .en-n{color:rgba(233,223,196,.6);box-shadow:inset 0 0 0 1px rgba(233,223,196,.35);font-size:max(12px,.42em)}
.en-final .en-plain{font:1.5em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.08em;padding:.7em 1em .6em;width:100%}
.en-final .en-plain .en-n{font-size:max(12px,.44em)}
.en-as{gap:.5em}
.en-as-av{width:1.25em;height:1.25em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--cb-kick)}
.en-as-name{font:700 1em/1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:var(--cb-kick);text-shadow:none}
.en-or{display:flex;align-items:center;gap:.7em;font:italic 500 max(12px,.95em)/1 'Zilla Slab',serif;color:#6b4a2a}
.en-or::before,.en-or::after{content:'';flex:1;border-top:1.5px dashed rgba(110,70,30,.4)}
.en-guest{justify-self:center;font:1.02em/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.1em;padding:.7em 2.6em .6em 1.6em;--rot:.6deg}
.en-guest-say{margin:-.1em 0 0;text-align:center;font:italic 500 max(12px,.9em)/1.25 'Zilla Slab',serif;color:#5a4128}
.en-guest-say:empty{display:none}
.en-msg{margin:.6em 0 0;font:600 .98em/1.3 'Zilla Slab',serif;color:#4a3420}
.en-msg:empty{display:none}
.en-msg.warn{color:#8a3e0c}
.kick-login.en-leaving{filter:brightness(1.15)}

/* enrolled / auditing */
.en-who{display:flex;align-items:center;gap:.4em;margin-bottom:.35em;font:700 1.45em/1 'Barlow Condensed',sans-serif;color:#14243f}
.en-who img{width:1.45em;height:1.45em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1d5c10}
.en-opening{margin:.4em 0 0;font:700 .9em/1 'Barlow Condensed',sans-serif;letter-spacing:.18em;color:#1f5a2f}

.en-skip{position:relative;align-self:flex-start;margin:.1em 0 .1em .5em;border:0;cursor:pointer;border-radius:2px;rotate:-1.5deg;
  padding:.5em .85em .42em 1.75em;font:700 max(12px,.84em)/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:#2a1806;
  background:var(--cb-brad) .55em 50%/1.05em 1.05em no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-kraft);
  box-shadow:0 2px 0 var(--cb-edge),-3px 4px 4px rgba(40,16,4,.32),inset -1.5px 0 0 rgba(255,214,150,.45);transition:translate .15s,rotate .15s}
.en-skip i{font-style:italic;font-family:'Zilla Slab',Georgia,serif;font-weight:500;letter-spacing:0;color:#5a3d22;margin-right:.3em}
.en-skip:hover{translate:0 -2px;rotate:0deg}
.en-card:focus{outline:none}
/* keyboard focus: a red pencil ring drawn round the piece (the card itself takes focus when a step opens, so nothing
   looks pre-picked) */
.en-card :focus-visible{outline:none}
.en-opt:focus-visible:not(.en-picked)::after,.en-guest:focus-visible::after,.en-plain:focus-visible::after,.en-skip:focus-visible::after{
  content:'';position:absolute;inset:-.38em -.42em -.5em -.36em;pointer-events:none;border:2.2px solid #c4321e;opacity:.85;rotate:-.8deg;
  border-radius:1.5em 1.1em 1.7em 1.2em / 1.3em 1.6em 1.1em 1.5em;filter:url(#cb-ink)}
.en-card .kick-login:focus-visible{outline:2.5px solid var(--cb-kick);outline-offset:4px}
.en-card:has(.en-done-step) .en-skip{visibility:hidden}

/* ---------------- the right half: the student file ---------------- */
.en-file{position:relative;margin-top:1.1em;padding:1.35em .95em 1em;border-radius:4px;rotate:.9deg;
  background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(40,16,4,.14),transparent 40%,rgba(255,226,170,.22)),#d9a86c;
  box-shadow:0 3px 0 #8a5a2c,-7px 10px 12px rgba(45,18,4,.38),inset -2px 0 0 rgba(255,214,150,.45),inset 0 0 0 1px rgba(110,64,24,.25)}
.en-tab{position:absolute;left:.9em;top:-1.15em;padding:.45em .9em .5em;border-radius:4px 4px 0 0;font:.78em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.14em;color:#3a2410;font-size:max(11px,.78em);
  background:var(--cb-fiber),var(--cb-grain),#d9a86c;box-shadow:inset -2px 0 0 rgba(255,214,150,.4),-3px -1px 3px rgba(45,18,4,.18)}
.en-slot{position:relative;display:grid;place-items:center;border-radius:4px;border:1.6px dashed rgba(90,52,18,.5);transition:border-color .5s}
.en-slot.full{border-color:transparent}
.en-slot-k{font:700 max(11px,.74em)/1 'Barlow Condensed',sans-serif;letter-spacing:.18em;color:rgba(70,38,12,.58);mix-blend-mode:multiply;transition:opacity .3s}
.en-slot.full .en-slot-k{opacity:0}
.en-s-map{height:17.6em}
.en-row{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.65em}
.en-row .en-slot{height:7.2em}

/* the cardboard Florida slides in; your region pops up in Kick green (the same lift as the map in the parade, kcc.css) */
.en-map{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:1254/1208;filter:sepia(.1) drop-shadow(-4px 6px 5px rgba(30,12,4,.5));rotate:-2deg;
  animation:en-slide .85s cubic-bezier(.25,1.25,.45,1) both}
@keyframes en-slide{0%{opacity:0;transform:translate(46%,-8%) rotate(10deg)}30%{opacity:1}100%{opacity:1;transform:none}}
.en-map-base{display:block;width:100%;height:100%}
.en-reg{position:absolute;transform-origin:50% 60%;transform:translate(1%,-12%) scale(1.22);
  filter:drop-shadow(-3px 5px 3px rgba(40,16,4,.55)) drop-shadow(0 0 .45em rgba(83,252,24,.95));animation:en-pop .7s .6s cubic-bezier(.3,1.7,.5,1) both}
@keyframes en-pop{0%{opacity:0;transform:none}25%{opacity:1}100%{opacity:1;transform:translate(1%,-12%) scale(1.22)}}
.en-reg-g{display:block;width:100%;height:100%;isolation:isolate;background:var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.12),transparent 50%,rgba(255,255,220,.3)),#53fc18;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.en-reg-g img{display:block;width:100%;height:100%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.25) brightness(1.22)}
.en-maptag{position:absolute;left:1%;bottom:13%;z-index:2;white-space:nowrap;--rot:-4deg;font:700 .82em/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;
  padding:.45em .75em .38em 1.85em;background:var(--cb-brad) .55em 50%/1.25em 1.25em no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),#f6e8c8;
  animation:cb-pop .5s .95s cubic-bezier(.25,1.6,.45,1) both}
.en-maptag b{font:1.35em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.05em;color:#1f5a2f;margin-right:.15em}
.en-visit .en-map-base{filter:saturate(.55) brightness(.96)}
.en-visit .en-maptag b{color:#3d5384}
.en-all .en-maptag b{color:#8a3e0c}

/* the self-assessment: rubber-stamped in brick ink */
.en-stamp{display:grid;justify-items:center;gap:.18em;max-width:8.6em;font-size:1.12em;padding:.38em .55em .32em;border:.17em solid currentColor;border-radius:.32em;color:#b02a15;text-align:center;
  outline:.06em solid currentColor;outline-offset:-.38em;mix-blend-mode:multiply;-webkit-mask:var(--cb-wear);mask:var(--cb-wear);rotate:-8deg;
  animation:en-slam .5s .1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes en-slam{0%{opacity:0;transform:scale(2.1) rotate(-10deg)}55%{opacity:1;transform:scale(.93)}100%{opacity:1;transform:none}}
.en-stamp-k{font:700 .68em/1 'Barlow Condensed',sans-serif;letter-spacing:.22em;padding-top:.3em}
.en-stamp b{font:400 1.32em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.05em;padding-bottom:.12em}
.en-stamp.long b{font-size:.98em}

/* the section pennant: felt on a dowel, the laurel hoist band, dropped in and swinging still */
.en-pen{position:relative;width:10.2em;height:5em;transform-origin:.2em 0;filter:drop-shadow(-3px 5px 4px rgba(40,16,4,.45));rotate:-4deg;
  animation:en-drop 1s cubic-bezier(.3,1.5,.45,1) both}
@keyframes en-drop{0%{opacity:0;transform:translateY(-3.5em) rotate(-24deg)}30%{opacity:1}60%{transform:rotate(7deg)}82%{transform:rotate(-2.5deg)}100%{opacity:1;transform:none}}
.en-pen-stick{position:absolute;left:-.1em;top:-.5em;bottom:-1em;width:.38em;border-radius:2px;background:linear-gradient(90deg,#6e4220,#c8915a 35%,#e6b97f 55%,#9a6431 80%,#5a3416)}
.en-pen-felt{position:absolute;left:.26em;top:0;right:0;bottom:0;clip-path:polygon(0 0,100% 50%,0 100%);display:flex;align-items:center;
  background:var(--cb-fiber),linear-gradient(90deg,#1f5a2f 0 .75em,#0f2f17 .75em .85em,transparent .85em),linear-gradient(170deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.18)),var(--felt)}
.en-pen-felt span{display:block;max-width:5.4em;margin-left:1.15em;font:.84em/1.02 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.06em;color:var(--fink)}

/* the student ID: lands on the file when you're in */
.en-id{position:absolute;left:50%;top:44%;z-index:5;width:19.5em;translate:-50% -50%;rotate:-3deg;border-radius:4px;overflow:visible;color:#1d140b;
  background:var(--cb-fiber),var(--cb-grain),var(--cb-light),#f6e8c8;box-shadow:0 3px 0 #8a6234,-8px 12px 14px rgba(30,12,2,.5),inset -1.5px 0 0 rgba(255,214,150,.5);
  animation:en-id .6s cubic-bezier(.25,1.4,.45,1) both}
@keyframes en-id{0%{opacity:0;transform:translateY(-30%) scale(1.25) rotate(8deg)}40%{opacity:1}100%{opacity:1;transform:none}}
.en-id-band{display:flex;justify-content:space-between;align-items:center;padding:.5em .8em .42em;border-radius:4px 4px 0 0;
  font:.86em/1 'KCC Cardboard','Homecoming Parade',serif;letter-spacing:.08em;color:#f3dc9a;background:var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.22),transparent 40%,rgba(255,220,140,.16)),var(--cb-laurel)}
.en-id-band i{font:700 .82em/1 'Barlow Condensed',sans-serif;font-style:normal;letter-spacing:.14em;color:var(--cb-kick)}
.en-id-body{display:flex;align-items:center;gap:.8em;padding:.75em .8em .85em}
.en-id-av{flex:none;width:4.3em;height:4.3em;border-radius:3px;object-fit:cover;background:#e9d7b2;box-shadow:0 0 0 2px #f6e8c8,0 0 0 3.5px rgba(45,24,8,.5),-2px 3px 4px rgba(30,12,2,.35)}
.en-id-crest{object-fit:contain;padding:.25em;box-sizing:border-box;background:#0f1115}
.en-id-who{display:flex;flex-direction:column;gap:.3em;min-width:0}
.en-id-k{font:700 .66em/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;color:#b02a15}
.en-id-name{display:flex;align-items:center;gap:.3em;min-width:0;font:700 1.55em/1 'Barlow Condensed',sans-serif;color:#14243f;overflow:hidden;white-space:nowrap}
.en-id-meta{display:flex;align-items:center;gap:.45em;font:700 .72em/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#5a3d22}
.en-id-meta .ac-tag{font-size:1.15em}
.en-id-stamp{position:absolute;right:-.7em;bottom:-.9em;font:1.15em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.08em;color:#1f5a2f;
  border:.16em solid currentColor;border-radius:.3em;padding:.3em .5em .2em;mix-blend-mode:multiply;-webkit-mask:var(--cb-wear-lt);mask:var(--cb-wear-lt);rotate:-11deg;
  animation:en-slam .5s .45s cubic-bezier(.3,1.4,.5,1) both}
.en-id.guest .en-id-stamp{color:#b02a15}

/* the file takes your region's colour: a coloured tab, a band of it round the folder's edge, a faint wash on the kraft */
.en-file.en-fc{transition:box-shadow .5s;
  background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(40,16,4,.14),transparent 40%,rgba(255,226,170,.22)),
    linear-gradient(color-mix(in srgb,var(--fc) 16%,transparent),color-mix(in srgb,var(--fc) 16%,transparent)),#d9a86c;
  box-shadow:0 3px 0 color-mix(in srgb,var(--fc) 55%,#3a1e08),-7px 10px 12px rgba(45,18,4,.38),inset 0 0 0 .32em color-mix(in srgb,var(--fc) 78%,#d9a86c),
    inset 0 0 0 calc(.32em + 1px) rgba(60,28,6,.3),inset -2px 0 0 rgba(255,214,150,.45)}
.en-file.en-fc .en-tab{color:#1d140b;background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(0,0,0,.12),transparent 45%,rgba(255,240,200,.25)),
  color-mix(in srgb,var(--fc) 85%,#d9a86c);box-shadow:inset -2px 0 0 rgba(255,240,200,.45),-3px -1px 3px rgba(45,18,4,.22)}
/* the area code, rubber-stamped big across the top-right of the file in the region's ink */
.en-astamp{position:absolute;right:-.1em;top:.15em;z-index:3;pointer-events:none;padding:.12em .3em .02em;border:.09em solid currentColor;border-radius:.12em;
  outline:.035em solid currentColor;outline-offset:-.17em;font:400 2.75em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.04em;
  color:color-mix(in srgb,var(--fc) 70%,#1d140b);mix-blend-mode:multiply;-webkit-mask:var(--cb-wear);mask:var(--cb-wear);rotate:9deg;opacity:.9;
  animation:en-slam .5s 1.05s cubic-bezier(.3,1.4,.5,1) both}
.en-astamp.word{font-size:1.75em}
/* the region's cardboard sticker, slapped onto the Gulf side of the map */
.en-sticker{position:absolute;left:-.35em;top:4.8em;z-index:4;width:8.5em;height:auto;pointer-events:none;rotate:-7deg;
  filter:drop-shadow(-2px 3px 2px rgba(30,12,2,.35));animation:en-slap .55s 1.4s cubic-bezier(.25,1.5,.45,1) both}
@keyframes en-slap{0%{opacity:0;transform:translate(.6em,-1.4em) scale(1.45) rotate(14deg)}45%{opacity:1}70%{transform:scale(.94) rotate(-2deg)}100%{opacity:1;transform:none}}
.en-map .en-maptag{left:1%;bottom:0}
.en-astamp.set,.en-sticker.set{animation:none}

/* resumed / back from Kick: the file's pieces are already there, no entrance */
.en-map.set,.en-map.set .en-reg,.en-map.set .en-maptag,.en-stamp.set,.en-pen.set{animation:none}

/* ---------------- the rank screen: what you guessed at enrollment ---------------- */
.en-called{position:absolute;right:8.5%;top:9.5%;z-index:4;display:grid;justify-items:center;gap:.15em;padding:.42em .6em .36em;pointer-events:none;
  font-size:clamp(9px,2.15cqw,17px);color:#b02a15;border:.17em solid currentColor;border-radius:.3em;outline:.06em solid currentColor;outline-offset:-.36em;
  mix-blend-mode:multiply;-webkit-mask:var(--cb-wear);mask:var(--cb-wear);rotate:9deg;animation:en-slam .5s 1.1s cubic-bezier(.3,1.4,.5,1) both}
.en-called.hit{color:#1f5a2f}
.en-called-k{font:700 .78em/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;padding-top:.2em}
.en-called b{font:400 1.3em/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.05em;white-space:nowrap}
.cb-portrait .en-called{font-size:10px;right:5%;top:3.5%}

/* ---------------- the footer's "Re-enroll": pencilled at the end of the fine print ---------------- */
.ap-fine .en-re{display:inline-block;margin:0 0 0 .3em;padding:.22em .5em .16em;border:0;border-radius:2px;cursor:pointer;vertical-align:.05em;rotate:-2deg;
  font:700 max(11px,.92em)/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;color:#2a1806;text-shadow:none;
  background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-kraft);box-shadow:0 1.5px 0 var(--cb-edge),-2px 3px 3px rgba(10,4,0,.4),inset -1px 0 0 rgba(255,214,150,.45);
  transition:translate .14s,rotate .14s}
.ap-fine .en-re:hover{translate:0 -1.5px;rotate:0deg}
.ap-fine .en-re:focus-visible{outline:2px solid var(--cb-kick);outline-offset:2px}

/* ---------------- shorter windows: the card gets the room the crest had ---------------- */
@media (max-height:700px){
  #en-stage{--u:clamp(11px,min(1.75vh,1.02vw),20px)}
}

/* ---------------- reduced motion: no swings, no slams, just fades ---------------- */
@media (prefers-reduced-motion:reduce){
  .en-card.en-pinned,.en-step.en-in,.en-map,.en-reg,.en-maptag,.en-stamp,.en-pen,.en-id,.en-id-stamp,.en-called,.en-astamp,.en-sticker{animation:en-fade .35s ease-out both}
  .en-card.en-out{animation:en-fadeout .3s ease-in both}
  .en-opt{transition:opacity .25s,filter .25s}
  .en-light{transition:none}
}
@keyframes en-fade{0%{opacity:0}100%{opacity:1}}
@keyframes en-fadeout{0%{opacity:1}100%{opacity:0}}