/* =========================================================
   SUPER HI-FI · Cumulus Acquisition Deck
   Editorial media-brand aesthetic. Black ink, warm ivory,
   signal-amber accent. Built to feel like a modern publication.
   ========================================================= */

:root{
  --ink:#0a0a0a;
  --ink-2:#171717;
  --ink-chapter:#201c15;  /* chapter-cover dark: warm charcoal, distinct from the near-black cover */
  --ivory:#f5f1e8;
  --ivory-2:#eee6d3;
  --ivory-3:#e4d9bf;
  --paper:#faf7ef;
  --rule:#1a1a1a;
  --rule-soft:rgba(10,10,10,.14);
  --rule-softer:rgba(10,10,10,.08);
  --mute:#6a6659;
  --mute-2:#8a8678;
  --signal:#ff5a1f;       /* broadcast orange — primary accent */
  --signal-2:#ffb347;     /* warm amber */
  --signal-dim:rgba(255,90,31,.12);
  --ok:#1f6b3a;
  --warn:#b2440b;

  /* type */
  --serif:'Fraunces', 'GT Sectra', 'Canela', 'Times New Roman', serif;
  --display:'Fraunces', serif;
  --sans:'Inter Tight', 'Söhne', 'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:#0a0a0a; }
body{ font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

deck-stage{ --deck-stage-bg:#0a0a0a; }

/* ---------- Slide base ---------- */
section.slide{
  position:relative;
  width:1920px; height:1080px;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  font-family:var(--sans);
}

.slide.dark{ background:var(--ink); color:var(--ivory); }
.slide.ivory{ background:var(--ivory); color:var(--ink); }

/* ---------- Chrome (masthead + footer) ---------- */
.masthead{
  position:absolute; top:7px; left:0; right:0;
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 80px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.slide.dark .masthead{ color:var(--ivory); }
.masthead .mh-left{ display:flex; align-items:center; gap:24px; }
.masthead .mh-logo{
  display:inline-flex; align-items:center;
  font-family:var(--display); font-weight:600; font-style:italic;
  font-size:22px; letter-spacing:-0.01em; text-transform:none;
}
.masthead .mh-logo img{ height:72px; width:auto; display:block; }
.masthead .mh-logo em{ color:var(--signal); font-style:normal; font-weight:700;}
.masthead .mh-divider{ width:1px; height:22px; background:var(--rule-soft);}
.slide.dark .masthead .mh-divider{ background:rgba(245,241,232,.2);}
.masthead .mh-chapter{ font-weight:500; }
.masthead .mh-right{ display:flex; align-items:center; gap:28px; font-variant-numeric:tabular-nums; }
.masthead .mh-right .mh-num{ font-family:var(--mono); font-weight:500; }

.footline{
  position:absolute; left:80px; right:80px; bottom:32px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}
.slide.dark .footline{ color:rgba(245,241,232,.45); }
.footline .fl-rule{ flex:1; height:1px; background:currentColor; opacity:.3; margin:0 24px;}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--signal);
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:var(--signal);
}
.eyebrow.mute{ color:var(--mute); }
.eyebrow.mute::before{ background:var(--mute); }

/* Rebalance space around the headline: push h1 down (via eyebrow bottom margin)
   and pull content back up (via shorter h1 bottom margin) so the gap above and below
   the headline are roughly equal, without moving the eyebrow or the body content. */
.stage > .eyebrow{ margin-bottom:40px; }
.stage > .h-1{ margin-bottom:27px; }

/* ---------- Typography ---------- */
.h-display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-0.035em;
  line-height:0.92;
  font-size:clamp(80px, 8vw, 180px);
}
.h-display em{ font-style:italic; font-weight:300; }

/* Two-size h-1 scale (was 18 inline variants). Default 80px; .compact 72px. */
.h-1{
  font-family:var(--display); font-weight:400;
  font-size:80px; line-height:1.02; letter-spacing:-0.028em;
}
.h-1 em{ font-style:italic; font-weight:300; }
.h-1.compact{ font-size:72px; line-height:1.04; letter-spacing:-0.025em; }

.h-2{
  font-family:var(--display); font-weight:400;
  font-size:84px; line-height:1.0; letter-spacing:-0.028em;
}
.h-2 em{ font-style:italic; font-weight:300; }

.h-3{
  font-family:var(--display); font-weight:500;
  font-size:56px; line-height:1.05; letter-spacing:-0.022em;
}

.h-kicker{
  font-family:var(--sans); font-weight:600;
  font-size:22px; letter-spacing:-0.01em; line-height:1.3;
}

.lede{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:40px; line-height:1.2; letter-spacing:-0.015em;
  color:var(--ink-2);
}
.slide.dark .lede{ color:rgba(245,241,232,.82); }

.body{
  font-family:var(--sans); font-weight:400;
  font-size:22px; line-height:1.5; letter-spacing:-0.005em;
  color:var(--ink-2);
  text-wrap:pretty;
}
.slide.dark .body{ color:rgba(245,241,232,.78); }
.body-sm{ font-size:18px; line-height:1.5; color:var(--mute); }
.slide.dark .body-sm{ color:rgba(245,241,232,.55); }

.pull{ font-family:var(--display); font-style:italic; font-weight:300; font-size:64px; line-height:1.1; letter-spacing:-0.02em; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; }
.big-stat{
  font-family:var(--display); font-weight:500;
  font-size:140px; line-height:0.9; letter-spacing:-0.04em;
}
.big-stat sub{ font-size:.35em; vertical-align:super; font-weight:400; letter-spacing:0; }
.big-stat .unit{ font-size:.4em; font-weight:400; letter-spacing:0; margin-left:.04em; color:var(--mute); }

.uppercase{ text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-family:var(--mono); }

/* ---------- Rules & dividers ---------- */
.rule{ height:1px; background:var(--rule); opacity:.9; }
.slide.dark .rule{ background:var(--ivory); opacity:.5; }
.rule-thin{ height:1px; background:var(--rule-soft);}
.slide.dark .rule-thin{ background:rgba(245,241,232,.18);}

/* ---------- Layout helpers ---------- */
/* Stage inset: 72px masthead + 32px breathing room. Bottom: 32px footline + 40px gutter. */
.stage{
  position:absolute; inset:104px 80px 72px 80px;
  display:flex; flex-direction:column;
  /* Cinematic scale+blur animation on the body only, so the masthead stays anchored. */
  transform:scale(1.012); transform-origin:50% 50%;
  filter:blur(2px);
  transition:transform 820ms cubic-bezier(.22,.61,.36,1), filter 620ms ease;
  will-change:transform, filter;
}
.slide[data-deck-active] .stage{
  transform:scale(1);
  filter:blur(0);
}
.stage.center{ align-items:center; justify-content:center; text-align:center; }
.stage.tight{ inset:104px 80px 64px 80px; }

.col-2{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.col-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; }
.col-12{ display:grid; grid-template-columns:repeat(12, 1fr); gap:32px; }

/* ---------- Accent pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border:1px solid currentColor; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase;
}
.pill.solid{ background:var(--signal); color:#fff; border-color:var(--signal);}

/* ---------- Signal dot ---------- */
.signal-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--signal);
  box-shadow: 0 0 0 3px rgba(255,90,31,.22), 0 0 0 8px rgba(255,90,31,.08);
  animation: pulse 2.2s ease-in-out infinite;
  display:inline-block;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(255,90,31,.22), 0 0 0 8px rgba(255,90,31,.08);}
  50%{ box-shadow:0 0 0 5px rgba(255,90,31,.32), 0 0 0 14px rgba(255,90,31,.04);}
}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--rule-soft);
  padding:36px;
  display:flex; flex-direction:column; gap:14px;
}
.slide.dark .card{ background:rgba(245,241,232,.04); border-color:rgba(245,241,232,.14); color:var(--ivory); }
.card .card-num{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--signal);
}
.card h4{ margin:0; font-family:var(--display); font-weight:500; font-size:34px; line-height:1.05; letter-spacing:-0.02em; }
.card p{ margin:0; font-size:18px; line-height:1.5; color:var(--mute); }
.slide.dark .card p{ color:rgba(245,241,232,.6); }

