/* ============================================================================
   polygeek — EDITORIAL DESIGN  (LogosPress canonical, v0.2)
   ----------------------------------------------------------------------------
   Newsreader (serif, display + body) + JetBrains Mono (labels/meta/code).
   Warm paper, warm ink, single terracotta accent. Fully tokenized: every
   visual value lives in the :root block below — reskin the whole site by
   overriding those custom properties alone. Component CSS only references
   var()s; it never hardcodes a color, font, size, radius, or width.

   Source: Claude Design handoff (polygeek-skeleton), implemented 2026-06-02.
   Self-hosted fonts (no third-party CDN), automatic dark mode, print floor.
   ========================================================================== */

/* ---- Self-hosted fonts ----------------------------------------------------
   WOFF2 variable fonts served locally from /assets/fonts/ — no Google CDN
   request, faster + privacy-clean. font-optical-sizing pulls Newsreader's
   opsz axis automatically. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
}

:root {
  /* ---- Type families --------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid where it earns it) --------------------------- */
  --fs-2xs:  0.72rem;
  --fs-xs:   0.80rem;
  --fs-sm:   0.92rem;
  --fs-base: 1.0625rem;                                   /* ~17px body    */
  --fs-md:   clamp(1.18rem, 0.4vw + 1.05rem, 1.32rem);
  --fs-lg:   clamp(1.4rem,  0.8vw + 1.2rem,  1.65rem);
  --fs-xl:   clamp(1.7rem,  1.4vw + 1.3rem,  2.15rem);
  --fs-2xl:  clamp(2.1rem,  2.6vw + 1.4rem,  3.1rem);
  --fs-3xl:  clamp(2.6rem,  4.2vw + 1.4rem,  4.2rem);
  --fs-display: clamp(3rem, 6vw + 1.2rem,    5.6rem);

  /* ---- Line height ----------------------------------------------------- */
  --lh-solid:   1;
  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-normal:  1.5;
  --lh-relaxed: 1.72;

  /* ---- Letter spacing -------------------------------------------------- */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.012em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-label:   0.16em;                                   /* mono eyebrows */

  /* ---- Weight ---------------------------------------------------------- */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Color: surfaces & ink (warm neutral) --------------------------- */
  --c-bg:            oklch(0.987 0.006 83);               /* warm paper    */
  --c-surface:       oklch(1 0 0);                        /* raised cards  */
  --c-surface-sunken:oklch(0.965 0.008 83);              /* wells, code   */
  --c-ink:           oklch(0.255 0.012 66);              /* body ink      */
  --c-ink-strong:    oklch(0.19 0.013 66);               /* headlines     */
  --c-ink-soft:      oklch(0.44 0.011 66);               /* secondary     */
  --c-muted:         oklch(0.58 0.009 66);               /* metadata      */
  --c-faint:         oklch(0.7 0.008 66);                /* placeholders  */

  /* ---- Color: lines ---------------------------------------------------- */
  --c-border:        oklch(0.905 0.008 78);
  --c-border-strong: oklch(0.82 0.01 78);

  /* ---- Color: accent (terracotta / clay) ------------------------------ */
  --c-accent:        oklch(0.565 0.135 42);
  --c-accent-strong: oklch(0.485 0.135 42);              /* hover/active  */
  --c-accent-soft:   oklch(0.95 0.028 52);               /* tint wash     */
  --c-accent-line:   oklch(0.86 0.05 48);                /* tint border   */
  --c-on-accent:     oklch(0.99 0.008 83);               /* text on accent*/

  /* ---- Color: roles ---------------------------------------------------- */
  --c-link:          var(--c-accent);
  --c-link-hover:    var(--c-accent-strong);
  --c-selection:     var(--c-accent-soft);

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* ---- Layout widths --------------------------------------------------- */
  --w-prose:   42rem;                                     /* article text  */
  --w-narrow:  54rem;
  --w-content: 72rem;                                     /* page shell    */
  --w-wide:    78rem;

  /* ---- Borders --------------------------------------------------------- */
  --bd-hair:  1px;
  --bd-thick: 2px;
  --border:        var(--bd-hair) solid var(--c-border);
  --border-strong: var(--bd-hair) solid var(--c-border-strong);

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0.255 0.012 66 / 0.05);
  --shadow-md: 0 6px 24px -10px oklch(0.255 0.012 66 / 0.18);
  --shadow-lg: 0 18px 50px -18px oklch(0.255 0.012 66 / 0.28);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      180ms;
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Decorative placeholder fill (imagery drop zones) --------------- */
  --ph-stripe: repeating-linear-gradient(
    135deg,
    var(--c-border) 0 1px,
    transparent 1px 11px
  );
}

