/* The Technicians MBA: the site's stylesheet.
   Carried over from the approved PM-001 mockup (design/src/mockup.html) so the pages match it;
   change the design there first, then here. Values are the design system's tokens: forest,
   cream, emerald, coral for Subscribe only, sharp corners, pills only for Subscribe and chips.
   Fonts are the scheduler's, under the SIL Open Font License, subset to WOFF2 from src/fonts/
   by `npm run fonts:subset`. */
@font-face { font-family: "Libre Caslon Display"; src: url("/fonts/LibreCaslonDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/LibreCaslonText-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/LibreCaslonText-Italic-VF.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* Layout: dark academia meets circuit board, opened up for the web. A forest masthead and one
   forest "frame" band per page carry the video brand; content sits on cream, left-aligned and
   ruled. Values are the Technicians MBA design system's tokens (forest, cream, emerald, coral
   for Subscribe only, sharp corners, pills only for Subscribe and chips). */
:root {
  --bg: #faf6ea;          /* cream-50 */
  --surface: #f4ebd0;     /* cream-100 */
  --fg: #12140d;          /* forest-950 */
  --muted: #5d5844;       /* forest ink through cream-300: 6.5:1 on cream-50 */
  --rule: #cabf9d;        /* cream-300, decorative rules only */
  --field: #7c8478;       /* slate-500, control borders: 3.6:1 */
  --accent: #1e9e66;      /* emerald-500: fills, highlighter, focus */
  --accent-text: #12603f; /* emerald-700: emerald that carries text on cream, 7:1 */
  --on-accent: #12140d;
  --cta: #e0563b;         /* coral-500: the Subscribe button and nothing else */
  --band: #17160f;        /* forest-900: masthead, frame bands, footer */
  --band-fg: #f4ebd0;     /* cream-100 */
  --band-muted: #cabf9d;
  --band-line: rgba(244, 235, 208, 0.14);
  --thumb: #17160f;
  --glow: radial-gradient(60% 55% at 30% 45%, rgba(30, 158, 102, 0.2), transparent 70%);

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.1875rem; --step-2: 1.5rem;
  --step-3: 2rem; --step-4: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); --step-5: clamp(2.75rem, 1.8rem + 4.4vw, 4.75rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure: 66ch;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #17160f; --surface: #1b1e14; --fg: #f4ebd0; --muted: #cabf9d; --rule: #2c3120; --field: #7c8478;
  --accent-text: #1e9e66; --band: #12140d; --thumb: #1b1e14; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #17160f; --surface: #1b1e14; --fg: #f4ebd0; --muted: #cabf9d; --rule: #2c3120; --field: #7c8478;
  --accent-text: #1e9e66; --band: #12140d; --thumb: #1b1e14; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
/* The interactive pieces render with `hidden` and are revealed by their scripts. Classes such
   as .controls set display, which would otherwise beat the attribute and show them early. */
[hidden] { display: none !important; }
/* While the scripts start, the controls they'll reveal above the content keep their space, so
   the list below doesn't jump when they appear. Only when scripts run (the js class). */
.js .gloss-search[data-glossary-search][hidden] { display: grid !important; visibility: hidden; }
.js .decoder.panel[data-decoder][hidden] { display: grid !important; visibility: hidden; }
.js .controls[data-controls][hidden] { display: flex !important; visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; z-index: 30; }
.skip:focus { left: 1rem; }
/* Focus moves to <main> on navigation for screen readers; it needs no visible ring. */
main:focus { outline: none; }
/* The icon sprite takes no room; a class, not a style attribute, because the CSP blocks inline styles. */
.sprite { position: absolute; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* Kicker: mono caps led by the small triangle. */
.kicker { font: 600 var(--step--1)/1.2 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.7em; }
.kicker::before { content: ""; width: 0.62em; height: 0.54em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.band .kicker { color: var(--accent); }
/* The pay-off: italic Caslon on the emerald highlighter, ink text. Once per page, in the h1. */
.payoff { font-family: var(--serif); font-style: italic; background: var(--accent); color: var(--on-accent); padding: 0 0.18em 0.04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Buttons: sharp by default. The coral pill is reserved for Subscribe. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 1px solid transparent; border-radius: 0; font: 600 var(--step-0)/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: #34c88a; }
.btn-quiet { background: transparent; color: var(--fg); border-color: var(--field); }
.btn-quiet:hover { border-color: var(--fg); }
.band .btn-quiet { color: var(--band-fg); border-color: var(--band-muted); }
.btn-sub { background: var(--cta); color: #12140d; border-radius: 999px; font: 600 0.8125rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; padding-inline: 1.15rem; }
.btn-sub::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: #12140d; }
/* Darkening coral fails 4.5:1 with ink text, so hover adds an ink ring instead. */
.btn-sub:hover { box-shadow: inset 0 0 0 2px #12140d; }

/* Keyboard focus must not land under the sticky bars (WCAG 2.4.11). The masthead is about
   4.6rem tall; on the glossary, from 48rem, the sticky A to Z bar sits below it. */
html { scroll-padding-top: 5.5rem; }
@media (min-width: 48rem) { html:has(.az-top) { scroll-padding-top: 9rem; } }

/* Masthead: forest, sticky, the brand signature top-left as on every video frame. */
.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--band); color: var(--band-fg); border-top: 6px solid var(--accent); border-bottom: 1px solid var(--band-line); }
.masthead .wrap { display: flex; align-items: center; gap: 0.75rem 2rem; min-height: 4.25rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--band-fg); text-decoration: none; margin-right: auto; padding-block: 0.5rem; }
.brand img { height: 2.6rem; width: auto; }
.brand span { font: 700 1.0625rem/1.05 var(--serif); letter-spacing: 0.06em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 0.25rem 1.75rem; }
.nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: var(--band-fg); text-decoration: none; font-weight: 500; min-height: 2.75rem; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; padding-top: 2px; }
.nav ul a:hover { border-bottom-color: var(--band-muted); }
.nav ul a[aria-current="page"] { border-bottom-color: var(--accent); }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--band-muted); background: transparent; color: var(--band-fg); cursor: pointer; place-items: center; }
.menu-btn svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 2; }
.mast-sub { display: none; }
@media (max-width: 54rem) {
  /* The menu button needs JavaScript, so without it the nav simply shows open. */
  .js .menu-btn { display: inline-grid; }
  .masthead .wrap { gap: 0.5rem; }
  /* One row on a 375px phone: the pill drops its dot and tightens, the wordmark wraps to two lines. */
  .mast-sub { display: inline-flex; min-height: 2.5rem; padding-inline: 0.7rem; letter-spacing: 0.06em; font-size: 0.75rem; }
  .mast-sub::before { display: none; }
  .brand img { height: 2.2rem; }
  .masthead .brand { flex: 1 1 0; min-width: 0; }
  .brand span { font-size: 0.75rem; letter-spacing: 0.04em; max-width: 9.5rem; }
  .nav { display: flex; width: 100%; flex-direction: column; align-items: stretch; border-top: 1px solid var(--band-line); padding-block: 0.5rem 1rem; }
  .js .nav:not(.open) { display: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav .btn-sub { display: none; }
}
/* Hidden visually, not with display: none, so the link keeps its name for screen readers (the crest's alt is empty). */
@media (max-width: 22.5rem) { .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Frame band: forest ground, emerald glow, watermark crest at 6% as on the video frames. */
.band { background: var(--band); background-image: var(--glow); color: var(--band-fg); position: relative; overflow: hidden; }
.band .wrap { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem); }
.band-mark { position: absolute; right: max(-4rem, -6vw); top: 50%; translate: 0 -50%; height: 130%; max-height: 34rem; width: auto; opacity: 0.06; pointer-events: none; }
.hero { display: grid; gap: 1.5rem; max-width: 46rem; align-content: start; }
.hero h1 { font: 400 var(--step-5)/1.04 var(--display); letter-spacing: -0.01em; }
.hero .lede { font-size: var(--step-1); color: var(--band-muted); max-width: 38rem; }
.facts { font: 500 var(--step--1)/1.4 var(--mono); color: var(--band-muted); letter-spacing: 0.04em; }
.hero-grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.stat { display: grid; gap: 0.5rem; justify-items: start; }
.stat::before { content: ""; width: 4.5rem; height: 6px; background: var(--accent); margin-bottom: 0.5rem; }
.stat-num { font: 400 clamp(3.5rem, 2.4rem + 4.5vw, 6rem)/0.9 var(--display); letter-spacing: -0.01em; color: var(--band-fg); }
.stat-cap { font: 500 var(--step--1)/1.4 var(--mono); color: var(--band-muted); letter-spacing: 0.04em; }
.stat-split { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font: 500 var(--step--1)/1 var(--mono); color: var(--band-fg); font-variant-numeric: tabular-nums; }
.stat-split li { display: inline-flex; align-items: center; gap: 0.4rem; }
.stat-split .icon { width: 1.1rem; height: 1.1rem; color: var(--band-muted); }

/* Platform logos: YouTube leads and is largest; Instagram and TikTok follow, smaller. */
.platforms { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.platforms .lbl { font: 600 var(--step--1)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-muted); margin-right: 0.5rem; }
.plat { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: inherit; }
.plat .icon { width: 1.35rem; height: 1.35rem; }
.plat.yt .icon { width: 2rem; height: 2rem; }
.plat:hover { color: var(--accent); }

/* Subscribe form */
.sub-form { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 34rem; }
.sub-form label { width: 100%; font-weight: 600; }
.sub-form input { flex: 1 1 14rem; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field); border-radius: 0; background: var(--bg); color: var(--fg); }
.band .sub-form input { background: #faf6ea; color: #12140d; border-color: #faf6ea; }
.sub-form .note { width: 100%; font-size: var(--step--1); color: var(--muted); }
.band .sub-form .note { color: var(--band-muted); }
.sub-form .msg { width: 100%; font-weight: 600; }
.sub-form .msg:empty { display: none; }
.sub-form .msg.error { color: #a8321c; }
.band .sub-form .msg.error, :root[data-theme="dark"] .sub-form .msg.error { color: #ff9b85; }
.sub-form .msg.ok { color: var(--accent-text); }
.band .sub-form .msg.ok { color: var(--accent); }

/* Sections */
section.block { padding-block: clamp(2.5rem, 5vw, 4rem); }
section.block + section.block { border-top: 1px solid var(--rule); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.block-head h2, .h2 { font: 400 var(--step-3)/1.15 var(--serif); }
.block-head p { color: var(--muted); max-width: 40rem; width: 100%; }
.h3 { font: 400 var(--step-2)/1.2 var(--serif); }

/* Video cards */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 12rem); gap: 1rem; overflow-x: auto; padding-bottom: 0.75rem; scroll-snap-type: x proximity; }
.strip > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.25rem, 100%), 1fr)); gap: 1.75rem 1rem; }
.vcard { display: grid; grid-template-areas: "thumb" "meta" "links"; grid-template-rows: auto auto 1fr; gap: 0.4rem; min-width: 0; position: relative; }
/* The title link carries the forest ground itself, so its contrast never depends on the layer
   behind it; the thumb layer adds the kicker and duration on top and ignores the pointer. */
