/* v8 page + sign styles. The world itself is world.js; the sign's position + twine come from sign.js. */
/* ======================================================================================
CARDBOARD KIT (cb-*): UI made OF the homecoming's cardboard, not UI laid over it.
Reuse on any page: copy this block + fonts/ + the SVG filters sign.js injects
(#cb-cut = a die-cut edge that isn't laser-perfect, #cb-ink = ink that bleeds a little,
#cb-print = ink pressed INTO the paper: a hair of spread + speckle dropout).
PIECES
.cb-btn die-cut board button: fiber face, dashed score line inset, a hard corrugated
edge underneath (flutes tinted from the board's own colour) that lifts on hover
and collapses on press.
.cb-tag a .cb-btn with a brass eyelet on the left: answer choices, list items.
.cb-label a small flat die-cut label glued on: thickness edge, fiber, no hover (meta, counters).
.cb-label.cb-stub adds ticket-stub notches at both ends.
.cb-badge a separate little die-cut box pinned ONTO another piece by a brass brad, popping on
with a bounce: CORRECT, .cb-badge-no (NOPE).
Sits on its parent's top edge, so it never covers the parent's text.
.cb-tray a recess pressed into the board; buttons sit IN it (Cuffem's console tray).
.cb-board a flat panel of board with a corrugated cut rim (cards, the footer strip).
.cb-print text printed INTO the card: warm ink, multiply, ink spread + speckle (#cb-print).
.cb-stamp rubber-stamp ink that sits in the paper (multiply + worn mask).
.cb-letters layered cut-board lettering: dark cut edge > kraft board > painted face.
Needs three stacked spans:
..
...... (sign.js cbLetters() builds them).
BOARD COLOURS (put one on any .cb-btn / .cb-tag / .cb-label / .cb-badge; each sets --cb-face,
--cb-edge-c = the cut edge, --cb-text = the ink printed on it, --cb-score = the score line):
.cb-kraft (default) .cb-cream .cb-brass .cb-orange (sunset) .cb-sky (dusk blue) .cb-lilac (dusk cloud)
.cb-green (laurel) .cb-kick (live accent) .cb-red (brick/poster)
Meaning on the quiz: a choice turns solid .cb-right (Kick green) or .cb-wrong (brick red) on
reveal; choices themselves only use the non-semantic boards (cream, brass, sky, lilac), never red/green/orange.
Light: the world's sun is low on the RIGHT, behind. Shadows fall down-left, rims catch on the right.
Palette: kraft/cream board, laurel green, brass, brick red, sunset orange, dusk blue; Kick green = live/right.
====================================================================================== */
@font-face{font-family:'Homecoming Reference';src:url(fonts/Homecoming-Reference.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Homecoming Parade';src:url(fonts/Homecoming-Parade.ttf) format('truetype');font-display:swap}
@font-face{font-family:'NOC Varsity';src:url(fonts/kcc-varsity.woff2) format('woff2');font-weight:800;font-display:swap}
/* body type that prints well on a parade ticket (self-hosted, OFL: fonts/FONTS-LICENSE.txt):
Zilla Slab = a letterpress-y slab for sentences, Barlow Condensed = the gothic printed on tags and stubs */
@font-face{font-family:'Zilla Slab';src:url(fonts/ZillaSlab-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Zilla Slab';src:url(fonts/ZillaSlab-500italic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Zilla Slab';src:url(fonts/ZillaSlab-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Zilla Slab';src:url(fonts/ZillaSlab-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/BarlowCondensed-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/BarlowCondensed-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/BarlowCondensed-700.woff2) format('woff2');font-weight:700;font-display:swap}
@property --e{syntax:'';inherits:false;initial-value:4px}
:root{
--cb-kraft:#cf9558;--cb-kraft-lt:#e8b97c;--cb-cream:#f4e4c1;--cb-edge:#5a3314;--cb-ink:#1d140b;
--cb-laurel:#1f5a2f;--cb-laurel-dk:#0f2f17;--cb-brass:#d9a441;--cb-kick:#53fc18;
--cb-red:#c2361f;--cb-red-dk:#62170b;--cb-orange:#f08a32;--cb-orange-dk:#8a3e0c;--cb-sky:#8fb0e0;--cb-sky-dk:#3d5384;--cb-lilac:#c3a6e6;--cb-lilac-dk:#5a3f86;
--cb-mustard:#efc04e;--cb-mustard-dk:#86601a;--cb-right:#45cf1d;--cb-right-dk:#17560c;
--cb-print-ink:#22160b;
/* paper fiber: dark specks + long pale fibers, tiled */
--cb-fiber:url("data:image/svg+xml;utf8,");
--cb-grain:url("data:image/svg+xml;utf8,");
/* worn rubber-stamp mask: ink drops out in patches */
--cb-wear:url("data:image/svg+xml;utf8,");
--cb-wear-lt:url("data:image/svg+xml;utf8,");
/* the corrugated core seen on a cut edge: kraft flutes, shaded underneath */
--cb-flutes:linear-gradient(rgba(40,16,4,.42),rgba(40,16,4,.12)),repeating-linear-gradient(90deg,#6b3f1a 0 1px,#c88e52 1px 3px,#9a6431 3px 4px);
--cb-light:linear-gradient(100deg,rgba(40,16,4,.14),transparent 35%,rgba(255,226,170,.22));
--cb-brad:radial-gradient(circle at 50% 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em);
}
.cb-btn{--cb-face:var(--cb-kraft);--cb-edge-c:var(--cb-edge);--cb-text:var(--cb-ink);--cb-score:rgba(45,24,8,.42);--e:4px;
position:relative;isolation:isolate;border:0;border-radius:4px;padding:.62em 1.2em .58em;color:var(--cb-text);
background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face);
outline:1.5px dashed var(--cb-score);outline-offset:-5px; /* the score line, like Cuffem's topstitch */
box-shadow:0 var(--e) 0 var(--cb-edge-c),-5px calc(var(--e) + 4px) 7px rgba(45,18,4,.38),inset -2px 0 0 rgba(255,214,150,.5),inset 1px 1px 0 rgba(255,240,210,.25);
text-shadow:.5px .4px 0 rgba(120,60,20,.22); /* a hair of misregistration */
transform:rotate(var(--rot,0deg));transition:transform .12s,box-shadow .12s,--e .12s,filter .15s,background-color .2s}
/* the cut edge: corrugated flutes in darker shades of the board's own colour */
.cb-btn::before{content:'';position:absolute;left:0;right:0;top:100%;height:var(--e);border-radius:0 0 4px 4px;pointer-events:none;
background:linear-gradient(rgba(30,12,2,.38),rgba(30,12,2,.1)),
repeating-linear-gradient(90deg,var(--cb-edge-c) 0 1px,color-mix(in srgb,var(--cb-face) 62%,var(--cb-edge-c)) 1px 3px,color-mix(in srgb,var(--cb-face) 30%,var(--cb-edge-c)) 3px 4px)}
.cb-btn:not(:disabled):hover{--e:6px;transform:translateY(-2px) rotate(var(--rot,0deg));box-shadow:0 var(--e) 0 var(--cb-edge-c),-7px calc(var(--e) + 7px) 10px rgba(45,18,4,.32),inset -2px 0 0 rgba(255,214,150,.6),inset 1px 1px 0 rgba(255,240,210,.25)}
.cb-btn:not(:disabled):active{--e:0px;transform:translateY(4px) rotate(var(--rot,0deg));box-shadow:0 0 0 var(--cb-edge-c),-1px 1px 2px rgba(45,18,4,.45),inset -2px 0 0 rgba(255,214,150,.4),inset 0 2px 4px rgba(45,18,4,.25)}
.cb-btn:focus-visible{outline:2.5px solid var(--cb-ink);outline-offset:-4px}
.cb-btn.cb-green{text-shadow:.6px .5px 0 rgba(0,0,0,.35)}
.cb-btn.cb-kick{text-shadow:.6px .5px 0 rgba(255,255,220,.35)}
.cb-btn.cb-red{text-shadow:.6px .5px 0 rgba(40,4,0,.4)}
.cb-tag{text-align:left;padding-left:2.1em;
background:radial-gradient(circle at .95em 50%,#2a1a0c 0 .17em,#7a5418 .19em,#f6dc8e .26em,#b98a32 .36em,#6b4a16 .42em,rgba(45,18,4,.35) .45em,transparent .55em),
var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face)}
/* flat die-cut label, glued on */
.cb-label{--cb-face:var(--cb-kraft);--cb-edge-c:var(--cb-edge);--cb-text:var(--cb-ink);
position:relative;display:inline-block;border-radius:2px;padding:.42em .7em .32em;color:var(--cb-text);line-height:1;
background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face);
box-shadow:0 2px 0 var(--cb-edge-c),-3px 4px 4px rgba(40,16,4,.32),inset -1.5px 0 0 rgba(255,214,150,.4);transform:rotate(var(--rot,0deg))}
/* stub notches: two half-holes punched at the ends, showing the dark board behind */
.cb-label.cb-stub{padding-inline:.95em;
-webkit-mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 50%,#0000 .3em,#000 .33em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .3em,#000 .33em) right/51% 100% no-repeat}
/* the little box pinned onto a piece: CORRECT / NOPE */
.cb-badge{--cb-face:var(--cb-laurel);--cb-edge-c:var(--cb-laurel-dk);--cb-text:var(--cb-kick);
position:absolute;z-index:3;top:-1.45em;right:.45em;pointer-events:none;white-space:nowrap;
font:.8em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.09em;text-shadow:none;color:var(--cb-text);
padding:.46em .7em .36em 1.5em;border-radius:2px;rotate:var(--brot,-4deg);
background:var(--cb-brad) .72em 50%/1.1em 1.1em no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face);
outline:1px dashed color-mix(in srgb,var(--cb-text) 45%,transparent);outline-offset:-3px;
box-shadow:0 3px 0 var(--cb-edge-c),-4px 6px 5px rgba(30,12,2,.45),inset -1.5px 0 0 rgba(255,214,150,.35);
animation:cb-pop .5s cubic-bezier(.25,1.6,.45,1) both}
.cb-badge::before{content:'';position:absolute;left:0;right:0;top:100%;height:3px;border-radius:0 0 2px 2px;
background:linear-gradient(rgba(30,12,2,.35),rgba(30,12,2,.1)),repeating-linear-gradient(90deg,var(--cb-edge-c) 0 1px,color-mix(in srgb,var(--cb-face) 55%,var(--cb-edge-c)) 1px 3px)}
.cb-badge-no{--cb-face:#f6e8c8;--cb-edge-c:#7a5530;--cb-text:var(--cb-red);--brot:5deg}
@keyframes cb-pop{0%{scale:.2;opacity:0;translate:0 -.6em}55%{scale:1.14;opacity:1;translate:0 0}78%{scale:.95}100%{scale:1}}
/* board colours: one set of variables, every piece reads them (after the pieces, so they win) */
.cb-kraft {--cb-face:var(--cb-kraft);--cb-edge-c:var(--cb-edge);--cb-text:var(--cb-ink);--cb-score:rgba(45,24,8,.42)}
.cb-cream {--cb-face:#f6e8c8;--cb-edge-c:#8a6234;--cb-text:var(--cb-ink);--cb-score:rgba(110,70,30,.4)}
.cb-brass {--cb-face:var(--cb-mustard);--cb-edge-c:var(--cb-mustard-dk);--cb-text:#2a1806;--cb-score:rgba(90,55,10,.45)}
.cb-orange{--cb-face:var(--cb-orange);--cb-edge-c:var(--cb-orange-dk);--cb-text:#2a1204;--cb-score:rgba(100,40,5,.45)}
.cb-sky {--cb-face:var(--cb-sky);--cb-edge-c:var(--cb-sky-dk);--cb-text:#141a30;--cb-score:rgba(30,40,80,.4)}
.cb-lilac {--cb-face:var(--cb-lilac);--cb-edge-c:var(--cb-lilac-dk);--cb-text:#1e1230;--cb-score:rgba(60,30,90,.4)}
.cb-green {--cb-face:var(--cb-laurel);--cb-edge-c:var(--cb-laurel-dk);--cb-text:#f3dc9a;--cb-score:rgba(217,164,65,.55)}
.cb-kick {--cb-face:var(--cb-kick);--cb-edge-c:#1d5c10;--cb-text:#0f220b;--cb-score:rgba(15,40,10,.5)}
.cb-red {--cb-face:var(--cb-red);--cb-edge-c:var(--cb-red-dk);--cb-text:#fbe8c8;--cb-score:rgba(255,220,180,.5)}
.cb-tray{border-radius:8px;padding:.7em;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)}
.cb-board{--cb-face:var(--cb-cream);background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,linear-gradient(var(--cb-face),var(--cb-face)) padding-box,var(--cb-flutes) border-box;border:5px solid transparent;border-radius:6px}
/* printed into the card: warm ink, multiplied into the paper, a hair of spread + speckle where the plate missed */
.cb-print{color:var(--cb-print-ink);mix-blend-mode:multiply;filter:url(#cb-print);font-kerning:normal;text-rendering:optimizeLegibility}
.cb-stamp{display:inline-block;font:1em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.06em;color:var(--cb-laurel);border:.16em solid currentColor;border-radius:.3em;padding:.22em .45em .12em;
mix-blend-mode:multiply;-webkit-mask:var(--cb-wear);mask:var(--cb-wear);transform:rotate(-8deg)}
.cb-letters{display:inline-grid;position:relative}
.cb-letters>span{grid-area:1/1;position:relative} /* positioned, so the face paints over the filtered layers */
.cb-l-edge{color:var(--cb-edge);-webkit-text-stroke:.21em var(--cb-edge);paint-order:stroke fill;transform:translateY(.07em);filter:url(#cb-cut) drop-shadow(-.07em .07em .05em rgba(40,16,4,.5))}
.cb-l-board{color:var(--cb-kraft-lt);-webkit-text-stroke:.14em var(--cb-kraft);paint-order:stroke fill;filter:url(#cb-cut);text-shadow:-1px 0 0 rgba(255,226,170,.6)}
.cb-l-face .cb-alt{--cb-lface:var(--cb-red)}
.cb-l-face .cb-alt,.cb-l-face{background:var(--cb-fiber),linear-gradient(100deg,rgba(0,0,0,.18),transparent 45%,rgba(255,220,140,.25)),var(--cb-lface,var(--cb-laurel));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes cb-slam{0%{transform:scale(1.9) rotate(-14deg);opacity:0}60%{transform:scale(.94) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-8deg)}}
@keyframes cb-strike{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cb-punch{0%{transform:translateY(4px)}40%{transform:translateY(4px) scale(.97,.93)}100%{transform:none}}
/* ====================================================================================== */
#back,#mid,#near{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#back{z-index:1}#mid{z-index:4}#near{z-index:6}
#fans{z-index:5}
#confetti{z-index:7}
:root{--kick:#53fc18;--ink:#1b140c}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#120c08;overflow:hidden;font-family:'Roboto Slab',Georgia,serif;color:var(--ink)}
button{font:inherit;cursor:pointer}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:6}
#fans{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#status{position:fixed;right:14px;top:10px;z-index:6;font:12px/1 'Roboto Slab';color:#f4e7c8cc;text-shadow:0 1px 2px #000}
/* ---- the sign: hangs in the focus plane between the towers, lashed to the inner finials (sign.js) ---- */
#ticketWrap{position:fixed;left:var(--sx,30vw);top:var(--sy,20vh);width:var(--sw,40vw);height:var(--sh,50vh);z-index:3;perspective:1400px;container-type:inline-size} /* cqw = % of the sign's width: the type scales with the sign */
.twine,.brad{display:none} /* the old straight-up strings: the twine is drawn by sign.js now */
#twine{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;fill:none;stroke-linecap:round}
#twine .tw-base,#twine .tw-wrap{stroke:#b88e55;stroke-width:var(--tw,2px)}
#twine .tw-twist{stroke:#7a5428;stroke-width:calc(var(--tw,2px) * .55);stroke-dasharray:2 3;opacity:.7}
#twine .tw-base{filter:drop-shadow(0 -.5px 0 rgba(255,214,150,.5))}
#signShade{position:fixed;z-index:4;pointer-events:none;mix-blend-mode:multiply;left:calc(var(--sx) - var(--sw) * .07);width:calc(var(--sw) * 1.02);
top:calc(var(--sy) + var(--sh) - var(--tuck) - 1px);height:calc(var(--tuck) * 1.1);filter:blur(5px);
background:linear-gradient(180deg,rgba(70,30,6,.75),rgba(90,40,10,.35) 55%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 85%,transparent);transform:skewX(32deg)}
.cb-portrait #signShade{display:none}
#twine .tw-wrap{stroke:#c9a46a;filter:drop-shadow(-1px 1px 0 rgba(40,18,4,.55))}
#twine .tw-tail,#twine .tw-loop{stroke:#c49a60;stroke-width:calc(var(--tw,2px) * .85)}
#ticket{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform:rotateX(3deg) rotateZ(-.5deg)}
#ticket.flipped{transform:rotateY(180deg) rotateX(3deg) rotateZ(.5deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;isolation:isolate;padding:6% 10% calc(var(--tuck,0px) + 3%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:url(../assets/ticket.png) center/100% 100% no-repeat;border-radius:6px;
/* the cut edge: the rim catches the sun on the right, the left falls into shade. No drop shadow: it hangs against open sky */
box-shadow:2px 0 0 #f2bd72,3px .5px 0 #a8703a,-1px 0 0 #4e2f16}
/* the world's light on the sign: warm sunset multiply, cooler + darker on the shade side, darker low down
where the bridge blocks the sky (::after); then the rim light + golden haze from the low sun at right (::before) */
.face::after{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;z-index:3;mix-blend-mode:multiply;
background:linear-gradient(90deg,rgba(112,92,140,.42),rgba(150,120,150,.12) 30%,transparent 55%),
linear-gradient(0deg,rgba(120,52,14,.42),transparent 26%),
linear-gradient(180deg,rgba(150,80,40,.18),transparent 12%),#ffe2bc}
.face::before{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;z-index:4;mix-blend-mode:screen;
background:linear-gradient(270deg,rgba(255,176,80,.75) 0,rgba(255,150,60,.3) 1.2%,rgba(255,140,60,.08) 6%,transparent 14%),
radial-gradient(70% 80% at 108% 30%,rgba(255,150,70,.32),transparent 70%),
linear-gradient(180deg,rgba(255,170,110,.1),transparent 40%)}
/* brads through the board, one head per face; the twine loops around them */
.pin{position:absolute;top:6.5%;width:clamp(11px,2.6cqw,22px);aspect-ratio:1;transform-style:preserve-3d;pointer-events:none}
.pin.l{left:5.5%}.pin.r{right:5.5%}
.pin::before,.pin::after{content:'';position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
background:radial-gradient(circle at 62% 36%,#fff4cc,#e3b85a 30%,#8a6220 70%,#4b3210);box-shadow:-2px 2px 1.5px rgba(40,16,4,.55)}
.pin::before{transform:translateZ(1.5px)}.pin::after{transform:rotateY(180deg) translateZ(1.5px)}
/* ---- front face ---- */
.badge{display:inline-flex;align-items:center;gap:.6em;font:clamp(10px,2.85cqw,22px)/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.1em;padding:.6em 1.1em .5em;
color:var(--cb-kick);border-radius:3px;
background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(0,0,0,.2),transparent 40%,rgba(255,220,140,.14)),var(--cb-laurel);
outline:1.5px dashed rgba(217,164,65,.5);outline-offset:-4px;
box-shadow:0 3px 0 var(--cb-laurel-dk),-4px 6px 5px rgba(45,18,4,.35),inset -2px 0 0 rgba(255,200,120,.35);position:relative}
.badge::before{content:'';position:absolute;left:0;right:0;top:100%;height:3px;background:linear-gradient(rgba(30,12,2,.35),rgba(30,12,2,.1)),repeating-linear-gradient(90deg,#0b2412 0 1px,#245a33 1px 3px,#163d21 3px 4px)}
.badge i{color:var(--cb-brass);font-style:normal;font-family:Georgia,serif}
h1{font:clamp(26px,10cqw,84px)/.98 'Homecoming Reference','Alfa Slab One',Georgia,serif;letter-spacing:.02em;margin:.42em 0 .32em;white-space:nowrap}
.sub,.tag{mix-blend-mode:multiply} /* printed: the ink sits in the paper */
.sub{font:500 clamp(11px,3.05cqw,25px)/1.32 'Zilla Slab','Bree Serif',Georgia,serif;max-width:27em;margin:0 0 .9em;color:var(--cb-print-ink);filter:url(#cb-print)}
.cb-tray:has(#start){padding:.55em .8em .8em}
.cta{font:clamp(14px,4.35cqw,34px)/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.06em;padding:.6em 1.5em .5em;white-space:nowrap}
/* a strip of masking tape holding the corner (the "cuff" accent) */
.cta::after{content:'';position:absolute;left:-.45em;top:-.3em;width:1.9em;height:.7em;opacity:.8;transform:rotate(-24deg);pointer-events:none;
background:var(--cb-fiber),linear-gradient(90deg,rgba(0,0,0,0) 0 2px,rgba(242,226,186,.86) 2px calc(100% - 2px),rgba(0,0,0,0) 0);
-webkit-mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);box-shadow:none;filter:drop-shadow(-1px 1px 1px rgba(45,18,4,.3))}
/* punched at the gate: a hole goes through, the board squashes */
.cta.punched{animation:cb-punch .3s ease-out;background:radial-gradient(circle at 92% 50%,#140b04 0 .3em,#3c240c .33em,rgba(60,36,12,.0) .42em),var(--cb-fiber),var(--cb-grain),var(--cb-face)}
.front .tag{font:italic 500 clamp(9px,2.45cqw,18px)/1.2 'Zilla Slab','Bree Serif',serif;margin-top:.9em;color:#4a3420;filter:url(#cb-print)}
/* ---- back face: the quiz ---- */
#quiz{--fit:1}
.back{transform:rotateY(180deg);justify-content:space-between;padding:4.2% 7% calc(var(--tuck,0px) + 2.5%)}
/* header strip: a band of laurel board glued across the top, with a red stub (question no.) and a brass score chip on it */
.qmeta{display:flex;align-items:center;justify-content:space-between;gap:.7em;width:100%;white-space:nowrap;position:relative;
font:clamp(9px,2.05cqw,16px)/1 'Homecoming Parade','Roboto Slab',serif;letter-spacing:.1em;color:#f3dc9a;margin:0 0 .75em;padding:.38em .55em .34em;border-radius:3px;
background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(0,0,0,.22),transparent 40%,rgba(255,220,140,.16)),var(--cb-laurel);
outline:1.2px dashed rgba(217,164,65,.45);outline-offset:-3px;rotate:-.4deg;
box-shadow:0 3px 0 var(--cb-laurel-dk),-4px 6px 5px rgba(45,18,4,.32),inset -2px 0 0 rgba(255,200,120,.3)}
.qmeta::before{content:'';position:absolute;left:0;right:0;top:100%;height:3px;background:linear-gradient(rgba(30,12,2,.35),rgba(30,12,2,.1)),repeating-linear-gradient(90deg,#0b2412 0 1px,#245a33 1px 3px,#163d21 3px 4px)}
.qmeta #qcat{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:center;opacity:.95}
.qmeta .cb-label{font-size:.95em;flex:none;margin:-.75em 0}
#qnum{--rot:-3deg}
#qscore{--rot:2.5deg}
.qtext{font:600 calc(clamp(12px,3.45cqw,29px) * var(--fit))/1.2 'Zilla Slab','Bree Serif',serif;margin:0 0 .55em;letter-spacing:-.003em;text-wrap:balance}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:.95em .6em;width:100%;border-radius:8px;padding:.85em .55em .75em;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)}
.choice{font:600 calc(clamp(10.5px,2.95cqw,22px) * var(--fit))/1.12 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.005em;padding:.5em .7em .45em 1.95em;text-wrap:pretty}
.choice:nth-child(4n+1){--rot:-.6deg}.choice:nth-child(4n+2){--rot:.5deg}.choice:nth-child(4n+3){--rot:.4deg}.choice:nth-child(4n){--rot:-.4deg}
.choice:disabled{cursor:default}
.choice:disabled:not(.right):not(.wrong){filter:saturate(.72) brightness(.93);--e:2px}
/* reveal: the right tag turns to solid green board, a wrong pick to solid red board; each gets its own pinned badge */
.choice.right{--cb-face:var(--cb-right);--cb-edge-c:var(--cb-right-dk);--cb-text:#0b2006;--cb-score:rgba(10,50,5,.45);z-index:2;text-shadow:.5px .4px 0 rgba(230,255,200,.35)}
.choice.wrong{--cb-face:var(--cb-red);--cb-edge-c:var(--cb-red-dk);--cb-text:#fbe8c8;--cb-score:rgba(255,220,180,.45);z-index:2;text-shadow:.6px .5px 0 rgba(40,4,0,.45)}
.choice.wrong::after{content:'';position:absolute;inset:.25em 1em .25em 1.9em;pointer-events:none;opacity:.55;animation:cb-strike .35s .1s ease-out both;
background:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat}
.qfoot{display:flex;align-items:center;gap:.9em;width:100%;margin-top:.6em;min-height:2.4em;position:relative}
.fact{flex:1;text-align:left;font:500 calc(clamp(9.5px,2.4cqw,18px) * var(--fit))/1.25 'Zilla Slab','Bree Serif',serif;margin:0}
.fact:not(:empty)::before{content:'THE TEA ▸';margin-right:.35em;font:700 1.02em/1 'Barlow Condensed',sans-serif;letter-spacing:.07em;color:#b02a15} /* the ticket's second ink */
/* before the pick, the foot of the ticket carries its fine print (and holds the fact's room, so nothing jumps) */
.qfoot:has(.fact:empty)::before{content:'ADMIT ONE ★ HOMECOMING PARADE ★ NOV 19';position:absolute;left:0;right:0;text-align:center;font:clamp(8px,1.9cqw,15px)/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.22em;
color:#9a3a1c;opacity:.55;mix-blend-mode:multiply;filter:url(#cb-print);pointer-events:none}
.fact a{color:#14451f;font-weight:700;text-decoration-thickness:1px;text-underline-offset:2px}
.next{flex:none;font:clamp(11px,2.6cqw,20px)/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.08em;padding:.62em 1.9em .52em 2em;visibility:hidden;white-space:nowrap;
/* brass brads at each end hold the board on */
background:radial-gradient(circle at .75em 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em),
radial-gradient(circle at calc(100% - .7em) 50%,#fff2c0 0 .06em,#d9a441 .12em,#6b4a16 .24em,rgba(0,0,0,.35) .28em,transparent .34em),
var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face)}
/* ---- rank screen (quiz.js rewrites the back face) ---- */
.rank{font:clamp(28px,9.6cqw,84px)/1 'Homecoming Reference','Alfa Slab One',serif;margin:.3em 0 .25em;--cb-lface:var(--cb-laurel);white-space:nowrap}
#quiz:has(.rank) .badge{background:var(--cb-fiber),var(--cb-grain),linear-gradient(100deg,rgba(0,0,0,.2),transparent 40%,rgba(255,220,140,.14)),var(--cb-red);color:#fbe8c8;
outline-color:rgba(255,220,180,.5);box-shadow:0 3px 0 var(--cb-red-dk),-4px 6px 5px rgba(45,18,4,.35),inset -2px 0 0 rgba(255,200,120,.35)}
#quiz:has(.rank) .badge::before{background:linear-gradient(rgba(30,12,2,.35),rgba(30,12,2,.1)),repeating-linear-gradient(90deg,#4a1008 0 1px,#8f2614 1px 3px,#6e1a0c 3px 4px)}
#quiz:has(.rank) .badge i{color:var(--cb-mustard)}
/* "7 of 10 right." becomes a brass score chip glued under the rank */
#quiz:has(.rank) .sub{font:700 clamp(11px,3cqw,24px)/1 'Barlow Condensed',sans-serif;letter-spacing:.07em;text-transform:uppercase;margin:.15em 0 .9em;filter:none;mix-blend-mode:normal;
color:#2a1806;padding:.4em .8em .32em;border-radius:2px;rotate:-1.5deg;max-width:none;
background:var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-mustard);box-shadow:0 3px 0 var(--cb-mustard-dk),-4px 5px 5px rgba(40,16,4,.32),inset -1.5px 0 0 rgba(255,230,160,.5)}
.share{font:600 clamp(10px,2.75cqw,20px)/1.3 'Barlow Condensed','Roboto Slab',sans-serif;letter-spacing:.02em;white-space:pre;margin:.3em 0 1.1em;padding:.75em 1.2em;color:#2a1d10;transform:rotate(-.8deg);position:relative;
background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,#f6e8c8 padding-box,var(--cb-flutes) border-box;border:4px solid transparent;border-radius:4px;
box-shadow:-5px 6px 7px rgba(45,18,4,.35)}
/* tape over the share card's top edge */
.share::after{content:'';position:absolute;left:50%;top:-.5em;width:3.6em;height:1.1em;translate:-50% 0;rotate:3deg;opacity:.7;
background:var(--cb-fiber),rgba(242,226,186,.82);-webkit-mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);mask:linear-gradient(90deg,transparent,#000 3px calc(100% - 3px),transparent);filter:drop-shadow(-1px 1px 1px rgba(45,18,4,.3))}
#quiz:has(.rank){justify-content:center;gap:.2em}
#quiz > div:last-child{align-items:flex-start}
#copy.cta{font-size:clamp(12px,3.4cqw,26px)!important}
/* ---- footer (#bar): the float's front apron lives in footer.css ---- */
/* ---- tall screens: the painting is cropped to the middle, so the sign fills the width (sign.js sizes it);
the ticket art would stretch, so the faces become plain kit board with a corrugated rim ---- */
.cb-portrait .face{background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,radial-gradient(120% 90% at 50% 40%,#f8ead0,#ecd3a8) padding-box,var(--cb-flutes) border-box;border:7px solid transparent;
padding:7% 6% 0;outline:1.5px solid rgba(150,100,45,.45);outline-offset:-14px}
.cb-portrait .front{padding-bottom:calc(var(--tuck,0px) + 8%)}
.cb-portrait h1{white-space:normal;font-size:clamp(28px,9.5vw,44px)}
.cb-portrait .choices{grid-template-columns:1fr;gap:1em}
.cb-portrait .choice{font-size:calc(15px * var(--fit))}
.cb-portrait .qtext{font-size:calc(16px * var(--fit))}
.cb-portrait .qmeta{font-size:10.5px;letter-spacing:.05em;gap:.45em}
.cb-portrait .qfoot{flex-wrap:wrap;justify-content:flex-end;gap:.4em;margin-top:.45em}
.cb-portrait .back{padding-top:10%;padding-bottom:calc(var(--tuck,0px) + 3%);justify-content:flex-start}
.cb-portrait .back .qtext{margin-bottom:.8em}
.cb-portrait .fact{font-size:calc(13px * var(--fit));flex-basis:100%}
.cb-portrait .pin{width:13px}
/* the phone sign is tall and roomy: the cqw sizes come out too small, so set the type for a hand-held read */
.cb-portrait .badge{font-size:13px}
.cb-portrait .sub{font-size:16px}
.cb-portrait .front .tag{font-size:13px}
.cb-portrait .cta{font-size:21px}
.cb-portrait .next{font-size:14px}
.cb-portrait .rank{font-size:clamp(28px,9.5vw,42px);white-space:normal}
.cb-portrait #quiz:has(.rank) .sub{font-size:16px}
.cb-portrait .share{font-size:15px}
.cb-portrait #copy.cta{font-size:16px!important}
@media (prefers-reduced-motion:reduce){
#ticket,.cb-btn{transition:none}
.choice.wrong::after,.cta.punched,.cb-badge{animation:none}
}
/* ---- share.js: a friend's dare (?vs=), a brass note pinned over the sign's top-right corner (out of the layout, so the
sign's fit pass is untouched); quiz.js's CHALLENGE A FRIEND button on the rank screen ---- */
.vs-dare{position:absolute;z-index:6;top:10.5%;right:-4%;max-width:24%;rotate:6deg;text-align:center;pointer-events:none;
font:700 clamp(9px,2.05cqw,16px)/1.08 'Barlow Condensed',sans-serif;letter-spacing:.03em;padding:.7em .9em .55em 1.9em;
background:var(--cb-brad) .62em .95em/1.05em 1.05em no-repeat,var(--cb-fiber),var(--cb-grain),var(--cb-light),var(--cb-face);
animation:cb-pop .6s .8s cubic-bezier(.25,1.6,.45,1) both}
.vs-dare .vs-k{display:block;white-space:nowrap}
.vs-dare .vs-s{display:block;white-space:nowrap;font-size:1.32em;letter-spacing:.02em;margin-top:.12em}
.vs-dare .vs-go{display:block;margin-top:.22em;font:1.5em/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.06em;color:var(--cb-red)}
#quiz .next.dare{--cb-face:var(--cb-sky);--cb-edge-c:var(--cb-sky-dk);--cb-text:#141a30;--cb-score:rgba(30,40,80,.4);--rot:1deg;
font:clamp(11px,2.55cqw,20px)/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.08em;padding:.66em 1.4em .56em;white-space:nowrap}
.cb-portrait #quiz .next.dare{font-size:14px}
.cb-portrait .vs-dare{top:auto;bottom:calc(var(--tuck,0px) + 1%);right:2%;max-width:44%;font-size:12px}
@media (prefers-reduced-motion:reduce){.vs-dare{animation:none}}