/* =====================================================================
   Science & Magic — design system
   A darkened theatre that switches to evidence.
   - velvet ground, one warm follow-spot accent (magic),
     one cold accent reserved exclusively for science/data.
   - signature: the follow-spot reveal (.reveal).
   ===================================================================== */

:root {
  /* Palette */
  --velvet:        #1b0e15;   /* deep oxblood ground */
  --velvet-deep:   #140a10;   /* full-viewport wells */
  --velvet-raised: #2a1822;   /* cards / surfaces */
  --velvet-edge:   #3d2632;   /* hairlines on raised surfaces */
  --gild:          #e0a94a;   /* warm stage light — magic side, sparing */
  --gild-soft:     #f0c988;
  --evidence:      #57c9dd;   /* cold clinical cyan — SCIENCE/DATA ONLY */
  --evidence-soft: #a5e4ef;
  --parchment:     #f4ece0;   /* primary text (playbill ink, inverted) */
  --parchment-dim: #b6a494;   /* muted text */
  --parchment-fant:#7d6d63;   /* faintest text */

  /* Type */
  --display: "Abril Fatface", "Playfair Display", Georgia, serif;
  --body:    "Spline Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm
     This page is presented from a laptop onto a projector, so the measure
     is set for a large screen. Prose keeps its own ch-based cap, so
     widening the wrap gives room to the cards, lists and demos without
     stretching any line of text past a comfortable read. */
  --measure: 48rem;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --section-pad-y: clamp(4rem, 11vh, 9rem);

  /* Motion */
  --ease-spot: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-ms: 720ms;
}

/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--velvet);
  color: var(--parchment);
  font-family: var(--body);
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.35rem); /* projector floor: >=18px */
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible {
  outline: 3px solid var(--gild);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--gild); color: var(--velvet-deep); }

/* Subtle vignette so the "house lights" feel dimmed at the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  background: var(--gild);
  color: var(--velvet-deep);
  padding: 0.6rem 1.2rem;
  font: 600 1rem/1 var(--body);
  border-radius: 4px;
  z-index: 100;
  transition: top 160ms var(--ease-spot);
}
.skip-link:focus { top: 1rem; }

/* =====================================================================
   Layout
   ===================================================================== */
.section {
  position: relative;
  z-index: 1;
  padding: var(--section-pad-y) clamp(1.25rem, 5vw, 3rem);
}
.section--full {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap { max-width: var(--measure); margin-inline: auto; width: 100%; }
.wrap--wide { max-width: 68rem; }

/* Full-viewport wells sit slightly darker to read as "stage" moments */
.section--open, .section--turn, .section--close { background: var(--velvet-deep); }
.section--quiet { background: var(--velvet-deep); }

/* =====================================================================
   Typography roles
   ===================================================================== */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gild);
  margin: 0 0 1.1rem;
}
.eyebrow--turn { color: var(--parchment-dim); }

.title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.5rem, 13vw, 9rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 0;
}
.title .amp {
  color: var(--gild);
  font-style: normal;
  padding-inline: 0.05em;
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  line-height: 1.02;
  margin: 0 0 1.5rem;
}

.lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  line-height: 1.4;
  color: var(--parchment);
  max-width: 34ch;
  margin: 0 0 2.5rem;
}
.open__sub { color: var(--parchment-dim); max-width: 30ch; }

