/* ── HOME HERO: the thesis, centered ── */
.hero { padding: 6rem 0 0; text-align: center; }
.hero .h1 { font-size: clamp(2.6rem, 6.5vw, 5.25rem); max-width: 1000px; margin: 0 auto; }
.hero .prose { text-align: left; margin-top: 2.5rem; }
.hero .btn-row { justify-content: center; margin-top: 2.5rem; }
.hero-art { margin-top: 4.5rem; }
.hero-art .art { aspect-ratio: 1200 / 480; border-bottom: none; }

/* ── PAGE HERO (sub-pages) ── */
.page-hero { padding: 5rem 0 4rem; }
.page-hero .lead { max-width: 640px; margin-top: 1.25rem; }
.page-hero .btn-row { margin-top: 2rem; }

.empty-note {
  border: 1px dashed var(--line);
  padding: 2rem;
  color: var(--ink-2);
  text-align: center;
}
.empty-note a { font-weight: 500; }

/* ── POST ── */
.post-hero { padding: 5rem 0 3rem; text-align: center; }
.post-hero .meta { justify-content: center; margin-bottom: 1.25rem; }
.post-hero .h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 900px; margin: 0 auto; }
.post-hero .lead { max-width: 640px; margin: 1.25rem auto 0; }
.post-art .art { aspect-ratio: 16 / 7; }
.back-link { display: inline-block; font-size: 0.85rem; color: var(--ink-3); text-decoration: none; margin-bottom: 1.5rem; }
.back-link:hover { color: var(--ink); }

.prose { max-width: 680px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; color: var(--ink-2); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 2.75rem;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.5rem; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose code { font-size: 0.9em; background: var(--gray); padding: 0.1rem 0.35rem; border-radius: var(--radius); }
.prose .embed { margin: 2.5rem 0; text-align: center; }
.prose .embed iframe { display: block; max-width: 100%; margin: 0 auto; border: 1px solid var(--line); }
.prose .embed figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--ink-3); }

/* ── CODE BLOCKS AND TABLES IN POSTS ── */
.prose pre {
  border: 1px solid var(--line);
  background: var(--gray);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose .table-wrap { overflow-x: auto; margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.prose caption { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--ink-3); padding-bottom: 0.75rem; }
.prose th, .prose td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.6rem 0.75rem 0.6rem 0; text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
.prose .table-note { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.5rem; }

/* ── MATH (KaTeX, only on posts that load it; see CLAUDE.md §5.5) ── */
.prose .katex { font-size: 1.05em; color: var(--ink); }
.prose .katex-display { margin: 1.5rem 0; overflow-x: auto; overflow-y: hidden; padding: 0.25rem 0; }

/* ── 404 ── */
.nf { text-align: center; padding: 7rem 0; }
.nf-code {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(7rem, 22vw, 16rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--line);
}
.nf .lead { margin: 1rem auto 2rem; max-width: 460px; }
.nf .btn-row { justify-content: center; }

/* ── RESPONSIVE ── */
/* 960px: 3-up grids drop to 2. 768px: phone. Kept last so they override
   everything above. */
@media (max-width: 960px) {
  .cells--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last cell spans the row instead of leaving an empty slot; its
     art keeps the height of the half-width 4:3 panels above it. */
  .cells--3 > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cells--3 > .cell:last-child:nth-child(odd) .art { aspect-ratio: 8 / 3; }
}
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
  .section { padding: 4rem 0; }
  .section--flush { padding-top: 0; }
  .site-nav .container { height: auto; padding-top: 0.85rem; padding-bottom: 0.85rem; flex-wrap: wrap; gap: 0.75rem; }
  .nav-right { width: 100%; justify-content: space-between; gap: 1rem; }
  .nav-links { gap: 1.1rem; }
  .nav-right .btn { padding: 0.65rem 0.9rem; }
  .hero, .page-hero, .post-hero { padding-top: 3rem; }
  .page-hero { padding-bottom: 3rem; }
  .hero-art { margin-top: 3rem; }
  .hero-art .art { aspect-ratio: 4 / 3; }
  .cells--3, .card--wide { grid-template-columns: 1fr; }
  .cells--3 > .cell:last-child:nth-child(odd) .art { aspect-ratio: 4 / 3; }
  .card--wide .art { aspect-ratio: 16 / 10; min-height: 0; border-right: none; border-bottom: 1px solid var(--line); }
  .card--wide .card-body { padding: 1.5rem; }
  .cell { padding: 1.5rem; }
  .cell .art { margin: -1.5rem -1.5rem 1rem; }
  .group { grid-template-columns: 1fr; }
  .group-label { border-right: none; border-bottom: 1px solid var(--line); padding: 1.25rem; background: var(--gray); }
  .group-row > div { padding: 1.25rem; }
  .footer-top, .footer-main { padding-left: 1.25rem; padding-right: 1.25rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}