/* ── Blog posts — the essay register ──
   Loaded after styles.css; every post starts from blog-template.html.
   Same 45rem/41rem measure as the front page; figures may step out onto the 57rem
   "wide" stage (.wide) or run edge to edge (.full). Type roles as on the front page:
   Newsreader for everything read as language, Geist for names, Geist Mono for meta.
   To fold into styles.css once the layout settles. */

/* ── Post head: eyebrow · title in the tagline register · dek · byline ── */
.post-head > .inner { padding-top: 4.5rem; padding-bottom: 0; }
.post-title {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: clamp(2.2rem, 6.5vw, 3.2rem); font-weight: var(--disp-weight-lg); letter-spacing: var(--track-lg);
  line-height: 1.06; color: var(--headline); text-wrap: balance; margin-bottom: 1.5rem;
}
.post-title .em { color: var(--accent); font-style: italic; }
/* the dek — a synopsis in a standfirst register, one notch below the thesis-lede (blog-type-studies S1);
   .post-dek--lg keeps the front page's thesis-lede size for one-line deks such as the notes index */
.post-dek {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: 1.4rem; font-weight: 400; letter-spacing: var(--track-md);
  line-height: 1.45; color: var(--fg-soft); margin-bottom: 2.25rem;
}
.post-dek--lg { font-size: clamp(1.45rem, 2.9vw, 1.95rem); }
.post-byline {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding-top: 1.35rem; border-top: 1px solid color-mix(in srgb, var(--dark) 14%, transparent);
}
.post-authors { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: var(--track-name); color: var(--fg); }
.post-authors a { color: inherit; text-decoration: none; }
.post-authors a:hover { color: var(--accent); }
.post-authors .sep { color: var(--fg-dim); margin: 0 0.4rem; font-weight: 400; }
.post-meta { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }

/* ── Body: a three-stage grid — content (41rem, the front-page measure) · wide (57rem) · full ──
   Every child sits in the content column; .wide and .full step out. Rhythm comes from the
   row gap, so block elements carry only the extra they need on top of it. */
.post-body {
  display: grid; row-gap: 1.25rem;
  grid-template-columns:
    [full-start] minmax(2rem, 1fr)
    [wide-start] minmax(0, 8rem)
    [content-start] min(41rem, 100% - 4rem)
    [content-end] minmax(0, 8rem)
    [wide-end] minmax(2rem, 1fr)
    [full-end];
  padding: 3rem 0 18rem;   /* bottom clears the mountain range rising out of the footer, as on the legal pages */
}
.post-body > * { grid-column: content; min-width: 0; }
.post-body > .wide { grid-column: wide; }
.post-body > .full { grid-column: full; }

/* ── Prose — the front page's problem-section register ── */
.post-body p { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; color: var(--fg-soft); }
.post-body a { color: var(--accent); text-decoration: none; transition: opacity 0.18s ease; }
.post-body a:hover { opacity: 0.72; }
.post-body strong { color: var(--fg); font-weight: 600; }
.post-body .beat { color: var(--fg); font-style: italic; }
.post-body code {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--fg);
  background: var(--box); border-radius: 0.3em; padding: 0.06em 0.35em;
  white-space: nowrap;   /* an identifier never splits across lines */
}
.post-body ul, .post-body ol { list-style: none; }
.post-body li { position: relative; padding-left: 1.4rem; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; color: var(--fg-soft); }
.post-body li + li { margin-top: 0.5rem; }
.post-body ul li::before { content: '·'; position: absolute; left: 0.35rem; color: var(--fg-dim); }
.post-body ol { counter-reset: item; }
.post-body ol li::before { counter-increment: item; content: counter(item); position: absolute; left: 0; top: 0.35em; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); }

/* ── Subsection: a display-serif heading in the front page's section register (blog-type-studies B),
   then the lede one step above body ── */
.post-body h2 {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: 1.8rem; font-weight: 500; letter-spacing: var(--track-md); line-height: 1.2;
  color: var(--headline);
  margin-top: 2.25rem; margin-bottom: -0.35rem;   /* 3.5rem above, 0.9rem to the lede */
}
.post-body .post-lede {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: 1.4rem; font-weight: 400; font-style: italic; letter-spacing: var(--track-md);
  line-height: 1.45; color: var(--fg-soft);   /* italic keeps it apart from body text (blog-type-studies L4) */
}

