/* ── Brand faces: Chakra Petch (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
   Self-hosted latin + latin-ext subsets, lifted from the Gothic Circuit brand guide. */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOTHIC CIRCUIT — Entity Games Lab
   Ported from the brand guide's Gothic Circuit direction. Every value here is
   the one the guide specifies; only the delivery changed (inline style +
   style-hover shims became real rules and real :hover/:focus states).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ink */
  --bone:#e8eaec;
  --ash:#8a9096;
  --dim:#4a5055;
  --line:rgba(232,234,236,0.13);
  --panel:#0c0e11;
  --field:#06070a;
  /* accents — one job each */
  --signal:#6fd7e8;   /* interaction, focus, the live edge */
  --sub:#123f78;      --sub-t:#5b8fd0;   /* background / archive */
  --data:#6e7a3c;     --data-t:#96a65a;  /* progress / healthy */
  --alert:#9e3f41;    --alert-t:#c4736f; /* cut, broke, consequence */
  /* prose ramp */
  --prose:#b4b9bf;
  --prose-2:#a4a9af;
  --article:#a8adb3;
  --meta:#6a7076;
  --meta-2:#5a6067;
  --legal:#4a4e53;
  /* faces */
  --display:'Chakra Petch', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  /* the locked header: the strip is fixed, the nav is measured in JS */
  --strip-h:32px;
}

* { box-sizing:border-box; }

html, body {
  margin:0; padding:0;
  background:#000; color:var(--bone);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* Clipped here, on the root, and NOT on body or .shell: overflow-x:hidden on
   either makes it a scroll container, and a sticky child of a container that
   never scrolls never sticks. --head-h is measured in js/gothiccircuit.js so
   that an in-page jump clears the locked header. */
html { overflow-x:hidden; scroll-padding-top:var(--head-h, 176px); }

a { color:var(--bone); text-decoration:none; }
a:hover { color:var(--signal); }
::selection { background:var(--signal); color:#000; }
input, textarea, button { font-family:var(--mono); }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
img { max-width:100%; }

@keyframes blink   { 0%,55% { opacity:1; } 56%,100% { opacity:.15; } }
@keyframes ticker  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes breathe { 0%,100% { opacity:.5; } 50% { opacity:.85; } }

/* the page's own ground: grain over everything, vignette over that */
.grain,
.vignette { position:fixed; inset:0; pointer-events:none; }
.grain {
  z-index:99; mix-blend-mode:screen;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.026) 0 1px, transparent 1px 3px);
}
.vignette { z-index:98; box-shadow:inset 0 0 130px 0 rgba(0,0,0,0.72); }

.shell { background:#000; min-height:100vh; position:relative; overflow-x:clip; }

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bone); color:#000; padding:12px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.skip:focus { left:12px; top:12px; color:#000; }

/* ══ status strip ══════════════════════════════════════════════════════════ */
.strip {
  position:sticky; top:0; z-index:41;
  display:flex; align-items:center; height:var(--strip-h);
  background:#000; border-bottom:1px solid var(--line); overflow:hidden;
}
.strip__badge,
.strip__tag {
  flex:0 0 auto; height:100%;
  display:flex; align-items:center; gap:9px;
  padding:0 clamp(12px,3vw,16px);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
}
.strip__badge { border-right:1px solid var(--line); color:var(--signal); }
.strip__tag   { border-left:1px solid var(--line);  color:var(--alert-t); }
.strip__dot {
  width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:blink 2.4s steps(1) infinite;
}
.strip__track { flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.strip__run { display:inline-flex; animation:ticker 52s linear infinite; will-change:transform; }
.strip__seg {
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ash);
}
.strip__seg a { color:var(--signal); border-bottom:1px solid rgba(111,215,232,0.4); }
.strip__seg a:hover { color:var(--bone); border-color:var(--bone); }

