/* ==========================================================================
   LET'S GO COLUMBUS — site stylesheet
   Broadcast frame in light. Anton display + Inter UI.

   COLOUR: every colour the site uses is declared once in :root below.
   To reskin, change only that block — nothing downstream hardcodes a hex.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  /* Electric blue is the field, coral is the action colour, cyan is the
     secondary accent. Edition colours (green / gold / purple) belong to the
     network editions and never appear in the Columbus edition's core UI. */
  --blue:#1F2BFF;
  --blue-deep:#1219C4;
  --blue-soft:#E7E8FF;
  --orange:#FF5A46;        /* the logo coral: the only orange on the site */
  --orange-dark:#E8412C;
  --orange-light:#FF8877;
  --cyan:#22C7D6;          /* teal accent */
  --cyan-on-blue:#7FE4ED;  /* teal lightened to clear AA on the blue field */
  --cyan-deep:#0B6570;     /* teal deep enough to carry white text */
  --cyan-soft:#E0F7F9;
  --green:#1E8449;         /* Let's Go Green edition */
  --green-soft:#E6F4EC;
  --green-deep:#0F4C2A;
  --green-light:#BFEBC2;
  --gold-text:#7A5F07;
  --gold:#F5C518;          /* Let's Go Golf edition */
  --purple:#6B2FA0;        /* Let's Go Arts edition */

  /* --- surfaces --------------------------------------------------------- */
  --ink:#0A0A0A;
  --ink-2:#000000;
  --paper:#FFFFFF;
  --paper-warm:#F5F2EC;
  --paper-warm-2:#EDE9E0;
  --line:#E4E0D8;
  --line-warm:#E0DACB;
  --line-strong:#C9C3B6;
  --map-paper:#F3F5F9;     /* the drawn map's canvas */
  --map-water:#BBD7EC;
  --map-belt:#D3D7DE;
  --map-river:#8FB4CE;
  --orange-tint:#FFE9E5;   /* the coral lens chip */
  --ok-on-blue:#8FE7B0;
  --err-on-blue:#FFB3A8;

  /* --- text ------------------------------------------------------------- */
  --text:#0A0A0A;
  --text-2:#55524C;
  --text-3:#6E6A62;
  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.9);
  --on-dark-3:rgba(255,255,255,.78);

  /* --- lens tints ------------------------------------------------------- */
  --work:var(--blue);
  --life:var(--orange);
  --play:var(--cyan);
  /* solid panel fills, dark enough to carry white text */
  --work-panel:var(--blue);
  --life-panel:var(--orange);
  --play-panel:var(--cyan-deep);

  /* --- type ------------------------------------------------------------- */
  --display:"Anton","Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- metrics ---------------------------------------------------------- */
  --gut:clamp(18px,4.4vw,64px);
  --maxw:1560px;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;
  --shadow:0 2px 10px rgba(20,35,59,.08);
  --shadow-lg:0 18px 44px rgba(20,35,59,.16);
  --header-h:74px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--ui);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* --- type scale ---------------------------------------------------------- */
.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.012em;margin:0;text-wrap:balance}
.d1{font-size:clamp(42px,6.2vw,86px);line-height:.98}
.d2{font-size:clamp(30px,4.2vw,56px);line-height:1}
.d3{font-size:clamp(22px,2.5vw,34px);line-height:1.06}
.d4{font-size:clamp(18px,1.6vw,23px);line-height:1.08}
.lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--text-2);max-width:52ch;margin:0}
.body{font-size:15.5px;line-height:1.62;color:var(--text-2);margin:0;max-width:60ch}
.kicker{margin:0 0 16px;color:var(--blue);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase}
.section-no{display:block;margin-bottom:12px;color:var(--blue);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.ink .section-no,.dark .section-no{color:var(--cyan-on-blue)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.pad{padding:clamp(52px,7vw,110px) 0}
.pad-s{padding:clamp(30px,4vw,56px) 0}
.tint{background:var(--paper-warm)}
.dark{background:var(--blue);color:var(--on-dark)}
.dark .body,.dark .lede{color:var(--on-dark-2)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.ink :focus-visible,.dark :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:14px 20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0;top:0}

.section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(16px,3vw,54px);align-items:end;padding-bottom:20px;
  margin-bottom:clamp(24px,3.4vw,44px);border-bottom:2px solid currentColor}
.section-head h2{margin:0}
.section-head p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.dark .section-head p{color:var(--on-dark-2)}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  min-height:50px;padding:0 22px;border:2px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;text-decoration:none;transition:background .16s,color .16s,border-color .16s,transform .16s}
.btn svg{width:16px;height:16px}
.btn--primary{background:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--orange-dark);color:var(--ink);transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--orange);color:var(--ink)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.dark .btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.dark .btn--outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-deep)}
.btn--sm{min-height:44px;padding:0 16px;font-size:11.5px}
.btn--lg{min-height:56px;padding:0 28px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);text-decoration:none}
.link:hover{color:var(--blue)}

