/* ==========================================================================
   ENGINEER BOOKLET — site styles
   --------------------------------------------------------------------------
   Palette and type are taken from video-engine/src/theme.ts so the site and
   the videos stay the same object. One accent (dark orange), used sparingly:
   it marks the tab you are on, the step you are reading, and nothing else.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --paper:      #F4F1EA;   /* the page */
  --rail-bg:    #EDE9E0;   /* sidebar + right rail, one step back */
  --card:       #FFFFFF;
  --card-2:     #FAF8F4;
  --line:       #DAD5C9;   /* hairline borders */
  --line-soft:  #E6E1D6;

  /* ink */
  --ink:        #1A1A1A;
  --ink-2:      #4A4A45;   /* structural / secondary text */
  --muted:      #6B6B66;

  /* accent — the one colour */
  --accent:     #B5651D;
  --accent-ink: #8A4A14;   /* deeper, for text on tinted surfaces */
  --accent-2:   #F5A85B;
  --accent-05:  rgba(181, 101, 29, .05);
  --accent-10:  rgba(181, 101, 29, .10);
  --accent-20:  rgba(181, 101, 29, .22);
  --on-accent:  #FFFFFF;

  /* type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* metrics */
  --topbar-h:  56px;
  --sidebar-w: 268px;
  --rail-w:    212px;
  --measure:   46rem;   /* prose line length */
  --wide:      66rem;   /* player, cards, tables — the main column reads large */
  --radius:    10px;

  /* space scale (4pt) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --shadow-pop: 0 12px 28px rgba(26, 26, 26, .14);
  color-scheme: light;
}

[data-theme="dark"] {
  --paper:      #16150F;
  --rail-bg:    #100F0B;
  --card:       #1D1B16;
  --card-2:     #211E19;
  --line:       #322E27;
  --line-soft:  #272420;

  --ink:        #EFEBE2;
  --ink-2:      #C3BDB2;
  --muted:      #9A948A;

  --accent:     #E08B3E;   /* lifted so it still passes contrast on dark */
  --accent-ink: #F2B375;
  --accent-2:   #F5A85B;
  --accent-05:  rgba(224, 139, 62, .07);
  --accent-10:  rgba(224, 139, 62, .13);
  --accent-20:  rgba(224, 139, 62, .28);
  --on-accent:  #16150F;

  --shadow-pop: 0 12px 28px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--font-body);
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.22; margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

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

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 90;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font: 600 14px/1 var(--font-display); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

.eyebrow {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4);
  background: color-mix(in srgb, var(--rail-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.bm-page, .bm-spine { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.bm-fold { fill: var(--accent); stroke: none; }
.brand-word {
  display: grid; line-height: 1; font-family: var(--font-display);
  letter-spacing: .10em;
}
.brand-word b { font-size: 13px; font-weight: 700; }
.brand-word span { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--ink-2); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--accent-10); color: var(--accent-ink); }
.nav-toggle, .nav-close { display: none; }

.icon-dark { display: none; }
[data-theme="dark"] .icon-light { display: none; }
[data-theme="dark"] .icon-dark  { display: block; }
/* the sun/moon read cleaner a touch smaller, and both sit dead-centre in the grid cell */
#theme-toggle .icon { width: 18px; height: 18px; grid-area: 1 / 1; }

/* search ---------------------------------------------------------------- */
.search { position: relative; flex: 1 1 auto; max-width: 460px; margin-left: auto; }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#search-input {
  width: 100%; height: 38px;
  padding: 0 40px 0 38px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#search-input::placeholder { color: var(--muted); }
#search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-10); }
#search-input::-webkit-search-cancel-button { display: none; }
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 500 12px/1 var(--font-mono); color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px;
  background: var(--paper);
}
.search:focus-within .search-kbd { display: none; }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 6px;
}
.sr-item { display: block; padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.sr-item[aria-selected="true"], .sr-item:hover { background: var(--accent-10); }
.sr-kicker { font: 600 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.sr-title { font: 600 15px/1.35 var(--font-display); margin-top: 2px; }
.sr-sum { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sr-empty { padding: 14px 10px; color: var(--muted); font-size: 14px; }

.topbar-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.yt-link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font: 600 14px/1 var(--font-display); text-decoration: none; color: var(--ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.yt-link:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
  align-items: start;
}

/* ── Sidebar: the binder tabs ───────────────────────────────────────────── */
.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  padding: var(--s5) 0 var(--s6);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s4) var(--s3) var(--s5); }
.sidebar-foot { padding: var(--s5) var(--s5) 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line-soft); margin: var(--s5) var(--s4) 0; }
.sidebar-foot p { text-align: center; text-transform: uppercase; }
.sidebar-foot span { font-family: var(--font-mono); font-size: 11.5px; }