/* ---- Automatic dark mode -------------------------------------------------
   Because every visual value is a token, dark mode is a pure token swap:
   the component CSS below is untouched. Warm-dark paper, light ink, a
   slightly brighter terracotta so links/CTAs stay legible on dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:            oklch(0.185 0.011 66);
    --c-surface:       oklch(0.225 0.012 66);
    --c-surface-sunken:oklch(0.16 0.010 66);
    --c-ink:           oklch(0.90 0.010 83);
    --c-ink-strong:    oklch(0.965 0.008 83);
    --c-ink-soft:      oklch(0.74 0.011 83);
    --c-muted:         oklch(0.62 0.010 83);
    --c-faint:         oklch(0.50 0.009 83);

    --c-border:        oklch(0.32 0.010 78);
    --c-border-strong: oklch(0.44 0.012 78);

    --c-accent:        oklch(0.72 0.130 46);
    --c-accent-strong: oklch(0.80 0.120 48);
    --c-accent-soft:   oklch(0.30 0.055 46);
    --c-accent-line:   oklch(0.42 0.070 46);
    --c-on-accent:     oklch(0.17 0.012 66);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
    --shadow-md: 0 6px 24px -10px oklch(0 0 0 / 0.55);
    --shadow-lg: 0 18px 50px -18px oklch(0 0 0 / 0.65);
  }
}

/* ============================================================================
   COMPONENT CSS — references theme tokens only. No literal visual values.
   ========================================================================== */

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum", "pnum";
}

::selection { background: var(--c-selection); }

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

a {
  color: var(--c-link);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--bd-hair);
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-link-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--sp-7) 0;
}

/* ---- Layout shell ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.shell--narrow { max-width: var(--w-narrow); }
.shell--prose  { max-width: var(--w-prose); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--lead  { padding-block: var(--sp-9); }

/* ---- Eyebrow / kicker / labels ----------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0;
}
.eyebrow--muted { color: var(--c-muted); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
}

/* ---- Masthead / nav ----------------------------------------------------- */
.masthead {
  border-bottom: var(--border);
  background: color-mix(in oklab, var(--c-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tighter);
  color: var(--c-ink-strong);
  line-height: var(--lh-solid);
}
.wordmark:hover { color: var(--c-ink-strong); }
.wordmark .dot { color: var(--c-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}
.nav a {
  color: var(--c-ink-soft);
  position: relative;
  padding-block: var(--sp-1);
}
.nav a:hover { color: var(--c-ink-strong); }
.nav a[aria-current="page"] { color: var(--c-ink-strong); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(-1 * var(--sp-1));
  height: var(--bd-thick);
  background: var(--c-accent);
}
.nav .nav__rss { color: var(--c-accent); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: var(--lh-solid);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: var(--bd-hair) solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink-strong);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover { border-color: var(--c-ink-strong); color: var(--c-ink-strong); }

.btn--lg { font-size: var(--fs-sm); padding: var(--sp-4) var(--sp-6); }

.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Text link with arrow ---------------------------------------------- */
.tlink {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.tlink .arrow { transition: transform var(--dur) var(--ease); }
.tlink:hover .arrow { transform: translateX(3px); }

/* ---- Tags --------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-soft);
  padding: var(--sp-1) var(--sp-3);
  border: var(--border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
}
.tag:hover { border-color: var(--c-border-strong); color: var(--c-ink-strong); }

/* ---- Image placeholder -------------------------------------------------- */
.ph {
  background-color: var(--c-surface-sunken);
  background-image: var(--ph-stripe);
  border: var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-4);
  aspect-ratio: 16 / 9;
}
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--square   { aspect-ratio: 1 / 1; }
.ph--avatar   { aspect-ratio: 1 / 1; border-radius: var(--r-pill); }

/* ========================================================================
   HOME / BLOG INDEX
   ===================================================================== */
.intro {
  border-bottom: var(--border);
  padding-block: var(--sp-8) var(--sp-7);
}
.intro__statement {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink-strong);
  max-width: var(--w-narrow);
  margin-top: var(--sp-4);
}
.intro__statement em { color: var(--c-accent); font-style: italic; }
.intro__sub {
  margin-top: var(--sp-5);
  color: var(--c-ink-soft);
  font-size: var(--fs-md);
  max-width: var(--w-prose);
}

/* Lead / featured article */
.lead {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-8);
  border-bottom: var(--border);
}
.lead__media { border-radius: var(--r-lg); overflow: hidden; }
.lead__media .ph { aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
.lead__title {
  font-size: var(--fs-2xl);
  margin-block: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-bold);
}
.lead__title a { color: inherit; }
.lead__title a:hover { color: var(--c-accent); }
.lead__dek {
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-5);
}
.lead__foot { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }

/* Section heading row */
.rowhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-2);
  border-bottom: var(--border-strong);
}
.rowhead h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* Post list */
.postlist { display: grid; gap: var(--sp-0); }
.post {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: var(--sp-6);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: var(--border);
}
.post:hover .post__title a { color: var(--c-accent); }
.post__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: var(--ls-wide);
  padding-top: var(--sp-2);
}
.post__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}
.post__title a { color: var(--c-ink-strong); }
.post__dek { color: var(--c-ink-soft); font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.post__read {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
  padding-top: var(--sp-2);
}

/* ---- Consulting promo strip (home) ------------------------------------- */
.promo {
  background: var(--c-accent-soft);
  border: var(--bd-hair) solid var(--c-accent-line);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}
.promo__title {
  font-size: var(--fs-xl);
  margin-block: var(--sp-2) var(--sp-3);
  max-width: 28ch;
}
.promo__text { color: var(--c-ink-soft); max-width: 48ch; }

/* ========================================================================
   ARTICLE
   ===================================================================== */
.article__header {
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom: var(--border);
}
.article__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-block: var(--sp-4) var(--sp-5);
}
.article__dek {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink-soft);
  font-weight: var(--fw-light);
  max-width: var(--w-prose);
}
.byline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.byline .ph--avatar { width: var(--sp-7); height: var(--sp-7); flex: none; }
.byline__who { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-ink-soft); letter-spacing: var(--ls-wide); }
.byline__who strong { color: var(--c-ink-strong); font-weight: var(--fw-medium); }

.article__figure { margin-block: var(--sp-7); }
.article__figure .ph { aspect-ratio: 16 / 9; }
.article__figure figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}

/* Prose */
.prose { padding-block: var(--sp-7); font-size: var(--fs-base); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}
.prose h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-7);
}
.prose p { color: var(--c-ink); }
.prose a { text-decoration: underline; }
.prose strong { font-weight: var(--fw-semibold); color: var(--c-ink-strong); }
.prose ul, .prose ol { margin-left: var(--sp-5); padding-left: var(--sp-4); color: var(--c-ink); }
.prose li + li { margin-top: var(--sp-2); }
.prose blockquote {
  margin-inline: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: var(--bd-thick) solid var(--c-accent);
  color: var(--c-ink-soft);
  font-style: italic;
  font-size: var(--fs-md);
}
.prose figure { margin: var(--sp-7) 0; }
.prose img { border-radius: var(--r-md); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--c-surface-sunken);
  border: var(--border);
  border-radius: var(--r-xs);
  padding: 0.1em 0.4em;
}
.prose pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--c-surface-sunken);
  border: var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.pullquote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--c-ink-strong);
  letter-spacing: var(--ls-tight);
  border-top: var(--border-strong);
  border-bottom: var(--border-strong);
  padding-block: var(--sp-6);
  margin-block: var(--sp-7);
  text-align: center;
}

/* Author bio + work-with-me CTA (article foot) */
.biocta {
  margin-top: var(--sp-8);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.biocta .ph--avatar { width: calc(var(--sp-8) + var(--sp-2)); height: calc(var(--sp-8) + var(--sp-2)); flex: none; }
.biocta__avatar { width: calc(var(--sp-8) + var(--sp-2)); height: calc(var(--sp-8) + var(--sp-2)); flex: none; border-radius: var(--r-pill); object-fit: cover; border: var(--border); }
.biocta__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.biocta__role { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-accent); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-top: var(--sp-1); }
.biocta__text { color: var(--c-ink-soft); margin-block: var(--sp-4); max-width: 60ch; }
.biocta__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* Related posts (article foot) — design vocabulary */
.related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--border-strong);
}
.related__head {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-5);
}
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.related__list a { color: var(--c-ink-strong); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.related__list a:hover { color: var(--c-accent); }
.related__list p { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-top: var(--sp-1); }

.backlink { margin-top: var(--sp-7); }

/* ========================================================================
   CONSULTING
   ===================================================================== */
.chero {
  padding-block: var(--sp-9) var(--sp-8);
  border-bottom: var(--border);
}
.chero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-8);
  align-items: center;
}
.chero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-block: var(--sp-4) var(--sp-5);
}
.chero__title em { color: var(--c-accent); font-style: italic; }
.chero__lede { font-size: var(--fs-lg); color: var(--c-ink-soft); line-height: var(--lh-snug); max-width: 46ch; }
.chero__actions { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.chero__note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-4); letter-spacing: var(--ls-wide); }
.chero__card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.chero__card .ph { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.chero__card .chero__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Generic section heading */
.shead { max-width: var(--w-prose); margin-bottom: var(--sp-6); }
.shead h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.shead p { color: var(--c-ink-soft); font-size: var(--fs-md); margin-top: var(--sp-4); }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}
.step {
  border-top: var(--bd-thick) solid var(--c-ink-strong);
  padding-top: var(--sp-4);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--c-accent);
}
.step h3 { font-size: var(--fs-lg); margin-block: var(--sp-3) var(--sp-3); }
.step p { color: var(--c-ink-soft); }

