/* AIdactic — the CINEMATIC site stylesheet.
 *
 * PORTED from design-preview/cinematic-full/style.css (Will's approved direction,
 * 2026-09-14/15) for the relaunch. This file is the design-preview sheet with exactly
 * one class of change: asset paths rewritten from the mockup's relative
 * `../assets/fonts/` to the served `/static/fonts/`. Nothing else is touched, so a
 * diff against the mockup shows only those lines and the two sheets cannot drift
 * silently.
 *
 * ⚠️ IT IS DARK-ONLY BY DESIGN. The old app.css supported a light theme and a toggle;
 * this direction does not, and a half-ported light mode would be worse than none.
 * The theme toggle comes out of the chrome with it.
 *
 * ⚠️ app.css IS STILL PRESENT AND STILL SERVED to anything not yet ported. Removing it
 * before every template moves would take the site down for the pages left behind.
 */

/* ==========================================================================
   AIdactic — CINEMATIC-FULL
   Round two of the cinematic direction: the same grammar, made the whole
   site's system. Title cards, letterbox seams, poster dissolves, one amber.
   Law carried over: the site never animates — only the content does.
   Static prototype. No network requests. No framework.
   ========================================================================== */

/* --- 1. Fonts (self-hosted; Playfair + Inter are variable files) ---------- */

@font-face {
  font-family: "Inter Var";
  src: url("/static/fonts/Inter-400.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Display — the headline cut of the family the site already ships. Tighter
   sidebearings and higher contrast at display sizes; this is what the pro look sets its
   headings in (one family, weight and size carry the hierarchy). */
@font-face {
  font-family: "Inter Display";
  src: url("/static/fonts/InterDisplay-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/static/fonts/InterDisplay-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/static/fonts/InterDisplay-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Playfair Var";
  src: url("/static/fonts/PlayfairDisplay-700.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/IBMPlexMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  --film-0: #06080F;   /* page — BLUEPRINT NAVY (Will, 2026-09-14: "I like the
                          blueprint background"). Was warm near-black #0C0A08. */
  --film-1: #0D1220;   /* first luminance step — panel */
  --film-2: #111831;   /* second luminance step */
  --film-3: #1C2740;   /* hairline-adjacent fill — vector's --line */
  --black:  #000000;   /* reserved for the letterbox bars only */

  --ink-0: #DFE9FF;
  --ink-1: #8496B8;
  --ink-2: #5A6A8C;

  --amber: #FFC24D;
  --amber-ink: #0A0C14;

  --edge: rgba(132, 150, 184, 0.20);
  --edge-soft: rgba(132, 150, 184, 0.11);
  --edge-hot: rgba(132, 150, 184, 0.38);

  --serif: "Playfair Var", Georgia, "Times New Roman", serif;
  --sans: "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* the Atlas level inks — templates set --lc from these per masterclass/card */
  --lvl-beginner: #6EE7A8; --lvl-intermediate: #60A5FA;
  --lvl-advanced: #A78BFA; --lvl-frontier: #F2765B;
  --cyan: #4FD8FF;        /* informational accent — eyebrows, slugs, marks */
  --cyan-dim: rgba(79, 216, 255, 0.32);
  --grid: rgba(90, 134, 184, 0.05);

  --r: 2px;                    /* square reads as film; rounded reads as software */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1320px;

  --lift: 120ms linear;        /* the ONLY hover duration */
  --dissolve: 900ms;           /* the ONLY content transition */
  --settle: 600ms;             /* letterbox bars + title cards easing in */

  /* grain: inline SVG, no network */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* --- 3. Reset ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--film-0);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* THE BLUEPRINT GROUND — the whole site sits on plotted paper. Two 1px gradients
     on a 72px pitch, ported from the `vector` direction. Deliberately NOT the vector
     graphic: Will asked for the paper, not the diagram drawn on it. */
  background-color: var(--film-0);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--ink-0);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }

::selection { background: var(--amber); color: var(--amber-ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* --- 4. Type utilities --------------------------------------------------- */

/* IBM Plex Mono is the TIMECODE VOICE and nothing else. */
.mono {
  font-family: var(--mono);
  font-size: 0.70rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}
.mono--bright { color: var(--ink-1); }
.mono--hot { color: var(--ink-0); }

.display {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}

.lede {
  max-width: 46ch;
  color: var(--ink-1);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  line-height: 1.66;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.rule { height: 1px; background: var(--edge); border: 0; margin: 0; }

/* --- 5. Chrome: progress hairline, masthead, corner badge ----------------- */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  z-index: 300;
  pointer-events: none;
}

/* One masthead across every page. Transparent over a hero; solid elsewhere. */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--lift), border-color var(--lift);
}
.masthead--solid,
.masthead.is-stuck {
  background: rgba(6, 8, 15, 0.90);
  backdrop-filter: blur(14px) saturate(0.8);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  border-bottom-color: var(--edge);
}
.masthead--solid { background: var(--film-0); }
.masthead--solid.is-stuck { background: rgba(6, 8, 15, 0.90); }

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.brand {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink-0);
  font-weight: 700;
  transition: color var(--lift);
  white-space: nowrap;
}
.brand:hover { color: #fff; }
.brand-dot { color: var(--amber); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--lift);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink-0); }
.nav .nav-signin {
  border: 1px solid var(--edge-hot);
  border-radius: var(--r);
  padding: 8px 12px 7px;
  color: var(--ink-1);
  transition: color var(--lift), border-color var(--lift);
}
.nav .nav-signin:hover { color: var(--ink-0); border-color: var(--edge-hot); }

.badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 320;
  font-family: var(--mono);
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-1);
  background: rgba(20, 18, 16, 0.92);
  border: 1px solid var(--edge-hot);
  border-radius: var(--r);
  padding: 8px 12px 7px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--lift), border-color var(--lift);
}
.badge:hover { color: var(--amber); border-color: rgba(227, 168, 61, 0.5); }

/* --- 6. Buttons ---------------------------------------------------------- */

.btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 24px 14px;
  border-radius: var(--r);
  transition: filter var(--lift);
}
.btn-amber:hover { filter: brightness(1.09); }
.btn-amber .glyph { font-size: 0.78rem; line-height: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-1);
  border: 1px solid var(--edge-hot);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 20px 13px;
  background: rgba(6, 8, 15, 0.55);
  transition: color var(--lift), border-color var(--lift), background var(--lift);
}
.btn-ghost:hover { color: var(--ink-0); border-color: var(--edge-hot); background: rgba(28, 25, 23, 0.75); }
.btn-ghost .glyph { color: var(--amber); }

/* --- 7. Grades, scrims, grain -------------------------------------------- */

.media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #04060C;
  border-radius: var(--r);
}
.media > img,
.media > video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* soft grade — people stay recognisable */
.grade-soft > img,
.grade-soft > video { filter: saturate(0.70) contrast(1.06) brightness(0.86); }

/* duotone — warm shadow / cool highlight split-tone for locked stills */
.grade-duo > img { filter: saturate(0.40) contrast(1.12) brightness(0.80); }
.grade-duo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(158deg, rgba(24, 48, 70, 0.48) 0%, rgba(64, 38, 12, 0.52) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}

/* warm mono — near-black into warm tone; the DOCUMENTARY grade */
.grade-warm > img,
.grade-warm > video { filter: grayscale(1) contrast(1.14) brightness(0.62); }
.grade-warm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(170deg, rgba(64, 40, 14, 0.70) 0%, rgba(30, 20, 10, 0.55) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}

/* deep — for backgrounds that carry a form or a title card */
.grade-deep > img { filter: saturate(0.34) contrast(1.10) brightness(0.38); }

.scrim-b, .scrim-l, .scrim-t, .vignette, .grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* keeps the masthead legible over a bright frame without adding a bar */
.scrim-t {
  inset: 0 0 auto 0;
  height: 200px;
  background: linear-gradient(to bottom,
    rgba(6, 8, 15, 0.88) 0%,
    rgba(6, 8, 15, 0.58) 32%,
    rgba(6, 8, 15, 0.18) 68%,
    rgba(6, 8, 15, 0) 100%);
}
/* the frame must DISSOLVE into the page, not sit on it */
.scrim-b {
  background: linear-gradient(to top,
    var(--film-0) 0%,
    rgba(6, 8, 15, 0.94) 9%,
    rgba(6, 8, 15, 0.62) 26%,
    rgba(6, 8, 15, 0.14) 55%,
    rgba(6, 8, 15, 0) 78%);
}
.scrim-l {
  background: linear-gradient(to right,
    rgba(6, 8, 15, 0.93) 0%,
    rgba(6, 8, 15, 0.78) 26%,
    rgba(6, 8, 15, 0.40) 52%,
    rgba(6, 8, 15, 0.06) 78%,
    rgba(6, 8, 15, 0) 100%);
}
.vignette {
  background: radial-gradient(125% 95% at 50% 42%, rgba(6, 8, 15,0) 38%, rgba(6, 8, 15,0.30) 74%, rgba(6, 8, 15,0.62) 100%);
}
.grain {
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 3;
}

/* --- 8. Hero + the poster dissolve ---------------------------------------- */

.hero { position: relative; }

.hero-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 470px;
  max-height: 86vh;
  background: #04060C;
  border-radius: 0;
}
.hero-media > img,
.hero-media > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the poster CYCLE: stacked frames, opacity-only, 900ms. First frame is the
   no-JS / reduced-motion state. */
.hero-media > img.cyc {
  opacity: 0;
  transition: opacity var(--dissolve) linear;
}
.hero-media > img.cyc.is-live { opacity: 1; }
/* poster -> live clip: same dissolve, video sits above the cycle */
.hero-media > video {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dissolve) linear;
}
.hero-media > video.is-on { opacity: 1; }

.hero-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding-bottom: clamp(28px, 5.2vh, 62px);
}

/* --- 8b. SPLIT HERO — title left, the site trailer right (Will, 2026-09-14) ---
   Replaces the full-bleed background clip. `.hero--split` re-scopes the pieces
   above: `.hero-body` returns to NORMAL FLOW (the absolute positioning exists only
   to float text over media, and there is no media behind it now), and the title
   loses its 16ch cap because it is sharing the row rather than owning the width. */
.hero--split { padding-block: clamp(40px, 7vh, 92px); }

/* The film takes the LARGER share of the row (Will, 2026-09-14: "make the video
   bigger"). Deliberately a ratio change rather than a wider `.wrap`: the wrap is
   shared with every section below, so widening it here would pull the title's left
   edge out of line with the rest of the page. The gap tightens a little too, which
   buys the film ~20px without taking it from the words. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 46px);
}
.hero--split .hero-body {
  position: static;                 /* ⬅ un-does the overlay rule above */
  inset: auto;
  padding-bottom: 0;
}
.hero--split .hero-title {
  /* Sized to the NARROWER column it now sits in, so the film can be bigger without
     the title breaking into a ragged third line. */
  font-size: clamp(1.95rem, 3.0vw, 3.0rem);
  max-width: 17ch;
}
.hero--split .lede { max-width: 42ch; }

/* the player: MEDIUM — it fills its column and no more, never full-bleed */
.hero-film { margin: 0; }
.hero-film-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: #04060C;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
}
.hero-film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #04060C;
}
.hero-film-cap { margin-top: 10px; color: var(--ink-2); }

/* Narrow: stack, film UNDER the words — the title is still the first thing read,
   and a 61 MB file must never be the first thing a phone meets. */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero--split .hero-title { font-size: clamp(2.3rem, 8.4vw, 3.4rem); max-width: 16ch; }
}
.hero-eyebrow { margin-bottom: 20px; color: var(--ink-1); letter-spacing: 0.12em; }
.hero-title {
  font-size: clamp(2.9rem, 7.8vw, 6.5rem);
  font-weight: 700;
  margin-bottom: 22px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero .lede { margin-bottom: 30px; color: var(--ink-0); opacity: 0.86; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.hero-facts { color: var(--ink-2); }
.hero-facts .sep { opacity: 0.45; padding-inline: 2px; }

/* the reduced-motion / mobile / no-JS affordance. JS hides it when the loop runs. */
.hero-play[hidden] { display: none; }

/* --- 9. TITLE CARDS + LETTERBOX SEAMS ------------------------------------- */
/* The full-site addition: between reels, the page cuts to black. A thin
   letterbox bar eases in top and bottom, a timecode, one Playfair line.
   Content, not chrome — so it is allowed to move, once, on entry. */

.tcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  text-align: center;
  padding-block: clamp(64px, 9vw, 120px);
}
.tcard-time { margin-bottom: 18px; }
.tcard-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.tcard-sub { margin-top: 16px; }

/* the bars: pure black against the warm page above and below the card */
.lb-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--black);
  z-index: 5;
  pointer-events: none;
}
.lb-bar--t { top: 0; border-bottom: 1px solid var(--edge-soft); }
.lb-bar--b { bottom: 0; border-top: 1px solid var(--edge-soft); }

/* easing in: opacity only, and only when JS is present */
.js .tcard .tcard-in,
.js .tcard .lb-bar {
  opacity: 0;
  transition: opacity var(--settle) linear;
}
.js .tcard.is-on .tcard-in,
.js .tcard.is-on .lb-bar { opacity: 1; }

/* a title card over a graded still */
.tcard--still { background: #04060C; }
.tcard--still > .tcard-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tcard--still > .tcard-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.30) contrast(1.12) brightness(0.30);
}
.tcard--still .tcard-in { position: relative; z-index: 4; }
.tcard--still .vignette, .tcard--still .grain { z-index: 2; }

/* --- 10. Bands ------------------------------------------------------------ */

.band { padding-block: clamp(52px, 6.6vw, 92px); }
.band--tight { padding-block: clamp(40px, 5vw, 66px); }
.band--1 { background: var(--film-1); }

.band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--edge);
}
.band-kicker { margin-bottom: 14px; }
.band-title {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 700;
}
.band-aside { text-align: right; }

/* --- 11. The chapter list -------------------------------------------------- */

.chapters { border-top: 1px solid var(--edge); }

.mod-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 26px 0 10px;
}
.mod-head .line { height: 1px; background: var(--edge-soft); }
.mod-head .mono { white-space: nowrap; }
.mod-head .mod-n { color: var(--ink-1); font-weight: 700; }

.chap { border-bottom: 1px solid var(--edge-soft); }
.chap:first-of-type { border-top: 1px solid var(--edge-soft); }

.chap-link {
  display: grid;
  grid-template-columns: 96px 84px minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 22px;
  padding: 11px 10px 11px 0;
  margin-left: -10px;
  padding-left: 10px;
  border-radius: var(--r);
  transition: background var(--lift);
}
.chap-link:hover { background: rgba(237, 231, 218, 0.035); }

.chap-thumb {
  position: relative;
  isolation: isolate;
  width: 96px;
  height: 54px;
  overflow: hidden;
  border-radius: var(--r);
  background: #04060C;
  border: 1px solid var(--edge-soft);
  flex: none;
}
.chap-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.58) contrast(1.05) brightness(0.84);
  transition: filter var(--lift);
}
.chap-link:hover .chap-thumb img { filter: saturate(0.86) contrast(1.05) brightness(1.06); }

.chap-code { color: var(--ink-2); white-space: nowrap; transition: color var(--lift); }
.chap-link:hover .chap-code { color: var(--ink-1); }

.chap-title {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.34;
  color: var(--ink-1);
  letter-spacing: -0.011em;
  transition: color var(--lift);
  min-width: 0;
}
.chap-link:hover .chap-title { color: var(--ink-0); }

.chap-stages, .chap-time { white-space: nowrap; color: var(--ink-2); font-size: 0.66rem; }
.chap-stages { opacity: 0.72; }

.chap-play {
  font-size: 0.7rem;
  color: var(--amber);
  opacity: 0;
  text-align: right;
  transition: opacity var(--lift);
}
.chap-link:hover .chap-play { opacity: 1; }

.chapters-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  margin-top: 4px;
}

/* --- 12. Watch band -------------------------------------------------------- */

.watch-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #04060C;
  border: 1px solid var(--edge);
  border-radius: var(--r);
}
.watch-media > img,
.watch-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.watch-media > video {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dissolve) linear;
}
.watch-media > video.is-on { opacity: 1; }

/* the cinema frame: permanent thin bars on a watch presentation */
.frame-bars::before,
.frame-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--black);
  z-index: 4;
  pointer-events: none;
}
.frame-bars::before { top: 0; }
.frame-bars::after { bottom: 0; }

.playbtn {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: background var(--lift);
}
.playbtn:hover { background: rgba(6, 8, 15, 0.14); }
.playbtn[hidden] { display: none; }

.playbtn-glyph {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--amber);
  border-radius: 50%;
  color: var(--amber);
  font-size: 1.1rem;
  padding-left: 5px;
  background: rgba(6, 8, 15, 0.42);
  transition: background var(--lift), filter var(--lift);
}
.playbtn:hover .playbtn-glyph { background: rgba(227, 168, 61, 0.14); filter: brightness(1.12); }
.playbtn-label { color: var(--ink-1); }