/* ══ nav ═══════════════════════════════════════════════════════════════════ */
.nav {
  position:sticky; top:var(--strip-h); z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,3vw,28px); flex-wrap:wrap;
  padding:14px clamp(18px,4vw,44px);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.94); backdrop-filter:blur(6px);
}
.nav__logo { display:block; width:clamp(190px,26vw,300px); flex:0 0 auto; line-height:0; }
.nav__logo img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
.nav__links {
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,2vw,20px);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}
.nav__links a { color:inherit; }
.nav__links a:hover { color:var(--bone); }
.nav__cta {
  display:inline-flex; align-items:center;
  color:#000; background:var(--bone);
  padding:11px 18px; letter-spacing:.16em;
}
.nav__cta:hover { background:var(--signal); color:#000; }

/* ══ section scaffold ══════════════════════════════════════════════════════ */
/* --rail is the width of the copper band the rails draw in, and the section's
   side gutter is derived from it, so content never sits on the traces. The
   rail element reads it as --band (see js/egl-circuit.js). */
.sec {
  --rail:58px;
  position:relative;
  padding:clamp(64px,8vw,120px) calc(var(--rail) + 10px);
  border-bottom:1px solid var(--line);
}
.sec > circuit-frame[mode="rail"] { --band:var(--rail); }
.sec--bleed { overflow:hidden; }
.sec__inner { position:relative; z-index:1; max-width:1260px; margin:0 auto; }
.sec__head {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(10px,2vw,16px); margin-bottom:clamp(32px,5vw,56px);
}
.sec__mark { width:26px; flex:0 0 auto; }
.sec__title {
  margin:0; font-family:var(--display);
  font-size:clamp(13px,1.6vw,15px); font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
}
.sec__rule { flex:1 1 90px; min-width:60px; height:24px; }
.sec__count { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--meta); }
.sec__lede {
  margin:0 0 clamp(28px,4vw,44px); max-width:56ch;
  font-size:clamp(15px,1.6vw,17px); line-height:1.72; color:var(--prose);
}

/* the 1px-gutter panel row: the seam IS the border colour showing through */
.row {
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.row--capped { border-top:0; }

/* ══ buttons ═══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer;
}
.btn--solid { background:var(--bone); color:#000; font-weight:600; border:0; }
.btn--solid:hover { background:var(--signal); color:#000; }
.btn--ghost { border:1px solid var(--line); color:var(--bone); background:transparent; }
.btn--ghost:hover { border-color:var(--bone); background:rgba(232,234,236,0.05); color:var(--bone); }

/* ══ hero ══════════════════════════════════════════════════════════════════ */
.hero {
  position:relative; overflow:hidden; background:#000;
  border-bottom:1px solid var(--line);
  padding:clamp(52px,7vw,96px) clamp(18px,4vw,44px) clamp(56px,7vw,104px);
}
.hero__wash {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 58% 66% at 76% 50%, rgba(18,63,120,0.30), transparent 70%);
}
.hero__bus {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(232,234,236,0.05) 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,234,236,0.05) 0 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 50%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 80% at 30% 50%, #000, transparent 78%);
}
.hero__grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items:center; gap:clamp(20px,4vw,40px);
  max-width:1260px; margin:0 auto;
}
.hero__copy { position:relative; z-index:2; max-width:640px; }
.hero__kicker {
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(22px,4vw,34px);
}
.hero__kicker-mark { width:20px; flex:0 0 auto; }
.hero__kicker span {
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  color:var(--ash); text-transform:uppercase;
}
.hero__title {
  margin:0 0 clamp(20px,3vw,30px);
  font-family:var(--display); font-size:clamp(40px,7.4vw,86px);
  line-height:1.0; font-weight:600; letter-spacing:-0.02em; text-wrap:balance;
}
.hero__lede {
  margin:0 0 clamp(26px,4vw,40px); max-width:52ch;
  font-size:clamp(15px,1.6vw,17px); line-height:1.72;
  color:var(--prose); text-wrap:pretty;
}
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; }
.hero__figure {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  min-height:min(78vw, 520px);
}
.hero__eye {
  width:min(86vw, 520px); aspect-ratio:1/1;
  animation:breathe 11s ease-in-out infinite;
}
.hero__meta {
  position:absolute; right:0; bottom:0; text-align:right;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  color:var(--meta); line-height:2.1;
}