.tabs { display: grid; gap: 2px; }

.tab-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px 10px 18px;
  margin-right: -1px;                     /* so the open tab meets the page */
  background: none; border: 0; border-left: 3px solid transparent;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  text-align: left; cursor: pointer; color: var(--ink-2);
  font: 600 14.5px/1.3 var(--font-display);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab-head:hover { background: var(--accent-05); color: var(--ink); }
a.tab-head { text-decoration: none; }  /* HOME and NEW are plain links */
.tab-head .icon { width: 19px; height: 19px; color: var(--muted); }
.tab-head .tab-label { flex: 1 1 auto; min-width: 0; }
.tab-letter {
  font: 600 10.5px/1 var(--font-mono); color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px;
}
.tab-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .18s ease; }
.tab[data-open="true"] .tab-chev { transform: rotate(90deg); }

/* the tab you are on is pulled forward onto the page surface */
.tab[data-current="true"] > .tab-head {
  background: var(--paper);
  color: var(--ink);
  border-left-color: var(--accent);
  border-top-color: var(--line); border-bottom-color: var(--line);
  border-right: 1px solid var(--paper);
}
.tab[data-current="true"] > .tab-head .icon,
.tab[data-current="true"] > .tab-head .tab-letter { color: var(--accent); }
.tab[data-current="true"] > .tab-head .tab-letter { border-color: var(--accent-20); }

.tab-badge {
  font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em;
  background: var(--accent); color: var(--on-accent);
  padding: 4px 5px; border-radius: 3px;
}

/* second level — the pages inside a section */
.tab-pages { display: none; padding: 4px 10px 10px 21px; margin-left: 3px; }
.tab[data-open="true"] .tab-pages { display: block; }
.tab-pages::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
}
.page-link {
  position: relative; display: flex; gap: 9px; align-items: baseline;
  padding: 7px 10px 7px 12px;
  border-left: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.4;
  transition: color .15s ease, background .15s ease;
}
.page-link:hover { color: var(--ink); background: var(--accent-05); }
.page-link .pl-no { font: 500 11.5px/1.6 var(--font-mono); color: var(--muted); flex: none; }
.page-link[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-left: 2px solid var(--accent);
  background: var(--accent-10);
  border-radius: 0 6px 6px 0;
}
.page-link[aria-current="page"] .pl-no { color: var(--accent-ink); }
.page-link.is-planned { color: var(--muted); cursor: default; }
.page-link.is-planned:hover { background: none; color: var(--muted); }
.pl-tag.is-new { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.pl-tag {
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 4px; align-self: center; margin-left: auto; flex: none;
}
.tab-more { padding: 8px 10px 2px 22px; font: 500 11.5px/1.4 var(--font-mono); color: var(--muted); }

.scrim { display: none; }

/* ── The page ───────────────────────────────────────────────────────────── */
.page { min-width: 0; padding: var(--s6) 40px var(--s8); }
.page:focus { outline: none; }
/* Fill the whole middle section. A generous upper bound keeps text from becoming
   an unreadable ribbon on very large / ultrawide panels; below it, content fills. */
.page-body { max-width: 128rem; margin-inline: auto; }

.page-head { margin-bottom: var(--s5); }
.page-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-bottom: 10px; margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.page-kicker .pk-section { color: var(--accent-ink); }
.page-title { font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.01em; }
.page-summary { margin-top: var(--s3); font-size: clamp(18px, 1.25vw, 22px); color: var(--ink-2); }

.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: var(--s4); }
.meta-item { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font-mono); color: var(--muted); }
.meta-item .icon { width: 16px; height: 16px; }
.meta-link { text-decoration: none; color: var(--accent-ink); border-bottom: 1px solid var(--accent-20); }
.meta-link:hover { border-bottom-color: var(--accent); }

