/* ============================================================================
   RACE A PLANE — one stylesheet.
   Design reference: a motorsport scrutineering sheet crossed with an aviation
   dispatch release. Square corners everywhere, hairline rules instead of
   cards, tabular figures, and ONE red used at large scale.
   Committed dark — this is a black-tie motorsport product, not a dashboard.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:root{
  --ink:#08080A;      --carbon:#101013;   --slab:#161619;   --slab-2:#1D1D21;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.075);
  --red:#E10600;      --red-hot:#FF2A19;  --red-deep:#A50400;
  --c1:#F5F6F8;       --c2:#A9AAB1;       --c3:#74757D;     --c4:#4A4B52;
  --paper:#F2F2F4;    --paper-ink:#0B0B0D;
  --ok:#2FBF71;       --warn:#E8A317;

  --f-display:'Bebas Neue','Avenir Next Condensed','Oswald',Impact,sans-serif;
  --f-label:'Oswald','Avenir Next Condensed','Helvetica Neue',sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,64px);
  --wrap:1240px;
  --gap:clamp(28px,4vw,56px);
}

body{
  background:var(--ink); color:var(--c1);
  font-family:var(--f-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── type ────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.86; letter-spacing:.005em;
  font-size:clamp(2.9rem,9.2vw,8.4rem);
}
.display-sm{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.9; letter-spacing:.01em;
  font-size:clamp(2.1rem,5.4vw,4.4rem);
}
h2.sec-title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.9; letter-spacing:.01em;
  font-size:clamp(2rem,5vw,4rem);
}
h3.blk-title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.4rem,2.5vw,2rem); line-height:1; letter-spacing:.02em;
}
.eyebrow{
  font-family:var(--f-label); font-weight:500; text-transform:uppercase;
  letter-spacing:.3em; font-size:.66rem; color:var(--c3);
}
.eyebrow .dot{color:var(--red)}
.lede{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;color:var(--c2);max-width:62ch}
.prose p{margin-bottom:1.1em;color:var(--c2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--c1);font-weight:600}
.red{color:var(--red)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── layout ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.sec{padding:clamp(64px,9vw,132px) 0}
.sec-tight{padding:clamp(44px,6vw,84px) 0}
.rule{height:1px;background:var(--line-2);border:0}
.rule-strong{height:1px;background:var(--line);border:0}
.sec-head{margin-bottom:clamp(30px,4vw,54px)}
.sec-head .eyebrow{display:block;margin-bottom:16px}
.sec-head .lede{margin-top:20px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.two-col.lean{grid-template-columns:1.15fr .85fr}
@media(max-width:900px){.two-col,.two-col.lean{grid-template-columns:1fr}}

/* ── skip link + focus ───────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:12px 20px;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.14em}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:90;background:rgba(8,8,10,0);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav.stuck{background:rgba(8,8,10,.93);backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:baseline;gap:0;font-family:var(--f-display);
  font-size:1.42rem;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.brand .a{color:var(--red);padding:0 .28em}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a{font-family:var(--f-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.7rem;color:var(--c2);transition:color .2s;padding:6px 0}
.nav-links a:hover{color:var(--c1)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);padding:9px 12px;
  cursor:pointer;font-family:var(--f-label);text-transform:uppercase;letter-spacing:.16em;font-size:.66rem}
@media(max-width:940px){
  .nav-links{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;
    background:rgba(8,8,10,.985);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px;gap:0;transform:translateY(-120%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - 66px);overflow:auto}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:.82rem}
  .nav-links .btn{margin-top:16px;text-align:center}
  .nav-toggle{display:block}
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-block;border:0;cursor:pointer;text-align:center;
  font-family:var(--f-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:.74rem;padding:16px 30px;
  background:var(--red);color:#fff;transition:background .18s,transform .18s;
  border-radius:0}
.btn:hover{background:var(--red-hot)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--c4);cursor:not-allowed;opacity:.75}
.btn-ghost{background:transparent;color:var(--c1);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--c3)}
.btn-lg{padding:20px 40px;font-size:.82rem}
.btn-sm{padding:11px 18px;font-size:.66rem;letter-spacing:.16em}
.btn-block{display:block;width:100%}
.btn-paper{background:var(--paper-ink);color:var(--paper)}
.btn-paper:hover{background:#000}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;padding-bottom:clamp(28px,5vw,56px);padding-top:100px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media picture{display:block;position:absolute;inset:0}
/* The video sits on top of the still and fades in only once it can actually
   play, so there is never a black frame or a jump. */
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 58%;opacity:0;transition:opacity .9s ease;z-index:1}
.hero-media video.on{opacity:1}
.hero-media::after{z-index:2}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 58%;
  filter:contrast(1.05) saturate(1.06) brightness(1.06)}