/* Feature list (what you'll build / who it's for) */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-7); }
.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: var(--border);
  align-items: start;
}
.feature__mark {
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.feature h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.feature p { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* Tools panel */
.tools {
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tool { padding: var(--sp-7); }
.tool + .tool { border-left: var(--border); }
.tool__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); display: flex; align-items: baseline; gap: var(--sp-3); }
.tool__name .chip {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  border: var(--bd-hair) solid var(--c-accent-line);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
}
.tool p { color: var(--c-ink-soft); margin-top: var(--sp-3); font-size: var(--fs-sm); }

/* Pricing / format band */
.band {
  background: var(--c-ink-strong);
  color: var(--c-bg);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}
.band h2 { color: var(--c-bg); font-size: var(--fs-2xl); }
.band p { color: color-mix(in oklab, var(--c-bg) 78%, var(--c-accent)); margin-top: var(--sp-3); max-width: 44ch; }
.band .eyebrow { color: var(--c-on-accent); }
.band__col { text-align: right; }
.band .btn--primary { background: var(--c-bg); color: var(--c-ink-strong); }
.band .btn--primary:hover { background: var(--c-on-accent); color: var(--c-ink-strong); }
.band__price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.band__price small { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-normal); letter-spacing: var(--ls-wide); display: block; color: color-mix(in oklab, var(--c-bg) 70%, var(--c-accent)); margin-top: var(--sp-2); }

/* FAQ */
.faq { display: grid; gap: var(--sp-0); }
.qa { padding-block: var(--sp-5); border-bottom: var(--border); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); }
.qa h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.qa p { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* ========================================================================
   GENERIC PAGE (markdown body, e.g. /about/, /logos/, error pages)
   ===================================================================== */
.page__header { padding-block: var(--sp-8) var(--sp-5); border-bottom: var(--border); }
.page__title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.page__lede { color: var(--c-ink-soft); font-size: var(--fs-md); margin-top: var(--sp-4); }

/* ========================================================================
   FOOTER
   ===================================================================== */
.foot {
  border-top: var(--border);
  margin-top: var(--sp-9);
  padding-block: var(--sp-8) var(--sp-7);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.foot__blurb { color: var(--c-ink-soft); max-width: 42ch; margin-top: var(--sp-3); }
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-4);
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.foot__col a { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.foot__col a:hover { color: var(--c-ink-strong); }
.foot__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: var(--ls-wide);
}
.foot__base a { color: var(--c-muted); }
.foot__base a:hover { color: var(--c-ink-strong); }

/* ========================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 56rem) {
  .lead, .chero__grid, .promo, .biocta, .band { grid-template-columns: 1fr; }
  .steps, .features { grid-template-columns: 1fr; }
  .tools { grid-template-columns: 1fr; }
  .tool + .tool { border-left: 0; border-top: var(--border); }
  .qa { grid-template-columns: 1fr; gap: var(--sp-2); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .chero__card { order: -1; max-width: 22rem; }
  .post { grid-template-columns: 1fr; gap: var(--sp-2); }
  .post__date { padding-top: 0; }
  .post__read { padding-top: 0; }
  .band__col { text-align: left; }
  .biocta .ph--avatar { width: var(--sp-8); height: var(--sp-8); }
}

@media (max-width: 40rem) {
  .nav { display: none; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .promo, .band { padding: var(--sp-6); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ========================================================================
   PRINT — reading floor
   ===================================================================== */
@media print {
  .masthead, .foot, .promo, .biocta, .related, .backlink, .band { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .shell, .shell--narrow, .shell--prose { max-width: none; padding: 0; }
  .prose pre, .prose code { border: 1px solid #999; }
}