/* ============================================================
   How I use AI every day — deck styles
   Light, futuristic, iridescent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,18,400;0,18,500;0,18,600;1,18,400;1,18,500;1,18,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-base: #f6f3ee;
  --bg-warm: #fbe9d7;
  --bg-cool: #e6e2f5;
  --bg-mint: #dff0e6;
  --bg-rose: #f5d9e6;

  --ink: #0e0a0c;
  --ink-soft: #2a2429;
  --ink-mute: #514a50;
  --ink-faint: #5f565d;
  --line: rgba(22, 18, 20, 0.10);
  --line-soft: rgba(22, 18, 20, 0.06);

  --c-orange: #C94707;
  --c-orange-readable: #a33a12;
  --c-magenta: #d6356b;
  --c-violet: #6e3bd6;
  --c-blue: #2c6bff;
  --c-jade: #1f9d6e;
  --c-amber: #e0a83a;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Default to the pearl slide tone so the letterbox blends with most slides.
     The :has() rule below overrides this when an ink slide is active. */
  background: #f6f1e9;
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
/* isolation so body::before's mix-blend-mode multiplies against body's
   own bg paint instead of leaking up to the parent stacking context. */
body { isolation: isolate; }

/* Full-window pearl wash. Same gradient soup that used to live on
   .bg-pearl::before, but lifted onto body so it paints across the entire
   viewport and shows through the (now transparent) canvas + section.
   This is what makes the bg extend past the canvas edge with no seam. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --mx: 0.5;
  --my: 0.5;
  --ax: 0;
  --ay: 0;
  background-image:
    radial-gradient(54% 50% at calc(28% + (var(--mx) - 0.5) * 22% + var(--ax) * 7%)
                                 calc(34% + (var(--my) - 0.5) * 16% + var(--ay) * 5%),
                    rgba(245,180,130,0.55), rgba(245,180,130,0) 70%),
    radial-gradient(58% 54% at calc(78% - (var(--mx) - 0.5) * 18% - var(--ax) * 6%)
                                 calc(64% + (var(--my) - 0.5) * 14% + var(--ay) * 7%),
                    rgba(170,160,225,0.5), rgba(170,160,225,0) 72%),
    radial-gradient(50% 46% at calc(60% + (var(--mx) - 0.5) * 12% - var(--ax) * 5%)
                                 calc(20% - (var(--my) - 0.5) * 12% - var(--ay) * 6%),
                    rgba(225,150,185,0.4), rgba(225,150,185,0) 70%);
  background-color: transparent;
  mix-blend-mode: multiply;
  opacity: 0.55;
  /* animation: ambientDrift 38s ease-in-out infinite alternate;  (off: no background motion on a shared screen) */
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transition: none; }
}

/* Tint the page background to match the active slide's background, so the
   bg stretches edge-to-edge of the window even though the content canvas
   stays locked at the authored 1920x1080 design size. deck-stage marks the
   active slide with [data-deck-active]; we read that from the light DOM. */
html:has(deck-stage > section.bg-paper[data-deck-active]),
body:has(deck-stage > section.bg-paper[data-deck-active]) {
  background: var(--bg-base);
}

deck-stage section {
  /* Slides paint no bg of their own — the page-level pearl wash on body
     shows through, so the wash is one continuous layer across the window. */
  background: transparent;
  overflow: hidden;
  position: relative;
}

.bg-pearl {
  position: relative;
  background: transparent;
  isolation: isolate;
}
@keyframes ambientDrift {
  0%   { --ax: -1; --ay:  0.6; }
  25%  { --ax:  0.4; --ay: -0.8; }
  50%  { --ax:  1;   --ay:  0.2; }
  75%  { --ax: -0.3; --ay:  1; }
  100% { --ax: -1;   --ay: -0.5; }
}
/* Tell the browser these are animatable numbers, otherwise the
   transition / keyframe interpolation falls back to instant jumps. */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --ax { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ay { syntax: '<number>'; inherits: true; initial-value: 0; }
.bg-paper { background: var(--bg-base); }

/* Subtle film grain across all slides */
deck-stage section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: multiply;
  z-index: 1;
}
deck-stage section > * { position: relative; z-index: 2; }

/* ----- Typography ----- */
.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.title-md {
  font-size: 72px;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.title-sm {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.subtitle {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.body {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.body-lg {
  font-size: 36px;
  line-height: 1.35;
  color: var(--ink);
}
.small {
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink-mute);
}
.mono {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0;
  color: var(--ink-mute);
}
.serif-italic {
  font-family: 'Newsreader', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.eyebrow .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-right: 14px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ----- Slide layout ----- */
.slide {
  width: 100%;
  height: 100%;
  padding: 100px 110px 90px;
  display: flex;
  flex-direction: column;
}
.slide.center { justify-content: center; }
/* Like .center, but the eyebrow heading stays pinned to the top edge
   (matching non-centered slides) while the body content centres. */
.slide.vcenter { justify-content: center; position: relative; }
.slide.vcenter > .eyebrow { position: absolute; top: 100px; left: 120px; margin: 0; }
.slide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  width: 100%;
  height: 100%;
}

/* ----- Page chrome (slide number + label, top-right) ----- */
.chrome {
  position: absolute;
  top: 56px;
  right: 64px;
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
}
.chrome .num { color: var(--ink); font-weight: 500; }
.chrome .sep {
  width: 32px; height: 1px; background: var(--line); display: inline-block;
}

.footer-tag {
  position: absolute;
  bottom: 50px;
  left: 120px;
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  z-index: 5;
}

/* ----- The Ribbon hero ----- */
.ribbon-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ribbon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 80px rgba(110, 59, 214, 0.18));
  /* animation: ribbon-spin 60s linear infinite;  (off: no background motion on a shared screen) */
  transform-origin: center;
}
@keyframes ribbon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ribbon-counter {
  /* animation: ribbon-spin 90s linear infinite reverse;  (off: no background motion on a shared screen) */
}

/* Aurora orb backdrop */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  /* animation: aurora-drift 18s ease-in-out infinite alternate;  (off: no background motion on a shared screen) */
}
@keyframes aurora-drift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(40px,-30px) scale(1.08); }
}

