/* The Dispatch — reader stylesheet (P2 design system).
   Restyles the semantic markup from api/cms/_templates.js. Self-hosted fonts,
   warm newsprint, one oxblood accent. No external requests. The Studio has its
   own stylesheet (public/studio/studio.css). */

@import '/assets/fonts/dispatch-fonts.css';

:root {
  --paper:      #f4f3ef;
  --paper-edge: #eceae4;
  --ink:        #1b1813;
  --ink-soft:   #403a30;
  --muted:      #6d665a;
  --faint:      #9c927f;
  --rule:       #211d16;
  --hair:       rgba(27, 24, 19, 0.22);
  --hair-2:     rgba(27, 24, 19, 0.12);
  --spot:       #8a2b21;

  --disp: 'Playfair Display', Georgia, serif;         /* display headlines */
  --text: 'Newsreader', Georgia, serif;               /* body serif */
  --name: 'Libre Baskerville', 'Baskerville', 'Baskerville Old Face', Georgia, serif;
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'Departure Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure-wide: 1120px;   /* front page + index */
  --measure-read: 780px;    /* article body */
}

/* ---- Read Mode: clean flat dark — cool charcoal ground, never black.
   Only the tokens change; every component reads through them, so the reader
   and the Studio (which inherits :root) both flip with one switch. ------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:      #1e2126;
  --paper-edge: #282c32;
  --ink:        #e9eaed;
  --ink-soft:   #b7bbc2;
  --muted:      #888d95;
  --faint:      #5f636c;
  --rule:       #e9eaed;
  --hair:       rgba(255, 255, 255, 0.16);
  --hair-2:     rgba(255, 255, 255, 0.09);
  --spot:       #dc6450;    /* oxblood lifted so it reads on the dark ground */
  --status-live: #4fbf83;
}
/* Flat dark ground: the printed-paper texture would only muddy it. */
:root[data-theme="dark"] body.is-front { background-image: none; }
:root[data-theme="dark"] .figure-ph {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 8px, transparent 8px 16px);
}
:root[data-theme="dark"] .mkt-chg.up { color: #4fbf83; }

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

/* Lock the page against any sideways slide. overflow-x on html (only) clips
   whatever would let iOS pan horizontally, while keeping html as the document
   scroller — so position:sticky toolbars keep sticking. (overflow on body makes
   body a scroll container the window scroll can't drive, which breaks sticky.) */
html { background: var(--paper); overflow-x: hidden; max-width: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

::selection { background: var(--spot); color: var(--paper); }

a { color: var(--spot); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; border-radius: 1px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the mark (inline svg, currentColor) ------------------------------- */
/* width: fit-content so the span shrink-wraps the mark (margin:0 auto can then
   center it); aspect-ratio pins the svg's width off its height — Safari won't
   infer it from the viewBox alone the way Chrome does. */
.mark { display: block; width: fit-content; color: var(--ink); }
.mark svg { display: block; height: 100%; width: auto; aspect-ratio: 240 / 224; }

/* ---- shared shells ----------------------------------------------------- */
.wrap { max-width: var(--measure-wide); margin: 0 auto; padding: 0 clamp(20px, 5vw, 54px); }

/* Inside-page running head — echoes the front flag so an article reads as a page
   of the same paper: mark + wordmark, the paper's dateline, and the commanding
   double rule, all aligned to the article column. Reveals in one motion on load. */
.chrome {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(7px);
}
.chrome-inner {
  max-width: var(--measure-read); margin: 0 auto;
  padding: 15px clamp(20px, 5vw, 24px) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.chrome-lockup { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.chrome-lockup .mark { height: 25px; }
.chrome-lockup b {
  font-family: var(--name); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 15px; line-height: 1;
}
.chrome-lockup:hover b { color: var(--spot); }
.chrome-folio { display: flex; align-items: baseline; gap: 16px; }
.chrome-dateline {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.chrome-archive {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.chrome-archive:hover { color: var(--spot); text-decoration: none; }
.chrome-rule { max-width: var(--measure-read); margin: 9px auto 0; padding: 0 clamp(20px, 5vw, 24px); }
.chrome-rule::before { content: ""; display: block; border-top: 3px solid var(--ink); }
.chrome-rule::after { content: ""; display: block; border-top: 1px solid var(--ink); margin-top: 2.5px; }
@media (max-width: 560px) { .chrome-dateline { display: none; } }

/* One orchestrated reveal on load — the running head sets, the rule draws
   across, then the headline rises. Motion-safe. */
@media (prefers-reduced-motion: no-preference) {
  .chrome-lockup { animation: dp-rise 0.55s cubic-bezier(0.2,0.7,0.2,1) both; }
  .chrome-folio  { animation: dp-rise 0.55s cubic-bezier(0.2,0.7,0.2,1) 0.06s both; }
  .chrome-rule::before { animation: dp-draw 0.72s cubic-bezier(0.65,0,0.2,1) 0.14s both; transform-origin: left; }
  .chrome-rule::after  { animation: dp-draw 0.72s cubic-bezier(0.65,0,0.2,1) 0.2s both; transform-origin: left; }
  .article > .kicker { animation: dp-rise 0.55s ease 0.26s both; }
  .article > h1      { animation: dp-rise 0.6s ease 0.32s both; }
  .article > .deck   { animation: dp-rise 0.55s ease 0.4s both; }
}
@keyframes dp-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes dp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- front-page cover masthead ---------------------------------------- */
main.cover { padding-bottom: 96px; }
.cover-head { padding: 44px 0 0; }
.cover-topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 18px;
}
.cover-topbar .mark { height: 58px; }
.folio {
  text-align: right; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.9;
}
.nameplate {
  font-family: var(--name); font-weight: 700; text-transform: uppercase;
  font-size: 96px; line-height: 1.05; text-align: center; letter-spacing: 0.004em;
  color: var(--ink); white-space: nowrap;
}
.nameplate span { display: inline-block; white-space: nowrap; }
.cover-rule { border-top: 3px solid var(--rule); margin-top: 10px; }
.cover-tagline {
  font-family: var(--text); font-style: italic; font-size: 15px;
  text-align: center; color: var(--ink-soft); padding-top: 10px;
}

/* lead essay */
.lead { margin-top: 40px; text-align: center; }
.kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--spot);
}
.lead-link { display: block; color: inherit; }
.lead-link:hover .lead-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lead-title {
  font-family: var(--disp); font-weight: 900; font-size: clamp(44px, 6.4vw, 76px);
  line-height: 0.98; letter-spacing: -0.025em; margin-top: 12px; color: var(--ink);
  text-wrap: balance;
}
.lead-deck {
  font-family: var(--text); font-style: italic; font-size: 22px; line-height: 1.36;
  color: var(--ink-soft); margin: 18px auto 0; max-width: 660px; text-wrap: balance;
}
.byline {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-top: 16px;
}
.lead-figure { margin-top: 26px; }
.lead-figure img { width: 100%; }
.lead-figure .figure-ph { aspect-ratio: 24 / 9; }
.figure-ph {
  background-color: var(--paper-edge);
  background-image: repeating-linear-gradient(135deg, rgba(27,24,19,0.05) 0 8px, transparent 8px 16px);
  border: 1px solid var(--hair-2);
  display: flex; align-items: center; justify-content: center;
}
.figure-ph span {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--faint);
}
figcaption {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.04em;
  color: var(--muted); margin-top: 8px; font-style: italic;
}

/* lead body — three columns, gap only (no rules) */
.cover-body {
  column-count: 3; column-gap: 40px; margin-top: 28px;
  font-family: var(--text); font-size: 15.5px; line-height: 1.66;
  color: var(--ink-soft); text-align: justify; hyphens: auto;
}
.cover-body > p { margin-top: 12px; }
.cover-body > p:first-child { margin-top: 0; }
.cover-body > p:first-child::first-letter {
  float: left; font-family: var(--disp); font-weight: 900; font-size: 78px;
  line-height: 0.66; padding: 8px 10px 0 0; color: var(--ink);
}

/* also in this issue */
.also { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 8px; }
.also-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.also-head p {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.also-head a {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--spot);
}
.also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 16px; }
.also-item { display: block; color: inherit; }
.also-item .kicker { font-size: 10px; letter-spacing: 0.16em; }
.also-item h4 {
  font-family: var(--disp); font-weight: 800; font-size: 22px; line-height: 1.06;
  margin-top: 6px; color: var(--ink);
}
.also-item:hover h4 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.also-item p {
  font-family: var(--text); font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 8px;
}

/* ---- article ----------------------------------------------------------- */
.article { max-width: var(--measure-read); margin: 0 auto; padding: 54px clamp(20px, 5vw, 24px) 40px; }
.article > .kicker { display: block; text-align: left; }
.article h1 {
  font-family: var(--disp); font-weight: 900; font-size: clamp(38px, 5.4vw, 58px);
  line-height: 1.02; letter-spacing: -0.02em; margin-top: 10px; color: var(--ink);
  text-wrap: balance;
}
.article .deck {
  font-family: var(--text); font-style: italic; font-size: 22px; line-height: 1.4;
  color: var(--ink-soft); margin-top: 14px;
}
.author-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.author-mono {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-family: var(--name); font-weight: 700; font-size: 17px;
}
.author-row .who { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.author-row .when { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.action-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.share { display: inline-flex; gap: 6px; align-items: center; }
.share a, .share button {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hair);
  padding: 6px 10px; border-radius: 2px; cursor: pointer; line-height: 1;
}
.share a:hover, .share button:hover { color: var(--spot); border-color: var(--spot); text-decoration: none; }
.article-figure { margin-top: 28px; }
/* Cap the article cover to a contained feature — the homepage lead keeps the
   full 2:3, but inline it reads as a banner. Anchored low so a bottom-weighted
   subject (a portrait's figures) stays whole rather than getting its feet cut. */
.article-figure img { display: block; width: 100%; max-height: 620px; object-fit: cover; object-position: center bottom; }

/* ---- post body (matches _render.js output) -----------------------------
   Set like a book: real kerning, common ligatures, old-style figures that sit
   with the lowercase, and hanging punctuation (Safari) so the left margin reads
   optically straight. text-wrap: pretty keeps last lines from stranding a word. */
.post-body {
  font-family: var(--text); font-size: 21px; line-height: 1.72; color: var(--ink-soft); margin-top: 30px;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  hanging-punctuation: first last;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.post-body > p { margin-top: 1.2em; text-wrap: pretty; }
.post-body > p:first-of-type { margin-top: 0; }
.post-body > p:first-of-type::first-letter {
  float: left; font-family: var(--disp); font-weight: 800; font-size: 3.6em;
  line-height: 0.72; padding: 0.06em 0.08em 0 0; margin-right: 0.02em; color: var(--ink);
}
.post-body h2, .post-body h3 {
  font-family: var(--disp); color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}
.post-body h2 { font-weight: 800; font-size: 30px; margin: 1.6em 0 0.3em; }
.post-body h3 { font-weight: 700; font-size: 23px; margin: 1.4em 0 0.25em; }
.post-body a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--faint);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.post-body a:hover { color: var(--spot); text-decoration-color: var(--spot); }
.post-body strong, .post-body b { font-weight: 700; color: var(--ink); }
.post-body code {
  font-family: var(--mono); font-size: 0.86em; background: var(--paper-edge);
  padding: 0.1em 0.35em; border-radius: 2px;
}
.post-body blockquote {
  margin: 1.9em 0; padding: 0.15em 0 0.15em 28px; border-left: 2px solid var(--spot);
  text-align: left;
}
.post-body blockquote p {
  font-family: var(--disp); font-weight: 400; font-size: 26px; line-height: 1.4;
  font-style: italic; color: var(--ink); text-wrap: pretty;
}
.post-body blockquote cite {
  display: block; margin-top: 12px; font-family: var(--sans); font-style: normal;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.post-body ul, .post-body ol { margin: 1.1em 0 1.1em 1.3em; }
.post-body li { margin-top: 0.4em; }
.post-body hr {
  border: 0; text-align: center; margin: 2em 0;
}
.post-body hr::after {
  content: '✳'; color: var(--spot); font-size: 18px; letter-spacing: 0.3em;
}
.post-body .post-image { margin: 1.8em 0; }
.post-body .post-image img { width: 100%; }
.post-body .post-image figcaption { text-align: left; }

/* youtube facade — no third-party JS until tapped */
.embed-youtube {
  position: relative; margin: 1.8em 0; aspect-ratio: 16 / 9;
  background: var(--ink); display: grid; place-items: center; cursor: pointer; overflow: hidden;
}
.embed-youtube > a {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper);
}
.embed-youtube::before {
  content: ''; position: absolute; width: 62px; height: 62px; border-radius: 50%;
  background: var(--spot); pointer-events: none;
}
.embed-youtube::after {
  content: ''; position: absolute; pointer-events: none;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--paper); margin-left: 4px;
}
.embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-youtube.is-playing::before, .embed-youtube.is-playing::after, .embed-youtube.is-playing > a { display: none; }

/* tags */
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hair); }
.post-tags::before {
  content: 'Filed under'; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 4px;
}
.post-tags a {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft);
  border: 1px solid var(--hair); padding: 4px 9px; border-radius: 2px;
}
.post-tags a:hover { color: var(--spot); border-color: var(--spot); text-decoration: none; }