/* ---------- Data table ---------- */
.data-table{
  width:100%; border-collapse:collapse;
  font-family:var(--sans); font-size:20px;
}
.data-table th, .data-table td{
  padding:18px 16px;
  border-bottom:1px solid var(--rule-soft);
  text-align:left;
  vertical-align:middle;
}
.data-table th{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); font-weight:500; border-bottom-color:var(--ink);
}
.data-table td.num-cell{ font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; }
.data-table tr.total td{
  border-top:1px solid var(--ink);
  border-bottom:none;
  font-weight:600;
  padding-top:22px;
}
.slide.dark .data-table th{ border-bottom-color:var(--ivory); color:rgba(245,241,232,.55); }
.slide.dark .data-table th, .slide.dark .data-table td{ border-bottom-color:rgba(245,241,232,.14); }
.slide.dark .data-table tr.total td{ border-top-color:var(--ivory); }

/* ---------- Footer tagline (replaces per-slide page numbers) ----------
   Positioned to sit on the same baseline as the source/caption line
   that lives at the bottom of the .stage content on most slides. */
.page-num{
  position:absolute; right:80px; bottom:68px;
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:20px;
  line-height:1;
  letter-spacing:-0.008em;
  color:var(--mute);
}
.slide.dark .page-num{ color:rgba(245,241,232,.5); }
.page-foot-left{
  position:absolute; left:80px; bottom:68px;
  max-width:1100px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  color:var(--mute);
}
.slide.dark .page-foot-left{ color:rgba(245,241,232,.5); }

/* ---------- Utility ---------- */
.text-signal{ color:var(--signal);}
.text-mute{ color:var(--mute);}
.italic{ font-style:italic; }
.tabular{ font-variant-numeric:tabular-nums; }

/* Gradient vignette backgrounds for cinematic slides */
.vignette-ink{
  background:
    radial-gradient(1200px 700px at 70% 30%, rgba(255,90,31,.08), transparent 60%),
    radial-gradient(900px 600px at 20% 90%, rgba(255,179,71,.05), transparent 55%),
    #080808;
}

