/* ============================================================================
   CMA Charity Golf Day 2026 — SIGNWRITTEN
   Built from the physical objects of a border-club charity golf day: the corflute
   hole-sponsor sign, the ruled Ambrose card on kraft, the enamel club badge and
   the raffle stub — mounted on a painted bottle-green board, with one white
   ribbon running down the spine of every screen that unfolds to become the whole
   screen when you reach the cause.

   LAWS
     · board green and ink are CHROME ONLY. No content surface is ever dark.
     · border-radius: 0 everywhere, except the two round club crests and the
       golf ball inside the CMA badge.
     · zero blurred shadows. Depth is a hard -6px solid offset, or nothing.
     · Montserrat 400/500/700/800, Open Sans 700/800 and all italics are unused.
     · red #ED3324 never carries type, except the full stop at >=76px.
     · gold is never type on the sheet (1.4:1) — only on board/ink.
   ========================================================================== */

@font-face{
  font-family:Montserrat; src:url(assets/fonts/montserrat-var-latin.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Open Sans'; src:url(assets/fonts/opensans-var-latin.woff2) format('woff2');
  font-weight:300 800; font-style:normal; font-display:block;
}

@property --ribbon-open{syntax:'<number>';inherits:true;initial-value:0}

:root{
  /* ---------- GROUNDS (four, and only four) ---------- */
  --board:#10261B;
  --sheet:#F2EBDC;
  --kraft:#E4DAC6;
  --white:#FFFFFF;

  /* ---------- INK ---------- */
  --ink:#0B1E22;
  --ink-70:rgba(11,30,34,.70);
  --ink-60:rgba(11,30,34,.66);
  --ink-22:rgba(11,30,34,.22);
  --ink-12:rgba(11,30,34,.12);
  --cream:#F2EBDC;
  --cream-28:rgba(242,235,220,.28);
  --cream-40:rgba(242,235,220,.40);

  /* ---------- ACCENTS: red is paint · crimson is ink · gold is metal ---------- */
  --red:#ED3324;
  --crimson:#B9203D;
  --gold:#FCBF14;
  --navy:#1F295A;

  /* ---------- PLAYER COLOURS ---------- */
  --pA:#10261B; --pA-on:#F2EBDC;
  --pB:#B9203D; --pB-on:#FFFFFF;
  --pC:#FCBF14; --pC-on:#0B1E22;
  --pD:#1F295A; --pD-on:#F2EBDC;

  /* ---------- TYPE ---------- */
  --f-display:Montserrat,system-ui,'Helvetica Neue',Arial,sans-serif;
  --f-text:'Open Sans',system-ui,Arial,sans-serif;

  --t-xl:112px;      --lh-xl:98px;
  --t-l:76px;        --lh-l:68px;
  --t-m:44px;        --lh-m:46px;
  --t-fig-xxl:200px; --lh-fxxl:170px;
  --t-money:132px;   --lh-money:114px;
  --t-fig-xl:84px;   --lh-fxl:76px;
  --t-fig-l:64px;    --lh-fl:56px;
  --t-eyebrow:22px;  --lh-eb:26px;
  --t-rule:20px;     --lh-rule:20px;
  --t-btn:28px;      --lh-btn:28px;
  --t-sign:24px;     --lh-sign:24px;
  --t-body-l:30px;   --lh-body-l:48px;
  --t-body:26px;     --lh-body:42px;
  --t-meta:22px;     --lh-meta:30px;
  --t-quiet:52px;    --lh-quiet:74px;
  --t-quiet-2:34px;  --lh-quiet2:51px;

  /* ---------- GEOMETRY ---------- */
  --axis:96px;         /* content axis, measured off the ribbon */
  --col:888px;
  --gutter:96px;
  --spine-x:40px;
  --spine-w:14px;
  --r-struct:3px solid var(--ink);
  --r-sub:3px solid var(--ink-22);

  --plate-h:300px;
  --stage-y:300px;
  --stage-h:860px;
  --shelf-y:1160px;
  --shelf-h:460px;
  --well-y:1620px;
  --rail-y:1836px;
  --rail-h:84px;

  /* ---------- MOTION ---------- */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);

  --d-sheet:260ms; --d-ribbon:420ms; --d-rise:200ms; --d-press:160ms;
  --e-sheet:cubic-bezier(.16,.84,.44,1);
  --e-rise:cubic-bezier(.2,.9,.2,1);
  --e-press:cubic-bezier(.3,1.4,.5,1);
}

/* ══════════════════════════════════════════════════════════════════ reset ══ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--board); color:var(--ink);
  font:400 var(--t-body)/var(--lh-body) var(--f-text);
  font-variant-numeric:tabular-nums lining-nums;
  overflow:hidden; height:100vh;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
img{max-width:100%;height:auto;display:block;border:0}
/* author `display` beats the UA [hidden] rule, so restate it with intent */
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums lining-nums}
input{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;border-radius:0;
  -webkit-user-select:text;user-select:text}
input[type=search]::-webkit-search-cancel-button{display:none}
ol,ul{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);
  padding:16px 24px;font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;letter-spacing:.2em}
.skip:focus{left:0}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.mute :focus-visible,#v-cause :focus-visible{outline-color:var(--red)}

/* ═══════════════════════════════════════════════════════ type primitives ══ */
.xl{font:900 var(--t-xl)/var(--lh-xl) var(--f-display);text-transform:uppercase;
  letter-spacing:-.03em;margin:0 0 38px -.055em}
.l{font:900 var(--t-l)/var(--lh-l) var(--f-display);text-transform:uppercase;
  letter-spacing:-.02em;margin:0 0 30px -.055em}
.m{font:900 var(--t-m)/var(--lh-m) var(--f-display);letter-spacing:-.015em;margin:0 0 16px}
.stop{color:var(--red);font-style:normal}
.eyebrow{font:600 var(--t-eyebrow)/var(--lh-eb) var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;margin-right:-.18em}
.body{font:400 var(--t-body)/var(--lh-body) var(--f-text);max-width:62ch}
.bodyl{font:400 var(--t-body-l)/var(--lh-body-l) var(--f-text);max-width:56ch}
.meta{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);letter-spacing:.01em;color:var(--ink-70)}

/* THE RULE-LABEL ATOM — the label sits on a 3px rule that runs out to the column
   edge beside it. Repeats ~40x; it is what turns two ubiquitous Google fonts into
   a house style. The rule is an ::after so it can never sit under the text. */
.rl{
  display:flex; align-items:center; gap:14px;
  font:600 var(--t-rule)/var(--lh-rule) var(--f-display);
  text-transform:uppercase; letter-spacing:.20em;
  color:var(--ink); margin:0 0 20px;
}
.rl::after{content:'';flex:1 1 auto;min-width:24px;height:3px;background:currentColor;opacity:.9}
.rl.bare::after{display:none}
.pane > * + .rl,.rlblock > * + .rl,.view > * + .rl{margin-top:34px}
.rl > i,.rl > b{font:inherit;font-style:normal}

/* ══════════════════════════════════════════════ THE FOLDED WHITE RIBBON ══ */
#ribbon{
  position:fixed;inset:0;z-index:13;background:var(--white);pointer-events:none;
  --ribbon-open:0;
  clip-path:polygon(
    calc(40px + 1040px * var(--ribbon-open)) 0,
    calc(54px + 1026px * var(--ribbon-open)) 0,
    calc(54px + 1026px * var(--ribbon-open)) calc(1822px - 1822px * var(--ribbon-open)),
    calc(68px + 1012px * var(--ribbon-open)) calc(1836px - 1836px * var(--ribbon-open)),
    100% calc(1836px - 1836px * var(--ribbon-open)),
    100% 100%, 0 100%,
    0 calc(1836px - 1836px * var(--ribbon-open)),
    calc(40px + 1040px * var(--ribbon-open)) calc(1836px - 1836px * var(--ribbon-open))
  );
  transition:--ribbon-open var(--d-ribbon) var(--e-rise);
}
body[data-view=cause] #ribbon{--ribbon-open:1}

/* ═══════════════════════════════════════════════════ A · HEADER PLATE ══ */
.plate{
  position:fixed;left:0;right:0;top:0;height:var(--plate-h);z-index:12;
  background:var(--board);color:var(--cream);overflow:hidden;
  transition:height var(--d-ribbon) var(--e-rise);
}
body[data-view=cause] .plate{height:0}
.plate-badge{position:absolute;left:var(--axis);top:44px;width:150px;height:139px;padding:0}
.plate-badge img{width:150px;height:139px}
.plate-meta{position:absolute;left:270px;top:52px;right:352px;color:var(--cream)}
.plate-meta .rl{font-size:18px;line-height:24px;letter-spacing:.16em}
.plate-meta .rl{color:var(--cream);margin-bottom:14px}
.plate-meta .rl::after{display:none}
.plate-clock{position:absolute;right:var(--gutter);top:44px;text-align:right;width:280px}
.clock{display:block;font:900 var(--t-fig-xl)/var(--lh-fxl) var(--f-display);
  letter-spacing:-.03em;color:var(--gold)}