.prose { margin: 0 0 1.25rem; max-width: 62ch; color: var(--parchment); }
.prose em { color: var(--gild-soft); font-style: italic; }
.prose strong { color: var(--parchment); font-weight: 600; }
.prose--aside { color: var(--parchment-dim); font-size: 1rem; border-left: 2px solid var(--velvet-edge); padding-left: 1.1rem; }
.prose--fine { color: var(--parchment-dim); font-size: 0.95rem; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent-cold { color: var(--evidence); }
.accent-warm { color: var(--gild); }

.beat { margin-top: clamp(2.5rem, 6vh, 4rem); }
.beat__title {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--parchment);
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 6px;
  padding: 0.7rem 1.2rem;
  transition: border-color 160ms, background 160ms, transform 120ms, color 160ms;
}
.btn:hover { border-color: var(--gild); color: var(--gild-soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary {
  background: var(--gild);
  color: var(--velvet-deep);
  border-color: var(--gild);
}
.btn--primary:hover { background: var(--gild-soft); border-color: var(--gild-soft); color: var(--velvet-deep); }
.btn--ghost { background: transparent; }

/* =====================================================================
   § 1 — Cold open
   ===================================================================== */
/* The cold open has to land whole on one projected screen — title and
   image, no scrolling. So the header stays tight and the image is capped
   by viewport HEIGHT. Sizing off width (the usual way) is what pushes
   the artwork below the fold on a laptop. */
.section--open {
  padding-top: clamp(2rem, 5vh, 3.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.section--open .title { font-size: clamp(3rem, 6.5vw, 5.5rem); }
.section--open .lede { margin-bottom: 0; }
.open__head { text-align: center; margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.open__head .lede { margin-inline: auto; }
.open__head .eyebrow { color: var(--parchment-dim); }

/* The cold-open image. Capped by height so the whole opening lands on one
   projected screen, and by available width so it never overflows. Aspect
   ratio is whatever the file is — nothing here assumes a shape. */
.open__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
/* The photo is evidence, not decoration — the caption is what makes it
   land as the presenter's own story rather than a stock image. */
.open__cap {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  color: var(--parchment-dim);
  text-align: center;
  max-width: 46ch;
  line-height: 1.4;
}
.open__img {
  width: auto;
  height: auto;
  max-height: min(52vh, 34rem);
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--velvet-edge);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9);
}

kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--velvet-deep);
  border: 1px solid var(--velvet-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--parchment);
}

.scroll-cue {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--parchment-fant);
  text-align: center;
  margin: clamp(0.75rem, 2vh, 1.5rem) 0 0;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =====================================================================
   Signature — the follow-spot reveal
   ===================================================================== */
.reveal {
  position: relative;
  margin-top: 1.75rem;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.reveal__content {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  filter: blur(14px) brightness(0.35);
  transition: filter var(--reveal-ms) var(--ease-spot);
}
.reveal__claim { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); margin: 0; line-height: 1.4; }
.reveal__claim em { color: var(--gild-soft); font-style: italic; }
.reveal__kicker {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  line-height: 1.1;
  color: var(--gild);
  margin: 1rem 0 0;
}
.reveal--inline .reveal__content { display: flex; align-items: center; gap: 1.5rem; }
.gorilla { width: clamp(56px, 12vw, 88px); flex: none; fill: var(--parchment); }

/* Click-to-play video facade (loads YouTube only on the presenter's click) */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.75rem 0 0;
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--velvet-deep);
}
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    radial-gradient(120% 90% at 50% 30%, #3a1d29, #17303a 130%);
  color: var(--parchment);
}
.video.is-playing .video__poster { display: none; }
.video__play {
  width: clamp(56px, 10vw, 76px);
  height: clamp(56px, 10vw, 76px);
  border-radius: 50%;
  background: var(--gild);
  display: grid;
  place-items: center;
  transition: transform 160ms var(--ease-spot), box-shadow 200ms;
}
.video__play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.7em 0 0.7em 1.15em;
  border-color: transparent transparent transparent var(--velvet-deep);
  margin-left: 0.2em;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
}
.video__poster:hover .video__play { transform: scale(1.06); box-shadow: 0 0 40px rgba(224,169,74,0.5); }
.video__cap {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.video__sub {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.reveal__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.14) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #3a1d29, #24121b);
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--reveal-ms) var(--ease-spot), opacity var(--reveal-ms) var(--ease-spot);
}
.reveal__veil-mark {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  border: 1px solid var(--velvet-edge);
  border-radius: 999px;
  padding: 0.4em 1.1em;
}

.reveal.is-revealed .reveal__content { filter: blur(0) brightness(1); }
.reveal.is-revealed .reveal__veil {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* the bloom — a brief gild flash as the "spotlight" lands */
.reveal.is-revealed .reveal__content { animation: bloom var(--reveal-ms) var(--ease-spot); }
@keyframes bloom {
  0%   { box-shadow: 0 0 0 0 rgba(224,169,74,0); }
  40%  { box-shadow: 0 0 60px 4px rgba(224,169,74,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(224,169,74,0); }
}

/* =====================================================================
   Intro — the two claims
   ===================================================================== */
.claims { display: grid; gap: 1rem; margin: 2rem 0; }
.claim {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--parchment);
  max-width: 52ch;
}
.claim__num { flex: none; font-size: 0.85rem; letter-spacing: 0.14em; color: var(--gild); }

/* =====================================================================
   "Ask the room" — a presenter prompt with no demo behind it. Warm
   accent: it's stagecraft, not evidence.
   ===================================================================== */
.ask {
  margin: clamp(1.75rem, 4vh, 2.5rem) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-left: 3px solid var(--gild);
  border-radius: 10px;
  max-width: 56ch;
}
.ask__tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gild);
  margin: 0 0 0.75rem;
}
.ask__q {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  line-height: 1.15;
  color: var(--parchment);
}
.ask__note { margin: 0.75rem 0 0; font-size: 0.98rem; color: var(--parchment-dim); }

