/* ─────────────────────────────────────────────────────────────
   francesmendez.com — site layer
   Tokens live in styles.css. This file carries the interaction
   states the prototypes expressed as style-hover / style-focus
   attributes, plus the small number of layout classes.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

body { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

.mono { font-family: 'Space Mono', monospace; }
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.wrap-narrow { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

/* ── chrome ─────────────────────────────────────────────── */
.chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 10; font-family: 'Space Mono', monospace; }

.banner {
  display: block; text-decoration: none;
  background: var(--color-accent); color: var(--color-bg);
  text-align: center; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 7px clamp(20px, 4vw, 56px);
}
.banner:hover { background: var(--color-accent-600); color: var(--color-bg); }

.nav-bar { backdrop-filter: blur(10px); background: rgba(32, 30, 29, 0.92); color: var(--color-bg); }
.nav-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px; justify-content: space-between;
  max-width: 1360px; margin: 0 auto;
  padding: 13px clamp(20px, 4vw, 56px);
  font-size: 15px; text-transform: lowercase; letter-spacing: 0.01em;
}

/* the wordmark — enlarged from the prototype's inline 14px */
.wordmark {
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, var(--wordmark-max, 21px));
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--color-bg);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--color-bg); }
.wordmark .star { color: var(--color-accent-300); }

.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 21px; }
.nav-links a { text-decoration: none; color: inherit; }
.nav-links a:hover { color: var(--color-accent-300); }
.nav-links a[aria-current='page'] { color: var(--color-accent-300); }
.nav-ico { opacity: 0.85; display: inline-flex; align-items: center; }
.nav-ico svg { display: block; }

.nav-links a.chip {
  text-decoration: none; color: var(--color-text);
  background: var(--color-bg); padding: 3px 9px;
}
.nav-links a.chip:hover { background: var(--color-accent-300); color: var(--color-text); }

/* ── mobile nav ─────────────────────────────────────────── */
/* Was wrapping to three rows on a phone: wordmark, four links, then
   tools + two social icons + the connect chip. Two of those are duplicates —
   Instagram and LinkedIn repeat in the footer, and the chip points at
   #subscribe, which is exactly what the teal banner directly above it says.
   Dropping both gets it to two rows without losing a destination. */
@media (max-width: 700px) {
  .nav-inner { padding: 11px clamp(20px, 5vw, 32px); gap: 10px 0; font-size: 12.5px; }
  .nav-ico { display: none; }
  .nav-links a.chip { display: none; }
  .nav-links { width: 100%; justify-content: space-between; gap: 4px; }
  .banner { font-size: 11px; letter-spacing: 0.08em; padding: 7px 16px; }
}

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(520px, var(--hero-vh, 94vh), 980px);
  display: flex; flex-direction: column;
  margin-top: var(--chrome-h, 88px);
}
/* --hero-zoom / --hero-x pan the photo inside the frame so the
   rotary phone clears the headline. See index.html :root override. */
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-x, 45%) var(--hero-y, 18%);
  transform: scale(var(--hero-zoom, 1)) translate(var(--hero-dx, 0), var(--hero-dy, 0));
  transform-origin: center;
}
.hero-scrim {
  position: absolute; inset: 0;
  /* Two layers. The left-to-right wash is what makes the headline legible over
     the sofa without darkening Frances on the right; the top-to-bottom one seats
     the nav and the credit line. Together these are the "D" option. */
  background:
    linear-gradient(to right, rgba(32,30,29,0.72) 0%, rgba(32,30,29,0.40) 34%, rgba(32,30,29,0.02) 62%),
    linear-gradient(to bottom, rgba(32,30,29,0.50), rgba(32,30,29,0.10) 38%, rgba(32,30,29,0.55) 88%);
}
.hero-body {
  position: relative; z-index: 2; max-width: 1360px; width: 100%;
  margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) var(--hero-lift, clamp(70px, 11vw, 168px));
  color: var(--color-bg);
}
.hero h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.4vw, var(--hero-h1-max, 100px)); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0;
}
.hero h1 > span { display: block; }
.hero h1 .italic { font-style: italic; font-weight: 400; }
/* The star IS the full stop — the period is deleted from the markup. So it sits
   like punctuation: on the baseline, with a word-space of air. The old rule
   raised it and tucked it against the period, which read as a footnote marker.
   Stays accent-300 because it sits on the dark scrim, not on cream. */