.clock-rule{display:block;width:240px;height:4px;background:var(--gold);margin-top:16px;margin-left:auto}

/* THE HOLE RAIL — display only */
.rail{position:absolute;left:var(--axis);right:124px;top:252px;height:24px;
  display:flex;gap:4px;pointer-events:none}
.rail-t{flex:1 1 0;height:24px;background:var(--cream-28);position:relative}
.rail-t.nov::before{content:'';position:absolute;left:50%;top:-12px;width:6px;height:6px;
  margin-left:-3px;background:var(--gold)}
.rail-t[data-p="0"]{background:var(--pA);box-shadow:inset 0 0 0 2px var(--cream-40)}
.rail-t[data-p="1"]{background:var(--pB)}
.rail-t[data-p="2"]{background:var(--pC)}
.rail-t[data-p="3"]{background:var(--pD)}
.plate::after{content:'';position:absolute;left:var(--axis);right:124px;top:288px;height:3px;
  background:var(--cream-28)}
body[data-view=cause] .plate::after{display:none}

/* ═══════════════════════════════════════════════════════════ B · STAGE ══ */
.stage{
  position:fixed;left:var(--axis);top:var(--stage-y);width:var(--col);height:var(--stage-h);
  z-index:10;background:var(--sheet);overflow:hidden;
  box-shadow:-6px 0 0 var(--ink);
  transition:top var(--d-ribbon) var(--e-rise),height var(--d-ribbon) var(--e-rise),
             left var(--d-ribbon) var(--e-rise),width var(--d-ribbon) var(--e-rise);
}
@media (min-width:700px){
  body[data-view=course] .stage{height:1064px}
  body[data-view=cause] .stage{
    left:0;top:0;width:100vw;height:1620px;background:var(--white);
    box-shadow:none;z-index:14}
}
.vtitle{
  position:absolute;left:0;top:26px;margin:0;
  font:900 var(--t-l)/var(--lh-l) var(--f-display);text-transform:uppercase;
  letter-spacing:-.02em;margin-left:-.055em;padding-left:44px;color:var(--ink)
}
body[data-view=cause] .vtitle{display:none}
.view{display:none;position:absolute;left:0;right:0;top:126px;bottom:0;padding:0 44px 0 44px}
body[data-view=today]    #v-today,
body[data-view=course]   #v-course,
body[data-view=teams]    #v-teams,
body[data-view=drives]   #v-drives,
body[data-view=play]     #v-play,
body[data-view=novelty]  #v-novelty,
body[data-view=partners] #v-partners,
body[data-view=gallery]  #v-gallery,
body[data-view=cause]    #v-cause{display:block}
@media (min-width:700px){
  body[data-view=cause] #v-cause{top:0;padding:0 var(--gutter)}
  body[data-view=course] #v-course{top:100px}
}

.pane{display:none;animation:sheetIn var(--d-sheet) var(--e-sheet) both}
.pane.on{display:block}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ══════════════════════════════════════════════════════ C · ACTION SHELF ══ */
.shelf{
  position:fixed;left:var(--axis);top:var(--shelf-y);width:var(--col);height:var(--shelf-h);
  z-index:10;background:var(--sheet);box-shadow:-6px 0 0 var(--ink);
  border-top:var(--r-struct);
}
@media (min-width:700px){
  body[data-view=course] .shelf{top:1364px;height:256px}
  body[data-view=drives] .stage{height:760px}
  body[data-view=drives] .shelf{top:1060px;height:560px}
}
body[data-view=cause] .shelf{display:none}
.sh{display:none;position:absolute;inset:0;padding:26px 44px}
/* keep every shelf clear of the pane stepper's band (88px + 20px inset) */
.sh[data-for=today],.sh[data-for=play],.sh[data-for=novelty],
.sh[data-for=gallery]{padding-bottom:120px}
body[data-view=today]    .sh[data-for=today],
body[data-view=course]   .sh[data-for=course],
body[data-view=teams]    .sh[data-for=teams],
body[data-view=drives]   .sh[data-for=drives],
body[data-view=play]     .sh[data-for=play],
body[data-view=novelty]  .sh[data-for=novelty],
body[data-view=partners] .sh[data-for=partners],
body[data-view=gallery]  .sh[data-for=gallery]{display:block}

.act{
  display:block;width:100%;min-height:88px;padding:0 28px;background:var(--ink);color:var(--cream);
  font:600 var(--t-btn)/var(--lh-btn) var(--f-display);text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:12px;
  display:flex;align-items:center
}
.act.ghost{background:transparent;color:var(--ink);border:var(--r-struct)}
.act.sq{width:96px;min-width:96px;justify-content:center;font-size:34px;letter-spacing:0}
.step{
  min-height:88px;min-width:170px;padding:0 20px;background:var(--ink);color:var(--cream);
  font:600 var(--t-btn)/var(--lh-btn) var(--f-display);text-transform:uppercase;letter-spacing:.12em;
  display:flex;align-items:center;justify-content:center
}
.step[disabled]{opacity:.34;pointer-events:none}
.stepper{position:absolute;right:44px;bottom:20px;display:flex;align-items:center;gap:16px}
.stepper .rl{margin:0;}
.stepper .rl::after{display:none}

/* ═══════════════════════════════════════════════════════ D · NAV WELL ══ */
.well{
  position:fixed;left:0;right:0;top:var(--well-y);bottom:0;background:var(--ink);
  padding:4px var(--gutter) 0;
  display:grid;grid-template-columns:repeat(4,216px);grid-auto-rows:100px;gap:8px;
  align-content:start;justify-content:start
}
.tile{
  position:static;width:auto;height:100px;overflow:hidden;background:transparent;color:var(--cream);
  border-top:1px solid var(--cream-28);padding:12px 12px 0;
  font:600 22px/24px var(--f-display);text-transform:uppercase;letter-spacing:.16em
}
.tile-m{display:block;width:28px;height:28px;margin-bottom:8px;color:var(--cream)}
.tile-m svg{width:28px;height:28px}
.tile .lab-l{display:block;margin-right:-.16em}
.tile .lab-s{display:none}
.tile.on{background:var(--sheet);color:var(--ink);border-top:4px solid var(--gold)}
.tile.more{display:none}
/* the drive card is a phone tool: the kiosk only ever showed a demo of it,
   so the kiosk nav drops it and offers the QR handoff in that cell instead */
.tile[data-view=drives]{display:none}
body[data-mode=phone] .tile[data-view=drives]{display:flex}
.tile.on .tile-m{color:var(--ink)}
.wrnav{position:fixed;left:0;right:0;top:var(--rail-y);height:var(--rail-h);z-index:20}
.wrrail{
  width:100%;height:100%;background:var(--white);display:flex;align-items:center;
  padding:0 var(--gutter);gap:24px
}
.wrrail-lockup{width:200px;height:48px}
.wrrail-mark,.wrrail-lab{display:none}
.wrrail-go{margin-left:auto;font:600 24px/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink);margin-right:-.18em}
body[data-view=cause] .wrrail{background:var(--white)}

/* ══════════════════════════════════════════════════════════ 01 TODAY ══ */

.now{background:var(--kraft);border-left:4px solid var(--red);border-top:6px solid var(--gold);
  padding:22px 28px;margin-bottom:26px;min-height:150px}
.now .eyebrow{color:var(--ink-70);display:block;margin-bottom:8px}
.now-label{font:900 52px/54px var(--f-display);letter-spacing:-.02em;display:block;margin-bottom:8px}
.now-detail{font:400 var(--t-body)/34px var(--f-text);color:var(--ink-70);max-width:56ch}
.now-next{display:block;margin-top:12px;font:600 var(--t-meta)/var(--lh-meta) var(--f-text);
  color:var(--ink-70);text-transform:uppercase;letter-spacing:.1em}
.now-fig{font:900 var(--t-fig-xl)/var(--lh-fxl) var(--f-display);letter-spacing:-.03em;display:block}
.now.wrap{background:var(--ink);color:var(--cream);border-left-color:var(--gold)}
.now.wrap .eyebrow,.now.wrap .now-detail{color:var(--cream-40)}
body:not(.reduce) .now{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{border-top-color:var(--gold)}50%{border-top-color:rgba(252,191,20,.94)}}

.rlblock{margin-bottom:26px}
.runsheet li{display:flex;align-items:baseline;gap:20px;border-top:3px solid var(--ink-22);
  padding:10px 0;background:var(--kraft)}
.runsheet li:first-child{border-top:0}
.runsheet .r-t{flex:0 0 168px;padding-left:14px;font:900 30px/34px var(--f-display);
  letter-spacing:-.01em;color:var(--ink)}
.runsheet .r-l{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);text-transform:uppercase;
  letter-spacing:.08em}