/* =====================================================================
   Key concept — the two inequalities
   ===================================================================== */
.concept {
  margin: clamp(2rem, 5vh, 3rem) 0;
  padding: clamp(1.5rem, 4vw, 2.25rem) 0;
  border-top: 1px solid var(--velvet-edge);
  border-bottom: 1px solid var(--velvet-edge);
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
}
.concept__line {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.5vw, 3rem);
  line-height: 1.1;
  color: var(--parchment);
}
.concept__neq { color: var(--gild); padding-inline: 0.15em; }

/* =====================================================================
   Attention as a market — evidence card + caption. Two columns on wide
   screens so both prices are on screen at once; the images have very
   different aspect ratios, so they're height-capped and centred rather
   than cropped to match (cropping the chart would cut the data).
   ===================================================================== */
.market {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: 1.75rem 0;
}
.market-card { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.market-card__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(38vh, 22rem);
  margin-inline: auto;
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  background: var(--velvet-deep);
}
.market-card__cap {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--parchment-dim);
  max-width: 54ch;
}
.market-card__cap strong { color: var(--parchment); font-weight: 700; }
.market-card__src {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment-fant);
}
@media (min-width: 900px) {
  .market { grid-template-columns: 1fr 1fr; align-items: start; }
  .market-card__img { max-height: min(30vh, 18rem); }
}

/* =====================================================================
   Key points — a labelled definition list for the concept beats. Cold
   accent on the labels: this is the evidence side of the page. Built as a
   <dl> so the label/body pairing is real structure, not just layout.
   ===================================================================== */
.keypoints { margin: 1.75rem 0 0; display: grid; gap: 0.75rem; }
.keypoint {
  display: grid;
  grid-template-columns: minmax(7rem, 9.5rem) 1fr;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.4rem);
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-left: 3px solid var(--evidence);
  border-radius: 10px;
}
.keypoint__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--evidence);
}
.keypoint__body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--parchment);
  max-width: 58ch;
}
.keypoint__body strong { color: var(--parchment); font-weight: 700; }

/* =====================================================================
   Act 2 — the single operator
   ===================================================================== */
.operator { margin: clamp(1.5rem, 4vh, 2.5rem) 0; }
/* The illustration is a white-on-pure-black line drawing, so it's framed
   deliberately rather than dropped straight onto the velvet — a bare black
   rectangle would read as a foreign object. If you'd rather it float with
   no frame, `mix-blend-mode: screen` knocks the black out entirely and
   lets the page ground show through; it works because the artwork is pure
   black behind white line work. Left off by default as it's harder to
   predict across browsers. */
.operator__img {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
}
.operator__cap {
  margin: 1rem auto 0;
  max-width: 54ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--parchment-dim);
}
.helps--tight { gap: 0.75rem; margin-top: 1.25rem; }
.helps--tight li { font-size: 1.05rem; max-width: 60ch; }

/* =====================================================================
   Act 3 — the bottleneck table. Row rules only, no vertical lines: the
   analogy column has to read as a companion to the definition, not as a
   separate dataset.
   ===================================================================== */
.bottleneck {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0 1.5rem;
  text-align: left;
}
.bottleneck thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-fant);
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--velvet-edge);
}
.bottleneck tbody tr { border-bottom: 1px solid var(--velvet-edge); }
.bottleneck tbody tr:last-child { border-bottom: 0; }
.bottleneck th,
.bottleneck td { padding: 1.05rem 1.25rem 1.05rem 0; vertical-align: baseline; }
.bottleneck th:last-child,
.bottleneck td:last-child { padding-right: 0; }

.bottleneck__term {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--parchment);
  width: 22%;
}
.bottleneck__def {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--parchment-dim);
  width: 44%;
}
.bottleneck__like {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--gild);
  width: 34%;
}
.bottleneck__icon { margin-right: 0.55em; font-size: 1.1em; }