/* preview / draft banner */
.preview-banner {
  background: var(--ink); color: var(--paper); font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-align: center;
  padding: 10px; text-transform: uppercase;
}

/* ---- index / archive --------------------------------------------------- */
.index-head { text-align: center; padding: 48px 0 0; }
.index-head .mark { height: 40px; margin: 0 auto 14px; }
.index-name {
  font-family: var(--name); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: clamp(26px, 4vw, 40px); color: var(--ink);
}
.index-folio {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: 12px; padding-bottom: 18px;
  border-bottom: 3px solid var(--rule);
}
.index-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; margin-top: 34px; }
.index-grid .rail { border-left: 1px solid var(--hair); padding-left: 34px; }
.rail h2 {
  font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--spot); margin-bottom: 4px;
}
.rail .sections a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--hair-2); color: var(--ink);
  font-family: var(--disp); font-size: 17px;
}
.rail .sections a:hover { color: var(--spot); text-decoration: none; }
.rail .sections .count { font-family: var(--sans); font-size: 11px; color: var(--faint); }

.entry { display: block; color: inherit; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.entry:first-child { padding-top: 0; }
.entry .kicker { text-align: left; }
.entry h3 {
  font-family: var(--disp); font-weight: 800; font-size: 28px; line-height: 1.06;
  margin-top: 6px; color: var(--ink); text-wrap: balance;
}
.entry:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry .entry-deck { font-family: var(--text); font-style: italic; font-size: 17px; color: var(--muted); margin-top: 8px; }
.entry .entry-meta { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }

/* ---- empty states ------------------------------------------------------ */
.empty { text-align: center; padding: 80px 0; }
.empty p { font-family: var(--text); font-style: italic; font-size: 22px; color: var(--muted); }
.empty .cta {
  display: inline-block; margin-top: 22px; font-family: var(--sans); font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper);
  background: var(--ink); padding: 11px 20px; border-radius: 2px;
}
.empty .cta:hover { text-decoration: none; background: var(--spot); }

