/* ==========================================================================
   III Points Satellite 2026 — Phase One
   One responsive build merged from the desktop (1240px) and mobile (390px)
   design references. Breakpoint: 768px.
   System rules: flat fills only, square corners, hard offset shadows (0 blur),
   mechanical motion only.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:"Eurostile Extended";src:url("/fonts/EurostileLTStd-BoldEx2.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Knockout 49";src:url("/fonts/Knockout-49-Lightweight.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bulb Classic";src:url("/fonts/OTBulbClassic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --black:#000;
  --paper:#f2f0eb;
  --white:#fff;
  --blue:#77a3f3;
  --pink:#ea9fda;
  --green:#8bc53f;
  --yellow:#eddb50;
  --orange:#ec761c;

  --f-euro:"Eurostile Extended",Arial,sans-serif;
  --f-knock:"Knockout 49","Arial Narrow",Arial,sans-serif;
  --f-bulb:"Bulb Classic",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --rule:3px solid var(--black);
  --pad-x:16px;
}
@media (min-width:768px){ :root{ --pad-x:30px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:var(--f-body);
  overflow-x:hidden;
}
img{max-width:100%}
h1,h2,p,figure,ol,ul{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--black);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--pink)}

.wrap{max-width:1240px;margin:0 auto;width:100%}

/* ---------- Keyframes (mechanical only) ---------- */
@keyframes p1marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes p1blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes p1trace{0%{transform:translateX(0)}100%{transform:translateX(206px)}}
@keyframes p1trace2{0%{transform:translateX(0)}100%{transform:translateX(-256px)}}
@keyframes p1rot{0%{transform:rotate(45deg)}100%{transform:rotate(405deg)}}
@keyframes p1flip{0%,48%{transform:rotateY(0)}50%,98%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes p1scan{0%{transform:translateY(0)}100%{transform:translateY(520px)}}

/* ==========================================================================
   Buttons — hover lifts and grows the shadow, press collapses it.
   --sh drives the offset so every variant shares one motion rule.
   ========================================================================== */
.btn{
  --sh:4px; --shc:var(--black);
  display:inline-block;
  text-align:center;
  text-decoration:none;
  border:var(--rule);
  box-shadow:var(--sh) var(--sh) 0 var(--shc);
  font-family:var(--f-euro);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  padding:13px 14px;
  color:var(--black);
  transition:transform 120ms linear,box-shadow 120ms linear;
}
.btn:hover{color:var(--black);transform:translate(-2px,-2px);box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--shc)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shc)}
.btn--yellow{background:var(--yellow)}
.btn--paper{background:var(--paper)}
.btn--pink{background:var(--pink)}
.btn--black{background:var(--black);color:var(--yellow);--shc:var(--white);--sh:4px}
.btn--black:hover{color:var(--yellow)}
.btn--sh-white{--shc:var(--white)}
/* Sign-off button: yellow border, no offset shadow, press-only motion. */
.btn--flat{border-color:var(--yellow);box-shadow:none}
.btn--flat:hover{transform:none;box-shadow:none}
.btn--flat:active{transform:translate(3px,3px);box-shadow:none}

@media (min-width:768px){
  .btn{--sh:5px;font-size:12px;padding:14px 18px}
  .btn--black{--sh:6px;font-size:14px;padding:18px 28px}
  .btn--wide{padding:15px 22px}
  .btn--flat{font-size:13px;padding:18px 26px}
}

/* ---------- Shared bits ---------- */
.chip{
  border:var(--rule);
  font-family:var(--f-bulb);
  font-size:11px;
  letter-spacing:.06em;
  padding:5px 8px;
  white-space:nowrap;
}
.chip--pink{background:var(--pink)}
.chip--green{background:var(--green)}
.chip--paper{background:var(--paper)}
/* Keeps the 3px border (black on black, so invisible) and the SAME padding as
   every other chip, which makes the heights identical by construction. The
   reference dropped the border and padded 3px more to fake the match; doing
   both left this chip 3px taller than its neighbours. */
.chip--black{background:var(--black);color:var(--yellow);border-color:var(--black)}
.chip--green-text{color:var(--green)}
.chip--desk{display:none}
@media (min-width:768px){
  .chip{font-size:13px;letter-spacing:.08em;padding:6px 11px}
  .chip--desk{display:inline-block}
}