/* ══ I · bloodwood hollow ══════════════════════════════════════════════════ */
.trailer {
  position:relative; aspect-ratio:16/9; min-height:220px;
  background:var(--field); overflow:hidden;
}
.trailer__grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(to right, rgba(232,234,236,0.045) 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,234,236,0.045) 0 1px, transparent 1px);
  background-size:38px 38px;
}
.trailer__frame {
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  border:0;
}
/* click-to-play facade: the design's own still, with YouTube loaded only on
   demand — nothing is requested from an external host until someone asks. */
.trailer__play,
.slide__play {
  position:absolute; z-index:3; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:82px; height:82px;
  border:1px solid rgba(232,234,236,0.45);
  background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.trailer__play:hover,
.slide__play:hover { border-color:var(--bone); background:rgba(0,0,0,0.7); }
.trailer__tri {
  width:20px; height:22px; background:var(--bone);
  clip-path:polygon(0 0, 100% 50%, 0 100%); margin-left:4px;
}
.trailer__play:hover .trailer__tri,
.slide__play:hover .trailer__tri { background:var(--signal); }
.trailer__scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, #000 2%, rgba(0,0,0,0.1) 52%);
}
.trailer__body {
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(20px,4vw,44px);
}
.trailer__eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--alert-t); margin-bottom:14px;
}
.trailer__title {
  margin:0 0 14px; font-family:var(--display);
  font-size:clamp(28px,4vw,52px); font-weight:500;
  letter-spacing:-0.01em; line-height:1;
}
.trailer__text { margin:0; max-width:52ch; font-size:15px; line-height:1.72; color:var(--prose); }
/* once playing, the still and its furniture step aside for the iframe */
.trailer.is-playing > :not(.trailer__frame) { display:none; }

/* ── the rotating gallery ────────────────────────────────────────────────
   Slides are stacked in the stage, over the grid and under the scrim, and
   cross-fade one at a time. Slide one is the trailer facade itself: no slide
   carries .is-current, so the grid and the play button show through. */
.trailer__stage { position:absolute; inset:0; z-index:0; }
.slide {
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease, visibility .8s;
}
.slide.is-current { opacity:1; visibility:visible; }
.slide img,
.slide video { display:block; width:100%; height:100%; object-fit:cover; }
.slide__link { position:absolute; inset:0; display:block; }
/* the grid and the play button belong to the facade; on a media slide the
   still speaks for itself and only the routed frame stays over it */
.trailer.is-media .trailer__play { opacity:0; visibility:hidden; pointer-events:none; }
.trailer.is-media .trailer__grid { opacity:0; }
.trailer__play,
.trailer__grid { transition:opacity .4s ease, visibility .4s; }

/* the control panel sits above the box, outside it, so it stays put while
   the embed is playing — switching slides then stops the embed */