/* Keep the photograph bright and buy the contrast locally instead. The scrims
   are light — just enough to seat the masthead at the top and the stamp row at
   the bottom — and the copy gets its own legibility from a soft plate behind
   the text column plus a shadow on the type. Darkening the whole frame to make
   text readable throws away the picture, which is the thing selling this. */
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,8,10,.66) 0%,rgba(8,8,10,.40) 30%,rgba(8,8,10,.10) 58%,
                    rgba(8,8,10,0) 78%,rgba(8,8,10,.10) 100%),
    linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.06) 26%,rgba(8,8,10,.18) 58%,
                    rgba(8,8,10,.72) 86%,rgba(8,8,10,.95) 100%)}
.hero h1,.hero-sub,.hero .eyebrow{text-shadow:0 2px 22px rgba(6,6,8,.72),0 1px 3px rgba(6,6,8,.5)}
/* On a bright sky the muted label grey disappears — the hero gets its own. */
.hero .eyebrow{color:#E6E7EB}
.hero-sub{color:#EDEEF1}
.hero h1 .l2{text-shadow:0 2px 30px rgba(120,2,0,.5),0 1px 4px rgba(6,6,8,.55)}
@media(max-width:820px){
  .hero-media img{object-position:66% 54%}
  /* Narrow screens need a little more under the copy, but still nothing like
     enough to flatten the photograph. */
  .hero-media::after{background:
    linear-gradient(180deg,rgba(8,8,10,.70) 0%,rgba(8,8,10,.20) 22%,rgba(8,8,10,.46) 48%,
                    rgba(8,8,10,.80) 74%,rgba(8,8,10,.96) 100%)}
  .hero{min-height:100svh;padding-bottom:24px}
  .hero h1{margin-top:10px}
  .hero-sub{margin-top:18px;font-size:.98rem;line-height:1.5;max-width:38ch}
  .hero-cta{margin-top:24px;gap:10px}
  .hero-cta .btn{flex:1 1 100%;padding:16px 22px;font-size:.72rem}
  .hero-stamp{margin-top:26px}
  .hero-stamp .cell{flex:1 1 44%;padding:12px 14px 12px 0}
  .hero-stamp .v{font-size:1.25rem}
  .hero .eyebrow{color:var(--c2);font-size:.6rem;letter-spacing:.22em}
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad)}
.hero h1{margin:14px 0 0}
.hero h1 .l2{display:block;color:var(--red);text-shadow:0 2px 40px rgba(225,6,0,.35)}
.hero-sub{margin-top:26px;max-width:54ch;font-size:clamp(1rem,1.45vw,1.18rem);color:#D6D7DC}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.hero-stamp{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.hero-stamp .cell{flex:1 1 160px;padding:16px 20px 16px 0;border-right:1px solid var(--line-2)}
.hero-stamp .cell:last-child{border-right:0}
.hero-stamp .k{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.22em;
  font-size:.6rem;color:var(--c3);display:block;margin-bottom:7px}
.hero-stamp .v{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.04em;line-height:1}
.hero-scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.24em;font-size:.58rem;
  color:var(--c3);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll::after{content:"";width:1px;height:26px;background:linear-gradient(var(--c4),transparent);
  animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:640px){.hero-scroll{display:none}}

/* start lights -------------------------------------------------------
   Top-left, under the masthead, leading the eye into the headline. Tried them
   centred on a gantry rail — more literal, but it pulled attention away from
   the copy and off the logo. This is where they belong. */
/* the masthead lockup: lights sit directly above the wordmark, so the count
   reads as part of the logo rather than as something floating beside it */
.brand-lock{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.nav.has-lights .nav-in{height:92px;align-items:center}
@media(max-width:940px){.nav.has-lights .nav-in{height:84px}}
@media(max-width:940px){.nav.has-lights .nav-links{top:84px}}

.lights{display:flex;gap:8px}
.lights i{width:15px;height:15px;background:#2A0000;display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .12s,box-shadow .12s}
.lights i.on{background:var(--red);
  box-shadow:0 0 18px rgba(225,6,0,.95),0 0 34px rgba(225,6,0,.35),
             inset 0 0 0 1px rgba(255,255,255,.26)}

/* ── the tape (head-to-head data) ────────────────────────────────────── */
/* Capped so the two columns stay in conversation with each other instead of
   drifting to opposite edges of a wide screen. */
.tape{border-top:2px solid var(--red);max-width:940px}
.tape-row{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;
  border-bottom:1px solid var(--line-2);padding:15px 0;gap:12px}
.tape-row.head{border-bottom:1px solid var(--line);padding:12px 0 14px}
.tape-row.head .side{font-family:var(--f-display);font-size:clamp(1.1rem,2.2vw,1.7rem);
  letter-spacing:.06em;color:var(--c1)}
.tape-row.head .k{font-family:var(--f-display);font-size:1rem;color:var(--red);letter-spacing:.14em}
.tape-row .side{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(.95rem,1.7vw,1.32rem);color:var(--c1)}
.tape-row .side.l{text-align:right}
.tape-row .side.r{text-align:left}
.tape-row .k{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.58rem;color:var(--c3);text-align:center;line-height:1.35}
.tape-row .side.win{color:var(--red);font-weight:600}
.tape-note{margin-top:22px;font-size:.86rem;color:var(--c3);max-width:70ch}
@media(max-width:620px){
  .tape-row{grid-template-columns:1fr 92px 1fr;gap:6px}
  .tape-row .k{font-size:.5rem;letter-spacing:.1em}
}

/* ── checklist box (his kneeboard pattern) ───────────────────────────── */
.chk{border:1px solid var(--line);background:transparent}
.chk-head{background:var(--red);color:#fff;padding:13px 18px;display:flex;
  align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chk-head .t{font-family:var(--f-display);font-size:1.22rem;letter-spacing:.07em;text-transform:uppercase}
.chk-head .c{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;opacity:.92}
.chk-item{display:grid;grid-template-columns:26px 1fr 34px;gap:12px;align-items:start;
  padding:13px 18px;border-bottom:1px solid var(--line-2)}
.chk-item:last-child{border-bottom:0}
.chk-item .bx{width:13px;height:13px;margin-top:5px;box-shadow:inset 0 0 0 1px var(--c4)}
.chk-item.no .bx{background:var(--red);box-shadow:none;position:relative}
.chk-item.no .bx::after{content:"";position:absolute;inset:3px;
  background:linear-gradient(45deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%),
             linear-gradient(-45deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%)}
.chk-item .tx{font-size:.94rem;line-height:1.55;color:var(--c2)}
.chk-item .tx b{color:var(--c1);font-weight:600}
.chk-item .n{font-family:var(--f-mono);font-size:.66rem;color:var(--c4);text-align:right;padding-top:4px}

/* ── entry rows (the grid sheet / packages) ──────────────────────────── */
.entries{border-top:2px solid var(--red)}
.entry{display:grid;grid-template-columns:56px 1fr 240px;gap:clamp(14px,2.4vw,32px);
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line-2);align-items:start}
.entry:hover .entry-no{color:var(--red)}
.entry-no{font-family:var(--f-display);font-size:2.2rem;line-height:.8;color:var(--c4);
  transition:color .25s;padding-top:4px}
.entry-body h3{font-family:var(--f-display);font-size:clamp(1.45rem,2.6vw,2.1rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:.98;margin-bottom:5px}
.entry-body .tag{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--red);display:block;margin-bottom:11px}
.entry-body p{color:var(--c2);font-size:.96rem;max-width:56ch}
.entry-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.entry-price{font-family:var(--f-display);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:.9;
  letter-spacing:.01em}
.entry-price small{font-family:var(--f-label);font-size:.6rem;letter-spacing:.2em;
  color:var(--c3);display:block;margin-top:8px;text-transform:uppercase}
.slots{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--c3)}
.slots.low{color:var(--warn)}
.slots.out{color:var(--red)}
@media(max-width:820px){
  .entry{grid-template-columns:40px 1fr;gap:16px}
  .entry-side{grid-column:2;align-items:flex-start;text-align:left;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
  .entry-price small{display:inline;margin:0 0 0 8px}
}

/* ── figure blocks ───────────────────────────────────────────────────── */
.fig{position:relative;overflow:hidden;background:var(--carbon)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.fig:hover img{transform:scale(1.03)}
.fig-cap{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;
  padding:9px 15px}
.fig-tall{aspect-ratio:3/4}
.fig-wide{aspect-ratio:16/9}
/* A photograph that must not be cropped: the frame takes the picture's own
   proportions instead of forcing it into a ratio. The two runway shots are 4:3,
   and 16:9 was cutting the propeller off the top and the car's nose off the
   bottom — the two things the picture is actually about. */
.fig-full{aspect-ratio:auto}
.fig-full img{height:auto;object-fit:contain}

/* ── inverted (paper) section ────────────────────────────────────────── */
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .eyebrow{color:#6A6B72}
.paper .lede,.paper .prose p{color:#37383E}
.paper .prose strong{color:var(--paper-ink)}
.paper .rule,.paper .rule-strong{background:rgba(0,0,0,.13)}
.paper .card-line{border-color:rgba(0,0,0,.14)}

/* ── credential card (bios) ──────────────────────────────────────────── */
.cred{border:1px solid var(--line);display:grid;grid-template-columns:1fr;background:var(--carbon)}
.paper .cred{background:#fff;border-color:rgba(0,0,0,.14)}
.cred-top{background:var(--paper-ink);color:#fff;padding:11px 17px;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cred-top .who{font-family:var(--f-display);letter-spacing:.1em;font-size:1.05rem;text-transform:uppercase}
.cred-top .role{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:#9A9BA2}
.cred-body{padding:clamp(20px,2.6vw,30px)}
.cred-body .prose{font-size:.95rem}
.cred-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  border-top:1px solid var(--line);margin-top:22px}
.paper .cred-stats{border-color:rgba(0,0,0,.14)}
.cred-stats div{padding:14px 12px 4px;border-right:1px solid var(--line-2)}
.paper .cred-stats div{border-color:rgba(0,0,0,.08)}
.cred-stats div:last-child{border-right:0}
.cred-stats .v{font-family:var(--f-display);font-size:1.65rem;line-height:1;letter-spacing:.02em}
.cred-stats .k{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.55rem;color:var(--c3);margin-top:6px;display:block}

/* The two credential cards are a matched pair: stretch them to a common height
   and drop the figure rows to the bottom of each, so the numbers line up across
   the gutter instead of floating at whatever height the prose happens to end.
   Word-counting the two bios against each other does not survive the next copy
   edit; this does. */
.cred-pair{align-items:stretch}
.cred-pair .cred{display:flex;flex-direction:column}
.cred-pair .cred-body{display:flex;flex-direction:column;flex:1}
.cred-pair .cred-body .prose{margin-bottom:22px}
.cred-pair .cred-stats{margin-top:auto}

/* ── run sheet (the day) ─────────────────────────────────────────────── */
.runsheet{border-top:1px solid var(--line)}
.run{display:grid;grid-template-columns:86px 1fr;gap:clamp(16px,3vw,36px);
  padding:22px 0;border-bottom:1px solid var(--line-2)}
.run .t{font-family:var(--f-mono);font-size:.82rem;color:var(--red);letter-spacing:.04em;padding-top:3px}
.run h4{font-family:var(--f-display);font-size:1.32rem;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:6px;line-height:1}
.run p{color:var(--c2);font-size:.94rem;max-width:60ch}

/* ── forms ───────────────────────────────────────────────────────────── */
.field{margin-bottom:20px}
.field label,.lbl{display:block;font-family:var(--f-label);text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--c3);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:var(--slab);border:1px solid var(--line);border-radius:0;
  padding:14px 15px;color:var(--c1);font-size:.98rem;transition:border-color .18s,background .18s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:var(--slab-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--c4)}
.field textarea{min-height:104px;resize:vertical}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red-hot)}
.field .msg{font-size:.78rem;color:var(--red-hot);margin-top:7px;display:none}
.field.err .msg{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.paper .field input,.paper .field select,.paper .field textarea{
  background:#fff;border-color:rgba(0,0,0,.2);color:var(--paper-ink)}
.paper .field label,.paper .lbl{color:#6A6B72}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  margin-bottom:14px;cursor:pointer}
.check input{appearance:none;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--c4);
  background:transparent;cursor:pointer;position:relative;flex:none;border-radius:0}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.check span{font-size:.88rem;color:var(--c2);line-height:1.5}
.check a{color:var(--c1);text-decoration:underline;text-underline-offset:3px}
.paper .check input{border-color:#9A9BA2}
.paper .check span{color:#37383E}
.paper .check a{color:var(--paper-ink)}

/* ── notices ─────────────────────────────────────────────────────────── */
.notice{border-left:3px solid var(--red);background:rgba(225,6,0,.07);
  padding:14px 18px;font-size:.9rem;color:var(--c2);margin:18px 0}
.notice.ok{border-color:var(--ok);background:rgba(47,191,113,.08)}
.notice.warn{border-color:var(--warn);background:rgba(232,163,23,.08)}
.notice b{color:var(--c1)}

/* ── popup / modal ───────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,4,6,.86);backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-box{background:var(--carbon);border:1px solid var(--line);max-width:560px;width:100%;
  max-height:92vh;overflow:auto;position:relative}
.modal-box.wide{max-width:820px}
.modal-x{position:absolute;right:0;top:0;width:46px;height:46px;background:none;border:0;
  color:var(--c2);font-size:1.5rem;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--c1)}
.modal-head{background:var(--red);color:#fff;padding:15px 20px}
.modal-head .t{font-family:var(--f-display);font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase}
.modal-body{padding:clamp(22px,3vw,32px)}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 34px;background:var(--carbon)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--gap)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h5{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.22em;
  font-size:.62rem;color:var(--c3);margin-bottom:16px}
.foot a{color:var(--c2);font-size:.9rem;display:block;padding:5px 0;transition:color .18s}
.foot a:hover{color:var(--red)}
.foot-base{margin-top:clamp(34px,5vw,56px);padding-top:24px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.76rem;color:var(--c4)}

/* ── reveal ──────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .fig img{transition:none}
  .hero-scroll::after{animation:none}
}

/* ── utilities ───────────────────────────────────────────────────────── */
.mt0{margin-top:0}.mt1{margin-top:12px}.mt2{margin-top:24px}.mt3{margin-top:38px}.mt4{margin-top:56px}
.tc{text-align:center}.tr{text-align:right}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.badge{display:inline-block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 9px;box-shadow:inset 0 0 0 1px var(--line);color:var(--c2)}
.badge.hot{background:var(--red);color:#fff;box-shadow:none}
.badge.ok{color:var(--ok);box-shadow:inset 0 0 0 1px rgba(47,191,113,.4)}
.badge.warn{color:var(--warn);box-shadow:inset 0 0 0 1px rgba(232,163,23,.4)}

/* ══════════════════════════════════════════════════════════════════════════
   THE START GRID
   Twenty-four slots, drawn the way a grid actually is — two files, staggered,
   pole at the top. Filled slots are solid; open ones are outlines. It is the
   scarcity display: you can see how much of the grid is gone.
   ══════════════════════════════════════════════════════════════════════════ */
.gridwrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:start}
@media(max-width:820px){.gridwrap{grid-template-columns:1fr}}

/* Seen from above, pole at the left, the field heading right — two files with
   the even one set back, the way a grid actually forms up. Drawn across rather
   than down: twenty-four squares in a column would be a metre of empty page. */
.startgrid{display:grid;grid-template-rows:repeat(2,34px);grid-auto-flow:column;
  grid-auto-columns:34px;gap:10px 7px;padding:26px 26px 22px 30px;
  border:1px solid var(--line);position:relative;width:max-content;max-width:100%}
.startgrid::before{content:"POLE";position:absolute;left:30px;top:7px;
  font-family:var(--f-label);font-size:.5rem;letter-spacing:.24em;color:var(--c4)}
/* the start line */
.startgrid::after{content:"";position:absolute;left:22px;top:22px;bottom:18px;width:2px;
  background:var(--red)}
.sg{box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.56rem;color:var(--c4);
  transition:background .25s,color .25s,box-shadow .25s}
.startgrid > .sg:nth-child(even){transform:translateX(13px)}
.sg.taken{background:var(--red);box-shadow:none;color:#fff}
.sg.you{background:transparent;box-shadow:inset 0 0 0 2px var(--red);color:var(--red);
  animation:sgpulse 1.8s ease-in-out infinite}
@keyframes sgpulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.sg.you{animation:none}}
@media(max-width:1080px){
  .startgrid{grid-template-rows:repeat(4,32px);grid-auto-columns:32px}
  .startgrid > .sg:nth-child(even){transform:translateX(12px)}
}
@media(max-width:520px){
  .startgrid{grid-template-rows:repeat(6,30px);grid-auto-columns:30px;gap:8px 5px;
    padding:24px 16px 18px 24px}
  .startgrid::after{left:16px}
  .startgrid::before{left:24px}
}
.grid-meta{padding-top:4px}
.grid-meta .when{font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.6rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:.95}
.grid-meta .fill{font-family:var(--f-mono);font-size:.86rem;color:var(--c2);margin-top:12px}
.grid-meta .fill b{color:var(--red);font-size:1.1rem}
.gauge{height:6px;background:rgba(255,255,255,.09);margin:14px 0 6px;max-width:340px}
.gauge i{display:block;height:100%;background:var(--red)}

/* the release ladder — which grid opens next, and what opens it */
.ladder{border-top:1px solid var(--line);margin-top:clamp(28px,4vw,44px)}
.lad{display:grid;grid-template-columns:26px 1fr auto auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.lad .n{font-family:var(--f-mono);font-size:.66rem;color:var(--c4)}
.lad .w{font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.lad .w small{display:block;font-family:var(--f-mono);font-size:.66rem;color:var(--c3);
  letter-spacing:.04em;text-transform:none;margin-top:3px}
.lad .bar{width:clamp(70px,14vw,160px);height:5px;background:rgba(255,255,255,.09)}
.lad .bar i{display:block;height:100%;background:var(--red)}
.lad.is-locked{opacity:.5}
.lad.is-locked .bar{background:rgba(255,255,255,.05)}
.lad.is-open .w{color:var(--c1)}
@media(max-width:620px){
  .lad{grid-template-columns:22px 1fr auto;gap:10px}
  .lad .bar{display:none}
}

/* ── the tape, made personal ──────────────────────────────────────────── */
.carpick{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:26px}
.carpick .field{margin:0;min-width:220px;flex:1 1 260px}
.carpick .field.small{flex:0 1 120px;min-width:100px}
.tape-verdict{border-left:3px solid var(--red);background:rgba(225,6,0,.07);
  padding:16px 20px;margin-top:26px;max-width:940px}
.tape-verdict b{color:var(--c1)}
.tape-verdict p{color:var(--c2);font-size:.94rem}
.tape-verdict p + p{margin-top:8px}

/* ── merch ────────────────────────────────────────────────────────────── */
.merch{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:2px solid var(--red)}
.mi{padding:24px 24px 26px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.mi:last-child{border-right:0}
.mi h3{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;
  letter-spacing:.03em;line-height:1;margin-bottom:5px}
.mi .tag{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.2em;
  font-size:.58rem;color:var(--red);display:block;margin-bottom:11px}
.mi p{font-size:.88rem;color:var(--c2);margin-bottom:16px}
.mi .price{font-family:var(--f-display);font-size:1.7rem;line-height:1}
@media(max-width:820px){.mi{border-right:0}}

/* ── hotels ───────────────────────────────────────────────────────────── */
.hotels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;
  border-top:1px solid rgba(0,0,0,.13)}
.paper .hotels{border-color:rgba(0,0,0,.13)}
.ht{padding:24px 26px 26px;border-right:1px solid rgba(0,0,0,.1);
  border-bottom:1px solid rgba(0,0,0,.1)}
.ht:last-child{border-right:0}
.ht .tag{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);padding:4px 8px;display:inline-block;
  margin-bottom:12px;color:#5A5B62}
.ht h3{font-family:var(--f-display);font-size:1.28rem;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.02;margin-bottom:6px}
.ht .where{font-family:var(--f-mono);font-size:.72rem;color:#6A6B72;margin-bottom:12px}
.ht p{font-size:.88rem;color:#37383E;margin-bottom:14px}
.ht a{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.18em;
  font-size:.6rem;border-bottom:1px solid var(--red);padding-bottom:3px}
@media(max-width:820px){.ht{border-right:0}}

/* ── register form ────────────────────────────────────────────────────── */
.wants{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wants label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);padding:9px 14px;transition:box-shadow .18s,background .18s}
.wants label:hover{box-shadow:inset 0 0 0 1px var(--c3)}
.wants input{appearance:none;width:13px;height:13px;border:1px solid var(--c4);flex:none;
  border-radius:0;position:relative;cursor:pointer}
.wants input:checked{background:var(--red);border-color:var(--red)}
.wants label:has(input:checked){box-shadow:inset 0 0 0 1px var(--red);background:rgba(225,6,0,.07)}
.wants span{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem;color:var(--c2)}

/* ── social ───────────────────────────────────────────────────────────────
   Rendered only for channels that actually have a link behind them. */
.social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:38px;height:38px;color:var(--c2);
  box-shadow:inset 0 0 0 1px var(--line);transition:color .18s,box-shadow .18s,background .18s}
.social a:hover{color:#fff;background:var(--red);box-shadow:none}
.social svg{width:19px;height:19px;display:block}

/* ── the grid photograph ──────────────────────────────────────────────── */
.plan{margin:0 0 clamp(34px,5vw,58px);position:relative}
.plan picture{display:block;border:1px solid var(--line);overflow:hidden}
.plan img{display:block;width:100%;height:auto}
.plan figcaption{margin-top:12px;font-size:.82rem;color:var(--c3);max-width:70ch}
.plan figcaption .dot{color:var(--red)}

/* ── social ───────────────────────────────────────────────────────────────
   Rendered only for channels that actually have a link behind them. */
.social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:38px;height:38px;color:var(--c2);
  box-shadow:inset 0 0 0 1px var(--line);transition:color .18s,box-shadow .18s,background .18s}
.social a:hover{color:#fff;background:var(--red);box-shadow:none}
.social svg{width:19px;height:19px;display:block}

/* ── plan drawing ─────────────────────────────────────────────────────────
   A wide technical illustration. It scrolls inside its own container on a
   narrow screen so the page body never scrolls sideways. */
.plan{margin:0 0 clamp(34px,5vw,58px)}
.plan-scroll{overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--line);background:var(--carbon)}
.plan-scroll img{display:block;width:100%;min-width:960px;height:auto}
.plan figcaption{margin-top:12px;font-size:.82rem;color:var(--c3);max-width:70ch}
.plan figcaption .dot{color:var(--red)}
@media(max-width:820px){
  .plan-scroll::after{content:""}
  .plan figcaption::before{content:"Scroll to see the whole grid. ";color:var(--c4)}
}