.hero h1 .star {
  color: var(--color-accent-300);
  font-size: var(--hero-star, 0.62em);
  vertical-align: 0.04em;
  padding-left: 0.22em;
}
.hero-intro {
  font-family: var(--font-body); font-size: 18px; line-height: 30px;
  max-width: 44ch; margin: 21px 0 0; opacity: 0.94;
}
.hero-intro a { color: inherit; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; margin-top: 28px; }

.cta-solid {
  text-decoration: none; color: var(--color-text);
  background: var(--color-bg); padding: 8px 12px;
}
.cta-solid:hover { background: var(--color-accent-300); color: var(--color-text); }
.cta-outline {
  text-decoration: none; color: inherit; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.cta-outline:hover { background: var(--color-bg); color: var(--color-text); }

/* photo credit — smaller than the prototype, and now a link */
.credit {
  position: absolute; right: clamp(20px, 4vw, 56px); bottom: 10px; z-index: 2;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-bg); opacity: 0.5; text-decoration: none;
}
.credit:hover { opacity: 0.95; color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }

/* ── ticker ─────────────────────────────────────────────── */
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker {
  overflow: hidden; white-space: nowrap; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  color: var(--color-accent-700);
}
.ticker-run { display: inline-flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker-run span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding-right: 2em; }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } }

/* ── section headers ────────────────────────────────────── */
.sec-head {
  font-family: 'Space Mono', monospace; font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase;
  margin: 0 0 28px;
}
.sec-head .n { color: var(--color-accent); }
.kicker {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0 0 14px;
}

/* ── ledger rows ────────────────────────────────────────── */
.hair { border-top: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent); }
.hair-b { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent); }

.num-row {
  display: grid; grid-template-columns: minmax(120px, 320px) 1fr;
  gap: 14px 28px; align-items: baseline; padding: 21px 0;
}
.num-row .fig {
  font-weight: 700; font-size: clamp(36px, 4.5vw, 64px); line-height: 1;
  letter-spacing: -0.03em; margin: 0;
}
.num-row .fig.cy { color: var(--color-accent); }
.num-row .lab {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7; margin: 0;
}

.row {
  display: grid; grid-template-columns: minmax(48px, 80px) 1fr;
  gap: 14px clamp(21px, 3vw, 42px); text-decoration: none; color: inherit;
  padding: 28px clamp(0px, 1vw, 14px); transition: background 140ms, color 140ms;
}
.row:hover { background: var(--color-text); color: var(--color-bg); }
.row.with-date { grid-template-columns: minmax(48px, 80px) 1fr auto; align-items: baseline; }
.row .idx { font-size: 14px; opacity: 0.7; }
.row .ttl {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.015em;
}
.row .dsc {
  display: block; font-family: var(--font-body); font-size: 15.5px; line-height: 26px;
  opacity: 0.75; max-width: 60ch; margin-top: 10px;
}
.row .go { display: block; font-size: 14px; margin-top: 14px; }
.row .date { font-size: 13px; letter-spacing: 0.06em; opacity: 0.7; }
.row.static { opacity: 0.55; }
.row.static:hover { background: none; color: inherit; }

.bracket { text-decoration: none; color: inherit; }
.bracket:hover { color: var(--color-accent); }

/* ── subscribe form ─────────────────────────────────────── */
.signup { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; max-width: 560px; margin-top: 28px; }
.signup input[type='email'] {
  flex: 1; min-width: 220px; font-family: 'Space Mono', monospace; font-size: 15px;
  color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent);
  border-radius: 0; padding: 10px 12px;
}
.signup input[type='email']:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.signup button {
  font-family: 'Space Mono', monospace; font-size: 15px;
  color: var(--color-bg); background: var(--color-text);
  border: none; border-radius: 0; padding: 10px 16px; cursor: pointer;
}
.signup button:hover { background: var(--color-accent); }
.signup-note {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.06em;
  margin: 12px 0 0; min-height: 1em; color: var(--color-accent-700);
}

