/* Degrees of Freedom — site styles. Values follow docs/HANDOFF.md; tokens live in /tokens. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
p, h1, h2, figure, blockquote { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--selection); }
input::placeholder { color: var(--text-faint); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* First paint: no transitions until the initial state is applied. */
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ---------- Layout ---------- */
.site {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
  transition: opacity 700ms var(--ease);
}
html.site-hidden .site { opacity: 0; }
html.brand-hidden [data-brand] { opacity: 0; }
[data-brand] { transition: opacity 180ms var(--ease); }

main { padding: 48px 44px 96px; min-width: 0; }

/* ---------- Rail ---------- */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.rail-brand { display: flex; flex-direction: column; gap: 18px; }
.wordmark, .wordmark:hover {
  align-self: flex-start;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.search-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.search-trigger:hover { border-color: var(--border-strong); color: var(--text); }
.kbd-hint { font-family: var(--font-mono); font-size: 10.5px; }

.rail-mid { display: grid; flex: 1 0 auto; align-content: start; }
.rail-layer {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: opacity 260ms var(--ease) 220ms, transform var(--dur-3) var(--ease) 220ms;
}
.rail-layer[aria-hidden="true"] { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.rail-menu { gap: 36px; }
.rail-menu[aria-hidden="true"] { transform: translateY(-8px); }
.rail-alt { gap: 11px; }
.rail-alt[aria-hidden="true"] { transform: translateY(8px); }

.rail-nav, .rail-list { display: flex; flex-direction: column; gap: 11px; }
.rail-nav { font-size: 13px; line-height: 1.35; }
.rail-nav a { color: var(--text-muted); }
.rail-nav a:hover, .rail-nav a[aria-current="page"] { color: var(--text); }

.rail-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--text-muted);
}
.rail-label a { color: var(--accent); }

/* Every rail row: 13px sans at 1.35, mono 11px number on the right. */
.rail-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease);
}
.rail-row .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.rail-row:hover { color: var(--accent); }
.rail-row.is-active { color: var(--text); }
.rail-row.is-active .n { color: var(--accent); }
.rail-row.is-active:hover { color: var(--accent); }
/* Topic rows read as text by default; the active topic is accent. */
.rail-row--topic { color: var(--text); }
.rail-row--topic.is-active, .rail-row--topic.is-active .n { color: var(--accent); }

.rail-back { font-size: 13px; line-height: 1.35; color: var(--text-muted); margin-bottom: 25px; align-self: flex-start; }
.rail-back:hover { color: var(--text); }

.progress { height: 2px; background: var(--border); margin-top: 8px; }
.progress-fill { height: 2px; width: 0; background: var(--accent); transition: width var(--dur-2) var(--ease); }

.rail-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.newsletter { display: flex; flex-direction: column; gap: 12px; }
.rail-text { font-size: 13px; line-height: 1.45; }
.join {
  display: flex;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease);
}
.join:focus-within { border-color: var(--accent); }
.join input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui-sm);
  color: var(--text);
}
.join button {
  padding: 0 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  transition: background-color var(--dur-1) var(--ease);
}
.join button:hover { background: var(--accent-hover); }
.theme-toggle {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease);
}
.theme-toggle:hover { color: var(--text); }

/* ---------- Shared ---------- */
.page-label { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); }
.page-title {
  margin: 12px 0 36px;
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.tag {
  padding: 2px 7px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-1);
}
.list-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.list-head--spaced { margin-top: 56px; }
.striped { background: repeating-linear-gradient(135deg, var(--placeholder-a) 0 6px, var(--placeholder-b) 6px 12px); }

/* Accordion: grid rows 1fr ↔ 0fr with an overflow-hidden inner. */
.collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-3) var(--ease-accordion), opacity 260ms var(--ease);
}
.collapse.is-collapsed { grid-template-rows: 0fr; }
.collapse-inner { overflow: hidden; min-height: 0; }
#index-head.is-collapsed { opacity: 0; }

/* ---------- Thoughts index ---------- */
.index-cols, .post-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 112px 84px;
  gap: 16px;
}
.index-cols {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.index-cols span:last-child { text-align: right; }

.post { transition: grid-template-rows var(--dur-3) var(--ease-accordion), opacity 300ms var(--ease); }
.post.is-collapsed { opacity: 0; }
.post-head, .post-head:hover {
  padding: 18px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-3) var(--ease);
}
.post-head:hover { background: var(--surface-hover); }
.post.is-open .post-head { border-bottom-color: transparent; background: transparent; }
.post-no { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); transition: color var(--dur-2) var(--ease); }
.post.is-latest .post-no, .post.is-open .post-no { color: var(--accent); }
.post-title {
  font-size: var(--fs-post);
  line-height: var(--lh-post);
  letter-spacing: var(--ls-post);
  font-weight: 600;
  text-wrap: balance;
  transition: font-size var(--dur-3) var(--ease-accordion), letter-spacing var(--dur-3) var(--ease-accordion);
}
.post-dek {
  font-family: var(--font-serif);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 4px;
  text-wrap: pretty;
  transition: font-size var(--dur-3) var(--ease-accordion), margin-top var(--dur-3) var(--ease-accordion);
}
.post.is-open .post-title { font-size: var(--fs-article); line-height: var(--lh-article); letter-spacing: var(--ls-article); }
.post.is-open .post-dek { font-size: var(--fs-dek); margin-top: 14px; }
.post-topic, .post-date { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); }
.post-topic { text-transform: uppercase; transition: opacity 260ms var(--ease); }
.post.is-open .post-topic { opacity: 0; }
.post-date { text-align: right; }
.post.is-open .post-date { color: var(--text); }