.runsheet li.is-now{background:var(--ink);color:var(--cream)}
.runsheet li.is-now .r-t{color:var(--gold)}
.runsheet li.is-done .r-t,.runsheet li.is-done .r-l{color:var(--ink-60)}

.buyins{margin-bottom:26px}
.buyins-row{display:flex;gap:10px}
.buyin{flex:1;background:var(--kraft);border-top:4px solid var(--red);padding:14px 16px}
.buyin i{display:block;font:600 var(--t-rule)/var(--lh-rule) var(--f-display);
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-70);font-style:normal;margin-bottom:8px}
.buyin b{display:block;font:900 44px/44px var(--f-display);letter-spacing:-.02em}
.buyin b s{font-size:.52em;text-decoration:none;vertical-align:.34em;margin-right:.02em}
.buyin.win b{border-bottom:6px solid var(--gold);display:inline-block;padding-bottom:4px}
.buyins-note{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--ink-70);margin-top:12px}

.band{display:block;width:calc(100% + 88px);margin:0 -44px 26px;background:var(--white);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:26px 44px}
.band img{width:420px;height:101px;margin-bottom:18px}
.band > b{display:block;font:600 32px/44px var(--f-display);color:var(--ink);max-width:24ch}
.band i{display:block;margin-top:12px;font:600 var(--t-meta)/var(--lh-meta) var(--f-text);
  font-style:normal;color:var(--ink-70)}

.handoff-in{display:flex;gap:28px;align-items:flex-start}
.qrbox{display:block;flex:0 0 360px;width:360px;height:360px;background:var(--white);
  border:var(--r-struct);display:flex;align-items:center;justify-content:center}
.qrbox img{width:320px;height:320px}
.handoff-txt b{display:block;font:900 var(--t-m)/var(--lh-m) var(--f-display);letter-spacing:-.015em;
  margin-bottom:14px;word-break:break-word}
.handoff-txt i{font-style:normal;font:400 var(--t-body)/var(--lh-body) var(--f-text);color:var(--ink-70)}

/* ══════════════════════════════════════════════════════ 02 COURSE MAP ══ */
/* 661px of image + 12px mount + 3px frame each side = 691, and 934px tall:
   the tallest sheet that fits the 964px course stage uncropped. */
.mount{position:relative;width:691px;max-width:100%;margin:0 auto;padding:12px;
  background:var(--sheet);border:var(--r-struct)}
.mapimg{width:100%;aspect-ratio:2382/3368;object-fit:contain;display:block}
.marks{position:absolute;left:12px;top:12px;right:12px;bottom:12px}
.marks{pointer-events:none}
.reg{position:absolute;width:14px;height:14px;background:var(--ink)}
.reg-tl{left:0;top:0}.reg-tr{right:0;top:0}.reg-bl{left:0;bottom:0}.reg-br{right:0;bottom:0}

/* THE TEE MARKERS — a small numbered plate centred EXACTLY on the tee point, so
   it lines up with the tee on the club's own sheet. Measured against the map's
   centre lines, holes[].x/y are the tees. Deliberately small: at the shipped map
   width holes 5 and 9 are only 30px apart, and a bigger plate would collide. */
.mk{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;
  pointer-events:auto;display:flex;align-items:center;justify-content:center}
.mk-plate{width:30px;height:30px;background:var(--sheet);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font:900 17px/1 var(--f-display);color:var(--ink)}
.mk.nov .mk-plate{background:var(--crimson);color:var(--white)}
.mk.on{z-index:4}
.mk.on .mk-plate{width:44px;height:44px;font-size:24px;background:var(--gold);color:var(--ink);
  border-color:var(--ink);outline:3px solid var(--ink);outline-offset:2px}
body:not(.reduce) .mk.on .mk-plate{animation:flutter 220ms var(--e-sheet) 1}
@keyframes flutter{0%{transform:rotate(-4deg)}55%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.chiprail{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;width:100%}
.chip{width:auto;height:88px;background:var(--sheet);border:var(--r-struct);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:900 34px/34px var(--f-display);color:var(--ink);position:relative}
.chip.nov{border-left:6px solid var(--red)}
.chip i{font-style:normal;font:600 13px/13px var(--f-display);text-transform:uppercase;
  letter-spacing:.1em;margin-top:2px}
.chip.on{background:var(--ink);color:var(--cream)}
.sh[data-for=course] .rl{margin-bottom:14px}

/* ═══════════════════════════════════════════════════ 03 FIND MY TEAM ══ */
.qline{display:flex;align-items:stretch;height:112px;margin-bottom:18px;
  border-bottom:2px solid var(--ink);width:792px;max-width:100%}
.qline-ico{flex:0 0 112px;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center}
.qline input{flex:1;min-width:0;border:0;background:transparent;padding:0 20px;
  font:400 28px/1 var(--f-text)}
.qline input::placeholder{color:var(--ink-70)}
.qline-x{flex:0 0 88px;font:400 44px/1 var(--f-display);text-align:center;color:var(--ink-70)}

.fchips{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fchip{min-height:44px;padding:0 18px;border:var(--r-sub);
  font:600 var(--t-rule)/44px var(--f-display);text-transform:uppercase;letter-spacing:.16em}
.fchip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* the results list: one 64px row per team, hole numeral in gold on ink */
.trows{border-top:3px solid var(--ink)}
.trow{display:flex;align-items:center;gap:0;width:100%;height:64px;background:var(--kraft);
  border-bottom:1px solid var(--ink-22)}
.trow-h{flex:0 0 64px;align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--gold);font:900 30px/1 var(--f-display);font-style:normal}
.trow-h.cont{background:var(--ink-12);color:transparent}
.trow-t{flex:0 0 74px;text-align:center;font:900 24px/1 var(--f-display);font-style:normal;
  color:var(--ink-70)}
.trow-n{flex:1 1 auto;min-width:0;padding-right:16px;font:900 28px/32px var(--f-display);
  letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-c{flex:0 0 232px;padding-right:14px;text-align:right;
  font:600 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--ink-70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
mark{background:linear-gradient(rgba(252,191,20,.4),rgba(252,191,20,.4));color:inherit}

.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{flex:1 1 0;min-width:0;height:88px;border:var(--r-struct);display:flex;align-items:center;
  justify-content:center;font:600 var(--t-btn)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.12em}
.tab.on{background:var(--ink);color:var(--cream)}
.teegrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  grid-auto-rows:64px;align-content:start;width:100%}
.tee{height:64px;border:var(--r-struct);display:flex;flex-direction:column;align-items:center;
  justify-content:center;font:900 34px/34px var(--f-display)}
.tee i{font-style:normal;font:600 13px/13px var(--f-display);letter-spacing:.14em;color:var(--ink-70)}
.tee.on{background:var(--ink);color:var(--cream)}
.tee.on i{color:var(--cream-40)}
.azrail{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;width:100%}
.az{height:88px;border:var(--r-sub);display:flex;align-items:center;justify-content:center;
  font:600 32px/1 var(--f-display)}
.az.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.teamact .act{margin-bottom:10px}
.teamact .act.gold{border-top:4px solid var(--gold)}

/* team card */
.tcard-top{display:flex;gap:22px;align-items:flex-start;margin-bottom:20px}
.teesq{flex:0 0 96px;width:96px;height:96px;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font:900 46px/1 var(--f-display)}
.tcard-h{font:900 var(--t-m)/var(--lh-m) var(--f-display);letter-spacing:-.015em;margin:0}
.capname{font:600 26px/32px var(--f-text);border-bottom:4px solid var(--gold);display:inline-block}
.plist li{display:flex;align-items:center;gap:16px;min-height:88px;
  border-bottom:1px solid var(--ink-22);padding:0 4px}
.plist .p-n{flex:1;font:400 28px/34px var(--f-text)}
.plist .p-h{flex:0 0 120px;text-align:right;font:600 28px/1 var(--f-display)}
.tocome{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--ink-70);
  border-top:1px dashed var(--ink-22);padding-top:14px;margin-top:4px;max-width:52ch}
.p-note{display:block;font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-70);margin-top:6px}
.nosheet{font:600 var(--t-rule)/1.6 var(--f-display);text-transform:uppercase;letter-spacing:.16em;
  color:var(--crimson);margin-top:14px;display:block}
.nomatch{margin-bottom:20px}


/* ══════════════════════════════════════════════════════ 04 MY DRIVES ══ */
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.slot{display:flex;align-items:center;gap:16px;height:96px;background:var(--kraft);
  border:var(--r-sub);padding:0 16px}
.slot-k{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  font:900 30px/1 var(--f-display)}
.slot input{flex:1;min-width:0;border:0;background:transparent;font:400 26px/1 var(--f-text)}
.slot input::placeholder{color:var(--ink-60)}
.slot[data-k="0"] .slot-k{background:var(--pA);color:var(--pA-on)}
.slot[data-k="1"] .slot-k{background:var(--pB);color:var(--pB-on)}
.slot[data-k="2"] .slot-k{background:var(--pC);color:var(--pC-on)}
.slot[data-k="3"] .slot-k{background:var(--pD);color:var(--pD-on)}