/* ── footers ────────────────────────────────────────────── */
.foot-mono {
  display: flex; flex-wrap: wrap; gap: 21px 42px;
  justify-content: space-between; align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  padding: 42px 0 56px; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.75;
}
.foot-mono a { color: inherit; }
.foot-links { display: flex; gap: 21px; align-items: center; }

/* The photo credit sat at the same 12px uppercase weight as Frances's own
   name, which made a required attribution read like a co-byline. Still
   plainly legible — just no longer competing with her. */
.foot-credit {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: none; opacity: 0.6;
}
.barcode {
  display: inline-block; width: 88px; height: 24px;
  background: repeating-linear-gradient(90deg, var(--color-text) 0 2px, transparent 2px 4px, var(--color-text) 4px 7px, transparent 7px 9px, var(--color-text) 9px 10px, transparent 10px 14px);
}
.foot-serif {
  display: flex; flex-wrap: wrap; gap: 14px 42px; justify-content: space-between;
  padding: 56px 0; font-size: 13px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── misc ───────────────────────────────────────────────── */
.fig-cap {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.65; margin-top: 10px;
}
.post-link { color: inherit; text-decoration: none; }
.post-link:hover { color: var(--color-accent-700); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── about: the numbered journey rows ───────────────────── */
/* Was an inline grid of minmax(80px,160px) + minmax(300px,58ch), which needs
   401px before padding and so overflowed a 390px phone. */
.step-row {
  display: grid;
  grid-template-columns: minmax(80px, 160px) minmax(0, 58ch);
  gap: 21px clamp(21px, 4vw, 56px);
}
@media (max-width: 620px) {
  .step-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ── thoughts index cards (written by build-posts.js) ───── */
.th-list { display: grid; gap: 2px; padding: 0 0 84px; }
.th-card {
  display: grid; grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(21px, 3vw, 42px); align-items: start;
  background: var(--color-surface); padding: 28px;
}
.th-thumb { display: block; overflow: hidden; }
.th-thumb img {
  width: 100%; height: 100%; max-height: 220px; object-fit: cover;
  display: block; transition: transform 400ms ease;
}
.th-card:hover .th-thumb img { transform: scale(1.03); }
/* The date stays in the markup for crawlers but is not shown here — the index
   should read as a body of work, not a feed with a stale-looking timestamp.
   It is still printed in full in the byline on the article itself. */
.th-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.th-ttl {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.8vw, 33px); line-height: 1.22;
  letter-spacing: -0.015em; margin: 0;
}
.th-dsc {
  font-size: 15.5px; line-height: 27px; max-width: 58ch; margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
@media (max-width: 720px) {
  .th-card { grid-template-columns: 1fr; padding: 20px; }
  .th-thumb img { max-height: 200px; }
}

/* ─────────────────────────────────────────────────────────────
   BLOG POSTS
   Generated by build-posts.js from posts/*.md. Everything below
   is scoped under .post so it can never leak into a page that
   was hand-written.
   ───────────────────────────────────────────────────────────── */

/* One column, one left edge, one right edge. Everything inside the article —
   prose, hero, and every designed block — shares this width. Before, the prose
   was capped at a ch-based measure while the hero ran to the full container,
   which gave the page two different right edges and read as the text being
   cut off halfway. */
.post {
  max-width: 760px; margin-inline: auto;
  padding-top: calc(var(--chrome-h, 88px) + clamp(48px, 8vh, 92px));
}

/* ── head ───────────────────────────────────────────────── */
.post-head { max-width: 100%; }
.post-back { text-decoration: none; color: inherit; }
.post-back:hover { color: var(--color-accent-700); }

.post-head h1 {
  font-size: clamp(36px, 5.2vw, 68px); line-height: 1.07;
  letter-spacing: -0.022em; margin: 0 0 0 -0.035em;
}
.post-standfirst {
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  max-width: 46ch; margin: 21px 0 0;
}
.post-byline {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0;
}

/* ── hero image ─────────────────────────────────────────── */
.post-hero { margin: 42px 0 0; }
.post-hero img { width: 100%; height: auto; display: block; }
/* A portrait source would run past a full screen at full width, so it is
   capped and centred instead of bled edge to edge. */
.post-hero.portrait { max-width: 560px; }

/* ── body ───────────────────────────────────────────────── */
.post-body { max-width: 100%; margin: 0; padding: 0 0 28px; }
.post-body > p,
.post-body > ul,
.post-body > ol { font-size: 17.5px; line-height: 32px; margin: 28px 0 0; }
.post-body > ul, .post-body > ol { padding-left: 1.25em; }
.post-body li { margin: 8px 0; }
.post-body > h2 {
  font-size: clamp(25px, 3vw, 34px); line-height: 1.22; letter-spacing: -0.018em;
  margin: 64px 0 0;
}
.post-body > h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; margin: 48px 0 0; }
.post-body > h2 + p, .post-body > h3 + p { margin-top: 18px; }
.post-body strong { font-weight: 700; }
.post-rule {
  border: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  margin: 56px 0 0; max-width: 120px;
}
.post-bq {
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; font-style: italic;
  border-left: 2px solid var(--color-accent); margin: 42px 0 0;
  padding: 4px 0 4px 24px; color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

/* Components run wider than the 68ch measure of the prose. */
/* the components inherit the article column — no separate cap, or they
   would reintroduce the second right edge this layout exists to avoid */

/* ── ledger ─────────────────────────────────────────────── */
.post-ledger { margin: 48px 0 0; }
.post-ledger .num-row { padding: 18px 0; }
.post-ledger .fig { font-size: clamp(32px, 4vw, 54px); }

/* ── bars ───────────────────────────────────────────────── */
.post-bars { margin: 48px 0 0; }
.bar-cap {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  line-height: 1.6; margin: 0 0 21px; max-width: 60ch;
}
.bar-set { display: grid; gap: 14px; }
.bar-row {
  display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto;
  gap: 16px; align-items: center;
}
.bar-lab { font-size: 15px; line-height: 1.35; }
.bar-track { height: 22px; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.bar-fill { display: block; height: 100%; background: var(--color-accent); }
.bar-val {
  font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700;
  min-width: 3.5ch; text-align: right;
}

/* ── pull quote ─────────────────────────────────────────── */
.post-quote { margin: 48px 0 0; }
.post-quote blockquote {
  margin: 0; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.42;
  letter-spacing: -0.01em; border-left: 3px solid var(--color-accent);
  padding-left: 24px;
}
.post-quote figcaption {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 14px 0 0; padding-left: 27px;
}

/* ── boxed note ─────────────────────────────────────────── */
.post-note {
  margin: 48px 0 0; background: var(--color-surface);
  border-left: 3px solid var(--color-neutral-500); padding: 24px 28px;
}
.note-head { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.note-ico {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-neutral-600); color: var(--color-bg);
  font-family: 'Space Mono', monospace; font-size: 12px; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
.note-sub {
  display: block; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-top: 3px;
}
.note-body { margin-top: 14px; }
.note-body p { font-size: 15.5px; line-height: 27px; margin: 0 0 12px; }
.note-body p:last-child { margin-bottom: 0; }

/* ── phase panels ───────────────────────────────────────── */
.post-phases {
  margin: 48px 0 0; display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.ph-panel { border-top: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); padding-top: 16px; }
.ph-head {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin: 0 0 16px; line-height: 1.5;
}
.ph-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.ph-lab { font-size: 13px; }
.ph-track { height: 14px; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.ph-fill { display: block; height: 100%; }
.ph-fill.pro { background: var(--color-accent); }
.ph-fill.anti { background: var(--color-accent-2); }
.ph-fill.neu { background: var(--color-neutral-400); }
.ph-val { font-family: 'Space Mono', monospace; font-size: 12px; min-width: 5ch; text-align: right; }

/* ── quote grid ─────────────────────────────────────────── */
.post-quotegrid { margin: 48px 0 0; }
.qg-cap {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: 0 0 21px;
}
.qg-set { display: grid; gap: 2px; }
.qg-card { background: var(--color-surface); padding: 20px 24px; }
.qg-card p { margin: 0; font-size: 16px; line-height: 27px; }
.qg-meta {
  font-family: 'Space Mono', monospace; font-size: 11px !important; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 58%, transparent);
  margin-top: 10px !important;
}

/* ── comment explorer ───────────────────────────────────── */
.post-explorer { margin: 42px 0 0; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 21px; }
.ex-chip {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; border-radius: 0;
  background: transparent; color: inherit; padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
}
.ex-chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.ex-chip.on { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.ex-n { opacity: 0.65; margin-left: 5px; }
.ex-chip.on .ex-n { opacity: 0.75; }
.ex-pane { display: grid; gap: 2px; }
/* `display: grid` here outranks the UA stylesheet's [hidden] { display: none },
   so without this every theme renders stacked at once. */
.ex-pane[hidden] { display: none; }
.ex-card { background: var(--color-surface); padding: 18px 22px; }
.ex-card p { margin: 0; font-size: 15.5px; line-height: 26px; }
.ex-meta {
  font-family: 'Space Mono', monospace; font-size: 11px !important; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 58%, transparent);
  margin-top: 9px !important;
}

/* ── methodology + cta ──────────────────────────────────── */
.post-method {
  margin: 64px 0 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  padding-top: 21px; color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.method-head {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px;
}
.post-method p { font-size: 13.5px; line-height: 24px; margin: 0 0 12px; }

.post-cta { margin: 56px 0 0; background: var(--color-text); color: var(--color-bg); padding: 36px 32px; }
.post-cta h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; margin: 0; }
.post-cta p { font-size: 16px; line-height: 28px; margin: 16px 0 0; max-width: 56ch; }
.cta-dark {
  display: inline-block; text-decoration: none; font-family: 'Space Mono', monospace;
  font-size: 14px; background: var(--color-bg); color: var(--color-text); padding: 9px 14px;
}
.cta-dark:hover { background: var(--color-accent-300); color: var(--color-text); }

/* ── in-body figure ─────────────────────────────────────── */
.post-fig { margin: 48px 0 0; }
.post-fig img { width: 100%; height: auto; display: block; }

/* ── prev / next ────────────────────────────────────────── */
.post-nav {
  max-width: 760px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 2px; margin-top: 70px;
}
.pn-cell { text-decoration: none; color: inherit; background: var(--color-surface); padding: 24px 26px; }
/* the placeholder on the first/last post — no card, just space */
span.pn-cell { background: none; }
.pn-cell:hover { background: var(--color-text); color: var(--color-bg); }
.pn-cell.next { text-align: right; }
.pn-dir {
  display: block; font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.65; margin-bottom: 10px;
}
.pn-ttl { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.3; }

/* ── subscribe block on a post ──────────────────────────── */
.post-sub { max-width: 760px; margin-inline: auto; padding: 70px 0 0; }
.post-sub h2 { font-size: 24px; line-height: 28px; margin: 0; }
.post-sub > p {
  font-size: 15.5px; line-height: 28px; max-width: 58ch; margin: 14px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

@media (max-width: 620px) {
  .post-body > p, .post-body > ul, .post-body > ol { font-size: 17px; line-height: 30px; }
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-track { grid-column: 1 / -1; }
  .post-cta { padding: 28px 22px; }
  .post-note { padding: 20px 20px; }
  .pn-cell.next { text-align: left; }
}

@media (max-width: 620px) {
  /* On a phone the hero has to fit the first screen including the buttons, so
     it sizes to the viewport minus the fixed chrome rather than 94vh. svh
     accounts for the browser's own collapsing toolbar. */
  .hero { min-height: calc(100svh - var(--chrome-h, 118px)); }
  .hero-body { padding-bottom: clamp(28px, 8vw, 60px); }
  .nav-inner { font-size: 13px; gap: 10px 18px; }
  .wordmark { font-size: 18px; }
  .num-row { grid-template-columns: 1fr; }
  .row, .row.with-date { grid-template-columns: 1fr; }
  .row .idx { display: none; }
}