/* ── Sub-subsection (h3) — the heading one step down; opens with a beat rather than a lede ── */
.post-body h3 {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: 1.3rem; font-weight: 500; letter-spacing: var(--track-md); line-height: 1.3;
  color: var(--headline); margin-top: 1.5rem; margin-bottom: -0.45rem;
}

/* ── Figure / table — the front page's env-box: bordered stage on the box tone, label straddling the frame ── */
.post-figure { position: relative; margin: 1.5rem 0; }
.post-figure .frame {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--dark) 16%, transparent); border-radius: 0.875rem;
  background: var(--box); padding: 2.25rem 2rem;
}
.post-figure .frame--table { padding: 0.6rem 1.25rem 0.4rem; }
.post-figure .frame--image { padding: 0.75rem; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 0.4rem; }
.fig-label {
  position: absolute; top: 0; left: 1.6rem; transform: translateY(-50%); z-index: 1;
  background: linear-gradient(180deg, var(--paper) 50%, var(--box) 50%);
  padding: 0 0.7rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
/* caption: an upright lead phrase in full ink, then the description in the etymology register (italic, muted) */
.post-figure figcaption {
  margin-top: 1rem; padding: 0 1.6rem; max-width: 44rem;
  font-family: var(--font-display); font-size: 0.9375rem; font-style: italic; line-height: 1.55; color: var(--fg-muted);
}
.post-figure figcaption .cap-lead { font-style: normal; font-weight: 500; color: var(--fg); }
.post-figure figcaption em { font-style: normal; color: var(--fg); }

/* the diagram placeholder inside Figure 1 — inline SVG styled in the house registers */
.fig-diagram { display: block; width: 100%; height: auto; min-width: 34rem; }   /* scrolls inside .fig-scroll on phones rather than shrinking its labels */
.fig-diagram .box { fill: rgba(255,255,255,0.55); stroke: color-mix(in srgb, var(--dark) 18%, transparent); stroke-width: 1; }
.fig-diagram .box-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.02em; fill: var(--fg); }
.fig-diagram .box-sub { font-family: var(--font-display); font-size: 12.5px; font-style: italic; fill: var(--fg-muted); }
.fig-diagram .num { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; fill: var(--fg-dim); }
.fig-diagram .arrow { fill: none; stroke: var(--fg-dim); stroke-width: 1.25; }
.fig-diagram .head { fill: var(--fg-dim); }
.fig-diagram .gem { fill: var(--accent); }

/* anything wider than a phone (diagram, table) scrolls inside the frame */
.fig-scroll { overflow-x: auto; }

/* table: mono column heads, Newsreader cells with tabular figures, row names in the sans name register */
.post-table { width: 100%; border-collapse: collapse; }
.post-table th {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); text-align: left; padding: 0.9rem 0.75rem 0.7rem; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--dark) 18%, transparent);
}
.post-table td {
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.4; color: var(--fg-soft);
  font-variant-numeric: tabular-nums; padding: 0.7rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dark) 8%, transparent);
}
.post-table tr:last-child td { border-bottom: 0; }
.post-table td:first-child { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: var(--track-name); color: var(--fg); }
.post-table .num { text-align: right; }
.post-table .hi { color: var(--accent); font-weight: 500; }

/* ── Quote — the beat register raised a size, hung on an oxblood rule; attribution in meta ── */
.post-quote { margin: 1.5rem 0; padding: 0.15rem 0 0.15rem 1.75rem; border-left: 2px solid var(--accent); }
.post-body .post-quote p {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: clamp(1.3rem, 2.4vw, 1.55rem); font-weight: 400; font-style: italic; letter-spacing: var(--track-md);
  line-height: 1.4; color: var(--headline);
}
.post-quote footer {
  margin-top: 1rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
}
.post-quote footer::before { content: '— '; }
.post-quote cite { font-style: normal; }

/* ── Two columns side by side — each under a mono head on a hairline; stacks on phones ── */
.post-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; margin: 1.5rem 0; }
.post-cols > * { min-width: 0; }
.col-head {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); padding-bottom: 0.6rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dark) 14%, transparent);
}
.col-head .hi { color: var(--accent); }
.post-body .post-cols p { font-size: 1.0625rem; line-height: 1.5; }
.post-cols p + p { margin-top: 0.9rem; }