/* ==========================================================================
   THE MARK — pill is constant, edition word swaps
   ========================================================================== */
.mark-lockup{display:inline-flex;align-items:center;gap:7px;text-decoration:none;flex:0 0 auto;min-height:44px}
.mark{display:inline-flex;align-items:center;gap:9px;padding:8px 19px 8px 8px;
  background:var(--orange);border-radius:var(--r-pill);flex:0 0 auto}
.mark__play{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;
  border-radius:50%;background:#fff}
.mark__play svg{width:13px;height:13px;margin-left:1px;fill:var(--orange)}
.mark__words{font-family:var(--display);font-size:21px;line-height:1;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;white-space:nowrap}
.mark-edition{font-family:var(--display);font-size:23px;line-height:1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.mark-lockup:hover .mark-edition{color:var(--blue)}
.mark-lockup--light .mark-edition{color:#fff}
.mark-lockup--light:hover .mark-edition{color:var(--orange-light)}
/* green edition swaps the pill too — it is a different edition of the network */
.mark--green{background:var(--green)}
.mark--green .mark__play svg{fill:var(--green)}
@media (max-width:720px){
  .mark{padding:6px 13px 6px 6px;gap:7px}
  .mark__play{width:23px;height:23px}
  .mark__play svg{width:11px;height:11px}
  .mark__words{font-size:17px}
  .mark-edition{font-size:19px}
}

/* ==========================================================================
   STATION BAR + HEADER
   The station bar scrolls away; only the header sticks. It gains a border and
   shadow once the page has moved, so it never sits on top of content as a
   floating slab.
   ========================================================================== */

.site-header{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(20,35,59,.07)}
.site-header__in{display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;border-radius:var(--r-pill)}
.site-nav a:hover{color:var(--ink);background:var(--paper-warm-2)}
.site-nav a.is-active{color:var(--blue)}
.site-nav a.btn--dark{color:#fff}
.site-nav a.btn--dark:hover{color:var(--ink);background:var(--orange)}
.nav-toggle{display:none;margin-left:auto;width:46px;height:46px;align-items:center;
  justify-content:center;background:transparent;border:2px solid var(--ink);
  border-radius:var(--r-pill);cursor:pointer}
.nav-toggle svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.4;fill:none}
/* An overlay panel, not a block in the flow: toggling display pushed the page
   down and snapped. This animates open and never moves the content under it. */
.mobile-nav{position:absolute;top:100%;left:0;right:0;z-index:90;
  padding:0 var(--gut);border-top:1px solid var(--line);background:var(--paper);
  box-shadow:0 18px 44px rgba(20,35,59,.16);
  overflow:hidden;max-height:0;opacity:0;visibility:hidden;
  transition:max-height .3s var(--ease),opacity .2s var(--ease),visibility .3s,padding .3s var(--ease)}
.mobile-nav.is-open{max-height:70vh;opacity:1;visibility:visible;padding:10px var(--gut) 18px;overflow-y:auto}
/* above the hamburger breakpoint the panel should not exist at all */
@media (min-width:1001px){ .mobile-nav{display:none} }
.nav-toggle svg{transition:opacity .18s var(--ease),transform .22s var(--ease)}
.nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.mobile-nav a{display:flex;align-items:center;min-height:52px;font-size:15px;font-weight:700;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:14px;width:100%}
@media (max-width:1000px){
  .site-nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* The hero is a rounded panel that lines up with the header's content edge
   rather than bleeding to the viewport. It sits inside its own .wrap so the
   left edge matches the mark above it; .hero__in then drops the second gutter
   that .wrap would otherwise add. */
.hero-band{padding:14px 0 0}
.hero{background:var(--paper-warm);border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(38px,5vw,78px) 0 clamp(42px,5.6vw,86px)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,64px);align-items:center;
  padding-left:clamp(26px,4.4vw,80px);padding-right:clamp(26px,4.4vw,80px);max-width:none}
.hero h1{margin:0 0 18px}
.hero__accent{color:var(--orange)}
.hero__deck{max-width:46ch;margin:0 0 26px}
.hero__ticker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0;
  border-top:2px solid var(--ink)}
.hero__ticker > div{padding:14px 12px 0 0}
.hero__ticker dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.hero__ticker dd{margin:5px 0 0;font-family:var(--display);font-size:clamp(26px,3vw,40px);line-height:1}
.hero__ticker .accent{color:var(--orange)}
@media (max-width:940px){.hero__in{grid-template-columns:1fr}}
@media (max-width:560px){.hero__ticker{grid-template-columns:1fr 1fr;gap:0}}

/* hero signup */
/* Blended, not a card: the form sits on whatever surface it is placed on and
   is separated by a rule, so it reads as part of the hero rather than a slab
   floating on top of it. */
.hero-form{background:transparent;border:0;border-top:2px solid var(--ink);border-radius:0;
  padding:22px 0 0;max-width:520px}
.hero-form__label{display:block;margin:0 0 8px;font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-2)}
.ink .hero-form__label,.dark .hero-form__label{color:rgba(255,255,255,.86)}
.ink .hero-form__note,.dark .hero-form__note{color:rgba(255,255,255,.82)}
.hero-form select,.hero-form input{width:100%;min-height:48px;padding:0 14px;
  border:2px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
  font-family:var(--ui);font-size:15px;color:var(--text)}
.hero-form select{font-weight:700;cursor:pointer}
.hero-form input:focus-visible,.hero-form select:focus-visible{outline:3px solid var(--blue);outline-offset:1px}

/* --- segmented role picker (replaces the dropdown) ---------------------- */
.pick{margin:0 0 14px;padding:0;border:0}
.pick__row{display:flex;flex-wrap:wrap;gap:8px}
.pick__opt{position:relative;display:inline-flex}
.pick__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick__opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:2px solid var(--line-strong);border-radius:var(--r-pill);background:var(--paper);
  font-size:13px;font-weight:700;color:var(--text-2);transition:background .15s,color .15s,border-color .15s}
