/*
 * blog.css — the Nori blog on the Nori design language.
 * Self-contained on the token chain: load fonts.css → design-tokens.css → blog.css.
 * Long-form reading in a proportional sans body (readability), with a single
 * Newsreader-italic display h1 and IBM Plex Mono for chrome/labels/meta/code;
 * hairlines instead of shadows, one green accent, dark-only. Covers both post
 * templates (essays: main/article/.dek/.byline; dev-logs: .layout/.content/.sidebar/.toc)
 * and the listing page (newsletter.html).
 */

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

html { -webkit-text-size-adjust: 100%; }

:root {
  /* Proportional face for long-form reading — a deliberate blog-only exception to
     the mono-body design law; mono stays on nav, labels, meta, and code. */
  --read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--deep);
  color: var(--text);
  font-family: var(--read);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); }

/* ============ nav + footer (listing page chrome; self-contained) ============ */
.nav { border-bottom: var(--hair); background: var(--deep); font-family: var(--mono); }
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; font-size: 15px; }
.nav-logo .prompt { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav-links a { color: var(--comment); font-size: 13.5px; }
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); }
.nav-cta { color: var(--green) !important; }
.nav-toggle, .nav-burger { display: none; }  /* burger menu appears only on mobile */

.footer { border-top: var(--hair); margin-top: 80px; font-family: var(--mono); }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); font-weight: 600; }
.footer-copy { color: var(--muted); font-size: 12.5px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--comment); font-size: 12.5px; }
.footer-links a:hover { color: var(--fg); }
.footer-colophon { max-width: 1120px; margin: 0 auto; padding: 0 32px 28px; }
.footer-exit { color: var(--muted); font-size: 12px; }
.footer-exit .ps { color: var(--green); }

/* ============ shared reading column ============ */
main, .layout, .listing {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}
.layout { max-width: 1080px; }

/* display h1 — the single serif thought per page, sentence case, period */
h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--fg); margin-bottom: 20px;
}

/* standfirst / dek / summary / subtitle — mono, muted, larger measure */
.dek, .summary, .subtitle, .content .summary {
  font-size: 16px; color: var(--comment); line-height: 1.65; margin-bottom: 18px; max-width: 62ch;
}
.subtitle a { color: var(--green); }

/* byline / date / signoff name — small meta */
.byline, .post-meta, .content .date, .date, .signoff .name, .name {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em;
}
.byline .author { color: var(--comment); }
.byline { margin-bottom: 28px; }
.signoff { margin-top: 40px; padding-top: 20px; border-top: var(--hair); color: var(--comment); }
.signoff .name { color: var(--comment); }