@media (max-width: 620px) {
  /* Collapse to stacked blocks — a four-row three-column table is
     unreadable at phone width. */
  .bottleneck thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bottleneck tbody tr {
    display: block;
    padding: 1.1rem 0;
  }
  .bottleneck th,
  .bottleneck td { display: block; width: auto; padding: 0; }
  .bottleneck__term { margin-bottom: 0.3rem; }
  .bottleneck__def { margin-bottom: 0.45rem; }
}

/* =====================================================================
   Technology section — each mechanism mapped back to its technique
   ===================================================================== */
.exploits { list-style: none; padding: 0; margin: 2rem 0 1.75rem; display: grid; gap: 0.75rem; }
.exploit {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
}
.exploit__name { font-weight: 700; font-size: 1.1rem; color: var(--gild); }
.exploit__maps { font-size: 1rem; line-height: 1.5; color: var(--parchment); max-width: 58ch; }

/* =====================================================================
   § 2 — foveal acuity demo
   The grid needs real angular width for the outer cells to fall outside
   the fovea, so it runs wider than the reading measure and the words are
   deliberately not scaled up with eccentricity — same size everywhere is
   what makes the drop-off obvious.
   ===================================================================== */
.acuity {
  background: var(--velvet-deep);
  border: 1px solid var(--velvet-edge);
  border-radius: 8px;
  padding: clamp(1.5rem, 5vh, 3rem) clamp(0.75rem, 2vw, 1.5rem);
}
.acuity__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1rem, 3vh, 2rem) clamp(0.35rem, 1.5vw, 1.25rem);
  text-align: center;
}
.acuity__word {
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  line-height: 1.2;
  color: var(--parchment-dim);
  /* Hidden, not removed — the layout must not shift when they appear, or
     the movement itself becomes a cue. */
  visibility: hidden;
  transition: color 200ms;
}
.acuity[data-state="shown"] .acuity__word,
.acuity[data-state="revealed"] .acuity__word { visibility: visible; }
.acuity[data-state="revealed"] .acuity__word { color: var(--parchment); }
.acuity[data-state="revealed"] .acuity__word.is-plant {
  color: var(--evidence);
  text-decoration: underline dotted var(--evidence);
  text-underline-offset: 0.3em;
  font-weight: 600;
}
.acuity__fix {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gild);
}
.acuity__prompt {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--parchment-dim);
  text-align: center;
}
.acuity__read {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--evidence);
  color: var(--parchment);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 62ch;
}
.demo-card--flush { margin-top: 1.5rem; }

/* =====================================================================
   § 3 — techniques + demos
   ===================================================================== */
/* Five separate boxes, collapsed to titles. Built on <details> so they
   work with no JS at all, stay keyboard-operable for free, and can still
   be driven from the presenter keys. Not mutually exclusive on purpose —
   opening them one at a time leaves all five on screen at the end, which
   is the summary you want when you close the section. */
.techniques {
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  display: grid;
  gap: 0.75rem;
}
.technique__box {
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  transition: border-color 160ms, background 160ms;
}
.technique__box:hover { border-color: rgba(224, 169, 74, 0.45); }
.technique__box[open] { border-color: rgba(224, 169, 74, 0.55); }

.technique__summary {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: 1.1rem clamp(1.1rem, 3vw, 1.6rem);
  cursor: pointer;
  list-style: none;              /* kill the default disclosure triangle */
}
.technique__summary::-webkit-details-marker { display: none; }
.technique__num {
  flex: none;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--gild);
}
.technique__title {
  flex: 1;
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700;
  color: var(--parchment);
}
.technique__box[open] .technique__title { color: var(--gild); }
/* The affordance. A glyph rather than a rotating chevron, because it has
   to read as "there is more here" from the back of a room. */
.technique__summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gild);
}
.technique__box[open] .technique__summary::after { content: "–"; }

.technique__body {
  padding: 1.1rem clamp(1.1rem, 3vw, 1.6rem) 1.4rem;
  border-top: 1px solid var(--velvet-edge);
  animation: techOpen 260ms var(--ease-spot);
}
@keyframes techOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.technique__body .prose { margin: 0; font-size: 1rem; color: var(--parchment-dim); }
/* The concrete example, styled like a stage direction. Warm accent, not
   cold — this is the stagecraft side of the page, not the evidence side. */
.technique__seen {
  margin: 0.85rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(224, 169, 74, 0.45);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--parchment);
  max-width: 64ch;
}
.technique__seen-tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gild);
  margin-bottom: 0.35rem;
}
.technique__seen em { color: var(--gild-soft); font-style: italic; }

