:root {
  --paper: #f5f0e8;
  --paper-deep: #ebe3d7;
  --ink: #202321;
  --muted: #6e736d;
  --line: rgba(32, 35, 33, 0.14);
  --accent: #d94e2d;
  --accent-dark: #9d3420;
  --sage: #a7b5a3;
  --serif: "Newsreader", "Songti SC", Georgia, serif;
  --sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
.main, .rail, .episode-nav, .series-grid, .episode-card { min-width: 0; max-width: 100%; }
img { max-width: 100%; }
html { scroll-behavior: smooth; }
body {
  overflow-wrap: anywhere;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
}
a { color: inherit; }
button, input { font: inherit; }
select { display: block; width: 100%; margin-top: 8px; padding: 8px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); font: inherit; }
.chapter-directory { margin: 24px 0; padding: 16px; border: 1px solid var(--line); }
.chapter-directory summary { cursor: pointer; }
.chapter-directory nav { display: grid; gap: 10px; margin-top: 16px; }
.chapter { scroll-margin-top: 20px; }
button { cursor: pointer; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
}
.rail {
  border-right: 1px solid var(--line);
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(245, 240, 232, .88);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 15px var(--mono);
  letter-spacing: .04em;
  text-transform: lowercase;
}
.brand-mark {
  width: 25px;
  height: 25px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.rail-series { padding-top: 6px; }
.eyebrow, .meta-label, .section-kicker {
  color: var(--accent-dark);
  font: 500 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rail-series h2 {
  font: 500 25px/1.15 var(--serif);
  margin: 10px 0 12px;
}
.rail-series p { color: var(--muted); margin: 0; font-size: 13px; }
.search {
  position: relative;
}
.search input {
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  padding: 10px 12px 10px 35px;
  border-radius: 2px;
  color: var(--ink);
  outline: none;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 78, 45, .12); }
.search::before { content: "⌕"; position: absolute; left: 12px; top: 6px; color: var(--muted); font-size: 20px; z-index: 1; }
.episode-nav { display: grid; gap: 10px; overflow: auto; }
.episode-link {
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 14px 0 12px;
  color: var(--ink);
}
.episode-link:hover, .episode-link.active { color: var(--accent-dark); }
.episode-link .number { color: var(--muted); font: 11px var(--mono); margin-right: 8px; }
.episode-link strong { font: 500 16px/1.25 var(--serif); display: block; margin-top: 7px; }
.episode-link small { color: var(--muted); display: block; font-size: 11px; margin-top: 5px; }
.rail-foot { color: var(--muted); margin-top: auto; font: 11px/1.7 var(--mono); }
.rail-foot span { display: block; color: var(--ink); }

.main { min-width: 0; padding: 34px clamp(24px, 5vw, 80px) 90px; }
.main-inner { max-width: 1080px; margin: 0 auto; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 72px; }
.topline .context { color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; }
.topline a { font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--ink); }
.hero { max-width: 830px; margin-bottom: 74px; }
.hero h1 { font: 500 clamp(48px, 8vw, 106px)/.94 var(--serif); letter-spacing: -.045em; margin: 18px 0 25px; }
.hero .lede { font: 500 clamp(18px, 2vw, 25px)/1.45 var(--serif); max-width: 680px; margin: 0; }
.hero-note { color: var(--muted); font-size: 12px; margin-top: 21px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0 0 26px; }
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.episode-card { min-width: 0; }
.episode-card button { padding: 0; border: 0; background: none; color: inherit; text-align: left; width: 100%; }
.cover {
  aspect-ratio: 1.45 / 1;
  background: var(--paper-deep);
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(217,78,45,.05), rgba(32,35,33,.25)); pointer-events: none; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); transition: transform .45s ease; }
.episode-card:hover img { transform: scale(1.03); }
.card-index { color: var(--accent); font: 11px var(--mono); }
.episode-card h3 { font: 500 29px/1.12 var(--serif); margin: 7px 0 9px; letter-spacing: -.02em; }
.episode-card p { color: var(--muted); font-size: 13px; margin: 0; max-width: 450px; }
.card-meta { display: flex; gap: 13px; flex-wrap: wrap; color: var(--muted); font: 11px var(--mono); margin-top: 13px; }
.empty { color: var(--muted); padding: 32px 0; }