/* ---------- Article ---------- */
.article {
  padding: 4px 0 72px 60px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease) 140ms, transform var(--dur-3) var(--ease) 80ms;
}
.post.is-open .article { opacity: 1; transform: none; }
.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: var(--measure);
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-transform: uppercase;
}
.article-meta > div { display: flex; gap: 10px; align-items: center; }
.article-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(160px, 240px); gap: 48px; }

.article-body {
  margin-top: 32px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.prose p, .article-body p { margin: 0 0 20px; text-wrap: pretty; }
.article-body h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  margin: 40px 0 12px;
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.article-body h2 .sec-n { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--accent); }
.article-body blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--border-strong);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--text);
}
.article-body figure { margin: 32px 0; }
.ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.article-body figcaption { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-muted); margin-top: 8px; }
sup.fn { font-family: var(--font-mono); font-size: 10px; line-height: 0; color: var(--accent); }

.data-table { margin: 32px 0; border: 1px solid var(--border); border-radius: var(--radius-2); font-family: var(--font-mono); line-height: 1.5; }
.data-table-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.data-table-grid { display: grid; font-size: var(--fs-data); color: var(--text); }
.data-table-grid > span { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.data-table-grid > span.last-row { border-bottom: 0; }
.data-table-grid > .th, .data-table-grid > .empty { color: var(--text-muted); }
.data-table-grid > .num { text-align: right; }
.data-table-grid > .hl { color: var(--accent); }

.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--text-muted); }
.note-n { font-family: var(--font-mono); font-size: 10px; color: var(--accent); margin-right: 4px; }
.sidenotes { position: relative; padding-top: 120px; }
.sidenotes.is-placed { padding-top: 0; }
.sidenotes.is-placed .note { position: absolute; left: 0; right: 0; }
.sidenotes:not(.is-placed) .note + .note { margin-top: 24px; }
.notes-end {
  display: none;
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: 10px;
}
.notes-end .rail-label { display: block; }

.read-next { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--border-strong); }
.read-next .rail-label { margin-bottom: 4px; }
.read-next-row, .read-next-row:hover {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 112px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  color: var(--text);
}
.read-next-row:hover { color: var(--accent); }
.read-next-no { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--text-muted); }
.read-next-title { font-size: 17px; font-weight: 600; letter-spacing: var(--ls-post); }
.read-next-topic { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); text-transform: uppercase; text-align: right; }

/* Under 1180px the sidenotes move into a NOTES block at the end. */
@media (max-width: 1179px) {
  .article-grid { grid-template-columns: minmax(0, var(--measure)); }
  .sidenotes { display: none; }
  .notes-end { display: flex; }
}