.card{border:var(--rule);padding:13px 14px}
.card--paper{background:var(--paper)}
.card p{font-size:13px;line-height:1.45;margin:0;text-wrap:pretty}
@media (min-width:768px){
  .card{padding:15px 18px}
  .card p{font-size:14px}
}

.blink-sq{width:9px;height:9px;background:var(--green);display:inline-block;flex:none;animation:p1blink 1.1s steps(1,end) infinite}
.blink-cursor{width:11px;height:17px;background:var(--yellow);display:inline-block;animation:p1blink 1.1s steps(1,end) infinite}

/* Keyline display type. paint-order puts the stroke behind the fill —
   without it the stroke eats the letterforms. */
.display{
  font-family:var(--f-knock);
  font-weight:400;
  line-height:.84;
  text-transform:uppercase;
  paint-order:stroke fill;
  margin:0;
}
.display--hero{font-size:64px;color:var(--yellow);-webkit-text-stroke:5px var(--black);text-shadow:6px 6px 0 var(--black)}
.display--pass{font-size:58px;line-height:.86;color:var(--pink);-webkit-text-stroke:4px var(--black);text-shadow:5px 5px 0 var(--black)}
.display--marathon{font-size:54px;color:var(--yellow);-webkit-text-stroke:4px var(--black);text-shadow:5px 5px 0 var(--orange)}
@media (min-width:768px){
  .display--hero{font-size:clamp(64px,9.6vw,136px);-webkit-text-stroke:8px var(--black);text-shadow:10px 10px 0 var(--black)}
  .display--pass{font-size:clamp(58px,8.6vw,118px);line-height:.84;-webkit-text-stroke:7px var(--black);text-shadow:9px 9px 0 var(--black)}
  .display--marathon{font-size:clamp(56px,7.8vw,100px);-webkit-text-stroke:7px var(--black);text-shadow:9px 9px 0 var(--orange);max-width:900px}
}

/* ==========================================================================
   Viewport block — nav + marquee + hero fill the first screen with no JS.
   ========================================================================== */
.viewport{min-height:100svh;display:flex;flex-direction:column}

/* 1. Nav */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px var(--pad-x);
  border-bottom:var(--rule);
  background:var(--paper);
  flex:none;
}
.nav__logo{display:block;line-height:0}
.nav__logo img{width:132px;height:auto;display:block}
.nav__links{display:none;gap:24px;font-family:var(--f-euro);font-weight:700;font-size:11px;letter-spacing:.12em}
.nav__links a{text-decoration:none}
.nav__cta{--sh:3px;font-size:10px;padding:9px 12px}
.nav__cta-long{display:none}
@media (min-width:768px){
  .nav{padding:14px var(--pad-x)}
  .nav__logo img{width:210px}
  .nav__links{display:flex}
  .nav__cta{--sh:4px;font-size:11px;padding:11px 17px}
  .nav__cta-long{display:inline}
  .nav__cta-short{display:none}
}

/* 2. Marquee */
.marquee{background:var(--black);color:var(--yellow);overflow:hidden;border-bottom:var(--rule);flex:none}
.marquee__track{display:inline-flex;white-space:nowrap;font-family:var(--f-bulb);font-size:11px;letter-spacing:.1em;padding:7px 0;animation:p1marq 34s linear infinite}
.marquee__span{padding:0 18px}
@media (min-width:768px){
  .marquee__track{font-size:13px;padding:9px 0}
  .marquee__span{padding:0 22px}
}

/* 3. Hero */
.hero{
  position:relative;
  flex:1 0 auto;
  min-height:480px;
  display:flex;
  align-items:flex-end;
  padding:26px var(--pad-x);
  background:var(--black);
  border-bottom:var(--rule);
  overflow:hidden;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}

/* Mobile hero is a still frame plus a play button: the after movie is ~20MB,
   which is not something to spend on a phone's data before it is asked for.
   app.js only loads the file when this is tapped. Hidden on desktop, where
   the video autoplays as designed. */
