/* DeepDives — instrument panel meets editorial magazine.
   The show is about gauges that came unbolted from their machines, so the
   surface is machine-room dark with brass on it, and the reading column is
   set like a printed essay. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Literata:ital,opsz,wght@0,7..72,300..600;1,7..72,300..500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --void:      #08090b;
  --ground:    #0e1013;
  --panel:     #14171c;
  --raised:    #1b1f26;
  --hairline:  #262b33;

  --brass:     #c69749;
  --brass-lit: #f0c368;
  --brass-dim: #7a6033;

  --ink:       #e9e5dc;
  --ink-soft:  #b6b2a8;
  --ink-dim:   #74776f;

  --display: 'Instrument Serif', Georgia, serif;
  --read:    'Literata', Georgia, serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --measure: 33rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--read);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Grain — keeps large dark fields from reading as flat black */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.rule { height: 1px; background: var(--hairline); border: 0; }

/* ─── masthead ─────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--ground), var(--void));
  position: relative;
}
.masthead::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim) 22%, var(--brass-dim) 78%, transparent);
}
.masthead-inner {
  max-width: 76rem; margin: 0 auto; padding: 1.6rem 2rem;
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.85rem; letter-spacing: .005em; color: var(--ink);
}
.wordmark em { font-style: italic; color: var(--brass); }
.masthead .mono { margin-left: auto; }

/* ─── library ──────────────────────────────────────────────── */
.shell { max-width: 76rem; margin: 0 auto; padding: 3.5rem 2rem 8rem; }

.lede { max-width: 40rem; margin-bottom: 3.2rem; }
.lede h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 3.9rem); line-height: 1.06;
  letter-spacing: -.01em; margin: .7rem 0 .9rem;
}
.lede h1 em { font-style: italic; color: var(--brass); }
.lede p { color: var(--ink-soft); font-size: 1.02rem; max-width: 34rem; }

.controls {
  display: flex; gap: .6rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 2.2rem;
}
.search {
  flex: 1 1 15rem; background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: .62rem .9rem; color: var(--ink);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  transition: border-color .18s, background .18s;
}
.search::placeholder { color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }
.search:focus { outline: none; border-color: var(--brass-dim); background: var(--raised); }

.chip {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 2px; padding: .5rem .7rem; cursor: pointer;
  transition: all .18s;
}
.chip:hover { color: var(--ink-soft); border-color: var(--brass-dim); }
.chip[aria-pressed="true"] {
  color: var(--void); background: var(--brass); border-color: var(--brass);
}

/* Borders live on the cards, not on the grid: an empty track in a
   background-as-gap grid renders as a grey slab when the library is small. */
.grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  align-items: start;
}

.card {
  background: var(--ground); padding: 1.4rem;
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; transition: background .22s, border-color .22s, transform .22s;
  animation: rise .5s both;
}
.card:hover { border-color: var(--brass-dim); transform: translateY(-3px); }
.card:hover { background: var(--panel); }
.card:hover .card-art img { transform: scale(1.035); }
.card:hover h2 { color: var(--brass-lit); }

@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.card-art {
  aspect-ratio: 1; overflow: hidden; background: var(--void);
  border: 1px solid var(--hairline); position: relative;
}
.card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.card-art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 45%, rgba(8,9,11,.55));
}

.card h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.55rem;
  line-height: 1.14; letter-spacing: -.005em; transition: color .22s;
}
.card p {
  color: var(--ink-soft); font-size: .88rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: auto; padding-top: .4rem; }
.card-meta span { position: relative; }
.card-meta span + span::before {
  content: ''; position: absolute; left: -.45rem; top: .35em;
  width: 2px; height: 2px; background: var(--brass-dim); border-radius: 50%;
}

.empty { padding: 4rem 1rem; text-align: center; color: var(--ink-dim); font-family: var(--mono); font-size: .8rem; }

/* ─── episode ──────────────────────────────────────────────── */
.ep-hero {
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--ground) 0%, var(--void) 100%);
}
.ep-hero-inner {
  max-width: 76rem; margin: 0 auto; padding: 3.2rem 2rem 2.6rem;
  display: grid; grid-template-columns: 15rem 1fr; gap: 2.8rem; align-items: start;
}
.ep-cover {
  border: 1px solid var(--hairline); position: relative; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}
.ep-cover img { width: 100%; display: block; }
.ep-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.3rem); line-height: 1.02;
  letter-spacing: -.015em; margin: .55rem 0 1.1rem;
}
/* The thesis runs to ~1,200 characters. Unclamped it was 2,849px tall and
   pushed the entire script below the fold on a narrow viewport. The hero gets
   a standfirst; the full argument sits with the show notes. */
.ep-thesis {
  color: var(--ink-soft); font-size: 1rem; line-height: 1.68;
  max-width: 42rem; border-left: 2px solid var(--brass-dim); padding-left: 1.1rem;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-thesis.open { display: block; }

.thesis-more {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-dim); background: none;
  border: 0; padding: .55rem 0 0 1.1rem; cursor: pointer; transition: color .18s;
}
.thesis-more:hover { color: var(--brass-lit); }

.full-thesis {
  max-width: var(--measure); color: var(--ink-soft);
  font-size: .96rem; line-height: 1.7; margin-bottom: 2.4rem;
  padding-left: 1.1rem; border-left: 2px solid var(--hairline);
}
.ep-facts { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.fact strong {
  display: block; font-family: var(--display); font-size: 1.5rem;
  color: var(--brass); font-weight: 400; line-height: 1;
}
.fact span { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); }