.pick__opt:hover span{border-color:var(--ink);color:var(--ink)}
.pick__opt input:checked + span{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pick__opt input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
/* on the ink panels the picker inverts */
.ink .pick__opt span,.dark .pick__opt span,.side-signup .pick__opt span{
  background:transparent;border-color:rgba(255,255,255,.42);color:var(--on-dark-2)}
.ink .pick__opt:hover span,.dark .pick__opt:hover span,.side-signup .pick__opt:hover span{border-color:#fff;color:#fff}
.ink .pick__opt input:checked + span,.dark .pick__opt input:checked + span,
.side-signup .pick__opt input:checked + span{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.ink .pick__opt input:focus-visible + span,.dark .pick__opt input:focus-visible + span,
.side-signup .pick__opt input:focus-visible + span{outline-color:var(--cyan)}
.hero-form__row{display:flex;gap:10px;margin-top:12px}
.hero-form__row input{flex:1 1 auto;min-width:0}
.hero-form__row .btn{flex:0 0 auto}
.hero-form__note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-3)}
.hero-form__msg{margin:10px 0 0;font-size:13px;font-weight:700;min-height:1.2em}
.hero-form__msg[data-tone="err"]{color:var(--orange-dark)}
.hero-form__msg[data-tone="ok"]{color:var(--green)}
.is-invalid{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(232,96,10,.16)}
@media (max-width:560px){
  .hero-form__row{flex-direction:column}
  .hero-form__row .btn{width:100%}
}

/* --- screen / bezel ------------------------------------------------------ */
.screen{position:relative;display:block;padding:14px;background:var(--ink);
  border-radius:var(--r-lg);text-decoration:none}
.screen__tc,.screen__ch{position:absolute;top:22px;z-index:5;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.screen__tc{left:24px;color:var(--on-dark-2)}
.screen__ch{right:24px;color:var(--orange)}
.screen__bars{display:block;height:6px;margin-top:12px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue) 0 30%,var(--orange) 30% 55%,var(--cyan) 55% 80%,var(--paper-warm-2) 80%)}

/* ==========================================================================
   TILES + CARDS
   ========================================================================== */
.tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;
  overflow:hidden;border-radius:var(--r);background:var(--ink);border:0;padding:0;cursor:pointer}