.tally{margin-bottom:16px}
.tally-banner{min-height:56px;display:flex;align-items:center;padding:0 20px;
  font:600 26px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.12em}
.tally-banner.met{background:var(--ink);color:var(--cream);border-bottom:4px solid var(--gold)}
.tally-banner.short{background:var(--crimson);color:var(--white)}
.tally-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;position:relative}
.tcol{padding:10px 12px;background:var(--sheet);border:1px solid var(--ink-22)}
.tcol .rl{margin-bottom:6px;}
.tcol .rl::after{display:none}
.tcol b{display:block;font:900 var(--t-fig-l)/var(--lh-fl) var(--f-display);letter-spacing:-.02em}
.tcol.met b{color:var(--ink);border-bottom:4px solid var(--gold);display:inline-block}
.tcol.short{border:3px solid var(--crimson)}
.tcol.short b{color:var(--crimson)}
.tcol-s{display:block;font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;margin-top:6px;color:var(--ink-70)}
.tcol.short .tcol-s{color:var(--crimson)}
.tally-done{position:absolute;left:0;bottom:-8px;height:4px;background:var(--gold);width:100%;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--e-rise)}
.tally.all .tally-done{transform:scaleX(1)}

.matrix{width:100%;border-collapse:collapse}
.mx{display:block;width:100%;background:var(--kraft)}
.mx-r{display:grid;grid-template-columns:88px repeat(4,1fr)}
.mx-h{font:600 var(--t-rule)/40px var(--f-display);text-transform:uppercase;letter-spacing:.18em;
  text-align:center;height:40px;border-bottom:1px solid var(--ink-22)}
.mx-n{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:900 34px/1 var(--f-display);border-bottom:1px solid var(--ink-22);
  border-right:1px solid var(--ink-22)}
.mx-n.nov{border-left:4px solid var(--red)}
.mx-n i{font-style:normal;font:600 13px/1 var(--f-display);letter-spacing:.1em;color:var(--ink-70)}
.mx-c{height:64px;border-bottom:1px solid var(--ink-22);border-right:1px solid var(--ink-22);
  display:flex;align-items:center;justify-content:center;background:transparent}
.mx-r:nth-child(even) .mx-c{background:var(--ink-12)}
.mx-c.on{background:var(--sheet);box-shadow:inset 0 0 0 3px var(--ink)}
.mx-c svg{width:34px;height:34px}
.mx-c path{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44;
  transition:stroke-dashoffset var(--d-press) var(--e-press)}
.mx-c.on path{stroke-dashoffset:0}
.mx-c[data-k="0"] path{stroke:var(--pA)} .mx-c[data-k="1"] path{stroke:var(--pB)}
.mx-c[data-k="2"] path{stroke:#8a6708}  .mx-c[data-k="3"] path{stroke:var(--pD)}
.matrix-step{display:flex;align-items:center;gap:12px;position:absolute;
  left:44px;bottom:20px}
.matrix-step .act.sq{width:80px;min-width:80px}
.matrix-step .rl{min-width:132px;justify-content:center}
.matrix-step .rl{margin:0;}
.matrix-step .rl::after{display:none}
.drivefoot{display:flex;gap:10px;margin-top:18px}
.drivefoot .act{width:auto;min-width:260px;margin:0}
.kioskcard{display:flex;gap:26px;align-items:flex-start;margin-top:8px}
.kioskcard .m{max-width:16ch;margin-bottom:12px}

/* ══════════════════════════════════════════════════════ 05 HOW IT PLAYS ══ */
.numlist{margin-bottom:30px}
.numlist li{display:flex;gap:20px;margin-bottom:18px;align-items:flex-start}
.numlist > li > b{flex:0 0 72px;width:72px;height:72px;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font:900 40px/1 var(--f-display)}
.numlist p{font:400 var(--t-body-l)/var(--lh-body-l) var(--f-text);max-width:46ch}
.numlist p b,.collects span b{font-weight:600;font-family:var(--f-text);
  background:none;color:inherit;width:auto;height:auto;display:inline}
.figpair{display:flex;gap:10px}
.figpair span{flex:1;background:var(--kraft);padding:16px 20px}
.figpair .rl{margin-bottom:6px;}
.figpair .rl::after{display:none}
.figpair > span > b{display:block;font:900 var(--t-fig-xl)/var(--lh-fxl) var(--f-display);letter-spacing:-.03em}
.redblock{border-left:8px solid var(--red);padding-left:24px;margin-bottom:24px}
.redblock p + p{margin-top:14px}
.eighteen{display:flex;flex-wrap:wrap;gap:8px}
.eighteen s{width:36px;height:36px;border:var(--r-sub);text-decoration:none;display:block}
.eighteen s.t{background:var(--pA);border-color:var(--pA)}
.inset{background:var(--kraft);padding:20px 24px;margin-bottom:22px}
.inset p + p{margin-top:12px}

/* ══════════════════════════════════════════════════════ THE HOLE SIGN ══ */
.sign{background:var(--sheet);border:var(--r-struct);margin-bottom:16px}
.sign.real img{display:block;width:100%;height:auto}
.sign-bar{height:44px;background:var(--ink);color:var(--white);display:flex;align-items:center;
  padding:0 16px;font:600 var(--t-sign)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.22em;margin-right:0}
.sign-panel{padding:20px 16px;background:var(--sheet);
  background-image:repeating-linear-gradient(90deg,rgba(11,30,34,.045) 0 1px,transparent 1px 9px)}
.sign-name{font:900 var(--t-m)/var(--lh-m) var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.sign.long .sign-name{font-size:34px;line-height:38px}
.sign-hole{display:block;font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-70);margin-top:8px}
.signgrid .sign-hole{font-size:14px;letter-spacing:.14em;margin-top:6px;padding:0 10px 10px}

/* ══════════════════════════════════════════════════════ 06 NOVELTY ══ */
.nov-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.nov-head .m,.nov-head .l{margin:0}
.nomatch .m{margin-bottom:16px}
.nov-pen-line{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--crimson);
  margin-top:10px}
.nov-block.compact .body{margin-top:0}
.nov-kind{display:inline-flex;align-items:center;height:44px;padding:0 16px;background:var(--ink);
  color:var(--cream);font:900 28px/1 var(--f-display);letter-spacing:.08em;flex:0 0 auto}
.nov-cost{font:900 40px/40px var(--f-display);letter-spacing:-.02em;font-style:normal}
.nov-cost s{font-size:.52em;text-decoration:none;vertical-align:.34em}
#v-novelty .sign.real{max-width:330px}
.money{font:900 var(--t-money)/var(--lh-money) var(--f-display);letter-spacing:-.04em;
  display:inline-block;margin-bottom:8px}
.money s{font-size:.52em;text-decoration:none;vertical-align:.5em;margin-right:.02em}
.money u{text-decoration:none;border-bottom:6px solid var(--gold);padding-bottom:6px}
.pen{background:var(--kraft);border:4px solid var(--red);padding:16px 20px;margin:16px 0}
.pen .rl{margin-bottom:8px}
.pen .rl::after{display:none}
.proceeds{display:block;border-top:3px solid var(--ink);margin:18px 0 20px;padding-top:14px;
  font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;letter-spacing:.2em}

/* ══════════════════════════════════════════════════════ 07 PARTNERS ══ */
.pcard{background:var(--sheet);border:var(--r-sub);padding:22px 24px;margin-bottom:14px}
.pcard img{max-height:56px;width:auto;margin-bottom:14px}
.pcard.cma img{width:420px;max-height:none;height:auto}
.pcard.cyb{border-left:8px solid var(--crimson);padding-top:28px;padding-bottom:28px}
.pcard.cyb img{width:380px;max-height:none;height:auto}
.pcard b{display:block;font:900 var(--t-m)/var(--lh-m) var(--f-display);letter-spacing:-.015em}
.pcard .rl{padding-top:14px;margin-bottom:0;margin-top:12px;}
.crests{display:flex;gap:44px;margin-bottom:24px}
.crest{text-align:center}
.crest span{display:flex;width:300px;height:300px;border-radius:50%;background:var(--sheet);
  align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--ink-22);
  outline:1px solid var(--ink-22);outline-offset:8px;margin-bottom:18px}
.crest img{width:240px;height:240px;border-radius:50%}
.crest b{display:block;font:900 32px/38px var(--f-display);letter-spacing:-.015em}
.supp li{display:flex;align-items:center;gap:14px;border-top:3px solid var(--ink-22);
  min-height:64px;font:600 var(--t-eyebrow)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em}
.supp li::before{content:'';width:12px;height:12px;background:var(--ink);flex:0 0 12px}
.signgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
.signgrid .sign{margin:0}
.signgrid .sign{border-width:2px}
.signgrid .sign-panel{padding:10px}
.signgrid .sign-name{font-size:21px;line-height:25px}
.signgrid .sign.long .sign-name{font-size:17px;line-height:21px}