/* Pinned to the hero's top-right corner rather than floated in the middle:
   the hero content is bottom-anchored, so the top of the frame is the only
   dead space, and a centred button competed with the two real CTAs. Styled
   as a status chip so it reads as part of the same system. */
.hero__play{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--black);
  color:var(--yellow);
  border:3px solid var(--black);
  font-family:var(--f-bulb);
  font-size:11px;
  letter-spacing:.06em;
  padding:6px 9px;
  cursor:pointer;
  border-radius:0;
  white-space:nowrap;
  transition:transform 120ms linear;
}
.hero__play:active{transform:translate(2px,2px)}
.hero__play[hidden]{display:none}
/* Flat triangle, no radius — same system as everything else. */
.hero__play-icon{
  width:0;height:0;flex:none;
  border-left:9px solid var(--yellow);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
@media (min-width:768px){
  .hero__play{display:none}
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__circuit{display:none}
.chips{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.hero__card{box-shadow:5px 5px 0 var(--orange);margin-top:16px}
.hero__card p{margin:0 0 12px}
.hero__btns{display:flex;flex-direction:column;gap:9px}
.hero__scenes{display:none}
@media (min-width:768px){
  .hero{min-height:360px;align-items:center;padding:20px var(--pad-x)}
  .hero__inner{max-width:1240px;margin:0 auto}
  .chips{gap:9px;margin-bottom:14px}
  .hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-top:18px;flex-wrap:wrap}
  .hero__card{box-shadow:7px 7px 0 var(--orange);max-width:560px;margin-top:0}
  .hero__card p{margin:0 0 13px}
  .hero__btns{flex-direction:row;gap:12px;flex-wrap:wrap}
  .hero__scenes{display:inline-flex;font-size:12px;letter-spacing:.08em;padding:7px 11px}

  /* decorative circuitry — desktop only, matches the reference positions */
  .hero__circuit{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  .hero__circuit span{position:absolute;display:block}
  .hero__trace-a{left:0;top:74px;width:206px;height:3px;background:var(--black)}
  .hero__dot-a{left:0;top:69px;width:13px;height:13px;background:var(--orange);border:var(--rule);border-radius:50%;animation:p1trace 3.2s steps(8,end) infinite}
  .hero__trace-b{left:0;top:158px;width:120px;height:3px;background:var(--orange)}
  .hero__trace-b2{left:117px;top:158px;width:3px;height:96px;background:var(--orange)}
  .hero__trace-c{right:0;bottom:60px;width:256px;height:3px;background:var(--blue)}
  .hero__trace-c2{right:253px;bottom:60px;width:3px;height:128px;background:var(--blue)}
  .hero__dot-c{right:0;bottom:55px;width:13px;height:13px;background:var(--blue);border:var(--rule);border-radius:50%;animation:p1trace2 3.6s steps(8,end) infinite}
  .hero__square{right:36px;top:208px;width:15px;height:15px;border:var(--rule);background:var(--yellow);animation:p1rot 4s steps(8,end) infinite}
  .hero__serial{left:0;bottom:16px;font-family:var(--f-bulb);font-size:11px;color:var(--black)}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{border-bottom:var(--rule);padding:26px var(--pad-x)}
.sec--paper{background:var(--paper)}
.sec--yellow{background:var(--yellow);position:relative;overflow:hidden}
.sec--black{background:var(--black)}
.sec--flush{padding-left:0;padding-right:0}
@media (min-width:768px){
  .sec{padding:36px var(--pad-x)}
  .sec--black{padding:32px var(--pad-x)}
}

.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.sec__title{font-family:var(--f-euro);font-weight:700;font-size:13px;letter-spacing:.1em}
.sec__title--yellow{color:var(--yellow)}
.sec__readout{font-family:var(--f-bulb);font-size:10px;letter-spacing:.06em;text-align:right}
.sec__readout--white{color:var(--white)}
.sec__intro{font-size:13px;line-height:1.5;margin:0 0 16px;max-width:560px}
.sec__intro--white{color:var(--white)}
@media (min-width:768px){
  .sec__title{font-size:15px}
  .sec__readout{font-size:12px;letter-spacing:.08em}
  .sec__intro{font-size:15px;line-height:1.55;margin:0 0 22px}
}

/* 4. Venues */
.venues{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.venue{background:var(--white);border:var(--rule);box-shadow:4px 4px 0 var(--black);transition:transform 120ms linear,box-shadow 120ms linear}
.venue:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--black)}
.venue__plate{height:84px;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:var(--rule);background:var(--white)}
.venue__plate--pink{background:var(--pink)}
.venue__plate span{width:100%;height:100%;display:block;background-repeat:no-repeat;background-position:center;background-size:contain}
.venue__meta{padding:10px 11px}
.venue__name{display:block;font-family:var(--f-euro);font-weight:700;font-size:9px;letter-spacing:.08em}
.venue__zone{display:block;font-family:var(--f-bulb);font-size:9px;margin-top:4px}
.venues__cta{margin-top:16px}
.venues__cta .btn{display:block}
@media (min-width:768px){
  .venues{grid-template-columns:repeat(3,1fr);gap:20px}
  .venue{box-shadow:6px 6px 0 var(--black)}
  .venue:hover{box-shadow:8px 8px 0 var(--black)}
  .venue__plate{height:112px;padding:18px}
  .venue__meta{padding:13px 14px}
  .venue__name{font-size:10px;letter-spacing:.1em}
  .venue__zone{font-size:10px;margin-top:5px}
  .venues__cta{display:flex;justify-content:center;margin-top:26px}
  .venues__cta .btn{display:inline-block}
}
@media (min-width:1120px){ .venues{grid-template-columns:repeat(5,1fr)} }

/* 5. Presale */
.pass__rule{position:absolute;left:0;top:64px;width:180px;height:3px;background:var(--black);display:none}
.pass__serial{position:absolute;right:24px;bottom:18px;font-family:var(--f-bulb);font-size:11px;display:none}
.pass__inner{display:flex;flex-direction:column;gap:16px}
.kicker{font-family:var(--f-bulb);font-size:11px;letter-spacing:.1em;margin-bottom:12px}
.pass__copy{font-size:13px;line-height:1.5;margin:14px 0 16px;text-wrap:pretty}
.pass__inner .btn--black{display:block}
@media (min-width:768px){
  .sec--yellow{padding:48px var(--pad-x) 44px}
  .pass__rule,.pass__serial{display:block}
  .pass__inner{gap:28px}
  .kicker{font-size:14px;margin-bottom:18px}
  .pass__copy{max-width:540px;font-size:17px;line-height:1.55;margin:30px 0 28px}
  .pass__inner .btn--black{display:inline-block}
}

/* Contact sheet */
.sheet{border:var(--rule);background:var(--black);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.sheet__cell{position:relative;margin:0}
.sheet__cell img{width:100%;height:130px;object-fit:cover;display:block}
.sheet__cap{position:absolute;left:6px;bottom:6px;background:var(--black);color:var(--yellow);font-family:var(--f-bulb);font-size:9px;letter-spacing:.06em;padding:3px 5px}
.sheet__cap-long{display:none}
@media (min-width:768px){
  .sheet{grid-template-columns:repeat(4,1fr)}
  .sheet__cell img{height:220px}
  .sheet__cap{left:8px;bottom:8px;font-size:10px;letter-spacing:.08em;padding:3px 6px}
  .sheet__cap-long{display:inline}
  .sheet__cap-short{display:none}
}

/* Steps — numbered list on mobile, three cards on desktop */
.steps{background:var(--black);color:var(--white);border:var(--rule);box-shadow:5px 5px 0 var(--orange);padding:18px 16px}
.steps__label{font-family:var(--f-euro);font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--yellow);margin-bottom:12px}
.step{border-top:2px solid #333;padding:11px 0;display:flex;gap:11px}
.step__n{font-family:var(--f-bulb);font-size:12px;color:var(--yellow);flex:none}
.step__body{font-size:13px;line-height:1.5}
.step__date{font-family:var(--f-bulb);font-size:14px;letter-spacing:.04em;display:block;margin-bottom:3px;color:var(--yellow);font-weight:400}
.step__name{font-family:var(--f-euro);font-weight:700;font-size:10px;letter-spacing:.08em}
@media (min-width:768px){
  /* The mobile panel is a black card, so .steps carries color:#fff. Desktop
     dissolves that card, so the colour has to go back to black here or the
     email label inherits white and vanishes against the white bar. Each
     step card re-declares white for itself. */
  .steps{background:none;border:0;box-shadow:none;padding:0;color:var(--black)}
  .steps__label{display:none}
  /* Five steps: 3+2 in the middle band, all five across once there is room. */
  .steps__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .step{background:var(--black);color:var(--white);border:var(--rule);box-shadow:6px 6px 0 var(--black);padding:20px 20px 22px;display:block}
  .step__n{display:block;font-size:13px;margin-bottom:12px}
  .step__n::before{content:"STEP "}
  .step__date{font-size:18px;margin-bottom:9px}
  .step__name{font-size:12px;line-height:1.5;display:block}
}

/* Five across once there is room. This block must come AFTER the 768px one
   above: same specificity, so source order decides, and putting it earlier
   let the 3-column rule win at every width. */
@media (min-width:1120px){
  .steps__list{grid-template-columns:repeat(5,1fr)}
  /* Narrower cards, so trim padding and the date size to stop the Bulb
     timestamps breaking mid-value. */
  .step{padding:18px 15px 20px}
  .step__date{font-size:15px}
  .step__name{font-size:11px}
}

/* Email capture */
.signup{margin-top:14px}
.signup__label{display:block;font-family:var(--f-euro);font-weight:700;font-size:9px;letter-spacing:.1em;margin-bottom:8px}
.signup__row{display:flex}
.signup__input{
  flex:1;min-width:0;background:var(--white);color:var(--black);border:3px solid var(--white);
  padding:11px;font-family:var(--f-bulb);font-size:11px;border-radius:0;
}
/* #666 belongs to the placeholder only — the reference draws a mock field,
   so the grey there is prompt text, not the value a person types. */
.signup__input::placeholder{color:#666;opacity:1}
.signup__submit{
  background:var(--yellow);color:var(--black);border:3px solid var(--yellow);
  font-family:var(--f-euro);font-weight:700;font-size:10px;letter-spacing:.1em;
  padding:11px 13px;cursor:pointer;border-radius:0;
  transition:transform 120ms linear;
}
.signup__submit:active{transform:translate(3px,3px)}
.signup__msg{font-family:var(--f-bulb);font-size:11px;letter-spacing:.06em;color:var(--yellow);margin-top:9px}
@media (min-width:768px){
  /* The form is nested inside .steps for the mobile panel, so it has to
     re-create the 28px .pass__inner gap itself once .steps goes transparent. */
  .signup{display:flex;align-items:center;justify-content:space-between;gap:24px;
    border:var(--rule);background:var(--white);padding:14px 18px;flex-wrap:wrap;margin-top:28px}
  .signup__label{font-size:11px;margin-bottom:0}
  .signup__row{flex:1;min-width:320px;max-width:460px}
  .signup__input{background:var(--paper);border:var(--rule);padding:12px;font-size:12px}
  .signup__submit{background:var(--black);color:var(--yellow);border:var(--rule);border-left:0;font-size:11px;padding:12px 17px}
  .signup__msg{width:100%;color:var(--black);margin-top:0}
}

/* 6. Map */
.mapframe{border:3px solid var(--yellow);height:340px;overflow:hidden}
.mapframe iframe{width:100%;height:100%;border:0;display:block}
.legend{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-family:var(--f-bulb);font-size:10px;letter-spacing:.06em;color:var(--white)}
.legend__item{display:flex;align-items:center;gap:8px}
.legend__pin{width:12px;height:12px;background:var(--yellow);border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block;flex:none}
.legend__dash{width:22px;height:3px;background:var(--yellow);display:inline-block;flex:none}
.legend__cta{display:block;margin-top:2px;border-color:var(--yellow);box-shadow:none}
.legend__cta:hover{transform:none;box-shadow:none}
@media (min-width:768px){
  .mapframe{height:470px}
  .legend{flex-direction:row;align-items:center;gap:26px;margin-top:14px;font-size:11px}
  .legend__pin{width:13px;height:13px}
  .legend__dash{width:26px}
  .legend__cta{display:inline-block;margin-left:auto;margin-top:0;border-color:var(--black);--sh:4px;--shc:var(--white);box-shadow:var(--sh) var(--sh) 0 var(--shc);font-size:11px;padding:12px 17px}
  .legend__cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--white)}
}

/* 7. Flip wall */
.feed__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--pad-x);margin-bottom:14px}
.feed__readout{display:flex;align-items:center;gap:8px;font-family:var(--f-bulb);font-size:10px;letter-spacing:.08em;color:var(--green);white-space:nowrap}
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;background:var(--yellow);border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);perspective:1200px}
/* Mobile runs a 20s cycle rather than the desktop 12s. The 2-column grid puts
   far more of the wall on screen at once, so the same cadence reads as
   constant flipping. The delay stays at exactly half the duration, which is
   what keeps the checkerboard alternating. */