.thumb { grid-area: thumb; z-index: 1; pointer-events: none; aspect-ratio: 9 / 16; max-width: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 0.85rem 0.8rem; color: #f4ebd0; }
.thumb .tk { position: relative; font: 600 0.625rem/1.2 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: flex; gap: 0.5em; align-items: center; }
.thumb .tk::before { content: ""; width: 0.6em; height: 0.52em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.thumb .dur { position: relative; align-self: flex-end; font: 500 0.75rem/1 var(--mono); background: rgba(18, 20, 13, 0.85); padding: 0.3rem 0.4rem; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vtitle { grid-area: thumb; font: 400 1.075rem/1.18 var(--serif); }
.vtitle a { display: flex; align-items: center; height: 100%; padding: 2.4rem 0.8rem 2.6rem; color: #f4ebd0; text-decoration: none; background: radial-gradient(60% 40% at 50% 46%, #1b3a29, transparent 70%), var(--thumb); }
.vtitle a span { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.vtitle a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.art-frame .vcard { grid-template-areas: "thumb" "title" "meta" "links"; grid-template-rows: auto auto auto 1fr; }
.art-frame .vtitle { grid-area: title; font-size: 0.975rem; }
.art-frame .vtitle a { color: var(--fg); padding: 0; height: auto; background: none; }
.art-frame .thumb { background: var(--thumb); z-index: 0; }
.vmeta { grid-area: meta; font: 500 0.75rem/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.vlinks { grid-area: links; display: flex; align-items: center; margin-left: -0.6rem; align-self: start; color: var(--fg); }
.vlinks .plat:not(.yt) { color: var(--muted); }
.vlinks .plat:not(.yt) .icon { width: 1.1rem; height: 1.1rem; }
.vlinks .plat.yt .icon { width: 1.75rem; height: 1.75rem; }
.vlinks .plat:hover { color: var(--accent-text); }
.watched-tag { margin-left: auto; font: 600 0.625rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--field); padding: 0.25rem 0.35rem; }
.vcard.is-watched .thumb, .vcard.is-watched .vtitle a { opacity: 0.6; }
.vcard.flash .vtitle a { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Topic directory: ruled rows, not cards. */
.directory { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.directory li { border-bottom: 1px solid var(--rule); }
.directory a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name count" "desc count"; gap: 0.15rem 1.5rem; padding: 1.1rem 0.25rem; color: var(--fg); text-decoration: none; }
.directory a:hover .dname { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.dname { grid-area: name; font: 400 var(--step-2)/1.2 var(--serif); }
.ddesc { grid-area: desc; color: var(--muted); }
.dcount { grid-area: count; align-self: center; font: 500 var(--step--1)/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcount::after { content: " →"; color: var(--accent-text); }
/* The three themes from the channel's tagline, side by side on wide screens. Each column's
   heading is one phrase of the tagline, so reading across spells it out. */
.themes { display: grid; gap: 2.5rem; }
.theme-h { font: 400 var(--step-2)/1.15 var(--display); color: var(--accent-text); margin: 0 0 0.4rem; }
.theme-def { color: var(--muted); margin: 0 0 1rem; max-width: 34rem; }
@media (min-width: 64rem) {
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  /* Rows carry the theme's height; the narrower columns take the smaller name size. */
  .themes .dname { font-size: var(--step-1); }
  .theme-def { min-height: 3em; }
}
.foot-brand .tagline { font: italic 400 var(--step-1)/1.35 var(--serif); }
/* Two columns read row by row; both columns start under the same ink rule. */
@media (min-width: 60rem) { .directory.cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

.split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } .split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split.even { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--surface); padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; }

/* Glossary */
.term-word { font: 400 var(--step-4)/1 var(--display); }
.tod p { max-width: var(--measure); }
.tod .def { font-size: var(--step-1); margin-top: 0.75rem; }
/* A hanging Caslon quote mark in emerald instead of a side rule. */
.heard { font: italic 400 var(--step-1)/1.45 var(--serif); margin: 0; padding-left: 1.6rem; position: relative; }
.heard::before { content: "\201C"; position: absolute; left: 0; top: -0.2em; font: 400 2.75rem/1 var(--display); color: var(--accent-text); }
.label { font: 600 var(--step--1)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
/* minmax(0, 1fr): a long unbroken term would otherwise stretch its column past a 320px screen. */
.letter-group { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid var(--rule); padding-block: 1rem; }
.letter-group h2 { font: 400 var(--step-3)/1 var(--display); color: var(--accent-text); }
.letter-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.letter-group a { font: 400 var(--step-1)/1.3 var(--serif); }
.letter-group p { color: var(--muted); }
.letter-group li { overflow-wrap: anywhere; }

/* Decoder */
.decoder { display: grid; gap: 1rem; }
.decoder textarea { width: 100%; min-height: 7.5rem; padding: 0.75rem; border: 1px solid var(--field); border-radius: 0; background: var(--bg); color: var(--fg); resize: vertical; line-height: 1.5; }
.decoder label { font-weight: 600; }
.decoded { background: var(--bg); border: 1px solid var(--rule); padding: 1rem; line-height: 2; min-height: 4rem; overflow-wrap: anywhere; }
.hit { font: inherit; border: 0; padding: 0.05rem 0.2rem; background: color-mix(in srgb, var(--accent) 22%, transparent); border-bottom: 2px solid var(--accent); color: inherit; cursor: pointer; }
.hit[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.explain { border-top: 1px solid var(--rule); padding-top: 1rem; min-height: 5.5rem; }
.explain h3 { font: 400 var(--step-2)/1.2 var(--serif); }
.explain p { margin-top: 0.35rem; max-width: var(--measure); }
.count-line { font: 500 var(--step--1)/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.how { font-size: var(--step--1); color: var(--muted); }

/* Listing pages */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) 0; display: grid; gap: 1rem; }
.page-head h1 { font: 400 var(--step-5)/1.04 var(--display); letter-spacing: -0.01em; }
.page-head .intro { font-size: var(--step-1); max-width: var(--measure); }
.crumbs { font: 500 var(--step--1)/1.4 var(--mono); color: var(--muted); }
.crumbs a { color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; padding-block: 1.25rem; border-block: 1px solid var(--rule); margin-bottom: 1.5rem; }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.field label, .chips-label { font: 600 var(--step--1)/1.2 var(--sans); }
.field input, .field select { min-height: 2.75rem; padding: 0.45rem 0.7rem; border: 1px solid var(--field); border-radius: 0; background: var(--bg); color: var(--fg); }
.field.grow { flex: 1 1 16rem; }
.field.full { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { min-height: 2.75rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--field); background: transparent; cursor: pointer; font-size: 0.9rem; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.empty { padding: 2rem; border: 1px dashed var(--field); display: grid; gap: 0.75rem; justify-items: start; max-width: 40rem; }
.empty h3 { font: 400 var(--step-2)/1.2 var(--serif); overflow-wrap: anywhere; }
.more { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.list-plain { list-style: none; padding: 0; margin: 0; display: grid; }
.list-plain li { border-bottom: 1px solid var(--rule); padding-block: 0.9rem; display: grid; gap: 0.2rem; }
.list-plain .t { font: 400 var(--step-1)/1.3 var(--serif); }
.list-plain .m { font: 500 var(--step--1)/1.4 var(--mono); color: var(--muted); }
.term-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.term-chips a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border: 1px solid var(--field); border-radius: 999px; color: var(--fg); text-decoration: none; font-family: var(--serif); }
.term-chips a:hover { border-color: var(--fg); }

/* Glossary entry */
.entry { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 60rem) { .entry { grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; } }
.entry-main { display: grid; gap: 1.75rem; min-width: 0; }
.entry-main h1 { font: 400 clamp(3rem, 2rem + 5vw, 5.5rem)/1 var(--display); letter-spacing: -0.02em; }
.definition { font: 400 var(--step-2)/1.4 var(--serif); max-width: 36ch; }
.entry-side { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.az { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.az a, .az span { width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; font: 500 0.875rem/1 var(--mono); text-decoration: none; }
.az a { color: var(--fg); }
.az a:hover { background: var(--surface); }
.az span, .az a:not([href]) { color: var(--rule); }
.az a:not([href]):hover { background: none; }
.results { list-style: none; padding: 0; margin: 0; max-height: 22rem; overflow-y: auto; border-top: 1px solid var(--rule); }
.results li a { display: grid; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; }
.results li a:hover b { text-decoration: underline; }
.results b { font: 400 1.05rem/1.3 var(--serif); }
.results small { color: var(--muted); font-size: 0.85rem; }
.draft-flag { font: 600 0.6875rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--field); padding: 0.35rem 0.5rem; justify-self: start; }

/* About and Book */
.about-head { display: grid; gap: 2.5rem; align-items: start; }
.headshot { margin: 0 0 1.5rem; }
.headshot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.headshot figcaption { margin-top: 0.4rem; text-align: right; font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.02em; }
.headshot figcaption a { color: var(--band-muted); }
@media (min-width: 56rem) { .about-head { grid-template-columns: minmax(0, 1fr) 21rem; } }
/* The link tree: where to find Simon. YouTube leads, filled; the rest are outlined rows. */
.linktree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.linktree a { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.85rem; min-height: 3.5rem; padding: 0.6rem 1rem; border: 1px solid var(--band-line); color: var(--band-fg); text-decoration: none; background: rgba(244, 235, 208, 0.03); }
.linktree a:hover { border-color: var(--band-muted); }
.linktree .icon { width: 1.5rem; height: 1.5rem; justify-self: center; }
.linktree b { font: 600 1rem/1.2 var(--sans); }
.linktree small { display: block; font: 500 0.75rem/1.3 var(--mono); color: var(--band-muted); letter-spacing: 0.04em; }
.linktree .go { font: 500 0.875rem/1 var(--mono); color: var(--band-muted); }
.linktree li:first-child a { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.linktree li:first-child small, .linktree li:first-child .go { color: var(--on-accent); }
.linktree li:first-child .icon { width: 2rem; height: 2rem; }
.linktree .mono-mark { font: 700 1.125rem/1 var(--serif); justify-self: center; }
.placeholder { border: 1px dashed var(--field); padding: 1rem; color: var(--muted); font: 500 0.875rem/1.5 var(--mono); }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.25rem 1.25rem; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.timeline .yr { font: 500 var(--step--1)/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline b { font: 400 var(--step-1)/1.3 var(--serif); display: block; }
.timeline span { color: var(--muted); }
@media (max-width: 30rem) { .timeline li { grid-template-columns: 1fr; } }
/* Headed cards for a section's areas, such as the talk areas on Book: ruled like the pillars,
   with each heading in the display face so the areas read before the detail. */
.card-areas { display: grid; border-top: 1px solid var(--fg); }
.card-area { display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.card-area h3 { font: 400 var(--step-3)/1.1 var(--display); color: var(--accent-text); }
.card-area p { max-width: 40ch; }
@media (min-width: 48rem) {
  .card-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 72rem) {
  .card-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .card-area { padding-right: 1.5rem; }
  .card-area + .card-area { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
}
.cards-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cards-foot p { margin: 0; max-width: 46rem; }
.pillars { display: grid; border-top: 1px solid var(--fg); }
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, 1fr); } .pillars > div + div { border-left: 1px solid var(--rule); padding-left: 1.25rem; } }
.pillars > div { padding: 1.25rem 1.25rem 1.25rem 0; display: grid; gap: 0.4rem; align-content: start; border-bottom: 1px solid var(--rule); }
.pillars h3 { font: 400 var(--step-2)/1.2 var(--serif); }
.quotes { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; display: grid; gap: 0.75rem; align-content: start; }
.quote blockquote { margin: 0; font: italic 400 var(--step-1)/1.4 var(--serif); }
.quote figcaption { font: 500 var(--step--1)/1.4 var(--mono); color: var(--muted); }
.prose { display: grid; gap: 1rem; max-width: var(--measure); align-content: start; }
.talks { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.talks th, .talks td { text-align: left; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.talks th { font: 600 var(--step--1)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.talks td:first-child { font: 500 var(--step--1)/1.5 var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.talks td.t { font-family: var(--serif); font-size: 1.05rem; }
/* Fixed columns, so the talks, coverage and writing tables under each other line up. */
.talks { table-layout: fixed; min-width: 34rem; }
.talks th:first-child { width: 6.5rem; }
.talks th:last-child { width: 32%; }
/* On a phone, each row stacks: the date beside the title, and where underneath, so nothing
   scrolls sideways. The headings stay for screen readers. */
@media (max-width: 40rem) {
  .talks { min-width: 0; }
  .talks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .talks tr { display: grid; grid-template-columns: 5rem minmax(0, 1fr); border-bottom: 1px solid var(--rule); padding: 0.7rem 0; }
  .talks td { border: 0; padding: 0; }
  .talks td:last-child { grid-column: 2; color: var(--muted); font-size: var(--step--1); margin-top: 0.25rem; }
}
.citations { margin-top: 2.5rem; }
.citations h3 { margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; }

/* Subscribe band at the foot of every page */
.subscribe-band { background: var(--surface); border-top: 1px solid var(--rule); }
.subscribe-band .wrap { padding-block: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .subscribe-band .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.subscribe-band h2 { font: 400 var(--step-4)/1.08 var(--display); }

/* Footer */
footer.site { background: var(--band); color: var(--band-muted); }
footer.site .wrap { padding-block: 3rem 2.5rem; display: grid; gap: 2rem; }
@media (min-width: 48rem) { footer.site .wrap { grid-template-columns: 2fr 1fr 1fr; } }
footer.site a { color: var(--band-fg); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
footer.site ul a { display: inline-flex; min-height: 2.5rem; align-items: center; }
footer.site h2 { font: 600 var(--step--1)/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-muted); margin-bottom: 0.5rem; }
footer.site .brand { margin: 0; justify-self: start; }
footer.site .platforms { margin-left: -0.6rem; color: var(--band-fg); }
.fine { font: 500 0.75rem/1.5 var(--mono); letter-spacing: 0.04em; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Added for the built site (PM-004): pieces the mockup drew inline or didn't need. */
ul.strip { list-style: none; margin: 0; padding: 0 0 0.75rem; }
.listing { padding-top: 2rem; }
.listing .grid { margin-top: 0.5rem; }
.small-head { margin-bottom: 0.5rem; }
.stack { display: grid; gap: 1rem; align-content: start; }
.stack-lg { display: grid; gap: 1.5rem; }
.block-head.flush { margin: 0; }
.gap-below { margin-bottom: 1rem; }
.gap-above { margin-top: 1.25rem; }
.muted { color: var(--muted); }
.term-word { margin-top: 0.75rem; }
.tod-link { margin-top: 1rem; }
.term-title { display: grid; gap: 0.6rem; }
.heard p { margin: 0; }
.quote blockquote p { margin: 0; }
.label.on-band { color: var(--band-muted); }
.foot-brand { display: grid; gap: 1rem; align-content: start; }
.foot-brand p { max-width: 34rem; }
.page-head .intro p + p { margin-top: 0.5rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.years { display: grid; gap: 2.5rem; max-width: 56rem; }
/* The A to Z bar sits above the index in one compact row. On wider screens it stays put while
   the reader scrolls a long letter; on phones it would cover too much of the screen. */
.az-top { margin-bottom: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--rule); background: var(--bg); }
.az-top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.az-top .label { margin: 0; }
.az-top .az a, .az-top .az span { width: 2.1rem; height: 2.5rem; }
.letter-group { scroll-margin-top: 5.5rem; }
@media (min-width: 48rem) {
  .az-top { position: sticky; top: 4.6rem; z-index: 5; }
  .letter-group { scroll-margin-top: 9rem; }
}
/* Smooth scrolling across a 1,000-term index takes seconds, so the glossary jumps instead. */
html:has(.az-top) { scroll-behavior: auto; }
.letter-group li.see a { font-style: italic; }
.also { color: var(--muted); }
/* The legal and financial notes: quiet, but impossible to miss next to the definition. */
.author { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 2rem; max-width: var(--measure); font-size: var(--step--1); color: var(--muted); }
.author b { color: var(--fg); font-weight: 600; }
.advice-note { border-left: 3px solid var(--accent); padding: 0.5rem 0 0.5rem 0.9rem; font-size: var(--step--1); color: var(--muted); max-width: var(--measure); }
/* Article bodies: the prose measure, with room around headings and figures. */
.article-body { max-width: var(--measure); display: grid; gap: 1rem; font-size: 1.0625rem; }
.article-body h2 { font: 400 var(--step-3)/1.15 var(--serif); margin-top: 1.5rem; }
.article-body h3 { font: 400 var(--step-2)/1.2 var(--serif); margin-top: 1rem; }
.article-body ul, .article-body ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.article-body blockquote { margin: 0; padding-left: 1.6rem; font: italic 400 var(--step-1)/1.45 var(--serif); }
.article-body figure { margin: 0.5rem 0; }
.article-body img { max-width: 100%; height: auto; }
.article-body figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.4rem; }

/* PM-005: the interactive pieces */
.stack-sm { display: grid; gap: 0.6rem; align-content: start; }
.gap-top-sm { margin-top: 0.4rem; }
.measure { max-width: var(--measure); }
/* The results scroll, so the focus ring sits inside the box rather than being clipped. */
.results a:focus-visible { outline-offset: -3px; }
.results a[aria-current="page"] b { color: var(--accent-text); }
/* The glossary index: search over the A to Z, the decoder beside it on wide screens. On
   phones the decoder comes after the search and before the long list, so it isn't buried
   under 1,200 terms. The two columns are keyed to .js (set before first paint) rather than to
   the decoder being visible, so the page doesn't jump sideways when the decoder's data
   arrives. Without JavaScript the list takes the full width. */
/* minmax(0, 1fr) and min-width: 0 let the column shrink below its widest child (the search
   field and decoder), which otherwise forces a sideways scroll under 375px. */
.gloss-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.gloss-layout > * { min-width: 0; }
.gloss-search { max-width: 36rem; }
@media (min-width: 56rem) {
  .js .gloss-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "search panel" "list panel";
    column-gap: 3.5rem;
  }
  .js .gloss-layout > .gloss-search { grid-area: search; }
  .js .gloss-layout > .decoder { grid-area: panel; }
  .js .gloss-layout > .gloss-list { grid-area: list; }
}