/* player ---------------------------------------------------------------- */
.player-wrap { margin: var(--s5) 0 var(--s3); }
.player {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0B0B0B; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-note {
  display: flex; gap: 8px; align-items: baseline;
  font: 500 12px/1.5 var(--font-mono); color: var(--muted);
}
.player-note b { color: var(--accent-ink); font-weight: 600; }

.player-empty {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center;
  background: var(--card-2); color: var(--muted); padding: var(--s5);
}
.player-empty strong { font: 600 15px/1.4 var(--font-display); color: var(--ink-2); }

/* chapters -------------------------------------------------------------- */
.chapters { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.chapters > h2 {
  font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.chapter {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 9px 16px; background: none; border: 0; border-top: 1px solid var(--line-soft);
  text-align: left; cursor: pointer; font-size: 14.5px; color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
.chapter:first-of-type { border-top: 0; }
.chapter:hover { background: var(--accent-05); color: var(--ink); }
.chapter time { font: 500 12.5px/1.6 var(--font-mono); color: var(--accent-ink); flex: none; min-width: 3.2em; }

/* ── Deep-dive digest: resumed chapters + a hook to the video ───────────── */
.digest-lead { color: var(--ink-2); margin-bottom: var(--s4); }
.digest-list { border-top: 1px solid var(--line); }
.dg-item {
  display: flex; gap: 16px; align-items: flex-start; width: 100%;
  padding: 15px 10px; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  text-align: left; cursor: pointer; transition: background .12s ease;
}
.dg-item:hover { background: var(--accent-05); }
.dg-t { flex: none; min-width: 3.4em; font: 600 12.5px/1.65 var(--font-mono); color: var(--accent-ink); }
.dg-body { min-width: 0; }
.dg-body b { display: block; font: 600 16.5px/1.4 var(--font-display); color: var(--ink); }
.dg-body > span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dg-play { flex: none; align-self: center; width: 18px; height: 18px; color: var(--muted); margin-left: auto; }
.dg-item:hover .dg-play { color: var(--accent); }

.watch-cta {
  display: flex; align-items: center; gap: 16px; width: 100%; margin-top: var(--s5);
  padding: 16px 20px; text-align: left; cursor: pointer;
  background: var(--accent-05); border: 1px solid var(--accent-20); border-radius: var(--radius);
  color: inherit; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.watch-cta:hover { background: var(--accent-10); border-color: var(--accent); }
.watch-cta:active { transform: scale(.995); }
.watch-cta .wc-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--accent); color: var(--on-accent); border-radius: 50%;
}
.watch-cta .wc-icon .icon { width: 22px; height: 22px; }
.watch-cta .wc-text { min-width: 0; }
.watch-cta .wc-text b { display: block; font: 600 16.5px/1.35 var(--font-display); color: var(--ink); }
.watch-cta .wc-text span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.watch-cta .wc-arrow { flex: none; margin-left: auto; color: var(--accent-ink); }

/* ── Steps: the page is laid out in the five video steps ────────────────── */
.step-block { margin-top: var(--s7); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s4); }
.step-no {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px solid var(--accent-20); border-radius: 50%;
  font: 600 12px/1 var(--font-mono); color: var(--accent-ink); background: var(--accent-05);
}
.step-head h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); }
.step-head::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

.prose > * + * { margin-top: var(--s4); }
.prose h3 {
  font-size: clamp(21px, 1.5vw, 26px); margin-top: var(--s6);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.prose ul li, .prose ol li { position: relative; padding-left: 22px; margin-top: 8px; }
.prose ul li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 7px; height: 1.5px; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 500 12px/1.6 var(--font-mono); color: var(--accent-ink); }