/* ── Section break — the gem, centred ── */
.post-break { border: 0; height: auto; display: flex; justify-content: center; margin: 1.5rem 0; }
.post-break::before { content: ''; width: 0.6rem; height: 0.6rem; background: var(--accent); }

/* ── Footnotes — mono markers in the accent; the notes in small Newsreader under a hairline ── */
.fn-ref { font-family: var(--font-mono); font-size: 0.6em; font-weight: 500; letter-spacing: 0.04em; vertical-align: super; line-height: 0; margin-left: 0.12em; }
.post-footnotes { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--dark) 14%, transparent); list-style: none; counter-reset: fn; }
.post-body .post-footnotes li { position: relative; padding-left: 1.6rem; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-muted); }
.post-body .post-footnotes li + li { margin-top: 0.6rem; }
.post-body .post-footnotes li::before { counter-increment: fn; content: counter(fn); position: absolute; left: 0; top: 0.3em; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); }
.post-footnotes .fn-back { font-family: var(--font-mono); font-size: 0.7em; margin-left: 0.35em; color: var(--fg-dim); }

/* ── Post foot: back to the index, and the date once more ── */
.post-foot {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--dark) 14%, transparent);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem;
}
.post-back {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none; transition: color 0.18s ease;
}
.post-back:hover { color: var(--accent); }

/* ── Inline brand glyphs in the notes head — the pit and the shovel-g set like emoji.
   The g sits like a letter: bowl on the x-height, shovel descending below the baseline. ── */
.inline-pit { display: inline-block; width: 0.93em; height: 0.93em; vertical-align: -0.245em; margin: 0 0.06em 0 0.3em; }   /* the face's full extent: descender to cap height, so the rings read (matches styles.css) */
.inline-pit .layer { fill: var(--dark); }
.inline-pit .gem { fill: var(--accent); }
.inline-g { display: inline-block; height: 0.92em; width: auto; vertical-align: -0.36em; margin: 0 0.03em 0 0.18em; color: var(--wm); }

/* ── Notes index (notes.html) — newest first; date and kind in the roster's left column, title in the display register ── */
.notes > .inner { padding-top: 3rem; padding-bottom: 18rem; }
.notes-list { list-style: none; border-top: 1px solid color-mix(in srgb, var(--dark) 14%, transparent); }
.note {
  display: grid; grid-template-columns: 11.5rem 1fr; column-gap: 1.5rem; align-items: baseline;
  padding: 2rem 0 2.1rem; border-bottom: 1px solid color-mix(in srgb, var(--dark) 10%, transparent);
}
.note:last-child { border-bottom: 0; }
.note-meta { display: grid; gap: 0.4rem; }
.note-date, .note-kind { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.note-date { color: var(--fg-muted); }
.note-kind { color: var(--accent); }
.note-title {
  font-family: var(--font-display); font-optical-sizing: var(--disp-opsz);
  font-size: 1.5rem; font-weight: 500; letter-spacing: var(--track-md); line-height: 1.3; color: var(--headline); text-wrap: balance;
}
.note-title a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
.note-title a:hover { color: var(--accent); }
.note-title .em { color: var(--accent); font-style: italic; }
.note-summary { grid-column: 2; margin-top: 0.6rem; font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5; color: var(--fg-muted); }

@media (max-width: 680px) {
  .post-head > .inner { padding-top: 3rem; }
  .post-body {
    grid-template-columns: [full-start] 1.5rem [wide-start content-start] minmax(0, 1fr) [content-end wide-end] 1.5rem [full-end];
    padding-bottom: 15rem;
  }
  .post-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .post-figure .frame { padding: 1.75rem 1.25rem; }
  .fig-scroll > img { min-width: 40rem; }   /* wide diagrams scroll sideways rather than shrinking to nothing */
  .post-figure .frame--table { padding: 0.4rem 0.75rem 0.25rem; }
  .post-figure figcaption { padding: 0 0.75rem; }
  .post-quote { padding-left: 1.25rem; }
  .notes > .inner { padding-bottom: 15rem; }
  .note { grid-template-columns: 1fr; row-gap: 0.5rem; padding: 1.6rem 0 1.75rem; }
  .note-meta { grid-auto-flow: column; justify-content: start; gap: 0.9rem; }
  .note-summary { grid-column: 1; margin-top: 0.25rem; }
}