/* ==========================================================================
   Hill Money Watch — the archive (blog/index.html) and every post.
   Built on css/site.css: every colour, face and size step is one of its
   tokens, and the nav, footer, eyebrow and .cs-nav cards are its components,
   reused as they are. This file adds only what a long read needs:
     1. Tokens   — the reading measure, one extra ink, v4 aliases
     2. Post     — header, reading column, the wide lane for tables
     3. Digest   — the classes digests emit (hmw-*, pill-*)
     4. Archive  — masthead, ticker band, latest edition, edition list
   Digests carry their own inline <style> so a digest file still reads when
   opened by itself. On the site the rules below win (higher specificity),
   which keeps every edition, old or new, on the current design.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --measure: 42.5rem;      /* reading column: ~66 characters of Archivo at 17px */
  --wide: 66rem;           /* how far a table may widen on a large screen */
  --ok-ink: #22693b;       /* --ok is tuned for fills; this one is AA as small text */

  /* Digests published before the v5 move style themselves with v4 token
     names. Pointing those names at v5 values keeps their rules resolving. */
  --paper: var(--bg);
  --paper-2: var(--bg-tint);
  --rule: var(--line);
  --rule-2: var(--line-2);
}
:root[data-theme="dark"] { --ok-ink: #5fc782; }

/* ---------- 2. Post ---------- */
/* Three columns: the reading measure in the middle, gutters either side that
   tables (and only tables) may grow into. .post-body is display: contents,
   so the digest's own blocks land directly on this grid. */
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--measure), 100%) minmax(0, 1fr);
  max-width: calc(var(--wide) + 2 * var(--pad));
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 96px)) var(--pad) clamp(72px, 9vw, 128px);
}
.post > *,
.post-body > * { grid-column: 2; min-width: 0; }
.post-body { display: contents; }