.panel{position:relative;aspect-ratio:1;transform-style:preserve-3d;animation:p1flip 20s linear infinite}
.panel:nth-child(2),.panel:nth-child(3),.panel:nth-child(6),.panel:nth-child(7){animation-delay:-10s}
.panel__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.panel__face--video{background:var(--black)}
.panel__face--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.panel__face--back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}
.panel__face--back img{width:58%}
.panel__ch{position:absolute;left:7px;bottom:7px;background:var(--black);color:var(--yellow);font-family:var(--f-bulb);font-size:9px;padding:3px 5px}
@media (min-width:768px){
  .feed__head{margin:0 auto 18px}
  .feed__readout{font-size:11px;gap:9px}
  .feed__readout .blink-sq{width:10px;height:10px}
  .wall{grid-template-columns:repeat(4,1fr);perspective:1600px}
  .panel{animation-duration:12s}
  .panel:nth-child(2),.panel:nth-child(7){animation-delay:-6s}
  .panel:nth-child(3),.panel:nth-child(6){animation-delay:0s}
  .panel:nth-child(4),.panel:nth-child(5){animation-delay:-6s}
  .panel__face--back img{width:60%}
  .panel__ch{left:8px;bottom:8px;font-size:10px;padding:3px 6px}
}

/* 8. Marathon */
.marathon{position:relative;background:var(--black);border-bottom:var(--rule);overflow:hidden}
.marathon__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.marathon__inner{position:relative;padding:22px var(--pad-x) 26px;min-height:540px;display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.marathon__chip{align-self:flex-start;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;padding:6px 9px;white-space:normal}
.marathon__chip .blink-sq{width:8px;height:8px}
.marathon__card{box-shadow:4px 4px 0 var(--black);margin-top:14px}
.marathon__cta{display:block;margin-top:12px}
@media (min-width:768px){
  .marathon__inner{padding:30px var(--pad-x) 40px;min-height:620px;gap:60px}
  .marathon__chip{font-size:12px;letter-spacing:.08em;padding:6px 10px;gap:8px;white-space:nowrap}
  .marathon__chip .blink-sq{width:9px;height:9px}
  .marathon__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:16px;flex-wrap:wrap}
  .marathon__card{box-shadow:6px 6px 0 var(--black);max-width:520px;margin-top:0;padding:13px 16px}
  .marathon__cta{display:inline-block;flex:none;margin-top:0;padding:14px 20px}
}