/* Marquee effect for the cover */
.marquee-track{
  display:flex; gap:80px; white-space:nowrap;
  animation: marquee 40s linear infinite;
}
@keyframes marquee{
  from{ transform:translateX(0);}
  to{ transform:translateX(-50%);}
}

/* Scale bar */
.scale-bar{
  position:relative; height:6px; background:var(--rule-softer); border-radius:3px; overflow:hidden;
}
.scale-bar .fill{
  position:absolute; top:0; left:0; height:100%; background:var(--signal);
  border-radius:3px;
}
.slide.dark .scale-bar{ background:rgba(245,241,232,.12); }

/* Frequency bars visualization */
.freq-bars{ display:flex; align-items:end; gap:3px; height:60px; }
.freq-bars span{
  display:block; width:4px; background:var(--signal);
  animation: freq 1.1s ease-in-out infinite;
}
@keyframes freq{
  0%,100%{ height:20%; }
  50%{ height:100%; }
}


/* =========================================================
   CHAPTER SYSTEM  —  unified book-like narrative structure
   Chapter covers + per-slide progress dots + bridge footers
   ========================================================= */

/* Masthead — chapter-aware. Rendered by the runtime stamper in chapters.js */
.masthead .mh-chapnum{
  font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:.22em;
  color:var(--chapter-accent, var(--signal));
  white-space:nowrap;
}
.masthead .mh-chaptitle{ font-weight:500; color:inherit; opacity:.85; white-space:nowrap; }
.masthead .mh-dots{ display:inline-flex; gap:7px; align-items:center; }
.masthead .mh-dot{
  width:7px; height:7px; border-radius:999px;
  background:currentColor; opacity:.22;
  transition: opacity .2s, transform .2s;
}
.masthead .mh-dot.is-active{
  background:var(--chapter-accent, var(--signal)); opacity:1; transform:scale(1.25);
}
.masthead .mh-pageof{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; opacity:.55; margin-left:6px;
}
.masthead .mh-num{ opacity:.55; }
.slide.dark .masthead .mh-dot{ background:rgba(245,241,232,.85); }

/* --- CHAPTER COVER --- */
.slide.chapter-cover{
  background:var(--ivory);
  color:var(--ink);
}
.slide.chapter-cover.dark{ background:var(--ink-chapter); color:var(--ivory); }
.slide.chapter-cover .stage{
  inset:104px 96px 72px 96px !important;
}

.cc-grid{
  display:grid;
  grid-template-columns: 560px 1fr;
  gap: 88px;
  flex:1;
  align-items:stretch;
}

/* Left: giant numeral — centered vertically, no longer sinking to the floor */
.cc-numeral{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:8px 72px 8px 0;
  border-right:1px solid var(--rule-soft);
  text-align:center;
}
.slide.chapter-cover.dark .cc-numeral{ border-right-color:rgba(245,241,232,.15); }

.cc-numeral .cc-label{
  font-family:var(--mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--chapter-accent, var(--signal));
  margin-bottom:24px;
}
.cc-numeral .cc-num{
  font-family:var(--display); font-weight:300;
  font-size:400px; line-height:.86; letter-spacing:-0.04em;
  color:var(--chapter-accent, var(--signal));
  font-feature-settings:"lnum" 1, "tnum" 0;
}
.slide.chapter-cover.dark .cc-numeral .cc-num{
  color:var(--chapter-accent, var(--signal));
}

.cc-numeral .cc-of{
  font-family:var(--mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute); margin-top:20px;
}
.slide.chapter-cover.dark .cc-numeral .cc-of{ color:rgba(245,241,232,.45); }

/* Big chapter progress dots (under numeral) */
.cc-chapprog{ display:flex; gap:12px; margin-top:14px; }
.cc-chapprog .d{
  width:12px; height:12px; border-radius:999px;
  background:var(--rule-soft); display:block;
}
.cc-chapprog .d.is-active{ background:var(--chapter-accent, var(--signal)); }
.slide.chapter-cover.dark .cc-chapprog .d{ background:rgba(245,241,232,.15); }
.slide.chapter-cover.dark .cc-chapprog .d.is-active{ background:var(--chapter-accent, var(--signal)); }

/* Right: content stack — balanced, no longer overruns */
.cc-content{
  display:flex; flex-direction:column; gap:0; padding-top:8px;
  justify-content:center;
}
.cc-content .cc-title{
  font-family:var(--display); font-weight:400;
  font-size:96px; line-height:0.98; letter-spacing:-0.032em;
  margin:0;
}
.cc-content .cc-title em{
  color:var(--chapter-accent, var(--signal)); font-style:italic;
}
.cc-content .cc-promise{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:28px; line-height:1.3; letter-spacing:-0.015em;
  margin-top:36px;
  max-width:820px;
  color:var(--ink-2);
}
.slide.chapter-cover.dark .cc-content .cc-promise{ color:rgba(245,241,232,.82); }

.cc-content .cc-inside-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute); margin-top:28px;
  display:flex; align-items:center; gap:14px;
}
.cc-content .cc-inside-label::after{
  content:""; flex:1; height:1px; background:var(--rule-soft);
}
.slide.chapter-cover.dark .cc-content .cc-inside-label::after{ background:rgba(245,241,232,.15); }

