/* ============================================================
 * oddly Longform / Journal archetypes. Design impl Phase 4
 * (design-handoff-2026-07-03-v2, "Archetype Family 2").
 *
 * The reading surface: /blog and every post under it, plus any
 * future whitepaper, methodology, or State-of-X report.
 *
 * WHY THIS FILE EXISTS. The blog never linked the token layer. Its
 * article styles were authored against a slate/zinc palette of raw
 * hex (#18181b ink, #334155 prose, #1f5f5b links, #e8f0ef quotes)
 * and, with no /_shared/oddly-tokens.css on the page, every
 * var(--oddly-font-serif) fell through to its Georgia fallback. The
 * posts have been rendering in Georgia on a grey ground while the
 * rest of the site moved to Newsreader on cream. Linking the tokens
 * fixes the font; this file fixes the palette and adds the article
 * template the handoff specifies.
 *
 * Load order on a post page (this file must come AFTER the blog
 * layer it corrects, and after titan, which it does not fight):
 *   oddly-chrome.css, oddly-blog.css, oddly-tokens.css,
 *   oddly-broadsheet.css, oddly-titan.css, then this.
 *
 * Two halves:
 *   1. The correction. Re-points the existing .post-shell / .post
 *      markup at the spine, so all 19 published posts inherit the
 *      archetype without touching their bodies.
 *   2. The template. lf-* components the handoff specifies and no
 *      post has yet: contents rail, kicker, standfirst, byline,
 *      pull quote, figure card, footnotes and sources.
 *
 * Mono is --oddly-text-mono (the token stack), not IBM Plex Mono, for
 * the same reason recorded in oddly-developers.css: the spine
 * self-hosts every webfont it ships.
 * ============================================================ */

/* ============================================================
 * 1. THE CORRECTION: existing post markup onto the spine
 * ============================================================ */

/* Reading column 680px. Existing posts keep a single centred column;
 * a post opts into the sticky contents rail by adding .lf-article to
 * .post-shell and wrapping its parts in <aside class="lf-toc"> plus a
 * content column, which is the only markup the rail needs. */
.post-shell {
  max-width: 680px;
  padding: 64px 32px 96px;
}
.post-shell.lf-article {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 190px 680px;
  gap: 56px;
  justify-content: center;
  align-items: start;
}

.post-shell h1 {
  font-family: var(--oddly-font-serif, "Newsreader", Georgia, serif);
  font-optical-sizing: auto;
  font-weight: var(--oddly-serif-weight-display, 400);
  font-size: clamp(34px, 4vw, 46px);
  line-height: var(--oddly-leading-display, 1.08);
  letter-spacing: var(--oddly-tracking-serif, -0.02em);
  color: var(--oddly-ink, #1A1A2E);
  margin: 0 0 18px;
}

.post-meta {
  font-size: 12.5px;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.5));
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  border-bottom: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  margin: 0;
}
.post-meta .read-time::before { color: var(--oddly-text-tertiary-soft, rgba(26, 26, 46, 0.4)); }
/* The back link sits between the byline rules and the first paragraph, so it
   owns the gap the byline no longer carries. */