.watch-cap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* a large linked frame — hover is a brightness lift on the IMAGE, never a move */
.medialink { display: block; }
.medialink .watch-media { display: block; }
.medialink img { transition: filter var(--lift); }
.medialink:hover .grade-soft > img { filter: saturate(0.80) contrast(1.06) brightness(0.98); }
.medialink:hover .grade-warm > img { filter: grayscale(1) contrast(1.14) brightness(0.74); }

.medialink-row {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
}
.medialink-go { color: var(--amber); opacity: 0; transition: opacity var(--lift); }
.medialink:hover .medialink-go { opacity: 1; }

/* the documentary teaser: title lives INSIDE the frame, lower-left */
.teaser-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: grid;
  gap: 12px;
  padding: clamp(18px, 3.5vw, 40px) clamp(16px, 3vw, 40px);
}
.teaser-title {
  font-size: clamp(2rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.9;
}

/* --- 13. Claims ------------------------------------------------------------ */

.claims { border-top: 1px solid var(--edge); }
.claim {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--edge-soft);
}
.claim:last-child { border-bottom: 0; }
.claim-n { padding-top: 0.7em; color: var(--ink-2); }
.claim-t {
  font-size: clamp(1.7rem, 4.1vw, 3.15rem);
  font-weight: 600;
  line-height: 1.0;
  max-width: 22ch;
}
.claim-sub { margin-top: 14px; color: var(--ink-2); font-size: 0.95rem; max-width: 52ch; }

/* --- 14. Studio slate ------------------------------------------------------ */

.slate-list { border-top: 1px solid var(--edge); }
.slate-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 118px 110px;
  gap: 20px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.st {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 5px 8px 4px;
  text-align: center;
  color: var(--ink-2);
}
/* hierarchy by LUMINANCE, not by hue — amber stays rationed */
.st--review { color: var(--ink-0); border-color: var(--edge-hot); }
.st--build  { color: var(--ink-1); }
.st--research { color: var(--ink-2); opacity: 0.8; }

.slate-title {
  font-size: 0.98rem;
  color: var(--ink-1);
  font-weight: 400;
  letter-spacing: -0.008em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slate-meta, .slate-date { color: var(--ink-2); font-size: 0.64rem; }
.slate-date { text-align: right; }

.slate-more {
  padding: 20px 0 0;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* --- 15. Catalog ----------------------------------------------------------- */

.page-head { padding-top: 128px; padding-bottom: 0; }
.page-head .display {
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  font-weight: 700;
  margin-top: 20px;
  max-width: 18ch;
}
.page-head .lede { margin-top: 22px; }

/* n = 1: the one live course, full-bleed at feature size */
.feature { position: relative; margin-top: clamp(34px, 5vw, 58px); }
.feature-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 74vh;
  min-height: 380px;
  background: #04060C;
}
.feature-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.feature-media > img.cyc {
  opacity: 0;
  transition: opacity var(--dissolve) linear;
}
.feature-media > img.cyc.is-live { opacity: 1; }
.feature-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding-bottom: clamp(24px, 4vh, 48px);
}
.feature-title { font-size: clamp(2.2rem, 5.6vw, 4.4rem); margin: 18px 0 20px; max-width: 15ch; }
.feature-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }

/* 2-up ONLY. 21:9 at 3-up is an unreadable letterbox. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px) clamp(22px, 2.6vw, 36px);
}
.card { display: block; }
.card-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  background: #04060C;
}
.card-media > img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--lift);
}
.card-lockrow {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
}
.card-body { padding-top: 15px; }
.card-kicker { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 11px; }
.card-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  transition: color var(--lift);
  max-width: 24ch;
}
.card-facts { margin-top: 12px; }

.card--locked { cursor: default; }
.card--locked .card-media > img { filter: saturate(0.18) contrast(1.06) brightness(0.47); }
.card--locked .card-title { color: var(--ink-2); }
.card--locked:hover .card-media > img { filter: saturate(0.26) contrast(1.06) brightness(0.56); }
.card--locked:hover .card-title { color: var(--ink-1); }

/* --- 16. Course page ------------------------------------------------------- */

.crumb { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.crumb a { color: var(--ink-2); transition: color var(--lift); }
.crumb a:hover { color: var(--ink-0); }
.crumb .sep { color: var(--ink-2); opacity: 0.5; }

.intro-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}
.intro-copy {
  font-size: clamp(1.06rem, 0.98rem + 0.45vw, 1.26rem);
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 62ch;
  letter-spacing: -0.008em;
}
.intro-copy strong { color: var(--ink-0); font-weight: 500; }
.intro-meta { display: grid; gap: 16px; }
.meta-k { color: var(--ink-2); }
.meta-v { color: var(--ink-0); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.10em; margin-top: 5px; }

/* --- 17. Documentary page -------------------------------------------------- */

.doc-hero .hero-media { max-height: 92vh; min-height: 540px; }
.doc-present { margin-bottom: 22px; }
.doc-title {
  font-size: clamp(3.2rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  margin-bottom: 24px;
  max-width: 12ch;
}
.doc-strap { color: var(--ink-0); opacity: 0.86; max-width: 52ch; margin-bottom: 28px; }

.doc-meta-row {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: baseline;
}
.doc-meta-row .sep { opacity: 0.45; }

.syn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.syn-copy p {
  color: var(--ink-1);
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  line-height: 1.68;
  max-width: 60ch;
}
.syn-copy p + p { margin-top: 1.2em; }
.syn-copy strong { color: var(--ink-0); font-weight: 500; }
.syn-meta { display: grid; gap: 18px; align-content: start; }

/* acts */
.acts { border-top: 1px solid var(--edge); }
.act {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--edge-soft);
}
.act-n { color: var(--ink-2); }
.act-t {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--ink-0);
}
.act-sub { margin-top: 10px; color: var(--ink-2); font-size: 0.93rem; max-width: 56ch; }
.act-time { color: var(--ink-2); white-space: nowrap; }

/* the care line — bordered, quiet, no amber */
.doc-note {
  margin-top: clamp(30px, 4vw, 44px);
  border-left: 1px solid var(--edge-hot);
  padding: 4px 0 4px 20px;
  color: var(--ink-2);
  font-size: 0.92rem;
  max-width: 62ch;
}
.doc-note strong { color: var(--ink-1); font-weight: 500; }

/* in development rows */
.dev-list { border-top: 1px solid var(--edge); }
.dev-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.dev-title { color: var(--ink-1); font-size: 0.98rem; }
.dev-title em { font-style: normal; color: var(--ink-2); }

/* --- 18. Sign-in page ------------------------------------------------------ */

.gate {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 120px var(--gutter) 80px;
}
.gate-bg { position: absolute; inset: 0; z-index: 0; }
.gate-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.30) contrast(1.12) brightness(0.34);
}
.gate .vignette, .gate .grain, .gate .scrim-b { z-index: 1; }

.gate-card {
  position: relative;
  z-index: 4;
  width: min(460px, 100%);
  background: rgba(6, 8, 15, 0.82);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: clamp(28px, 5vw, 44px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gate-title {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 600;
  margin: 14px 0 12px;
}
.gate-note { color: var(--ink-1); font-size: 0.96rem; margin-bottom: 26px; max-width: 38ch; }

.form { display: grid; gap: 10px; }
.field {
  width: 100%;
  min-width: 0;
  background: var(--film-0);
  border: 1px solid var(--edge-hot);
  border-radius: var(--r);
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.10em;
  padding: 15px 16px 14px;
  transition: border-color var(--lift);
}
.field::placeholder { color: var(--ink-2); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; }
.field:focus { outline: none; border-color: var(--amber); }
.form .btn-amber { justify-content: center; }
.form-note { margin-top: 14px; }
.gate-alt { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--edge-soft); }
.gate-alt a { color: var(--ink-1); transition: color var(--lift); }
.gate-alt a:hover { color: var(--ink-0); }

/* --- 19. CTA band + footer ------------------------------------------------- */

.cta { border-top: 1px solid var(--edge); background: var(--film-1); }
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.cta-title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 600; max-width: 17ch; }
.cta-note { margin-top: 18px; color: var(--ink-2); font-size: 0.95rem; max-width: 44ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.foot { border-top: 1px solid var(--edge); padding-block: 34px 40px; }
.foot-in {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  align-items: baseline;
}
.foot a { color: var(--ink-2); transition: color var(--lift); }
.foot a:hover { color: var(--ink-0); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* --- 20. About ------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}
.about-title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; max-width: 15ch; }
.about-copy p {
  color: var(--ink-1);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  line-height: 1.68;
  max-width: 58ch;
}
.about-copy p + p { margin-top: 1.15em; }
.about-copy strong { color: var(--ink-0); font-weight: 500; }
.about-facts {
  margin-top: 26px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

/* --- 21. Responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
  .chap-link { grid-template-columns: 96px 80px minmax(0, 1fr) auto 18px; }
  .chap-stages { display: none; }
  .slate-row { grid-template-columns: 100px minmax(0, 1fr) 108px; }
  .slate-date { display: none; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-meta { grid-template-columns: repeat(3, 1fr); }
  .syn-grid { grid-template-columns: 1fr; }
  .syn-meta { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .cta-grid, .about-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .band-aside { text-align: left; }
  .act { grid-template-columns: 64px minmax(0, 1fr); }
  .act-time { grid-column: 2; margin-top: 8px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  /* NO video above the fold on mobile: poster still + one line + play button. */
  .hero-media,
  .feature-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
  }
  .doc-hero .hero-media { min-height: 0; }
  .hero-body,
  .feature-body {
    position: relative;   /* copy leaves the frame and continues on the page */
    inset: auto;
    padding: 0 0 4px;
    margin-top: -42px;    /* it rises out of the bottom scrim */
    z-index: 6;
  }
  .hero-title { font-size: clamp(2.3rem, 11vw, 3.3rem); max-width: none; }
  .doc-title { font-size: clamp(2.7rem, 14vw, 4rem); }
  .feature-title { font-size: clamp(2rem, 9.5vw, 3rem); }
  .hero .lede { font-size: 1rem; }
  .hero-actions .btn-amber, .hero-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .scrim-l { display: none; }

  .chap-link {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-block: 12px;
  }
  .chap-thumb { width: 72px; height: 41px; }
  .chap-code { grid-column: 2; grid-row: 1; font-size: 0.6rem; margin-bottom: 4px; }
  .chap-title { grid-column: 2; grid-row: 2; font-size: 0.95rem; }
  .chap-time { grid-column: 2; grid-row: 3; margin-top: 4px; font-size: 0.6rem; }
  .chap-play { display: none; }
  .chap-thumb { grid-row: 1 / 4; }

  .slate-row { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .slate-meta { display: none; }

  .claim { grid-template-columns: 1fr; gap: 12px; }
  .claim-n { padding-top: 0; }

  .mod-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding-top: 24px;
  }
  .mod-head .line { display: none; }
  .mod-head .mono { font-size: 0.56rem; letter-spacing: 0.14em; text-align: right; }
  .mod-head .mod-n { font-size: 0.62rem; letter-spacing: 0.18em; text-align: left; }
  .page-head { padding-top: 96px; }
  .badge { right: 10px; bottom: 10px; font-size: 0.55rem; padding: 6px 9px 5px; }
  .intro-meta { grid-template-columns: 1fr 1fr; }
  .syn-meta { grid-template-columns: 1fr 1fr; }
  .dev-row { grid-template-columns: 92px minmax(0, 1fr); }
  .dev-when { display: none; }
  .lb-bar { height: 7px; }
  .gate { padding-top: 96px; }
}

@media (max-width: 480px) {
  .nav { gap: 14px; }
  .nav a { font-size: 0.56rem; letter-spacing: 0.12em; }
  .nav .nav-signin { padding: 6px 8px 5px; }
  .brand { font-size: 0.64rem; letter-spacing: 0.20em; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .band-head { margin-bottom: 24px; }
  .playbtn-glyph { width: 56px; height: 56px; font-size: 0.9rem; }
  .playbtn-label { font-size: 0.58rem; letter-spacing: 0.16em; text-align: center; padding-inline: 20px; }
}

/* --- 22. Reduced motion is a FIRST-CLASS VARIANT --------------------------- */
/* The poster still is the design. The clip is opt-in, never preloaded, and
   the poster cycle simply does not start. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .hero-media > video.is-on,
  .watch-media > video.is-on { opacity: 1; }
  .js .tcard .tcard-in,
  .js .tcard .lb-bar { opacity: 1; }
}

/* --- 14. COURSE PAGE — prod's shape in cinematic's language (Will, 2026-09-14) --
   Structure lifted from the live site because Will likes how it reads: a flat
   numbered lesson list and a sticky fact card, rather than modules behind
   thumbnails. Only the palette and type are ours. Amber fills exactly ONE thing in
   the page CONTENT — the single primary action — which is what keeps it meaning
   "do this" rather than decorating. (Measured: two amber fills exist on the page;
   the second is `.progress`, the site-wide scroll hairline in the chrome. Stated
   because the first draft of this comment claimed "exactly once" and was wrong.) */

/* ⚠️ TOP PADDING CLEARS THE FIXED MASTHEAD. The masthead is `position:fixed` and
   63px tall; on a HERO page the art sits under it deliberately, but this page has no
   hero, so content started at y=45 — under the bar. `catalog.html` is the other
   hero-less page and lands its first text at y=128; matched to it rather than
   invented, so the two read as one site. */
.cpage { padding-block: 128px clamp(60px, 10vh, 120px); }

.crumb { color: var(--ink-2); margin-bottom: clamp(26px, 4vh, 44px); }
.crumb a { color: var(--ink-1); text-decoration: none; }
.crumb a:hover { color: var(--ink-0); }
.crumb-sep { opacity: 0.4; padding-inline: 6px; }

.cpage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}

.cslug { color: var(--cyan); letter-spacing: 0.16em; margin-bottom: 14px; }
.ctitle {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 700;
  margin-bottom: 22px;
  text-wrap: balance;
}

/* pills — prod's badges, squared off, because rounded reads as software */
.cpills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(34px, 5vh, 54px); }
.pill {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-1);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 6px 11px;
}
.pill--hot { color: var(--amber); border-color: rgba(227, 168, 61, 0.36); }

/* --- the course trailer, above the lesson list ---------------------------- */
.ctrailer { margin: 0 0 clamp(34px, 5vh, 52px); }
.ctrailer-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: #04060C;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
}
.ctrailer-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #04060C;
}
.ctrailer-cap { margin-top: 10px; color: var(--ink-2); }

.clabel {
  color: var(--ink-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 0;
}

/* --- the numbered rows --- */
.lrows { list-style: none; margin: 0; padding: 0; }
.lrow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--edge-soft);
  transition: border-color 0.15s;
}
.lrow:hover { border-bottom-color: var(--edge-hot); }
.lrow-n {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink-2);
  text-align: center;
  font-variant-numeric: tabular-nums;   /* 1 and 18 occupy the same width */
}
.lrow:hover .lrow-n { color: var(--amber); }
.lrow-title { font-size: 1.06rem; font-weight: 500; margin: 0 0 4px; line-height: 1.35; }
.lrow-sub { color: var(--ink-2); font-size: 0.74rem; margin: 0; }
.lrow-go { white-space: nowrap; }

/* --- the sticky fact card --- */
.cside { position: sticky; top: 88px; }
.cside-card {
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--film-1);
  padding: 24px 22px;
}
.cside-head { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.cside-sub { color: var(--ink-1); font-size: 0.9rem; margin-bottom: 20px; }
.cside-cta { display: flex; justify-content: center; width: 100%; margin-bottom: 22px; }

.facts { border-top: 1px solid var(--edge); }
.fact {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.fact .k { color: var(--ink-2); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; }
.fact .v { color: var(--ink-0); font-size: 0.78rem; }

/* Narrow: the card stops being an aside and becomes a header, ABOVE the list —
   on a phone the decision ("can I start, what does it cost") comes before the
   eighteen rows, not after them. */
@media (max-width: 900px) {
  .cpage-grid { grid-template-columns: 1fr; gap: 30px; }
  .cside { position: static; order: -1; }
  .lrow { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .lrow-go { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* --- 15. CATALOGUE — level rows (Will, via dev, 2026-09-14) ------------------
   Folded from courseforge's mockup-5-level-rows. Will's three passes: the four
   difficulty tiers are the ONLY structure (no paths, no columns) · masterclasses
   sit above the rows and are absent from them · a card opens a panel with the
   trailer left and the course information + enrol right.
   ⚠️ Level colours are the /map legend family and are DELIBERATELY NOT the
   player's environment palette (cobalt/violet/amber/silver, Will-locked 08-21). */

.mcs { padding: 128px 0 clamp(30px,4vh,48px); }
.mcs-lab { color: var(--ink-1); letter-spacing: 0.18em; margin-bottom: 18px; }
.mcs-sub { color: var(--ink-2); letter-spacing: 0.1em; margin-left: 10px; }
.mc { border: 1px solid var(--edge); border-radius: var(--r); background: var(--film-1);
      padding: 22px 22px 18px; margin-bottom: 14px; }
.mc-kick { color: var(--cyan); margin-bottom: 8px; }
.mc-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.mems { display: flex; flex-wrap: wrap; gap: 8px; }
.mem { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-1);
       border: 1px solid var(--edge); border-radius: var(--r); padding: 7px 11px; background: var(--film-2); }
.mem-n { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-2); }

.lvl { padding-block: clamp(22px, 3vh, 34px); }
.lvl > .wrap { border-left: 3px solid var(--lc); padding-left: clamp(16px, 2vw, 26px); }
.lvl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
            padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--edge); }
.lvl-name { color: var(--lc); letter-spacing: 0.2em; font-size: 0.82rem; }
.lvl-n { color: var(--ink-2); letter-spacing: 0.1em; margin-left: 8px; }
.lvl-note { color: var(--ink-2); }

.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 34px; }
.trk-name { color: var(--tc); letter-spacing: 0.16em; font-size: 0.68rem; margin-bottom: 10px; }
.trk-n { color: var(--ink-2); margin-left: 6px; }
.cards { display: flex; flex-direction: column; gap: 8px; }