.cc-content ol.cc-inside{
  list-style:none; padding:0; margin:16px 0 0 0;
  display:flex; flex-direction:column; gap:8px;
  counter-reset: inside;
}
.cc-content ol.cc-inside li{
  display:flex; align-items:baseline; gap:20px;
  font-family:var(--display); font-size:19px; font-weight:400; line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.slide.chapter-cover.dark .cc-content ol.cc-inside li{ color:var(--ivory); }
.cc-content ol.cc-inside li::before{
  counter-increment: inside;
  content: counter(inside, decimal-leading-zero);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; color:var(--mute);
  flex:0 0 32px;
}
.slide.chapter-cover.dark .cc-content ol.cc-inside li::before{ color:rgba(245,241,232,.55); }

/* Chapter cover footer rule + next-bridge preview */
.cc-footer{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:20px; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.slide.chapter-cover.dark .cc-footer{ border-top-color:rgba(245,241,232,.15); color:rgba(245,241,232,.55); }

/* ---- Bridge footer (last slide of each chapter) ---- */
.chap-bridge{
  position:absolute; left:80px; right:80px; bottom:80px;
  display:flex; align-items:center; gap:20px;
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.slide.dark .chap-bridge{ border-top-color:rgba(245,241,232,.15); color:rgba(245,241,232,.55); }
.chap-bridge .br-next{
  color:var(--chapter-accent, var(--signal));
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:22px; letter-spacing:-0.01em; text-transform:none;
  margin-left:auto;
}
.chap-bridge .br-arrow{
  font-family:var(--mono); color:var(--chapter-accent, var(--signal)); font-size:18px;
}

/* ---- Chapter accents (set on the section via data-chapter) ---- */
.slide[data-chapter="1"]{ --chapter-accent:#ff5a1f; }  /* signal orange */
.slide[data-chapter="2"]{ --chapter-accent:#0a0a0a; }  /* ink black */
.slide[data-chapter="3"]{ --chapter-accent:#0a0a0a; }  /* ink black — The Facts */
.slide[data-chapter="4"]{ --chapter-accent:#1f6b3a; }  /* ledger green — The Numbers */
.slide[data-chapter="5"]{ --chapter-accent:#c84a1a; }  /* deep amber — The Ask */
/* dark-mode chapter covers: accent stays signal-orange-ish for contrast */
.slide.chapter-cover.dark[data-chapter="2"]{ --chapter-accent:#ff5a1f; }
.slide.chapter-cover.dark[data-chapter="3"]{ --chapter-accent:#ff5a1f; }
.slide.chapter-cover.dark[data-chapter="4"]{ --chapter-accent:#ff7a3a; }
.slide.chapter-cover.dark[data-chapter="5"]{ --chapter-accent:#ff7a3a; }


/* =========================================================
   MOTION SYSTEM  —  entrance choreography per slide
   Every element gets a tasteful reveal when its slide becomes
   active; re-triggers on every return. Driven purely by
   CSS + the [data-deck-active] attribute already managed by
   <deck-stage>. No JS required.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Easing + timing tokens ---- */
  :root{
    --ease-out:  cubic-bezier(.22,.61,.36,1);
    --ease-soft: cubic-bezier(.2,.7,.2,1);
    --dur-xs: 420ms;
    --dur-sm: 640ms;
    --dur-md: 880ms;
    --dur-lg: 1100ms;
  }

  /* Masthead slides down */
  .slide .masthead{
    opacity:0; transform:translateY(-10px);
    transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
    transition-delay: 180ms;
  }
  .slide[data-deck-active] .masthead{ opacity:1; transform:none; }

  /* Footline rises up */
  .slide .footline{
    opacity:0; transform:translateY(8px);
    transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
    transition-delay: 720ms;
  }
  .slide[data-deck-active] .footline{ opacity:1; transform:none; }

  /* Generic stage reveal — direct children of .stage stagger in.
     Applies to every non-chapter-cover slide, keeps the authoring
     side clean: no classnames to remember, just order matters. */
  .slide:not(.chapter-cover) .stage > *{
    opacity:0; transform:translateY(22px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *{ opacity:1; transform:none; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(1){ transition-delay: 260ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(2){ transition-delay: 380ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(3){ transition-delay: 500ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(4){ transition-delay: 620ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(5){ transition-delay: 740ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(6){ transition-delay: 860ms; }
  .slide[data-deck-active]:not(.chapter-cover) .stage > *:nth-child(n+7){ transition-delay: 960ms; }

  /* ---- Chapter cover: dramatic two-part entrance ---- */
  .slide.chapter-cover .cc-numeral,
  .slide.chapter-cover .cc-content{
    opacity:0; transform:translateY(28px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide.chapter-cover[data-deck-active] .cc-numeral{ opacity:1; transform:none; transition-delay:260ms; }
  .slide.chapter-cover[data-deck-active] .cc-content{ opacity:1; transform:none; transition-delay:380ms; }

  /* The giant numeral zooms in with a touch of scale */
  .slide.chapter-cover .cc-num{
    display:inline-block;
    opacity:0;
    transform: translateY(24px) scale(0.88);
    transform-origin: 0 80%;
    transition:
      opacity var(--dur-lg) var(--ease-out),
      transform 1300ms var(--ease-soft);
  }
  .slide.chapter-cover[data-deck-active] .cc-num{
    opacity:1;
    transform: translateY(0) scale(1);
    transition-delay: 480ms;
  }

  /* Chapter cover title + promise + TOC stagger */
  .slide.chapter-cover .cc-title,
  .slide.chapter-cover .cc-promise,
  .slide.chapter-cover .cc-inside-label,
  .slide.chapter-cover ol.cc-inside li{
    opacity:0; transform:translateY(18px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide.chapter-cover[data-deck-active] .cc-title{ opacity:1; transform:none; transition-delay:560ms; }
  .slide.chapter-cover[data-deck-active] .cc-promise{ opacity:1; transform:none; transition-delay:720ms; }
  .slide.chapter-cover[data-deck-active] .cc-inside-label{ opacity:1; transform:none; transition-delay:860ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li{ opacity:1; transform:none; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(1){ transition-delay:960ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(2){ transition-delay:1040ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(3){ transition-delay:1120ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(4){ transition-delay:1200ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(5){ transition-delay:1280ms; }
  .slide.chapter-cover[data-deck-active] ol.cc-inside li:nth-child(n+6){ transition-delay:1360ms; }

  .slide.chapter-cover .cc-footer{
    opacity:0; transform:translateY(8px);
    transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
    transition-delay:1400ms;
  }
  .slide.chapter-cover[data-deck-active] .cc-footer{ opacity:1; transform:none; }

  /* ---- Secondary choreography: things nested inside stage kids ---- */

  /* Cards in a col-3 grid: stagger each card */
  .slide .col-3 > .card,
  .slide .col-3 > *{
    opacity:0; transform:translateY(20px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide[data-deck-active] .col-3 > *{ opacity:1; transform:none; }
  .slide[data-deck-active] .col-3 > *:nth-child(1){ transition-delay:700ms; }
  .slide[data-deck-active] .col-3 > *:nth-child(2){ transition-delay:820ms; }
  .slide[data-deck-active] .col-3 > *:nth-child(3){ transition-delay:940ms; }

  /* Two-column splits */
  .slide .col-2 > *{
    opacity:0; transform:translateY(18px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide[data-deck-active] .col-2 > *{ opacity:1; transform:none; }
  .slide[data-deck-active] .col-2 > *:nth-child(1){ transition-delay:560ms; }
  .slide[data-deck-active] .col-2 > *:nth-child(2){ transition-delay:700ms; }

  /* Data tables: rows cascade in */
  .slide .data-table tbody tr{
    opacity:0; transform:translateY(10px);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  }
  .slide[data-deck-active] .data-table tbody tr{ opacity:1; transform:none; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(1){ transition-delay:620ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(2){ transition-delay:700ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(3){ transition-delay:780ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(4){ transition-delay:860ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(5){ transition-delay:940ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(6){ transition-delay:1020ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(7){ transition-delay:1100ms; }
  .slide[data-deck-active] .data-table tbody tr:nth-child(n+8){ transition-delay:1180ms; }

  /* Big stats: scale-in emphasis */
  .slide .big-stat{
    opacity:0; transform:translateY(16px) scale(0.94);
    transform-origin: 0 60%;
    transition:
      opacity var(--dur-lg) var(--ease-out),
      transform 1100ms var(--ease-soft);
  }
  .slide[data-deck-active] .big-stat{ opacity:1; transform:translateY(0) scale(1); transition-delay:620ms; }

  /* Display headline / h-1 / h-2: subtle mask-like rise */
  .slide .h-display,
  .slide .h-1,
  .slide .h-2,
  .slide .h-3{
    /* These often live as a child of .stage > * so they inherit the
       stagger. Adding a slight extra rise for the large type. */
  }

  /* Pull quote: fade + subtle side drift */
  .slide .pull{
    opacity:0; transform:translateX(-14px);
    transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  }
  .slide[data-deck-active] .pull{ opacity:1; transform:none; transition-delay:640ms; }

  /* Pills and eyebrows inherit stage stagger via their parent; no extra */

  /* Scale bars draw to width when slide activates */
  .slide .scale-bar .fill{
    transform-origin: left center;
    transform: scaleX(0.04);
    transition: transform 1400ms var(--ease-soft);
  }
  .slide[data-deck-active] .scale-bar .fill{ transform: scaleX(1); transition-delay:700ms; }

  /* Rules draw across */
  .slide .rule,
  .slide .rule-thin{
    transform-origin: left center;
    transform: scaleX(0.0);
    transition: transform 900ms var(--ease-soft);
  }
  .slide[data-deck-active] .rule,
  .slide[data-deck-active] .rule-thin{ transform: scaleX(1); transition-delay:500ms; }
}

/* =========================================================
   MICRO-INTERACTIONS  —  hover states, always on
   ========================================================= */

.card{
  transition: transform 320ms var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              border-color 320ms ease,
              background 320ms ease,
              box-shadow 320ms ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow: 0 18px 40px -28px rgba(255,90,31,.35),
              0 6px 20px -18px rgba(10,10,10,.25);
}
.slide.dark .card:hover{
  background: rgba(245,241,232,.06);
  box-shadow: 0 18px 48px -28px rgba(255,90,31,.45);
}

/* Pills */
.pill{
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.pill:hover{ transform: translateY(-1px); }
.pill.solid:hover{ background:#ff7a3a; border-color:#ff7a3a; }

/* Masthead logo breathes warm on hover */
.masthead .mh-logo{
  transition: color 220ms ease;
}
.masthead .mh-logo em{
  transition: color 220ms ease;
}

/* Bridge arrow animates */
.chap-bridge .br-arrow{
  display:inline-block;
  animation: bridge-arrow 2.4s var(--ease-soft, cubic-bezier(.2,.7,.2,1)) infinite;
}
@keyframes bridge-arrow{
  0%, 100% { transform: translateX(0); opacity:.8; }
  50%      { transform: translateX(6px); opacity:1; }
}


/* =========================================================
   TUNER  —  persistent deck navigation, hi-fi front-panel
   A fixed-position control bar with fine tick marks,
   an orange needle, an FM-style frequency readout, and
   transport buttons. Inspired by vintage tuners, restrained
   so it reads as editorial instrument, not novelty stereo.
   ========================================================= */

.tuner{
  position: fixed;
  left: 50%; bottom: var(--deck-letterbox-v, 0);
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  width: min(770px, calc(100vw - 40px));
  /* Dark-mode default enclosure (used on dark slides) */
  background:
    linear-gradient(180deg, #3a2f24 0%, #26201a 14%, #110d0a 58%, #0a0806 100%);
  border: 1px solid rgba(212,168,87,.28);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  box-shadow:
    0 -10px 32px -14px rgba(0,0,0,.7),
    0 -3px 10px -6px rgba(0,0,0,.5),
    0 1px 0 rgba(255,230,185,.14) inset,
    0 0 24px rgba(255,140,60,.04) inset,
    0 0 0 1px rgba(255,220,170,.05) inset;
  font-family: 'Inter Tight', system-ui, sans-serif;
  color: var(--ivory);
  user-select: none;
  -webkit-user-select: none;
  animation: tuner-rise 520ms cubic-bezier(.22,.61,.36,1) both;
}

/* Light variant — softer cream so it doesn't fight ivory slide backgrounds */
.tuner.is-light{
  background:
    linear-gradient(180deg, rgba(244,236,218,.82) 0%, rgba(228,214,184,.78) 60%, rgba(208,190,155,.75) 100%);
  border-color: rgba(140,100,50,.22);
  color: #3a2b18;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 -8px 22px -14px rgba(110,80,40,.18),
    0 -2px 8px -5px rgba(110,80,40,.12),
    0 1px 0 rgba(255,250,228,.5) inset,
    0 0 0 1px rgba(255,248,218,.18) inset;
}
/* Tiny corner "screws" — a hint of instrument panel without clutter */
.tuner::before,
.tuner::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #5b4634 0%, #2a1f15 60%, #120c08 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 1px 0 rgba(255,220,170,.08);
  transform: translateY(-50%);
  pointer-events: none;
}
.tuner::before{ left: 5px; }
.tuner::after{ right: 5px; }
@keyframes tuner-rise{
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Transport buttons — milled brass knobs ---- */
.tuner-btn{
  appearance: none;
  -webkit-appearance: none;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(212,168,87,.32);
  /* brushed brass face with darker base */
  background:
    linear-gradient(180deg,
      rgba(255,222,170,.18) 0%,
      rgba(180,140,90,.12) 38%,
      rgba(50,36,22,.35) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,215,158,.14), transparent 70%);
  color: rgba(245,228,196,.88);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,230,185,.15) inset,
    0 -1px 0 rgba(0,0,0,.35) inset,
    0 0 0 1px rgba(0,0,0,.25),
    0 2px 4px -1px rgba(0,0,0,.35);
  transition:
    color 180ms ease, border-color 180ms ease,
    background 180ms ease, transform 160ms cubic-bezier(.22,.61,.36,1),
    box-shadow 220ms ease;
}
.tuner-btn svg{ width: 13px; height: 13px; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.tuner-btn:hover{
  color: #ffe0b0;
  border-color: rgba(255,179,71,.6);
  background:
    linear-gradient(180deg, rgba(255,190,110,.25), rgba(100,60,24,.35)),
    radial-gradient(ellipse at 50% 0%, rgba(255,210,150,.22), transparent 70%);
  box-shadow:
    0 1px 0 rgba(255,230,185,.2) inset,
    0 0 0 1px rgba(255,179,71,.25),
    0 0 10px rgba(255,140,60,.35),
    0 3px 8px -3px rgba(255,140,60,.45);
}
.tuner-btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.3); }
.tuner-btn:disabled{ opacity:.35; cursor: default; transform: none; box-shadow: 0 1px 0 rgba(0,0,0,.2) inset; color: rgba(245,228,196,.35); border-color: rgba(212,168,87,.14); background: linear-gradient(180deg, rgba(60,48,32,.2), rgba(30,24,16,.25)); }

/* ---- Center strip: readout + dial stack ---- */
.tuner-strip{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 6px 1px;
}

/* Readout row — vintage lamp-lit panel text */
.tuner-readout{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(228,217,191,.62);
  line-height: 1;
}
/* Backlit glass "window" surrounding the ON AIR dot + frequency */
.tuner-onair{
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,160,90,.92);
  font-weight: 600;
  padding: 4px 9px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
  border: 1px solid rgba(255,140,60,.18);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 1px 3px rgba(0,0,0,.5),
    inset 0 0 12px rgba(255,120,40,.08);
}
.tuner-onair-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd2a0 0%, var(--signal) 60%, #7a2b0f 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 8px rgba(255,120,50,.7), 0 0 2px rgba(255,220,170,.6) inset;
  animation: pulse 2.2s ease-in-out infinite;
}
.tuner-freq{
  font-variant-numeric: tabular-nums;
  color: #ffcf8a;
  text-shadow: 0 0 8px rgba(255,179,71,.55), 0 0 2px rgba(255,215,158,.4);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  margin-left: 2px;
}
.tuner-freq-unit{
  color: rgba(255,207,138,.5);
  font-weight: 500;
  margin-left: 3px;
  letter-spacing: .14em;
  text-shadow: none;
  font-size: 9px;
}
.tuner-sep{ opacity: .3; font-weight: 400; }
.tuner-chapter{
  color: rgba(240,225,195,.88);
  font-weight: 500;
  letter-spacing: .22em;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.tuner-num{
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: rgba(228,217,191,.75);
  font-weight: 500;
  letter-spacing: .14em;
  font-size: 11px;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.2));
  border: 1px solid rgba(245,220,170,.06);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.tuner-num .cur{ color: #ffcf8a; text-shadow: 0 0 6px rgba(255,179,71,.4); font-weight: 600; }
.tuner-num .tot{ color: rgba(228,217,191,.45); }
.tuner-num .slash{ color: rgba(228,217,191,.32); margin: 0 3px; }

/* ---- Dial groove — recessed physical scale ---- */
.tuner-dial{
  position: relative;
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 6px 0 5px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(15,10,6,.38) 50%, rgba(0,0,0,.32) 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.35) inset,
    0 -1px 2px rgba(0,0,0,.3) inset;
  border-radius: 2px;
}
.tuner.is-light .tuner-dial{
  background:
    linear-gradient(180deg, rgba(110,75,30,.16) 0%, rgba(70,45,15,.14) 50%, rgba(110,75,30,.12) 100%);
  box-shadow:
    0 1px 3px rgba(70,45,15,.18) inset,
    0 -1px 2px rgba(70,45,15,.12) inset;
}

.tuner-ticks{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.tuner-tick{
  appearance: none; -webkit-appearance: none;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuner-tick::before{
  content: '';
  display: block;
  width: 1px;
  height: 5px;
  background: rgba(228,217,191,.4);
  transition: height 220ms cubic-bezier(.22,.61,.36,1), background 220ms ease, box-shadow 220ms ease;
}
.tuner-tick.is-chapter-start::before{
  height: 11px;
  background: linear-gradient(180deg, #ffe0b0 0%, #d4a857 100%);
  width: 1.5px;
  box-shadow: 0 0 4px rgba(255,179,71,.35);
}
.tuner-tick:hover::before{
  height: 14px;
  background: #ffd79e;
  box-shadow: 0 0 8px rgba(255,179,71,.7);
}
.tuner-tick.is-active::before{
  height: 16px;
  background: linear-gradient(180deg, #ffe5b5 0%, #ff9840 100%);
  box-shadow: 0 0 10px rgba(255,140,60,.85), 0 0 2px rgba(255,230,185,.8);
  width: 2px;
}

/* Per-tick floating tooltip on hover — compact label */
.tuner-tick[data-tick-label]:hover::after{
  content: attr(data-tick-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(10,10,10,.92);
  border: 1px solid rgba(245,241,232,.12);
  padding: 6px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.8);
  z-index: 2;
}

/* ---- Needle: dial-lamp orange indicator with pivot head ---- */
.tuner-needle{
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px; /* centers the 2px needle on its set left */
  /* left is set inline from JS to tick-center */
  pointer-events: none;
  transition: left 620ms cubic-bezier(.22,.61,.36,1);
}
/* Ambient lamp glow spreading from behind the needle */
.tuner-needle::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffe4b5 0%, #ff9a4a 55%, #ff6a20 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255,100,40,.2),
    0 0 8px rgba(255,140,60,.85),
    0 0 18px rgba(255,140,60,.45),
    0 0 36px rgba(255,120,40,.18);
}
/* Pivot bead at the top — like a jewelled cap */
.tuner-needle::after{
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff2d2 0%, #ffb673 40%, #ff7830 75%, #8a3a12 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 6px rgba(255,140,60,.75),
    0 0 14px rgba(255,140,60,.35);
}

/* Reduced motion — keep the look, kill the slide */
@media (prefers-reduced-motion: reduce){
  .tuner,
  .tuner-needle,
  .tuner-btn,
  .tuner-tick::before{ transition-duration: 120ms; }
  .tuner-onair-dot{ animation: none; }
}

/* Narrow viewports — hide hover labels + chapter overflow further */
@media (max-width: 640px){
  .tuner{ gap: 10px; padding: 10px; }
  .tuner-btn{ width: 36px; height: 36px; }
  .tuner-readout{ font-size: 9.5px; gap: 8px; }
  .tuner-chapter{ max-width: 160px; }
  .tuner-tick[data-tick-label]:hover::after{ display: none; }
}

/* ---- Light enclosure overrides ---- */
.tuner.is-light .tuner-btn{
  border-color: rgba(110,70,30,.2);
  background:
    linear-gradient(180deg, rgba(255,248,225,.5) 0%, rgba(200,170,120,.3) 100%);
  color: rgba(80,55,25,.72);
  box-shadow:
    0 1px 0 rgba(255,250,230,.45) inset,
    0 -1px 0 rgba(120,85,40,.15) inset,
    0 0 0 1px rgba(120,85,40,.1),
    0 1px 3px -1px rgba(90,60,20,.15);
}
.tuner.is-light .tuner-btn svg{ filter: drop-shadow(0 1px 0 rgba(255,240,200,.5)); }
.tuner.is-light .tuner-btn:hover{
  color: #7a3a10;
  border-color: rgba(200,90,25,.6);
  background:
    linear-gradient(180deg, rgba(255,200,140,.55), rgba(220,140,60,.35));
  box-shadow:
    0 1px 0 rgba(255,240,200,.55) inset,
    0 0 0 1px rgba(200,90,25,.25),
    0 0 10px rgba(200,90,25,.3),
    0 3px 8px -3px rgba(200,90,25,.4);
}
.tuner.is-light .tuner-btn:disabled{ background: linear-gradient(180deg, rgba(230,215,185,.3), rgba(180,150,110,.15)); color: rgba(110,80,35,.3); }

.tuner.is-light .tuner-readout{ color: rgba(80,55,25,.55); }
.tuner.is-light .tuner-onair{
  color: #b54510;
  background: linear-gradient(180deg, rgba(130,80,30,.22), rgba(80,45,15,.1));
  border-color: rgba(200,90,25,.35);
  box-shadow:
    0 0 0 1px rgba(255,240,200,.4),
    inset 0 1px 2px rgba(80,45,15,.2),
    inset 0 0 10px rgba(200,90,25,.08);
}
.tuner.is-light .tuner-onair-dot{ box-shadow: 0 0 0 1px rgba(120,50,10,.4), 0 0 6px rgba(200,90,25,.55); }
.tuner.is-light .tuner-freq{
  color: #a54010;
  text-shadow: 0 0 4px rgba(220,120,40,.25);
}
.tuner.is-light .tuner-freq-unit{ color: rgba(120,70,25,.55); }
.tuner.is-light .tuner-sep{ color: rgba(80,55,25,.35); }
.tuner.is-light .tuner-chapter{ color: rgba(60,40,15,.82); }
.tuner.is-light .tuner-num{
  color: rgba(80,55,25,.7);
  background: linear-gradient(180deg, rgba(120,80,40,.12), rgba(80,50,20,.06));
  border-color: rgba(140,100,50,.18);
  box-shadow: inset 0 1px 2px rgba(80,50,20,.18);
}
.tuner.is-light .tuner-num .cur{ color: #a54010; text-shadow: 0 0 4px rgba(220,120,40,.2); }
.tuner.is-light .tuner-num .tot{ color: rgba(80,55,25,.38); }
.tuner.is-light .tuner-num .slash{ color: rgba(80,55,25,.28); }

.tuner.is-light .tuner-dial{
  background:
    linear-gradient(180deg, rgba(100,65,25,.22) 0%, rgba(60,35,10,.18) 50%, rgba(100,65,25,.18) 100%);
  box-shadow:
    0 2px 4px rgba(60,35,10,.2) inset,
    0 -1px 2px rgba(60,35,10,.15) inset;
}
.tuner.is-light .tuner-tick::before{ background: rgba(80,55,25,.45); }
.tuner.is-light .tuner-tick.is-chapter-start::before{
  background: linear-gradient(180deg, #9c5c1e 0%, #6e3e12 100%);
  box-shadow: 0 0 3px rgba(200,100,30,.3);
}
.tuner.is-light .tuner-tick:hover::before{
  background: #c4631a;
  box-shadow: 0 0 6px rgba(200,90,30,.5);
}
.tuner.is-light .tuner-tick.is-active::before{
  background: linear-gradient(180deg, #ff9840 0%, #b8480a 100%);
  box-shadow: 0 0 8px rgba(220,100,30,.7), 0 0 2px rgba(255,200,140,.6);
}

/* Screws — brass on light, dark on dark */
.tuner.is-light::before,
.tuner.is-light::after{
  background:
    radial-gradient(circle at 32% 28%, #e4c896 0%, #8a5a22 60%, #4a2e10 100%);
  box-shadow: 0 0 0 1px rgba(255,245,210,.3), 0 1px 0 rgba(80,50,15,.3);
}