/* ---- 404 --------------------------------------------------------------- */
.not-found { max-width: var(--measure-read); margin: 0 auto; padding: 90px clamp(20px,5vw,24px); text-align: center; }
.not-found h1 { font-family: var(--disp); font-weight: 900; font-size: 60px; color: var(--ink); }
.not-found p { margin-top: 14px; color: var(--ink-soft); }

/* ---- footer (left-aligned colophon) ------------------------------------ */
.site-footer { margin-top: 72px; }
.footer-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 clamp(20px,5vw,54px) 60px; }
.footer-rule { border-top: 3px solid var(--rule); }
.footer-rule::after { content: ""; display: block; border-top: 1px solid var(--rule); margin-top: 2.5px; }
.footer-grid { display: grid; grid-template-columns: 2.4fr 1fr 1.7fr; gap: 30px; padding-top: 26px; }
.footer-brand .footer-lockup { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.footer-lockup .mark { height: 28px; }
.footer-lockup b { font-family: var(--name); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; }
.footer-tagline { font-family: var(--text); font-style: italic; font-size: 14.5px; color: var(--muted); margin-top: 11px; max-width: 34ch; line-height: 1.42; }
.footer-col h4 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.footer-col a { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); padding: 3px 0; width: fit-content; }
.footer-col a:hover { color: var(--spot); text-decoration: none; }
.footer-colophon p { font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0; }
.footer-colophon a { color: var(--ink-soft); }