/* --- 16. CATALOGUE V2 (scout's contract, 2026-09-14) -------------------------
   Five surfaces, each answering one question. Changes from the first fold:
   · SHORTIES COME OFF THE LADDER into their own feed — on the grid the beginner
     row was 150 items of which 135 were shorties, burying the real courses.
   · The grid is COURSES ONLY. Practicals and labs exist as types and both count
     ZERO, so their columns are not rendered — a column per unbuilt thing would
     advertise what we have not made.
   · Advanced + frontier is ~10 items. Rows size to their content rather than
     being forced equal, so the page does not claim depth it lacks. */

.cards--flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }

/* a level read off a title, not off built lesson content — provisional, and it
   says so rather than presenting an estimate as a rung */
.mcard.is-est { border-style: dashed; }
.est { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
       text-transform: uppercase; color: var(--ink-2); margin-left: auto; padding-left: 8px; }

.mem--unbuilt { opacity: 0.62; border-style: dashed; }
.mem-note { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--ink-2); margin-left: 8px; }

.grid-lab { padding-top: clamp(30px,4vh,50px); }

.shsec { padding-block: clamp(40px,6vh,76px) clamp(56px,9vh,110px); }
.stabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.stab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
        text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--edge);
        border-radius: var(--r); padding: 8px 12px; transition: color var(--lift), border-color var(--lift); }
.stab:hover { color: var(--ink-0); }
.stab.is-on { color: var(--cyan); border-color: var(--cyan-dim); }
.stab-n { color: var(--ink-2); margin-left: 6px; }
.shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 6px 18px; list-style: none; padding: 0; margin: 0; }
.shorts[hidden] { display: none; }
.sh { font-size: 0.86rem; color: var(--ink-1); padding: 7px 0;
      border-bottom: 1px solid var(--edge-soft); }
.stab--unsorted { border-style: dashed; }

/* --- 17. FILLED CARDS — the Atlas treatment (Will, 2026-09-14) ---------------
   ⭐ THE PALETTE WAS HALF-RIGHT BEFORE. Each level in the Atlas is a PAIR —
   [dark fill, bright ink] — and I had only the ink. beginner #0F2B1E/#6EE7A8 ·
   intermediate #122642/#60A5FA · advanced #231C3D/#A78BFA · frontier
   #331512/#F2765B, read out of the Atlas source rather than taken from a handoff.
   The fill is what makes a card read as "coloured in" rather than outlined. */

.ccard {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  /* align-content, not align-items: a grid row is as tall as its tallest card, so
     in a row that mixes a thumbnailed card with a plain one the plain card's two
     lines would otherwise sit pinned to the top against centred neighbours */
  align-content: center;
  gap: 2px 7px; text-align: left; width: 100%; cursor: pointer; position: relative;
  /* NON-COLOURED (Will, 2026-09-14 — reverted from the Atlas fills). The level is
     carried by the LEFT EDGE and the meta ink only; the card body stays the page's
     own panel colour, so 215 cards read as one surface rather than four. */
  background: var(--film-1);
  border: 1px solid var(--edge);
  border-left: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: var(--r); padding: 10px 12px; color: var(--ink-0);
  transition: border-color var(--lift), background var(--lift);
}
.ccard:hover { border-color: var(--ink); background: var(--film-2); }
.ccard .star { color: var(--ink); font-size: 0.72rem; line-height: 1.5; }
.ccard-t { grid-column: 2; font-size: 0.9rem; line-height: 1.32; }
.ccard .star + .ccard-t { grid-column: 2; }
.ccard-m { grid-column: 2; font-size: 0.6rem; color: color-mix(in srgb, var(--ink) 68%, transparent); }
.ccard.is-est { border-style: dashed; }
/* a shortie is a five-minute explainer, so its card is quieter than a course's —
   same system, less weight, which is what keeps 163 of them from shouting */
.ccard--sh { background: transparent; }

.mc { border: 1px solid var(--edge); background: var(--film-1);
      border-left: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.mc-kick { color: var(--ink); }
.mc-goal { color: var(--ink-1); font-size: 0.92rem; max-width: 62ch; margin: -6px 0 16px; }
.mem { background: var(--film-2); border-color: var(--edge); }
.mem-n { color: var(--ink); }

/* --- 18. THE COURSE PANEL (Will, 2026-09-14) ---------------------------------
   ⛔ THIS SECTION DID NOT EXIST. The panel markup and its JS have been in place
   since the catalogue-V2 fold, and `#scrim` had NO rule anywhere in this file —
   so it laid out `position: static` at the bottom of the document, 4,117px down,
   with no background. Clicking a card ran the handler, filled in every field and
   set `hidden = false`, and the reader saw nothing happen. That IS Will's
   "click to open card doesnt work"; renaming the handler's selector fixed the
   half that was measurable and left the half that was visible.

   ⚠️ And the check that missed it read `#pt`'s textContent — which the handler
   fills whether or not one pixel is painted. A panel test has to assert the panel
   is IN THE VIEWPORT and covering the page, not that the data arrived.

   THE ART LIVES HERE, not on the grid cards. At ~560px the generated image is a
   drawing; at 300px on a card it was texture competing with the title, and only
   10 of 52 courses have one, which split the grid into a hero band and a
   leftover list. Few things, large = where a picture earns its place. */

.scrim {
  position: fixed; inset: 0;
  /* ⚠️ ABOVE EVERY OTHER FIXED LAYER, measured rather than guessed: masthead 200,
     progress 300, the preview badge 320. At 90 the nav bar floated on top of the
     modal and the top strip could not be clicked to dismiss it. */
  z-index: 400;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 6, 11, 0.82);
  backdrop-filter: blur(3px);
  animation: pfade 180ms ease both;
}
.scrim[hidden] { display: none; }   /* `hidden` loses to `display:grid` without this */
@keyframes pfade { from { opacity: 0 } to { opacity: 1 } }

.panel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0; width: min(980px, 100%); max-height: min(86vh, 660px);
  background: var(--film-1);
  border: 1px solid var(--edge);
  /* --pc is the course's LEVEL colour, set by app.js — the panel is the one place
     the level is stated in colour now that the cards are quiet */
  border-top: 2px solid var(--pc, var(--ink));
  border-radius: var(--r); overflow: hidden;
  animation: prise 220ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes prise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.pleft { display: flex; flex-direction: column; min-width: 0; background: #06080F; }
.pvid { position: relative; aspect-ratio: 16 / 9; background: #06080F; display: grid; place-items: center; }
.pvid video, .pvid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the honest empty frame — a course with neither trailer nor art says so */
.pvid-none { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
             text-transform: uppercase; color: var(--ink-2); }
.pcap { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--ink-2); margin: 0; padding: 12px 16px 16px; }

.pright { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px;
          border-left: 1px solid var(--edge); overflow-y: auto; min-width: 0; }
.peyebrow { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--pc, var(--ink-2)); margin: 0; }
.ptitle { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem); line-height: 1.15; margin: 0; }
.pfacts { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge);
          border-radius: var(--r); overflow: hidden; }
.pfacts .fact { display: flex; justify-content: space-between; gap: 12px;
                background: var(--film-2); padding: 9px 12px; }
.pfacts .k { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pfacts .v { font-size: 0.66rem; color: var(--ink-0); }
.penrol { margin-top: auto; align-self: start; }

.pclose {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 1.5rem; color: var(--ink-2); padding: 4px 8px;
  transition: color var(--lift);
}
.pclose:hover { color: var(--ink-0); }

@media (max-width: 780px) {
  .scrim { padding: 0; place-items: stretch; }
  .panel {
    grid-template-columns: 1fr;
    /* auto + 1fr, not two stretched rows: the media column is content-height so
       the caption is not followed by a field of black, and the remainder goes to
       the information column, where `margin-top:auto` seats Enrol at the bottom */
    grid-template-rows: auto 1fr;
    width: 100%; max-height: none; border-radius: 0;
    border-left: 0; border-right: 0; overflow-y: auto;
  }
  .pright { border-left: 0; border-top: 1px solid var(--edge); overflow-y: visible; }
}

/* --- 19. THE CORPORATE-TRAINING PASS (Will, 2026-09-14) ----------------------
   "I like the look of the main page but I want to push it slightly more
   professional for corporate training while keeping a bit of our cool vibe."

   ⭐ WHAT MAKES IT READ AS CONSUMER RATHER THAN CORPORATE IS THE MICRO-TYPE, NOT
   THE PALETTE. Every small element on the page was mono, uppercase and tracked at
   0.20-0.30em — nav, buttons, labels, level names alike. Wide-tracked mono caps is
   a terminal voice, and using it for EVERYTHING spends the effect on things that
   are not machine facts. So the split is now enforced rather than decorative:

     MONO stays for MACHINE FACTS  — counts, statuses, lesson numbers, timecodes,
                                     the wordmark, the level descriptors.
     SANS takes HUMAN CHROME       — navigation and buttons, sentence case, tight.

   The blueprint ground, the amber CTA, the serif headline and the mono data voice
   are all untouched — that is the "bit of our cool vibe" the change is protecting.
   What goes is the shouting. */

/* tracking down a third across every mono label: still unmistakably technical,
   no longer set at poster spacing */
.mono { letter-spacing: 0.15em; font-size: 0.68rem; }
.brand { letter-spacing: 0.22em; }

/* NAV — sentence case sans. Uppercase mono nav is the single loudest "startup demo"
   signal on the page, and navigation is the one place a corporate reader expects
   to spend no attention at all. */
.nav a {
  font-family: var(--sans); font-size: 0.84rem; font-weight: 450;
  letter-spacing: 0.005em; text-transform: none;
}
.nav .nav-signin { font-weight: 500; padding: 7px 14px; }

/* BUTTONS — same move. "Start AI for Everyone" is a sentence; setting it as
   STARTAIFOREVERYONE at 0.16em tracking made it a sign rather than an action. */
.btn-amber, .btn-ghost {
  font-family: var(--sans); text-transform: none;
  letter-spacing: 0.005em; font-size: 0.88rem; font-weight: 600;
}
.btn-amber { padding: 14px 22px; }
.btn-ghost { font-weight: 500; padding: 12px 18px; }

/* LEVEL HEADS — the name in ink, the colour carried by the rail beside it.
   Four neon words down the page read as a games UI; the same information in white
   against a coloured rule reads as a report, and the level colour still does its
   job of telling you which band you are in. */
.lvl-name { color: var(--ink-0); letter-spacing: 0.15em; }
.lvl-name::before {
  content: ""; display: inline-block; vertical-align: 0.06em;
  width: 16px; height: 2px; margin-right: 10px;
  background: var(--lc); opacity: 0.9;
}
.lvl-n { letter-spacing: 0.1em; }

/* the section label gets a hairline instead of floating — structure is most of
   what separates a document from a mood board */
.mcs-lab {
  letter-spacing: 0.15em; color: var(--ink-1);
  border-bottom: 1px solid var(--edge-soft);
  padding-bottom: 10px; margin-bottom: 20px;
}

/* the hero spec row wrapped mid-item at 1440 — an orphaned "no sign-up" under a
   headline is the kind of small break that reads as unfinished */
.hero-facts { letter-spacing: 0.12em; }   /* NOT nowrap — see §19 note */


/* --- 20. COURSE PAGE, PARAMETERISED (Will, 2026-09-15) -----------------------
   The page is now hydrated from ?c=<slug>, so two states exist that the hardcoded
   version never had: a course with NO lesson list, and a slug that resolves to
   nothing. Both are stated rather than styled away. */

/* the stated absence — set as prose, not as a disabled-looking list, because it is
   a fact about the catalogue rather than a broken component */
.cnote {
  color: var(--ink-1); font-size: 0.95rem; max-width: 52ch;
  border-left: 2px solid var(--edge); padding: 2px 0 2px 14px;
  margin: clamp(18px, 3vh, 30px) 0 0;
}
/* the art, when a course has no trailer, sits in the same frame the video uses */
.ctrailer-frame img.ctrailer-video { display: block; width: 100%; height: auto; }
.cside-cta[hidden] { display: none; }   /* a hidden CTA must not hold its space */

/* --- 21. THE MASTERCLASS PAGE (Will, 2026-09-15) -----------------------------
   "a masterclasses page too, which shows the courses part of it and can host a
   video." A masterclass is A SEQUENCE OF COURSES (Will, D90), so the page is built
   around the sequence: promise and film at the top, then numbered steps you walk in
   order — not a lesson list, which is the course page's job one level down. */

/* the masthead is FIXED at 62px — the first cut used a 30px top pad and tucked the
   breadcrumb underneath it. Matched to .cpage, which already clears it. */
.mcpage { padding-block: clamp(92px,12vh,124px) clamp(56px,9vh,110px); }
.mcpage-top {
  display: grid; gap: clamp(22px,3vw,40px);
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  align-items: start; margin-bottom: clamp(34px,5vh,58px);
}
@media (max-width: 900px) { .mcpage-top { grid-template-columns: 1fr; } }

.mckick { color: var(--lc, var(--ink-2)); margin: 0 0 10px; }
.mctitle { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.04; margin: 0 0 14px; }
.mcgoal { color: var(--ink-1); font-size: 1.05rem; max-width: 46ch; margin: 0 0 20px; }
.mcgoal[hidden] { display: none; }

.mcfilm { margin: 0; }
/* the frame holds its 16:9 whether or not a film is in it, so an absent trailer
   reads as an empty frame rather than as a collapsed layout */
.mcfilm .ctrailer-frame { aspect-ratio: 16/9; display: grid; place-items: center; background: #06080F; }
/* provenance sits on its own line rather than trailing the caption mid-wrap */
.capnote { display: block; text-transform: none; letter-spacing: 0.04em;
           color: var(--ink-2); margin-top: 3px; }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.step { border-top: 1px solid var(--edge-soft); }
.step:last-child { border-bottom: 1px solid var(--edge-soft); }
.step-link, .step--inert {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0 18px; padding: 18px 4px; color: var(--ink-0);
  transition: background var(--lift);
}
.step-link:hover { background: var(--film-1); }
.step-n {
  font-family: var(--mono); font-size: 1.1rem; color: var(--lc, var(--ink-2));
  min-width: 2ch; text-align: right;
}
.step-title { font-size: 1.08rem; font-weight: 500; margin: 0 0 4px; line-height: 1.25; }
.step-sub { font-size: 0.62rem; color: var(--ink-2); margin: 0; }
.step-go { white-space: nowrap; }
/* a member with no page is INERT, never a link to a 404 — and says which it is */
.step--inert { opacity: 0.62; }
.step-none { font-size: 0.6rem; color: var(--ink-2); white-space: nowrap; }

@media (max-width: 640px) {
  .step-link, .step--inert { grid-template-columns: auto 1fr; gap: 2px 14px; }
  .step-go, .step-none { grid-column: 2; justify-self: start; margin-top: 8px; }
}
.mc-link { color: inherit; }
.mc-link:hover { color: var(--ink); }

/* --- 22. THE DOCUMENTARIES PAGE (Will, 2026-09-15) ---------------------------
   "Update the documentaries page with the three documentaries that are done."

   The old page was a single-film launch page for AI Psychosis — a hero, a
   three-acts band, a "be there for the first showing" CTA. Three finished films
   is a different object: a SHORT LIST where each entry has to carry its own film,
   its own runtime and its own state, so the page is a numbered list of large
   frames rather than a pitch for one title.

   ⚠️ THE STATE CHIP IS NOT DECORATION. Cognitive Security is mastered; Is AI
   Conscious? exists only as a pre-grade cut and genuinely reads dark. Styling the
   three identically would have made CSS do the lying. */

.films { padding-block: clamp(92px,12vh,124px) clamp(56px,9vh,110px); }
.films-eyebrow { color: var(--ink-1); margin: 0 0 14px; }
.films-title { font-size: clamp(2rem,1.4rem + 2.4vw,3.1rem); line-height: 1.06; margin: 0 0 18px; }
.films-lede { max-width: 56ch; margin: 0 0 clamp(36px,6vh,64px); }

.filmlist { list-style: none; padding: 0; margin: 0;
            display: grid; gap: clamp(30px,5vh,58px); }
.film {
  display: grid; gap: clamp(18px,2.6vw,36px);
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  align-items: center;
  padding-top: clamp(26px,4vh,44px);
  border-top: 1px solid var(--edge-soft);
}
.film:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 820px) { .film { grid-template-columns: 1fr; } }

.film-frame { position: relative; margin: 0; aspect-ratio: 16/9;
              background: #06080F; border: 1px solid var(--edge); border-radius: var(--r);
              overflow: hidden; display: grid; place-items: center; }
.film-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a piece with no flat film says so ON the frame, rather than offering a control
   that would do nothing */
.film-noplay {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-1); background: linear-gradient(transparent, rgba(6,8,15,0.92) 60%);
  padding: 22px 12px 10px; text-align: center;
}