/* ----- Section divider ----- */
.divider-thin {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* ----- Bracket marks (corner brackets) ----- */
.bracket {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
}
.bracket.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket.br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ----- Stat / number ----- */
.bignum {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 240px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-feature-settings: "ss01";
}
.bignum .pct { font-size: 0.45em; vertical-align: top; margin-left: 0.05em; color: var(--ink-mute); font-weight: 300; }

.stat-grad {
  /* The one emphasis word per slide. Was an ember-to-violet gradient. Now a
     marker stroke: ink text on a warm band that covers the lower part of the
     word, like a highlighter pass. Burgundy is reserved for closing clauses
     (a voice), so the two emphasis devices never share a colour. */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  /* A real marker pass, not a box: an inline SVG band with turbulence-displaced
     edges (ragged), a slight tilt, a darker patch where the pen pressed at the
     start, a thinner streak near the end, and multiply blending so the yellow
     soaks into the pearl instead of sitting on it. Classic highlighter yellow. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><filter id='r' x='-4%' y='-25%' width='108%' height='150%'><feTurbulence type='fractalNoise' baseFrequency='0.010 0.32' numOctaves='2' seed='11' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='11' xChannelSelector='R' yChannelSelector='G'/></filter><g filter='url(%23r)'><path d='M10 20 L990 13 L994 86 L6 93 Z' fill='%23FFF200' fill-opacity='0.62'/><path d='M16 31 L440 27 L436 79 L14 84 Z' fill='%23FFF200' fill-opacity='0.24'/><path d='M560 24 L988 20 L992 60 L562 64 Z' fill='%23FFFFFF' fill-opacity='0.10'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 106% 66%;
  background-position: -3% 66%;
  mix-blend-mode: multiply;
  display: inline-block;
  padding: 0 0.10em 0 0.08em;
  margin-left: -0.08em;
  line-height: 1;
}

/* Slide 04: adoption curve */
.adoption-slide {
  padding: 100px 110px 72px;
}
.adoption-layout {
  display: grid;
  grid-template-columns: 640px 1fr;
  gap: 86px;
  align-items: center;
  flex: 1;
  min-height: 0;
}
.adoption-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.adoption-number {
  font-size: 300px;
  line-height: 0.86;
  letter-spacing: -0.055em;
  margin-left: -12px;
}
.adoption-number .decimal {
  font-size: 0.58em;
  letter-spacing: -0.04em;
}
.adoption-number .pct {
  font-size: 0.56em;
  color: inherit;
  -webkit-text-fill-color: inherit;
}
.adoption-line {
  font-size: 50px;
  line-height: 1.08;
  margin-top: 34px;
}
.adoption-claim {
  font-size: 62px;
  line-height: 1.02;
  margin-top: 52px;
  letter-spacing: -0.035em;
}
.adoption-caveat {
  max-width: 570px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 24px;
  line-height: 1.36;
  color: var(--ink-mute);
}
.adoption-panel {
  position: relative;
  min-width: 0;
  padding-right: 128px;
}
.adoption-panel::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
}
.adoption-panel-title {
  font-size: 54px;
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.adoption-panel-subtitle {
  max-width: 850px;
  margin-top: 18px;
  font-size: 28px;
  line-height: 1.34;
  color: var(--ink-mute);
}
.early-adoption-bars {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 58px;
}
.bar-row {
  display: grid;
  grid-template-columns: 270px 1fr 132px;
  gap: 24px;
  align-items: center;
}
.bar-label {
  font-size: 31px;
  line-height: 1.05;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bar-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.bar-track {
  height: 24px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      rgba(14,10,12,0.12) 0,
      rgba(14,10,12,0.12) 1px,
      transparent 1px,
      transparent 25%) left / 25% 100% repeat-x,
    rgba(14,10,12,0.055);
  overflow: hidden;
}
.bar-track span {
  display: block;
  width: calc(var(--v) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--c-orange), var(--c-magenta));
  box-shadow: 0 0 32px rgba(214, 53, 107, 0.22);
}
.bar-row.highlight .bar-track {
  height: 34px;
  background:
    linear-gradient(to right,
      rgba(14,10,12,0.16) 0,
      rgba(14,10,12,0.16) 1px,
      transparent 1px,
      transparent 25%) left / 25% 100% repeat-x,
    rgba(14,10,12,0.07);
}
.bar-row.highlight .bar-track span {
  background: linear-gradient(100deg, var(--c-orange) 0%, var(--c-magenta) 55%, var(--c-violet) 100%);
}
.bar-value {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  text-align: right;
  justify-self: end;
  min-width: 124px;
  padding-right: 0.16em;
  overflow: visible;
}
.bar-row.highlight .bar-value {
  font-size: 58px;
  background: linear-gradient(100deg, var(--c-orange), var(--c-magenta), var(--c-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.adoption-source {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ----- Quote block ----- */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 88px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.quote-mid {
  font-size: 64px;
}
.quote-attr {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 40px;
}

/* ----- Pills + tags ----- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: #fbf7f0;
}
.pill .swatch {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-orange);
}

/* ----- Numbered list ----- */
.numlist {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 36px;
}
.numlist li {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.numlist li:last-child { border-bottom: none; }
.numlist .n {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--c-orange);
  letter-spacing: 0.05em;
}
.numlist .label {
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.numlist .desc {
  font-size: 24px;
  color: var(--ink-mute);
  line-height: 1.35;
}

/* Two-col is/isn't list */
.colpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 60px;
}
.colpair .col h4 {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.colpair .col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 22px;
}
.colpair .col li {
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  padding-left: 36px;
  position: relative;
  letter-spacing: -0.01em;
}
.colpair .col li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 18px; height: 1px;
  background: var(--c-orange);
}
.colpair .col.no li::before { background: var(--ink-faint); }

/* Bar charts */
.bars {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 40px;
}
.bar {
  display: grid;
  grid-template-columns: minmax(260px, max-content) 1fr 90px;
  align-items: center;
  gap: 24px;
}
.bar .lbl {
  font-size: 28px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bar .track-b {
  height: 18px;
  background: var(--line-soft);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.bar .fill {
  height: 100%;
  border-radius: 100px;
  background: var(--c-orange);
}
/* Per-row color rotation — gives the chart visual rhythm.
   Specificity .bars .bar:nth-child .fill (0,1,2) beats .bar .fill.alt (0,1,1+1=2) — actually equal,
   so we use .bars .bar:nth-child(N) .fill which still ties. We add !important on these
   because .fill.alt and .fill.dim are 2-class selectors that tie our specificity. */
.bars .bar:nth-child(1) .fill { background: var(--c-orange) !important; }
.bars .bar:nth-child(2) .fill { background: var(--c-magenta) !important; }
.bars .bar:nth-child(3) .fill { background: var(--c-violet) !important; }
.bars .bar:nth-child(4) .fill { background: var(--c-blue) !important; }
.bars .bar:nth-child(5) .fill { background: var(--c-jade) !important; }
.bars .bar:nth-child(6) .fill { background: var(--c-amber) !important; }
.bar .fill.alt {
  background: var(--ink-mute);
}
.bar .fill.dim {
  background: var(--ink-faint);
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bar .val {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink);
  text-align: right;
  font-weight: 500;
}

/* Tool stack list */
.stack {
  display: flex; flex-direction: column;
}
.stack .row {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.stack .row:last-child { border-bottom: 1px solid var(--line); }
.stack .name {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.stack .why {
  font-size: 24px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.stack .name .role {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-orange);
  margin-top: 10px;
  white-space: nowrap;
}

/* Comparison table (slide 9) */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 60px;
}
.compare th, .compare td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.compare th {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
}
.compare td.model {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.compare td .swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-2px);
}


/* Modes (slide 10) */
.modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 80px;
}
.mode {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.mode .tag {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 16px;
}
.mode .label {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

/* Roadmap timeline */
.roadmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  margin-top: 80px;
  position: relative;
}
.roadmap::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--line);
}
.rm-node {
  position: relative;
  padding-top: 48px;
}
.rm-node::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink-faint);
}
.rm-node.now::before { background: var(--c-orange); border-color: var(--c-orange); box-shadow: 0 0 0 6px rgba(255,107,44,0.18); }
.rm-node.next::before { background: var(--ink); border-color: var(--ink); }
.rm-node .when {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.rm-node .what {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.rm-node.now .when { color: var(--c-orange); }

/* Examples chips */
.chips {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 40px;
}
.chip {
  padding: 14px 22px;
  border-radius: 100px;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: #fbf7f0;
  font-size: 24px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.chip strong {
  color: var(--ink);
  font-weight: 600;
  margin-right: 10px;
}

/* Big horizontal scope/speed split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.split .half {
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 100px 80px;
  position: relative;
}
.split .half + .half { border-left: 1px solid var(--line); }

/* Two-agents diagram */
.duet {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 60px;
}
.duet .agent {
  padding: 36px;
  border: 1px solid var(--ink);
  border-radius: 20px;
  background: #fbf7f0;
}
.duet .agent .role {
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-orange);
  margin-bottom: 12px;
}
.duet .agent .name {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.duet .agent .what {
  font-size: 24px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.duet .bridge {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.duet .bridge .you {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ink);
  color: #f6f3ee;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}
.duet .bridge .line {
  width: 100%; height: 1px; background: var(--ink);
}

/* Final CTA strap */
.strap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 100px;
  background: var(--ink);
  color: #f6f3ee;
  font-family: var(--font-mono);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.strap .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 0 0 rgba(255,107,44,0.6);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,107,44,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(255,107,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,44,0); }
}

/* Marquee — kicker phrase that flows across slide 4 */
.marquee {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 220px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.marquee .grad {
  color: var(--c-orange);
  font-style: italic;
}


/* Tiny terminal */
.term {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.7;
  color: var(--ink);
  background: #fbf7f0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
}
.term .cmd::before { content: '$ '; color: var(--c-orange); }
.term .out { color: var(--ink-mute); }
.term .slash { color: var(--c-violet); font-weight: 500; }

/* Slow drift on the orb on the cover */
.orb-wrap {
  position: absolute;
  inset: -10% auto auto -5%;
  width: 70%;
  height: 120%;
}

.ink-mute, .small, .mono { color: var(--ink-soft) !important; }
.bg-ink .small, .bg-ink .mono { color: rgba(246,243,238,0.88) !important; }
/* Mono text sitting ON a filled chip (burgundy numeral circles): the rule above forces
   dark ink and beats inline colour, which fails contrast. 2026-09-20. */
.mono.on-fill { color: #F6F1E9 !important; }

/* Helpers */
.flex { display: flex; }
.col { flex-direction: column; }
.gap-l { gap: 48px; } .gap-m { gap: 28px; } .gap-s { gap: 14px; }
.mt-l { margin-top: 64px; } .mt-m { margin-top: 32px; } .mt-s { margin-top: 16px; }
.fill { width: 100%; height: 100%; }
.right { text-align: right; }
.center-text { text-align: center; }
.max-w-1200 { max-width: 1200px; }
.max-w-1400 { max-width: 1400px; }

/* ============================================================
   Cover slide background — concentric rings + misregistered
   "AI" echo. Type-driven and structural; no blur, no glow.
   ============================================================ */
.cover-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--c-violet);
  opacity: 0.10;
  z-index: 0;
}
.cover-echo {
  position: absolute;
  /* Misregistered: sits behind & offset from the main "AI" glyph in
     the headline. Tuned to 1920x1080 cover at the deck's native size. */
  left: 110px;
  top: 320px;
  font-family: 'Newsreader', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 720px;
  line-height: 0.82;
  letter-spacing: -0.02em;
  pointer-events: none;
  /* Outline only — color from the brand violet, very low contrast.
     The misregistration with the foreground gradient AI does the work. */
  color: transparent;
  -webkit-text-stroke: 1px var(--c-violet);
  opacity: 0.18;
  z-index: 0;
  user-select: none;
}
/* Make sure the cover content sits above the bg layers — but DON'T
   touch the slide's position; deck-stage manages slide layout. */
section[data-label="01 Cover"] > .slide,
section[data-label="01 Cover"] > .chrome { z-index: 2; }
section[data-label="01 Cover"] > .cover-rings,
section[data-label="01 Cover"] > .cover-echo { z-index: 0; }

/* ============================================================
   Pace-is-dizzying timeline grid (slide 08)
   4 columns (Jan/Feb/Mar/Apr), packed tiles per month.
   Visual goal: looks crowded; readable but dense.
   ============================================================ */
.pace-impact-layout {
  margin-top: 32px;
}
.pace-release-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(54px, auto);
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(22,18,20,0.035) 1px, transparent 1px) 0 0 / 25% 100%,
    rgba(255,255,255,0.20);
  overflow: hidden;
}
.pace-release-field::before {
  content: '';
  position: absolute;
  inset: -30% -8%;
  background:
    radial-gradient(40% 42% at 70% 56%, rgba(110,59,214,0.16), transparent 68%),
    radial-gradient(36% 36% at 22% 20%, rgba(255,107,44,0.14), transparent 70%);
  pointer-events: none;
}
.pace-burst {
  position: absolute;
  z-index: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 118px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
}
.burst-jan { left: 20px; top: 12px; }
.burst-feb { left: 25%; top: 118px; }
.burst-mar { right: 28%; top: 18px; }
.burst-apr { right: 12px; bottom: 10px; }
.pace-tile {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.58);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.2s ease, outline-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pace-tile:hover {
  transform: translateY(-3px) scale(1.04);
  outline: 2px solid var(--c-orange-readable);
  outline-offset: -1px;
  background: linear-gradient(135deg, rgba(255, 250, 244, 1) 0%, rgba(255, 107, 44, 0.30) 100%);
  box-shadow: 0 8px 22px rgba(255, 107, 44, 0.30);
  z-index: 10;
}
.pace-tile:hover .pace-what {
  font-weight: 600;
  color: var(--ink);
}
.pace-tile:hover .pace-date {
  color: var(--c-orange-readable);
  font-weight: 600;
}
.pace-tile .pace-date {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 500;
}
.pace-tile .pace-what {
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  font-weight: 500;
}
.pace-tile.model {
  border-left: 3px solid var(--c-orange);
  background: rgba(231, 138, 87, 0.06);
}
.pace-tile.tool {
  border-left: 3px solid var(--c-violet);
  background: rgba(143, 105, 168, 0.06);
}
.pace-tile.app {
  border-left: 3px solid var(--c-magenta);
  background: rgba(214, 53, 107, 0.055);
}
.pace-tile.platform {
  border-left: 3px solid var(--c-jade);
  background: rgba(31, 157, 110, 0.055);
}

/* Headline class kept on tiles in markup but no special styling — all tiles
   start uniform, and the speaker uses hover during show-and-tell to spotlight. */
.pace-principle {
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(88% 78% at 76% 18%, rgba(255,107,44,0.28), transparent 58%),
    radial-gradient(72% 64% at 86% 88%, rgba(110,59,214,0.30), transparent 64%),
    linear-gradient(150deg, #0e0a0c 0%, #20141d 48%, #382238 100%);
  color: #f6f3ee;
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(14,10,12,0.16);
}
.pace-principle::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 78%);
  pointer-events: none;
}
.pace-principle > * {
  position: relative;
  z-index: 1;
}
.pace-count {
  font-size: 142px;
  line-height: 0.8;
  letter-spacing: -0.05em;
  filter: drop-shadow(0 10px 28px rgba(255,107,44,0.16));
}
.pace-count-label {
  margin-top: 18px;
  font-size: 19px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff5ec !important;
}
.pace-rule {
  margin-top: 38px;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #fffaf4;
}
.pace-rule .serif-italic {
  color: #ffd7c7;
  text-shadow: 0 0 28px rgba(255,107,44,0.24);
}
.pace-rule-sub {
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.28;
  color: rgba(246,243,238,0.78);
}
.pace-principle .serif-italic {
  color: #fffaf4 !important;
}
.pace-principle .body {
  font-size: 20px !important;
  color: rgba(246,243,238,0.86) !important;
}
.pace-principle .quote-attr,
.pace-principle .mono {
  color: rgba(246,243,238,0.78) !important;
}
.pace-source {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(246,243,238,0.20);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246,243,238,0.68);
}

/* ============================================================
   Video placeholder (demo slides)
   Looks like a real video player; click-to-play in final pass.
   ============================================================ */
.vp-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #221b1f 0%, #0e0a0c 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.4);
  overflow: hidden;
  box-shadow: 0 12px 28px -16px rgba(22, 18, 20, 0.35);
}
.vp-frame::before {
  /* faint grid texture */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px;
}
.vp-frame::after {
  /* fake progress bar */
  content: '';
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      var(--c-orange) 0%,
      var(--c-orange) 14%,
      rgba(255,255,255,0.15) 14%,
      rgba(255,255,255,0.15) 100%);
}
.vp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0e0a0c;
  z-index: 1;
}
.vp-frame:has(.vp-video)::before,
.vp-frame:has(.vp-video)::after {
  display: none;
}
.vp-frame:has(.vp-video) .vp-filename,
.vp-frame:has(.vp-video) .vp-badge {
  z-index: 2;
  background: rgba(14,10,12,0.58);
  color: rgba(255,255,255,0.82);
  border-radius: 3px;
}
.vp-play {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.92);
  font-size: 36px;
  padding-left: 8px;
  z-index: 1;
}
.vp-filename {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  z-index: 1;
}
.vp-time {
  position: absolute;
  bottom: 38px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  z-index: 1;
}
.vp-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 1;
}

/* ============================================================
   Wispr Flow live demo — voice-to-text input + reference card
   ============================================================ */