/* 9. Sign-off */
.signoff{position:relative;background:var(--black);color:var(--yellow);padding:34px var(--pad-x) 36px;overflow:hidden;border-bottom:var(--rule)}
.signoff__scan{position:absolute;left:0;top:-24px;width:100%;height:10px;background:var(--yellow);animation:p1scan 4.8s steps(12,end) infinite}
.signoff__face{position:absolute;right:12px;top:14px;width:96px;pointer-events:none}
.signoff__inner{position:relative}
.signoff__notice{display:flex;align-items:center;gap:8px;font-family:var(--f-bulb);font-size:10px;letter-spacing:.08em;color:var(--green);margin-bottom:14px}
.signoff__lines{font-family:var(--f-bulb);font-size:27px;letter-spacing:.04em;line-height:1.5}
.signoff__row{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}
.signoff__cta{display:block;width:100%;padding:14px 16px}
.signoff__see{font-family:var(--f-bulb);font-size:12px;letter-spacing:.08em;display:flex;align-items:center;gap:9px}
.signoff__endorse{border-top:2px solid #333;margin-top:22px;padding-top:16px}
.signoff__endorse img{width:100%;height:auto;display:block}
@media (min-width:768px){
  .signoff{padding:56px var(--pad-x) 50px}
  .signoff__scan{top:-30px;height:14px;animation-name:p1scan}
  .signoff__face{right:26px;top:24px;width:190px}
  .signoff__notice{font-size:12px;gap:9px;margin-bottom:20px}
  .signoff__notice .blink-sq{width:10px;height:10px}
  .signoff__lines{font-size:56px;line-height:1.4}
  .signoff__row{flex-direction:row;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
  .signoff__cta{display:inline-block;width:auto}
  .signoff__see{font-size:14px;gap:10px}
  .signoff__see .blink-cursor{width:13px;height:20px}
  .signoff__endorse{margin-top:32px;padding-top:24px}
}
@media (min-width:768px){
  @keyframes p1scan{0%{transform:translateY(0)}100%{transform:translateY(620px)}}
}

/* Consent under the email field. Sits full-width so it drops below the row
   on desktop instead of fighting the label for horizontal space. */
.signup__consent{
  font-family:var(--f-body);
  font-size:11px;
  line-height:1.45;
  margin:9px 0 0;
  color:#c9c9c9;
}
.signup__consent a{color:var(--yellow);text-decoration:underline;text-decoration-thickness:1px}
.signup__consent a:hover{color:var(--pink)}
@media (min-width:768px){
  /* width:100% makes it wrap onto its own line after the field; no `order`,
     because the status message has none and would then jump ahead of it. */
  .signup__consent{width:100%;color:#5a5a5a;margin:10px 0 0}
  .signup__consent a{color:var(--black)}
}

/* 11. Legal footer */
.legal{
  background:var(--black);
  color:var(--paper);
  border-top:3px solid var(--yellow);
  padding:22px var(--pad-x) 26px;
}
.legal__links,.legal__social{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-family:var(--f-euro);
  font-weight:700;
  font-size:9px;
  letter-spacing:.1em;
}
.legal__links a,.legal__social a{color:var(--paper);text-decoration:none}
.legal__links a:hover,.legal__social a:hover{color:var(--pink)}
.legal__social{
  margin-top:14px;
  padding-top:14px;
  border-top:2px solid #333;
  color:var(--yellow);
}
.legal__social a{color:var(--yellow)}
.legal__line{
  margin:16px 0 0;
  font-family:var(--f-bulb);
  font-size:10px;
  letter-spacing:.06em;
  line-height:1.6;
  color:#c9c9c9;
}
.legal__line a{color:var(--yellow)}
.legal__line a:hover{color:var(--pink)}
@media (min-width:768px){
  .legal{padding:26px var(--pad-x) 30px}
  .legal__links,.legal__social{font-size:10px;gap:10px 26px}
  .legal__line{font-size:11px;margin-top:18px}
}

/* 10. Footer strip */
.footer-strip{display:grid;grid-template-columns:repeat(5,1fr)}
.footer-strip__tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-right:var(--rule);border-bottom:var(--rule)}
.footer-strip__tile img{width:72%}
.footer-strip__tile:nth-child(5n){border-right:0}
.footer-strip__tile:nth-child(n+6){border-bottom:0}
@media (min-width:768px){
  .footer-strip{grid-template-columns:repeat(10,1fr)}
  .footer-strip__tile{border-bottom:0}
  .footer-strip__tile:nth-child(5n){border-right:var(--rule)}
  .footer-strip__tile:last-child{border-right:0}
}

/* ---------- Reduced motion ----------
   The system is mechanical-motion-only, but looping flips, marquees and
   blinks are exactly what vestibular-sensitive users need stopped. Layout
   and the flip wall's front face are preserved; only the motion halts. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .marquee__track{animation:none;transform:none}
  .panel{animation:none;transform:none}
  .signoff__scan{display:none}
  .blink-sq,.blink-cursor{animation:none;opacity:1}
}

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:2px;
}