.trailer__nav {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:0 0 10px;
}
.trailer__cap {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--meta);
  max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trailer__arrow {
  width:26px; height:26px; flex:0 0 auto; padding:0; cursor:pointer;
  border:1px solid var(--line); background:rgba(0,0,0,0.55);
  color:var(--ash); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.trailer__arrow:hover { border-color:var(--bone); color:var(--bone); }
.trailer__arrow:focus-visible, .trailer__dot:focus-visible { outline:1px solid var(--signal); outline-offset:2px; }
.trailer__dots { display:flex; align-items:center; gap:7px; }
.trailer__dot {
  width:7px; height:7px; padding:0; cursor:pointer; border-radius:50%;
  border:1px solid rgba(232,234,236,0.5); background:transparent;
}
.trailer__dot:hover { border-color:var(--bone); }
.trailer__dot[aria-current] { background:var(--signal); border-color:var(--signal); }

.facts { margin-top:0; }
.fact {
  flex:1 1 190px; min-width:0; background:var(--panel);
  padding:24px 26px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--meta); line-height:2.2;
}
.fact b { display:block; font-weight:400; }
.fact--data b { color:var(--data-t); }
.fact--bone b { color:var(--bone); }
.fact--sub  b { color:var(--sub-t); }
.fact--link {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone); line-height:1.4;
}
.fact--link:hover { background:var(--bone); color:#000; }

/* ══ II · storytellerai ════════════════════════════════════════════════════ */
.st__copy { flex:1 1 320px; min-width:0; background:var(--panel); padding:clamp(28px,4vw,46px) clamp(22px,3vw,40px); }
.st__title {
  margin:0 0 22px; font-family:var(--display);
  font-size:clamp(24px,3vw,34px); font-weight:500; letter-spacing:-0.01em;
}
.st__p  { margin:0 0 20px; font-size:16px; line-height:1.74; color:var(--prose); text-wrap:pretty; }
.st__p2 { margin:0 0 32px; font-size:16px; line-height:1.74; color:var(--ash);   text-wrap:pretty; }
.chain__step { flex:1 1 110px; min-width:0; background:#000; padding:22px 20px; }
.chain__n {
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  color:var(--sub-t); margin-bottom:12px;
}
.chain__label {
  font-family:var(--display); font-size:15px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px;
}
.chain__text { font-size:13px; line-height:1.6; color:var(--ash); }
.st__figure {
  flex:1 1 320px; min-width:0; position:relative;
  background:#000; overflow:hidden; min-height:380px;
  display:flex; align-items:flex-end; padding:clamp(22px,3vw,40px);
}
.st__eye {
  position:absolute; z-index:0; left:50%; top:44%;
  transform:translate(-50%,-50%);
  width:min(120%, 460px); aspect-ratio:1/1; opacity:.78;
}
.st__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(to top, #000 10%, transparent 62%); }
.st__stamp {
  position:relative; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--meta); line-height:2.2;
}
.st__stamp b { display:block; font-weight:400; color:var(--data-t); }

/* ══ III · team ════════════════════════════════════════════════════════════ */
.member {
  flex:1 1 160px; min-width:0; background:var(--panel);
  padding:clamp(24px,3vw,32px) 22px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:16px;
}
/* The portrait sits on the brand blue, and its corners are chamfered so that
   ground shows through beneath the routed corner brackets — the copper reads
   against one flat colour instead of against whatever the photo happens to
   have there. --chamfer is the depth of the 45° cut, measured on the photo;
   the corner artwork reaches about 40px into a 110x150 frame, so 28 clears the
   brackets while the frame still reads as a portrait, not an octagon. */
.member__frame {
  --chamfer:28px;
  position:relative; width:110px; height:150px; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 34%, rgba(18,63,120,0.72), rgba(18,63,120,0.22) 78%),
    var(--panel);
}
.member__frame img {
  position:absolute; inset:6px;
  width:calc(100% - 12px); height:calc(100% - 12px);
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  -webkit-clip-path:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  clip-path:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.member__frame--empty { display:flex; align-items:center; justify-content:center; }
.member__slot {
  font-family:var(--mono); font-size:8px; letter-spacing:.22em;
  color:var(--meta); text-transform:uppercase;
}
.member__name {
  font-family:var(--display); font-size:16px; font-weight:600;
  letter-spacing:.04em; margin-bottom:8px;
}
.member__role {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  line-height:1.9; text-transform:uppercase; color:var(--ash);
}
.member__role--data { color:var(--data-t); }
.member__role--sub  { color:var(--sub-t); }
.member__bio { margin:0; font-size:13px; line-height:1.65; color:var(--ash); }
/* IBM Plex Sans ships here at 400 and 500 only, so an emphasised word takes
   the real 500 and a step up the prose ramp rather than a synthesised 700. */
.member__bio b { font-weight:500; color:var(--prose); }

/* ══ IV · studio ═══════════════════════════════════════════════════════════ */
.studio__eye {
  position:absolute; z-index:0; left:26%; top:8%;
  transform:translate(-50%,-50%);
  width:min(104vw, 700px); aspect-ratio:1/1;
  opacity:.3; pointer-events:none;
}
.card {
  flex:1 1 250px; min-width:0; background:var(--panel);
  padding:clamp(30px,4vw,44px) clamp(24px,3vw,34px);
  position:relative;
}
/* the hairline that names the card's accent */
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, var(--hair, var(--line)), transparent 70%);
}
.card--data { --hair:var(--data-t); }
.card--sub  { --hair:var(--sub-t); }
.card--signal { --hair:var(--signal); }
.card__eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  margin-bottom:24px; color:var(--ash);
}
.card--data   .card__eyebrow { color:var(--data-t); }
.card--sub    .card__eyebrow { color:var(--sub-t); }
.card--signal .card__eyebrow { color:var(--signal); }
.card__title {
  margin:0 0 14px; font-family:var(--display);
  font-size:clamp(22px,2.4vw,29px); font-weight:500;
}
.card__text { margin:0; font-size:15px; line-height:1.72; color:var(--prose-2); text-wrap:pretty; }
.card__text + .card__link { margin-top:22px; }
.card__link {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.card__link:hover { border-color:var(--signal); color:var(--signal); }

/* ══ V · community ═════════════════════════════════════════════════════════ */
.cmt__eye {
  position:absolute; z-index:0; right:-14%; top:4%;
  width:min(100vw, 660px); aspect-ratio:1/1;
  opacity:.34; pointer-events:none;
}
.cmt__wash {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 74% 18%, rgba(18,63,120,0.24), transparent 58%);
}
.cmt {
  flex:1 1 250px; min-width:0;
  background:rgba(12,14,17,0.94);
  padding:clamp(28px,4vw,40px) clamp(24px,3vw,34px);
  display:flex; flex-direction:column;
}
.cmt__n {
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  margin-bottom:22px; color:var(--ash);
}
.cmt--data   .cmt__n { color:var(--data-t); }
.cmt--sub    .cmt__n { color:var(--sub-t); }
.cmt--alert  .cmt__n { color:var(--alert-t); }
.cmt__title {
  margin:0 0 14px; font-family:var(--display);
  font-size:clamp(22px,2.4vw,29px); font-weight:500;
}
.cmt__text { margin:0 0 26px; font-size:15px; line-height:1.7; color:var(--prose-2); }