/* Read Mode toggle — one component, moon in light / sun in dark. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 999px;
  background: none; border: 1px solid var(--hair); color: var(--ink-soft);
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--spot); border-color: var(--spot); }
.theme-toggle span { display: inline-flex; }
.theme-toggle svg { display: block; }
.theme-toggle .tt-light { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-light { display: inline-flex; }
.footer-display { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.tt-hint { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tt-chrome { width: 27px; height: 27px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .cover-body { column-count: 2; }
  .index-grid { grid-template-columns: 1fr; gap: 26px; }
  .index-grid .rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 22px; }
  .also-grid { grid-template-columns: 1fr; gap: 24px; }
  .nameplate { font-size: 15vw; }
}
@media (max-width: 620px) {
  body { font-size: 18px; }
  .cover-body { column-count: 1; }
  .chrome-nav { gap: 14px; }
  .cover-topbar { flex-direction: column; gap: 14px; }
  .folio { text-align: left; }
  .post-body > p:first-of-type::first-letter,
  .cover-body > p:first-child::first-letter { font-size: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ======================================================================
   FRONT PAGE — newspaper broadsheet. Compact ruled flag, a gridded fold
   with live service furniture (Markets, Weather) on the left and reading
   furniture (On This Day, Quotation, In This Issue) on the right, framing
   a lead hero. Tuned so the whole composition sits above the fold on a
   desktop viewport; More Dispatches + footer fall below.
   ====================================================================== */