.tile__art{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .45s var(--ease)}
.card:hover .tile__art,.mini:hover .tile__art{transform:scale(1.045)}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  max-width:none;transition:transform .4s var(--ease)}
.card:hover .tile__img,.mini:hover .tile__img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 44%,rgba(11,20,36,.6))}
.tile__play{position:relative;z-index:3;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:rgba(255,255,255,.94);transition:transform .18s,background .18s}
.tile__play svg{width:18px;height:18px;margin-left:2px;fill:var(--orange)}
.tile:hover .tile__play{transform:scale(1.08);background:var(--orange)}
.tile:hover .tile__play svg{fill:#fff}
/* Overlays are capped at half the tile so a long word can never run under the
   tile's overflow and get sliced. */
.tile__status,.tile__dur{position:absolute;z-index:3;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.1;
  max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__status{top:8px;left:8px;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(10,10,10,.82);color:#fff}
.tile__dur{right:8px;bottom:8px;padding:3px 7px;border-radius:5px;
  background:rgba(10,10,10,.82);color:#fff;letter-spacing:.04em}
.screen .tile__status{display:none}

.card{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  background:transparent;border:0;padding:0;text-align:left;cursor:pointer;
  transition:transform .22s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card .tile{transition:box-shadow .22s var(--ease)}
.card:hover .tile{box-shadow:var(--shadow-lg)}
.card__title{transition:color .16s var(--ease)}
.card__meta{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card__title{margin:0;font-size:15.5px;font-weight:700;line-height:1.35;color:var(--text)}
.card__sub{margin:0;font-size:12.5px;color:var(--text-2)}
/* location + lens sit on one line under the title */
/* host byline sits between the title and the place/lens line */
.card__by{margin:-3px 0 0;font-size:12.5px;font-weight:600;color:var(--text-2)}
.card__by::before{content:"";display:inline-block;width:14px;height:2px;margin:0 7px 4px 0;background:var(--orange);vertical-align:middle}
.card__foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.card__loc{font-size:12.5px;font-weight:600;color:var(--text-2)}
.card:hover .card__title{color:var(--orange)}

/* Rails scroll with buttons, not a visible scrollbar. The track is still a
   real overflow container, so trackpad, touch and keyboard all keep working —
   the arrows are an additional affordance and hide themselves at each end.
   They are also hidden outright when the track has nothing to scroll. */
.rail{position:relative}
.rail__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.rail__track::-webkit-scrollbar{display:none}
.rail__track > *{flex:0 0 clamp(232px,26vw,296px);scroll-snap-align:start}
.rail__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.rail__head h2{margin:4px 0 0}

.rail__nav{display:flex;gap:8px;flex:0 0 auto}
/* bare chevrons: the 44px box is the hit area, only the stroke is visible */
.rail__btn{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border:0;border-radius:0;background:transparent;color:var(--ink);
  cursor:pointer;transition:opacity .15s,transform .15s}
.rail__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.rail__btn:hover{transform:translateY(-1px)}
.rail__btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.rail__btn[disabled]{opacity:.22;cursor:default;transform:none}
.rail[data-scrollable="no"] .rail__nav{display:none}
.ink .rail__btn,.dark .rail__btn{color:#fff}
/* the arrows are a pointer nicety; touch already scrolls the track directly */
@media (max-width:640px){.rail__nav{display:none}}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px}

/* lens tags */
.lens{display:inline-flex;padding:4px 10px;border-radius:var(--r-pill);font-size:10px;color:var(--ink);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.lens--work{background:var(--blue-soft)}
.lens--life{background:var(--orange-tint)}
.lens--play{background:var(--cyan-soft)}
.lensbg--work{background:var(--blue)}
.host-mark.lensbg--life,.host-mark.lensbg--play{color:var(--ink)}
.lensbg--life{background:var(--orange)}
.lensbg--play{background:var(--green)}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:0 0 auto;min-height:44px;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease);padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:transparent;color:var(--text-2);
  font-family:var(--ui);font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ==========================================================================
   LENS CARDS / SPONSOR / HOSTS / CHAIRS
   ========================================================================== */
.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r-lg);overflow:hidden;gap:0}
.lens-card{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:12px;color:#fff;
  transition:filter .2s var(--ease)}
.lens-card:hover{filter:brightness(1.06)}
.lens-card__no{font-family:var(--display);font-size:15px;color:rgba(255,255,255,.88);letter-spacing:.06em}
.lens-card h3{margin:0;color:#fff}
.lens-card .body{color:rgba(255,255,255,.9)}
.lens-card__count{margin-top:auto;padding-top:18px;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.lens-card--work{background:var(--work-panel)}
.lens-card--life{background:var(--life-panel);color:var(--ink)}
.lens-card--life h3,.lens-card--life .lens-card__no{color:var(--ink)}
.lens-card--life .body{color:rgba(10,10,10,.84)}
.lens-card--life .lens-card__count{color:rgba(10,10,10,.8)}
.lens-card--play{background:var(--play-panel)}
@media (max-width:860px){
  .lens-grid{grid-template-columns:1fr}
  .lens-card:first-child{border-top:0}
}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:940px){.split{grid-template-columns:1fr}}
.check-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px}
.check-list li{display:flex;gap:11px;align-items:flex-start}
.check-list svg{flex:0 0 auto;width:17px;height:17px;margin-top:4px;stroke:var(--orange);stroke-width:3;fill:none}
.check-list strong{display:block;color:#fff;font-size:15px}
.check-list span{font-size:14px;line-height:1.55;color:var(--on-dark-2)}

.host-card{transition:transform .22s var(--ease),box-shadow .22s var(--ease);display:flex;flex-direction:column;gap:7px;padding:20px;background:var(--paper);
  border:2px solid var(--ink);border-radius:var(--r-lg);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s}
.host-card:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--ink)}
.host-card__top{display:flex;align-items:center;justify-content:space-between}
.host-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:#fff;font-family:var(--display);font-size:18px;letter-spacing:.03em}
.host-mark--lg{width:110px;height:110px;font-size:42px}
.host-card__ch{font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--text-3)}
.host-card h3{margin:5px 0 0;font-family:var(--display);font-weight:400;font-size:24px;
  line-height:1.06;text-transform:uppercase}
.host-card__role{margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.host-card__loc{margin:0;font-size:12px;color:var(--text-3)}
.host-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.host-card__status{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.host-card__status--live{color:var(--blue)}
.host-card__status--filming{color:var(--text-3)}

.chair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.chair{padding:18px;border:2px dashed var(--line-strong);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:8px}
.chair__ch{font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--blue)}
.chair h3{margin:0;font-family:var(--display);font-weight:400;font-size:23px;
  line-height:1.06;text-transform:uppercase}
.chair p{margin:0;font-size:12px;color:var(--text-3)}

.slot-band{padding:clamp(26px,3.4vw,48px) 0;background:var(--paper-warm-2)}
.slot{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:clamp(20px,2.8vw,32px);border:2px dashed var(--line-strong);
  border-radius:var(--r-lg);background:var(--paper)}
.slot small{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.slot strong{display:block;margin-top:9px;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.8vw,34px);line-height:1.06;text-transform:uppercase}
.slot p{margin:9px 0 0;max-width:56ch;font-size:14.5px;line-height:1.6;color:var(--text-2)}

.mini{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;
  background:transparent;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.mini .tile{width:104px;flex:0 0 104px;border-radius:var(--r-sm)}
.mini .tile__play{width:26px;height:26px}
.mini .tile__play svg{width:10px;height:10px}
.mini .tile__corners,.mini .tile__hood,.mini .tile__status,.mini .tile__dur{display:none}
.mini h4{margin:0 0 3px;font-size:14px;font-weight:700;line-height:1.35}
.mini p{margin:0;font-size:11.5px;color:var(--text-3)}
.mini:hover h4{color:var(--orange)}
/* ==========================================================================
   GREEN EDITION
   ========================================================================== */
.green-hero{background:var(--green-soft);padding:clamp(40px,5.4vw,84px) 0}
.green-hero .kicker{color:var(--green-deep)}
.green-hero .hero__accent{color:var(--green-deep)}
.green-band{background:var(--green-deep);color:#fff}
.green-band .section-no{color:var(--green-light)}
.green-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;
  border-top:2px solid rgba(255,255,255,.3)}
.green-stat > div{padding:16px 14px 0 0}
.green-stat dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.green-stat dd{margin:6px 0 0;font-family:var(--display);font-size:38px;line-height:1;color:var(--green-light)}
.pledge{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pledge article{padding:20px;border:2px solid var(--green);border-radius:var(--r-lg);background:var(--paper)}
.pledge h3{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:22px;
  line-height:1.06;text-transform:uppercase;color:var(--green-deep)}
.pledge p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2)}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);background:rgba(8,13,22,.92)}
.lightbox.is-open{display:flex}
.lightbox__panel{position:relative;width:min(1100px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:14px}
.lightbox__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--r);overflow:hidden}
.lightbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__meta{color:#fff}
.lightbox__meta h2{margin:0 0 6px;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.6vw,32px);line-height:1.06;text-transform:uppercase}
.lightbox__meta p{margin:0;font-size:13.5px;color:var(--on-dark-2)}
.lightbox__note{margin:10px 0 0;padding:10px 14px;border-left:3px solid var(--orange);
  background:rgba(232,96,10,.14);font-size:13px;line-height:1.55;color:var(--on-dark-2)}