/* ══════════════════════════════════════════════════════ 08 GALLERY ══ */
.galnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.galnav .act{margin:0}
.galnav .act.ghost{flex:1 1 100%;margin-top:6px}
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.thumb .rl{overflow-wrap:anywhere}
.thumb{display:block}
.thumb span{display:block;padding:6px;background:var(--sheet);border:2px solid var(--ink)}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover}
.thumb .rl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;padding-top:10px;margin-bottom:0;
  font-size:15px;letter-spacing:.14em;line-height:18px}
.thumb .rl::after{display:none}
.thumb-n{color:var(--ink-70);margin-right:8px}
.thumb .rl > i{display:inline}
.thumb .rl::after{display:none}
.thumb-n{color:var(--ink-70)}
.lightbox{position:fixed;left:0;right:0;top:0;height:var(--shelf-y);z-index:30;
  background:var(--board);display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;position:absolute;inset:0;display:flex;flex-direction:column}
.lightbox img{flex:1;min-height:0;width:100%;object-fit:contain}
.lb-bar{background:var(--ink);color:var(--cream);padding:20px var(--gutter);
  display:flex;gap:20px;align-items:baseline}
.lb-bar .rl{margin:0;color:var(--gold);}
.lb-bar .rl::after{display:none}
.lb-bar span:last-child{font:400 var(--t-body)/1.3 var(--f-text)}

/* ══════════════════════════════════════════════════════ 09 THE CAUSE ══ */
#v-cause .pane{padding-top:124px;max-width:1080px}
.cause-wr{width:420px;height:101px;margin-bottom:40px}
.quiet{font:300 var(--t-quiet)/var(--lh-quiet) var(--f-text);max-width:700px;color:var(--ink)}
.cause-rule{display:block;width:240px;height:2px;background:var(--ink-22);margin:34px 0}
.quiet2{font:400 var(--t-quiet-2)/var(--lh-quiet2) var(--f-text);max-width:620px;color:var(--ink)}
.stub{width:792px;max-width:100%;background:var(--sheet);padding:22px 32px 20px;margin:22px 0 20px;
  position:relative}
.stub::before{content:'';position:absolute;left:0;right:0;top:0;height:12px;
  background:radial-gradient(circle at 6px 6px,var(--white) 5px,transparent 5px) 0 0/12px 12px}
.stub .rl{padding-top:26px}
.stub b{display:block;font:900 40px/46px var(--f-display);letter-spacing:-.015em;margin-bottom:16px}
.stub p{font:400 var(--t-body)/var(--lh-body) var(--f-text);max-width:62ch}
.stub p + p{margin-top:10px}
.cause-foot{font:600 26px/1.4 var(--f-display);text-transform:uppercase;letter-spacing:.2em;
  padding-right:.2em;max-width:100%}
.cause-link{display:inline-block;margin-top:14px;font:600 var(--t-meta)/1 var(--f-text);
  color:var(--ink-70);text-decoration:underline;text-underline-offset:6px}
.cause-link.flat{color:var(--ink-70);text-decoration:none}
body[data-view=cause] .well{background:var(--ink)}
body[data-view=cause] .tile{opacity:.62}
body[data-view=cause] .tile.on{opacity:1}

/* ══════════════════════════════════════════════════════ HOLE DRAWER ══ */
.drawer{position:fixed;left:var(--axis);top:700px;width:var(--col);height:1136px;z-index:24;
  background:var(--sheet);border-top:var(--r-struct);box-shadow:-6px 0 0 var(--ink);
  padding:26px 44px 0;overflow:hidden;
  transform:translateY(100%);transition:transform var(--d-rise) var(--e-rise)}
.drawer.open{transform:translateY(0)}
.drawer-x{position:absolute;right:0;top:0;width:96px;height:96px;background:var(--ink);
  color:var(--cream);font:400 48px/1 var(--f-display);display:flex;align-items:center;
  justify-content:center;z-index:2}
.drawer-in{height:900px;overflow:hidden}
.dr-num{font:900 118px/100px var(--f-display);letter-spacing:-.04em;
  margin-left:-.055em;display:block;margin-bottom:8px}
/* a real sign is 1.5:1, so cap it or one sponsor eats the whole drawer */
.drawer .sign.real{max-width:340px}
.dr-signs.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dr-signs.two{grid-template-columns:1fr 1fr}
.dr-signs.two .sign.real{max-width:none}
.dr-signs.two .sign{margin:0}
.dr-signs.two .sign-name{font-size:25px;line-height:29px}
.drawer .sign{margin-bottom:10px}
.drawer .sign-bar{height:36px;font-size:20px}
.drawer .sign-panel{padding:12px 16px}
.drawer .sign-name{font-size:29px;line-height:33px}
.drawer .sign.long .sign-name{font-size:26px;line-height:30px}
.drawer .rl{margin-bottom:12px}
.drawer .body{font-size:21px;line-height:29px}
.drawer .m{font-size:29px;line-height:33px}
.drawer .nov-kind{height:36px;font-size:24px;margin-bottom:10px}
.drawer .nov-cost{font-size:28px;line-height:28px}
.drawer .pen{padding:10px 14px;margin:10px 0}
.drawer .proceeds{margin-top:12px;padding-top:10px}
.drawer .dr-team{min-height:72px}
.dr-eb{color:var(--ink-70);display:block}
.drawer-foot{position:absolute;left:44px;right:44px;bottom:24px;display:flex;gap:12px;align-items:center}
.drawer-foot .act{margin:0}
.holestep{font:900 30px/1 var(--f-display);min-width:150px;text-align:center}
.dr-team{display:flex;align-items:center;gap:18px;width:100%;min-height:88px;
  border-top:1px solid var(--ink-22)}
.dr-team .teesq{width:56px;height:56px;flex-basis:56px;font-size:26px}

/* ══════════════════════════════════════════════ ON-SCREEN KEYBOARD ══ */
.kb{position:fixed;left:var(--axis);top:1200px;width:var(--col);z-index:26;
  background:var(--sheet);padding:12px 24px 24px}
.kb-row{display:flex;gap:8px;margin-bottom:8px;justify-content:center}
.key{width:96px;height:88px;background:var(--sheet);border-bottom:3px solid var(--ink);
  outline:1px solid var(--ink-22);display:flex;align-items:center;justify-content:center;
  font:600 32px/1 var(--f-display);text-transform:uppercase}
.key.space{width:200px}
.key.del{width:168px;background:var(--crimson);color:var(--white);font-size:26px;letter-spacing:.1em}
.key.done{width:208px;background:var(--ink);color:var(--cream);font-size:26px;letter-spacing:.14em}

/* ══════════════════════════════════════════════════════════ ATTRACT ══ */
.attract{position:fixed;inset:0;z-index:60;background:var(--board);overflow:hidden}
.at-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
body:not(.reduce) .attract[data-kind=photo] .at-photo{animation:drift var(--at-dur,7s) linear both}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
.at-white,.at-qr{position:absolute;inset:0;display:none}
.attract[data-kind=white] .at-white{display:block;background:var(--white);padding:760px var(--gutter) 0}
.at-white img{width:420px;height:101px;margin-bottom:40px}
.at-white p{font:300 40px/58px var(--f-text);max-width:620px;color:var(--ink)}
.attract[data-kind=qr] .at-qr{display:flex;flex-direction:column;justify-content:center;
  background:var(--sheet);padding:0 var(--gutter);gap:26px;color:var(--ink)}
.at-qr .rl{margin:0}
.at-qr .rl::after{display:none}
.at-qr .qrbox{width:520px;height:520px;flex:0 0 520px}
.at-qr .qrbox img{width:480px;height:480px}
.at-bar{position:absolute;left:0;right:0;bottom:0;height:148px;background:var(--ink);
  color:var(--cream);padding:0 var(--gutter);display:flex;flex-direction:column;justify-content:center}
.attract[data-kind=white] .at-bar,.attract[data-kind=qr] .at-bar{display:none}
.at-bar{gap:0}
.at-touch{position:absolute;left:var(--gutter);right:var(--gutter);top:-58px;color:var(--cream);
  margin:0;font-size:20px}
.at-touch::after{background:var(--cream-40);height:1px;opacity:1}
.at-eb{color:var(--cream);margin:0 0 10px}
.at-eb::after{display:none}
.at-sign i{display:block;font:600 var(--t-sign)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.22em;color:var(--cream);font-style:normal}
.at-sign b{display:block;font:900 52px/1 var(--f-display);letter-spacing:-.02em;color:var(--cream)}
.at-sign b.long{font-size:40px}