/* Textured body always fills the viewport (short front pages included) and the
   footer sits at the bottom, so the paper never gives way to a flat strip. */
body.is-front {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background-color: var(--paper);
  background-image: url('/assets/paper-texture.jpg');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.is-front > main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* .front fills the body so its column rules run down to the footer — short
   front pages read as newspaper columns, not a stranded block over dead space. */
.front { flex: 1 0 auto; display: flex; flex-direction: column; max-width: 1360px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 10px; width: 100%; }
/* Front page runs long with the tall lead cover — pull the colophon up tight. */
body.is-front .site-footer { margin-top: 26px; }
/* Match the footer to the front-page measure (1180) so its rule lines up with
   the masthead rule and the grid columns, edge to edge. */
body.is-front .footer-inner { max-width: 1360px; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }

/* flag — mark left + dateline right on one baseline, then full-width nameplate */
.flag-folio { display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding-bottom: 9px; }
.flag-folio-date { min-width: 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.flag-rule-thin { border-top: 1px solid var(--ink); }
/* Horizontal lockup — mark inline with the wordmark, one full-width svg. The
   mark sits at the caps' height and the wordmark fills the rest, so the two read
   as one solid block edge to edge. Compact next to the old stretched nameplate,
   so the whole front page pulls up. */
.flag-lockup { margin: 13px 0 11px; }
.flag-lockup-svg { display: block; width: 100%; height: auto; color: var(--ink); }
.flag-lockup-svg text { font-family: var(--disp); font-weight: 600; fill: var(--ink); font-kerning: normal; letter-spacing: 0.01em; }
.flag-rule-btm { border-top: 3px solid var(--ink); }
.flag-rule-btm::after { content: ""; display: block; border-top: 1px solid var(--ink); margin-top: 2.5px; }

/* fold grid — thin service rail · dominant feature · medium reading rail.
   The feature takes the width so it stays the focal point; the left is the
   narrowest (compact data reads fine tight), the right a touch wider (prose). */
.front-grid { flex: 1 0 auto; display: grid; grid-template-columns: 2fr 8fr 3fr; column-gap: 24px; }
.front-rail { min-width: 0; }
.front-rail-l { padding: 20px 24px 0 0; border-right: 1px solid var(--rule); min-width: 0; }
.front-main { padding: 20px 0 0; min-width: 0; }
.front-rail-r { padding: 20px 0 0 24px; border-left: 1px solid var(--rule); min-width: 0; }

/* modules */
.mod { margin-bottom: 22px; }
.mod:last-child { margin-bottom: 0; }
.mod-h { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 2px solid var(--ink); margin-bottom: 9px; }
.mod-wait { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 4px 0; }
.mod-foot { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 7px; }

/* markets */
.mkt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hair-2); }
.mkt-row:last-child { border-bottom: 0; }
.mkt-sym { font-family: var(--mono); font-size: 12.5px; color: var(--ink); letter-spacing: 0.02em; }
.mkt-val { text-align: right; line-height: 1.25; }
.mkt-price { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); display: block; }
.mkt-chg { font-family: var(--mono); font-size: 11px; }
.mkt-chg.up { color: #2f7d4f; }
.mkt-chg.down { color: var(--spot); }

/* mobile markets ticker — hidden until home.js marks it ready, revealed only
   under 900px (where the vertical Markets box is hidden). Track is doubled, so
   translateX(-50%) loops seamlessly. */
.m-ticker { display: none; margin: 12px 0 2px; padding: 11px 0 9px; border-bottom: 1px solid var(--hair); }
.m-ticker .mod-h { margin-bottom: 9px; }
.m-ticker .mod-foot { margin-top: 9px; }
.m-ticker-win {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.m-ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker-scroll 34s linear infinite; }
.tick { display: inline-flex; align-items: baseline; gap: 7px; margin-right: 30px; }
.tick-sym { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.03em; }
.tick-price { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .m-ticker-track { animation: none; } }
/* Weather number appended to the folio dateline — mobile only. */
.folio-wx { display: none; }

/* The Wire — mobile swipe carousel of the four feeds. Native scroll-snap;
   home.js drives the dots. Hidden on desktop (feeds live in the rails there). */
.wire { display: none; }
.wire-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wire-track::-webkit-scrollbar { display: none; }
.wire-card { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: start; padding-top: 2px; }
.wire-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.wire-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--hair); transition: background-color 0.2s ease, transform 0.2s ease;
}
.wire-dot.is-on { background: var(--ink); transform: scale(1.15); }