.film-meta { color: var(--ink-2); margin: 0 0 10px; }
.film-title { font-size: clamp(1.5rem,1.1rem + 1.4vw,2.1rem); line-height: 1.1; margin: 0 0 12px; }
.film-logline { color: var(--ink-1); font-size: 1rem; max-width: 46ch; margin: 0 0 14px; }
.film-facts { color: var(--ink-2); margin: 0; }

.film-state { padding: 2px 7px; border: 1px solid var(--edge); border-radius: var(--r); }
.film-state--done  { color: var(--ink-0); border-color: var(--edge-hot); }
.film-state--grade { color: var(--amber); border-color: rgba(255,194,77,0.4); }

.films-note { margin-top: clamp(40px,6vh,70px); }

/* --- 23. ACCOUNT PAGES (Will, 2026-09-15: "resyle account pages") -------------
   Sign-in, the code step, the confirm steps and the profile. They are the ONLY
   pages a learner meets while not yet inside a lesson, so they carry the site's
   voice rather than the old app.css card look.

   ⭐ A SINGLE CENTRED PANEL ON THE BLUEPRINT GROUND, not a "card" floating in a
   container. The rest of the site has no cards; giving auth one would make the
   sign-in feel like a different product bolted to the side. Same near-black, same
   hairlines, same mono micro-type, amber for the one action.

   ⚠️ FORM CONTROLS ARE STYLED EXPLICITLY. `color-scheme: dark` alone leaves an
   input rendering as a light widget on a near-black ground in some engines, which
   is the single ugliest thing that can happen to an otherwise-dark page. */

.auth-wrap { min-height: 72vh; display: grid; place-items: center;
             padding: clamp(96px,14vh,140px) var(--gutter) clamp(60px,10vh,110px); }
.auth {
  width: min(460px, 100%);
  background: var(--film-1);
  border: 1px solid var(--edge);
  border-top: 2px solid var(--amber);
  border-radius: var(--r);
  padding: clamp(26px,4vw,38px);
}
.auth-eyebrow { color: var(--ink-2); margin: 0 0 12px; }
.auth h1 { font-family: var(--serif); font-size: clamp(1.6rem,1.2rem + 1.4vw,2.1rem);
           line-height: 1.1; margin: 0 0 12px; color: var(--ink-0); }
.auth-sub { color: var(--ink-1); font-size: 0.96rem; margin: 0 0 22px; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em;
                   text-transform: uppercase; color: var(--ink-2); }
.auth-form input {
  width: 100%; box-sizing: border-box;
  background: #06080F; color: var(--ink-0);
  border: 1px solid var(--edge-hot); border-radius: var(--r);
  padding: 13px 14px; font-family: var(--sans); font-size: 0.98rem;
  transition: border-color var(--lift);
}
.auth-form input::placeholder { color: var(--ink-2); }
.auth-form input:focus { outline: none; border-color: var(--amber); }
.auth-form input[name="code"] {
  font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0.4em; text-align: center;
}
.auth-form .btn-amber { justify-content: center; margin-top: 6px; }
.auth-alt { margin: 20px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.auth-alt a { color: var(--ink-1); border-bottom: 1px solid var(--edge-hot); }
.auth-alt a:hover { color: var(--ink-0); }

/* an error has to be findable without colour alone — a left rule carries it too */
.auth-err {
  background: rgba(242,118,91,0.08); border: 1px solid rgba(242,118,91,0.35);
  border-left-width: 3px; border-radius: var(--r);
  color: #F2765B; font-size: 0.9rem; padding: 10px 13px; margin: 0 0 18px;
}

/* the profile page is the same panel, wider, with the site's fact-row treatment */
.acct-wrap { padding: clamp(96px,14vh,140px) var(--gutter) clamp(60px,10vh,110px);
             max-width: 760px; margin: 0 auto; }
.acct-title { font-family: var(--serif); font-size: clamp(1.8rem,1.3rem + 1.8vw,2.6rem);
              line-height: 1.06; margin: 0 0 8px; color: var(--ink-0); }
.acct-sub { color: var(--ink-1); margin: 0 0 clamp(26px,4vh,40px); }
.acct-panel { background: var(--film-1); border: 1px solid var(--edge);
              border-radius: var(--r); padding: clamp(20px,3vw,28px); margin-bottom: 18px; }
.acct-panel h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 14px; color: var(--ink-0); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 500; background: var(--amber);
                   color: var(--amber-ink); padding: 10px 14px; border-radius: var(--r); }
/* the profile carries a <select> and a success state the auth pages do not */
.auth-form select {
  width: 100%; box-sizing: border-box; background: #06080F; color: var(--ink-0);
  border: 1px solid var(--edge-hot); border-radius: var(--r);
  padding: 12px 14px; font-family: var(--sans); font-size: 0.96rem;
}
.auth-form select:focus { outline: none; border-color: var(--amber); }
/* success reuses the error panel's SHAPE so the two never disagree on layout, and
   overrides only the colour — a second full rule would drift from the first */
.auth-ok { background: rgba(110,231,168,0.08); border-color: rgba(110,231,168,0.35);
           color: #6EE7A8; }
.nav-logout { display: inline; margin: 0; }
.nav-logout button { background: none; cursor: pointer; font-family: var(--sans);
                     font-size: 0.84rem; font-weight: 500; }

/* --- 24. PROFILE INTAKE CHIPS (Will, 2026-09-17) -----------------------------
   Radio and checkbox groups rendered as selectable chips — a closed set should
   LOOK like a closed set. The native control stays in the DOM (keyboard, screen
   readers, form submission all untouched); only its box is hidden. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 8px 13px; border-radius: var(--r);
  border: 1px solid var(--edge-hot); color: var(--ink-1);
  font-family: var(--sans); font-size: 0.86rem;
  transition: color var(--lift), border-color var(--lift), background var(--lift);
}
.chip:hover span { color: var(--ink-0); }
.chip input:checked + span { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- 25. PHONE AUDIT (terminal-relay, 2026-09-17, 400×860 Chromium, measured) ------
   Every rule here answers a number in their report; the number is the reason. */

/* The course page is THREE grid items now — head (name, subtitle, pills), main
   (trailer, outcomes, lessons), side (the card). Desktop: head and main stack in
   column 1, the card spans both rows in column 2, so nothing moves visually.
   Phone: head → card → main, so the name is the first thing on screen and the
   decision card is still one swipe away rather than under five lesson rows. */
.cpage-head { grid-column: 1; }
.cpage-main { grid-column: 1; }
.cside      { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .cpage-head, .cpage-main, .cside { grid-column: auto; grid-row: auto; }
  .cpage-head { order: 0; }
  .cside      { order: 1; }
  .cpage-main { order: 2; }
  /* the state pill on a lesson row is a plain span, so at two columns it fell into
     the 34px number column: box 32px, content 58px, border through the word. Place it
     exactly as .lrow-go is placed. */
  .lrow > .pill { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* Tap targets: 9–12 per page under 44px — footer links 57×16, nav 22px tall, the
   wordmark 17px. Vertical padding only; the type does not move. */
.nav a { padding-block: 11px; }
.brand { display: inline-block; padding-block: 12px; }
.foot-links a { display: inline-block; padding-block: 12px; }

/* The mono label texture is 10.88px on a phone with 200–350 chars of it per page.
   Size, not choice: a step up and a touch less tracking at phone width. */
@media (max-width: 480px) {
  .mono { font-size: 0.76rem; letter-spacing: 0.16em; }
  .pill { font-size: 0.74rem; }
}
/* Home dead band: .mcs carries 128px top padding at every width, on top of the
   hero's bottom padding — a half-screen of nothing on a 1.8-screenful page. */
@media (max-width: 860px) { .mcs { padding-top: 56px; } }
/* second pass on the same instrument (relay's tools/phone-audit.js against live):
   footer links 42px, Sign in 38px, wordmark 41px, masterclass member links 32–38px. */
.foot-links a { padding-block: 13px; }
.nav .nav-signin { padding-block: 10px; }
.brand { padding-block: 14px; }
.mc-link { display: inline-block; padding-block: 8px; }
.mem { padding-block: 10px; }               /* stays inline-flex — the number + title */
@media (max-width: 480px) { .brand { font-size: 0.7rem; } }
/* the last real sub-44 target on the course page (relay's re-measure): the breadcrumb link */
.crumb a { display: inline-block; padding-block: 13px; }

/* --- 26. DOC PAGES + CERTIFICATE on the new chrome (2026-09-17) ------------------
   privacy / contact / certificate were the last pages on base.html + app.css. */
.docpage { padding-block: clamp(40px, 7vh, 88px); }
.docpage-in { max-width: 68ch; }
.docpage-eyebrow { color: var(--cyan); letter-spacing: 0.16em; margin-bottom: 14px; }
.docpage-title { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); margin: 0 0 18px; }
.docpage h2 { font-family: var(--serif); font-size: 1.25rem; margin: 34px 0 8px; }
.docpage p { color: var(--ink-1); line-height: 1.65; margin: 0 0 12px; }
.docpage p.lede { color: var(--ink-0); opacity: 0.86; margin-bottom: 8px; }
.docpage a { color: var(--amber); }
.docpage strong { color: var(--ink-0); font-weight: 500; }
.docpage-note { color: var(--ink-2); letter-spacing: 0.1em; margin-top: 34px; }

.cert-actions { display: flex; gap: 12px; margin: 0 0 22px; }
.cert {
  text-align: center; background: var(--film-1); border: 1px solid var(--edge);
  border-radius: var(--r); padding: clamp(36px, 7vw, 72px) clamp(24px, 6vw, 64px);
  outline: 2px solid var(--amber); outline-offset: -14px;
}
.cert-brand { letter-spacing: 0.30em; color: var(--ink-0); margin: 0; }
.cert-eyebrow { color: var(--amber); margin: 8px 0 28px; }
.cert-presented { color: var(--ink-2); margin: 14px 0 4px; }
.cert-name { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); margin: 4px 0; }
.cert-course { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); margin: 4px 0 8px; color: var(--ink-1); }
.cert-meta { color: var(--ink-2); margin: 10px 0 0; }
.cert-seal {
  width: 72px; height: 72px; margin: 22px auto 0; border-radius: 50%; display: grid;
  place-items: center; font-size: 2rem; color: #fff7e6;
  background: radial-gradient(circle at 32% 28%, hsl(calc(var(--h,36) + 18) 75% 58%), hsl(var(--h,36) 60% 38%));
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.3);
}
@media print {
  .masthead, .foot, .cert-actions { display: none !important; }
  body { background: #fff; }
  .cert { background: #fff; color: #111; border-color: #999; }
  .cert-name, .cert-course, .cert-brand, .cert-presented, .cert-meta { color: #111; }
}

/* --- 27. HOME BANDS: story · who this is for · highlights (D188/D189/D190) ---------
   Three bands between the hero and the catalogue. Restraint is deliberate: the hero and
   the films already carry the page's boldness, so these lean on type and one hue each. */

.band-lab { color: var(--ink-2); letter-spacing: 0.18em; margin: 0 0 clamp(18px, 2.6vh, 28px); }

/* THE STORY — one column, measured for reading, the pull line doing the forwarding */
.story { padding-block: clamp(46px, 7vh, 96px); border-top: 1px solid var(--edge); }
.story-in { max-width: 62ch; }
.story-h { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin: 0 0 16px; }
.story-p { color: var(--ink-1); font-size: 1.04rem; line-height: 1.68; margin: 0 0 22px; }
.story-pull {
  font-family: var(--serif); font-style: italic; color: var(--ink-0);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem); line-height: 1.42; margin: 0;
  border-left: 2px solid var(--amber); padding-left: 18px;
}
.story-pull em { font-style: normal; opacity: 0.82; }

/* WHO THIS IS FOR — five cards, one hue each. The hues are analogous to the site's own
   amber/cyan so five boxes read as a set rather than as a paint chart; the tint is 7% so
   the colour identifies the card without shouting over the type. */
:root {
  --who-sand: #B08D57; --who-amber: #E3A83D; --who-sage: #7FA88A;
  --who-cyan: #7FC4D8; --who-slate: #8D9BB5; --who-rust: #D08A6A;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --who-sand: #7A5C2E; --who-amber: #A8720F; --who-sage: #3F6B4F;
    --who-cyan: #1E7A93; --who-slate: #4A5872; --who-rust: #A6502F;
  }
}
:root[data-theme="light"] {
  --who-sand: #7A5C2E; --who-amber: #A8720F; --who-sage: #3F6B4F;
  --who-cyan: #1E7A93; --who-slate: #4A5872; --who-rust: #A6502F;
}
.who { padding-block: clamp(40px, 6vh, 78px); border-top: 1px solid var(--edge); }
.who-grid {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.who-card {
  border: 1px solid var(--edge); border-top: 3px solid var(--who); border-radius: var(--r);
  background: var(--film-1);                                   /* fallback first */
  background: color-mix(in srgb, var(--who) 7%, var(--film-1));
  overflow: hidden; display: flex; flex-direction: column;
}
/* ⚠️ `height: auto` IS LOAD-BEARING, not tidiness. The <img> carries width/height
   attributes (they reserve the box and stop layout shift), and those map to
   presentational hints — so with `width: 100%` set here and a height coming from the
   attribute, BOTH dimensions were specified and `aspect-ratio` was silently IGNORED.
   Measured on the real page: 344×400 (0.86) where 8/5 wants 344×215. The declaration
   was correct and was not the one that won; only the computed value showed it, and only
   because the band was looked at. Keep the attributes, keep height auto. */
.who-img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.who-body { padding: 18px 20px 20px; display: grid; gap: 8px; }
.who-tag { color: var(--who); letter-spacing: 0.2em; margin: 0; }
.who-line { color: var(--ink-0); opacity: 0.92; font-size: 1.02rem; line-height: 1.5; margin: 0; }

/* HIGHLIGHTS — not cards. Four facts under one hairline each, so the page does not read
   as three rows of boxes; the cards above are where the object metaphor is spent. */
.hl { padding-block: clamp(40px, 6vh, 78px); border-top: 1px solid var(--edge); }
.hl-grid {
  display: grid; gap: clamp(22px, 3vw, 40px) clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.hl-item { border-top: 1px solid var(--edge-hot); padding-top: 16px; }
.hl-title { font-size: 1.22rem; margin: 0 0 8px; }
.hl-line { color: var(--ink-1); margin: 0; line-height: 1.6; max-width: 46ch; }
.hl-demo { margin: clamp(28px, 4vh, 44px) 0 0; }

/* --- 28. THE "PRO" LOOK — a preview, not the default (Will, 2026-09-17) -------------
   "I like the design of Cohere's site. It looks professional… if we want companies to
   adopt us for corporate training maybe we should position a bit more professional."
   Toggled by ?look=pro (cookie) and scoped entirely under [data-look="pro"], so no
   visitor sees it unless they ask. What it borrows from the enterprise register is the
   GROUND (warm off-white), the RESTRAINT (one sans, heavy weight, wide air) and the calm
   — not the trust apparatus we do not have. The films and the player keep their dark
   frames on purpose: video wants dark, and a light site around dark films reads as a
   studio, which is what we are. */
:root[data-look="pro"] {
  color-scheme: light;
  --film-0: #F5F4EF;   /* page — warm off-white, the Cohere ground */
  --film-1: #FFFFFF;   /* panel */
  --film-2: #EDEBE4;   /* second step */
  --film-3: #E3E0D6;
  --ink-0: #121212;
  --ink-1: #45443F;
  --ink-2: #7C7A72;
  --amber: #E3A83D;    --amber-ink: #121212;
  --edge: rgba(18, 18, 18, 0.10);
  --edge-soft: rgba(18, 18, 18, 0.06);
  --edge-hot: rgba(18, 18, 18, 0.22);
  --cyan: #1E6F84;     --cyan-dim: rgba(30, 111, 132, 0.30);
  --grid: rgba(18, 18, 18, 0.035);
  --lvl-beginner: #1F8A55; --lvl-intermediate: #1F5FBF;
  --lvl-advanced: #6D3FC4; --lvl-frontier: #C4482E;
  --who-sand: #7A5C2E; --who-amber: #A8720F; --who-sage: #3F6B4F;
  --who-cyan: #1E7A93; --who-slate: #4A5872; --who-rust: #A6502F;
  /* ONE family. Headlines are Inter Display (the same family's display cut), body is
     Inter; the hierarchy is weight and size, never a second voice. */
  --serif: "Inter Display", var(--sans);
  --display: "Inter Display", var(--sans);
}
[data-look="pro"] body { background: var(--film-0); }
[data-look="pro"] .display { font-weight: 650; letter-spacing: -0.022em; line-height: 1.02; }
[data-look="pro"] .hero-title { font-weight: 600; letter-spacing: -0.03em; }
[data-look="pro"] .masthead, [data-look="pro"] .masthead--solid {
  background: rgba(245, 244, 239, 0.92); border-bottom: 1px solid var(--edge);
}
[data-look="pro"] .brand, [data-look="pro"] .brand:hover { color: var(--ink-0); }
[data-look="pro"] .nav a { color: var(--ink-1); }
[data-look="pro"] .nav a:hover { color: var(--ink-0); }
/* the enterprise CTA: a black pill, the one thing on the page that is fully dark */
[data-look="pro"] .nav .nav-signin { background: var(--ink-0); color: #fff; border-color: var(--ink-0); border-radius: 999px; }
[data-look="pro"] .btn-amber { border-radius: 999px; }
[data-look="pro"] .btn-ghost { border-color: var(--edge-hot); color: var(--ink-0); border-radius: 999px; background: transparent; }
[data-look="pro"] .btn-ghost:hover { background: rgba(18, 18, 18, 0.06); }
/* air — the single most legible difference between an editorial page and an enterprise one */
[data-look="pro"] .story, [data-look="pro"] .who, [data-look="pro"] .hl, [data-look="pro"] .mcs, [data-look="pro"] .lvl { padding-block: clamp(64px, 9vh, 120px); }
[data-look="pro"] .hero--split { padding-block: clamp(72px, 10vh, 140px); }
[data-look="pro"] .story-pull { border-left-color: var(--ink-0); font-style: normal; font-weight: 500; }
[data-look="pro"] .who-card { background: #fff; box-shadow: 0 1px 2px rgba(18,18,18,0.04); }
[data-look="pro"] .mc { background: #fff; }
[data-look="pro"] .grid-lines, [data-look="pro"] .bg-grid { opacity: 0.5; }
/* films and the player stay dark on purpose — see the section note */
[data-look="pro"] .hero-film-frame, [data-look="pro"] .ctrailer-frame, [data-look="pro"] .film-frame { box-shadow: 0 24px 60px -30px rgba(18,18,18,0.45); }
[data-look="pro"] .foot { background: var(--ink-0); color: #C9C6BC; border-top: 0; }
[data-look="pro"] .foot a, [data-look="pro"] .foot .mono { color: #C9C6BC; }
[data-look="pro"] .foot a:hover { color: #fff; }

/* --- 29. THE FILM PLAYER — our chrome, not the browser's (Will, 2026-09-18) ---------
   "I like it, integrate to the site." The default control bar is the one element we
   cannot art-direct and the only one that offers our films as a DOWNLOAD. static/film.js
   strips `controls` and injects this; the markup keeps `controls` so a failed script
   degrades to today's behaviour rather than to a dead poster.
   Applies to every framed video — home trailer, course trailers, masterclass, films,
   shorts — and works on BOTH grounds, because the frame is dark either way. */
.film-ui { position: relative; }
.film-ui video { display: block; }

.film-open {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; padding: 0;
  background: linear-gradient(to top, rgba(6, 8, 15, 0.55), rgba(6, 8, 15, 0.04) 58%);
}
.film-ui.is-playing .film-open { display: none; }
.film-open span {
  width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px); border-radius: 50%;
  background: rgba(243, 241, 234, 0.96); color: #14161C; display: grid; place-items: center;
  font-size: clamp(1rem, 1.3vw, 1.25rem); padding-left: 4px;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, background 0.18s ease;
}
.film-open:hover span { transform: scale(1.06); background: #fff; }

.film-bar {
  position: absolute; inset: auto 0 0 0; display: none; gap: 9px; padding: 13px 15px 12px;
  background: linear-gradient(to top, rgba(6, 8, 15, 0.92), rgba(6, 8, 15, 0));
  opacity: 0; transition: opacity 0.2s ease;
}
.film-ui.is-playing .film-bar { display: grid; }
.film-ui.is-playing:hover .film-bar,
.film-ui.is-playing:focus-within .film-bar { opacity: 1; }
.film-ui.is-playing .film-bar { opacity: 1; }

.film-track { height: 3px; background: rgba(243, 241, 234, 0.26); border-radius: 2px; cursor: pointer; position: relative; }
.film-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--amber); border-radius: 2px; }
.film-row { display: flex; align-items: center; gap: 14px; color: rgba(243, 241, 234, 0.92); }
.film-btn {
  background: none; border: 0; color: inherit; cursor: pointer; padding: 4px;
  line-height: 1; font-size: 0.95rem; font-family: inherit;
}
.film-btn:hover { color: #fff; }
.film-cc { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; opacity: 0.66; }
.film-cc.is-on { opacity: 1; color: var(--amber); }
.film-push { margin-left: auto; }
.film-time {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: rgba(243, 241, 234, 0.82);
}
@media (prefers-reduced-motion: reduce) { .film-open span { transition: none; } }
.film-btn svg { display: block; }

/* --- 30. PICTURE BANDS (Will, 2026-09-18: "use lots of pictures like the cohere site")
   The imagery is OURS — stills lifted from our own documentaries and a frame of a lesson
   actually running. Nothing licensed, nothing stock, and every picture is a thing a
   learner can go and watch. The films are dark, so these bands read as cinema on the
   light ground and as continuity on the dark one. ------------------------------------ */

/* THE PRODUCT SHOT — a lesson mid-explanation, beside the headline. The hero's job is
   showing the thing, which a video with a play button cannot do without a click. */
.hero-shot { margin: 0; }
.hero-shot-frame {
  border-radius: 12px; overflow: hidden; background: var(--film-2);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.6);
}
.hero-shot-frame img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.hero-shot-cap { margin-top: 12px; color: var(--ink-2); }

/* THE PROOF STRIP — where an enterprise page puts its logo wall. We have no logos, so it
   carries the four things that are true instead. */
.proof { border-block: 1px solid var(--edge); padding-block: clamp(34px, 5vh, 56px); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 26px 40px; }
.proof-item { display: grid; gap: 7px; }
.proof-item .k { color: var(--amber); letter-spacing: 0.16em; }
.proof-item p { color: var(--ink-1); font-size: 0.96rem; margin: 0; }

/* THE FEATURE — full-bleed, two pictures, copy over the left one. */
.feature { display: grid; grid-template-columns: 1fr 1fr; }
.feature-copy, .feature-shot { position: relative; min-height: clamp(360px, 46vw, 560px); overflow: hidden; }
.feature-copy > img, .feature-shot > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.feature-copy::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 8, 15, 0.86) 0%, rgba(6, 8, 15, 0.62) 52%, rgba(6, 8, 15, 0.28) 100%);
}
.feature-in {
  position: relative; z-index: 1; align-self: center; display: grid; gap: 18px;
  padding: clamp(32px, 5vw, 70px); max-width: 30rem; margin-left: auto;
}
.feature-in .k { color: var(--amber); letter-spacing: 0.18em; }
.feature-in h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); color: #F2EDE3; margin: 0; }
.feature-in p { color: rgba(242, 237, 227, 0.82); margin: 0; max-width: 34ch; }
.feature-in .btn-ghost, .feature-in .btn-amber { justify-self: start; margin-top: 6px; }
.feature-in .btn-ghost { border-color: rgba(242, 237, 227, 0.45); color: #F2EDE3; }
.feature-in .btn-ghost:hover { border-color: #F2EDE3; }

/* COURSE CARDS — a picture, a sentence, and the counts that are true. */
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 22px; }
.ccard2 {
  background: var(--film-1); border: 1px solid var(--edge); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: border-color 0.18s ease;
}
.ccard2:hover { border-color: var(--edge-hot); }
.ccard2-img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--film-2); }
.ccard2-body { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; flex: 1; }
.ccard2-kick { color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.ccard2-kick .live { width: 6px; height: 6px; border-radius: 50%; background: var(--lvl-beginner); }
.ccard2 h3 { font-size: 1.24rem; margin: 0; }
.ccard2 p { color: var(--ink-1); font-size: 0.95rem; margin: 0; }
.ccard2-meta { margin-top: auto; padding-top: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* THE SITE FILM — its own band, wide, not a widget in the hero. */
.reel { border-top: 1px solid var(--edge); padding-block: clamp(46px, 7vh, 92px); }
.reel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: 28px; }
.reel-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); max-width: 24ch; margin: 0; }
.reel-head p { color: var(--ink-1); max-width: 36ch; margin: 0; }

/* FILM CARDS — documentaries and shorts, on the home page. */
.fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 22px; }
.fcard { display: grid; gap: 13px; text-decoration: none; }
.fcard-shot { position: relative; border-radius: 10px; overflow: hidden; background: var(--film-2); }
.fcard-shot img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.3s ease; }
.fcard:hover .fcard-shot img { transform: scale(1.02); }
.fcard-play {
  position: absolute; inset: auto auto 13px 13px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(243, 241, 234, 0.94); color: #14161C; display: grid; place-items: center;
  font-size: 0.78rem; padding-left: 3px;
}
.fcard h3 { font-size: 1.1rem; margin: 0; }
.fcard p { color: var(--ink-1); font-size: 0.93rem; margin: 0; }
.fcard .k { color: var(--ink-2); }