.detail-head { max-width: 840px; margin-bottom: 48px; }
.back-link { border: 0; padding: 0; background: transparent; color: var(--accent-dark); font: 11px var(--mono); margin-bottom: 30px; }
.detail-head h1 { font: 500 clamp(43px, 6.5vw, 84px)/.97 var(--serif); letter-spacing: -.04em; margin: 15px 0 23px; }
.original-title { color: var(--muted); font-size: 13px; max-width: 650px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-meta div { min-width: 90px; }
.detail-meta strong { display: block; font: 500 14px var(--serif); margin-top: 3px; }
.source-link { display: inline-flex; margin-top: 28px; color: var(--accent-dark); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--accent-dark); }
.read-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 40px 0 50px; }
.control-note { color: var(--muted); font-size: 12px; }
.mode-switch { display: inline-flex; border: 1px solid var(--line); }
.mode-switch button { border: 0; background: transparent; padding: 7px 12px; color: var(--muted); font-size: 12px; }
.mode-switch button.active { background: var(--ink); color: var(--paper); }
.chapter { display: grid; grid-template-columns: minmax(155px, 23%) minmax(0, 1fr); gap: 44px; padding: 35px 0 55px; border-top: 1px solid var(--line); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter-aside { position: sticky; top: 25px; align-self: start; }
.chapter-number { color: var(--accent); font: 12px var(--mono); }
.chapter h2 { font: 500 27px/1.2 var(--serif); letter-spacing: -.02em; margin: 10px 0 12px; }
.chapter-time { color: var(--muted); font: 11px var(--mono); text-decoration: none; }
.transcript-block { padding: 0 0 29px; margin-bottom: 29px; border-bottom: 1px solid rgba(32,35,33,.08); }
.transcript-block:last-child { border-bottom: 0; margin-bottom: 0; }
.block-top { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; margin-bottom: 10px; }
.speaker { color: var(--accent-dark); font-size: 12px; font-weight: 600; }
.block-time { color: var(--muted); font: 10px var(--mono); text-decoration: none; }
.transcript-block p { font: 400 19px/1.9 var(--serif); margin: 0; max-width: 720px; }
.original { margin-top: 14px; }
.original summary { color: var(--muted); cursor: pointer; font-size: 11px; list-style: none; }
.original summary::-webkit-details-marker { display: none; }
.original summary::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
.original[open] summary::before { content: "– "; }
.original p { color: #626860; font: 400 14px/1.75 var(--serif); margin-top: 10px; }
.promotion { background: rgba(167,181,163,.14); padding: 15px 17px 18px; border-bottom: 0; }
.promotion p { font-size: 17px; }
.footer-line { color: var(--muted); font: 11px var(--mono); padding-top: 35px; border-top: 1px solid var(--line); }
.loading-state { padding: 80px; color: var(--muted); font: 12px var(--mono); }

@media (max-width: 760px) {
  .app-shell { display: block; }
  .rail { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px 17px; gap: 18px; }
  .rail-series { padding-top: 0; }
  .rail-series h2 { font-size: 22px; margin: 6px 0; }
  .rail-series p { display: none; }
  .rail-foot { display: none; }
  .episode-nav { display: flex; gap: 17px; overflow: auto; margin: 0 -20px; padding: 0 20px; }
  .episode-link { min-width: 230px; border-top: 0; border-left: 1px solid var(--line); padding: 3px 0 3px 13px; }
  .episode-link strong { font-size: 15px; }
  .search { max-width: 360px; }
  .main { padding: 25px 20px 60px; }
  .topline { margin-bottom: 47px; }
  .topline a { display: none; }
  .hero { margin-bottom: 51px; }
  .hero h1 { font-size: 59px; }
  .series-grid { grid-template-columns: 1fr; gap: 42px; }
  .episode-card h3 { font-size: 28px; }
  .detail-head h1 { font-size: 42px; line-height: 1.15; }
  .read-controls { align-items: flex-start; flex-direction: column; gap: 12px; }
  .chapter { grid-template-columns: 1fr; gap: 18px; padding: 29px 0 40px; }
  .chapter-aside { position: static; }
  .chapter h2 { font-size: 26px; }
  .transcript-block p { font-size: 18px; line-height: 1.82; }
}