/* reading column */
.reader { max-width: 76rem; margin: 0 auto; padding: 3.5rem 2rem 14rem; display: grid; grid-template-columns: 12rem 1fr; gap: 3rem; }

.act-rail { position: sticky; top: 2rem; align-self: start; }
.act-rail ol { list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.act-rail button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .6rem .7rem; border-left: 2px solid var(--hairline);
  color: var(--ink-dim); font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; line-height: 1.5; transition: all .2s;
}
.act-rail button:hover { color: var(--ink-soft); border-left-color: var(--brass-dim); }
.act-rail button.on { color: var(--brass-lit); border-left-color: var(--brass); background: rgba(198,151,73,.05); }

.script { max-width: var(--measure); }

/* Tried content-visibility:auto here to cheapen the ~11,500 word spans over a
   59,000px page. It inflated the document to 79,000px and broke
   getBoundingClientRect on off-screen turns, which the read-along depends on
   for scroll-follow. Not worth it: measured scroll cost is ~11ms without it. */
.turn { margin-bottom: 1.5rem; display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; }
.turn .who {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); padding-top: .55em;
  text-align: right; user-select: none;
}
.turn[data-who="b"] .who { color: var(--brass-dim); }
.turn .said { font-size: 1.045rem; line-height: 1.78; color: var(--ink-soft); }

.w { cursor: pointer; border-radius: 2px; transition: color .12s; }
.w:hover { color: var(--brass-lit); }
.w.said-already { color: var(--ink); }
.w.now {
  color: var(--void); background: var(--brass-lit);
  box-shadow: 0 0 22px rgba(240,195,104,.5);
}

/* sources */
.sources { max-width: 76rem; margin: 0 auto; padding: 0 2rem 12rem; }
.sources h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; margin-bottom: .4rem; }
.src-list { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 1.6rem; }
.src {
  background: var(--ground); padding: .85rem 1.1rem; display: grid;
  grid-template-columns: 4.5rem 5.5rem 1fr; gap: 1rem; align-items: baseline;
  transition: background .18s;
}
.src:hover { background: var(--panel); }
.src:hover .src-title { color: var(--brass-lit); }
.src-id { font-family: var(--mono); font-size: .64rem; color: var(--brass-dim); letter-spacing: .08em; }
.src-kind { font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-dim); }
.src-title { font-size: .92rem; line-height: 1.45; transition: color .18s; }
.src-title small { display: block; color: var(--ink-dim); font-size: .75rem; margin-top: .1rem; }

/* ─── player ───────────────────────────────────────────────── */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: rgba(14,16,19,.93); backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
}
.player::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim) 25%, var(--brass-dim) 75%, transparent);
}
.player-inner { max-width: 76rem; margin: 0 auto; padding: .85rem 2rem 1.05rem; }

.scrub { position: relative; height: 3px; background: var(--hairline); cursor: pointer; margin-bottom: .8rem; }
.scrub-fill { position: absolute; inset: 0 auto 0 0; background: var(--brass); width: 0; }
.scrub-fill::after {
  content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--brass-lit);
  box-shadow: 0 0 12px rgba(240,195,104,.75);
}
.scrub-mark { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--brass-dim); pointer-events: none; }

.transport { display: flex; align-items: center; gap: 1.1rem; }
.play {
  width: 2.7rem; height: 2.7rem; flex: none; border-radius: 50%;
  background: var(--brass); border: 0; cursor: pointer; color: var(--void);
  display: grid; place-items: center; transition: transform .16s, background .16s;
}
.play:hover { background: var(--brass-lit); transform: scale(1.06); }
.play svg { width: 15px; height: 15px; fill: currentColor; }

.time { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.time i { color: var(--ink-dim); font-style: normal; }
.now-act { font-family: var(--mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--brass-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.tbtn {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  background: transparent; border: 1px solid var(--hairline); color: var(--ink-dim);
  padding: .4rem .55rem; border-radius: 2px; cursor: pointer; transition: all .18s;
}
.tbtn:hover { color: var(--ink); border-color: var(--brass-dim); }
.tbtn.on { color: var(--void); background: var(--brass); border-color: var(--brass); }

.back { font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-dim); transition: color .18s; }
.back:hover { color: var(--brass); }

@media (max-width: 880px) {
  .ep-hero-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .ep-cover { max-width: 13rem; }
  /* min-width:0 on both the grid item and the flex container: without it
     min-width:auto sizes them to the widest act title, the overflow-x never
     engages, and the whole page becomes ~750px wide inside a 375px viewport. */
  .reader { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 2rem; }
  .act-rail { position: static; min-width: 0; }
  .act-rail ol {
    flex-direction: row; overflow-x: auto; gap: .3rem;
    min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .act-rail ol::-webkit-scrollbar { display: none; }
  .act-rail button { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--hairline); }
  .script, .turn, .said { min-width: 0; }
  .src-title { overflow-wrap: anywhere; }
  .turn { grid-template-columns: 1fr; gap: .15rem; }
  .turn .who { text-align: left; padding-top: 0; }
  .src { grid-template-columns: 1fr; gap: .2rem; }
  .player-inner, .shell, .sources, .masthead-inner, .ep-hero-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
  .now-act { display: none; }
}