.demo-card {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.75rem);
}
.demo-card__cap { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.25rem; }
.demo-card__cap .eyebrow { margin: 0; }
.demo-card__note { color: var(--parchment-dim); font-size: 0.95rem; }
.demo-card__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.25rem; }

/* Full width, one at a time. The wide aspect gives the dot a long enough
   run for the eye to have somewhere to jump ahead to. */
.path-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 40;
  background: var(--velvet-deep);
  border: 1px solid var(--velvet-edge);
  border-radius: 8px;
}
/* The prediction, revealed at the freeze. Cold accent because it is the
   evidence side of the page, not the stagecraft side. */
.path-read {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--evidence);
  color: var(--parchment);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 62ch;
}

/* Gaze cueing */
.gaze {
  position: relative;
  height: clamp(200px, 30vh, 340px);
  background: var(--velvet-deep);
  border: 1px solid var(--velvet-edge);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gaze__face { display: flex; gap: clamp(0.75rem, 3vw, 1.5rem); z-index: 2; }
.gaze__eye {
  width: clamp(48px, 11vw, 82px);
  height: clamp(48px, 11vw, 82px);
  background: var(--parchment);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 0 3px var(--velvet-edge);
}
.gaze__pupil {
  position: absolute;
  width: 42%;
  height: 42%;
  background: var(--velvet-deep);
  border-radius: 50%;
  top: 29%;
  left: 29%;
  transition: transform 420ms var(--ease-spot);
}
/* Eight ring positions, placed by script.js via --x / --y. Both targets in
   a pair appear identically first; only the cued one gets .is-real, and
   only after a beat — so the room notices where they looked before being
   told which was right. */
.gaze__targets { position: absolute; inset: 0; }
.gaze__target {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(30px, 6vw, 46px);
  height: clamp(30px, 6vw, 46px);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 260ms var(--ease-spot), background 260ms, box-shadow 260ms;
  background: var(--parchment-dim);
}
.gaze__target.is-on { transform: translate(-50%, -50%) scale(1); }
.gaze__target.is-real { background: var(--gild); box-shadow: 0 0 24px var(--gild); }
/* A touch taller than before: the ring needs vertical room for the top and
   bottom positions to clear the face. */
.gaze { height: clamp(240px, 36vh, 380px); }

/* =====================================================================
   § 4 — the turn
   ===================================================================== */
.section--turn { text-align: left; }
.pull {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 5.5vw, 4.5rem);
  line-height: 1.05;
  margin: 0 0 2rem;
}
.pull__hit { color: var(--gild); }
.voice {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--parchment-dim);
  font-style: italic;
  border-left: 3px solid var(--gild);
  padding-left: 1.25rem;
  margin: 0 0 1rem;
  max-width: 48ch;
}

/* =====================================================================
   § 5 — switch cost teaser
   ===================================================================== */
.rules { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.6rem; }
.rules li {
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  font-size: 1rem;
}
.rules__where {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gild);
  display: inline-block;
  min-width: 9.5em;
}

.result-preview {
  background: var(--velvet-deep);
  border: 1px solid var(--velvet-edge);
  border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.75rem);
  margin: 1.25rem 0;
}
.result-preview__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.result-preview__head .eyebrow { margin: 0; }
.result-preview__big {
  font-size: clamp(2.5rem, 1rem + 7vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--evidence);
}
.result-preview__unit { font-size: 0.35em; color: var(--parchment-dim); margin-left: 0.2em; }
.latency-strip { width: 100%; height: auto; aspect-ratio: 64 / 12; display: block; }
.result-preview__legend { font-family: var(--mono); font-size: 0.8rem; color: var(--parchment-dim); margin: 0.75rem 0 0; }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 2px; vertical-align: -1px; }
.swatch--repeat { background: var(--parchment-dim); }
.swatch--switch { background: var(--evidence); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0.4rem;
  background: var(--evidence);
  color: var(--velvet-deep);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  transition: transform 140ms, box-shadow 200ms;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--evidence); }

.findings { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 1rem; }
.findings li { padding-left: 1.25rem; border-left: 2px solid var(--velvet-edge); max-width: 66ch; }
.findings strong { color: var(--parchment); }

.aside-note {
  margin: 1.5rem 0 0;
  background: rgba(87,201,221,0.06);
  border: 1px dashed rgba(87,201,221,0.4);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  font-size: 0.98rem;
  color: var(--parchment-dim);
}
.aside-note__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--evidence);
  margin-right: 0.6rem;
}
.aside-note em { color: var(--evidence-soft); font-style: italic; }