/* THE CLOSE — full-bleed, one picture, one thing to do. */
.close { position: relative; overflow: hidden; min-height: clamp(330px, 40vw, 460px); display: grid; place-items: center; text-align: center; }
.close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close::after { content: ""; position: absolute; inset: 0; background: rgba(6, 8, 15, 0.72); }
.close-in { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: center; padding: clamp(40px, 6vw, 70px) 24px; }
.close-in h2 { font-size: clamp(2rem, 4vw, 3.1rem); color: #F2EDE3; margin: 0; }
.close-in p { color: rgba(242, 237, 227, 0.8); margin: 0; max-width: 46ch; }
.close-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.close-cta .btn-ghost { border-color: rgba(242, 237, 227, 0.45); color: #F2EDE3; }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature-shot { min-height: 260px; }
  .feature-in { margin-left: 0; max-width: none; }
}

/* the pro ground: the pictures stay dark, the type around them goes light */
[data-look="pro"] .proof { background: var(--film-2); }
[data-look="pro"] .ccard2 { background: #fff; }
[data-look="pro"] .reel { border-top-color: var(--edge); }
.band-courses, .band-films { padding-block: clamp(46px, 7vh, 92px); }
.band-films { border-top: 1px solid var(--edge); }

/* five audiences want one row on a wide screen — auto-fit was landing on four and
   orphaning the fifth, which reads as a mistake rather than a grid */
@media (min-width: 1080px) { .who-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* and a stronger scrim on the feature copy: the picture behind it is a photograph, not a
   flat, so the gradient has to survive whatever the brightest frame puts under the text */
.feature-copy::after {
  background: linear-gradient(100deg, rgba(6, 8, 15, 0.93) 0%, rgba(6, 8, 15, 0.78) 48%, rgba(6, 8, 15, 0.42) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   31 · THE PAGE WILL DESCRIBED — 2026-09-18 (docs/SITE-PLAN.md §1)
   Hero → film → who this is for → shorts → documentaries → the course selector.
   ⚠️ The five-across who-grid rule above is now WRONG — there are six audiences.
   It is overridden below rather than edited in place, because the rule it is part of
   belongs to the band as it shipped and this section is the one Will reviews.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the open hero: one column, centred, lots of air. Cohere's shape. ── */
.hero--open { padding-block: clamp(56px, 11vh, 132px) clamp(34px, 5vh, 62px); }
.hero-open-in { max-width: 62rem; margin-inline: auto; text-align: center; }
.hero--open .hero-title { margin: 0 0 18px; }
.hero--open .lede { margin: 0 auto; max-width: 42rem; }
.hero-who {
  margin: 22px auto 30px; max-width: 54rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 6px 10px; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-1); opacity: 0.86;
}
.hero-who .sep { opacity: 0.4; }
.hero--open .hero-actions { justify-content: center; }
.hero--open .hero-facts { margin-top: 20px; }

/* the film wants width, not a column */
.reel--wide { padding-block: clamp(8px, 2vh, 24px) clamp(40px, 6vh, 78px); border-top: 0; }
.reel--wide .wrap { max-width: 82rem; }

/* ── band furniture shared by the new sections ── */
.band-h { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); margin: 6px 0 26px; }
.band-link { color: inherit; text-decoration: none; }
.band-link:hover { color: var(--amber); }

/* ── WHO THIS IS FOR, now a disclosure. <details> so the ladder opens with no JS;
      site.js adds hover-to-open on pointer devices on top of this. ── */
.who-body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rung {
  display: grid; gap: 3px; padding-left: 12px;
  border-left: 2px solid var(--lc);
}
.rung-lab {
  color: var(--lc); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.rung-txt { font-size: 0.93rem; line-height: 1.45; color: var(--ink-0); opacity: 0.9; }
/* SIX now, not five — three across reads better than a six-wide row of thin columns */
@media (min-width: 1080px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── SHORTS / DOCUMENTARIES — a horizontal rail, built to fill.
      ⚠️ It scrolls when it overflows and simply does not when it does not, so one card
      and twenty cards both look deliberate. Will: "By Monday we're going to have a ton." ── */
.rail-band { padding-block: clamp(40px, 6vh, 78px); border-top: 1px solid var(--edge); }
.rail-head { display: grid; gap: 4px; margin-bottom: 22px; }
.rail-head h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.rail-head p { margin: 0; color: var(--ink-1); }
.rail-all { justify-self: start; margin-top: 6px; color: var(--amber); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.14em; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin-inline: calc(var(--gut, 0px) * -1);
  padding-inline: var(--gut, 0px);
  scrollbar-width: thin;
}
/* ⚠️ a rail that never overflows must not look half-empty: cap the track at four so a
   single card sits at card width instead of stretching across the page */
@media (min-width: 900px) { .rail { grid-auto-columns: minmax(258px, 0.25fr); } }
.rcard {
  scroll-snap-align: start; text-decoration: none; color: inherit;
  border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
  background: var(--film-1); display: grid; align-content: start;
}
.rcard:hover { border-color: var(--amber); }
.rcard-shot { position: relative; aspect-ratio: 16 / 9; background: #0b0d14; }
.rcard-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard .k, .rcard-t, .rcard-l { margin: 0; padding-inline: 16px; }
.rcard .k { padding-top: 14px; color: var(--ink-1); }
.rcard-t { font-size: 1.12rem; padding-top: 4px; }
.rcard-l { font-size: 0.9rem; line-height: 1.45; color: var(--ink-1); padding-bottom: 16px; padding-top: 6px; }

/* ── THE COURSE SELECTOR — the section Will expects people to interact with ── */
.sel { padding-block: clamp(46px, 7vh, 92px); border-top: 1px solid var(--edge); }
/* A band whose content is a React island. It stays hidden until the island has painted
   (islands.tsx stamps data-painted on the mount), so with scripting off — or before CI
   has built the bundle — the page shows the server-rendered fallback and never an empty
   band with a lone heading. The fallback is hidden by the island, after paint. */
.island-band:not(:has([data-island][data-painted])) { display: none; }
.sel-note { color: var(--ink-1); margin: -14px 0 30px; }
.sel-note a { color: var(--amber); }
.sel-lvl { padding-top: 22px; border-top: 1px solid var(--edge); margin-top: 22px; }
.sel-lvl:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.sel-lab {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  color: var(--lc); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem;
}
.sel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc); }
.sel-row { display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sel-card {
  border: 1px solid var(--edge); border-left: 3px solid var(--lc); border-radius: var(--r);
  background: var(--film-1); overflow: hidden;
}
.sel-card { display: block; text-decoration: none; color: inherit; }
.sel-card:hover { border-color: var(--amber); }
.sel-img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; }
.sel-body { display: grid; gap: 7px; padding: 16px 18px 18px; }
.sel-kick { color: var(--ink-1); display: flex; align-items: center; gap: 7px; }
.sel-t { font-size: 1.2rem; }
.sel-l { font-size: 0.95rem; line-height: 1.5; color: var(--ink-1); }
.sel-more { color: var(--amber); letter-spacing: 0.1em; font-size: 0.74rem; }
.sel-open { padding: 0 18px 18px; display: grid; gap: 14px; }
.ctrailer-frame { margin: 0; border-radius: var(--r); overflow: hidden; background: #0b0d14; }
.ctrailer-frame video { width: 100%; display: block; aspect-ratio: 16 / 9; }
.sel-lessons { margin: 0; padding-left: 1.25em; display: grid; gap: 5px;
  font-size: 0.92rem; line-height: 1.4; color: var(--ink-1); }
.sel-cta { margin: 0; }
/* an empty rung is a STATEMENT, not a gap — it is why someone comes back */
.sel-empty {
  margin: 0; padding: 14px 16px; border: 1px dashed var(--edge); border-radius: var(--r);
  color: var(--ink-1); font-size: 0.93rem;
}

/* ── THE MISSION — one paragraph, set large, nothing else in the band ── */
.mission { padding-block: clamp(46px, 7vh, 92px); border-top: 1px solid var(--edge); }
.mission-in { max-width: 48rem; }
.mission-p {
  margin: 6px 0 0; font-size: clamp(1.12rem, 0.98rem + 0.8vw, 1.5rem); line-height: 1.5;
  color: var(--ink-0);
}

/* ── the footer's three promises ── */
.foot-promise { margin: 10px 0 0; color: var(--ink-1); opacity: 0.72; font-size: 0.74rem;
  line-height: 1.7; max-width: 46rem; }

/* ── the organizations page's list ── */
.org-list { display: grid; gap: 12px; padding-left: 1.1em; }
.org-list li { line-height: 1.55; }

/* ── the pro treatment, for the new bands ── */
[data-look="pro"] .rcard,
[data-look="pro"] .sel-card { background: #fff; box-shadow: 0 1px 2px rgba(18,18,18,0.04); }
[data-look="pro"] .rcard-shot { background: #EDEFF2; }

/* ── the signed-in shelves (Will, 2026-09-18): continue → recommended → explorer ── */
.cont, .rec { padding-block: clamp(30px, 4.5vh, 56px); border-top: 1px solid var(--edge); }
.cont-row { display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cont-card {
  display: grid; text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid var(--edge); border-left: 3px solid var(--amber); border-radius: var(--r);
  background: var(--film-1);
}
.cont-card:hover { border-color: var(--amber); }
.cont-img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; }
.cont-body { display: grid; gap: 8px; padding: 16px 18px 18px; justify-items: start; }
.cont-t { font-size: 1.15rem; margin: 0; }
.cont-meta { color: var(--ink-1); margin: 0; }
/* the bar is DECORATIVE — the "lesson N of M" line above it is the real statement, so a
   learner with images or CSS off still knows exactly where they are */
.bar { display: block; width: 100%; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink-1) 22%, transparent); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--amber); }

/* a card that is not a disclosure — the recommended shelf goes straight to the course */
.sel-card--flat { display: block; text-decoration: none; color: inherit; }
.sel-card--flat:hover { border-color: var(--amber); }

/* finished: a tick, and the card steps back without disappearing */
.sel-card.is-done { border-left-color: var(--lvl-beginner); }
.sel-card.is-done .sel-img { opacity: 0.72; }
.tick { color: var(--lvl-beginner); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   32 · THE COURSE MODAL — Will, 2026-09-18, pointing at the forge-review Map card:
   "I like this way of people exploring courses on click, just styled to match the site."
   Video left, facts and a big enrol button right, close in the corner.
   ⚠️ Styled to OUR palette, not the reference: amber rather than the hub's green,
   Playfair for the title, mono labels, the level colour as the accent rail.
   ═════════════════════════════════════════════════════════════════════════ */
.cmodal {
  border: 0; padding: 0; background: transparent; color: var(--ink-0);
  max-width: min(1100px, 94vw); width: 100%;
  max-height: 92vh; overflow: visible;
}
.cmodal::backdrop { background: rgba(4, 6, 12, 0.78); backdrop-filter: blur(3px); }
.cmodal-in {
  position: relative; display: grid; gap: 0;
  grid-template-columns: 1fr;
  background: var(--film-1); border: 1px solid var(--edge);
  border-top: 3px solid var(--lc); border-radius: var(--r);
  overflow: hidden; max-height: 92vh;
}
@media (min-width: 820px) { .cmodal-in { grid-template-columns: 1.35fr 1fr; } }
.cmodal-media { padding: clamp(16px, 2vw, 24px); overflow-y: auto; }
.cmodal-side {
  padding: clamp(18px, 2.2vw, 28px); overflow-y: auto;
  border-top: 1px solid var(--edge); display: grid; gap: 12px; align-content: start;
}
@media (min-width: 820px) { .cmodal-side { border-top: 0; border-left: 1px solid var(--edge); } }
.cmodal-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--film-2) 86%, transparent);
  border: 1px solid var(--edge); color: var(--ink-0);
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.cmodal-x:hover { border-color: var(--amber); color: var(--amber); }
.cmodal-cover { width: 100%; height: auto; border-radius: var(--r); display: block; }
.cmodal-cap, .cmodal-sub { color: var(--ink-1); margin: 10px 0 6px; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 0.7rem; }
.cmodal-kick { display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--lc); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; }
.cmodal-t { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.cmodal-l { margin: 0; color: var(--ink-1); line-height: 1.5; }
.cmodal-facts { margin: 6px 0 0; display: grid; gap: 0; }
.cmodal-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--edge);
}
.cmodal-facts dt { color: var(--ink-1); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.68rem; margin: 0; }
.cmodal-facts dd { margin: 0; text-align: right; }
.cmodal-facts .is-done-t { color: var(--lvl-beginner); }
.cmodal-cta { display: grid; gap: 10px; margin-top: 8px; }
.cmodal-cta .btn-amber, .cmodal-cta .btn-ghost { text-align: center; justify-content: center; }
/* the page must not scroll behind an open modal */
body.has-modal { overflow: hidden; }

[data-look="pro"] .cmodal-in { background: #fff; }
[data-look="pro"] .cmodal::backdrop { background: rgba(28, 30, 36, 0.62); }


/* ── 33 · THE AUDIENCE BAND, CORRECTED (Will, 2026-09-18) ────────────────────
   Two notes from him on one screenshot:
     · "the workers, teachers etc text needs to be bigger" — the audience name was mono
       uppercase at 0.74rem, sized like a kicker when it is the HEADING of the card. It
       is what a reader scans the band by, so it is now a real heading.
     · "open for details looks funny cause it leaves the rest of the row blank" — the
       card was a <details>; opening one grew its grid row while its neighbours stayed
       short. The ladder is now always visible, so the shape cannot differ between cards.
   ══════════════════════════════════════════════════════════════════════════ */
.who-card { display: flex; flex-direction: column; }
.who-tag {
  margin: 0; color: var(--who);
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.15; letter-spacing: -0.01em; text-transform: none;
}
.who-line { color: var(--ink-0); opacity: 0.9; font-size: 0.97rem; line-height: 1.5; margin: 0; }
/* the ladder sits in the card body now, not in a disclosure panel */
.who-card .rungs { padding: 0 20px 20px; margin: 0; }
.who-card .who-body { padding-bottom: 14px; }
/* every card the same height so the row never shows a ragged gap */
.who-grid { align-items: stretch; }
.who-card .rungs { margin-top: auto; }

/* the home page points at the full listing — courses, shorts and documentaries each
   have their own page, and the front page is the highlight (Will, 2026-09-18) */
.sel-all { text-align: center; margin: 26px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   34 · LESSON FEATURES — the cartoon player (Will, 2026-09-18)
   Replaces "What makes a lesson different": four paragraphs asking the reader to
   imagine the product, now a diagram of it with four clickable parts.
   ⛔ DRIVEN BY RADIO + :checked, NO JAVASCRIPT. The band that replaced it must not
   depend on a script — site.js was silently not being loaded until today, and a
   JS-driven band would have shipped dead exactly like the course modal did.
   ═════════════════════════════════════════════════════════════════════════ */
.lf { padding-block: clamp(46px, 7vh, 92px); border-top: 1px solid var(--edge); }
.lf-wrap { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .lf-wrap { grid-template-columns: 1.15fr 0.85fr; align-items: center; } }
.lf-radio { position: absolute; opacity: 0; pointer-events: none; }

.lf-stage { position: relative; }
.lf-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* the cartoon itself — flat, obviously a drawing, never mistaken for a screenshot */
.lf-frame  { fill: var(--film-1); stroke: var(--edge); stroke-width: 1.5; }
.lf-chrome { fill: color-mix(in srgb, var(--ink-1) 12%, transparent); }
.lf-dot    { fill: var(--ink-1); opacity: 0.45; }
.lf-panel  { fill: color-mix(in srgb, var(--ink-1) 7%, transparent);
             stroke: var(--edge); stroke-width: 1; transition: fill .18s, stroke .18s; }
.lf-art    { fill: color-mix(in srgb, var(--amber) 35%, transparent); transition: fill .18s; }
.lf-stroke { stroke: var(--ink-1); stroke-width: 2.5; stroke-linecap: round;
             stroke-linejoin: round; opacity: 0.5; transition: stroke .18s, opacity .18s; }
.lf-bar    { fill: var(--ink-1); opacity: 0.55; }
.lf-bar--dim { opacity: 0.25; }
.lf-chip   { fill: none; stroke: var(--ink-1); stroke-width: 1.5; opacity: 0.5; }
.lf-seal   { fill: none; stroke: var(--lvl-beginner); stroke-width: 2; }
.lf-tick   { stroke: var(--lvl-beginner); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* leader lines: hidden until their part is chosen, so only one schematic shows at a time */
.lf-lead     { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .18s; }
.lf-lead-dot { fill: var(--amber); opacity: 0; transition: opacity .18s; }

/* the tap targets sit over the diagram; each covers its own part */
.lf-tap {
  position: absolute; display: flex; align-items: center; gap: 7px;
  cursor: pointer; border-radius: 6px; padding: 4px 8px;
  background: color-mix(in srgb, var(--film-1) 88%, transparent);
  border: 1px solid var(--edge); color: var(--ink-1);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--mono, ui-monospace, monospace);
  -webkit-tap-highlight-color: transparent; transition: border-color .18s, color .18s;
}
.lf-tap:hover { border-color: var(--amber); color: var(--amber); }
.lf-tap-n {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber); color: #10131b; font-size: 0.64rem; font-weight: 700;
}
/* positioned as a % of the 520x330 box so they track the drawing at any width */
.lf-tap--animated    { left: 7%;  top: 20%; }
.lf-tap--interactive { left: 7%;  top: 66%; }
.lf-tap--coach       { left: 68%; top: 20%; }
.lf-tap--certificate { left: 68%; top: 60%; }

/* the explanations — one visible at a time, in place, so the band never changes height */
.lf-panels { position: relative; min-height: 190px; }
.lf-exp {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .2s; display: grid; gap: 8px; align-content: center;
  border-left: 3px solid var(--amber); padding-left: clamp(16px, 2vw, 26px);
}
.lf-exp-n { margin: 0; color: var(--amber); letter-spacing: 0.24em; }
.lf-exp-t { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); }
.lf-exp-l { margin: 0; color: var(--ink-1); font-size: 1.02rem; line-height: 1.55; }

/* ── the :checked wiring. One block per feature: the chosen part lights up, its leader
   line appears, and its explanation replaces the previous one. ── */
#lf-animated:checked    ~ .lf-stage .lf-hot[data-for="animated"]    .lf-panel,
#lf-interactive:checked ~ .lf-stage .lf-hot[data-for="interactive"] .lf-panel,
#lf-coach:checked       ~ .lf-stage .lf-hot[data-for="coach"]       .lf-panel,
#lf-certificate:checked ~ .lf-stage .lf-hot[data-for="certificate"] .lf-panel {
  fill: color-mix(in srgb, var(--amber) 14%, transparent);
  stroke: var(--amber);
}
#lf-animated:checked    ~ .lf-stage .lf-lead--animated,
#lf-interactive:checked ~ .lf-stage .lf-lead--interactive,
#lf-coach:checked       ~ .lf-stage .lf-lead--coach,
#lf-certificate:checked ~ .lf-stage .lf-lead--certificate { opacity: 1; }
#lf-animated:checked    ~ .lf-panels .lf-exp--animated,
#lf-interactive:checked ~ .lf-panels .lf-exp--interactive,
#lf-coach:checked       ~ .lf-panels .lf-exp--coach,
#lf-certificate:checked ~ .lf-panels .lf-exp--certificate { opacity: 1; visibility: visible; }
#lf-animated:checked    ~ .lf-stage .lf-tap--animated,
#lf-interactive:checked ~ .lf-stage .lf-tap--interactive,
#lf-coach:checked       ~ .lf-stage .lf-tap--coach,
#lf-certificate:checked ~ .lf-stage .lf-tap--certificate { border-color: var(--amber); color: var(--amber); }
/* keyboard: the radios are visually hidden, so the focus ring has to live on the label */
.lf-radio:focus-visible + .lf-radio ~ .lf-stage .lf-tap,
.lf-radio:focus-visible ~ .lf-stage .lf-tap { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lf-panel, .lf-art, .lf-stroke, .lf-lead, .lf-lead-dot, .lf-exp, .lf-tap { transition: none; }
}