/* ═════════════════════════════════════════════════ 810×1440 tolerance ══ */
@media (min-width:700px) and (max-width:1000px) and (orientation:portrait){
  :root{
    --axis:72px; --col:666px; --gutter:72px; --spine-x:30px; --spine-w:11px;
    --plate-h:225px; --stage-y:225px; --stage-h:645px; --shelf-y:870px; --shelf-h:345px;
    --well-y:1215px; --rail-y:1377px; --rail-h:63px;
    --t-xl:84px;--lh-xl:74px; --t-l:57px;--lh-l:51px; --t-m:34px;--lh-m:36px;
    --t-fig-xxl:150px;--lh-fxxl:128px; --t-money:126px;--lh-money:108px;
    --t-fig-xl:72px;--lh-fxl:63px; --t-fig-l:48px;--lh-fl:42px;
    --t-eyebrow:18px;--lh-eb:22px; --t-rule:18px;--lh-rule:18px; --t-btn:22px;--lh-btn:22px;
    --t-sign:18px;--lh-sign:18px; --t-body-l:23px;--lh-body-l:36px; --t-body:20px;--lh-body:32px;
    --t-meta:18px;--lh-meta:24px; --t-quiet:39px;--lh-quiet:56px; --t-quiet-2:26px;--lh-quiet2:38px;
  }
  body[data-view=course] .stage{height:822px}
  body[data-view=course] .shelf{top:1047px;height:168px}
  body[data-view=drives] .stage{height:570px}
  body[data-view=drives] .shelf{top:795px;height:420px}
  body[data-view=cause] .stage{height:1215px}
  .mount{width:556px}
  .well{grid-template-columns:repeat(4,160px);grid-auto-rows:78px}
  .tile{height:78px}
  .chip{height:66px;font-size:26px}
  .teegrid{grid-auto-rows:48px}
  .tee{height:48px}
  .thumb .rl{font-size:12px;line-height:15px;letter-spacing:.1em}
  .step{min-height:66px;min-width:130px}
  .stepper{bottom:12px}
  .tab{width:auto;height:52px}
  .key{width:70px;height:66px;font-size:24px}
  .kb{top:900px}
  .qrbox{flex-basis:260px;width:260px;height:260px}.qrbox img{width:230px;height:230px}
  .crest span{width:220px;height:220px}.crest img{width:176px;height:176px}
  /* the drawer's own type is absolute px, so it needs its own 810 ladder */
  .drawer{top:560px;height:817px}
  .drawer-in{height:640px}
  .dr-num{font-size:88px;line-height:76px}
  .drawer .rl{margin-bottom:9px}
  .drawer .sign-bar{height:28px;font-size:15px}
  .drawer .sign-panel{padding:9px 12px}
  .drawer .sign-name{font-size:22px;line-height:25px}
  .drawer .sign.long .sign-name{font-size:19px;line-height:22px}
  .dr-signs.two{gap:9px}
  .dr-signs.two .sign-name{font-size:18px;line-height:21px}
  .drawer .body{font-size:16px;line-height:23px}
  .drawer .m{font-size:22px;line-height:25px}
  .drawer .nov-kind{height:30px;font-size:19px;margin-bottom:8px}
  .drawer .nov-cost{font-size:21px;line-height:21px}
  .drawer .pen{padding:8px 11px;margin:8px 0}
  .drawer .proceeds{margin:9px 0 12px;padding-top:8px}
  .drawer .sign.real{max-width:250px}
  .nov-head{gap:10px;margin-bottom:9px}
  .drawer .nov-kind{height:26px;padding:0 10px}
  .drawer .proceeds{font-size:13px;margin:8px 0 10px}
  .drawer .dr-team{min-height:56px}
  .drawer .dr-team .teesq{width:44px;height:44px;flex-basis:44px;font-size:20px}
  .drawer-x{width:72px;height:72px;font-size:36px}
  #v-cause .pane{padding-top:200px}
  .cause-wr{width:360px;height:87px}
  .at-white{padding-top:570px}
  #ribbon{clip-path:polygon(30px 0,41px 0,41px 1366px,52px 1377px,1080px 1377px,
    1080px 1440px,0 1440px,0 1377px,30px 1377px)}
}

