/* ============================================================
   What Did They Read? — redesign stylesheet
   From design_handoff_wdtr_redesign/style.css.

   Design language: warm paper ground, oxblood accent, Newsreader
   for everything readable, Courier Prime for every label. Flush
   left. Zero radius. 2px ink rules divide sections, 1px hairlines
   divide rows. No shadows, no cards, no centering.

   Two departures from the handoff sheet, both marked below:
   the shell rules target `> div` rather than `> *`, because this
   site's header and footer are flat; and a short additions block
   at the end covers real content the prototype had no equivalent
   for (the author/show line on a post row, the wider Books
   filters).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* palette */
  --paper:    #f2efe8;
  --ink:      #1a1715;
  --accent:   #8c2b18;   /* oxblood — replaces the old #924221 */
  --surface:  #e8e3d8;   /* row hover / tint fill */
  --rule:     rgba(26, 23, 21, .26);  /* hairline */
  --muted:    rgba(26, 23, 21, .68);  /* secondary text — 4.5:1 on paper */
  --onaccent: #f7f4ee;   /* text on the oxblood field */

  /* type */
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --mono:  "Courier Prime", "Courier New", ui-monospace, monospace;

  /* measure + gutters */
  --shell: 1180px;
  --gutter: 40px;
}

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.06;
}
p { margin-top: 0; }

h1 { font-size: clamp(40px, 6.4vw, 84px); letter-spacing: -.032em; margin-bottom: 20px; }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 21px; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--surface); }

/* ---------- shell ---------- */

/* `> div` rather than `> *`: header.html and footer.html put their
   children directly in the landmark, so `> *` would give the
   wordmark and each footer paragraph their own 1180px shell. */
main, .site-header > div, .site-footer > div { max-width: var(--shell); margin-inline: auto; }
main { padding: 0 var(--gutter) 100px; min-height: 60vh; }

.skip-link { position: absolute; top: -100px; left: 10px; background: var(--paper); padding: 12px; z-index: 3; }
.skip-link:focus { top: 10px; }

/* ---------- header ---------- */

.site-header { border-bottom: 2px solid var(--ink); }
.site-header > div {
  padding: 20px var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}
/* The flat header this site actually ships. */
.site-header:not(:has(> div)) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--gutter);
}

.wordmark {
  font: 700 13px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark br { display: none; }         /* one line now, not three */
.wordmark span { color: var(--accent); }

.site-header nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-header nav a { text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--accent); }
.cal-nav { padding-left: 0; border-left: 0; }   /* the divider is gone */

/* ---------- eyebrow / lede / mono meta ---------- */