.lightbox__close{position:absolute;top:-52px;right:0;width:44px;height:44px;display:grid;
  place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;cursor:pointer}
.lightbox__close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none}
.lightbox__close:hover{background:rgba(255,255,255,.14)}
@media (max-width:640px){
  .lightbox__close{top:auto;bottom:-54px;right:50%;transform:translateX(50%)}
  .lightbox__panel{gap:10px}
}
body.is-locked{overflow:hidden}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--blue-deep);color:var(--on-dark-2);padding:clamp(38px,5vw,68px) 0 26px}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:clamp(28px,5vw,80px)}
.site-footer__links{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));
  gap:clamp(26px,3.4vw,60px)}
.site-footer__brand p{margin:14px 0 0;max-width:34ch;font-size:13.5px;line-height:1.6;color:var(--on-dark-2)}
.site-footer__col h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff}
.site-footer__col a{display:flex;align-items:center;min-height:44px;font-size:13.5px;
  color:var(--on-dark-2);text-decoration:none}
.site-footer__col a:hover{color:var(--orange-light)}
.site-footer__fine{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr}}
@media (max-width:520px){.site-footer__links{grid-template-columns:1fr 1fr;gap:20px}}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{position:fixed;left:50%;bottom:24px;z-index:500;transform:translateX(-50%);
  padding:14px 22px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;box-shadow:var(--shadow-lg)}