/* weather */
.wx-city { font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.1; }
.wx-temp { font-family: var(--disp); font-weight: 900; font-size: 44px; line-height: 1; color: var(--ink); margin: 3px 0; }
.wx-cond { font-family: var(--text); font-style: italic; font-size: 15px; color: var(--ink-soft); }
.wx-hilo { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* on this day */
.otd-item { font-family: var(--text); font-size: 14px; line-height: 1.55; letter-spacing: 0.01em; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid var(--hair-2); }
.otd-item:last-child { border-bottom: 0; }
.otd-year { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; color: var(--spot); margin-right: 7px; }

/* news briefs — headline links in the left rail, newspaper-wire style */
.news-list { list-style: none; }
.news-item { padding: 6px 0; border-bottom: 1px solid var(--hair-2); }
.news-item:last-child { border-bottom: 0; }
.news-item a { display: block; font-family: var(--text); font-size: 14px; line-height: 1.55; letter-spacing: 0.01em; color: var(--ink-soft); text-decoration: none; }
.news-item a:hover { color: var(--spot); }

/* quotation */
.mod-quote .qotd p { font-family: var(--text); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.mod-quote .qotd cite { display: block; margin-top: 7px; font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* lead hero — LEFT aligned, teaser only (the full story lives on its page) */
.front-main .kicker { text-align: left; }
.front-lead-link { display: block; color: inherit; }
.front-lead-link:hover .front-headline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.front-headline { font-family: var(--disp); font-weight: 900; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -0.015em; margin: 7px 0 11px; color: var(--ink); text-wrap: balance; }
.front-dek { font-family: var(--text); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--ink-soft); max-width: 46ch; }
.front-main .byline { text-align: left; margin: 11px 0 0; }
.front-lead-fig { display: block; margin: 16px 0 0; }
/* Required cover ratio: one fixed 2:3 portrait frame. The lead cover fills the
   full width of the main column at 2:3 — a big, tall broadsheet lead. Every
   cover fills it the same way (upload 2:3 for an exact fit; other shapes
   centre-crop), so the art anchors the front page down to the footer. */
.front-figure { width: 100%; margin: 0; }
.front-figure img, .front-figure .figure-ph {
  display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover;
}
.front-readmore { display: inline-block; margin-top: 13px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spot); }

/* briefs (right rail) */
.mod-briefs .brief { display: block; color: inherit; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hair-2); }
.mod-briefs .brief:last-child { border-bottom: 0; margin-bottom: 0; }
.mod-briefs .brief .kicker { font-size: 10px; letter-spacing: 0.16em; text-align: left; }
.mod-briefs .brief h3 { font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1.14; margin: 3px 0 4px; color: var(--ink); }
.mod-briefs .brief:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.mod-briefs .brief p { font-family: var(--text); font-size: 13.5px; line-height: 1.55; letter-spacing: 0.01em; color: var(--muted); }