/* ── pictures on the text pages (Will, 2026-09-18: "Need images for this page") ──
   /organizations was a wall of text and it is the one page a company actually lands on. */
.docshot { margin: clamp(22px, 3vh, 34px) 0; }
.docshot img { width: 100%; height: auto; display: block; border-radius: var(--r);
  border: 1px solid var(--edge); }
.docshot figcaption { margin-top: 9px; color: var(--ink-1); font-size: 0.76rem;
  letter-spacing: 0.1em; }
.docshot--narrow { max-width: 30rem; }

/* watched films — MARK, never hide (same rule as completed courses) */
.film.is-watched .film-frame { opacity: 0.88; }
.film-seen { color: var(--lvl-beginner); }

/* ═══════════════════════════════════════════════════════════════════════════
   35 · THE PRO PASS (2026-09-19) — docs/DESIGN-SYSTEM.md "The second pass"
   Will delegated the direction calls ("I'm gonna trust you on this one"). The register
   is cohere.com: paper ground, ONE family (Inter Display for headlines, Inter for body),
   media as the hero, dark 24px media cards, nothing decorative. Everything here is
   scoped under [data-look="pro"] unless it is new structure that both looks share
   (the hero film card, the mission/close inset cards, the footer columns, the catalog
   feature, the course timeline, the certificate) — those use tokens so the dark look
   still renders them sensibly.

   THE CHROME RULE, site-wide: no mono caps eyebrows, no middle-dot meta, no "→", no
   glyphs in buttons; pill buttons; radii 6 (controls) / 12 (cards) / 24 (media cards
   and dark bands). Amber is the ONE accent and it sits on actions only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens: the design-system table is the source; §28's values are superseded ── */
:root { --display: var(--serif); --mast: 62px; --card: #0E1220; --card-ink: #F5F3EE;
        --inset: clamp(12px, 2vw, 40px); --r-card: 12px; --r-media: 24px; }
:root[data-look="pro"] {
  --film-0: #F5F3EE;   /* paper */
  --film-1: #FFFFFF;
  --film-2: #ECEAE3;
  --film-3: #E2DFD6;
  --ink-0: #131418;    /* ink */
  --ink-1: #45463F;
  --ink-2: #6B6A63;    /* 4.8:1 on paper — §28's #7C7A72 was 3.9:1 at 15px */
  --amber: #D9A441;  --amber-ink: #131418;
  --edge: rgba(19, 20, 24, 0.10);
  --edge-soft: rgba(19, 20, 24, 0.06);
  --edge-hot: rgba(19, 20, 24, 0.22);
  --grid: transparent;
  --r: 6px;
  --mast: 64px;
  --display: "Inter Display", var(--sans);
  --serif: "Inter Display", var(--sans);
}
[data-look="pro"] body { background: var(--film-0); background-image: none; font-size: 17px; line-height: 1.5; letter-spacing: 0; }
[data-look="pro"] :focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; border-radius: var(--r); }
[data-look="pro"] ::selection { background: var(--amber); color: var(--ink-0); }
/* the scroll hairline is decoration; the pro page has none */
[data-look="pro"] .progress { display: none; }

/* ── type: one family, weight and size carry the hierarchy ── */
[data-look="pro"] .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink-0); }
[data-look="pro"] .lede { font-size: 18px; line-height: 1.5; color: var(--ink-1); max-width: 46ch; }
/* ⚠️ THE FLOOR UNDER EVERY LEFTOVER `.mono`. The templates this pass owns no longer set
   mono on anything a learner reads; this rule is what stops a class that survived in a
   partial nobody re-read (or in a test-pinned label such as `.rung-lab`) from rendering
   as tracked caps. Mono remains only where set directly by name: the player's timecode
   and the one-time-code input, both genuinely technical strings. */
