/* reading/page.css — page-specific layout for the /reading page.
   Depends on styles.css (the shared design system). */

.reading-page { padding-block: clamp(3rem, 9vw, 6rem); }

/* ---- Head ----------------------------------------------------------------- */
.reading-head { margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.reading-head .display { margin-bottom: 1rem; }
.reading-head .lede { margin-bottom: 1rem; }
.reading-intro {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .03em;
  line-height: 1.6; color: var(--ink-3); max-width: 46ch;
}

/* ---- Groups --------------------------------------------------------------- */
.reading-group { margin-top: clamp(2.6rem, 6vw, 4rem); }
.reading-group:first-of-type { margin-top: 0; }

.reading-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: .6em;
  margin-bottom: 1rem;
}
.reading-label-mark { color: var(--accent); font-size: .9em; }
.reading-count {
  margin-left: auto; color: var(--ink-3); letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.reading-group .divider { margin-bottom: .4rem; }

/* ---- Book rows ------------------------------------------------------------ */
.book-list { display: flex; flex-direction: column; }
.book {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(1.2rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line-2);
}
.book:last-child { border-bottom: 0; }

.book-index {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-3);
  line-height: 1; min-width: 2ch;
  font-variant-numeric: tabular-nums;
}

.book-meta { min-width: 0; }
.book-title {
  font-family: var(--font-display); font-style: italic; font-weight: 430;
  font-size: clamp(1.4rem, 3vw, 1.95rem); line-height: 1.12;
  letter-spacing: -.015em; color: var(--ink);
}
.book-author {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--ink-3); margin-top: .55rem;
}

/* Optional per-book note — written over time. Add a <p class="book-note">…</p>
   inside .book-meta and it renders below the author. */
.book-note {
  font-family: var(--font-reading); font-size: 1rem; line-height: 1.55;
  color: var(--ink-2); margin-top: .8rem; max-width: 60ch;
}

.book-status { align-self: center; }
.book-status[data-status="Planned"] { opacity: .85; }

/* ---- Footnote ------------------------------------------------------------- */
.reading-footnote {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em;
  line-height: 1.6; margin-top: clamp(2.6rem, 6vw, 4rem);
  padding-top: var(--sp-3); border-top: 1px solid var(--line-2);
  max-width: 50ch;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
  .book {
    grid-template-columns: auto 1fr;
    gap: 1rem 1.2rem;
  }
  .book-status {
    grid-column: 2; justify-self: start; align-self: start;
    margin-top: .2rem;
  }
}