.eyebrow {
  margin: 0 0 16px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede {
  max-width: 54ch;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
}
.collection-note {
  max-width: 60ch;
  font-size: 16px;
  color: var(--muted);
}

/* ---------- intro / mastheads ---------- */

.intro, .archive-intro {
  padding: 60px 0 40px;
  border-bottom: 2px solid var(--ink);
  max-width: none;
}
.intro h1, .archive-intro h1 { max-width: 20ch; }

/* The person masthead: mono kicker, then the name at display size.
   Used on /cal-newport. */
.masthead { padding: 56px 0 30px; border-bottom: 2px solid var(--ink); }
.masthead h1 {
  font-size: clamp(52px, 9vw, 120px);
  line-height: .9;
  letter-spacing: -.045em;
  margin-bottom: 22px;
  max-width: none;
}
.masthead-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead-stats a { color: inherit; text-decoration: none; }

/* ---------- section headings ---------- */

.section-heading {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  padding-top: 16px;
  margin: 48px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.section-heading h2 {
  margin: 0;
  font: 700 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section-heading > a {
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}

/* ---------- post list (entries.html) ---------- */

.episode-card {
  max-width: none;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
}
.episode-card .eyebrow {
  margin: 0;
  grid-column: 1;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}
.episode-card h2 {
  margin: 0;
  grid-column: 2;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -.015em;
}
.episode-card h2 a { text-decoration: none; }
.episode-card p {
  grid-column: 2;
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 17px;
  color: var(--muted);
}
.episode-card .text-link { grid-column: 2; justify-self: start; margin-top: 10px; }
.episode-card:first-of-type { border-top: 1px solid var(--rule); }

.text-link {
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
.text-link:hover { border-bottom-color: var(--accent); }

.empty-state { max-width: 62ch; padding: 40px 0 48px; }
.empty-state p { color: var(--muted); }

/* ---------- the oxblood poster (reading-aside) ---------- */

.reading-aside, .poster {
  margin-top: 72px;
  max-width: none;
  background: var(--accent);
  color: var(--onaccent);
  border: 0;
  padding: 52px 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 48px;
  align-items: end;
}
.reading-aside .eyebrow, .poster .eyebrow { color: var(--onaccent); opacity: .8; }
.reading-aside h2, .poster h2 {
  grid-column: 1;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin: 0;
}
.reading-aside p, .poster p { max-width: 38ch; margin: 0; font-size: 17px; line-height: 1.5; }
.reading-aside .text-link, .poster .text-link {
  justify-self: start;
  color: var(--onaccent);
  background: var(--ink);
  border: 0;
  padding: 14px 18px;
}
.reading-aside .text-link:hover, .poster .text-link:hover { color: var(--paper); }

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 20px 28px;
  margin: 0;
  padding: 26px 0;
  border-top: 0;
  border-bottom: 2px solid var(--ink);
}
.filter-search { flex: 1 1 280px; min-width: 0; }
.filters > div:not(.filter-search) { flex: 0 0 150px; }

label {
  display: block;
  margin-bottom: 8px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

input, select, button {
  font: 400 17px/1.3 var(--serif);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 10px 0;
  min-height: 44px;
  max-width: 100%;
}
input, select {
  width: 100%;
  border-bottom: 1px solid var(--ink);
}
input:hover, select:hover { border-bottom-color: var(--accent); }
input::placeholder { color: var(--muted); }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%231a1715' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

button {
  cursor: pointer;
  align-self: end;
  font: 700 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  min-height: 44px;
}
button:hover { background: var(--ink); color: var(--paper); }
button:active { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }

.result-count {
  margin: 16px 0 0;
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.no-results { padding: 40px 0; color: var(--muted); }

/* ---------- month groups + the book table ---------- */

.month-group {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 28px 32px;
  padding: 36px 0 30px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.month-group:first-of-type { border-top: 2px solid var(--ink); margin-top: 34px; }
.month-group > header { position: sticky; top: 24px; }
.month-group h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.03em;
}
.month-group .month-source {
  margin: 0;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the four-column ruled list: № / title / author / heard on */
.book-head, .book-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22% 26%;
  gap: 4px 20px;
  align-items: baseline;
}
.book-head {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font: 700 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.book-list { list-style: none; margin: 0; padding: 0; }
.book-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.book-row:last-child { border-bottom: 0; }

.book-num {
  font: 400 12px/1.7 var(--mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.book-title {
  display: block;
  font: 400 23px/1.24 var(--serif);
  letter-spacing: -.015em;
  text-align: left;
}
.book-title a { text-decoration: none; }
.book-author {
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
  max-width: none;
}
.book-source {
  display: block;
  margin: 0;
  font: 400 13px/1.45 var(--mono);
  color: var(--muted);
}
.book-source a { color: inherit; text-decoration-color: var(--rule); }
.book-source a:hover { color: var(--accent); }
.book-detail { font-size: 14px; color: var(--muted); }

/* Optional verdict chip — for lists that carry one (finished /
   abandoned / ongoing). Not used by either list today. */
.verdict {
  display: inline-block;
  font: 700 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.verdict-finished  { background: var(--ink);    border-color: var(--ink);    color: var(--onaccent); }
.verdict-abandoned { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }

/* ---------- source blocks / labels (post bodies) ---------- */

.source-link {
  display: inline-block;
  margin-bottom: 24px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.source-block {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
}
.source-block h3 { margin-bottom: 10px; font-size: 19px; }
.source-block p { max-width: 62ch; margin: 0; font-size: 17px; color: var(--muted); }
.source-brief { border-left-style: solid; }

.label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 8px;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule);
}

/* ---------- post body ---------- */

.entry, .prose { padding-top: 44px; }
.entry > p, .prose p { max-width: 66ch; font-size: 19px; line-height: 1.6; }
.entry > p:first-of-type, .prose > p:first-of-type { font-size: 22px; line-height: 1.5; }
.entry h1, .prose h1 { max-width: 22ch; }
.entry h2, .prose h2 {
  margin: 48px 0 16px;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
  font: 700 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.entry h3, .prose h3 { margin: 32px 0 10px; }
.entry ul, .entry ol, .prose ul, .prose ol { max-width: 64ch; padding-left: 20px; }
.entry li, .prose li { margin: 8px 0; }
.entry blockquote, .prose blockquote {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}
.entry blockquote p, .prose blockquote p {
  max-width: 44ch;
  font-size: 21px;
  line-height: 1.45;
  font-style: italic;
}
.entry img, .prose img { max-width: 100%; height: auto; filter: grayscale(1); }
.entry hr, .prose hr, .hr { border: 0; border-top: 2px solid var(--ink); margin: 48px 0; }

/* ---------- archive ---------- */

main > h2 {
  margin: 44px 0 0;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -.03em;
  color: var(--accent);
}
main > h3 {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font: 700 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.archive-links { list-style: none; margin: 0; padding: 0; }
.archive-links li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.archive-links a { font-size: 21px; line-height: 1.3; text-decoration: none; }

/* ---------- pagination ---------- */

.pagination {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pagination a { text-decoration: none; }

/* ---------- footer ---------- */

.site-footer { border-top: 2px solid var(--ink); }
.site-footer > div { max-width: var(--shell); }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 26px var(--gutter) 48px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 22px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer .fine-print {
  flex-basis: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-family: var(--serif);
  max-width: 60ch;
}

/* ---------- js gates ---------- */

[hidden] { display: none !important; }
.js-only { display: none; }
.js-enabled .filters.js-only { display: flex; }
.js-enabled .result-count.js-only { display: block; }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  .book-head { display: none; }
  .book-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 2px 16px;
    padding: 18px 0;
  }
  .book-row .book-author,
  .book-row .book-source { grid-column: 2; }
  .month-group { grid-template-columns: 1fr; gap: 16px; }
  .month-group > header {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 8px 16px;
    flex-wrap: wrap;
  }
  .month-group h2 { margin: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 22px; }
  main { padding-bottom: 64px; }
  .site-header:not(:has(> div)), .site-header > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .site-header nav { gap: 16px 22px; }
  .intro, .archive-intro { padding: 36px 0 28px; }
  .masthead { padding: 34px 0 24px; }
  .episode-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .episode-card .eyebrow, .episode-card h2, .episode-card p, .episode-card .text-link { grid-column: 1; }
  .reading-aside, .poster { margin-top: 48px; padding: 32px 24px; }
  .filters { gap: 16px 20px; }
  .filters > div:not(.filter-search) { flex: 1 1 140px; }
  .filters button { flex: 1 1 100%; }
  .entry, .prose { padding-top: 28px; }
  .site-footer { display: block; }
  .site-footer nav { margin: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Site additions — real content the prototype had no stand-in
   for. Everything above is the handoff sheet.
   ============================================================ */

/* An eyebrow is a <p>, so `.episode-card p` and `.reading-aside p`
   out-specify the `font` shorthand on `.eyebrow` and hand the
   kicker the summary's 17px. Restate the size where it sits inside
   one of them. */
.episode-card .eyebrow, .reading-aside .eyebrow, .poster .eyebrow,
.prose p.eyebrow, .entry p.eyebrow,
.prose > p.eyebrow:first-of-type, .entry > p.eyebrow:first-of-type {
  font-size: 11px;
  line-height: 1.3;
}

/* The kicker is also the first <p> in a prose page, so the lede
   treatment lands on it rather than on the opening paragraph.
   Hand it to the paragraph that follows the title instead. */
.prose > h1 + p, .entry > h1 + p { font-size: 22px; line-height: 1.5; }

/* The masthead already closes on a 2px rule, so the section head
   that follows it on the home page does not need a second one. */
.intro:has(+ .section-heading) { border-bottom: 0; padding-bottom: 0; }

/* On Books the column head follows the result count directly,
   with no month group to space them apart. */
.result-count + .book-head { margin-top: 30px; }

/* A book page carries its own masthead and prose wrapper, so on
   Blot, where .entry wraps the whole post, the top padding would
   otherwise be applied twice. */
.entry:has(> .archive-intro) { padding-top: 0; }
.entry > .prose { padding-top: 24px; }

/* Where a masthead is followed straight away by a section label,
   two 2px rules would stack with only whitespace between them.
   The label keeps its rule, because the rule is the label. */
.archive-intro:has(+ .prose > h2:first-child) { border-bottom: 0; padding-bottom: 12px; }
.prose > h2:first-child, .entry > h2:first-child { margin-top: 0; }

/* A post row on the home page carries the author and the show it
   came up on. It is a label, not prose, so it takes the mono
   treatment rather than the summary's serif. */
.episode-card .book-detail {
  grid-column: 2;
  margin: 8px 0 0;
  max-width: none;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .episode-card .book-detail { grid-column: 1; }
}

/* The Books filter row carries longer option labels than the Cal
   one ("Recommendations & discussion"), so its selects size to
   their content instead of a fixed 150px track. */
.filters > div:not(.filter-search) { flex: 0 1 auto; min-width: 150px; max-width: 300px; }

/* The masthead stats read as one line; the separators are the
   stylesheet's, not the markup's. Each dot trails the figure it
   follows, so a line that wraps never opens on a dot. */
.masthead-stats { gap: 10px 0; }
.masthead-stats span:not(:last-child)::after { content: "·"; margin: 0 13px; }

/* A book that has no page of its own is plain text in the title
   column. Keep it on the same baseline as one that links. */
.book-title a { color: inherit; }
.book-title a:hover { color: var(--accent); }

/* The row number is printed from an attribute rather than carried
   as text, so the reading list's 294 rows stay searchable by
   title, author and episode alone. */
.book-num::before { content: attr(data-n); }

/* The episode link on a reading-list row wears .book-source
   itself; the Books directory puts a plain span there. Both need
   the same column treatment. */
a.book-source { text-decoration-color: var(--rule); }
a.book-source:hover { color: var(--accent); }

/* The reading list is a rolling year plus a page per year, so every
   page of it ends with the way into the others. */
.year-index { margin-top: 60px; }
.year-index .section-heading { margin-top: 0; }