/* ---- rail ad (boxed display ad, newspaper convention) ------------------ */
.mod-ad { margin-bottom: 22px; }
.ad-label {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); text-align: center;
  padding-bottom: 7px; margin-bottom: 10px; border-bottom: 1px solid var(--hair-2);
}
.ad {
  display: block; color: var(--ink); text-decoration: none;
  border: 1px solid var(--hair); padding: 15px 16px 13px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ad:hover { border-color: var(--ink); background-color: var(--paper-edge); text-decoration: none; }
.ad-kicker {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--spot); margin: 0 0 5px;
}
.ad-title { font-family: var(--disp); font-weight: 800; font-size: 24px; line-height: 1.02; color: var(--ink); margin: 0; }
.ad-pitch { font-family: var(--text); font-size: 13.5px; line-height: 1.42; color: var(--muted); margin: 7px 0 0; }
.ad-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hair-2);
}
.ad-price { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink); }
.ad-cta {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--spot);
}
.ad:hover .ad-cta { text-decoration: underline; text-underline-offset: 2px; }

/* more dispatches (below the fold) */
.front-more { margin-top: 34px; }
.front-more-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.front-more-head::before, .front-more-head::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }
.front-more-head span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.front-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.front-more-item { display: block; color: inherit; padding: 0 24px 18px; border-left: 1px solid var(--hair-2); }
.front-more-item:first-child { padding-left: 0; border-left: 0; }
.front-more-item .kicker { text-align: left; font-size: 10px; }
.front-more-item h4 { font-family: var(--disp); font-weight: 700; font-size: 20px; line-height: 1.15; margin: 6px 0 6px; color: var(--ink); }
.front-more-item:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.front-more-item .meta { font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.front-more-item p { font-family: var(--text); font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 7px; }

/* empty issue */
.front-empty { padding: 24px 0; }
.front-empty .kicker { text-align: left; }
.front-empty-lead { font-family: var(--disp); font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--ink); margin-top: 9px; }
.front-empty-sub { font-family: var(--text); font-style: italic; font-size: 17px; color: var(--muted); margin-top: 7px; }