/* ════════════════════════════════════════════════════════════ PHONE ══ */
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  :root{
    --t-xl:44px;--lh-xl:40px; --t-l:30px;--lh-l:30px; --t-m:22px;--lh-m:26px;
    --t-fig-xxl:84px;--lh-fxxl:74px; --t-money:68px;--lh-money:60px;
    --t-fig-xl:30px;--lh-fxl:28px; --t-fig-l:34px;--lh-fl:32px;
    --t-eyebrow:13px;--lh-eb:15px; --t-rule:12px;--lh-rule:13px; --t-btn:16px;--lh-btn:17px;
    --t-sign:12px;--lh-sign:13px;
    --t-body-l:19px;--lh-body-l:31px; --t-body:17px;--lh-body:28px; --t-meta:15px;--lh-meta:20px;
    --t-quiet:22px;--lh-quiet:34px; --t-quiet-2:17px;--lh-quiet2:27px;
    --axis:34px; --col:100%; --gutter:20px; --spine-x:14px; --spine-w:6px;
    --r-struct:3px solid var(--ink); --r-sub:2px solid var(--ink);
  }
  html,body{height:auto;overflow:visible}
  /* clear the fixed 72px nav bar (+ home indicator) at the end of the document */
  body{background:var(--sheet);
    padding-bottom:calc(112px + var(--sab))}

  /* one 60px top bar; the venue/date line moves into the document */
  .plate{position:sticky;height:calc(60px + var(--sat));
    padding:var(--sat) var(--gutter) 0 var(--axis);
    display:flex;align-items:center;gap:12px;top:0}
  .plate-badge{position:static;width:44px;height:41px}
  .plate-badge img{width:44px;height:41px}
  .plate-meta,.rail,.plate::after,.clock-rule{display:none}
  .plate-clock{position:static;margin-left:auto}
  .clock{font-size:22px;line-height:22px}
  body[data-view=cause] .plate{height:calc(60px + var(--sat));background:var(--white)}
  body[data-view=cause] .plate-badge{filter:invert(1) brightness(.2)}
  body[data-view=cause] .clock{display:none}

  #ribbon{position:fixed;clip-path:polygon(14px 0,20px 0,20px 100%,14px 100%);
    z-index:6;top:0;bottom:0}
  body[data-view=cause] #ribbon{display:none}
  body[data-view=cause]{background:var(--white)}

  .stage{position:static;width:auto;height:auto;overflow:visible;box-shadow:none;
    background:transparent;padding:0 var(--gutter) 0 var(--axis)}
  body[data-view=cause] .stage{width:auto;height:auto;background:transparent}
  .vtitle{position:static;padding:0;margin:18px 0 16px;left:auto;top:auto}
  .xl{margin-bottom:20px}
  .l{margin-bottom:16px}
  .m{margin-bottom:10px}
  .pane > * + .rl,.rlblock > * + .rl,.view > * + .rl{margin-top:26px}
  .view{position:static;inset:auto;
    padding:0 0 calc(104px + var(--sab))}
  /* a view whose shelf is visible needs less, the shelf carries the rest */
  body[data-view=today] #v-today{padding-bottom:20px}
  body[data-view=cause] #v-cause{padding:0}
  .pane:not([hidden]){display:block !important;animation:none}
  #v-cause .pane{padding-top:8px}

  /* the shelf becomes a sticky slab only where a view needs one */
  .shelf{position:sticky;left:auto;top:auto;width:auto;height:auto;box-shadow:none;
    border-top:0;background:transparent;margin:0 var(--gutter) 0 var(--axis)}
  .sh{position:static;padding:0 0 calc(104px + var(--sab))}
  body[data-view=today] .sh[data-for=today]{display:block}
  .act{min-height:56px;margin-bottom:8px}
  .act.sq{width:56px;min-width:56px;font-size:22px}
  .stepper{display:none !important}

  /* one 72px bottom nav; the cause is its leftmost cell, in pure white */
  .well{position:fixed;top:auto;bottom:0;height:auto;padding:0;display:flex;
    grid-template-columns:none;overflow:hidden;padding-bottom:var(--sab)}
  .tile{position:static;flex:1 1 0;width:auto;min-width:0;height:72px;overflow:hidden;
    padding:11px 2px 0;border-top:0;font-size:11px;line-height:12px;letter-spacing:.06em;
    display:flex;flex-direction:column;align-items:center;text-align:center}
  .tile[data-view=play],.tile[data-view=novelty],
  .tile[data-view=partners],.tile[data-view=gallery],
  .tile.tile-qr{display:none !important}
  .tile[data-view=drives]{display:flex}
  .tile.more{display:flex}
  .tile .lab-l{display:none}
  .tile .lab-s{display:block;margin-right:0}
  .tile-m{margin:0 0 6px}
  .tile-m{width:20px;height:20px;margin-bottom:6px}.tile-m svg{width:20px;height:20px}
  .tile.on{border-top:0;box-shadow:inset 0 4px 0 var(--gold)}
  .wrnav{position:fixed;left:0;right:auto;top:auto;bottom:var(--sab);width:76px;height:72px;
    z-index:23;background:var(--white)}
  .wrrail{height:72px;padding:11px 2px 0;gap:0;flex-direction:column;align-items:center;
    justify-content:flex-start}
  .wrrail-lockup,.wrrail-go{display:none}
  .wrrail-mark{display:block;width:auto;height:26px;margin-bottom:6px}
  .wrrail-lab{display:block;font:600 11px/12px var(--f-display);text-transform:uppercase;
    letter-spacing:.06em;color:var(--ink);text-align:center}
  .well{padding-left:76px}
  .wrrail-go{margin-left:0;font-size:11px;letter-spacing:.12em;display:none}
  body[data-view=cause] .wrrail{box-shadow:inset 0 4px 0 var(--red)}

  /* per-view phone adjustments */
  .now{border-top-width:4px;padding:16px 18px;min-height:0}
  .now-label{font-size:26px;line-height:30px}
  .runsheet .r-t{flex-basis:88px;font-size:20px;line-height:24px;padding-left:10px}
  .buyins-row{flex-wrap:wrap}
  .buyin{flex:1 1 46%}
  .buyin b{font-size:26px;line-height:26px}
  .band{width:calc(100% + var(--gutter) + var(--axis));margin-left:calc(0px - var(--axis));
    padding:20px var(--axis);border-top-width:3px;border-bottom-width:3px}
  .band img{width:200px;height:48px;margin-bottom:12px}
  .band > b{font-size:17px;line-height:26px}
  .handoff{display:none}
  .handoff-phone{margin-top:20px}

  .mount{width:100%;padding:6px}
  /* on phone the chip rail is the only tap route: at 336px the tees are ~16px
     apart, so the markers are labels, not targets */
  .mk{pointer-events:none;width:40px;height:40px;margin:-20px 0 0 -20px}
  .mk-plate{width:20px;height:20px;border-width:1px;font-size:12px}
  .mk.on .mk-plate{width:28px;height:28px;font-size:16px;outline-width:2px}
  .reg{width:8px;height:8px}
  .chiprail{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:16px}
  .chip{width:auto;height:52px;font-size:22px;border-width:2px}
  .chip i{font-size:9px;line-height:9px}
  #chipsPhone{margin-bottom:8px}
  .sh[data-for=course]{display:none !important}

  .qline{width:auto;height:56px}
  .qline-ico{flex-basis:56px}.qline-ico svg{width:22px;height:22px}
  .qline input{font-size:17px;padding:0 12px}
  .qline-x{flex-basis:56px;font-size:30px}
  .trow{height:56px}
  .trow-h{flex-basis:44px;font-size:20px}
  .trow-t{flex-basis:44px;font-size:15px}
  .trow-n{font-size:17px;line-height:22px;padding-right:8px}
  .trow-c{display:none}
  .tabs{gap:6px}
  .tab{width:auto;flex:1;height:56px}
  .teegrid{grid-template-columns:repeat(6,1fr)}
  .tee{height:52px;font-size:22px}
  .azrail{grid-template-columns:repeat(13,1fr);gap:3px}
  .az{height:44px;font-size:17px}
  .teesq{flex-basis:56px;width:56px;height:56px;font-size:26px}
  .plist li{min-height:56px;gap:10px}
  .plist .p-n{font-size:17px;line-height:24px}
  .plist .p-h{flex-basis:78px;font-size:17px}

  .slots{grid-template-columns:1fr;gap:6px}
  .slot{height:64px;padding:0 12px;gap:12px}
  .slot-k{flex-basis:40px;width:40px;height:40px;font-size:20px}
  .slot input{font-size:17px}
  .tally-cols{gap:4px}
  .tcol{padding:8px 6px}
  .tcol b{font-size:30px;line-height:30px}
  .tally-banner{min-height:48px;padding:0 12px;font-size:14px;letter-spacing:.1em}
  .matrix-step,.drivefoot{position:static;justify-content:flex-start}
  .drivefoot{margin-top:16px}
  .drivefoot .act{min-width:0;flex:1}
  .sh[data-for=drives]{display:none !important}
  #matrixPhone{margin-top:24px}
  .mx{grid-template-columns:48px repeat(4,1fr)}
  .mx-n,.mx-c{height:56px}
  .mx-n{font-size:22px}
  .mx-c svg{width:26px;height:26px}
  .kioskcard{display:none}

  .numlist > li > b{flex-basis:44px;width:44px;height:44px;font-size:24px}
  .figpair > span > b{font-size:44px;line-height:44px}
  .eighteen s{width:24px;height:24px}
  .money{font-size:var(--t-money);line-height:var(--lh-money)}
  .sign-bar{height:32px;padding:0 10px}
  .sign-panel{padding:12px 10px}
  .signgrid{grid-template-columns:1fr}
  .contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .thumb .rl{font-size:12px;line-height:15px;letter-spacing:.1em}
  .crests{gap:16px}
  .crest span{width:140px;height:140px;outline-offset:5px}
  .crest img{width:112px;height:112px}
  .crest b{font-size:18px;line-height:22px}
  .pcard.cma img,.pcard.cyb img{width:200px}

  .cause-wr{width:200px;height:48px;margin-bottom:24px}
  .stub{width:auto}
  .stub b{font-size:22px;line-height:28px}
  .cause-foot{font-size:14px;letter-spacing:.14em}
  #v-cause{background:var(--white)}

  .drawer{position:fixed;left:0;top:auto;bottom:72px;width:100%;height:auto;max-height:72vh;
    padding:16px var(--gutter) 0 var(--axis);overflow-y:auto;box-shadow:none;z-index:24}
  .drawer-in{height:auto;padding-bottom:80px}
  .drawer-x{width:56px;height:56px;font-size:32px}
  .dr-num{font-size:56px;line-height:50px;margin-bottom:2px}
  .drawer .sign.real{max-width:none}
  .drawer .sign-bar{height:26px;font-size:12px}
  .drawer .sign-panel{padding:10px 12px}
  .drawer .sign-name{font-size:19px;line-height:23px}
  .drawer .rl{margin-bottom:10px}
  .drawer .m{font-size:19px;line-height:23px}
  .drawer .body{font-size:15px;line-height:23px}
  .drawer .nov-kind{height:26px;padding:0 10px;font-size:15px}
  .drawer .nov-cost{font-size:19px;line-height:19px}
  .drawer .nov-head{gap:8px;margin-bottom:8px}
  .drawer .pen{padding:10px 12px;margin:10px 0}
  .drawer .proceeds{font-size:11px;margin:10px 0 12px;padding-top:8px}
  .drawer .dr-team{min-height:56px;gap:12px}
  .drawer .dr-team .teesq{width:40px;height:40px;flex-basis:40px;font-size:18px}
  .drawer-x{width:44px;height:44px;font-size:26px}
  .drawer-foot .act{min-height:48px}
  .drawer-foot{position:sticky;left:auto;right:auto;bottom:0;background:var(--sheet);
    padding:10px 0;margin:0 -20px 0 -34px;padding-left:34px;padding-right:20px}
  .holestep{font-size:20px;min-width:96px}
  .kb{display:none !important}
  .lightbox{top:0;height:auto;bottom:0;z-index:30;flex-direction:column;
    align-items:stretch}
  .lightbox figure{position:static;flex:1 1 auto;min-height:0;width:100%}
  .lb-ctl{position:static;flex:0 0 auto;
    padding-bottom:calc(10px + var(--sab))}
  .lb-bar{padding:12px var(--gutter)}
  body.lb-open{overflow:hidden}
  .attract{display:none !important}
  .well{z-index:22}
}

/* ═══════════════════════════════════════════════════ reduced motion ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  .mx-c path{stroke-dashoffset:0}
  .now{border-top:4px solid transparent;border-left:6px solid var(--gold)}
}

/* ═════════════════════════════════════════════════ press feedback ══ */
.press{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--ink)}
.tile.press,.act.press,.step.press,.key.press{box-shadow:inset 0 0 0 1px var(--cream-40)}
button{transition:transform 90ms var(--e-rise)}

/* ══════════════════════════════════════════ phone-only "more" sheet ══ */
.moresheet{position:fixed;inset:0;z-index:28;display:none}
.moresheet-scrim{position:absolute;inset:0;background:rgba(11,30,34,.62)}
.moresheet-body{position:absolute;left:0;right:0;bottom:72px;background:var(--sheet);
  border-top:var(--r-struct);padding:18px var(--gutter) 18px var(--axis);
  animation:sheetRise var(--d-rise) var(--e-rise) both}
@keyframes sheetRise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  .moresheet{display:block}
}

/* ══════════════════════════════════════════════════════ built-by credit ══ */
.builtby{font:600 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--ink-70);margin-top:16px}
.builtby a{color:var(--crimson);text-decoration:underline;text-underline-offset:4px}
a.flat{color:inherit;text-decoration:none;cursor:default}
.builtby a.flat{color:var(--ink)}