.toast--err{background:var(--orange-dark)}

/* ==========================================================================
   PALETTE FOLLOW-THROUGH
   The electric-blue field, coral actions and cyan accent replace the earlier
   navy/orange pairing. These rules re-tune the pieces that assumed the old
   values rather than restating the whole sheet.
   ========================================================================== */
body{background:var(--paper)}
.tint{background:var(--paper-warm)}
.dark{background:var(--blue);color:#fff}
.dark .section-head{border-color:rgba(255,255,255,.4)}
.ink{background:var(--blue);color:#fff}
.ink .body,.ink .lede{color:var(--on-dark-2)}

.lens--work{background:var(--blue-soft)}
.lens--life{background:var(--orange-tint)}
.lens--play{background:var(--cyan-soft)}
.lensbg--play{background:var(--cyan)}

.tile{background:var(--ink)}
.tile__play svg{fill:var(--orange)}
.tile:hover .tile__play{background:var(--orange)}
.screen{background:var(--ink)}
.screen__bars{background:linear-gradient(90deg,var(--blue) 0 30%,var(--orange) 30% 55%,var(--cyan) 55% 80%,var(--paper-warm-2) 80%)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.host-card:hover{box-shadow:6px 6px 0 var(--blue)}
.site-footer{background:var(--blue-deep)}
.site-footer__credits{padding-top:14px;margin-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.site-footer__credits p{margin:0;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.62);max-width:90ch}
.chair__ch,.slot small{color:var(--blue)}
.check-list svg{stroke:#fff}
.kicker{color:var(--blue)}
.dark .kicker,.dark .section-no{color:#fff}
.dark .card__meta{color:#fff}

/* ==========================================================================
   BACKGROUND GRAPHICS
   Marker-drawn squiggles, arrows and map pins sit behind content in the
   coral / cyan / blue set. Purely decorative: aria-hidden, no pointer events,
   and they never overlap a text column at desktop width.
   ========================================================================== */
.has-deco{position:relative;overflow:hidden;isolation:isolate}
.deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.has-deco > .wrap,
.has-deco > .deco ~ *{position:relative;z-index:1}
.deco svg{position:absolute;overflow:visible;opacity:.5}
/* shapes paint from currentColor, so a tone class sets one property */
.deco .d-coral{color:var(--orange)}
.deco .d-cyan{color:var(--cyan)}
.deco .d-blue{color:var(--blue)}
.deco .d-pin{color:var(--orange)}
/* on the blue fields the coral and blue marks disappear, so the layer
   switches to cyan and white */
.ink .deco .d-coral,.dark .deco .d-coral,.hero .deco .d-coral{color:var(--cyan-on-blue)}
.ink .deco .d-blue,.dark .deco .d-blue,.hero .deco .d-blue{color:rgba(255,255,255,.55)}
.ink .deco .d-pin,.dark .deco .d-pin,.hero .deco .d-pin{color:var(--cyan-on-blue)}
.ink .deco svg,.dark .deco svg,.hero .deco svg{opacity:.42}
@media (prefers-reduced-motion:no-preference){
  .deco .d-float{animation:decoFloat 18s ease-in-out infinite alternate}
  .deco .d-float-slow{animation:decoFloat 26s ease-in-out infinite alternate-reverse}
  @keyframes decoFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,14px,0)}}
}

/* keep decoration clear of narrow layouts, where there is no free margin */
@media (max-width:900px){ .deco{opacity:.4} }
/* The shell is 1560px wide, so there is only free margin either side of
   the content column above roughly 1500px. Below that the marks would be
   sitting on the copy, so they are not drawn at all. */
@media (max-width:1500px){ .deco{display:none} }

/* angular colour block, the reference's hard blue/white split */
.block-split{position:absolute;background:var(--blue);z-index:0}

/* sticker / badge treatment */
.sticker{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border-radius:var(--r-pill);background:var(--paper);border:3px solid var(--ink);
  font-family:var(--display);font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.sticker--coral{background:var(--orange);color:#fff;border-color:var(--ink)}
.sticker--cyan{background:var(--cyan);color:var(--ink)}
.sticker--blue{background:var(--blue);color:#fff}

/* ==========================================================================
   THE MARK — italic, per the reference lockup
   ========================================================================== */
/* The skew leans the words right, so the pill carries extra padding on that
   side. Sizing itself lives in the base .mark block — nothing is re-declared
   here, or the mobile step above would be overridden by source order. */
.mark__words,.mark-edition{font-style:normal;transform:skewX(-9deg)}
.mark-edition{letter-spacing:.02em}
/* network editions */
.mark--green{background:var(--green)}
.mark--green .mark__play svg{fill:var(--green)}
.mark--gold{background:var(--gold)}
.mark--gold .mark__words{color:var(--ink)}
.mark--gold .mark__play{background:var(--ink)}
.mark--gold .mark__play svg{fill:var(--gold)}
.mark--purple{background:var(--purple)}
.mark--purple .mark__play svg{fill:var(--purple)}
.edition-green .mark-edition{color:var(--green-deep)}
.edition-gold .mark-edition{color:var(--gold-text)}
.edition-purple .mark-edition{color:var(--purple)}

/* ==========================================================================
   HERO on the electric field
   ========================================================================== */
.hero{background:var(--blue);color:#fff}
.hero .kicker{color:var(--cyan-on-blue)}
.hero .lede,.hero__deck{color:rgba(255,255,255,.88)}
.hero__deck strong{color:#fff}
.hero h1{color:#fff}
.hero__accent{color:var(--cyan-on-blue)}
.hero__ticker{border-top-color:rgba(255,255,255,.45)}
.hero__ticker dt{color:rgba(255,255,255,.62)}
.hero__ticker dd{color:#fff}
.hero__ticker .accent{color:var(--cyan)}
/* blended, not a white slab dropped on the blue */
.hero .hero-form{background:transparent;border:0;border-top:2px solid rgba(255,255,255,.42)}
.hero .hero-form__label{color:rgba(255,255,255,.78)}
.hero .hero-form__note{color:rgba(255,255,255,.84)}
.hero .hero-form__msg[data-tone="ok"]{color:var(--ok-on-blue)}
.hero .hero-form__msg[data-tone="err"]{color:var(--err-on-blue)}


/* ---- green panel on the homepage ---- */
.green-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:clamp(22px,3vw,48px);align-items:center;padding:clamp(24px,3.4vw,44px);
  border-radius:var(--r-lg);background:var(--green-deep);color:#fff}
.green-panel .green-stat dd{color:var(--green-light)}
@media (max-width:860px){.green-panel{grid-template-columns:1fr}}

/* ---- watch page tile fills its stage ---- */
.stage__player .tile{aspect-ratio:16/9;width:100%}

/* ==========================================================================
   REGION OVERLAY MAP
   Drawn, not tiled — no API key, no third-party request, and it stays on
   palette. Regions are translucent fills with a solid edge; the selected one
   deepens and the rest recede.
   ========================================================================== */
.gmap{width:100%;height:auto;display:block}
/* the real map needs an explicit box; the drawn one sizes from its viewBox */
#ex-map.is-google{height:clamp(420px,54vh,620px);animation:mapIn .45s var(--ease) both}
@keyframes mapIn{from{opacity:0}to{opacity:1}}
.gm-water{fill:none;stroke:var(--map-water);stroke-width:9;stroke-linecap:round}
.gm-water--sm{stroke-width:5;opacity:.75}
.gm-road{fill:none;stroke:#fff;stroke-width:6}
.gm-belt{fill:none;stroke:var(--map-belt);stroke-width:2.5;stroke-dasharray:9 7}
.gm-river{font-family:var(--ui);font-size:11px;font-style:italic;font-weight:600;fill:var(--map-river)}

/* One <g class="mr"> per region holds both the shape and its label, so every
   state below is written once against the group. Order matters: base → dim →
   hover/focus → active, because these all land on the same specificity and the
   later rule wins. Selected therefore beats hover, and hover beats dimmed. */
.mr{cursor:pointer}
.mr__shape{fill:rgba(255,90,70,.14);stroke:rgba(255,90,70,.45);stroke-width:2;
  transition:fill .16s var(--ease),stroke .16s var(--ease),stroke-width .16s var(--ease)}
.mr.has .mr__shape{fill:rgba(255,90,70,.24);stroke:var(--orange);stroke-width:2.5}
.mr__label{pointer-events:none}
/* the halo keeps a label readable wherever two region fills overlap */
.mr-name{font-family:var(--ui);font-size:14px;font-weight:800;fill:var(--ink);letter-spacing:-.01em;
  paint-order:stroke;stroke:var(--map-paper);stroke-width:4;stroke-linejoin:round;transition:fill .16s var(--ease)}
.mr-sub{font-family:var(--ui);font-size:10.5px;font-weight:600;fill:var(--text-3);
  paint-order:stroke;stroke:var(--map-paper);stroke-width:3.5;stroke-linejoin:round}
.mr-dot{fill:#fff;stroke:var(--text-3);stroke-width:2.5;transition:r .16s var(--ease)}
.mr.has .mr-dot{fill:var(--orange);stroke:#fff;stroke-width:3}

/* areas with nothing under the current lens recede but stay clickable */
.mr.is-dim .mr__shape{fill:rgba(255,90,70,.06);stroke:rgba(255,90,70,.2)}
.mr.is-dim .mr-name{fill:var(--text-3)}
.mr.is-dim .mr__label{opacity:.6}

.mr:hover .mr__shape{fill:rgba(255,90,70,.34);stroke:var(--orange-dark);stroke-width:3}
.mr:hover .mr-name{fill:var(--orange-dark)}
.mr:hover .mr-dot{r:9}
.mr:active .mr__shape{fill:rgba(255,90,70,.46)}
/* keyboard focus reads as a dashed ink edge — never the same as hover */
.mr:focus{outline:none}
.mr:focus-visible .mr__shape{fill:rgba(255,90,70,.34);stroke:var(--ink);stroke-width:3.5;
  stroke-dasharray:8 5}
.mr:focus-visible .mr-dot{r:9}

.mr.is-active .mr__shape{fill:rgba(255,90,70,.5);stroke:var(--orange-dark);stroke-width:4;
  stroke-dasharray:none}
.mr.is-active .mr-name{fill:var(--ink)}
.mr.is-active .mr-dot{r:10;fill:var(--orange-dark);stroke:#fff;stroke-width:3.5}
.mr.is-active .mr__label{opacity:1}

.map-shell{position:relative;border:2px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;background:var(--map-paper)}
.map-reset{position:absolute;right:16px;bottom:16px;z-index:2}

/* explore layout: the question, then the map, then the results */
.intent-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.intent{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  min-height:76px;padding:14px 16px;cursor:pointer;
  background:var(--paper);border:2px solid var(--line-strong);border-radius:var(--r-lg);
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.intent:hover{border-color:var(--ink);transform:translateY(-2px)}
.intent__title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.2}
.intent__sub{font-size:12.5px;line-height:1.4;color:var(--text-2)}
.intent[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.intent[aria-pressed="true"] .intent__title{color:#fff}
.intent[aria-pressed="true"] .intent__sub{color:rgba(255,255,255,.88)}
.intent:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (max-width:900px){.intent-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.intent-row{grid-template-columns:1fr}}
.ex-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--ink)}
.ex-result h2{margin:0}
.ex-count{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
/* the map sits on its own, so it gets real height rather than an aspect box */
.map-shell #ex-map{min-height:clamp(360px,48vh,560px)}


/* Footer links were under the 44px tap minimum. */
.site-footer__col a{min-height:44px}