/* callout --------------------------------------------------------------- */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--card); border-radius: 4px var(--radius) var(--radius) 4px;
  padding: var(--s4) var(--s5);
}
.callout h4 { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.callout.is-quick { background: var(--accent-05); }
.callout.is-note  { border-left-color: var(--ink-2); }
.callout.is-note h4 { color: var(--ink-2); }
.callout.is-warn  { border-left-color: var(--accent-ink); background: var(--accent-05); }

/* compare --------------------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.compare-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: var(--s4) var(--s5) var(--s5); }
.compare-tag {
  display: inline-block; font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-10); border-radius: 3px; padding: 5px 7px;
}
.compare-card h4 { font: 600 19px/1.25 var(--font-display); margin: 12px 0 10px; }
.compare-card li { position: relative; padding-left: 18px; margin-top: 7px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.compare-card li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 1.5px; background: var(--muted); }

/* terms ----------------------------------------------------------------- */
.terms { border-top: 1px solid var(--line); }
.terms > div { display: grid; grid-template-columns: 12.5rem 1fr; gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.terms dt { font: 600 14px/1.5 var(--font-display); color: var(--ink); }
.terms dd { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }

/* controls table -------------------------------------------------------- */
.controls { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.controls-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.controls-head h4 { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.controls-note { font: 500 12.5px/1.5 var(--font-mono); color: var(--accent-ink); }
.controls-scroll { overflow-x: auto; }
.controls table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.controls th { text-align: left; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.controls td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; vertical-align: baseline; }
.controls tr:last-child td { border-bottom: 0; }
.controls .c-family { font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.controls .c-symbol { font: 600 15px/1 var(--font-mono); color: var(--accent-ink); text-align: center; width: 3rem; }
.controls .c-name { font-weight: 600; color: var(--ink); }
.controls .c-effect { color: var(--ink-2); }

/* takeaways ------------------------------------------------------------- */
.takeaways { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.takeaway { display: grid; grid-template-columns: 2.2rem 13rem 1fr; gap: var(--s3); padding: 14px 16px; background: var(--card); align-items: baseline; }
.takeaway .tk-no { font: 600 12px/1.6 var(--font-mono); color: var(--accent); }
.takeaway .tk-k { font: 600 15px/1.5 var(--font-display); }
.takeaway .tk-v { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* the booklet page card — the frame people screenshot ------------------- */
.booklet-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 2px 2px var(--radius) var(--radius);
  padding: var(--s5) var(--s5) var(--s6);
}
.booklet-card::before, .booklet-card::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--accent-20);
}
.booklet-card::before { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.booklet-card::after  { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.bc-head h3 { font-size: clamp(22px, 1.8vw, 28px); }
.bc-head .eyebrow { color: var(--accent-ink); font-size: 12px; }

.bc-image { margin-top: var(--s5); }
.bc-image a[target="_blank"] { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.bc-image img { display: block; width: 100%; height: auto; }
.bc-download {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font: 600 13px/1 var(--font-body); color: var(--accent-ink); text-decoration: none;
  padding: 9px 14px; border: 1px solid var(--accent-20); border-radius: 6px; background: var(--accent-05);
  transition: background .15s ease, border-color .15s ease;
}
.bc-download:hover { background: var(--accent-10); border-color: var(--accent); }
.bc-download .icon { width: 16px; height: 16px; }
.bc-empty { margin-top: var(--s5); color: var(--muted); font-size: 14.5px; }

/* ── 404 / not-found — shared by 404.html and app.js's renderNotFound() ─── */
.err-page { max-width: 640px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s7); text-align: center; }
.err-mascot { width: 220px; max-width: 60%; height: auto; margin: 0 auto var(--s6); display: block; }
.err-kicker { font: 600 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.err-page h1 { font: 600 clamp(30px, 4vw, 44px)/1.2 var(--font-display); margin: 10px 0 14px; }
.err-page p { color: var(--ink-2); font-size: 17px; max-width: 46ch; margin: 0 auto; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s6); }
/* .btn is the same pill, reused by the homepage */
.err-btn, .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  font: 600 14px/1 var(--font-body); text-decoration: none; border: 1px solid var(--line);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.err-btn .icon, .btn .icon { width: 17px; height: 17px; }
.err-btn.is-primary, .btn.is-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.err-btn.is-primary:hover, .btn.is-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); transform: translateY(-1px); }
.err-btn.is-ghost, .btn.is-ghost { background: var(--card); color: var(--ink-2); }
.err-btn.is-ghost:hover, .btn.is-ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-05); }

/* page footer: flip to the next page ------------------------------------ */
.page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.page-nav a {
  display: grid; gap: 6px; padding: var(--s4); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  transition: border-color .15s ease, background .15s ease;
}
.page-nav a:hover { border-color: var(--accent); background: var(--accent-05); }
.page-nav .pn-dir { display: flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-nav .pn-title { font: 600 15.5px/1.35 var(--font-display); }
.page-nav .is-next { text-align: right; }
.page-nav .is-next .pn-dir { justify-content: flex-end; }

/* ── Section index (a tab with no page open) ────────────────────────────── */
.section-hero { border-bottom: 1px solid var(--line); padding-bottom: var(--s5); }
.section-hero > .icon { width: 30px; height: 30px; color: var(--accent); }
.section-hero h1 { font-size: clamp(30px, 3.6vw, 42px); margin: var(--s3) 0 var(--s3); }
.section-hero p { font-size: 18px; color: var(--ink-2); max-width: var(--measure); }
.section-playlist { margin-top: var(--s4); padding-bottom: 3px; }

/* ── Home (#/) ──────────────────────────────────────────────────────────────
   The front door: a full-width search, the newest page, then one card per
   pillar with its latest page and its YouTube playlist. Laid out by the width
   of the middle column (container queries), not the viewport, so it reads the
   same with or without the rail. ────────────────────────────────────────── */
.home { container-type: inline-size; }
.home-hero { padding: var(--s4) 0 var(--s6); border-bottom: 1px solid var(--line); }
.home-hero .eyebrow { color: var(--accent-ink); }
.home-hero h1 { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.015em; margin-top: var(--s3); }
.home-lede { margin-top: var(--s3); font-size: clamp(17px, 1.2vw, 21px); color: var(--ink-2); max-width: var(--measure); }

.home-search { position: relative; margin-top: var(--s6); }
.home-search .search-icon { left: 20px; width: 24px; height: 24px; }
#home-search-input {
  width: 100%; height: 64px; padding: 0 22px 0 58px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  font-size: 19px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#home-search-input::placeholder { color: var(--muted); }
#home-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-10); }
#home-search-input::-webkit-search-cancel-button { display: none; }
.home-search .search-results { top: calc(100% + 10px); padding: 8px; }
.home-search .sr-item { padding: 11px 12px; }
.home-search .sr-title { font-size: 17px; }
.home-search .sr-sum { font-size: 14px; }

.home-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--s4); }
.home-hints > span { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.hint-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  font: 500 13.5px/1 var(--font-body); color: var(--ink-2);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hint-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-05); }