/* ---------- Interviews ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border-strong);
  transition: grid-template-columns var(--dur-3) var(--ease-accordion), column-gap var(--dur-3) var(--ease-accordion);
}
.feature.is-transcript { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; }
.feature-main { min-width: 0; }

.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-2); overflow: hidden; cursor: pointer; }
.player-label { position: absolute; top: 14px; left: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.player-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text);
  transition: opacity var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.play-btn:hover { background: var(--text); color: var(--bg); }
.player.is-playing .play-btn { opacity: 0; }
.play-btn::before, .play-glyph::before { content: "▶"; }
.player.is-playing .play-btn::before, .player.is-playing .play-glyph::before { content: "❚❚"; }
.player-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.player-track { flex: 1; height: 2px; background: var(--border); }
.player-fill { height: 2px; width: 0; background: var(--accent); transition: width 250ms linear; }

.ep-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-transform: uppercase;
}
.ep-title { margin-top: 14px; font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.ep-guest { margin-top: 10px; font-size: var(--fs-ui); color: var(--text); }
.ep-dek {
  margin-top: 14px;
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.tr-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--measure);
  margin-top: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-align: left;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease);
}
.tr-toggle:hover { color: var(--text); }
.tr-toggle[aria-expanded="true"] { border-bottom-color: transparent; }
.tr-lines { max-width: var(--measure); padding-top: 8px; opacity: 0; transition: opacity 420ms var(--ease) 120ms; }
#transcript:not(.is-collapsed) .tr-lines { opacity: 1; }
.tr-empty { padding: 20px 0; font-family: var(--font-serif); font-size: 16px; color: var(--text-muted); }
.tr-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  text-align: left;
  transition: background-color var(--dur-1) var(--ease);
}
.tr-line:hover { background: var(--surface-hover); }
.tr-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); transition: color var(--dur-2) var(--ease); }
.tr-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-micro); color: var(--text-muted); margin-bottom: 4px; }
.tr-text { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; transition: color var(--dur-2) var(--ease); }
.tr-line.is-current .tr-time { color: var(--accent); }
.tr-line.is-current .tr-text { color: var(--text); }

.chapters {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  overflow: hidden;
  transition: opacity 260ms var(--ease);
}
.feature.is-transcript .chapters { opacity: 0; pointer-events: none; }
.chapters-list { display: flex; flex-direction: column; gap: 11px; }
.chapters-list .rail-row { gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.chapter-links { display: flex; gap: 16px; margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); }
.chapter-links button { font-family: inherit; font-size: inherit; color: inherit; transition: color var(--dur-1) var(--ease); }
.chapter-links button:hover { color: var(--text); }

.ep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 24px; }
.ep-card, .ep-card:hover { display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.ep-card:hover { color: var(--accent); }
.ep-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2);
  outline: 1px solid transparent;
  outline-offset: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  transition: outline-color var(--dur-2) var(--ease);
}
.ep-card.is-featured .ep-thumb { outline-color: var(--accent); }
.ep-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-1);
  font-size: 10px;
}
.ep-card-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; }
.ep-card-title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.ep-card-guest { font-size: var(--fs-ui-sm); color: var(--text-muted); }

/* Main column under 820px (viewport − rail − padding): single-column player, 2-up grid. */
@media (max-width: 1127px) {
  .feature, .feature.is-transcript { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .chapters { margin-top: 32px; }
  .feature.is-transcript .chapters { max-height: 0; margin-top: 0; }
  .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- About ---------- */
.about { max-width: 760px; }
.about-prose {
  max-width: var(--measure);
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.about-prose p:last-child { margin-bottom: 0; }
.cover-row, .cover-row:hover {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 120px;
  gap: 16px;
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease);
}
.cover-row:hover { background: var(--surface-hover); }
.cover-label { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cover-desc { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.cover-counts { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); text-align: right; }
.about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.person { padding: 14px 0; border-bottom: 1px solid var(--border); }
.person-name { font-size: 15px; font-weight: 600; }
.person-role { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.contact { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.contact a { font-family: var(--font-mono); font-size: 11.5px; }

/* ---------- Search overlay (the only blur/translucency in the system) ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  background: color-mix(in oklch, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
.search-panel {
  width: 640px;
  max-width: calc(100vw - 48px);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-3);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform var(--dur-3) var(--ease);
}
.scrim.is-open .search-panel { transform: none; }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--border); }
.search-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.key-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
}
.search-scroll { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
.search-results-label { padding: 12px 18px 6px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--text-muted); }
.result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 110px;
  gap: 14px;
  padding: 12px 18px;
  align-items: baseline;
  cursor: pointer;
}
.result.is-selected { background: var(--surface-hover); }
.result-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.result-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.result.is-selected .result-code, .result.is-selected .result-title { color: var(--accent); }
.result-dek {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; text-align: right; }
.search-empty { padding: 20px 18px 24px; font-family: var(--font-serif); font-size: 15px; color: var(--text-muted); }
.search-foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-micro);
  color: var(--text-muted);
}

/* ---------- Logo intro ---------- */
.intro-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background: var(--bg); }
.intro-word {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: pre;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}
.intro-word span { display: inline-block; }

/* ---------- Small screens ----------
   The design is specified for desktop. Below 760px the rail stacks above the
   content and the index drops its topic column so nothing scrolls sideways. */
@media (max-width: 759px) {
  .site { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 24px 16px; gap: 28px; }
  main { padding: 32px 16px 72px; }
  .index-cols, .post-head { grid-template-columns: 36px minmax(0, 1fr) 52px; gap: 12px; }
  .index-cols span:nth-child(3), .post-topic { display: none; }
  .post.is-open .post-title { font-size: 30px; }
  .article { padding-left: 0; }
  .article-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .read-next-row { grid-template-columns: 36px minmax(0, 1fr); }
  .read-next-topic { display: none; }
  .ep-grid { grid-template-columns: minmax(0, 1fr); }
  .cover-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cover-counts { text-align: left; }
  .about-cols { grid-template-columns: minmax(0, 1fr); }
  .result { grid-template-columns: 44px minmax(0, 1fr); }
  .result-kind { display: none; }
}