/* front responsive — the fold reflows to one column on narrow screens */
@media (max-width: 900px) {
  .front-grid { grid-template-columns: 1fr; }
  /* Flatten both rails so every module becomes a direct grid item and can be
     ordered content-first (lead → In This Issue → The Wire → almanac → ad),
     instead of "all of the left rail, then all of the right." */
  .front-rail-l, .front-rail-r { display: contents; }
  .front-main { padding: 18px 0; border-bottom: 1px solid var(--hair); margin-bottom: 6px; }
  .front-main { order: 0; }
  .mod-briefs { order: 1; }
  .wire { order: 2; }
  .mod-otd { order: 3; }
  .mod-quote { order: 4; }
  .mod-ad { order: 5; }
  .front-more-grid { grid-template-columns: 1fr; }
  .front-more-item { padding: 0 0 18px; border-left: 0; }
  /* Markets → scrolling tape below the masthead; weather → folio number; the
     four feed boxes → The Wire swipe row. Their vertical boxes step aside. */
  .m-ticker.is-ready { display: block; }
  .mod-markets, .mod-weather, .mod-news { display: none; }
  .wire { display: block; }
  .folio-wx { display: inline; }
}
@media (max-width: 560px) {
  .front-rail-l { grid-template-columns: 1fr; }
  .flag-meta { flex-direction: column; gap: 3px; align-items: flex-start; }
}

/* Letters — reader responses, set like a paper's letters column ---------- */
.letters { max-width: var(--measure-read); margin: 60px auto 0; }
.letters-rule { border-top: 2px solid var(--rule); padding-top: 10px; margin-bottom: 24px; }
.letters-rule h2 {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); display: flex; align-items: baseline; gap: 9px;
}
.letters-count { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.letter-list { list-style: none; margin: 0 0 34px; padding: 0; }
.letter { padding: 18px 0; border-bottom: 1px solid var(--hair-2); }
.letter:first-child { padding-top: 2px; }
.letter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.letter-name { font-family: var(--name); font-size: 15px; font-weight: 700; color: var(--ink); }
.letter-date {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.letter p { font-family: var(--text); font-size: 17px; line-height: 1.62; color: var(--ink-soft); margin-top: 9px; }
.letter p:first-of-type { margin-top: 0; }
.letter-empty { border-bottom: 0; padding: 2px 0 6px; }
.letter-empty p { font-family: var(--text); font-style: italic; font-size: 16px; color: var(--muted); }

.letter-form { border-top: 1px solid var(--hair); padding-top: 24px; }
.letter-form-h { font-family: var(--disp); font-size: 23px; color: var(--ink); margin-bottom: 16px; }
.letter-form .field { display: block; margin-bottom: 15px; }
.letter-form .field-label {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.letter-input {
  width: 100%; font-family: var(--text); font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 2px; padding: 10px 12px; line-height: 1.5;
}
.letter-input:focus { outline: none; border-color: var(--ink); }
.letter-textarea { resize: vertical; min-height: 100px; }
/* Honeypot: hidden by clipping, NOT off-screen positioning — a left:-9999px
   box scrolls the page sideways on iOS Safari (overflow-x:hidden won't contain
   it). Clipped-in-place stays invisible to people, still fillable by bots. */
.letter-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.letter-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 2px; }
.letter-note { font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--faint); }
.letter-send {
  flex: none; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper); background: var(--ink); border: 0; border-radius: 2px;
  padding: 12px 24px; cursor: pointer; transition: background 0.14s ease;
}
.letter-send:hover { background: var(--spot); }
.letter-send:disabled { opacity: 0.5; cursor: default; }
.letter-status { font-family: var(--text); font-size: 14.5px; color: var(--ink-soft); margin-top: 13px; }
.letter-status.is-err { color: var(--spot); }
.letter-form.is-sent .letter-status { font-style: italic; }
.letter-closed { font-family: var(--text); font-style: italic; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 18px; }

@media (max-width: 700px) {
  .letters { margin-top: 44px; }
  .letter-form-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .letter-send { width: 100%; padding: 13px; }
}