/* ══════════════════════════════════════ Today shelf: actions + the QR ══ */
.todaysh{display:flex;gap:26px;align-items:flex-start}
.todaysh-acts{flex:1 1 auto;min-width:0}
.todaysh-qr{flex:0 0 230px;text-align:center}
.todaysh-qr .qrbox{flex-basis:auto;width:212px;height:212px;margin:0 auto 10px}
.todaysh-qr .qrbox img{width:186px;height:186px}
.todaysh-qr b{display:block;font:600 20px/1.2 var(--f-display);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:4px}
.todaysh-qr i{display:block;font:600 16px/20px var(--f-text);white-space:nowrap;
  font-style:normal;color:var(--ink-70)}

/* ═══════════════════════════════ portrait-only: the landscape prompt ══ */
.rotate{display:none;position:fixed;inset:0;z-index:80;background:var(--board);
  color:var(--cream);overflow:auto}
.rotate-in{min-height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 24px;gap:14px}
.rotate-badge{width:132px;height:122px}
.rotate-h{font:900 34px/40px var(--f-display);letter-spacing:-.015em;max-width:22ch;color:var(--cream)}
.rotate-sub{font:400 19px/28px var(--f-text);max-width:40ch;color:var(--cream-40)}
.rotate .qrbox{flex-basis:auto;width:240px;height:240px}
.rotate .qrbox img{width:208px;height:208px}
.rotate code{font:600 17px/1 var(--f-text);letter-spacing:.04em;color:var(--gold)}
.rotate .builtby{color:var(--cream-40);margin-top:4px;font-size:13px;line-height:18px}
.rotate .builtby a{color:var(--gold);text-underline-offset:3px}
.rotate-x{min-height:52px;padding:0 26px;border:2px solid var(--cream-28);color:var(--cream);
  font:600 15px/1 var(--f-display);text-transform:uppercase;letter-spacing:.16em;margin-top:6px}
/* portrait is the design; anything landscape gets the prompt until dismissed */
@media (orientation:landscape){
  body:not(.rot-ok):not([data-mode=kiosk]) .rotate{display:block}
}

/* ═══════════════════════════════════════════ add to home screen (phone) ══ */
.pwa{position:fixed;left:8px;right:8px;bottom:calc(80px + var(--sab));
  z-index:27;background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:12px;
  padding:12px;border-top:4px solid var(--gold);
  animation:sheetRise var(--d-rise) var(--e-rise) both}
.pwa img{width:44px;height:44px;flex:0 0 44px}
.pwa-txt{flex:1 1 auto;min-width:0}
.pwa-txt b{display:block;font:600 14px/17px var(--f-display);text-transform:uppercase;
  letter-spacing:.08em}
.pwa-txt i{display:block;font:400 13px/18px var(--f-text);font-style:normal;color:var(--cream-40);
  margin-top:3px}
.pwa-go{flex:0 0 auto;min-height:44px;padding:0 16px;background:var(--gold);color:var(--ink);
  font:600 14px/1 var(--f-display);text-transform:uppercase;letter-spacing:.1em}
.pwa-no{flex:0 0 44px;min-height:44px;font:400 26px/1 var(--f-display);color:var(--cream-40);
  text-align:center}
@media (min-width:900px){ .pwa{display:none} }

/* ══════════════════════════════════ lightbox controls (phone only) ══ */
.lb-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px;
  background:var(--ink);border-top:3px solid var(--gold)}
.lb-ctl .act{margin:0}
.lb-ctl .act.ghost{flex:1 1 auto;color:var(--cream);border-color:var(--cream-28);
  justify-content:center}
.lb-ctl .act.sq{background:var(--cream);color:var(--ink)}

/* ─────────────────────────────────────────────────────────────────────────
   These two blocks must come last: the lightbox-control and landscape rules
   above are appended after the phone media query, so their phone/short-screen
   overrides have to follow them to win on source order.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  .lb-ctl{position:static;flex:0 0 auto;
    padding-bottom:calc(10px + var(--sab))}
}
/* a 720p landscape screen must still reach "View anyway" without scrolling */
@media (orientation:landscape) and (max-height:820px){
  .rotate-in{gap:10px;padding:20px 24px}
  .rotate-badge{width:96px;height:89px}
  .rotate-h{font-size:26px;line-height:31px}
  .rotate-sub{font-size:16px;line-height:23px}
  .rotate .qrbox{width:180px;height:180px}
  .rotate .qrbox img{width:156px;height:156px}
  .rotate code{font-size:15px}
  .rotate-x{min-height:44px;margin-top:2px}
}

/* ═══════════════════════════════════════════ kiosk QR handoff overlay ══ */
.overlay{position:fixed;inset:0;z-index:32}
.overlay-scrim{position:absolute;inset:0;background:rgba(11,30,34,.72)}
.overlay-body{position:absolute;left:var(--axis);top:300px;width:var(--col);
  background:var(--sheet);border:var(--r-struct);box-shadow:-6px 0 0 var(--ink);
  padding:44px 44px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  animation:sheetRise var(--d-rise) var(--e-rise) both}
.overlay-body .l{margin:0}
.dr-team .m{margin:0}
.overlay-body code{font:600 var(--t-body)/1 var(--f-text);letter-spacing:.04em;color:var(--crimson)}
.overlay-body .body{max-width:52ch}
.overlay-body .qrbox{align-self:center}

/* ═════════════════════════════════════════════════════════ utilities ══
   Last in the sheet on purpose: these must beat every component rule.
   Each element keeps its natural display on the form factor it belongs to. */
@media (min-width:700px){
  .phone-only{display:none !important}
}
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  .kiosk-only{display:none !important}
}

/* ══════════════════════════════════════ scaled-up portrait panels (4K) ══
   `zoom` multiplies every length, so viewport units would be scaled twice. The two
   places that use them take the design size explicitly while zoomed. */
body.zoomed{height:1920px}
body.zoomed[data-view=cause] .stage{width:1080px}

/* ══════════════════════ 810x1440 overrides for late-declared components ══
   These have to live at the very end: the components they target are appended
   after the 810 media query, so an override inside that query could never win. */
@media (min-width:700px) and (max-width:1000px) and (orientation:portrait){
  .todaysh{gap:16px}
  .todaysh-qr{flex:0 0 164px}
  .todaysh-qr .qrbox{width:150px;height:150px;margin-bottom:8px}
  .todaysh-qr .qrbox img{width:130px;height:130px}
  .todaysh-qr b{font-size:14px;letter-spacing:.06em}
  .todaysh-qr i{display:none}
  .overlay-body{top:225px;padding:30px}
}

/* the kiosk's offline warm-up readout, in the header until it finishes */
.warm{position:absolute;left:var(--axis);bottom:34px;font:600 var(--t-rule)/1 var(--f-display);
  text-transform:uppercase;letter-spacing:.16em;color:var(--cream-40);font-style:normal}
body[data-view=cause] .warm{display:none}

/* ═══════════════════════════════ closing the cause page ══
   The ribbon unfolds over the whole screen, so it needs an obvious way out. Both
   controls stay silent — ink on white, no gold, no red, no fill — because this is
   the one surface in the product with none of those. */
.cause-x{position:absolute;right:0;top:-8px;width:88px;height:88px;
  font:300 54px/1 var(--f-display);color:var(--ink);
  display:flex;align-items:center;justify-content:center}
.cause-close{display:flex;align-items:center;justify-content:center;
  min-height:88px;min-width:280px;margin-top:32px;padding:0 34px;
  border:2px solid var(--ink);color:var(--ink);
  font:600 var(--t-btn)/1 var(--f-display);text-transform:uppercase;letter-spacing:.14em}
#v-cause .pane{position:relative}
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  .cause-x{width:56px;height:56px;top:-4px;font-size:36px}
  .cause-close{min-height:56px;min-width:0;width:100%;margin-top:28px}
}

/* ═══════════════════════════════════ arrival window, and the CMA row ══ */
.arrive{background:var(--kraft);border-left:4px solid var(--navy);padding:18px 24px;
  margin-bottom:26px}
.arrive .rl{margin-bottom:10px}
.arrive-w{display:block;font:900 var(--t-m)/1.1 var(--f-display);letter-spacing:-.015em;
  margin-bottom:10px}
.runsheet li.is-cma{background:var(--sheet)}
.runsheet li.is-cma .r-t{color:var(--navy)}
.r-note{display:block;font:600 var(--t-rule)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.18em;color:var(--navy);font-style:normal;margin-top:4px}
.collects li{display:flex;align-items:baseline;gap:16px;min-height:56px;
  border-top:1px solid var(--ink-22);padding-top:10px}
.collects > li > b{flex:0 0 56px;font:900 40px/1 var(--f-display);color:var(--ink)}
.collects span{font:400 var(--t-body)/var(--lh-body) var(--f-text)}
@media (max-width:699px),(orientation:landscape) and (max-height:699px){
  .arrive{padding:14px 16px;margin-bottom:20px}
  .collects > li > b{flex-basis:34px;font-size:24px}
  .collects li{min-height:44px}
}