.post-head {
  padding-bottom: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(30px, 4.5vw, 52px);
  border-bottom: 1px solid var(--line-strong);
}
.post-back { transition: color 0.2s; }
.post-back:hover { color: var(--ink); }
.post-title {
  margin-top: clamp(18px, 2.6vw, 26px);
  font: 800 semi-expanded clamp(1.9rem, 4.3vw, 3.2rem)/1.02 var(--display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.post-lede {
  max-width: 62ch;
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.58;
  color: var(--ink-2);
  text-wrap: pretty;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 20px;
  font: 500 semi-condensed 0.75rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.post-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.15em;
}

/* Grid items don't collapse margins, so flow blocks only carry space below
   and headings carry the extra space above. */
.post-body { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.post-body > p,
.post-body > ul,
.post-body > ol,
.post-body > blockquote { margin: 0 0 1.1em; }
.post-body > p { text-wrap: pretty; }
.post-body strong,
.post-body b { font-weight: 600; color: var(--ink); }
.post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.post-body a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

.post-body > h2 {
  margin: clamp(38px, 5vw, 60px) 0 16px;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  font: 800 semi-expanded clamp(1.4rem, 2.5vw, 1.9rem)/1.08 var(--display);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* The header already ends in a rule; don't stack a second one under it.
   A digest usually opens with its <style>, hence the second selector. */
.post-body > h2:first-child,
.post-body > style:first-child + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.post-body > h3 {
  margin: clamp(30px, 4vw, 44px) 0 10px;
  font: 750 semi-expanded clamp(1.1rem, 1.7vw, 1.3rem)/1.18 var(--display);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.post-body > h2 + h3 { margin-top: 8px; }

.post-body ul,
.post-body ol { padding-left: 1.2em; }
.post-body li { margin-bottom: 0.5em; padding-left: 0.2em; }
.post-body li::marker { color: var(--ink-3); }
.post-body hr { height: 0; margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.post-body code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-tint);
  font: 500 semi-condensed 0.86em var(--mono);
  color: var(--ink);
}
.post-body blockquote {
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--accent);
  font: 500 1.1875rem/1.5 var(--sans);
  color: var(--ink-2);
}

.edition-nav { margin-top: clamp(48px, 6vw, 72px); }
.edition-nav a:focus-visible { border-radius: 16px; }

/* ---------- 3. Digest ---------- */
/* Tables are the one thing allowed out of the reading column. Each sizes to
   its content, centres on the column, is never narrower than the column (so
   short tables line up with the prose), and scrolls sideways inside itself
   when even the wide lane is too narrow. */
.post-body > table {
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  width: max-content;
  min-width: min(100%, var(--measure));
  max-width: 100%;
  overflow-x: auto;
  margin: 6px 0 30px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.post-body table th,
.post-body table td {
  padding: 12px 22px 12px 0;
  text-align: left;
  vertical-align: top;
}
.post-body table th {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  font: 500 semi-condensed 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--ink-3);
}
.post-body table td { border-bottom: 1px solid var(--line); color: var(--ink-2); }
/* The first column names the member or asset; "(R-FL)" must not break at its hyphen. */
.post-body table td:first-child { color: var(--ink); white-space: nowrap; }
.post-body table tr:last-child td { border-bottom: 0; }
.post-body table :is(th, td):last-child { padding-right: 0; }
/* Ranges and dates split across two lines read as two numbers. hmw-trades:
   everything after the asset stays on one line; hmw-tape: everything after
   member and asset; hmw-status: everything but the closing prose column. */
.post-body .hmw-trades td:nth-child(n + 2),
.post-body .hmw-tape td:nth-child(n + 3),
.post-body .hmw-status td:not(:last-child) { white-space: nowrap; }

.post-body .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: 500 semi-condensed 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.post-body .pill.pill-buy {
  color: var(--ok-ink);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
}
.post-body .pill.pill-sell {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.post-body .pill.pill-roll { color: var(--ink-2); background: none; border-color: var(--line-strong); }
.post-body .pill.pill-none { color: var(--ink-3); background: none; border-color: var(--line); }

.post-body .hmw-note {
  margin: 4px 0 28px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  font-size: 0.96875rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.post-body .hmw-note > strong:first-child { color: var(--accent-ink); }

.post-body .hmw-lag { font: 400 semi-condensed 0.8125rem/1.5 var(--mono); letter-spacing: 0; color: var(--ink-3); }
/* A long note under a table row would otherwise set that column's width and
   stretch the whole table; as an inline-block it wraps at a sane measure. */
.post-body table .hmw-lag { display: inline-block; max-width: 36ch; }
.post-body table td:first-child .hmw-lag { white-space: normal; }
.post-body .hmw-meta { margin: 0 0 6px; font: 400 semi-condensed 0.8125rem/1.5 var(--mono); color: var(--ink-3); }
.post-body .hmw-sources { padding-left: 1.1em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); }
.post-body .hmw-sources li { margin-bottom: 7px; }

/* ---------- 4. Archive ---------- */
.archive-head { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 128px)); }
.archive-name {
  margin-top: clamp(18px, 2.6vw, 26px);
  font: 800 semi-expanded clamp(2.4rem, 6.4vw, 5.3rem)/0.95 var(--display);
  letter-spacing: -0.05em;
}
.archive-lede {
  max-width: 56ch;
  margin-top: clamp(22px, 3vw, 32px);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.archive-caveat { margin-top: 14px; font: 400 semi-condensed 0.8125rem/1.5 var(--mono); color: var(--ink-3); }

/* The ticker (base styles in site.css), run across the page as a band. */
.ticker.ticker-band { position: relative; top: auto; margin-top: clamp(44px, 6vw, 72px); }

.archive-feature { margin-top: clamp(36px, 5vw, 56px); }
.archive-status { padding: 28px 0; font: 400 semi-condensed 0.875rem/1.5 var(--mono); color: var(--ink-3); }
.archive-status a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.archive-fallback,
html:not(.js) #archive-status { display: none; }
html:not(.js) .archive-fallback { display: block; }

/* The newest edition gets the Lab's night room (.lab re-points the tokens). */
.latest {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: clamp(26px, 4.4vw, 52px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: radial-gradient(90% 130% at 0% 0%, var(--accent-soft), transparent 62%), var(--bg);
  box-shadow: var(--shadow);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.latest:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.latest:focus-visible { border-radius: var(--radius); outline-offset: 4px; }
.latest-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 semi-condensed 0.6875rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.latest-no { color: var(--ink-3); }
.latest-title {
  font: 800 semi-expanded clamp(1.8rem, 4.3vw, 3.4rem)/1 var(--display);
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.25s;
}
.latest:hover .latest-title { color: var(--accent); }
.latest-summary {
  max-width: 64ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.latest-cta {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.latest .arrow,
.archive-row .arrow { display: inline-block; transition: transform 0.25s var(--ease), color 0.2s; }
.latest:hover .arrow { transform: translateX(4px); }

.archive-earlier { padding-block: clamp(56px, 7vw, 96px) clamp(72px, 9vw, 128px); }
.archive-heading {
  font: 500 semi-condensed 0.75rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.archive-list { margin-top: 18px; list-style: none; border-top: 1px solid var(--line-strong); }
.archive-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 8px clamp(18px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.archive-row:focus-visible { border-radius: 10px; outline-offset: 6px; }
.archive-no {
  font: 500 semi-condensed 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.archive-title {
  font: 800 semi-expanded clamp(1.2rem, 1.9vw, 1.55rem)/1.1 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 0.2s;
}
.archive-summary {
  max-width: 66ch;
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.archive-row .arrow { color: var(--ink-3); }
.archive-row:hover .archive-title { color: var(--accent-ink); }
.archive-row:hover .arrow { color: var(--accent); transform: translateX(4px); }

@media (max-width: 640px) {
  .archive-row { grid-template-columns: minmax(0, 1fr) auto; }
  .archive-no { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .latest:hover { transform: none; }
}

@media print {
  .edition-nav, .ticker-band { display: none !important; }
  .post { padding-top: 24px; }
}