/* "originally published" source label + back link */
.source-label { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.source-label a { color: var(--comment); }
.source-label a:hover { color: var(--fg); }
.back {
  display: inline-block; font-size: 12.5px; color: var(--comment); margin-bottom: 32px;
}
.back:hover { color: var(--green-bright); }

/* ============ article body ============ */
article { color: var(--text); }
article p { margin: 0 0 20px; max-width: 62ch; }
article strong { color: var(--fg); font-weight: 600; }
article em { font-style: italic; color: var(--text); }
article a { color: var(--green); border-bottom: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
article a:hover { color: var(--green-bright); border-bottom-color: var(--green-bright); }

article h2 {
  font-weight: 700; font-size: 21px; color: var(--fg);
  letter-spacing: -0.01em; margin: 44px 0 14px; line-height: 1.3;
}
article h3 { font-weight: 700; font-size: 17px; color: var(--fg); margin: 32px 0 10px; }
.section-label {
  font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 44px 0 16px; line-height: 1.35;
}

article ul, article ol { margin: 0 0 20px; padding-left: 1.4em; max-width: 62ch; }
article li { margin-bottom: 8px; }
article li::marker { color: var(--comment); }

article blockquote {
  border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 20px; margin: 0 0 24px; color: var(--comment); max-width: 62ch;
}
article blockquote p { margin-bottom: 12px; }
article blockquote p:last-child { margin-bottom: 0; }

article code, code {
  font-family: var(--mono); font-size: 0.9em; color: var(--green-bright);
  background: var(--surface); border: var(--hair); border-radius: 3px; padding: 1px 5px;
}
article pre { background: var(--base); border: var(--hair); padding: 16px 18px; overflow-x: auto; margin: 0 0 24px; }
article pre code { background: none; border: none; color: var(--text); padding: 0; }

article hr { border: none; border-top: var(--hair); margin: 40px 0; }

/* ============ figures / media ============ */
article figure, figure { margin: 0 0 28px; }
article figure img, figure img { display: block; width: 100%; height: auto; border: var(--hair); }
article figure a:hover img, figure a:hover img { border-color: var(--subtle); }
article figcaption, figcaption {
  margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5;
}
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 28px; }
.figure-row figure { margin: 0; }
.figure-stack { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; }

/* responsive video embeds (16:9) */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 28px; border: var(--hair); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
article figure video, figure video { display: block; width: 100%; height: auto; border: var(--hair); }

/* tables */
.table-wrap { overflow-x: auto; margin: 0 0 28px; }
table { width: 100%; border-collapse: collapse; border: var(--hair); font-size: 13.5px; }
th, td { border: var(--hair); padding: 10px 14px; text-align: left; vertical-align: top; }
th { color: var(--fg); font-weight: 600; }
td { color: var(--comment); }

/* footnotes */
.footnotes { margin-top: 48px; padding-top: 20px; border-top: var(--hair); font-size: 13px; color: var(--comment); }
.footnotes ol { padding-left: 1.4em; }
.footnotes li { margin-bottom: 8px; }
.footnote-ref { color: var(--green); font-size: 0.8em; vertical-align: super; }
.footnote-ref:hover { color: var(--green-bright); }

/* editor's note callout */
.editors-note {
  border: var(--hair); border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 18px; margin: 0 0 28px; color: var(--comment); font-size: 14px;
}

/* post nav/footer links at the bottom of essays */
.nav-footer, .post-footer {
  margin-top: 44px; padding-top: 22px; border-top: var(--hair);
  font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap;
}
.nav-footer a, .post-footer a { color: var(--comment); }
.nav-footer a:hover, .post-footer a:hover { color: var(--green-bright); }

/* ============ dev-log layout with TOC sidebar ============ */
/* Single column by default: the TOC renders as a bordered block ABOVE the content
   (order:1) so it is never buried at the bottom. On wide screens it becomes a
   sticky right rail. */
.layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
.content { min-width: 0; order: 2; }
.sidebar {
  order: 1; font-size: 12.5px;
  border: var(--hair); background: var(--base); padding: 16px 18px;
}
.toc-label { font-family: var(--mono); color: var(--green); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 10px; }
.toc-section, .sidebar a { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--comment); padding: 5px 0; text-decoration: none; }
.toc-section + .toc-section, .sidebar a + a { border-top: var(--hair); }
.toc-section:hover, .sidebar a:hover { color: var(--green-bright); }

@media (min-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
  .content { order: 1; }
  .sidebar {
    order: 2; position: sticky; top: 24px; align-self: start;
    border: none; border-left: var(--hair); background: none; padding: 2px 0 2px 22px;
  }
  .toc-section, .sidebar a { padding: 4px 0; }
  .toc-section + .toc-section, .sidebar a + a { border-top: none; }
}

/* ============ listing page (newsletter.html) ============ */
/* subscribe.js gives the widget no bottom margin; keep it clear of the filter bar. */
#newsletter-subscribe-top { display: block; margin-bottom: 2.5rem; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; }
.filter-btn {
  font-family: var(--mono); font-size: 12px; color: var(--comment);
  background: transparent; border: var(--hair); border-radius: var(--radius-tag, 4px);
  padding: 5px 12px; cursor: pointer; letter-spacing: 0.03em;
}
.filter-btn:hover { color: var(--fg); border-color: var(--subtle); }
.filter-btn.active, .filter-btn[aria-pressed="true"] { color: var(--deep); background: var(--green); border-color: var(--green); }