[data-look="pro"] .mono { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
[data-look="pro"] .sel-lab, [data-look="pro"] .rung-lab, [data-look="pro"] .cmodal-kick { color: var(--lc); }
[data-look="pro"] .band-h, [data-look="pro"] .rail-head h2, [data-look="pro"] .films-title,
[data-look="pro"] .page-title, [data-look="pro"] .acct-title, [data-look="pro"] .docpage-title,
[data-look="pro"] .mctitle, [data-look="pro"] .close-in h2 {
  font-family: var(--display); font-size: clamp(32px, 4vw, 48px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.05; color: var(--ink-0);
}
[data-look="pro"] .band-h { margin: 0 0 28px; }
[data-look="pro"] .rcard-t, [data-look="pro"] .sel-t, [data-look="pro"] .cont-t, [data-look="pro"] .ccard2 h3,
[data-look="pro"] .fcard h3, [data-look="pro"] .who-tag, [data-look="pro"] .lf-exp-t, [data-look="pro"] .cside-head,
[data-look="pro"] .hl-title, [data-look="pro"] .step-title, [data-look="pro"] .film-title, [data-look="pro"] .docpage h2,
[data-look="pro"] .acct-panel h2 {
  font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;
}
[data-look="pro"] .film-title { font-size: 24px; }
[data-look="pro"] .cmodal-t { font-size: clamp(24px, 2.2vw, 30px); }
[data-look="pro"] .k, [data-look="pro"] .rcard .k, [data-look="pro"] .sel-kick, [data-look="pro"] .sel-more,
[data-look="pro"] .cont-meta, [data-look="pro"] .film-meta, [data-look="pro"] .film-facts, [data-look="pro"] .crumb,
[data-look="pro"] .cmodal-cap, [data-look="pro"] .cmodal-sub, [data-look="pro"] .cmodal-kick, [data-look="pro"] .cmodal-facts dt,
[data-look="pro"] .sel-lab, [data-look="pro"] .step-sub, [data-look="pro"] .step-none, [data-look="pro"] .capnote,
[data-look="pro"] .ctrailer-cap, [data-look="pro"] .docpage-note, [data-look="pro"] .docshot figcaption, [data-look="pro"] .lrow-sub {
  font-size: 15px; letter-spacing: 0; text-transform: none; font-family: var(--sans);
}
[data-look="pro"] .sel-lab { font-weight: 500; }

/* ── chrome: masthead + the set wordmark ── */
[data-look="pro"] .masthead, [data-look="pro"] .masthead--solid, [data-look="pro"] .masthead--solid.is-stuck,
[data-look="pro"] .masthead.is-stuck { background: rgba(245, 243, 238, 0.94); border-bottom: 1px solid var(--edge); }
[data-look="pro"] .masthead-in { height: var(--mast); }
[data-look="pro"] .brand, [data-look="pro"] .brand:hover {
  font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  text-transform: none; line-height: 1; color: var(--ink-0); padding-block: 10px;
}
[data-look="pro"] .brand-dot { color: var(--amber); }
[data-look="pro"] .nav { gap: 22px; }
[data-look="pro"] .nav a { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-1); padding-block: 10px; }
[data-look="pro"] .nav a:hover, [data-look="pro"] .nav a[aria-current="page"] { color: var(--ink-0); }
[data-look="pro"] .nav .nav-signin, [data-look="pro"] .nav .nav-signin:hover {
  background: var(--ink-0); color: #fff; border: 1px solid var(--ink-0); border-radius: 999px; padding: 9px 16px;
}
[data-look="pro"] .nav-logout button { font-size: 15px; font-weight: 500; color: var(--ink-1); }
/* phone: the bar becomes two rows (wordmark, then a scrolling row of links) rather
   than nine-pixel type in one. Sign in leads the row so the way in is never off-screen. */
@media (max-width: 720px) {
  :root[data-look="pro"] { --mast: 104px; }
  [data-look="pro"] .masthead-in { flex-wrap: wrap; height: auto; padding-block: 4px 0; gap: 0 16px; }
  [data-look="pro"] .nav { width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 10px; scrollbar-width: none; }
  [data-look="pro"] .nav::-webkit-scrollbar { display: none; }
  [data-look="pro"] .nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); padding-right: 32px; }
  [data-look="pro"] .nav a { font-size: 14px; padding-block: 6px; }
  [data-look="pro"] .nav .nav-signin { order: -1; padding: 7px 14px; }
  [data-look="pro"] .nav-logout { order: -1; }
}

/* ── buttons: pills, one accent ── */
[data-look="pro"] .btn-amber, [data-look="pro"] .btn-ghost {
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; text-transform: none;
  line-height: 1.2; padding: 13px 22px; border-radius: 999px; gap: 8px;
  transition: filter var(--lift), background var(--lift), border-color var(--lift), color var(--lift);
}
[data-look="pro"] .btn-amber { background: var(--amber); color: var(--ink-0); }
[data-look="pro"] .btn-amber:hover { filter: brightness(1.06); }
[data-look="pro"] .btn-ghost { background: transparent; border: 1px solid var(--edge-hot); color: var(--ink-0); }
[data-look="pro"] .btn-ghost:hover { background: rgba(19, 20, 24, 0.06); border-color: var(--edge-hot); color: var(--ink-0); }
[data-look="pro"] .btn-amber:focus-visible, [data-look="pro"] .btn-ghost:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; border-radius: 999px; }
.btn-amber .glyph, .btn-ghost .glyph { display: none; }   /* no glyphs in buttons, whichever look */
.btn-sm { padding: 8px 14px; font-size: 15px; }
[data-look="pro"] .btn-sm { padding: 8px 14px; font-size: 15px; }
/* on a dark card the secondary is paper */
.card-dark .btn-ghost { border-color: rgba(245, 243, 238, 0.42); color: var(--card-ink); background: transparent; }
.card-dark .btn-ghost:hover { background: rgba(245, 243, 238, 0.08); border-color: rgba(245, 243, 238, 0.62); color: var(--card-ink); }
.card-dark :focus-visible { outline-color: var(--card-ink); }

/* ── radii: 6 / 12 / 24 ── */
[data-look="pro"] .rcard, [data-look="pro"] .sel-card, [data-look="pro"] .cont-card, [data-look="pro"] .who-card,
[data-look="pro"] .ccard2, [data-look="pro"] .cside-card, [data-look="pro"] .auth, [data-look="pro"] .cmodal-in,
[data-look="pro"] .acct-panel, [data-look="pro"] .sel-empty, [data-look="pro"] .cnote, [data-look="pro"] .auth-err {
  border-radius: var(--r-card);
}
[data-look="pro"] .cont-card { border-left: 1px solid var(--edge); }
[data-look="pro"] .ctrailer-frame, [data-look="pro"] .film-frame, [data-look="pro"] .hero-film-frame,
[data-look="pro"] .cmodal-cover, [data-look="pro"] .docshot img {
  border-radius: var(--r-media); border: 0; background: var(--card);
}
[data-look="pro"] .cmodal-media .ctrailer-frame, [data-look="pro"] .sel-open .ctrailer-frame { border-radius: var(--r-card); }
[data-look="pro"] .field, [data-look="pro"] .auth-form input, [data-look="pro"] .auth-form select,
[data-look="pro"] .chip span, [data-look="pro"] .lf-tap { border-radius: var(--r); }
/* the films are shown as cut, not graded down for a dark page */
[data-look="pro"] .grade-soft > img, [data-look="pro"] .grade-soft > video,
[data-look="pro"] .ctrailer-frame > video, [data-look="pro"] .ctrailer-frame > img { filter: none; }
[data-look="pro"] .medialink:hover .grade-soft > img { filter: none; }

/* amber comes off everything that is not an action */
[data-look="pro"] .rcard:hover, [data-look="pro"] .sel-card:hover, [data-look="pro"] .sel-card--flat:hover,
[data-look="pro"] .cont-card:hover { border-color: var(--edge-hot); }
[data-look="pro"] .band-link:hover { color: var(--ink-1); }
[data-look="pro"] .rail-all, [data-look="pro"] .sel-note a, [data-look="pro"] .docpage a, [data-look="pro"] .auth-alt a {
  color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge-hot);
}
[data-look="pro"] .sel-more { color: var(--ink-1); }
[data-look="pro"] .bar { background: rgba(19, 20, 24, 0.12); }
[data-look="pro"] .bar-fill { background: var(--ink-0); }
[data-look="pro"] .lf-exp { border-left-color: var(--ink-0); }
[data-look="pro"] .lf-tap { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; }
[data-look="pro"] .lf-tap:hover { border-color: var(--ink-0); color: var(--ink-0); }
.lf-tap-n { width: 8px; height: 8px; font-size: 0; }   /* a dot, not a number: the parts are not a sequence */
[data-look="pro"] .lf-tap-n { background: var(--ink-0); color: #fff; width: 8px; height: 8px; font-size: 0; }
[data-look="pro"] .lf-lead { stroke: var(--ink-0); }
[data-look="pro"] .lf-lead-dot { fill: var(--ink-0); }
[data-look="pro"] .lf-art { fill: color-mix(in srgb, var(--ink-0) 18%, transparent); }
[data-look="pro"] #lf-animated:checked    ~ .lf-stage .lf-hot[data-for="animated"]    .lf-panel,
[data-look="pro"] #lf-interactive:checked ~ .lf-stage .lf-hot[data-for="interactive"] .lf-panel,
[data-look="pro"] #lf-coach:checked       ~ .lf-stage .lf-hot[data-for="coach"]       .lf-panel,
[data-look="pro"] #lf-certificate:checked ~ .lf-stage .lf-hot[data-for="certificate"] .lf-panel {
  fill: color-mix(in srgb, var(--ink-0) 8%, transparent); stroke: var(--ink-0);
}
[data-look="pro"] #lf-animated:checked    ~ .lf-stage .lf-tap--animated,
[data-look="pro"] #lf-interactive:checked ~ .lf-stage .lf-tap--interactive,
[data-look="pro"] #lf-coach:checked       ~ .lf-stage .lf-tap--coach,
[data-look="pro"] #lf-certificate:checked ~ .lf-stage .lf-tap--certificate { border-color: var(--ink-0); color: var(--ink-0); }
[data-look="pro"] .sel-empty { border: 1px solid var(--edge); background: #fff; font-size: 16px; }
[data-look="pro"] .cnote { border-left-color: var(--edge-hot); }

/* ── 1. THE HERO: two lines, one amber action, then the film as the media card ── */
[data-look="pro"] .hero--open { padding-block: calc(var(--mast) + clamp(36px, 6vh, 88px)) clamp(48px, 7vh, 96px); }
[data-look="pro"] .hero-open-in { max-width: 74rem; }
[data-look="pro"] .hero--open .hero-title {
  font-family: var(--display); font-size: clamp(48px, 7vw, 88px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.0; max-width: none; margin: 0 auto 22px; text-wrap: balance;
}
[data-look="pro"] .hero--open .lede { font-size: clamp(17px, 1.2vw, 20px); color: var(--ink-1); opacity: 1; margin: 0 auto 30px; max-width: 46ch; }
[data-look="pro"] .hero--open .hero-actions { margin-bottom: 16px; }
.hero-line { margin: 0; color: var(--ink-2); font-size: 15px; }
.hero-film-wrap { margin-top: clamp(36px, 5vw, 64px); }
.hero-film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
[data-look="pro"] .hero-film-frame { border: 0; border-radius: var(--r-media); background: var(--card); box-shadow: 0 30px 80px -40px rgba(19, 20, 24, 0.5); }
[data-look="pro"] .hero-film-frame > video { filter: none; }
/* the living poster: a silent loop UNDER the real film. With scripting off the film (poster,
   native controls) sits on top and the loop is never seen; film.js reveals it. */
.hero-film-frame .hero-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-film-frame .hero-film-video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.hero-film-frame.is-loop .hero-film-video { opacity: 0; pointer-events: none; }
.hero-film-frame.is-playing .hero-loop { visibility: hidden; }
.film-ui .film-open, .film-ui .film-bar { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-loop { display: none; } }
/* the play control is drawn, not typed: an SVG triangle in a paper disc */
.film-open span svg { display: block; width: 42%; height: 42%; margin-left: 6%; }
/* the timecode and the captions toggle: 13px is the floor for anything on the page */
.film-time { font-family: var(--sans); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.film-cc { font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; font-weight: 600; }
.film-btn svg { display: block; }

/* ── 2/3. THE INSET DARK CARD — mission, the close, the catalog's masterclass feature.
      Inset from the viewport by the same clamp as the audience stack so the dark
      elements rhyme on the paper ground. ── */
.inset-card { position: relative; overflow: hidden; margin-inline: var(--inset); background: var(--card); color: var(--card-ink); border-radius: var(--r-media); }
[data-look="pro"] .mission { border-top: 0; padding-block: clamp(20px, 3vh, 40px); }
.mission-card { padding: clamp(48px, 8vw, 128px) clamp(24px, 6vw, 96px); }
.mission-card .mission-p {
  font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.2; letter-spacing: -0.015em; max-width: 28ch; margin: 0; color: var(--card-ink);
}
/* ⚠️ `place-items: normal` IS LOAD-BEARING: §30's `.close` set `place-items: center`, and Chromium
   now honours justify-items on a BLOCK container, so the card inside shrank to its content
   (579px, centred) even after display went back to block. Measured, not guessed. */
.close { min-height: 0; display: block; place-items: normal; overflow: visible; padding-block: clamp(20px, 3vh, 40px) clamp(40px, 7vh, 96px); }
.close::after { content: none; }
.close-card { min-height: clamp(360px, 44vw, 560px); display: grid; place-items: center; text-align: center; }
.close-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 18, 32, 0.84), rgba(14, 18, 32, 0.46)); }
.close-card .close-in { position: relative; z-index: 1; }
.close-card .close-in p { color: rgba(245, 243, 238, 0.82); font-size: 17px; }
[data-look="pro"] .close-in h2 { color: var(--card-ink); }