.voice-canvas {
  display: block;
  width: 100%;
  min-height: 320px;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  resize: none;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.voice-canvas::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

.voice-canvas:hover {
  background: rgba(255, 255, 255, 0.7);
}

.voice-canvas:focus {
  border-color: var(--c-orange);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 3px rgba(255, 107, 44, 0.14);
}

.voice-fact {
  margin-top: 32px;
  padding: 22px 26px 20px;
  border-left: 2px solid var(--c-orange);
  background: rgba(255, 107, 44, 0.05);
  border-radius: 0 4px 4px 0;
}

.voice-fact-label {
  font-size: 22px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.voice-fact-body {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink);
}

.voice-fact-attr {
  margin-top: 14px;
  font-size: 20px;
}


/* ============================================================
   CONCORDIA DECK SYSTEM — alignment layer
   Brings the whole deck onto the refined "Deck System" reference:
   warm ink, ember/pink/violet AI gradient, burgundy brand accent,
   a calm editorial-paper background, a dashed mono rail, and warm
   card surfaces. Appended last so it overrides the cascade above
   without touching the per-slide layouts that are already tuned.
   THREE VOICES (Bricolage / Newsreader / Mono) · ONE PALETTE ·
   ONE EMPHASIS RULE (one gradient word per slide).
   ============================================================ */
:root {
  /* Warm ink ramp (was cold near-black) */
  --ink: #1A1310;
  --ink-soft: #2C2521;
  --ink-mute: #5E544D;
  --ink-faint: #6B615A;
  --line: rgba(26, 19, 16, 0.12);
  --line-soft: rgba(26, 19, 16, 0.07);

  /* The AI gradient keeps the brighter ember; functional accents use
     the darker --ember for projection contrast. */
  --c-orange: #C94707;
  --grad-orange: #E8590C;
  --c-magenta: #D8366E;
  --c-violet: #9B3CC9;

  /* New system tokens */
  --ember: #C94707;
  --burgundy: #912338;        /* the one brand colour we borrow */
  --burgundy-tint: color-mix(in srgb, var(--burgundy) 13%, var(--bg-base)); /* burgundy wash, for blocks */
  --highlight: #FFF200; /* classic highlighter yellow; the stroke itself is the SVG in .stat-grad */
  --paper: #F4EFEA;
  --rail: #70655D;
  --rail-ink: #5E544D;
  --rail-dash: #C3B8AE;
}

/* ----- Background: calm editorial paper, static (no drift/grain) ----- */
html, body { background: #F3EDE6; }
body::before {
  background-image:
    radial-gradient(78% 68% at 30% 32%, #FCEEE0 0%, rgba(252,238,224,0) 55%),
    radial-gradient(95% 95% at 86% 104%, #E7E5F1 0%, rgba(231,229,241,0) 58%),
    linear-gradient(135deg, #F6F1EB 0%, #F1ECEF 100%);
  mix-blend-mode: normal;
  opacity: 1;
  animation: none;
}
html:has(deck-stage > section.bg-paper[data-deck-active]),
body:has(deck-stage > section.bg-paper[data-deck-active]) {
  background: #F3EDE6;
}
/* Drop the film grain — the system is clean paper */
deck-stage section::after { display: none; }

/* Slides are transparent so the single viewport-fixed wash (body::before,
   same gradient) shows through both the slide and the letterbox as ONE
   continuous layer. That removes the canvas-edge seam at every viewport.
   At 16:9 fullscreen the viewport maps 1:1 to the 1920x1080 artboard, so the
   wash still lands exactly as in the Deck System mockups. (Earlier this
   painted the gradient on each section, which matched the artboard but left
   a visible line where the slide gradient met the differently-mapped
   letterbox gradient at any non-16:9 viewport.) */
deck-stage section,
deck-stage section.bg-pearl,
deck-stage section.bg-paper {
  background: transparent;
}

/* ----- The one emphasis word: see the base .stat-grad rule (brand tint) ----- */
/* Inside 600-weight serif lines, the gradient word must match the
   surrounding weight (the base .stat-grad rule pins 500). Gradient words
   inside grotesque heads keep 500: the serif contrast there is the design. */
.serif-italic .stat-grad,
.quote .stat-grad,
.vThree .h .stat-grad,
.vNarr .lead .stat-grad { font-weight: 600; }
/* Serif gradient words inline in grotesque heads run optically small:
   Newsreader's x-height sits well below the display face's at the same
   font-size. Compensate so the gradient word reads as the same size. */
.title .stat-grad, .title-md .stat-grad, .title-sm .stat-grad { font-size: 1.12em; }

/* ----- Display voice: a touch heavier, matching the grotesque poster beats ----- */
.title    { font-weight: 600; }
.title-md { font-weight: 600; }
.title-sm { font-weight: 600; }
/* Serif statement headings (.quote) match the deck's other statement heads
   (.serif-italic at 72px, and the UCS .quote): Newsreader italic 600, 70px.
   600 holds weight on a projector; only the 104px narrative leads stay 500
   (optical size compensates at that scale).
   (!important overrides the per-slide inline font-size/margin in the markup.) */
.quote {
  font-weight: 600;
  font-size: 70px !important;
  line-height: 1.08 !important;
  margin-top: 30px !important;
}

/* ----- Rail (top-right chrome): mono, spaced, with a dash ----- */
.chrome {
  top: 70px;
  right: 96px;
  gap: 20px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--rail);
}
.chrome .sep { width: 40px; height: 1.5px; background: var(--rail-dash); }
.chrome .num { color: var(--rail-ink); font-weight: 600; }


/* ----- Brand accent: the Concordia wordmark + closing brand read burgundy ----- */
.brand-name { color: var(--burgundy); font-weight: 700; letter-spacing: -0.01em; }

/* ----- Continuous-line wave illustration (system signature) ----- */
.wave { display: block; }
.wave path { fill: none; stroke: #B7AEA6; stroke-width: 2; }

/* ============================================================
   TITLE archetype (cover) — faithful to the Deck System reference.
   Three-line stacked headline: grotesque l1, burgundy serif-italic
   "between" + ember callout, grotesque l3. Right-aligned sub,
   burgundy crest + wordmark, ink pill. Clean paper, no rings.
   ============================================================ */
.slide.vTitle { padding: 0; position: relative; }
.vTitle .chrome.railT {
  /* Same top/right as the standard rail so the "01 / 29" counter does not
     shift when advancing to slide 2. The label fills out to the left. */
  top: 70px; left: 110px; right: 96px;
  justify-content: space-between; align-items: center; gap: 0;
}
.vTitle .railT > span:first-child { color: var(--ink); font-weight: 600; }

.vt-stack { position: absolute; top: 244px; left: 110px; width: 1320px; }
.vt-l1 {
  font-family: var(--font-display); font-weight: 700; font-size: 152px;
  line-height: 0.96; letter-spacing: -0.03em;
  white-space: nowrap; color: var(--ink);
}
.vt-row2 { display: flex; align-items: flex-end; gap: 40px; margin: 14px 0 14px 188px; }
.vt-btw {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 152px;
  line-height: 0.9; letter-spacing: -0.01em; color: var(--burgundy); white-space: nowrap;
}
.vt-callout {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ember); font-weight: 600;
  white-space: nowrap; padding-bottom: 42px;
}
.vt-ln { width: 66px; height: 2px; background: var(--ember); opacity: 0.75; }
.vt-l3 {
  font-family: var(--font-display); font-weight: 700; font-size: 152px;
  line-height: 0.96; letter-spacing: -0.03em; margin-left: 392px; white-space: nowrap; color: var(--ink);
}

/* Left-aligned, not right. Right-aligned ragged-left copy over three or four
   lines reads as typeset-for-effect and costs legibility, and there is nothing
   directly under it to justify against. The two sentences are broken by hand in
   the markup because they are parallel and each deserves its own line. */
.vt-sub {
  position: absolute; right: 120px; top: 360px; width: 660px;
  font-family: var(--font-display); font-weight: 400; font-size: 41px;
  line-height: 1.3; color: #3B322D; text-align: left; margin: 0;
}
.vt-sub b { font-weight: 700; color: var(--ink); }

.vt-foot { position: absolute; left: 110px; bottom: 92px; }
.vt-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.vt-crest {
  width: 30px; height: 36px; background: var(--burgundy);
  clip-path: polygon(50% 0, 100% 18%, 100% 64%, 50% 100%, 0 64%, 0 18%);
}
.vt-name {
  font-family: var(--font-display); font-weight: 700; font-size: 35px;
  color: var(--burgundy); letter-spacing: -0.01em;
}
.vt-who { font-family: var(--font-mono); }
.vt-nm { font-weight: 700; font-size: 24px; color: var(--ink); }
.vt-ti { font-weight: 400; font-size: 20px; color: var(--ink-faint); margin-top: 5px; }

/* De-styled from a black capsule to a plain mono line. The filled pill with a
   dot is a landing-page component and it was the one stock-looking element on
   the cover. Set flush to the chrome rail's 96px so the bottom-right metadata
   rhymes with the top-right counter instead of floating as a badge. */
.vt-pill {
  position: absolute; right: 96px; bottom: 100px;
  display: inline-flex; align-items: center; gap: 15px;
  background: transparent; color: var(--ink); border-radius: 0;
  padding: 0; font-family: var(--font-mono); font-weight: 600; font-size: 22px;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
}
.vt-o { width: 12px; height: 12px; border-radius: 50%; background: var(--ember); }

/* ============================================================
   DECK SYSTEM ARCHETYPES — faithful port of Deck System.html.
   Each archetype slide is a clean 1920x1080 positioning context
   (padding:0) with absolutely-positioned children, exactly like
   the reference. The .chrome rail already reads as the system railR.
   Sub-classes are renamed where they would collide with existing
   deck classes (.num, .fill, .grid, .wave, .sub).
   ============================================================ */
.slide.vNarr, .slide.vDiv, .slide.vBig, .slide.vThree,
.slide.vQuote, .slide.vEnd, .slide.vDemo { padding: 0; position: relative; }

/* ----- NARRATIVE: serif lead + illustration + pull-quote ----- */
.vNarr .lead {
  position: absolute; left: 110px; top: 150px; margin: 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 104px; line-height: 1.04; letter-spacing: -0.015em; color: var(--ink);
  max-width: 1180px;
}
.vNarr .payoff {
  position: absolute; left: 110px; bottom: 110px; margin: 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 72px; line-height: 1.0; letter-spacing: -0.015em; color: var(--ink);
}
.vNarr .quoteBlock {
  position: absolute; left: 110px; bottom: 96px; max-width: 1360px;
  padding-left: 40px; border-left: 3px solid var(--ink);
}
.vNarr .quoteBlock .q {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 46px; line-height: 1.28; color: var(--ink); letter-spacing: -0.01em;
}
.vNarr .quoteBlock .cite {
  margin-top: 26px; font-family: var(--font-mono); font-weight: 400; font-size: 24px;
  color: var(--ink-faint); letter-spacing: 0.02em;
}
.vNarr .quoteBlock .cite em, .vNarr .quoteBlock .cite i { font-style: italic; }
.vNarr .nillo {
  position: absolute; pointer-events: none;
}

/* ----- DIVIDER: giant gradient numeral + kicker + title + wave ----- */
.vDiv .dnum {
  position: absolute; left: 96px; top: 286px; font-family: var(--font-display);
  font-weight: 800; font-size: 560px; line-height: 0.8; letter-spacing: -0.04em;
  color: var(--burgundy); /* was the ember-to-violet gradient; solid now, same as the emphasis word */
  /* With background-clip:text, ink outside the box goes unpainted:
     line-height 0.8 pushes the baseline below the paint box (bottom clips
     flat), and letter-spacing -0.04em shrinks the box narrower than the
     glyph (right edge clips flat on 2 and 3). Padding extends the paint
     area; absolutely positioned from top-left, it doesn't move the glyph. */
  padding: 0 0.12em 0.2em 0;
}
.vDiv .kick {
  position: absolute; left: 790px; top: 392px; font-family: var(--font-mono);
  font-weight: 600; font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ember); white-space: nowrap;
}
.vDiv .dt {
  position: absolute; left: 790px; top: 452px; font-family: var(--font-display);
  font-weight: 700; font-size: 96px; line-height: 1.04; letter-spacing: -0.03em;
  max-width: 1040px; color: var(--ink);
}
.vDiv .dbody {
  position: absolute; left: 790px; top: 700px; max-width: 1000px;
  font-size: 30px; line-height: 1.42; color: #4A413B;
}
.vDiv .dwave { position: absolute; left: 792px; top: 760px; }
.vDiv .dwave path { fill: none; stroke: #B7AEA6; stroke-width: 2; }

/* ----- BIG IDEA: grotesque poster beat ----- */
.vBig .kick {
  position: absolute; left: 110px; top: 150px; font-family: var(--font-mono);
  font-weight: 600; font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rail);
}
.vBig .claim {
  position: absolute; left: 108px; top: 296px; right: 200px; font-family: var(--font-display);
  font-weight: 700; font-size: 140px; line-height: 0.98; letter-spacing: -0.035em; color: var(--ink);
}
.vBig .claim.sz-md { font-size: 112px; }
.vBig .claim.sz-sm { font-size: 92px; }
.vBig .claim .em { color: var(--burgundy); }
.vBig .bsub {
  position: absolute; left: 110px; bottom: 120px; right: 220px; max-width: 1500px;
  font-size: 34px; line-height: 1.4; color: #4A413B;
}
.vBig .bsub .ref { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 22px; color: var(--ink-faint); letter-spacing: 0.02em; }

/* ----- THREE-UP: mono-numbered columns ----- */
/* Headlines unified with the serif-italic voice used on slides 2-6 (2026-07-29).
   Serif runs wider than the grotesque it replaced; the longest .h in the deck
   may wrap to two lines, which clears the cols at top:430 with room to spare. */
.vThree .h {
  position: absolute; left: 110px; top: 140px; font-family: var(--font-serif);
  font-style: italic; font-weight: 600; font-size: 72px;
  letter-spacing: -0.015em; line-height: 1.08; color: var(--ink); max-width: 1740px;
}
.vThree .h.sz-sm { font-size: 72px; line-height: 1.08; }
.vThree .cols { position: absolute; left: 110px; right: 110px; top: 430px; display: flex; gap: 64px; }
.vThree .cols.top-hi { top: 380px; }
.vThree .col { flex: 1; }
.vThree .col .cn { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--burgundy); letter-spacing: 0.06em; }
.vThree .col .crule { height: 2px; background: rgba(26, 19, 16, 0.16); margin: 24px 0 30px; }
.vThree .col .ct { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 22px; color: var(--ink); }
.vThree .col .cb { font-size: 28px; line-height: 1.38; color: #4A413B; }
.vThree .col .cb .stat-grad { font-weight: 600; }

/* ----- FULL PULL-QUOTE ----- */
.vQuote .qlabel {
  position: absolute; left: 112px; top: 170px; font-family: var(--font-mono);
  font-weight: 600; font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rail);
}
.vQuote .qmark {
  position: absolute; left: 96px; top: 120px; font-family: var(--font-serif);
  font-style: italic; font-weight: 500; font-size: 360px; color: rgba(140, 35, 50, 0.12); line-height: 1;
}
.vQuote .qbig {
  position: absolute; left: 112px; top: 320px; right: 200px; font-family: var(--font-serif);
  font-style: italic; font-weight: 500; font-size: 100px; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
.vQuote .qby {
  position: absolute; left: 112px; bottom: 110px; font-family: var(--font-mono);
  font-weight: 500; font-size: 26px; letter-spacing: 0.04em; color: #6E645D; white-space: nowrap;
}

/* ----- CLOSING ----- */
.vEnd .eh {
  position: absolute; left: 110px; top: 300px; right: 200px; font-family: var(--font-display);
  font-weight: 700; font-size: 150px; line-height: 0.96; letter-spacing: -0.035em; color: var(--ink);
}
.vEnd .eh .ai2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.vEnd .efoot { position: absolute; left: 110px; bottom: 96px; }
.vEnd .efoot .vt-brand { margin-bottom: 22px; }
.vEnd .efoot .ec { font-family: var(--font-mono); font-size: 26px; color: #5E544D; letter-spacing: 0.02em; }

/* ----- DEMO / VIDEO ----- */
.vDemo .dh1 {
  position: absolute; left: 110px; top: 150px; font-family: var(--font-display);
  font-weight: 700; font-size: 80px; line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap;
}
.vDemo .dh2 {
  position: absolute; left: 110px; top: 252px; font-family: var(--font-serif);
  font-style: italic; font-weight: 500; font-size: 70px; line-height: 1.0; letter-spacing: -0.01em; color: #857C74; white-space: nowrap;
}
.vDemo .dvideo {
  position: absolute; left: 110px; top: 430px; width: 880px; height: 495px; border-radius: 16px;
  background: radial-gradient(120% 130% at 50% 0%, #201B19 0%, #141110 68%, #0E0B0A 100%);
  border: 1px solid rgba(26, 19, 16, 0.2); overflow: hidden; box-shadow: 0 30px 64px -32px rgba(0, 0, 0, 0.55);
}
.vDemo .dvideo .vgrid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 98px 98px;
}
.vDemo .dvideo .vcap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; font-family: var(--font-mono); font-size: 24px; line-height: 1.5; color: #80796F; letter-spacing: 0.04em; padding: 0 50px;
}
.vDemo .dvideo .vscrub { position: absolute; left: 28px; right: 28px; bottom: 26px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.16); }
.vDemo .dvideo .vscrub .vfill { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; background: var(--ember); border-radius: 3px; }
.vDemo .dcol { position: absolute; left: 1080px; top: 430px; width: 730px; }
.vDemo .dcol .p { font-size: 33px; line-height: 1.42; color: #2C2521; }
.vDemo .dcol .p.mut { color: #6E645D; }
.vDemo .dcol .quo { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 33px; line-height: 1.4; color: var(--ink); margin: 28px 0; }
/* Demo variant with no video: a single wide instruction block */
.vDemo .dwide { position: absolute; left: 110px; top: 430px; right: 110px; }
.vDemo .dwide .dlabel { font-family: var(--font-mono); font-weight: 600; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rail); margin-bottom: 22px; }
.vDemo .dwide .dquote {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 46px; line-height: 1.32;
  color: var(--ink); letter-spacing: -0.01em; border-left: 3px solid var(--c-jade); padding-left: 40px; max-width: 1640px;
}
.vDemo .dwide .dnote { margin-top: 40px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 34px; color: #6E645D; }


/* Deck-local accent pair for editorial-cards placards (derived per
   Deck system README: dark tone = deepened light tone). Burgundy is
   this deck's category colour; keeps the palette to burgundy + ember. */
.accent-burgundy { --cat: #8C2332; --catd: #661A26; }


/* ----- Pattern cards (museum-placard component, ported verbatim from the UCS
   "AI for the work between the work" deck so the imported "Same change / Two
   audiences" slide matches its source exactly: the label sits OUTSIDE the
   frame; the framed artifacts are equal-height via grid stretch + flex:1). ----- */
.pattern-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 44px;
  align-items: stretch;
}
.pattern-card {
  --card-accent: var(--c-orange);
  --card-accent-d: var(--c-orange);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pattern-card.accent-amber { --card-accent: #9A6F22; --card-accent-d: #6E4E14; }
.pattern-card.accent-blue  { --card-accent: #3C5C8C; --card-accent-d: #2A4368; }
.pattern-card.accent-jade  { --card-accent: #2E6B4A; --card-accent-d: #1F4A33; }
.pattern-card.accent-magenta { --card-accent: var(--c-magenta); --card-accent-d: #99264f; }
.pattern-card.accent-mute  { --card-accent: var(--ink-mute); --card-accent-d: #443C36; }
.pattern-card.accent-violet { --card-accent: var(--c-violet); --card-accent-d: #4A2799; }
.pattern-cards.cols-2 { grid-template-columns: 1fr 1fr; }
.pattern-card h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--card-accent-d);
  line-height: 1.08;
}
.pattern-card h3::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--card-accent);
  flex: none;
}
.pattern-card .pc-body {
  flex: 1;
  background: #FCFAF7;
  border: 1px solid rgba(26, 19, 16, 0.24);
  border-radius: 6px;
  padding: 30px 36px;
  box-shadow: 0 14px 34px -28px rgba(26, 19, 16, 0.4);
  font-size: 25px;
  line-height: 1.4;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   AI TRACK ROADMAP — slide 2 timeline cards (warm port)
   Ported from the "Working safely with AI" deck's .ai-roadmap
   and recoloured onto this deck's warm palette: an ember/burgundy
   focal "today" card, warm paper surfaces, and a warm taupe rail.
   The source deck's cool blue/teal slide background is deliberately
   NOT carried over here — only the card component is reused.
   Each card: a tone dot sitting on the connecting rail (top-left),
   a status label (top-right), a big ghost serif numeral, then the
   month + title pinned to the bottom.
   ============================================================ */
.ai-roadmap {
  position: relative;
  margin-top: 64px;
  width: 100%;
  max-width: 1780px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}
/* The connecting rail, threaded behind the dots, fading at both ends. */
.ai-roadmap::before {
  content: '';
  position: absolute;
  left: 70px;
  right: 70px;
  top: 32px;
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--rail-dash), transparent);
  z-index: 0;
}
.session-card {
  position: relative;
  min-height: 256px;
  padding: 26px 22px 24px;
  border: 1px solid rgba(26, 19, 16, 0.16);
  border-radius: 10px;
  background: #FCFAF7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
/* The dot on the rail */
.session-card::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 22px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  background: rgba(255, 255, 255, 0.85);
  z-index: 2;
}
.session-card .session-status {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.session-card .session-num {
  position: absolute;
  top: 44px;
  left: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.16;
}
.session-card .session-date {
  font-family: var(--font-mono);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.session-card .session-title {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.session-card .session-note {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink-mute);
}

/* Tone tokens: dot colour + a soft wash. Cool dots (blue/jade/violet)
   are allowed as accents; the slide stays warm because the background
   and the focal "today" card are ember/burgundy. */
.session-card.ai-card { --tone: var(--c-violet); --tone-soft: rgba(155, 60, 201, 0.14); }
.session-card.ai-card.tone-orange  { --tone: var(--c-orange);  --tone-soft: rgba(201, 71, 7, 0.16); }
.session-card.ai-card.tone-magenta { --tone: var(--c-magenta); --tone-soft: rgba(216, 54, 110, 0.14); }
.session-card.ai-card.tone-blue    { --tone: var(--c-blue);    --tone-soft: rgba(44, 107, 255, 0.13); }
.session-card.ai-card.tone-jade    { --tone: var(--c-jade);    --tone-soft: rgba(31, 157, 110, 0.14); }
.session-card.ai-card.tone-violet  { --tone: var(--c-violet);  --tone-soft: rgba(155, 60, 201, 0.14); }
.session-card.ai-card.tone-amber   { --tone: var(--c-amber);   --tone-soft: rgba(224, 168, 58, 0.18); }

.session-card.ai-card::before {
  border-color: var(--tone);
  background: var(--tone);
  box-shadow: 0 0 0 5px var(--tone-soft);
}
/* Per-session colour lives in the ghost numeral (light geometry), not in a
   coloured border or top bar — the editorial rule: colour is never chrome. */
.session-card.ai-card .session-num { color: var(--tone); opacity: 0.20; }

/* Forward sessions: a faint tone wash on a neutral frame (no coloured top
   edge). Colour shows only in the dot and the ghost numeral. */
.session-card.upcoming.ai-card {
  background:
    linear-gradient(180deg, var(--tone-soft), rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.6)),
    #FCFAF7;
  border-color: rgba(26, 19, 16, 0.14);
}

/* Past sessions: greyed and clearly behind us, but still real sessions —
   so they keep a quiet, desaturated hint of their tone in the dot (small
   geometry) that sets them apart from the colourless dashed pause. Greyed
   paper and muted text keep them receded; the row reads faded history ->
   bright today -> colourful future. Opaque so the rail does not bleed. */
.session-card.past {
  background: #EFEAE3;
  border-color: rgba(26, 19, 16, 0.13);
}
.session-card.past.ai-card {
  box-shadow: none;
}
.session-card.past.ai-card::before {
  background: color-mix(in srgb, var(--tone) 62%, #8C827A);
  border-color: color-mix(in srgb, var(--tone) 62%, #8C827A);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 16%, transparent);
}
.session-card.past .session-num { color: var(--ink-mute); opacity: 0.18; }
.session-card.past .session-status,
.session-card.past .session-date { color: var(--ink-faint); }
.session-card.past .session-title { color: var(--ink-mute); }

/* Today: the warm dark focal card (ember -> burgundy over ink). */
.session-card.current {
  background:
    linear-gradient(150deg, rgba(201, 71, 7, 0.32), rgba(140, 35, 50, 0.20) 52%, rgba(26, 19, 16, 0) 88%),
    var(--ink);
  border-color: rgba(201, 71, 7, 0.42);
  box-shadow: 0 22px 50px -26px rgba(26, 19, 16, 0.55);
}
.session-card.current::before {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 0 0 6px rgba(201, 71, 7, 0.28);
}
.session-card.current .session-status { color: rgba(244, 239, 234, 0.70); }
.session-card.current .session-date { color: rgba(244, 239, 234, 0.66); }
.session-card.current .session-num { color: #F4EFEA; opacity: 0.22; }
.session-card.current .session-title { color: #F8F4EF; }

/* Summer pause: dashed and quiet. Opaque (not translucent) so the
   connecting rail behind the grid does not bleed through the card — the
   pause reads as a clean break in the timeline. */
.session-card.pause {
  background: #F1EBE4;
  border-style: dashed;
  border-color: var(--rail-dash);
}
.session-card.pause::before {
  background: transparent;
  border-color: var(--ink-faint);
  box-shadow: none;
}
.session-card.pause .session-num { color: var(--ink-mute); }

/* ============================================================
   "WHAT THEY ARE" reveal (theory opener) — show a skill's
   behaviour, then reveal that the skill is just a short markdown
   file. Left panel = what it does, right panel = the actual file
   (a faux editor card), with a connector between. Warm palette.
   ============================================================ */
.reveal-row {
  display: flex;
  align-items: stretch;
  gap: 36px;
  margin-top: 46px;
  max-width: 1720px;
}
.reveal-does {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(26, 19, 16, 0.26);
  padding-top: 26px;
}
.reveal-does .rlabel {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}
.reveal-does .rlabel::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--ember);
  margin-top: 16px;
}
.reveal-does .rtext {
  margin-top: 26px;
  font-size: 30px;
  line-height: 1.42;
  color: var(--ink-soft);
}
.reveal-does .rtext b { font-weight: 700; color: var(--ink); }
.reveal-does .rmut {
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 25px;
  line-height: 1.36;
  color: var(--ink-mute);
}
.reveal-arrow {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.reveal-arrow .ar {
  font-family: var(--font-mono);
  font-size: 56px;
  line-height: 1;
  color: var(--ember);
}
.reveal-arrow .cap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.md-col {
  flex: 1.32;
  display: flex;
  flex-direction: column;
}
.md-file {
  display: flex;
  flex-direction: column;
  background: #FCFAF7;
  border: 1px solid rgba(26, 19, 16, 0.24);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 22px 50px -30px rgba(26, 19, 16, 0.5);
}
.md-file .mf-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(26, 19, 16, 0.12);
  background: #F1EBE4;
}
/* Let the first/last colour bands fill to the card edges, so no paper strip shows above or below */
.md-file div[style*="overflow-y: auto"] { padding-top: 0 !important; padding-bottom: 0 !important; }
.md-file div[style*="overflow-y: auto"] > div:first-child {
  margin-top: 0 !important;
  padding-top: 22px !important;
}
.md-file div[style*="overflow-y: auto"] > div:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 22px !important;
}
.md-file .mf-dots { display: flex; gap: 8px; }
.md-file .mf-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(26, 19, 16, 0.16);
  display: block;
}
.md-file .mf-name {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.md-file pre {
  margin: 0;
  padding: 24px 30px 26px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow: hidden;
}
.md-file pre .fm { color: var(--c-violet); }
.md-file pre .key { color: var(--burgundy); }
.md-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* Walkthrough list (slide 11): one real file shown in full, plus more like it. */
.wf-item {
  border-left: 3px solid var(--ink-faint);
  padding: 2px 0 2px 22px;
}
.wf-item h4 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.wf-item p {
  margin: 0;
  font-size: 23px;
  line-height: 1.32;
  color: var(--ink-soft);
}
.wf-item .tag {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}

/* Slide 4 before/after contrast: without a file (flat, grey) vs with a file
   (warm, lifted). Makes the babysit -> knows-your-project point visual. */
.contrast-row {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-top: 84px;
  max-width: 1700px;
}
.contrast-panel {
  flex: 1;
  border-radius: 12px;
  padding: 34px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
}
.contrast-panel .cp-label {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contrast-panel .cp-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.26;
  letter-spacing: -0.01em;
}
.contrast-panel.without {
  background: rgba(26, 19, 16, 0.04);
  border: 1px solid rgba(26, 19, 16, 0.14);
  box-shadow: inset 0 4px 0 var(--ink-faint);
}
.contrast-panel.without .cp-label { color: var(--ink-mute); }
.contrast-panel.without .cp-text { color: var(--ink-mute); }
.contrast-panel.with {
  background:
    linear-gradient(180deg, rgba(201, 71, 7, 0.08), rgba(255, 255, 255, 0.4) 60%),
    #FCFAF7;
  border: 1px solid color-mix(in srgb, var(--ember) 32%, rgba(26, 19, 16, 0.14));
  box-shadow: inset 0 4px 0 var(--ember), 0 22px 50px -30px rgba(201, 71, 7, 0.5);
}
.contrast-panel.with .cp-label { color: var(--ember); }
.contrast-panel.with .cp-text { color: var(--ink); }

/* ============================================================
   COPILOT BLOCK (slides 9-11): demystify the Microsoft "Copilot"
   brand sprawl, map GitHub Copilot's files 1:1, and place the
   whole ecosystem on a "how much control do you get" spectrum.
   ============================================================ */

/* Slide 9 — "Which Copilot?" : one brand, several products as lanes. */
.cp-lanes { display: flex; flex-direction: column; gap: 20px; margin-top: 42px; max-width: 1760px; }
.cp-lane {
  display: flex; align-items: stretch; gap: 34px;
  border-radius: 10px; padding: 24px 32px;
  background: rgba(26, 19, 16, 0.035);
  border: 1px solid rgba(26, 19, 16, 0.12);
}
.cp-lane .lane-head { flex: 0 0 420px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cp-lane .lane-use {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-mono); font-size: 17px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}
/* Lane colour lives in a small accent square (and the coloured product word
   in .lane-name b), not in a coloured left bar. */
.cp-lane .lane-use::before {
  content: ''; width: 11px; height: 11px; background: var(--lane, var(--ink-faint)); flex: none;
}
.cp-lane .lane-name {
  font-family: var(--font-display); font-size: 33px; font-weight: 700;
  color: var(--ink); line-height: 1.04; letter-spacing: -0.01em;
}
.cp-lane .lane-name b { color: var(--lane, var(--ember)); }
.cp-lane .lane-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.cp-lane .lane-desc { font-family: var(--font-serif); font-style: italic; font-size: 27px; line-height: 1.3; color: var(--ink-soft); }
.cp-tiers { display: flex; gap: 16px; }
.cp-tier { flex: 1; border-radius: 9px; padding: 14px 18px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(26, 19, 16, 0.12); }
.cp-tier .tier-tag {
  display: block; margin-bottom: 5px; font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cp-tier .tier-txt { font-size: 20px; line-height: 1.3; color: var(--ink-soft); }
.cp-tier.paid {
  border-color: rgba(26, 19, 16, 0.12);
  background: linear-gradient(180deg, rgba(201, 71, 7, 0.07), rgba(255, 255, 255, 0.55));
}
.cp-tier.paid .tier-tag { color: var(--ember); }

/* Slide 10 — GitHub Copilot mapping: your file -> GitHub's name for it. */
.map-table {
  margin-top: 40px; max-width: 1760px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(26, 19, 16, 0.14);
}
.map-row { display: flex; align-items: stretch; }
.map-row + .map-row { border-top: 1px solid rgba(26, 19, 16, 0.12); }
.map-row.head { background: rgba(26, 19, 16, 0.05); }
.map-row.head > div {
  font-family: var(--font-mono); font-size: 17px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
  padding: 15px 30px;
}
.map-from, .map-to { padding: 22px 30px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.map-from { flex: 0 0 520px; border-right: 1px solid rgba(26, 19, 16, 0.12); background: rgba(26, 19, 16, 0.025); }
.map-to { flex: 1; }
.map-kind { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); }
.map-sub { font-size: 19px; color: var(--ink-mute); line-height: 1.28; }
.map-file { font-family: var(--font-mono); font-size: 22px; color: var(--ember); font-weight: 600; }
.map-note { font-size: 19px; color: var(--ink-soft); line-height: 1.3; }

/* Slide 11 — the portability spectrum: you hold the file -> behind a GUI. */
.spectrum { margin-top: 48px; max-width: 1780px; }
.spec-bar { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--ember), var(--c-amber) 52%, var(--ink-faint)); }
.spec-axis {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.spec-axis .lo { color: var(--ember); }
.spec-axis .hi { color: var(--ink-mute); }
.spec-stops { display: flex; gap: 26px; margin-top: 30px; }
.spec-stop {
  flex: 1; border-radius: 10px; padding: 24px 28px;
  background: rgba(26, 19, 16, 0.035); border: 1px solid rgba(26, 19, 16, 0.12);
  display: flex; flex-direction: column; gap: 9px;
}
/* Stop colour lives in a small accent square + the mono filename, not in a
   coloured top bar (editorial rule: colour is never card chrome). */
.spec-stop .stop-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.spec-stop .stop-name::before { content: ''; width: 12px; height: 12px; background: var(--stop, var(--ink-faint)); flex: none; }
.spec-stop .stop-file { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.03em; color: var(--stop, var(--ink-mute)); }
.spec-stop .stop-txt { font-size: 21px; line-height: 1.32; color: var(--ink-soft); }

/* Backup slide (Q&A only) — the honest Copilot scorecard: warm strengths,
   grey knocks, same grammar as the slide-4 contrast panels. */
.scorecard { display: flex; gap: 36px; margin-top: 38px; max-width: 1740px; align-items: stretch; }
.score-col { flex: 1; border-radius: 12px; padding: 28px 34px; }
.score-col h4 {
  margin: 0 0 16px; font-family: var(--font-mono); font-size: 19px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.score-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.score-col li {
  font-family: var(--font-serif); font-style: italic; font-size: 25px; line-height: 1.3;
  padding-left: 30px; position: relative;
}
.score-col li::before { content: ''; position: absolute; left: 0; top: 11px; width: 13px; height: 13px; border-radius: 50%; }
.score-col.good {
  background: linear-gradient(180deg, rgba(201, 71, 7, 0.08), rgba(255, 255, 255, 0.4) 60%), #FCFAF7;
  border: 1px solid color-mix(in srgb, var(--ember) 32%, rgba(26, 19, 16, 0.14));
  box-shadow: inset 0 4px 0 var(--ember);
}
.score-col.good h4 { color: var(--ember); }
.score-col.good li { color: var(--ink); }
.score-col.good li::before { background: var(--ember); }
.score-col.bad {
  background: rgba(26, 19, 16, 0.04);
  border: 1px solid rgba(26, 19, 16, 0.14);
  box-shadow: inset 0 4px 0 var(--ink-faint);
}
.score-col.bad h4 { color: var(--ink-mute); }
.score-col.bad li { color: var(--ink-mute); }
.score-col.bad li::before { background: var(--ink-faint); }

/* ----- FILE EXCERPT: an entry quoted from the instruction file -----
   Replaces the tinted card with a coloured left bar (the generated-UI tell, and
   a breach of the editorial-cards rule). A burgundy wash into the pearl, no
   border, no shadow, no bar: the tint is the whole frame. Hierarchy comes from
   the three faces: the rule in the display face, the explanation in the serif,
   mono only for the file metadata, which sits outside the wash. */
.file-excerpt { margin-top: 100px; max-width: 1700px; }
.file-excerpt .fx-label {
  display: flex; justify-content: space-between; gap: 40px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 14px;
}
.file-excerpt .fx-frame {
  /* The wash, not a paper sheet: a burgundy tint into the pearl separates the
     entry from the slide on a compressed screen-share, where a hairline sheet
     can wash out. No border, no bar; the tint is the whole frame. */
  background: color-mix(in srgb, var(--burgundy) 7%, var(--bg-base));
  border: 0;
  border-radius: 6px;
  padding: 44px 52px 46px;
}
.file-excerpt .fx-title {
  font-family: var(--font-display); font-size: 46px; line-height: 1.18; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); max-width: 1500px;
}
.file-excerpt .fx-body {
  margin-top: 22px; font-family: var(--font-serif); font-style: normal; font-size: 31px; line-height: 1.48;
  color: var(--ink-soft); max-width: 1480px;
}
.file-excerpt .fx-md { display: none; }

/* ── Print: no shadows ───────────────────────────────────────────────────
   Chrome's PDF renderer flattens box-shadow into an opaque grey rectangle
   instead of a soft blur, so screenshots and cards print with a slab
   behind them. Drop shadows for print; the hairline borders carry the
   separation on paper. Added 2026-09-03 when exporting the Boye deck. */
@media print {
  * { box-shadow: none !important; }
}

/* ----- Log charts (slides log-ridge, log-calendar, log-verbs) ----- */
.lc-chart{position:relative;}
.lc-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.lc-tip{position:absolute;pointer-events:none;background:var(--ink);color:#F6F1E9;font-family:var(--font-mono);font-size:20px;line-height:1.45;padding:12px 16px;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;opacity:0;transition:opacity .12s;z-index:5;}
.lc-tip.on{opacity:1;}
.lc-tip.below{transform:translate(-50%,14px);}
.lc-tip.side-right{transform:translate(16px,0);}
.lc-tip.side-left{transform:translate(calc(-100% - 16px),0);}
.lc-tip b{font-weight:600;}
.lc-hair{stroke:rgba(26,19,16,.12);stroke-width:1;}
.lc-axisline{stroke:rgba(26,19,16,.26);stroke-width:1;}
.lc-axis{font-family:var(--font-mono);font-size:19px;fill:#7A6C61;letter-spacing:.06em;}
.lc-rowlabel{font-family:var(--font-display);font-weight:700;font-size:26px;fill:var(--ink);}
.lc-rowsub{font-family:var(--font-mono);font-size:17px;fill:#7A6C61;}
.lc-area{fill:var(--burgundy);fill-opacity:.14;}
.lc-line{fill:none;stroke:var(--burgundy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.lc-xh{stroke:var(--ink);stroke-width:1.5;opacity:0;}
.lc-xh.on{opacity:.55;}
.lc-dot{fill:var(--burgundy);stroke:#FCFAF7;stroke-width:2.5;}
.lc-first{fill:var(--ink);}
.lc-cell{stroke:#FCFAF7;stroke-width:2;}
.lc-cell:hover{stroke:var(--ink);}
.lc-bar{fill:var(--burgundy);}
.lc-bar.ctx{fill:#CFC6BB;}
.lc-bart{font-family:var(--font-display);font-size:24px;fill:var(--ink);}
.lc-barv{font-family:var(--font-mono);font-size:19px;fill:#4B423C;}
.lc-legend{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:19px;color:#7A6C61;margin-top:14px;white-space:pre;}
.lc-legend i{display:inline-block;width:22px;height:22px;}
.lc-toggle{display:inline-flex;border:1.5px solid var(--ink);}
.lc-toggle button{font-family:var(--font-display);font-size:24px;background:transparent;color:var(--ink);border:0;padding:8px 22px;cursor:pointer;}
.lc-toggle button[aria-pressed="true"]{background:var(--ink);color:#F6F1E9;}


/* ----- Placard modifier: a tool that has not earned a column yet.
   Added 2026-09-20 for Grok on the tools slide. No wash, a dashed frame,
   and a dated flag instead of a claim: the treatment says "provisional"
   without a badge or a sticker. ----- */
.placard.is-new {
  background: none;
  /* Outline, not border: a border here doubles the column divider on the left
     and adds its own width to the row height (the component is content-box). */
  border: 0;
  outline: 1.5px dashed var(--edt-rule-dash, #A3958A);
  outline-offset: -1px;
}
.placard.is-new .flag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat);
  margin-bottom: 14px;
}
.placard.is-new .take { white-space: normal; }


/* ----- Four-up placards. The component was drawn for three columns at ~590px;
   a fourth drops each to ~445px and everything rewraps taller. Scoped so the
   three-up slides elsewhere in the deck are untouched. Added 2026-09-20. ----- */
.placards.four .placard { padding: 30px 30px 26px; min-height: 545px; }
.placards.four .placard .lab { font-size: 23px; }  /* the deck system value; 20px was too small against 28px bullets */
.placards.four .placard .lab::after { margin-top: 14px; width: 54px; }
.placards.four .placard .idx { font-size: 62px; }
.placards.four .placard .subl { font-size: 20px; margin-top: 12px; }
.placards.four .placard .pbody { font-size: 27px; line-height: 1.42; padding: 20px 0 8px; }
.placards.four .placard .take { font-size: 24px; padding-top: 16px; white-space: normal; }


/* Bullet rows inside four-up placards (2026-09-20): replaces the subline plus
   paragraph. Square marker in the accent's light tone, text in the card's ink. */
.placards.four .plist { flex: 1; padding: 26px 0 8px; }
.placards.four .pitem { position: relative; padding-left: 26px; font-size: 28px; line-height: 1.38; color: var(--edt-ink-soft); }
.placards.four .pitem + .pitem { margin-top: 22px; }
.placards.four .pitem::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 10px; height: 10px; background: var(--cat); }

/* ----- Spotlight on the tools slide (2026-09-21). At rest all four cards are fully
   readable. Pointing at one lifts it onto paper, draws its accent rule across the top,
   and lets the other three recede. A click pins it so the mouse can go elsewhere; a
   second click, a click on another card, or a slide change lets go. Leaving the row
   brings everything back, so a stray pointer never hides content. Restores wait 120ms
   so crossing a divider doesn't flicker. Script at the end of the deck file. ----- */
.placards.spotlight .placard {
  position: relative;
  isolation: isolate;
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s,
    filter 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
    background-color 0.6s ease 0.12s,
    box-shadow 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
/* The accent rule that draws across the top of the lit card */
.placards.spotlight .placard::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--cat);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* A little of the accent colour falling from the top corner, behind the text */
.placards.spotlight .placard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 65% at 0% 0%, color-mix(in srgb, var(--cat) 16%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.placards.spotlight .lab::after { transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.placards.spotlight .idx { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.placards.spotlight .idx.bang { opacity: 0.55; min-width: 44px; text-align: center; }
.placards.spotlight .pitem { transition: color 0.5s ease; }
.placards.spotlight .pitem::before { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.placards.spotlight .pitem:nth-child(2)::before { transition-delay: 0.07s; }
.placards.spotlight .pitem:nth-child(3)::before { transition-delay: 0.14s; }

/* Lit: the card under the pointer, or the pinned one */
.placards.spotlight:not(.is-pinned) .placard:hover,
.placards.spotlight .placard.is-lit {
  z-index: 2;
  transform: translateY(-12px);
  border-left-color: transparent;  /* the dashed divider reads as a tear once the card is lifted */
  background-color: color-mix(in srgb, var(--cat) 4%, #FFFDFA);
  box-shadow:
    0 36px 64px -32px color-mix(in srgb, var(--catd) 55%, transparent),
    0 12px 24px -16px rgba(26, 19, 16, 0.2);
  transition-delay: 0s;
}
/* 2026-09-23: the row's top rule is drawn by each card instead (inset shadow), so it lifts with the card. As a border on
   the row it stayed put and showed through the lifted card's translucent wash. Same shadow count in both states so the
   lift animates. */
.placards.spotlight { border-top-color: transparent; }
.placards.spotlight .placard { box-shadow: inset 0 1px 0 var(--edt-rule), 0 0 0 0 transparent, 0 0 0 0 transparent; }
.placards.spotlight:not(.is-pinned) .placard:hover,
.placards.spotlight .placard.is-lit {
  box-shadow:
    inset 0 1px 0 var(--edt-rule),
    0 36px 64px -32px color-mix(in srgb, var(--catd) 55%, transparent),
    0 12px 24px -16px rgba(26, 19, 16, 0.2);
}
.placards.spotlight:not(.is-pinned) .placard:hover::before,
.placards.spotlight .placard.is-lit::before { transform: scaleX(1); }
.placards.spotlight:not(.is-pinned) .placard:hover::after,
.placards.spotlight .placard.is-lit::after { opacity: 1; }
.placards.spotlight:not(.is-pinned) .placard:hover .lab::after,
.placards.spotlight .placard.is-lit .lab::after { width: 100%; }
.placards.spotlight:not(.is-pinned) .placard:hover .idx,
.placards.spotlight .placard.is-lit .idx { opacity: 0.9; transform: translateY(-3px); }
.placards.spotlight:not(.is-pinned) .placard:hover .pitem,
.placards.spotlight .placard.is-lit .pitem { color: var(--edt-ink); }
.placards.spotlight:not(.is-pinned) .placard:hover .pitem::before,
.placards.spotlight .placard.is-lit .pitem::before { transform: rotate(45deg) scale(1.15); }
/* The surprise card's "!" gives a small start */
.placards.spotlight:not(.is-pinned) .placard:hover .idx.bang,
.placards.spotlight .placard.is-lit .idx.bang { opacity: 1; animation: spotlight-bang 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes spotlight-bang {
  0%   { transform: rotate(0deg) scale(1); }
  35%  { transform: rotate(-10deg) scale(1.35); }
  65%  { transform: rotate(6deg) scale(0.96); }
  100% { transform: translateY(-3px) rotate(0deg) scale(1.08); }
}

/* Receding: the other three */
.placards.spotlight:not(.is-pinned):has(.placard:hover) .placard:not(:hover),
.placards.spotlight.is-pinned .placard:not(.is-lit) {
  opacity: 0.3;
  filter: saturate(0.35);
  transition-delay: 0s;
}

/* ----- Presenter pointer (2026-09-21). A small burgundy dot replaces the system arrow over
   the deck. It eases after the mouse, opens into a ring over links, buttons, and video (not
   the spotlight cards, where it would sit on the text), and fades out after three seconds still, so it's
   there when I point and gone when I talk. Fine pointers only; touch keeps its default.
   Script at the end of the deck file. ----- */
@media (hover: hover) and (pointer: fine) {
  html.has-dot, html.has-dot * { cursor: none !important; }
}
.pointer-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483600;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background-color: color-mix(in srgb, #912338 80%, transparent);
  box-shadow: 0 0 0 2px rgba(255, 253, 250, 0.85), 0 2px 8px rgba(26, 19, 16, 0.22);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition:
    opacity 0.35s ease,
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.pointer-dot.is-on { opacity: 1; }
.pointer-dot.is-ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background-color: color-mix(in srgb, #912338 8%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #912338 70%, transparent), 0 0 0 4px rgba(255, 253, 250, 0.55);
}
.pointer-dot.is-down { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.pointer-dot.is-ring.is-down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

@media (prefers-reduced-motion: reduce) {
  .placards.spotlight .placard,
  .placards.spotlight .placard::before,
  .placards.spotlight .pitem::before { transition-duration: 0.01s; }
  .placards.spotlight .placard.is-lit,
  .placards.spotlight:not(.is-pinned) .placard:hover { transform: none; }
  .placards.spotlight .idx.bang { animation: none !important; }
}

/* ============================================================
   ANIMATED SLIDES: #loop-anim and #graph-anim (2026-09-20).
   three.js canvas (transparent, on the pearl) with HTML labels on top,
   positioned from 3D each frame by loop-graph-anim.js. Labels use the
   deck's three voices; nothing glows, nothing is gradient.
   ============================================================ */
.anim-stage { position: relative; cursor: pointer; flex: none; }
.anim-canvas { position: absolute; left: 0; top: 0; display: block; }
.anim-labels { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.anim-labels .al { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; }
.anim-labels .al b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--ink); letter-spacing: -0.005em; }
.anim-labels .al i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 19px; line-height: 1.35; color: var(--ink-mute); margin-top: 3px; }
.anim-labels .al.right { translate: 0 -50%; }
.anim-labels .al.left { translate: -100% -50%; text-align: right; }
.anim-labels .al.centre { translate: -50% -50%; text-align: center; }
.anim-labels .al.bur b { color: var(--burgundy); }
.anim-labels .al.tag { translate: -50% -100%; font-family: var(--font-mono); font-size: 19px; color: var(--ink); }
.anim-labels .al.tag.chk { translate: -100% -50%; color: var(--ink-mute); }
.no-webgl .anim-labels { display: none; }

/* Loop: steps on the left, stage on the right. The steps are the timeline. */
.anim-wrap.loop { display: grid; grid-template-columns: 520px 1150px; gap: 30px; margin-top: 20px; align-items: start; }
.anim-side { display: flex; flex-direction: column; padding-top: 14px; }
.anim-steps { list-style: none; margin: 0; padding: 0; }
.anim-steps li { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; border-top: 1px solid rgba(26, 19, 16, .26); padding: 18px 0 20px; cursor: pointer; outline: none; }
.anim-steps li:last-child { border-bottom: 1px solid rgba(26, 19, 16, .26); }
.anim-steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--burgundy); }
.anim-steps .n { grid-row: span 2; font-family: var(--font-mono); font-size: 20px; line-height: 1.9; letter-spacing: 0.06em; color: var(--ink-mute); }
.anim-steps .h { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 33px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-mute); }
.anim-steps .d { margin-top: 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.38; color: var(--ink-mute); }
.anim-steps li.on .n, .anim-steps li.on .h { color: var(--ink); }
.anim-steps li.on .d { color: var(--ink-soft); }
.anim-steps li:focus-visible { box-shadow: inset 0 0 0 2px var(--burgundy); }

.anim-pause { align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.anim-pause .ico { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.anim-pause.paused .ico { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent currentColor; }
.anim-pause:hover, .anim-pause:focus-visible { color: var(--ink); outline: none; }

/* Graph: stage full width, the script underneath is the timeline. */
.anim-stage.graph { margin-top: 12px; }
.anim-stage.graph .anim-pause { position: absolute; right: 0; top: 0; margin: 0; z-index: 3; }
.anim-labels .al.nd { translate: -50% -50%; text-align: center; }
.anim-labels .al.nd b { font-size: 23px; }
.anim-labels .al.nd i { font-size: 17px; margin-top: 2px; }
.anim-labels .al.nd.small i { font-size: 18px; }
.anim-labels .al.nd.bur i { color: var(--burgundy); }
.anim-labels .al.nd.inv b { color: #F6F1E9; }
.anim-labels .al.nd.inv i { color: #D9CFC4; }
.anim-labels .al.nd.mutel b { color: var(--ink-mute); }
.anim-labels .al.nd.mutel.lit b { color: var(--ink); }
.anim-labels .al.nd.mutel.lit i { color: var(--burgundy); }
.anim-labels .al.nd .sq { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }
.anim-labels .al.nd .sq u { display: block; width: 11px; height: 11px; border: 1.5px solid #A3958A; box-sizing: border-box; }
.anim-labels .al.nd .sq u.ok { background: var(--accent-pine, #2E6B4A); border-color: #2E6B4A; }
.anim-labels .al.nd .sq u.bad { background: var(--burgundy); border-color: var(--burgundy); }
.anim-labels .al.nd .sq u.fixed { background: #2E6B4A; border-color: var(--burgundy); border-width: 2.5px; }
.anim-labels .al.cnt { translate: -50% -50%; font-family: var(--font-mono); font-size: 18px; color: var(--ink); }
.anim-labels .al.cnt.big b { font-size: 24px; }
.anim-labels .al.hdr { translate: -50% -50%; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

.anim-script { list-style: none; margin: 10px 0 0; padding: 0; max-width: 1700px; }
.anim-script li { position: relative; display: grid; grid-template-columns: 640px 1fr; column-gap: 40px; align-items: center; padding: 7px 0 8px 30px; border-top: 1px solid rgba(26, 19, 16, .14); cursor: pointer; outline: none; }
.anim-script li:first-child { border-top-color: rgba(26, 19, 16, .26); }
.anim-script li::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: #C9BDB1; }
.anim-script li.on::before { background: var(--burgundy); }
.anim-script li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--burgundy); }
.anim-script .c { display: flex; flex-direction: column; }
.anim-script code { font-family: var(--font-mono); font-size: 21px; line-height: 1.45; color: var(--ink-mute); }
.anim-script .g { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.25; color: var(--ink-mute); }
.anim-script li.on code { color: var(--ink); }
.anim-script li.on .g { color: var(--ink); }
.anim-script li:focus-visible { box-shadow: inset 0 0 0 2px var(--burgundy); }
@media print { .anim-pause { display: none; } }
.anim-labels .al.ndr { translate: 0 -50%; text-align: left; }
.anim-labels .al.ndr b { font-size: 23px; }
.anim-labels .al.ndr i { font-size: 17px; margin-top: 2px; }
.anim-labels .al.ndr.mutel b { color: var(--ink-mute); }
.anim-labels .al.ndr.mutel.lit b { color: var(--ink); }
.anim-labels .al.ndr.mutel.lit i { color: var(--burgundy); }
.anim-labels .al.nd.bur b { color: var(--burgundy); }
.anim-labels .al.cnt.r { translate: 0 -50%; }
.anim-labels .al.nd.dr b { font-size: 21px; }
.anim-stage.graph .anim-src { position: absolute; left: 0; top: 4px; z-index: 3; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.02em; color: var(--ink-mute); pointer-events: none; }

/* ----- Animated slides, round two (2026-09-21): shared chapter bar, releases ----- */
.anim-foot { display: grid; grid-template-columns: 1fr 360px; column-gap: 50px; align-items: stretch; margin-top: 14px; max-width: 1700px; }
.anim-chbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 28px; }
.anim-chbar li { position: relative; display: grid; grid-template-columns: 44px 1fr; border-top: 1px solid rgba(26, 19, 16, .26); padding: 14px 0 4px; cursor: pointer; outline: none; }
.anim-chbar li::after { content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--burgundy); }
.anim-chbar .n { grid-row: span 2; font-family: var(--font-mono); font-size: 19px; line-height: 1.75; letter-spacing: 0.06em; color: var(--ink-mute); }
.anim-chbar .h { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 29px; line-height: 1.15; color: var(--ink-mute); }
.anim-chbar .d { margin-top: 4px; font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: var(--ink-mute); }
.anim-chbar li.on .n, .anim-chbar li.on .h { color: var(--ink); }
.anim-chbar li.on .d { color: var(--ink-soft); }
.anim-chbar li:focus-visible { box-shadow: inset 0 0 0 2px var(--burgundy); }
.anim-stage.rb .anim-pause, .anim-stage.gl .anim-pause { position: absolute; right: 0; top: 0; margin: 0; z-index: 3; }

.anim-labels .al.rl { translate: -50% -100%; text-align: center; text-shadow: 0 0 3px #F6F1EB, 0 0 3px #F6F1EB, 0 0 2px #F6F1EB; }
.anim-labels .al.rl b { font-size: 21px; }
.anim-labels .al.rl i { font-size: 16px; margin-top: 1px; }
.anim-labels .al.rl.date b { color: var(--burgundy); font-size: 19px; font-family: var(--font-mono); font-weight: 600; }
.anim-labels .al.rl.date i { font-size: 15px; }
.anim-labels .al.apx { translate: -50% -100%; font-family: var(--font-mono); font-size: 17px; color: var(--ink-mute); text-shadow: 0 0 3px #F6F1EB, 0 0 3px #F6F1EB; }
.anim-labels .al.cntd { translate: -50% -100%; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink); text-shadow: 0 0 3px #F6F1EB, 0 0 3px #F6F1EB; }
.anim-labels .al.mth { translate: -50% 0; font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.06em; color: var(--ink-mute); }
.anim-labels .al.lane b { font-size: 22px; }
.anim-labels .al.lane i { font-size: 16px; }

.rb-tally { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; border-top: 1px solid rgba(26, 19, 16, .26); padding-top: 10px; }
.rb-tally div { display: flex; flex-direction: column; }
.rb-tally b { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rb-tally span { margin-top: 6px; font-family: var(--font-mono); font-size: 18px; color: var(--ink-mute); }
.rb-tally .since b { color: var(--ink); }
.rb-final .rb-tally .since b { color: var(--burgundy); }
.anim-labels .al.rl.date.side { translate: 0 -30%; text-align: left; }
.anim-labels .al.rl.date.side.l { translate: -100% -30%; text-align: right; }

/* ----- Three goals ----- */
.anim-labels .al.gh { translate: -50% -100%; text-align: center; }
.anim-labels .al.gh b { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 30px; letter-spacing: -0.01em; }
.anim-labels .al.gh i { font-size: 18px; margin-top: 4px; }
.anim-labels .al.gs { translate: -50% 0; text-align: center; }
.anim-labels .al.gs b { font-size: 23px; }
.anim-labels .al.gs i { font-size: 18px; }
.anim-labels .al.gs.fin b { color: var(--burgundy); }
.anim-labels .al.gs .sq { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.anim-labels .al.gs .sq u { display: block; width: 14px; height: 14px; border: 1.5px solid #A3958A; box-sizing: border-box; }
.anim-labels .al.gs .sq u.ok { background: #2E6B4A; border-color: #2E6B4A; }
.anim-labels .al.gp { translate: -100% -50%; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink); text-shadow: 0 0 3px #F6F1EB, 0 0 3px #F6F1EB; }
.anim-labels .al.gp.q { font-family: var(--font-serif); font-style: italic; font-size: 38px; line-height: 1; color: var(--burgundy); }
.anim-labels .al.small2 b { font-size: 20px; }
.anim-labels .al.small2 i { font-size: 16px; }
.gl-close { border-top: 1px solid rgba(26, 19, 16, .26); padding-top: 12px; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.25; color: var(--ink); }

/* ----- Ladder zoom ----- */
.anim-labels .al.lz b { font-size: 24px; }
.anim-labels .al.lz i { font-size: 18px; }
.anim-labels .al.lz.inv b { color: #F6F1E9; }
.anim-labels .al.lz.inv i { color: #D9CFC4; }

/* ============================================================
   FOLLOW-ON ANIMATIONS (2026-09-21). CSS/SVG, driven by follow-anim.js.
   Same chapter bar, pause control, and reduced-motion contract as the
   three.js slides. Flat ink, no glow.
   ============================================================ */
.fa-stage { position: relative; cursor: pointer; flex: none; user-select: none; }
.fa-stage * { pointer-events: none; }
.fa-stage .anim-pause { pointer-events: auto; position: absolute; right: 0; top: 0; margin: 0; z-index: 3; }
.anim-wrap.fa { display: grid; grid-template-columns: 520px 1fr; gap: 36px; margin-top: 18px; align-items: start; }
.anim-wrap.fa .fa-stage { width: 1180px; }
.fa-wide { margin-top: 14px; }
.fa-wide .fa-stage { width: 1700px; padding-top: 42px; box-sizing: border-box; }
.fa-card { background: #FCFAF7; border: 2px solid var(--ink); box-sizing: border-box; }
.fa-card.dash { border-style: dashed; border-color: #A3958A; }
.fa-lab { font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.fa-h { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ink); }
.fa-d { font-family: var(--font-display); font-size: 22px; line-height: 1.35; color: var(--ink-soft); letter-spacing: 0; }

/* File gate */
#file-gate .fa-stage { height: 560px; }
.fa-lane { position: relative; height: 560px; }
.fa-trail { position: absolute; left: 70px; top: 268px; height: 2px; background: #C9BDB1; width: 0; }
.fa-token { position: absolute; left: 0; top: 248px; width: 44px; height: 44px; border-radius: 50%; background: var(--burgundy); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -12px rgba(26,19,16,.55); opacity: 0; }
.fa-stop { position: absolute; top: 118px; width: 340px; }
.fa-stop.gate { left: 430px; }
.fa-stop.title { left: 800px; }
.fa-stop .fa-h { font-size: 26px; }
.fa-stop .fa-d { font-size: 20px; line-height: 1.4; color: var(--ink-soft); }
.fa-gate { padding: 22px 24px 24px; }
.fa-gate.hit { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(145,35,56,.18); }
.fa-title-space { padding: 22px 24px 24px; }
.fa-title-space .space { display: inline-block; min-width: 22px; height: 0.85em; border-bottom: 3px solid var(--burgundy); }
.fa-title-space .fa-d { display: block; }
.fa-title-space.kept { border-color: var(--burgundy); }
.fa-flag { position: absolute; left: 430px; top: 430px; max-width: 300px; opacity: 0; }
.fa-pair { position: absolute; top: 430px; width: 210px; padding: 14px 16px; opacity: 0; }
.fa-pair.c { left: 40px; }
.fa-pair.x { left: 800px; }

/* Racetrack */
#racetrack-run .fa-stage { height: 480px; }
.fa-rt { position: relative; width: 1680px; height: 430px; margin: 0 auto; }
.fa-rt svg { position: absolute; inset: 0; width: 1680px; height: 430px; overflow: visible; }
.fa-rt-seat { position: absolute; width: 300px; height: 168px; top: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: linear-gradient(180deg,#fff 0%,#FCFAF7 100%); border: 1px solid rgba(26,19,16,.12); border-radius: 16px; }
.fa-rt-seat.l { left: 70px; }
.fa-rt-seat.r { left: 1310px; }
.fa-rt-seat.awake { border-color: var(--burgundy); box-shadow: 0 18px 40px -28px rgba(26,19,16,.5); }
.fa-rt-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--burgundy); margin-bottom: 4px; }
.fa-rt-mem { position: absolute; left: 530px; top: 28px; width: 620px; height: 374px; border-radius: 22px; background: linear-gradient(180deg,#fff 0%,#FCFAF7 100%); border: 1px solid rgba(140,35,50,.2); padding: 28px 36px 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.fa-slip { font-family: var(--font-mono); font-size: 22px; line-height: 1.45; color: var(--ink); }
.fa-slip b { font-weight: 600; }
.fa-done { margin-top: 16px; font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy); opacity: 0; }
.fa-rt-mem .fa-slip:nth-child(n+2) { opacity: 0; }

/* Cut file */
#file-cut-anim .fa-stage { height: 560px; }
.fa-cut { position: relative; height: 560px; display: grid; grid-template-columns: 1fr 340px; gap: 36px; }
.fa-filebox { position: relative; border: 2px solid var(--ink); background: #FCFAF7; padding: 22px 28px 28px; overflow: hidden; }
.fa-filebox pre { margin: 0; font-family: var(--font-mono); font-size: 22px; line-height: 1.55; color: var(--ink); white-space: pre; }
.fa-hatch { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: repeating-linear-gradient(135deg, rgba(145,35,56,.28) 0 4px, transparent 4px 12px); border-top: 3px solid var(--burgundy); }
.fa-rest.lost { color: #A3958A; }
.fa-sidebit { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.fa-blame, .fa-drop { opacity: 0; }

/* Sources vanish */
#sources-vanish .fa-stage { height: 560px; }
.fa-vanish { display: grid; grid-template-columns: 1fr 420px; gap: 48px; height: 520px; }
.fa-quotes { position: relative; border: 2px solid var(--ink); background: #FCFAF7; padding: 22px 30px; }
.fa-qrow { position: relative; min-height: 78px; border-top: 1px solid rgba(26,19,16,.16); padding: 12px 0; }
.fa-qrow:first-of-type { border-top: 0; }
.fa-quote, .fa-blank { position: absolute; left: 0; right: 0; top: 12px; font-family: var(--font-mono); font-size: 21px; line-height: 1.45; color: var(--ink); }
.fa-blank { color: var(--burgundy); opacity: 0; }
.fa-shot { border-radius: 14px; background: #0B0B0B; color: #F3ECE4; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.fa-shot .big { font-family: var(--font-display); font-size: 110px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: #fff; }

/* Window splits */
#window-splits .fa-stage { height: 590px; }
.fa-split { display: flex; flex-direction: column; padding-top: 8px; }
.fa-you-stay { text-align: center; margin-bottom: 14px; }
.fa-you-stay.last { color: var(--burgundy); }
.fa-one { position: relative; padding: 22px 24px 20px; background: var(--ink); color: #F6F1E9; min-height: 148px; box-sizing: border-box; }
.fa-one .fa-h, .fa-coord-copy .fa-h { color: #F6F1E9; }
.fa-one .fa-d, .fa-coord-copy .fa-d { color: #C9BFB5; }
.fa-one-copy { position: relative; }
.fa-coord-copy { position: absolute; left: 24px; right: 24px; top: 22px; opacity: 0; }
.fa-meter { margin-top: 16px; height: 8px; background: #3A322E; }
.fa-meter-fill { height: 8px; width: 0; background: var(--burgundy); }
.fa-one.full { box-shadow: inset 0 0 0 3px var(--burgundy); }
.fa-workers { display: flex; gap: 16px; margin-top: 20px; }
.fa-worker { flex: 1; padding: 18px 20px; opacity: 0; }

/* Laptop: open = screen toward the room. Closed = a real clamshell, 3/4 view. */
#laptop-keeps-going .fa-stage { height: 590px; }
.fa-lap { display: grid; grid-template-columns: 820px 1fr; gap: 70px; height: 540px; align-items: center; }
.fa-laptop { width: 760px; height: 460px; position: relative; }
.fa-open-view, .fa-shut-view { position: absolute; inset: 0; }
.fa-open-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  perspective: 1200px;
}
.fa-lid {
  transform-origin: 50% 100%; transform-style: preserve-3d;
  width: 640px; height: 360px; padding: 16px;
  background: #1A1613; border-radius: 18px 18px 8px 8px;
  box-shadow: 0 18px 40px -24px rgba(26,19,16,.45);
}
.fa-screen { width: 100%; height: 100%; background: #FCFAF7; border-radius: 8px; padding: 22px; box-sizing: border-box; }
.fa-base-bar {
  width: 680px; height: 22px; margin-top: -2px;
  background: linear-gradient(180deg, #3A342F, #2A2622);
  border-radius: 0 0 12px 12px;
}
.fa-shut-view {
  display: flex; align-items: center; justify-content: center;
  perspective: 1100px; opacity: 0;
}
.fa-clamshell {
  width: 540px; height: 340px; position: relative;
  transform-style: preserve-3d;
  transform: rotateX(36deg) rotateZ(-32deg);
  filter: drop-shadow(18px 28px 26px rgba(26, 19, 16, 0.34));
}
.fa-shell-bottom {
  position: absolute; inset: 6px -3px -4px -3px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2A2622, #1A1613);
  transform: translateZ(0);
}
.fa-shell-top {
  position: absolute; inset: 0;
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,0.14), transparent 46%),
    linear-gradient(180deg, #746C64 0%, #4E4740 40%, #35312C 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(0,0,0,0.2);
  transform: translateZ(24px);
}
.fa-cam {
  position: absolute; top: 16px; left: 50%; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%;
  background: #1A1613;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.16), inset 0 0 0 2px #2A2622;
}
.fa-shell-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) translateZ(2px);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #5A534C 0 12px, #2A2622 12px 16px, #1A1613 16px 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.fa-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--burgundy);
  box-shadow: 0 0 8px var(--burgundy);
}
.fa-shell-side {
  position: absolute; top: 10px; bottom: 8px; right: 0; width: 18px;
  transform-origin: 100% 50%;
  transform: rotateY(90deg) translateZ(2px);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #4A433C 0 8px, #1A1613 8px 100%);
}
.fa-cloud { position: relative; height: auto; min-height: 280px; padding: 22px 24px 18px; opacity: 0.72; overflow: hidden; }
.fa-person-gate { opacity: 0; }
.fa-cloud.live { border-color: var(--burgundy); }
.fa-orbit { position: relative; height: 80px; margin-top: 18px; opacity: 0.2; }
.fa-orbit-svg { position: absolute; inset: 0; width: 100%; height: 80px; }
.fa-bead { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--burgundy); }

/* Two axes */
#two-axes-land .fa-stage { height: 540px; }
.fa-axes { display: grid; grid-template-columns: 44px 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 16px 24px; height: 500px; }
.fa-axes .fa-cell { min-height: 0; padding: 20px 24px; }
.fa-axes .fa-cell:not(.hole) { opacity: 0; }
.fa-cell.hole { border: 2px solid var(--burgundy); background: transparent; opacity: 0.35; }
.fa-cell.hole-on { box-shadow: inset 0 0 0 1px var(--burgundy); }
.fa-cell.landed { background: #FCFAF7; }

/* Blind spot */
#blind-spot-anim .fa-stage { height: 500px; }
.fa-blind { position: relative; width: 1180px; height: 500px; }
.fa-box-a, .fa-box-b { position: absolute; width: 340px; padding: 22px 24px; top: 150px; }
.fa-box-a { left: 40px; }
.fa-box-b { left: 800px; opacity: 0; }
.fa-fail, .fa-catch { opacity: 0; }
.fa-blind svg { position: absolute; inset: 0; width: 1180px; height: 500px; overflow: visible; }
.fa-fail, .fa-catch { position: absolute; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fa-fail { left: 40px; top: 360px; color: var(--burgundy); font-size: 22px; }
.fa-catch { left: 800px; top: 360px; color: #1F4A33; font-size: 22px; }

@media print {
  .fa-stage { cursor: default; }
}

/* ============================================================
   LANE TIMELINES (2026-09-22): "Since 2023" and "June to September".
   Drawn by lane-timeline.js from the JSON in each slide. Three lanes,
   each in its own accent (models slate, tools ochre, paradigm shifts
   burgundy). Bands shade the years or months behind the lanes. A
   playhead sweeps in on arrival; pointing at a lane lights it and lets
   the other two recede, like the tools slide.
   ============================================================ */
.xtl { margin-top: 26px; max-width: 1760px; }
.xtl-chips { display: flex; gap: 12px; align-items: center; }
.xtl-chips button {
  font: 600 19px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1.5px solid rgba(26, 19, 16, 0.22);
  border-radius: 999px;
  padding: 11px 20px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.xtl-chips button:hover { border-color: rgba(26, 19, 16, 0.5); }
.xtl-chips button.on { background: var(--ink); border-color: var(--ink); color: #FCFAF7; }
.xtl-chips .xtl-replay { margin-left: auto; color: var(--ink-mute); border-style: dashed; }

.xtl-board { position: relative; width: 100%; margin-top: 20px; padding-top: 50px; }
/* Slide 14: one label tier more than the slide has room for; won back from the gaps. */
.xtl.tight { margin-top: 6px; }
.xtl.tight .xtl-board { margin-top: 12px; padding-top: 40px; }
.xtl.tight .xtl-detail { margin-top: 12px; }
.xtl-axis { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.xtl-band { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(26, 19, 16, 0.2); }
.xtl-band.alt { background: rgba(26, 19, 16, 0.03); }
.xtl-band-label { position: absolute; top: 10px; left: 12px; font: 600 20px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-mute); }

.xtl-lane { position: relative; z-index: 1; display: flex; transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s, filter 0.55s ease 0.1s; }
.xtl-lane + .xtl-lane { border-top: 1px solid rgba(26, 19, 16, 0.1); }
.xtl-lname {
  flex: none; width: 230px; padding: 0 20px 0 0; margin: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.xtl-lname-text { font: 700 27px/1.1 var(--font-display); color: var(--lane); }
.xtl-lname-count { font: 16px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-mute); }
.xtl-track { position: relative; flex: none; }
.xtl-line {
  position: absolute; left: 0; right: 0; height: 3px; margin-top: -1.5px;
  background: var(--lane); opacity: 0.5; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, height 0.4s ease;
}
.xtl-lane.drawn .xtl-line, .xtl.shown .xtl-line { transform: scaleX(1); }

.xtl-dot {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--lane); border-radius: 50%;
  box-shadow: 0 0 0 4px #F6F3EE;
  opacity: 0; transform: scale(0.2);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default; z-index: 2;
}
.xtl-lane[data-lane="tools"] .xtl-dot { border-radius: 4px; }
.xtl-lane[data-lane="shifts"] .xtl-dot { background: #F6F3EE; border: 4px solid var(--lane); width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; }
.xtl-stem { position: absolute; width: 1.5px; margin-left: -0.75px; background: var(--lane); opacity: 0; transition: opacity 0.4s ease; }
.xtl-label {
  position: absolute; white-space: nowrap; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  padding: 2px 8px 3px;
  border-radius: 8px;
  background: color-mix(in srgb, #F6F3EE 86%, transparent);  /* lines and stems pass behind the text */
  z-index: 1;
}
.xtl-label[data-tier^="-"] { transform: translateY(-6px); }
.xtl-name { font: 600 21px/1.08 var(--font-display); color: var(--ink); transition: color 0.25s ease; }
.xtl-date { font: 15px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-mute); }
.xtl-dot.in, .xtl.shown .xtl-dot { opacity: 1; transform: scale(1); }
.xtl-label.in, .xtl.shown .xtl-label { opacity: 1; transform: none; }
.xtl-stem.in, .xtl.shown .xtl-stem { opacity: 0.32; }
.xtl-dot.hot { transform: scale(1.45); }
.xtl-label.hot .xtl-name { color: var(--lane); }

/* Focus: one lane lit, the others recede */
.xtl[data-focus]:not([data-focus=""]) .xtl-lane:not(.lit) { opacity: 0.2; filter: saturate(0.3); transition-delay: 0s; }
.xtl-lane.lit .xtl-line { opacity: 0.95; height: 4px; margin-top: -2px; }
.xtl-dot.pop { animation: xtl-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.xtl-label.pop { animation: xtl-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes xtl-pop { 0% { transform: scale(0.4); } 55% { transform: scale(1.55); } 100% { transform: scale(1); } }
@keyframes xtl-rise { 0% { opacity: 0.2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* The edge (last checked) and the playhead */
.xtl-edge { position: absolute; top: 0; bottom: 0; z-index: 0; border-left: 2px solid var(--ink); pointer-events: none; }
.xtl-edge-label { position: absolute; top: 8px; right: 10px; white-space: nowrap; font: 600 18px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.xtl-head {
  position: absolute; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--burgundy); opacity: 0; pointer-events: none;
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--burgundy) 35%, transparent);
  transition: opacity 0.5s ease;
}
.xtl-head.run { opacity: 1; }

/* Detail line under the board */
.xtl-detail { margin-top: 18px; min-height: 40px; display: flex; align-items: baseline; gap: 16px; font: 26px/1.4 var(--font-mono); color: var(--ink-mute); }
.xtl-detail.on { font: 27px/1.35 var(--font-display); color: var(--ink); }
.xtl-detail-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-2px); }
.xtl-detail-date { flex: none; font: 600 19px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; }
.xtl-detail-name { flex: none; font-weight: 700; }
.xtl-detail-what { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .xtl-line, .xtl-dot, .xtl-label, .xtl-lane { transition-duration: 0.01s; }
  .xtl-dot.pop, .xtl-label.pop { animation: none; }
}

/* Roomier labels where the timeline has the space (since ChatGPT, 2026-09-22) */
.xtl.roomy .xtl-name { font-size: 23px; }
.xtl.roomy .xtl-date { font-size: 16px; }
.xtl.roomy .xtl-dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.xtl.roomy .xtl-lane[data-lane="shifts"] .xtl-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* Release rush (2026-09-22). Density of the ChatGPT-timeline landmarks.
   Flat ink, the same three colours as the lanes on the slide before. */
.rush { position: relative; width: 1150px; height: 520px; cursor: pointer; user-select: none; }
.rush-legend { display: flex; gap: 22px; align-items: center; }
.rush-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.rush-legend i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.rush-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.rush-gap { text-align: right; min-width: 280px; min-height: 78px; }
.rush-gap b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 0.9; letter-spacing: -0.03em; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.rush-gap i { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.rush-field { position: relative; height: 220px; border-bottom: 2px solid var(--ink); }
.rush-years { position: absolute; inset: 0; pointer-events: none; }
.rush-year { position: absolute; top: 6px; }
.rush-year b { display: block; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.12em; color: var(--ink-mute); font-weight: 500; }
.rush-count { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 28px; }
.rush-dot { position: absolute; bottom: 14px; width: 16px; height: 16px; border-radius: 50%; opacity: 0; }
.rush-name { position: absolute; bottom: 2px; transform: translateX(-50%); font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; opacity: 0; }
.rush-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--burgundy); opacity: 0; pointer-events: none; }
.rush-note { margin-top: 12px; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; color: var(--ink-mute); }

/* ============================================================
   EVERY RELEASE, ONE DOT EACH (2026-09-22). Canvas drawn by
   release-drumbeat.js; the lane names and counters are HTML over it.
   Chips reuse the lane timeline's .xtl-chips.
   ============================================================ */
.drum { margin-top: 26px; max-width: 1760px; }
.drum-ticker { flex: none; width: 640px; margin-left: 28px; margin-right: 18px; text-align: right; font: 600 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }  /* fixed width: Replay stays put while the date runs */
.drum-board { position: relative; margin-top: 18px; }
.drum-board canvas { display: block; }
.drum-lane { position: absolute; left: 0; width: 250px; display: flex; flex-direction: column; justify-content: center; gap: 6px; pointer-events: none; }
.drum-lane-name { font: 700 30px/1.1 var(--font-display); color: var(--lane); }
.drum-count { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font: 24px/1.2 var(--font-mono); color: var(--ink-mute); }
.drum-count b { font: 700 48px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 6px; }
.drum-sub { font: 15px/1.35 var(--font-mono); color: var(--ink-mute); }
.drum-detail { margin-top: 10px; min-height: 90px; font: 26px/1.4 var(--font-mono); color: var(--ink-mute); }  /* two rows on hover: the facts, then the change; height reserved so the closer never shifts (2026-09-23) */
.drum-l1 { display: flex; align-items: center; gap: 12px; font: 600 26px/1.4 var(--font-mono); color: var(--ink-mute); }
.drum-l2 { margin-top: 6px; font: 28px/1.3 var(--font-display); color: var(--ink); }
.drum-detail code { font: 600 24px/1 var(--font-mono); color: var(--ink-soft); }
.drum-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-1px); }
.drum-closer { margin-top: 14px; font-size: 38px; line-height: 1.3; color: var(--ink); }
.drum-feats { font: 17px/1.3 var(--font-mono); color: var(--ink-mute); }
.drum-feats b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.drum-sub:empty { display: none; }

/* ============================================================
   Shift strips (2026-09-22). The paradigm shifts, taken off the
   two lane timelines: one column per shift, evenly spaced (order,
   not scale), a dot on a line, and a plain-English row below.
   On arrival the line draws and the columns follow it.
   ============================================================ */
.shifts { margin-top: 80px; max-width: 1780px; }
.sh-top, .sh-bot { display: grid; grid-template-columns: repeat(var(--n), 1fr); column-gap: 36px; }
.sh-top { position: relative; }
.sh-top::before { content: ""; position: absolute; left: 0; right: 0; top: 50px; height: 2px; background: var(--burgundy); opacity: 0.45; transform-origin: left; }
.sh-when { font: 600 20px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--burgundy); }
.sh-dot { position: relative; width: 26px; height: 26px; margin: 16px 0 22px; border-radius: 50%; background: #F6F3EE; border: 5px solid var(--burgundy); box-sizing: border-box; }
.sh-name { font: 700 31px/1.15 var(--font-display); color: var(--ink); }
.sh-by { margin-top: 10px; font: 19px/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-mute); }
.sh-mid { margin: 48px 0 26px; padding-top: 16px; border-top: 1px solid rgba(26, 19, 16, 0.26); font: 600 20px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.sh-bot { align-items: stretch; }
/* Cards: a bold lead to skim, one line to read. The tint deepens left to right: each shift hands over more. */
.sh-you { padding: 20px 20px 24px; border-top: 4px solid var(--burgundy); border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--burgundy) calc(4% + var(--i) * 2.2%), #FCFAF7); }
.sh-you b { display: block; font: 700 29px/1.12 var(--font-display); color: var(--ink); }
.sh-you span { display: block; margin-top: 10px; font: 500 24px/1.3 var(--font-serif); color: var(--ink-soft); }  /* upright: explanations, not a spoken line (2026-09-23) */
section[data-deck-active] .sh-top::before { animation: sh-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) both; }
section[data-deck-active] .sh-top > div { animation: sh-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(0.15s + var(--i) * 0.26s); }
section[data-deck-active] .sh-bot > div { animation: sh-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(0.35s + var(--i) * 0.26s); }
@keyframes sh-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  section[data-deck-active] .sh-top::before, section[data-deck-active] .sh-top > div, section[data-deck-active] .sh-bot > div { animation: none; }
}

/* Two-lane timelines (2026-09-22): the shifts moved to their own slides, so each lane gets the room. */
.xtl.big .xtl-board { margin-top: 28px; }
.xtl.big .xtl-lname-text { font-size: 34px; }
.xtl.big .xtl-lname-count { font-size: 18px; }
.xtl.big .xtl-name { font-size: 28px; }
.xtl.big .xtl-date { font-size: 18px; }
.xtl.big .xtl-label { gap: 5px; }
.xtl.big .xtl-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.xtl.big .xtl-line { height: 4px; margin-top: -2px; }

/* Shift strips, calmer (2026-09-22): vendor and gloss wait for a hover; the others recede. */
.sh-name { white-space: nowrap; }
.sh-by, .sh-you span { opacity: 0; transition: opacity 0.3s ease; }
.shifts .sh-top > div, .shifts .sh-bot > div { transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.shifts.hovering .sh-top > div:not(.hot), .shifts.hovering .sh-bot > div:not(.hot) { opacity: 0.28; }
.shifts .hot .sh-by, .shifts .sh-you.hot span { opacity: 1; }
.shifts .sh-you.hot { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(26, 19, 16, 0.12); }
.shifts .sh-top > div.hot .sh-dot { background: var(--burgundy); }
.sh-you b { font-size: 31px; }
/* The row label, louder: it is the point of the slide. */
.sh-mid { display: flex; align-items: center; gap: 18px; margin: 44px 0 22px; padding-top: 0; border-top: 0; font: 600 26px/1 var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }  /* sentence case, no bar: the uppercase eyebrow read as a template tell (2026-09-23) */
.sh-mid::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--burgundy) 35%, transparent); }
/* Shift strips, rhythm (2026-09-22): the vendor floats under the name instead of holding a line open, and the
   strip sits centred between the title and the closer, so the gaps above and below it match. */
.shifts { margin-top: auto; margin-bottom: 0; }
.sh-top > div { position: relative; }
.sh-by { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin-top: 0; }
.sh-dot { margin: 18px 0 20px; }
.sh-mid { margin: 64px 0 24px; }
.sh-top, .sh-bot { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.sh-name { font-size: 29px; }
/* The line starts at the first dot's centre, and dimmed rings stay solid (colour, not opacity), so the line never shows through. */
.sh-top::before { left: 13px; }
.shifts.hovering .sh-top > div:not(.hot) { opacity: 1; }
.shifts.hovering .sh-top > div:not(.hot) > :not(.sh-dot) { opacity: 0.28; }
.sh-top > div > * { transition: opacity 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; }
.shifts.hovering .sh-top > div:not(.hot) .sh-dot { border-color: color-mix(in srgb, var(--burgundy) 30%, #F6F3EE); }
/* More air between the two rows and inside the top row (2026-09-22). */
.sh-dot { margin: 22px 0 26px; }
.sh-mid { margin: 96px 0 30px; }
/* Slide 15 has no closer (2026-09-22): the strip sits exactly where slide 14's does, so nothing jumps between them. */
#shifts-2 .shifts { margin-top: 95px; margin-bottom: 0; }

/* ============================================================
   Same bets, two trial visuals (2026-09-22)
   ============================================================ */
/* Same bets as dots: the grid with the text taken out, product names on hover. */
.gdots { margin-top: auto; display: grid; grid-template-columns: 520px repeat(3, 1fr); align-items: center; row-gap: 0; max-width: 1780px; }
.gd-h { padding-bottom: 22px; text-align: center; font: 600 24px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.gd-bet { padding: 34px 0; border-top: 1px solid rgba(26, 19, 16, 0.2); font: italic 600 46px/1.1 var(--font-serif); color: var(--ink); }
.gd-bet small { display: block; margin-top: 10px; font: 22px/1.3 var(--font-mono); font-style: normal; color: var(--ink-mute); }
.gd-c { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid rgba(26, 19, 16, 0.2); }
.gd-c i { width: 62px; height: 62px; border-radius: 50%; background: var(--burgundy); box-sizing: border-box; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gd-c.part i { background: transparent; border: 6px solid var(--burgundy); }
.gd-c span { position: absolute; bottom: 12px; left: 8px; right: 8px; text-align: center; font: 21px/1.25 var(--font-display); color: var(--ink-soft); opacity: 0; transition: opacity 0.3s ease; }
.gd-c:hover i { transform: scale(1.12) translateY(-12px); }
.gd-c:hover span { opacity: 1; }
section[data-deck-active] .gd-c i { animation: gd-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(0.3s + var(--k) * 0.12s); }
@keyframes gd-pop { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { section[data-deck-active] .gd-c i { animation: none; } }

/* The comparison slide's hover: the week's actual change, on its own line (2026-09-22). */
.drum-note { display: block; margin-top: 8px; font: 26px/1.35 var(--font-display); color: var(--ink); }
.drum-note code { margin-right: 10px; font-size: 24px; color: var(--ink-mute); }
/* Same bets dots, more air on hover (2026-09-22): taller rows, the dot lifts further, the name sits lower. */
.gd-bet { padding: 46px 0; }
.gd-c span { bottom: 10px; }
.gd-c:hover i { transform: scale(1.08) translateY(-26px); }
/* The name sits a fixed distance under the lifted dot, not at the bottom of the row. */
.gd-c span { top: calc(50% + 30px); bottom: auto; }
.gd-c:hover i { transform: scale(1.08) translateY(-20px); }
.shifts.hovering .sh-top > div:not(.hot) > .sh-by { opacity: 0; }
/* Line through the dot centres: .sh-when 20px + .sh-dot margin 22px + half of 26px = 55px, minus half the 2px line. */
.sh-top::before { top: 54px; }