/* email join — the field and its button share one hairline box */
.join {
  display:flex; gap:1px; flex-wrap:wrap;
  background:var(--line); border:1px solid var(--line);
  margin-top:auto;
}
.join input {
  flex:1 1 140px; min-width:0;
  background:#000; border:0; outline:none; color:var(--bone);
  padding:16px; font-size:11px; letter-spacing:.08em;
}
.join button {
  background:var(--bone); color:#000; border:0;
  padding:16px 20px; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
}
.join button:hover { background:var(--signal); }
.join input::placeholder { color:var(--meta-2); }
.fineprint {
  margin:14px 0 0;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--meta-2); line-height:1.9;
}
.fineprint a { color:var(--ash); border-bottom:1px solid var(--line); }
.fineprint a:hover { color:var(--signal); }

.mesh {
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); background:#000; padding:14px 18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--meta);
}
.mesh__eye { width:20px; flex:0 0 auto; }
.cmt__stack { margin-top:auto; display:flex; flex-direction:column; gap:16px; }
.btn--wire {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--bone); padding:16px 20px;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone);
}
.btn--wire:hover { background:var(--bone); color:#000; }

/* the status line under either form: idle grey, then the answer in the
   panel's own colour — signal for a success, alert for a refusal */
.join__status {
  margin:12px 0 0;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--meta-2); line-height:1.9;
}
.join__status[data-state="ok"], .form__note[data-state="ok"]   { color:var(--signal); }
.join__status[data-state="err"], .form__note[data-state="err"] { color:var(--alert-t); }
.join.is-busy button, .form.is-busy button { opacity:.55; cursor:progress; }
.join.is-done input, .join.is-done button { opacity:.45; }