.post-back { margin: 16px 0 34px; }
.post-back a, .post-back-bottom a { color: var(--oddly-teal, #2C7873); font-weight: 600; }

/* Prose sits at 0.78 ink, between the token layer's -secondary (0.7)
 * and full ink. The handoff fixes the reading colour at 0.78 and no
 * token carries that step, so it is written literally here. */
article.post {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(26, 26, 46, 0.78);
}
article.post p { margin: 0 0 22px; }
article.post h2 {
  font-family: var(--oddly-font-serif, "Newsreader", Georgia, serif);
  font-optical-sizing: auto;
  font-weight: var(--oddly-serif-weight-display, 400);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: var(--oddly-tracking-serif-loose, -0.015em);
  color: var(--oddly-ink, #1A1A2E);
  margin: 44px 0 16px;
}
article.post h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--oddly-ink, #1A1A2E);
  margin: 32px 0 12px;
}
article.post a { color: var(--oddly-teal, #2C7873); font-weight: 600; }
article.post strong { color: var(--oddly-ink, #1A1A2E); }

/* Blockquote reads as the handoff's pull quote: gold rule, serif italic,
 * no tinted panel. The panel was the loudest off-brand element on the
 * reading surface. */
article.post blockquote {
  margin: 0 0 34px;
  padding: 8px 0 8px 20px;
  border-left: 3px solid var(--oddly-gold, #B08D57);
  border-radius: 2px;
  background: none;
  font-family: var(--oddly-font-serif, "Newsreader", Georgia, serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--oddly-ink, #1A1A2E);
}

article.post code {
  font-family: var(--oddly-text-mono);
  background: rgba(26, 26, 46, 0.05);
  color: var(--oddly-teal, #2C7873);
}
article.post pre {
  background: var(--oddly-ink, #1A1A2E);
  color: var(--oddly-canvas, #FAFAF7);
  border-radius: 12px;
  font-family: var(--oddly-text-mono);
  font-size: 13px;
  line-height: 1.65;
}
article.post hr { border-top: 1px solid var(--oddly-border-subtle, rgba(26, 26, 46, 0.08)); }

.post-table-wrap {
  border: 1px solid var(--oddly-border-subtle, rgba(26, 26, 46, 0.09));
  border-radius: var(--oddly-radius-card-sm, 14px);
  background: var(--oddly-surface, #FFFFFF);
}
.post-table-wrap th {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.5));
}

/* ============================================================
 * 2. THE TEMPLATE: components the handoff specifies
 * ============================================================ */

/* ---- Contents rail: sticky, hides with the second column ---- */
.lf-toc { position: sticky; top: 90px; padding-top: 110px; }
.lf-toc-label {
  font-size: 10px;
  letter-spacing: var(--oddly-tracking-kicker, 0.14em);
  text-transform: uppercase;
  color: var(--oddly-text-tertiary-soft, rgba(26, 26, 46, 0.4));
  font-weight: 700;
  margin-bottom: 12px;
}
.lf-toc-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-left: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  padding-left: 14px;
  font-size: 12.5px;
}
.lf-toc-links a { color: var(--oddly-text-secondary-soft, rgba(26, 26, 46, 0.6)); text-decoration: none; }
.lf-toc-links a:hover { color: var(--oddly-ink, #1A1A2E); }
.lf-toc-links a[aria-current="true"] { color: var(--oddly-teal, #2C7873); font-weight: 600; }

/* ---- Kicker and standfirst ---- */
.lf-kicker {
  font-size: 12px;
  letter-spacing: var(--oddly-tracking-kicker-wide, 0.18em);
  text-transform: uppercase;
  color: var(--oddly-gold, #B08D57);
  font-weight: 600;
  margin-bottom: 20px;
}
.lf-standfirst {
  font-family: var(--oddly-font-serif, "Newsreader", Georgia, serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--oddly-text-secondary-soft, rgba(26, 26, 46, 0.6));
  margin: 0 0 26px;
}

/* ---- Byline: avatar, name and role, date and read time ---- */
.lf-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  border-bottom: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  margin-bottom: 36px;
}
.lf-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--oddly-ink, #1A1A2E);
  color: var(--oddly-canvas, #FAFAF7);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.lf-byline-name { font-size: 14px; font-weight: 700; color: var(--oddly-ink, #1A1A2E); }
.lf-byline-role, .lf-byline-when div {
  font-size: 12.5px;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.5));
}
.lf-byline-when { margin-left: auto; text-align: right; }

/* ---- Pull quote as an explicit component ---- */
.lf-pull { display: flex; gap: 20px; margin: 0 0 34px; padding: 8px 0; }
.lf-pull::before {
  content: "";
  width: 3px;
  border-radius: 2px;
  background: var(--oddly-gold, #B08D57);
  flex: none;
}
.lf-pull p {
  font-family: var(--oddly-font-serif, "Newsreader", Georgia, serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--oddly-ink, #1A1A2E);
  margin: 0;
}

/* ---- Figure card: chart in a white card, predicate line in the footer ---- */
.lf-figure {
  margin: 0 0 12px;
  border: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  border-radius: var(--oddly-radius-card-sm, 14px);
  overflow: hidden;
  background: var(--oddly-surface, #FFFFFF);
}
.lf-figure-head { padding: 20px 24px 6px; }
.lf-figure-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.45));
  font-weight: 700;
  margin-bottom: 4px;
}
.lf-figure-t { font-size: 15px; font-weight: 700; color: var(--oddly-ink, #1A1A2E); }
.lf-figure-body { padding: 12px 24px 6px; }
.lf-figure-body svg { width: 100%; display: block; }
.lf-figure figcaption {
  font-family: var(--oddly-text-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.5));
  padding: 12px 24px 18px;
}
.lf-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lf-figure-note {
  font-size: 12.5px;
  color: var(--oddly-text-tertiary, rgba(26, 26, 46, 0.5));
  margin: 0 0 34px;
}

/* ---- Footnotes and sources ---- */
.lf-fn {
  font-size: 11px;
  color: var(--oddly-teal, #2C7873);
  font-weight: 700;
  text-decoration: none;
  padding-left: 3px;
}
.lf-sources {
  border-top: 1px solid var(--oddly-border-mid, rgba(26, 26, 46, 0.1));
  padding-top: 20px;
}
.lf-sources-label {
  font-size: 10px;
  letter-spacing: var(--oddly-tracking-kicker, 0.14em);
  text-transform: uppercase;
  color: var(--oddly-text-tertiary-soft, rgba(26, 26, 46, 0.4));
  font-weight: 700;
  margin-bottom: 12px;
}
.lf-sources ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--oddly-text-secondary-soft, rgba(26, 26, 46, 0.6));
  counter-reset: lf-src;
}
.lf-sources li { counter-increment: lf-src; }
.lf-sources li::before {
  content: counter(lf-src);
  color: var(--oddly-teal, #2C7873);
  font-weight: 700;
  margin-right: 8px;
}
.lf-sources a { color: var(--oddly-teal, #2C7873); font-weight: 600; }

/* ---- Quality floor ---- */
.lf-toc-links a:focus-visible,
.lf-fn:focus-visible,
.lf-sources a:focus-visible {
  outline: 2px solid var(--oddly-teal, #2C7873);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Mobile collapse (handoff: <=1000px) ---- */
@media (max-width: 1000px) {
  .lf-toc { display: none; }
  .post-shell.lf-article { grid-template-columns: minmax(0, 680px); }
  .lf-figrow { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .post-shell { padding: 40px 22px 64px; }
  article.post blockquote, .lf-pull p { font-size: 22px; }
}