/* ─────────────────────────────────────────────────────────────────────────
   OCTOLUS — THEME VALUES (dark default + opt-in light)

   site.css was mechanically re-pointed at RGB vars so every rule keeps its
   own alpha. Each original dark-theme triplet kept its OWN variable, so the
   dark site renders exactly as it always has; light collapses them to one ink.

   DARK IS THE DEFAULT. Light is opt-in via the nav toggle, remembered in
   localStorage, and forceable with ?theme=light / ?theme=dark.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ink-rgb:226,198,222;
  --ink2-rgb:233,214,228;
  --ink3-rgb:240,228,240;
  --ink4-rgb:242,230,240;
  --ink5-rgb:240,215,235;
  --tint-rgb:255,255,255;
  --amber-soft-rgb:255,170,120;
  --bg-rgb:1,0,17;
  --foot-rgb:199,155,187;
  --card-shadow:0 20px 50px -28px rgba(0,0,0,.9);
}

:root[data-theme="light"]{
  --abyss:#FBF4EE;
  --deep:#F5E9F3;
  --panel:rgba(132,23,255,.055);
  --line:rgba(255,106,69,.30);
  --ink:#220B29;
  --muted:#6B4465;
  --ink-rgb:52,18,60;
  --ink2-rgb:52,18,60;
  --ink3-rgb:52,18,60;
  --ink4-rgb:52,18,60;
  --ink5-rgb:52,18,60;
  --tint-rgb:96,38,122;
  --amber-soft-rgb:176,72,18;
  --bg-rgb:251,244,238;
  --foot-rgb:74,28,86;
  --card-shadow:0 18px 44px -26px rgba(90,25,110,.35);
}

/* sunlit shallow water instead of the abyss */
:root[data-theme="light"] body{
  background:linear-gradient(180deg,#FDF9F4 0%,#F7EDF6 55%,#EFE3F7 100%);
  background-attachment:fixed;
  color:var(--ink);
}

:root[data-theme="light"] .nav{
  background:linear-gradient(180deg,rgba(253,249,244,.88),rgba(253,249,244,.40));
  border-bottom:1px solid rgba(132,23,255,.14);
}

:root[data-theme="light"] .btn.ghost{color:#3A0F42;border-color:rgba(250,24,145,.55)}
:root[data-theme="light"] .btn.ghost:hover{background:rgba(250,24,145,.10);border-color:var(--pink)}
:root[data-theme="light"] .btn.primary{color:#2A0212;box-shadow:0 12px 30px -12px rgba(250,24,145,.55)}

:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .venture{
  box-shadow:var(--card-shadow);
  background-color:rgba(255,255,255,.62);
}

:root[data-theme="light"] .shell-wrap::after{
  background:radial-gradient(circle,rgba(255,151,58,.26),rgba(237,5,206,.10) 45%,transparent 72%);
}

::selection{background:rgba(250,24,145,.28)}
:root[data-theme="light"] ::selection{background:rgba(255,106,69,.30)}

/* ── intro gate (splash) ──────────────────────────────────────────────────
   The gate injects its own <style>; it reads these with dark fallbacks, so a
   light-theme visitor never gets a dark splash before a light site. */
:root[data-theme="light"]{
  --gate-bg:#FDF9F4;
  --gate-g0:#FFF1F7;
  --gate-g1:#F7E9F7;
  --gate-g2:#EDDFF6;
  --gate-skip-ink:rgba(74,28,86,.62);
  --gate-skip-bg:rgba(255,255,255,.55);
  --gate-skip-ink-hi:#3A0F42;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
:root[data-theme="light"] .foot{
  color:rgba(74,28,86,.74);
  border-top-color:rgba(132,23,255,.16);
}
:root[data-theme="light"] .foot .social a{color:rgba(74,28,86,.66)}
:root[data-theme="light"] .foot .legal-links a:hover,
:root[data-theme="light"] .foot .social a:hover{color:#D6067F}

/* ── social icon cut-outs ─────────────────────────────────────────────────
   The YouTube play triangle and Telegram's fold line are hardcoded
   fill="#0A0116" in the inline SVG — i.e. the DARK background colour, drawn
   so they read as holes punched in the glyph. On a light page that paints a
   near-black wedge instead. CSS `fill` beats the presentation attribute, so
   one variable makes the cut-out follow the page in both themes.
   (Attribute selector = no HTML edits, and it covers every page at once.) */
:root{--social-cut:#0A0116}
:root[data-theme="light"]{--social-cut:#F1E5F7}
.foot .social svg path[fill="#0A0116"]{fill:var(--social-cut)}

/* ── spirit cards ─────────────────────────────────────────────────────────
   The blurred bloom that reads as light in the dark smears into a pastel
   wash on a pale ground, so: real white card, halo pulled back, and the
   letter gradient no longer starts at #fff (white-on-white ate the tops). */
:root[data-theme="light"] .spirit{
  background:linear-gradient(165deg,#FFFFFF 0%,rgba(255,255,255,.86) 44%,rgba(255,255,255,.66));
  border:1px solid rgba(90,35,115,.14);
  box-shadow:0 18px 40px -26px rgba(90,25,110,.42), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .spirit::before{opacity:.24;filter:blur(42px)}
:root[data-theme="light"] .spirit:hover::before{opacity:.46}
:root[data-theme="light"] .spirit:hover{
  border-color:color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 30px 62px -30px color-mix(in srgb,var(--c) 48%,transparent),
             inset 0 1px 0 rgba(255,255,255,.95);
}
/* NB: setting `background` resets background-clip, so restate it. */
:root[data-theme="light"] .spirit .letter{
  background:linear-gradient(170deg,
    color-mix(in srgb,var(--c) 58%,#FFFFFF) 0%,
    var(--c) 44%,
    color-mix(in srgb,var(--c) 62%,#2A0212) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--c) 32%,transparent));
}
:root[data-theme="light"] .spirit .trait{color:rgba(74,28,86,.68)}
:root[data-theme="light"] .spirit .ring{opacity:.85}

/* ── team cards ───────────────────────────────────────────────────────────
   .mbody hardcodes #0A0116 — the only hardcoded dark left in site.css. The
   photo veil is intentionally untouched: it ends at #0A0116 under
   mix-blend-mode:screen, and screen against near-black is a no-op. */
:root[data-theme="light"] .member{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66) 60%);
  border:1px solid rgba(90,35,115,.14);
  box-shadow:0 16px 36px -26px rgba(90,25,110,.40);
}
:root[data-theme="light"] .mbody{background:#FFFFFF}
:root[data-theme="light"] .member p{color:rgba(74,28,86,.74)}
:root[data-theme="light"] .member:hover{
  box-shadow:0 26px 52px -28px color-mix(in srgb,var(--c) 45%,transparent);
}

/* ── hero line rotator ────────────────────────────────────────────────────
   "We" is a fixed anchor; only the verb types in and out (see hero-rotate.js).
   The gradient stays on the PARENT span so the ramp runs continuously across
   the whole line — the children carry no background of their own, which is
   why background-clip:text still fills their glyphs. */
/* The words are the parent span's OWN text node (see hero-rotate.js) — there
   are NO child spans for text. 🚨 iOS Safari excludes a POSITIONED descendant
   from -webkit-background-clip:text, so a child span with color:transparent
   rendered as nothing at all: "We" showed, the verb did not. Keep it flat.
   nowrap stops the caret breaking onto a line of its own on a narrow column. */
.hero h1 span.hero-rot{display:inline-block;white-space:nowrap}
.hero h1 span.hero-rot .hr-caret{
  display:inline-block;width:.05em;height:.76em;
  vertical-align:-.02em;margin-left:.05em;border-radius:1px;
  background:var(--coral);
  animation:hr-blink 1.05s steps(1) infinite;
}
@keyframes hr-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero h1 span.hero-rot .hr-caret{animation:none;opacity:0}
}

/* ── remaining hardcoded LIGHT text (invisible on a light ground) ──────────
   Three rules in site.css set a near-white colour outright rather than via a
   var, so they vanish on light. Found by scanning every `color:#hex` in the
   stylesheet for luminance > 170 — worth redoing if more get added. */

/* Ask: the chat field. Typed text was #f4e4f0 on a pale field = invisible. */
:root[data-theme="light"] .chatform input{
  color:#220B29;
  background:rgba(255,255,255,.78);
  border-color:rgba(90,35,115,.18);
}
:root[data-theme="light"] .chatform input::placeholder{color:rgba(74,28,86,.55)}
:root[data-theme="light"] .chatbox .msg.bot{
  background:rgba(255,255,255,.72);
  border-color:rgba(90,35,115,.14);
}

/* Privacy + Terms: headings and bold were #f2e6f0; links were amber on cream. */
:root[data-theme="light"] .legal h2,
:root[data-theme="light"] .legal strong{color:#220B29}
:root[data-theme="light"] .legal a{
  color:#C2410C;
  border-bottom-color:rgba(194,65,12,.38);
}
:root[data-theme="light"] .legal a:hover{border-bottom-color:#C2410C}

/* ── nav: centre the links WITH the toggle ────────────────────────────────
   .links had no align-items, so flex `stretch` let text links fill the 34px
   toggle height and sit at its top.
   ⚠️ DESKTOP ONLY. On mobile .links becomes a COLUMN, where align-items:center
   shrink-wraps every row to its text width and leaves the hairline dividers
   short and ragged. The site's breakpoint is 861px — match it exactly. */
@media(min-width:861px){ .links{align-items:center} }

/* ── the toggle ───────────────────────────────────────────────────────── */
.theme-toggle{
  margin-left:6px;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border-radius:100px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
  -webkit-appearance:none;appearance:none;padding:0;
}
.theme-toggle:hover{color:var(--amber);border-color:rgba(255,188,52,.55);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .tt-sun{display:none}
.theme-toggle .tt-moon{display:block}
:root[data-theme="light"] .theme-toggle .tt-sun{display:block}
:root[data-theme="light"] .theme-toggle .tt-moon{display:none}

/* Mobile: the toggle lives inside the collapsible menu, so give it a proper
   place at the BOTTOM of the open list — centred, with the same hairline the
   menu rows use, and a 44px touch target. (Was flush-left and read as an
   orphan in the corner. Breakpoint corrected 820 → 860 to match site.css.) */
@media(max-width:860px){
  .links{align-items:stretch}           /* full-width rows + full-width rules */
  /* becomes a menu ROW, not a floating button: same full-width hairline and
     padding as `.links a`, with the icon centred inside it. */
  .theme-toggle{
    align-self:stretch;
    width:auto;height:auto;margin:0;
    border:none;border-radius:0;
    border-top:1px solid rgba(var(--tint-rgb),.07);
    padding:14px 4px;                   /* identical rhythm to `.links a` */
    display:flex;align-items:center;
    justify-content:flex-start;         /* left, like every other menu row */
  }
  .theme-toggle:hover{transform:none;border-color:rgba(var(--tint-rgb),.07)}
  .theme-toggle svg{width:20px;height:20px}
}

/* ── intro video: facade + lightbox (see video.js) ────────────────────────
   Nothing here renders until video.js has a YT_ID — the script injects these
   elements, so with no id configured the page is byte-identical to today. */
.vid-heroplay{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;background:transparent;border:0;cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;
}
/* PLAY BUTTON v2 — solid disc so it reads as a control over the artwork */
.vid-badge{
  display:grid;place-items:center;width:74px;height:74px;border-radius:100px;
  background:#FFBC34;border:0;
  color:#1A0616;
  opacity:1;transform:scale(1);position:relative;
  box-shadow:0 12px 34px rgba(1,0,17,.6), 0 0 0 9px rgba(1,0,17,.22);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
/* slow ring so the control reads as "there is a video here" without shouting */
.vid-badge::after{
  content:'';position:absolute;inset:-1px;border-radius:100px;
  border:2px solid #FFBC34;opacity:0;pointer-events:none;
  animation:vidpulse 3.2s ease-out infinite;
}
@keyframes vidpulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
.vid-badge.lg{width:78px;height:78px}
.vid-badge svg{width:32px;height:32px}   /* no nudge: this path's centroid is already the viewBox centre */
.vid-hint{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:#FFE9BE;opacity:1;transition:opacity .28s ease;
  background:rgba(1,0,17,.72);padding:6px 12px;border-radius:100px;
  backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(1,0,17,.4);
}
.vid-heroplay:hover .vid-badge,
.vid-heroplay:focus-visible .vid-badge{transform:scale(1.08);background:#FFD37A;box-shadow:0 14px 40px rgba(1,0,17,.66), 0 0 0 12px rgba(1,0,17,.26)}
.vid-heroplay:hover .vid-badge::after{animation:none}
.vid-heroplay:hover .vid-hint,
.vid-heroplay:focus-visible .vid-hint{opacity:1}
.vid-heroplay:focus-visible{outline:2px solid var(--pink);outline-offset:6px;border-radius:18px}
/* touch devices have no hover — keep it discoverable */
@media(hover:none){ .vid-heroplay .vid-badge{opacity:1;transform:scale(1)} }
:root[data-theme="light"] .vid-badge{background:#C2410C;color:#FFF6EC;box-shadow:0 12px 30px rgba(34,11,41,.3), 0 0 0 9px rgba(255,255,255,.55)}
:root[data-theme="light"] .vid-heroplay:hover .vid-badge{background:#E35411;box-shadow:0 14px 36px rgba(34,11,41,.36), 0 0 0 12px rgba(255,255,255,.7)}
:root[data-theme="light"] .vid-badge::after{border-color:#C2410C}
:root[data-theme="light"] .vid-hint{background:rgba(255,255,255,.86);color:#5A2A0B;box-shadow:0 4px 14px rgba(34,11,41,.16)}

/* inline block in the Story section */
.vid-inline{margin:34px auto 0;max-width:860px}
.vid-facade{
  display:block;width:100%;aspect-ratio:16/9;border-radius:18px;cursor:pointer;
  background-size:cover;background-position:center;background-color:rgba(var(--tint-rgb),.05);
  border:1px solid rgba(var(--tint-rgb),.10);position:relative;padding:0;
  display:grid;place-items:center;transition:border-color .3s, transform .3s;
}
.vid-facade:hover{transform:translateY(-3px);border-color:rgba(255,188,52,.5)}
.vid-facade:hover .vid-badge{opacity:1;transform:scale(1)}
.vid-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#000;border:1px solid rgba(var(--tint-rgb),.10)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* lightbox */
.vid-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;
  padding:clamp(14px,4vw,48px);background:rgba(1,0,17,.82);backdrop-filter:blur(8px)}
:root[data-theme="light"] .vid-modal{background:rgba(40,12,48,.55)}
.vid-shell{position:relative;width:min(1100px,100%)}
.vid-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:100px;
  cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.28);
  color:#F6E9F2;font-size:1.4rem;line-height:1;transition:.2s}
.vid-close:hover{border-color:var(--amber);color:var(--amber)}
@media(prefers-reduced-motion:reduce){ .vid-badge,.vid-hint,.vid-facade{transition:none} .vid-badge::after{animation:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   THE GUARDIANS — the OCTOLUS lineup (was "the spirits")
   Deliberately NEW class names (.gds/.gd/.gart/.gletter/.gtrait/.gline):
   site.css carries six layered `.spirit` blocks that override each other with
   !important, so fresh names mean none of it applies and nothing needs beating.
   The #spirits ANCHOR id is unchanged — five pages link to /#spirits.
   ═══════════════════════════════════════════════════════════════════════════ */
.gds{list-style:none;display:grid;gap:14px;padding:0;margin:54px 0 0;
  grid-template-columns:repeat(7,1fr)}

/* ⚠️ the art is absolutely positioned, so it no longer holds the card open —
   without min-height the cards collapse to text height and the creature is
   squashed into a short wide box. */
/* 🚨 justify-content:center made the letters MISALIGN: Turtle and Orca have
   2-line sentences where the rest have 3, so their shorter content block
   centred lower and dropped those letters below the row. The letters spell
   OCTOLUS, so they must sit on one line — anchor content to the TOP and let
   the sentences hang to different depths instead. */
.gd{position:relative;isolation:isolate;border-radius:20px;overflow:hidden;
  min-height:290px;display:flex;flex-direction:column;justify-content:center;
  padding:22px 14px 20px;text-align:center;
  background:linear-gradient(165deg,rgba(var(--tint-rgb),.075),rgba(var(--tint-rgb),.015) 42%,transparent);
  border:1px solid rgba(var(--tint-rgb),.09);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .4s}
.gd:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 26px 56px -30px color-mix(in srgb,var(--c) 50%,transparent)}
.gd::before{content:"";position:absolute;left:50%;top:-30%;width:180%;height:150%;
  transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.45;transition:opacity .4s;
  background:radial-gradient(closest-side,var(--c),transparent 72%);filter:blur(38px)}
.gd:hover::before{opacity:.8}
:root[data-theme="light"] .gd{background:linear-gradient(165deg,#fff,rgba(255,255,255,.72));
  border-color:rgba(90,35,115,.14);box-shadow:0 16px 38px -28px rgba(90,25,110,.4)}
:root[data-theme="light"] .gd::before{opacity:.22;filter:blur(44px)}

/* the creature: a ghost behind the words, drifting */
.gd .gart{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
  display:grid;place-items:center;overflow:hidden}
.gd .gdr,.gd .gsw{display:block;width:100%;height:100%}
.gd .gart img{width:100%;height:100%;object-fit:contain;display:block}

/* the hero octopus's own three clocks — mismatched periods so it never
   visibly repeats; per-card negative delays stop the seven moving in unison */
@keyframes gd-drift{ 0%,100%{transform:translate3d(0,0,0)}     50%{transform:translate3d(0,-3.2%,0)} }
@keyframes gd-sway { 0%,100%{transform:translate3d(-1.1%,0,0)} 50%{transform:translate3d(1.1%,0,0)} }
@keyframes gd-roll { 0%,100%{transform:rotate(-1.1deg)}        50%{transform:rotate(1.1deg)} }
.gd .gdr{animation:gd-drift 13s ease-in-out infinite}
.gd .gsw{animation:gd-sway  19s ease-in-out infinite}
.gd .gart img{animation:gd-roll 17s ease-in-out infinite;transform-origin:52% 46%;will-change:transform}
@media(prefers-reduced-motion:reduce){ .gd .gdr,.gd .gsw,.gd .gart img{animation:none} }

/* the words, in front of the ghost */
.gd .gletter,.gd .gtrait,.gd .gline{position:relative;z-index:1}
.gd .gletter{display:block;font-family:var(--sans);font-weight:900;line-height:.92;
  letter-spacing:-.03em;font-size:clamp(3.4rem,4.6vw,4.8rem);margin:0;
  background:linear-gradient(170deg,#fff 4%,var(--c) 52%,color-mix(in srgb,var(--c) 30%,#2A0212));
  -webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .gd .gletter{
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 58%,#fff) 0%,var(--c) 44%,
    color-mix(in srgb,var(--c) 62%,#2A0212) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gd .gtrait{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--c);font-size:.52rem;margin-top:8px}
/* ⭐ THE ALIGNMENT FIX: Turtle and Orca have 2-line sentences where the rest
   have 3, so their content block was shorter and centring dropped those two
   letters below the row. Reserving 3 lines equalises every card — letters stay
   level WITHOUT top-anchoring, which was what wrecked the composition. */
.gd .gline{color:rgba(var(--ink-rgb),.72);line-height:1.5;font-size:.73rem;margin:9px 0 0;
  min-height:4.5em}
:root[data-theme="light"] .gd .gline{color:rgba(74,28,86,.78)}

@media(max-width:1080px){ .gds{grid-template-columns:repeat(4,1fr)} }
/* 🚨 ONE per row on phones — Ry: at 2-up "it is harder to read". */
/* ⭐⭐ MOBILE IS A DIFFERENT COMPOSITION FROM DESKTOP, ON PURPOSE — DO NOT
   "unify" them. object-fit:contain fits the art to the SHORTER axis. On the tall
   desktop card that is the WIDTH, so the ghost fills the card. On a short wide
   phone card it was the HEIGHT (~100px), so the creature shrank to an unreadable
   smudge and four of the seven guardians were invisible behind their own text.
   The phone therefore gives the art its OWN left column at FULL opacity.
   This is Ry approved layout — he has a screenshot of it and calls it great.
   ⚠️ Grid placement MUST be explicit: .gart is the first child, so under auto
   flow the trait and line wrap back into column 1 and the card falls apart. */
@media(max-width:680px){
  .gds{grid-template-columns:1fr;gap:12px}
  .gd{display:grid;grid-template-columns:104px 1fr;column-gap:18px;
      align-content:center;text-align:left;padding:16px 20px;min-height:132px}
  .gd .gart{position:relative;inset:auto;opacity:1;height:100px;align-self:center;
      grid-column:1;grid-row:1/span 3}
  .gd .gletter{grid-column:2;grid-row:1;font-size:2.1rem}
  .gd .gtrait{grid-column:2;grid-row:2;margin-top:4px}
  .gd .gline{grid-column:2;grid-row:3;font-size:.86rem;margin:8px 0 0;min-height:0}
}

/* ── HERO HEADLINE FIT (2026-08-15) ───────────────────────────────────────
   The new headline's widest line, "built around you.", is ~13% wider than
   "The ocean never" which it replaced. At 1024-1280 it wrapped, turning a
   3-line h1 into 5 — the hero's total height was still fine (the new lede is
   shorter and absorbed it), but a phrase breaking mid-line reads as broken.
   MEASURED, not guessed: at 1280 the hero copy column is ~584px and the line
   needed ~643px at the global 4.3rem.
   Scoped to .hero so every other h1 on the site keeps the global scale. */
.hero h1{font-size:clamp(2.15rem,5.1vw,4rem)}

/* ── HERO COLUMN BALANCE (2026-08-15) ─────────────────────────────────────
   MEASURED: at 1600 the copy column is 656px, but at 1280 it collapses to
   352px — because .shell-wrap is min(62vw,760px) with NO media query, so the
   art demands 760px and the 1.05fr copy column absorbs the entire shortfall.
   That is why the OLD headline already wrapped to 4 lines at 1280/1024; the
   new one just made it obvious.
   Above 1440 nothing changes — the octopus keeps its full 760px, which is
   Ry's call and the whole point of the hero. Below that, cap the art to its
   own grid column (min-width:0 is required or an fr track will not shrink a
   flex/grid item below its content) so the copy column stops being eaten. */
@media(max-width:1440px){
  .hero-art{min-width:0}
  .shell-wrap{width:min(100%,62vw,760px)}
}

/* ── CLOSING LINE + CTA AFTER A CARD GRID (2026-08-15) ────────────────────
   .tag is margin-top:10px BY DESIGN — in the mission band it sits tight under
   the wordmark. Reused under a card grid (which is gapped 52px above) that
   10px reads as cramped, which is exactly what Ry flagged. Give it the band's
   own rhythm instead, and the CTA the same 34px the mission button gets. */
.grid4 + .tag,
.grid3 + .tag{margin-top:clamp(40px,5vw,60px)}
.band-cta{text-align:center;margin-top:34px}
/* Same reason as the grid case: a mono kicker 10px under a body paragraph reads as
   cramped. Only applies where a .tag directly follows a .sub. */
.sub + .tag{margin-top:clamp(26px,3vw,38px)}

/* ── HERO VIDEO MODE (2026-08-21) — toggled by hero-video.js / `~/z` ──────
   The octopus is HIDDEN, never removed, so rollback is a single class. */
html.hero-video #heroart{display:none}
html.hero-video .shell-wrap .drift{display:none}   /* the img is hidden, but its animation wrappers still took a full frame of height */
html.hero-video .shell-wrap::after{display:none}    /* halo is tuned to the octopus; opacity:0 still takes layout */
html.hero-video .vid-heroplay{display:none}        /* play badge is redundant while it autoplays */
.hv-frame{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  box-shadow:0 26px 70px rgba(1,0,17,.55);background:#000}
.hv-frame iframe{width:100%;height:100%;border:0;display:block}

/* hero-video mobile (2026-08-21): the square wrapper is the octopus's shape, not
   the video's — below the hero stacking breakpoint let the video own the width. */
@media(max-width:860px){
  html.hero-video .shell-wrap{width:min(94vw,620px);aspect-ratio:16/9}
  html.hero-video .hv-frame{position:static;transform:none;width:100%;height:100%;border-radius:14px}
}

/* hero-video: no pointer events on the frame, so YouTube can never raise a
   hover overlay (title bar, share, watch-later) over the picture. */
html.hero-video .hv-frame iframe{pointer-events:none}
@media(max-width:860px){ html.hero-video .shell-wrap{width:min(96vw,640px)} }

/* hero video sound toggle — our own control, since the player has none */
.hv-sound{position:absolute;right:10px;bottom:10px;z-index:3;display:grid;place-items:center;
  width:38px;height:38px;padding:0;border-radius:100px;cursor:pointer;
  background:rgba(1,0,17,.62);color:#FFE9BE;border:1px solid rgba(255,188,52,.5);
  backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,color .2s ease}
.hv-sound svg{width:17px;height:17px}
.hv-sound:hover{background:rgba(1,0,17,.8);border-color:#FFBC34;color:#fff}
.hv-sound.on{background:#FFBC34;border-color:#FFBC34;color:#1A0616}
.hv-sound:focus-visible{outline:2px solid #FFBC34;outline-offset:3px}
:root[data-theme="light"] .hv-sound{background:rgba(255,255,255,.86);color:#5A2A0B;border-color:rgba(194,65,12,.45)}
:root[data-theme="light"] .hv-sound.on{background:#C2410C;color:#FFF6EC;border-color:#C2410C}
@media(max-width:860px){ .hv-sound{right:8px;bottom:8px;width:42px;height:42px} .hv-sound svg{width:19px;height:19px} }

html.hero-video .vid-inline{display:none}   /* the hero already plays it; no duplicate in the Story section */

/* guardian cards are links (2026-08-21) */
.gd{position:relative}
.gd .gdlink{position:absolute;inset:0;z-index:2;border-radius:inherit;display:block;
  text-indent:-9999px;overflow:hidden;cursor:pointer}
.gd .gdlink:focus-visible{outline:2px solid var(--c,#FFBC34);outline-offset:3px}
.gd:hover{cursor:pointer}

/* the hero CTA centred at every width (was only centred once the hero stacked) */
.hero .cta{justify-content:center}

.hv-frame .hv-cc{right:56px}
#bgCC{display:inline-flex!important;align-items:center;justify-content:center;cursor:pointer;margin-right:6px}
#bgCC.on{border-color:#FFBC34;color:#FFBC34}

/* team page: per-person socials (2026-08-21) */
.msoc{display:flex;gap:10px;margin-top:12px}
.msoc a{display:grid;place-items:center;width:32px;height:32px;border-radius:100px;
  border:1px solid rgba(var(--tint-rgb),.16);color:var(--muted);text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.msoc a svg{width:15px;height:15px}
.msoc a:hover{color:var(--c,#FFBC34);border-color:var(--c,#FFBC34);background:rgba(var(--tint-rgb),.06)}
.msoc a:focus-visible{outline:2px solid var(--c,#FFBC34);outline-offset:2px}