/* ── 4/5. THE FOOTER: the large wordmark, three columns of plain links, the promise ── */
[data-look="pro"] .foot { background: var(--ink-0); color: #C9C6BC; border-top: 0; padding-block: clamp(48px, 7vh, 88px) 40px; }
.foot-in { display: grid; gap: clamp(28px, 4vh, 44px); align-items: start; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.foot-brand { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: -0.02em; line-height: 1; color: var(--card-ink); display: inline-block; }
.foot-brand:hover { color: #fff; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 24px clamp(32px, 5vw, 80px); }
.foot-col { display: grid; gap: 2px; align-content: start; }
.foot-h { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--card-ink); }
.foot .foot-col a { font-size: 16px; color: #C9C6BC; display: inline-block; padding-block: 5px; }
.foot .foot-col a:hover { color: #fff; }
.foot .foot-promise { font-size: 16px; line-height: 1.55; max-width: 60ch; color: #C9C6BC; opacity: 1; margin: 0; letter-spacing: 0; }
.foot-copy { font-size: 15px; color: #8E8C84; margin: 0; }
@media (max-width: 720px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ── rails on the home page: a heading, one line, a plain link at the end ── */
[data-look="pro"] .rail-band { padding-block: clamp(48px, 7vh, 96px); }
.rail-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 24px; }
.rail-head h2, .rail-head p { grid-column: 1; }
.rail-all { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 4px; font-size: 16px; letter-spacing: 0; }
[data-look="pro"] .rail-head p { font-size: 17px; }
[data-look="pro"] .rcard { border-color: var(--edge); }
[data-look="pro"] .rcard .k { padding-top: 14px; color: var(--ink-2); }
[data-look="pro"] .rcard-l { font-size: 15px; color: var(--ink-1); }
.fcard-play svg { display: block; width: 40%; height: 40%; margin-left: 8%; }
[data-look="pro"] .fcard-play { width: 40px; height: 40px; }

/* the selector fallback + the modal, on paper */
[data-look="pro"] .sel, [data-look="pro"] .lf, [data-look="pro"] .who { padding-block: clamp(56px, 8vh, 110px); }
[data-look="pro"] .sel-note { font-size: 17px; margin: -12px 0 30px; }
[data-look="pro"] .sel-card { border-left-width: 3px; }
[data-look="pro"] .sel-l { font-size: 15px; }
[data-look="pro"] .cmodal-facts dt { color: var(--ink-2); }
[data-look="pro"] .cmodal-facts dd { font-size: 16px; }
[data-look="pro"] .cmodal-cap, [data-look="pro"] .cmodal-sub { color: var(--ink-2); }
[data-look="pro"] .lf-exp-l { font-size: 17px; }
[data-look="pro"] .who-line { font-size: 16px; }
[data-look="pro"] .rung-txt { font-size: 15px; }
[data-look="pro"] .sel-all { margin-top: 30px; }

/* ── 7. THE CATALOG: h1, one line, the masterclass as ONE featured wide card ── */
.cat-head { padding-top: calc(var(--mast) + clamp(32px, 6vh, 72px)); padding-bottom: clamp(28px, 4vh, 44px); }
.page-title { margin: 0 0 12px; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-line { margin: 0; color: var(--ink-1); font-size: 18px; max-width: 60ch; }
.mcfeat { padding-block: 0 clamp(28px, 4vh, 56px); }
.mcfeat-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mcfeat-poster { position: relative; min-height: 340px; background: var(--card); }
.mcfeat-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcfeat-body { padding: clamp(28px, 4vw, 56px); display: grid; gap: 14px; align-content: center; }
.mcfeat-kind { margin: 0; font-size: 15px; color: rgba(245, 243, 238, 0.7); }
.mcfeat-title { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--card-ink); }
.mcfeat-title a { color: inherit; }
.mcfeat-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 243, 238, 0.5); }
.mcfeat-goal { margin: 0; color: rgba(245, 243, 238, 0.82); font-size: 17px; line-height: 1.5; max-width: 52ch; }
.mcfeat-seq { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.mcfeat-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(245, 243, 238, 0.14); font-size: 17px; }
.mcfeat-step:last-child { border-bottom: 1px solid rgba(245, 243, 238, 0.14); }
.mcfeat-n { color: rgba(245, 243, 238, 0.6); font-variant-numeric: tabular-nums; }
.mcfeat-t { color: var(--card-ink); }
.mcfeat-t a { color: inherit; }
.mcfeat-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mcfeat-m { color: rgba(245, 243, 238, 0.6); font-size: 15px; white-space: nowrap; }
.mcfeat-step.is-off { opacity: 0.55; }
.mcfeat-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 860px) {
  .mcfeat-card { grid-template-columns: 1fr; }
  .mcfeat-poster { min-height: 0; aspect-ratio: 16 / 9; }
}
[data-look="pro"] .catalog-all { border-top: 0; }

/* ── 8. THE COURSE PAGE: breadcrumb, h1, a line, a meta sentence, the media card,
      a numbered timeline, and a sidebar card of plain rows ── */
[data-look="pro"] .cpage { padding-top: calc(var(--mast) + clamp(28px, 5vh, 56px)); }
[data-look="pro"] .cpage-grid { row-gap: clamp(12px, 2vh, 24px); }
[data-look="pro"] .crumb { font-size: 15px; color: var(--ink-2); margin-bottom: clamp(18px, 3vh, 28px); letter-spacing: 0; }
[data-look="pro"] .crumb a { color: var(--ink-1); padding-block: 4px; }
[data-look="pro"] .crumb a:hover { color: var(--ink-0); }
[data-look="pro"] .ctitle { font-family: var(--display); font-size: clamp(36px, 5vw, 64px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.0; margin-bottom: 0; }
[data-look="pro"] .csubtitle { margin-top: 12px; }
.cline { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-1); max-width: 60ch; }
.cmeta { margin: 10px 0 clamp(24px, 4vh, 40px); font-size: 15px; color: var(--ink-2); }
/* ── VARIATIONS (Will approved the mockup, 2026-10-06; docs/design/variations-mockup/) ──
   One chip row, three homes: the course card, the course page, a variation's own page.
   Chips are links and wrap onto as many lines as they need — never a scroller. */
.vchips-wrap { margin: 0; }
.vchips-h { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.vchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vchip { display: inline-block; padding: 9px 13px; border: 1px solid var(--edge-hot); border-radius: 999px;
  background: var(--film-1); color: var(--ink-0); font-size: 14px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; }
.vchip:hover { border-color: var(--ink-1); color: var(--ink-0); }
.vchip.is-on { background: var(--ink-0); border-color: var(--ink-0); color: var(--film-0); }
/* one line on desktop (Will, 2026-10-06), same sizing as the Courses-page island; phones wrap */
@media (min-width: 700px) {
  .vchips { gap: 5px; }
  .vchip { font-size: 13px; padding: 7px 8px; }
}
/* on a course card: below the description, ruled off, inside the card's box */
.sel-card-link { display: block; color: inherit; text-decoration: none; }
.sel-card .vchips-wrap { padding: 14px 18px 18px; border-top: 1px solid var(--edge); }
/* on the course page: under the description, before the meta line */
.cpage-head .vchips-wrap { margin-top: 20px; }
/* a variation's page */
.vp-eyebrow { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--amber); }
/* amber text on paper is ~2:1; mixed toward ink it keeps the hue and reads at ~4.5:1 */
[data-look="pro"] .vp-eyebrow { color: color-mix(in srgb, var(--amber) 60%, var(--ink-0)); }
.vp-lede { max-width: 62ch; }
.vp-tail { margin: 0 0 clamp(24px, 4vh, 36px); padding: 22px 24px; border: 1px solid var(--edge); border-radius: var(--r-card, var(--r)); background: var(--film-1); max-width: 680px; }
.vp-tail-h { margin: 0 0 12px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.vp-tail ul { list-style: disc; margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-1); line-height: 1.5; }
.vp-same { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.vpage .cpage-main > .vchips-wrap { margin-bottom: clamp(8px, 2vh, 16px); }
.tl-add { margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--ink-2); }
[data-look="pro"] .ctrailer { margin-bottom: clamp(28px, 4vh, 44px); }
[data-look="pro"] .ctrailer-frame { box-shadow: 0 24px 60px -34px rgba(19, 20, 24, 0.45); }
.ctrailer-frame > img.ctrailer-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cpage-h { margin: clamp(28px, 4vh, 44px) 0 12px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.cpage-h:first-child { margin-top: 0; }
/* one plain line under each lesson title (D201 copy, 2026-09-28) */
.tl-sum { margin: 6px 0 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-1); max-width: 62ch; }
.outcomes { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-1); line-height: 1.5; }
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--edge); }
.tl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--edge); }
.tl-n { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.tl-t { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; font-family: var(--sans); letter-spacing: 0; }
.tl-note { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
[data-look="pro"] .cside { top: calc(var(--mast) + 24px); }
[data-look="pro"] .cside-card { background: #fff; border: 1px solid var(--edge); padding: 26px 24px; }
[data-look="pro"] .cside-head { margin-bottom: 6px; }
[data-look="pro"] .cside-sub { font-size: 16px; color: var(--ink-1); margin-bottom: 18px; }
.cside-rows { margin: 0; display: grid; border-top: 1px solid var(--edge); }
.cside-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--edge); font-size: 15px; }
.cside-rows dt { color: var(--ink-2); margin: 0; }
.cside-rows dd { margin: 0; color: var(--ink-0); text-align: right; }
@media (max-width: 900px) {
  .tl-row { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
  .tl-row > .btn-ghost, .tl-row > .tl-note { grid-column: 2; justify-self: start; }
}

/* ── the masterclass page, same vocabulary ── */
[data-look="pro"] .mcpage { padding-top: calc(var(--mast) + clamp(28px, 5vh, 56px)); }
[data-look="pro"] .pvid-none { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: rgba(245, 243, 238, 0.7); }
.mckind { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
[data-look="pro"] .mcgoal { font-size: 18px; }
[data-look="pro"] .step-link, [data-look="pro"] .step--inert { padding: 16px 4px; }
[data-look="pro"] .step-link:hover { background: transparent; }
.step.step--inert { display: block; padding: 0; }
[data-look="pro"] .step-n { font-family: var(--sans); font-size: 15px; color: var(--ink-2); font-weight: 500; }
[data-look="pro"] .step-title { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: 0; }

/* ── 9. SHORTS + DOCUMENTARIES: plain meta, the first documentary large ── */
[data-look="pro"] .films { padding-top: calc(var(--mast) + clamp(32px, 6vh, 72px)); }
[data-look="pro"] .films-lede { margin-bottom: clamp(36px, 6vh, 64px); }
.film-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.film-seen { display: inline-flex; gap: 6px; align-items: baseline; }
[data-look="pro"] .film-logline { font-size: 17px; }
.film--lead { grid-template-columns: 1fr; gap: 22px; border-top: 0; padding-top: 0; }
.film--lead .film-body { max-width: 62ch; }
[data-look="pro"] .film--lead .film-title { font-size: clamp(28px, 3vw, 36px); }
[data-look="pro"] .film-frame { box-shadow: 0 24px 60px -34px rgba(19, 20, 24, 0.45); }

/* ── 10. SIGN IN: the form card beside a lesson scene ── */
[data-look="pro"] .auth-wrap { padding-top: calc(var(--mast) + clamp(32px, 6vh, 72px)); }
.auth-wrap--split { display: grid; gap: clamp(24px, 4vw, 56px); }
.auth-scene { margin: 0; display: none; }
@media (min-width: 820px) {
  .auth-wrap--split { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; justify-items: stretch; }
  .auth-wrap--split .auth { width: 100%; max-width: 440px; }
  .auth-scene { display: block; border-radius: var(--r-media); overflow: hidden; background: var(--card); min-height: 520px; align-self: stretch; }
  .auth-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
[data-look="pro"] .auth { background: #fff; border: 1px solid var(--edge); padding: clamp(26px, 4vw, 40px); }
[data-look="pro"] .auth h1 { font-family: var(--display); font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
[data-look="pro"] .auth-sub { font-size: 16px; }
[data-look="pro"] .auth-form label { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink-1); font-weight: 500; }
[data-look="pro"] .auth-form input, [data-look="pro"] .auth-form select {
  background: #fff; color: var(--ink-0); border: 1px solid var(--edge-hot); font-size: 17px; padding: 13px 14px;
}
[data-look="pro"] .auth-form input::placeholder { color: var(--ink-2); }
[data-look="pro"] .auth-form input:focus, [data-look="pro"] .auth-form select:focus { border-color: var(--ink-0); outline: none; box-shadow: 0 0 0 1px var(--ink-0); }
[data-look="pro"] .auth-form input[name="code"] { font-family: var(--mono); }
[data-look="pro"] .auth-alt { font-size: 15px; }
.auth-kicker { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); }

/* ── 11. THE CERTIFICATE: a designed, printable landscape sheet ── */
.certpage { padding-block: calc(var(--mast) + clamp(24px, 5vh, 56px)) clamp(48px, 8vh, 96px); }
.certpage .wrap { max-width: 1120px; }
.cert-actions { display: flex; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.cert {
  aspect-ratio: 297 / 210; background: #fff; color: #131418; border: 1px solid rgba(19, 20, 24, 0.12); border-radius: var(--r-card);
  padding: clamp(28px, 5vw, 72px) clamp(24px, 6vw, 88px); display: grid; align-content: center; justify-items: center; text-align: center;
  outline: none; box-shadow: 0 24px 60px -40px rgba(19, 20, 24, 0.4);
}
.cert-brand { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.02em; margin: 0 0 clamp(18px, 3vw, 40px); color: #131418; }
.cert-brand .brand-dot { color: var(--amber); }
.cert-kind { font-size: 15px; color: #6B6A63; margin: 0 0 clamp(12px, 2vw, 24px); letter-spacing: 0; }
.cert-presented { font-size: 15px; color: #6B6A63; margin: 0 0 8px; }
.cert-name { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5vw, 64px); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 clamp(14px, 2.4vw, 28px); color: #131418; }
.cert-name--email { font-size: clamp(22px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.015em; word-break: break-all; }
.cert-course { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.6vw, 32px); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; color: #131418; }
.cert-meta { font-size: 15px; color: #6B6A63; margin: 0; letter-spacing: 0; }
.cert-rule { width: min(320px, 60%); height: 1px; border: 0; background: rgba(19, 20, 24, 0.22); margin: clamp(18px, 3vw, 36px) 0 14px; }
.cert-site { font-size: 14px; color: #6B6A63; margin: 0; }
@media print {
  @page { size: landscape; margin: 10mm; }
  .masthead, .foot, .cert-actions, .progress, .skip-link { display: none !important; }
  html, body { background: #fff !important; }
  .certpage { padding: 0 !important; }
  .certpage .wrap { max-width: none; padding: 0; }
  .cert { border: 1px solid #999; box-shadow: none; border-radius: 0; width: 100%; height: 100vh; aspect-ratio: auto; }
  .cert-name, .cert-course, .cert-brand { color: #111; }
}

/* ── 12. VIEW TRANSITIONS: a 180ms cross-fade between pages; the masthead stays put ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease; }
.masthead { view-transition-name: masthead; }
::view-transition-old(masthead), ::view-transition-new(masthead) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── 13. THE SIGNED-IN HOME: continue as one large card with a progress bar ── */
[data-look="pro"] .acct-wrap { padding-top: calc(var(--mast) + clamp(32px, 6vh, 72px)); }
.acct-kicker { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
[data-look="pro"] .acct-title { font-family: var(--display); }
[data-look="pro"] .acct-sub { font-size: 16px; }
[data-look="pro"] .cont, [data-look="pro"] .rec { padding-block: clamp(32px, 5vh, 64px); }
.cont-lead > .cont-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: var(--r-media); border-left: 1px solid var(--edge); }
.cont-lead .cont-img { height: 100%; min-height: 240px; aspect-ratio: auto; }
.cont-lead > .cont-card:not(:has(.cont-img)) { grid-template-columns: 1fr; }
.cont-lead .cont-body { padding: clamp(24px, 3.5vw, 48px); align-content: center; gap: 12px; }
.cont-lead .cont-t { font-size: clamp(26px, 3vw, 40px); }
.cont-lead .bar { height: 6px; border-radius: 3px; margin: 4px 0; }
.cont-lead .btn-amber { margin-top: 6px; }
.cont-lead + .cont-row { margin-top: clamp(14px, 1.8vw, 22px); }
@media (max-width: 820px) {
  .cont-lead > .cont-card { grid-template-columns: 1fr; }
  .cont-lead .cont-img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ── 14. the text pages ── */
[data-look="pro"] .docpage { padding-top: calc(var(--mast) + clamp(32px, 6vh, 72px)); }
[data-look="pro"] .docpage-title { margin-bottom: 18px; }
[data-look="pro"] .docpage h2 { margin: 34px 0 10px; }
[data-look="pro"] .docpage p { color: var(--ink-1); font-size: 17px; line-height: 1.55; }
[data-look="pro"] .docpage p.lede { color: var(--ink-1); opacity: 1; font-size: 18px; }
[data-look="pro"] .docpage-note { color: var(--ink-2); margin-top: 34px; }
[data-look="pro"] .docshot figcaption { color: var(--ink-2); }

/* --- rails: the previous/next buttons and the hover preview that static/site.js adds to
   every [data-rail]. The buttons do not exist without the script, so nothing here
   changes the no-JS page. --- */
.rail-nav { display:flex; justify-content:flex-end; gap:8px; margin:-6px 0 14px}
.rail-nav[hidden] { display:none}
.rail-arrow { width:40px; height:40px; border-radius:50%; border:1px solid var(--edge); background:var(--film-1); color:var(--ink-0); display:inline-grid; place-items:center; cursor:pointer; padding:0; transition:border-color .15s ease,background .15s ease}
.rail-arrow svg { display:block}
.rail-arrow:hover { border-color:var(--ink-0)}
.rail-arrow:focus-visible { outline:2px solid var(--amber); outline-offset:3px}
.rail-arrow[data-off] { visibility:hidden}
.rcard-shot { position:relative}
.rcard-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .36s ease; pointer-events:none}
.rcard-preview.is-on { opacity:1}
@media (prefers-reduced-motion:reduce) { .rcard-preview { transition:none}
}
/* Sign-in: the privacy line under the form (2026-09-25). */
.auth-legal { color: var(--ink-2); font-size: 0.8rem; line-height: 1.5; margin: 14px 0 0; }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* ── Shorts picker (2026-09-29, Will: "easy to pick" when there are many) ──
   A grid of tiles, newest first, with a search box; each tile opens /shorts/<name>. */
.sgrid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 28px 0 22px; }
.sgrid-search { flex: 1 1 260px; max-width: 420px; font: inherit; font-size: 16px; color: var(--ink-0);
  background: var(--film-1); border: 1px solid var(--edge-hot); border-radius: 999px; padding: 11px 18px; }
.sgrid-search:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.sgrid-count { color: var(--ink-2); font-size: 14px; }
.sgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sgrid-item[hidden] { display: none; }
.stile { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.stile-shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px;
  background: var(--film-2); box-shadow: 0 10px 28px -18px rgba(0,0,0,.45); }
.stile-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.stile:hover .stile-shot img, .stile:focus-visible .stile-shot img { transform: scale(1.03); }
.stile:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 12px; }
.stile-time, .stile-seen { position: absolute; bottom: 8px; font-size: 12px; line-height: 1; padding: 5px 8px;
  border-radius: 6px; background: rgba(10,12,20,.78); color: #fff; }
.stile-time { right: 8px; }
.stile-seen { left: 8px; }
.stile-title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink-0); }
.stile-line { font-size: 14px; line-height: 1.45; color: var(--ink-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sgrid-none { color: var(--ink-2); margin-top: 18px; }
/* one short on its own page */
.short-main { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; margin-top: 8px; }
.short-frame { margin: 0; }
.short-body .film-title { margin-top: 6px; }
.short-more { margin-top: 56px; }
@media (max-width: 860px) { .short-main { grid-template-columns: 1fr; } }
/* phones: two tiles per row so a long list stays scannable */
@media (max-width: 600px) {
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .stile-title { font-size: 15px; }
  .stile-line { font-size: 13px; }
  .stile-time, .stile-seen { font-size: 11px; padding: 4px 6px; bottom: 6px; }
}

/* News (2026-09-30): the latest edition FEATURED large, full width, text beneath */
.news-feature { margin-top: 12px; }
.news-frame { margin: 0; }
.news-body { max-width: 760px; margin-top: 22px; }
.news-body .film-title { margin-top: 6px; }
.news-edition { color: var(--amber); font-weight: 600; }
.news-dated { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 14px; }
.news-dated a { color: inherit; text-decoration: underline; }