/* contact form — posts to contact.php */
.form { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.field {
  background:#000; border:1px solid var(--line); color:var(--bone);
  padding:14px 16px; font-size:10px; letter-spacing:.16em; outline:none;
}
.field:focus { border-color:var(--signal); }
.field::placeholder { color:var(--meta-2); }
textarea.field { resize:vertical; }
.form :disabled { cursor:not-allowed; opacity:.55; }
.form__note {
  margin:15px 0 0;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--meta-2); line-height:1.9;
}
.btn--transmit {
  background:transparent; color:var(--bone); border:1px solid var(--line);
  padding:15px 20px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer;
}
.btn--transmit:hover:not(:disabled) { background:var(--bone); color:#000; border-color:var(--bone); }

/* ══ VI · devlog ═══════════════════════════════════════════════════════════ */
.dl { display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); }

/* archive rail — the whole run of entries, never moves */
.dl__rail {
  flex:1 1 230px; max-width:340px; min-width:0;
  background:var(--panel);
  padding:clamp(20px,2.4vw,26px) 0;
  display:flex; flex-direction:column;
}
.dl__railhead {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 clamp(18px,2vw,24px) 18px;
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
  color:var(--meta); border-bottom:1px solid var(--line);
}
.dl__railhead b { font-weight:400; color:var(--data-t); }
.dl__list { display:flex; flex-direction:column; }
.dl__item {
  appearance:none; text-align:left; background:transparent;
  border:0; border-bottom:1px solid var(--line); border-left:2px solid transparent;
  cursor:pointer; padding:14px clamp(16px,2vw,22px);
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  align-items:baseline; color:inherit; width:100%;
}
.dl__item:hover { background:rgba(232,234,236,0.05); }
.dl__item-n { font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--meta-2); }
.dl__item-t {
  display:block; min-width:0;
  font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.01em; line-height:1.4; color:var(--prose);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dl__item-s {
  display:block; margin-top:6px;
  font-family:var(--mono); font-size:8px; letter-spacing:.16em; color:var(--meta-2);
}
.dl__item[aria-current="true"] { background:rgba(232,234,236,0.07); border-left-color:var(--signal); }
.dl__item[aria-current="true"] .dl__item-n { color:var(--signal); }
.dl__item[aria-current="true"] .dl__item-t { color:var(--bone); }

/* main area — three headlines, or one open entry */
.dl__main { flex:1 1 420px; min-width:0; background:#000; position:relative; display:flex; flex-direction:column; }
.dl__heads { display:flex; flex-direction:column; gap:1px; background:var(--line); }
.dl__feature {
  appearance:none; position:relative; text-align:left;
  background:#000; border:0; cursor:pointer;
  padding:clamp(24px,3.4vw,40px) clamp(22px,3vw,38px);
  display:block; width:100%; color:inherit; overflow:hidden;
}
.dl__feature:hover { background:rgba(232,234,236,0.035); }
/* the empty devlog: shaped like a card, but nothing to click */
.dl__feature--empty { cursor:default; }
.dl__feature--empty:hover { background:#000; }
.dl__meta {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px;
  font-family:var(--mono); font-size:9px; letter-spacing:.24em;
}
.dl__num { color:var(--signal); }
.dl__read { color:var(--meta-2); }
.dl__tag { padding:5px 9px; border:1px solid; }
.dl__tag--devlog      { color:var(--data-t);  border-color:rgba(150,166,90,0.45); }
.dl__tag--archive     { color:var(--sub-t);   border-color:rgba(91,143,208,0.45); }
.dl__tag--consequence { color:var(--alert-t); border-color:rgba(196,115,111,0.5); }
.dl__title {
  margin:0 0 12px; font-family:var(--display);
  font-size:clamp(24px,3.4vw,40px); font-weight:500;
  line-height:1.06; letter-spacing:-0.01em; text-wrap:balance;
}
.dl__by {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  color:var(--meta); margin-bottom:16px;
}
.dl__dek { margin:0 0 20px; max-width:64ch; font-size:15px; line-height:1.7; color:var(--prose-2); text-wrap:pretty; }
.dl__more {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--line); padding-bottom:5px;
}

/* article view */
.dl__article { display:flex; flex-direction:column; min-height:0; }
.dl__artheadwrap {
  position:relative;
  padding:clamp(24px,3.4vw,40px) clamp(22px,3vw,38px) clamp(20px,2.6vw,28px);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.dl__back {
  appearance:none; background:transparent; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  padding:0 0 18px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--meta);
}
.dl__back:hover { color:var(--signal); }
.dl__arttitle {
  margin:0 0 12px; font-family:var(--display);
  font-size:clamp(26px,3.6vw,44px); font-weight:500;
  line-height:1.05; letter-spacing:-0.01em; text-wrap:balance;
}
.dl__body {
  max-height:min(62vh, 620px); overflow-y:auto;
  padding:clamp(24px,3vw,36px) clamp(22px,3vw,38px) clamp(28px,3.4vw,44px);
  display:flex; flex-direction:column; gap:20px;
}
.dl__standfirst {
  margin:0; max-width:70ch; font-size:16.5px; line-height:1.6;
  color:var(--bone); font-family:var(--display); font-weight:400; text-wrap:pretty;
}
.dl__body p:not(.dl__standfirst) {
  margin:0; max-width:70ch; font-size:15.5px; line-height:1.78;
  color:var(--article); text-wrap:pretty;
}
/* What the devlog editor can write beyond paragraphs. The server rebuilds
   body_html from a short list of tags (devlog/lib.php, devlog_clean_html), so
   these are the only elements that can appear here. */
.dl__body strong { color:var(--bone); font-weight:600; }
.dl__body s { color:var(--meta); text-decoration-color:var(--ash); }
.dl__body a { color:var(--signal); border-bottom:1px solid rgba(111,215,232,0.35); }
.dl__body a:hover { color:var(--bone); border-color:var(--bone); }
.dl__body code {
  font-family:var(--mono); font-size:0.88em; color:var(--signal);
  background:rgba(111,215,232,0.08); padding:0.1em 0.35em;
}
.dl__body h4 {
  margin:8px 0 -6px; max-width:70ch;
  font-family:var(--display); font-weight:500; font-size:21px; line-height:1.25;
  color:var(--bone); text-wrap:balance;
}
.dl__body blockquote {
  margin:0; max-width:70ch; padding:2px 0 2px 20px;
  border-left:2px solid var(--sub-t);
  display:flex; flex-direction:column; gap:14px;
}
.dl__body blockquote p:not(.dl__standfirst) { color:var(--prose-2); font-style:italic; }
.dl__body ul, .dl__body ol {
  margin:0; max-width:70ch; padding-left:22px;
  font-size:15.5px; line-height:1.78; color:var(--article);
}
.dl__body li + li { margin-top:6px; }
.dl__body li::marker { color:var(--signal); }
.dl__body pre {
  margin:0; max-width:100%; overflow-x:auto;
  padding:14px 16px; border-left:2px solid var(--signal); background:rgba(111,215,232,0.05);
  font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--bone);
}
.dl__fig { margin:0; max-width:100%; }
.dl__fig img {
  display:block; max-width:100%; width:auto; height:auto;
  max-height:min(56vh, 540px);                 /* a tall shot never outgrows the reading box */
  border:1px solid var(--line); background:var(--field);
}
.dl__fig figcaption {
  margin-top:10px; max-width:70ch;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; line-height:1.6;
  text-transform:uppercase; color:var(--meta);
}
.dl__end {
  margin-top:8px; border-top:1px solid var(--line); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}
.dl__endstamp { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--meta-2); }
.dl__next {
  appearance:none; background:transparent; border:1px solid var(--line); cursor:pointer;
  padding:13px 18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
}
.dl__next:hover { border-color:var(--signal); color:var(--signal); }
[hidden] { display:none !important; }