.home-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--s5); font: 500 12.5px/1.5 var(--font-mono); color: var(--muted); }
.home-meta a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent-20); }
.home-meta a:hover { border-bottom-color: var(--accent); }

.home-block { scroll-margin-top: calc(var(--topbar-h) + 16px); }
#home-search-block { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.home-h {                          /* same divider as a page's step heads */
  display: flex; align-items: center; gap: 12px; margin: var(--s7) 0 var(--s5);
  font: 600 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.home-h::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }

/* thumbnails: the video's own YouTube thumbnail, served from this site */
.thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb-blank {
  display: grid; place-content: center; justify-items: center; gap: 4px;
  background: var(--rail-bg); color: var(--muted);
}
.thumb-blank .icon { width: 26px; height: 26px; }
.thumb-blank b { font: 600 12px/1 var(--font-mono); }

/* the newest page */
.feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.feature-media {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: #0B0B0B;
}
.feature-media .thumb { transition: transform .35s ease; }
.feature-media:hover .thumb { transform: scale(1.02); }
.feature-play {           /* bottom-left, clear of the thumbnail's own headline */
  position: absolute; left: 16px; bottom: 16px;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-pop);
  transition: transform .15s ease;
}
.feature-play .icon { width: 24px; height: 24px; }
.feature-media:hover .feature-play { transform: scale(1.06); }
.feature-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.feature-kicker .pl-tag { margin-left: 0; }
.feature-title { font-size: clamp(24px, 2.1vw, 34px); letter-spacing: -.01em; margin-top: var(--s3); }
.feature-title a { text-decoration: none; }
.feature-title a:hover { color: var(--accent-ink); }
.feature-sum {
  margin-top: var(--s3); font-size: 16px; line-height: 1.6; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }

/* one card per pillar */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pillar-card {
  display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.pillar-head { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pillar-head .icon { width: 22px; height: 22px; color: var(--accent); }
.pillar-title { flex: 1 1 auto; min-width: 0; font: 600 18px/1.25 var(--font-display); }
.pillar-head:hover .pillar-title { color: var(--accent-ink); }
.pillar-blurb { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pillar-latest {
  display: block; margin: 0 -10px; padding: 10px; border-radius: 8px; text-decoration: none;
  transition: background .15s ease;
}
a.pillar-latest:hover { background: var(--accent-05); }
.pv-media { display: block; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 7px; background: #0B0B0B; }
.pv-media .thumb { transition: transform .35s ease; }
a.pillar-latest:hover .pv-media .thumb { transform: scale(1.03); }
.is-empty .pv-media { background: var(--card-2); border: 1px dashed var(--line); }
.is-empty .thumb-blank { background: none; gap: 10px; }
.is-empty .thumb-blank .icon { width: 30px; height: 30px; color: var(--accent-20); }
.is-empty .thumb-blank b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.pv-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pv-kicker .pl-tag { margin-left: 0; }
.pv-title { display: block; margin-top: 6px; font: 600 16px/1.35 var(--font-display); color: var(--ink); }
a.pillar-latest:hover .pv-title { color: var(--accent-ink); }
.is-empty .pv-title { color: var(--muted); font-weight: 500; }
.pv-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.pv-meta .icon { width: 14px; height: 14px; }
.pillar-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
.pillar-foot a { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--font-body); color: var(--ink-2); text-decoration: none; }
.pillar-foot a:hover { color: var(--accent-ink); }
.pillar-foot a.is-playlist { color: var(--accent-ink); }
.pillar-foot .icon { width: 15px; height: 15px; }

@container (max-width: 1000px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); } }
@container (max-width: 680px) { .feature { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 600px) {
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  #home-search-input { height: 56px; font-size: 17px; padding-left: 50px; }
  .home-search .search-icon { left: 16px; width: 22px; height: 22px; }
}

/* The top bar's small search hides while the homepage's big one is on screen,
   so two search boxes are never in view at once (app.js sets data-hero-search). */
.topbar .search { transition: opacity .2s ease, visibility .2s ease; }
/* hidden from the first paint on the homepage (pre-rendered with data-view), until
   the hero scrolls away — so the small box never flashes in and out on load */
body[data-view="home"]:not([data-hero-search="out"]) .topbar .search { opacity: 0; visibility: hidden; }

.card-list { display: grid; gap: var(--s4); margin-top: var(--s5); }
.page-card {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s5);
  padding: var(--s5); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.page-card:hover { border-color: var(--accent); background: var(--accent-05); }
.pc-no { font: 600 30px/1 var(--font-mono); color: var(--accent-20); }
.pc-title { display: block; font: 600 20px/1.3 var(--font-display); }
.pc-title .pl-tag { margin-left: 8px; vertical-align: middle; }
.pc-sum { color: var(--ink-2); font-size: 15.5px; margin-top: 8px; max-width: var(--measure); }
.pc-meta { display: flex; gap: 16px; margin-top: 12px; font: 500 12px/1 var(--font-mono); color: var(--muted); }

.planned-list { margin-top: var(--s6); }
.planned-list h2 { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.planned-list li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 15px; }
.planned-list .pl-tag { margin-left: auto; }

/* ── Right rail: on this page ───────────────────────────────────────────── */
.rail {
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s6) var(--s4) var(--s6) 0;
}
.rail h2 { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); }
.rail ol { position: relative; }
.rail-step { position: relative; padding-left: 30px; padding-bottom: 4px; }
.rail-step::before {              /* the connecting line — the video's progress bar */
  content: ''; position: absolute; left: 10px; top: 18px; bottom: -4px; width: 1px; background: var(--line);
}
.rail-step:last-child::before { display: none; }
.rail-link {
  display: block; padding: 5px 0; text-decoration: none; font-size: 13.5px; line-height: 1.4;
  color: var(--muted); transition: color .15s ease;
}
.rail-link:hover { color: var(--ink); }
.rail-num {
  position: absolute; left: 3px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; font: 600 9px/1 var(--font-mono); color: var(--muted);
}
.rail-step[data-active="true"] .rail-num { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.rail-step[data-active="true"] > .rail-link { color: var(--ink); font-weight: 600; }
.rail-sub { padding-left: 0; margin: 2px 0 6px; }
.rail-sub a {
  display: block; padding: 4px 0 4px 10px; border-left: 1px solid var(--line);
  font-size: 13px; line-height: 1.4; color: var(--muted); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.rail-sub a:hover { color: var(--ink); }
.rail-sub a[data-active="true"] { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 500; }

.rail-aside { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.rail-aside a { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-body); color: var(--muted); text-decoration: none; padding: 7px 0; }
.rail-aside a:hover { color: var(--accent-ink); }
.rail-aside .icon { width: 16px; height: 16px; }

/* ── Subscribe CTA — one design, relocates by breakpoint so it's always
   reachable: rail (>1240px) → sidebar footer (900–1240px) → topbar
   (≤900px, replacing the plain "Channel" link there). Pure CSS visibility,
   no JS — each instance just mirrors the same breakpoints .rail/.sidebar
   already use, so there's nothing to keep in sync by hand. ─────────────── */
.sub-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 12px 16px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 600 14.5px/1 var(--font-body); text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.sub-cta:hover { background: var(--accent-ink); transform: translateY(-1px); }
.sub-cta .icon { width: 18px; height: 18px; }
.sub-cta.in-rail { margin-bottom: var(--s4); }
.sub-cta.in-sidebar { display: none; margin-bottom: 14px; }
.sub-cta.is-compact.in-topbar {
  display: none; width: auto; padding: 0 14px; height: 38px; border-radius: 8px; font-size: 13.5px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  max-width: 1400px; margin: 0 auto; padding: var(--s5) var(--s6) var(--s7);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--accent-ink); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Larger displays: content already fills the section (page-body has no narrow
   cap), so here we scale type and gutters up — bigger reading text and wider
   side columns — so the extra width reads as generous, not stretched. */
@media (min-width: 1500px) {
  body { font-size: 18px; }
  .page { padding-left: var(--s7); padding-right: var(--s7); }
  .rail { padding-right: var(--s5); }
}
@media (min-width: 2000px) {
  :root { --sidebar-w: 300px; --rail-w: 248px; }
  body { font-size: 19px; }
  .page { padding: var(--s7) var(--s8) var(--s8); }
}
@media (min-width: 2560px) {
  :root { --sidebar-w: 320px; --rail-w: 268px; }
  body { font-size: 20px; }
}

@media (max-width: 1240px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .rail { display: none; }
  .page { padding: var(--s6) var(--s6) var(--s8); }
  /* the rail (and its Subscribe button) just went away — pick it up here */
  .sub-cta.in-sidebar { display: flex; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle, .nav-close { display: inline-grid; }
  /* the sidebar is now a closed-by-default drawer — Subscribe moves to the
     one place that's always on screen regardless of nav/rail state */
  .sub-cta.in-sidebar { display: none; }
  .yt-link { display: none; }
  .sub-cta.is-compact.in-topbar { display: inline-flex; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 45;
    width: min(86vw, 320px); height: calc(100dvh - var(--topbar-h));
    transform: translateX(-101%); transition: transform .22s ease;
    box-shadow: var(--shadow-pop);
  }
  body[data-nav="open"] .sidebar { transform: translateX(0); }
  body[data-nav="open"] .scrim {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 44;
    background: rgba(20, 18, 14, .45);
  }
  .brand-word { display: none; }
  .page { padding: var(--s5) var(--s5) var(--s7); }
  .compare, .page-nav { grid-template-columns: 1fr; }
  .takeaway { grid-template-columns: 1.8rem 1fr; }
  .takeaway .tk-v { grid-column: 2; }
  .terms > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .page { padding: var(--s4) var(--s4) var(--s7); }
  .topbar { gap: var(--s2); padding: 0 var(--s2); }
  .search { max-width: none; }
  .search-kbd { display: none; }
  .yt-link span { display: none; }
  .yt-link { padding: 0 10px; }
  .page-card { grid-template-columns: 1fr; gap: var(--s3); }
  .pc-no { font-size: 22px; }
}

/* ── Motion / print ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .sidebar, .rail, .page-nav, .player-wrap, .scrim, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { display: block; }
  .page { padding: 0; }
  .step-block { break-inside: avoid; margin-top: 18pt; }
  .booklet-card, .compare-card, .callout, .controls { break-inside: avoid; border-color: #999; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}