.post-list { list-style: none; border-top: var(--hair); }
.post-list li { border-bottom: var(--hair); }
.post-list a { display: block; padding: 18px 4px; }
.post-list a:hover { background: var(--surface); }
.post-title { color: var(--fg); font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.post-list a:hover .post-title { color: var(--green-bright); }
.post-desc { color: var(--comment); font-size: 13.5px; line-height: 1.6; max-width: 70ch; }
.post-date { font-family: var(--mono); color: var(--muted); font-size: 12px; margin-top: 6px; letter-spacing: 0.02em; }

.hidden { display: none !important; }

/* ============ dev-log .content prose shares the essay styling ============ */
.content p, main > p { margin: 0 0 20px; max-width: 62ch; }
.content h2 { font-weight: 700; font-size: 21px; color: var(--fg); letter-spacing: -0.01em; margin: 44px 0 14px; line-height: 1.3; }
.content h3 { font-weight: 700; font-size: 17px; color: var(--fg); margin: 32px 0 10px; }
.content ul, .content ol { margin: 0 0 20px; padding-left: 1.4em; max-width: 62ch; }
.content li { margin-bottom: 8px; }
.content li::marker { color: var(--comment); }
.content strong { color: var(--fg); font-weight: 600; }
.content em { font-style: italic; }
.content a { color: var(--green); }
.content a:hover { color: var(--green-bright); }
.content blockquote { border-left: 2px solid var(--green); background: var(--base); padding: 14px 20px; margin: 0 0 24px; color: var(--comment); max-width: 62ch; }
.content figure { margin: 0 0 28px; }
.content figure img { display: block; width: 100%; height: auto; border: var(--hair); }
.content hr { border: none; border-top: var(--hair); margin: 40px 0; }

/* ============ per-post niche classes (comparison guides, hero images) ============ */
.hero-image { margin: 0 0 28px; }
.hero-image img { display: block; width: 100%; height: auto; border: var(--hair); }
.lead-note {
  border: var(--hair); border-left: 2px solid var(--green); background: var(--base);
  padding: 14px 18px; margin: 0 0 28px; color: var(--comment); font-size: 14px;
}
/* comparison-table status words — functional colors as product evidence */
td.yes, .yes { color: var(--green); }
td.no, .no { color: var(--red); }
td.partial, .partial { color: var(--yellow); }
.row-nori, tr.row-nori td { background: color-mix(in srgb, var(--green) 8%, transparent); }
.row-nori td:first-child, .tool { color: var(--fg); font-weight: 600; }
.table-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  main, .layout, .listing, .legal-inner, .welcome-inner { padding: 40px 20px 20px; }
  h1 { font-size: clamp(28px, 8vw, 38px); }
  /* top bar collapses to a burger: logo + ☰ on one row, links drop into a panel when opened */
  .nav-inner { flex-wrap: wrap; align-items: center; gap: 0; padding: 12px 20px; }
  .nav-logo { margin-right: auto; }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; margin: -8px -8px -8px 0; }
  .nav-burger span { display: block; width: 22px; height: 2px; background: var(--comment); transition: background 120ms linear; }
  .nav-burger:hover span { background: var(--fg); }
  .nav-links { display: none; flex-basis: 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 11px 2px; font-size: 14px; border-top: var(--hair); }
  .nav-links a.nav-cta { color: var(--green); }
  /* bottom bar: compact 2-column grid, drop the decorative colophon line */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; }
  .footer-colophon { display: none; }
}

/* ============ legal pages (privacy, terms) ============ */
.legal-inner { max-width: 760px; margin: 0 auto; padding: 56px 32px 24px; }
.legal-header { margin-bottom: 32px; padding-bottom: 20px; border-bottom: var(--hair); }
.legal-updated { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.legal-content p { margin: 0 0 18px; max-width: 68ch; }
.legal-content h2 { font-weight: 700; font-size: 21px; color: var(--fg); margin: 40px 0 14px; letter-spacing: -0.01em; }
.legal-content h3 { font-weight: 700; font-size: 16.5px; color: var(--fg); margin: 28px 0 10px; }
.legal-content ul { margin: 0 0 18px; padding-left: 1.4em; max-width: 68ch; }
.legal-content li { margin-bottom: 8px; }
.legal-content li::marker { color: var(--comment); }
.legal-content a { color: var(--green); }
.legal-content a:hover { color: var(--green-bright); }
.legal-content strong { color: var(--fg); font-weight: 600; }
.legal-content code { font-family: var(--mono); font-size: 0.9em; color: var(--green-bright); background: var(--surface); border: var(--hair); border-radius: 3px; padding: 1px 5px; }
.legal-callout { border: var(--hair); border-left: 2px solid var(--green); background: var(--base); padding: 16px 20px; margin: 0 0 20px; max-width: 68ch; }
.legal-callout p { margin-bottom: 12px; }
.legal-callout p:last-child { margin-bottom: 0; }