/* ══ footer ════════════════════════════════════════════════════════════════ */
.foot {
  position:relative; z-index:1; background:#000;
  padding:clamp(60px,8vw,104px) clamp(18px,4vw,44px) clamp(44px,6vw,68px);
}
.foot__inner {
  max-width:1260px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,40px);
  align-items:center; justify-content:space-between;
}
.foot__logo { display:block; width:clamp(200px,30vw,340px); flex:0 0 auto; line-height:0; }
.foot__logo img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
.foot__social { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.social { display:flex; flex-direction:column; align-items:center; gap:9px; color:inherit; }
.social__box {
  width:30px; height:30px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:#000;
}
.social__box img { width:24px; height:24px; object-fit:contain; }
.social:hover .social__box img { filter:brightness(1.9); }
.social__name {
  font-family:var(--mono); font-size:8px; letter-spacing:.16em; color:var(--meta);
}
.social:hover .social__name { color:var(--bone); }
.social:hover .social__box { border-color:var(--bone); }
.foot__legal {
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--legal);
}
.foot__legal a { color:var(--meta); }
.foot__legal a:hover { color:var(--bone); }

/* ══ document pages: privacy, how we use AI, email list ════════════════════ */
.doc { --rail:58px; position:relative; padding:clamp(56px,8vw,110px) calc(var(--rail) + 10px); }
.doc > circuit-frame[mode="rail"] { --band:var(--rail); }
.doc__inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.doc__eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--data-t); margin-bottom:18px; }
.doc__title {
  margin:0 0 10px; font-family:var(--display);
  font-size:clamp(30px,4.6vw,48px); font-weight:500; letter-spacing:-0.01em; line-height:1.05;
}
.doc__meta { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--meta); margin:0 0 clamp(32px,5vw,48px); }
.doc h2 {
  margin:40px 0 12px; font-family:var(--display);
  font-size:clamp(16px,2vw,20px); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.doc p, .doc li { font-size:16px; line-height:1.75; color:var(--prose); }
.doc p { margin:0 0 18px; }
.doc ul { margin:0 0 18px; padding-left:22px; }
.doc li { margin-bottom:6px; }
.doc p a, .doc li a { color:var(--signal); border-bottom:1px solid rgba(111,215,232,0.35); }
.doc p a:hover, .doc li a:hover { color:var(--bone); border-color:var(--bone); }
.doc .join { max-width:520px; margin-top:8px; }
.doc__foot {
  margin-top:clamp(40px,6vw,64px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--meta-2);
}
.doc__foot a { color:var(--meta); }
.doc__foot a:hover { color:var(--bone); }

/* ══ narrow ════════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .sec, .doc { --rail:44px; }
}
@media (max-width:720px) {
  .strip__tag { display:none; }
  .nav { gap:12px; }
  .nav__links { font-size:9px; gap:10px 12px; }
  /* the call to action sits in the row with the other links, not on its own line */
  .nav__cta { background:transparent; color:var(--signal); padding:0; }
  .nav__cta:hover { background:transparent; color:var(--bone); }
  /* rails thin out and the gutter follows them */
  .sec, .doc { --rail:24px; }
  /* section head: mark, title and count on one row, the rule beneath */
  .sec__head { gap:10px 12px; }
  .sec__title { letter-spacing:.26em; }
  .sec__count { margin-left:auto; }
  .sec__rule { order:5; flex:1 1 100%; min-width:100%; height:18px; }
  /* the trailer card grows to fit its copy; the play button parks above it */
  .trailer { aspect-ratio:auto; min-height:0; }
  .trailer__body { position:relative; padding:172px 20px 24px; }
  .trailer__title { font-size:30px; }
  .trailer__play, .slide__play { top:78px; transform:translate(-50%,0); }
  .trailer.is-playing { aspect-ratio:16/9; }   /* the copy is hidden; the iframe needs a box */
  .dl__rail { max-width:none; }
  .dl__body { max-height:none; }
  .hero__meta { position:static; text-align:left; margin-top:16px; }
  .hero__figure { min-height:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .strip__run, .strip__dot, .hero__eye { animation:none; }
  .slide, .trailer__play { transition:none; }
}