/* =====================================================================
   § 6 — helps
   ===================================================================== */
/* The quietest section on the page — a narrower measure lets it breathe
   rather than run the full width of the wrap. */
.helps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.5rem; }
.helps li { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.45; max-width: 52ch; }
.helps strong { color: var(--gild); font-weight: 600; }

/* =====================================================================
   § 7 — close
   ===================================================================== */
.pull--close { font-size: clamp(1.9rem, 1rem + 5vw, 4rem); }
.voice--close { border-color: var(--parchment-dim); }

/* =====================================================================
   § 8 — coda / endcard
   ===================================================================== */
.watch-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--velvet-raised);
  border: 1px solid var(--velvet-edge);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: var(--parchment);
  margin: 0 0 3rem;
  transition: border-color 160ms;
}
.watch-link:hover { border-color: var(--gild); }
.watch-link__title { font-weight: 600; font-size: 1.2rem; }
.watch-link__meta { color: var(--parchment-dim); font-size: 0.85rem; letter-spacing: 0.05em; }

.endcard {
  text-align: center;
  border-top: 1px solid var(--velvet-edge);
  border-bottom: 1px solid var(--velvet-edge);
  padding: clamp(2rem, 6vh, 3.5rem) 1rem;
}
.endcard__flourish { color: var(--gild); font-size: 1.5rem; margin: 0; }
.endcard__heading {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  margin: 0.5rem 0 1.5rem;
}
.refs {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 54rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
}
.refs li { color: var(--parchment-dim); font-size: 0.95rem; }
.refs .mono { color: var(--gild); }

/* =====================================================================
   Presenter key hint
   ===================================================================== */
.keyhint {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  background: var(--velvet-raised);
  border: 1px solid var(--gild);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  max-width: 20rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9);
}
.keyhint__title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gild);
  margin: 0 0 0.6rem;
}
.keyhint ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.keyhint li { font-size: 0.9rem; color: var(--parchment-dim); }

/* =====================================================================
   Scroll-in motion (progressive; JS adds .in-view)
   ===================================================================== */
.section .wrap > * { opacity: 1; }
.js .section:not(.section--open) .wrap {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-spot), transform 700ms var(--ease-spot);
}
.js .section.in-view .wrap { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */

/* Wide screens — the presentation case. Title and subtitle sit beside the
   image rather than above it, so the opening lands whole on one projected
   screen and the artwork gets the height it deserves. */
@media (min-width: 1024px) {
  .section--open .wrap {
    max-width: 92rem;
    display: grid;
    grid-template-columns: minmax(16rem, 21rem) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head image"
      "cue  image";
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .open__head {
    grid-area: head;
    text-align: left;
    margin-bottom: 0;
    align-self: center;
  }
  .open__head .lede { margin-inline: 0; max-width: 26ch; }
  .scroll-cue { grid-area: cue; text-align: left; }

  .open__figure { grid-area: image; align-self: center; }
  .open__img { max-height: min(64vh, 40rem); }

  /* The § 2 demos break out past the reading measure. Both need angular
     width: at 48rem the outer words and dots sit only ~7° off centre,
     inside the range people can still partly resolve. Wider pushes them
     out to where the drop-off is unmistakable. */
  .demo-card--wide {
    width: min(64rem, 88vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 620px) {
  .exploit { grid-template-columns: 1fr; gap: 0.35rem; }
  .claim { flex-direction: column; gap: 0.3rem; }
  .keyhint { display: none; } /* presenter aid is desktop-only */

  /* Five columns of words don't fit a phone. The same 15 cells reflow to
     3x5 — still an odd grid, so the fixation mark stays dead centre and
     the demo keeps working in portrait. */
  .acuity__grid { grid-template-columns: repeat(3, 1fr); }
  .acuity__word { font-size: 0.9rem; }

  /* Phones have height to spare and no width — let the image use the
     full column rather than staying capped by viewport height. */
  .open__img { max-height: none; width: 100%; }
  .section--open .title { font-size: clamp(3.5rem, 13vw, 5rem); }
  .section--open .lede { margin-bottom: 1.5rem; }
}

/* =====================================================================
   Reduced motion — disable ambient/scroll motion. The § 3 animations stay
   functional (they are content, not decoration) and keep their replay
   controls; only the ambient drift and the scroll cue are suppressed.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .section .wrap { opacity: 1 !important; transform: none !important; }
  .reveal__content { filter: none; }        /* readable immediately, still gated by veil */
  .scroll-cue { display: none; }
}