/* ─── tokens (brand-spec.md) ─────────────────────────────────────── */
      :root {
        --bg: oklch(0.978 0.007 85); /* warm white paper */
        --surface: oklch(0.997 0.002 85); /* near-white panels */
        --fg: oklch(0.26 0.015 320); /* near-black plum ink */
        --muted: oklch(0.5 0.018 320); /* secondary text */
        --border: oklch(0.9 0.01 85); /* hairlines */
        --accent: oklch(0.71 0.055 309); /* lavender ≈ #a794c4 */

        --accent-deep: oklch(
          0.47 0.1 312
        ); /* deep plum — buttons, small brand text */
        --pink: oklch(0.6 0.26 349); /* ≈ #ff0066 — the single today-dot */
        --wash: color-mix(in oklch, var(--accent) 8%, var(--bg));
        --wash-deep: color-mix(in oklch, var(--accent) 16%, var(--bg));
        --accent-tint: color-mix(in oklch, var(--accent) 14%, var(--surface));
        --error: oklch(0.47 0.19 350);
        --success: oklch(0.52 0.11 155);
        --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
        --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);

        --font-display:
          "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
        --font-body:
          -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
        --font-mono:
          ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

        --fs-h1: clamp(30px, 4.5vw, 42px);
        --fs-h2: clamp(26px, 3.4vw, 34px);
        --fs-h3: 21px;
        --fs-lead: 19px;
        --fs-body: 16px;
        --fs-meta: 13px;

        --gap-xs: 8px;
        --gap-sm: 12px;
        --gap-md: 20px;
        --gap-lg: 32px;
        --gap-xl: 56px;
        --gap-2xl: 96px;
        --container: 1120px;
        --gutter: 32px;
        --reading: 680px;
        --radius: 8px;
        --radius-lg: 12px;
      }

      /* ─── reset & base ───────────────────────────────────────────────── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-body);
        font-size: var(--fs-body);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }
      img,
      svg {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        cursor: pointer;
      }
      p {
        text-wrap: pretty;
        margin: 0;
      }
      h1,
      h2,
      h3,
      h4 {
        text-wrap: balance;
        font-family: var(--font-display);
      }
      ::selection {
        background: color-mix(in oklch, var(--accent) 32%, transparent);
      }

      a:focus-visible,
      button:focus-visible,
      summary:focus-visible {
        outline: 2px solid var(--accent-deep);
        outline-offset: 2px;
      }
      .skip {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 100;
        background: var(--fg);
        color: var(--bg);
        padding: 10px 18px;
        border-radius: 0 0 var(--radius) 0;
        font-size: 14px;
      }
      .skip:focus-visible {
        left: 0;
      }

      /* ─── layout primitives ──────────────────────────────────────────── */
      .container {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
      }
      .section {
        padding-block: clamp(48px, 8vw, 96px);
      }
      .section + .section {
        border-top: 1px solid var(--border);
      }
      .reading {
        max-width: var(--reading);
        margin-inline: auto;
      }

      /* ─── type ───────────────────────────────────────────────────────── */
      h1 {
        font-size: var(--fs-h1);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin: 0;
        font-weight: 500;
      }
      h2 {
        font-size: var(--fs-h2);
        line-height: 1.14;
        letter-spacing: -0.015em;
        margin: 0;
        font-weight: 500;
      }
      h3 {
        font-size: var(--fs-h3);
        line-height: 1.3;
        letter-spacing: -0.005em;
        margin: 0;
        font-weight: 500;
      }
      .lead {
        font-size: var(--fs-lead);
        line-height: 1.55;
        color: var(--muted);
        max-width: 60ch;
      }

      /* ─── topnav ─────────────────────────────────────────────────────── */
      .topnav {
        position: sticky;
        top: 0;
        z-index: 10;
        background: color-mix(in oklch, var(--bg) 90%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
      }
      .topnav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-md);
        padding-block: 14px;
      }
      .logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
      }
      .logo:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1px;
      }
      .logo-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent);
        flex: none;
      }
      .topnav nav {
        display: flex;
        gap: var(--gap-lg);
      }
      .topnav nav a:not(.nav-cta) {
        font-size: 14.5px;
        color: var(--muted);
        padding: 6px 2px;
        white-space: nowrap;
      }
      .topnav nav a:not(.nav-cta):hover {
        color: var(--fg);
      }
      .topnav nav a:not(.nav-cta)[aria-current="page"] {
        color: var(--fg);
        font-weight: 600;
      }
      .topnav nav .nav-cta {
        margin-left: 4px;
      }
      .nav-toggle {
        display: none;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--fg);
        font-size: 14.5px;
        font-weight: 600;
      }
      .nav-toggle .nav-burger {
        display: block;
        width: 14px;
        height: 2px;
        background: var(--fg);
        position: relative;
      }
      .nav-toggle .nav-burger::before,
      .nav-toggle .nav-burger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 14px;
        height: 2px;
        background: var(--fg);
      }
      .nav-toggle .nav-burger::before {
        top: -4px;
      }
      .nav-toggle .nav-burger::after {
        top: 4px;
      }

      /* ─── buttons ────────────────────────────────────────────────────── */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 22px;
        min-height: 44px;
        border-radius: var(--radius);
        border: 1px solid transparent;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.005em;
        transition:
          background 0.15s ease,
          border-color 0.15s ease,
          color 0.15s ease,
          transform 0.05s ease;
      }
      .btn:active {
        transform: translateY(1px);
      }
      .btn-primary {
        background: var(--accent-deep);
        color: var(--surface);
        border-color: var(--accent-deep);
      }
      .btn-primary:hover {
        background: color-mix(in oklch, var(--accent-deep) 84%, black);
        border-color: color-mix(in oklch, var(--accent-deep) 84%, black);
      }
      .btn-secondary {
        background: transparent;
        color: var(--fg);
        border-color: var(--border);
      }
      .btn-secondary:hover {
        border-color: var(--fg);
      }
      .btn-lg {
        padding: 14px 28px;
        font-size: 16px;
      }

      /* ─── article head (breadcrumb + title + chapô + meta) ───────────── */
      .article-head {
        padding-block: clamp(40px, 7vw, 72px) clamp(28px, 5vw, 44px);
        border-bottom: 1px solid var(--border);
      }
      .crumbs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 10px;
        font-family: var(--font-mono);
        font-size: 12.5px;
        letter-spacing: 0.04em;
        color: var(--muted);
        min-height: 44px;
        margin-bottom: var(--gap-md);
      }
      .crumbs a {
        color: var(--muted);
        padding: 4px 2px;
      }
      .crumbs a:hover {
        color: var(--fg);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .crumbs .sep {
        color: color-mix(in oklch, var(--muted) 40%, var(--bg));
      }
      .crumbs [aria-current="page"] {
        color: var(--fg);
        font-weight: 600;
      }
      .article-head h1 {
        max-width: 24ch;
        margin: 0 0 var(--gap-md);
      }
      .article-head .lead {
        margin-bottom: var(--gap-md);
      }
      .meta {
        font-family: var(--font-mono);
        font-size: 12.5px;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin: 0;
      }

      /* ─── article body ───────────────────────────────────────────────── */
      .article {
        padding-block: clamp(40px, 7vw, 64px);
      }
      .block h2 {
        margin-bottom: var(--gap-md);
      }
      .block p + p {
        margin-top: var(--gap-md);
      }
      .block + .block,
      .block + .mnemo,
      .mnemo + .block {
        border-top: 1px solid var(--border);
        margin-top: var(--gap-xl);
        padding-top: var(--gap-xl);
      }
      .block .lead {
        margin-bottom: 0;
      }
      .block-note {
        margin-top: var(--gap-md);
        font-size: 13.5px;
        color: var(--muted);
      }
      .closing {
        margin-top: var(--gap-lg);
        font-family: var(--font-display);
        font-style: italic;
        font-size: 19px;
        color: var(--fg);
      }

      /* ─── the equivalence table (editorial) ──────────────────────────── */
      .equiv {
        width: 100%;
        border-collapse: collapse;
        margin-top: var(--gap-md);
        font-size: 15px;
      }
      .equiv caption {
        caption-side: top;
        text-align: left;
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--muted);
        padding-bottom: var(--gap-sm);
      }
      .equiv th,
      .equiv td {
        padding: 13px 12px;
        border-top: 1px solid var(--border);
        text-align: right;
      }
      .equiv thead th {
        border-top: 0;
        border-bottom: 1px solid var(--fg);
        font-family: var(--font-mono);
        font-size: 11.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 600;
      }
      .equiv th:first-child,
      .equiv td:first-child {
        text-align: left;
      }
      .equiv td {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--fg);
      }
      .equiv td:first-child {
        font-family: var(--font-body);
        font-weight: 500;
      }
      .equiv tbody tr:last-child td {
        border-bottom: 1px solid var(--border);
      }

      /* ─── the mnemonic band (the key point) ──────────────────────────── */
      .mnemo {
        background: var(--wash);
        padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 44px);
        border-radius: 0;
      }
      .mnemo-label {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent-deep);
        margin: 0 0 var(--gap-sm);
      }
      .mnemo-main {
        font-family: var(--font-display);
        font-size: clamp(30px, 6vw, 44px);
        line-height: 1.05;
        letter-spacing: -0.01em;
        font-weight: 500;
        margin: 0 0 var(--gap-sm);
      }
      .mnemo-sub {
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--fg);
        max-width: 46ch;
        margin: 0;
      }

      /* ─── cta strip ──────────────────────────────────────────────────── */
      .cta {
        text-align: center;
      }
      .cta .container {
        max-width: 620px;
      }
      .cta .lead {
        margin: var(--gap-sm) auto var(--gap-lg);
      }

      /* ─── sources & medical validation ───────────────────────────────── */
      .sources h2 {
        font-size: 20px;
        margin-bottom: var(--gap-sm);
      }
      .sources p {
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--muted);
        max-width: 62ch;
      }
      .sources p + p {
        margin-top: var(--gap-sm);
      }

      /* ─── footer ─────────────────────────────────────────────────────── */
      .pagefoot {
        padding-block: 40px;
        color: var(--muted);
        font-size: 13.5px;
        border-top: 1px solid var(--border);
      }
      .foot-grid {
        display: grid;
        grid-template-columns: 1.25fr auto;
        gap: var(--gap-lg) var(--gap-2xl);
        align-items: start;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--border);
      }
      .foot-notes p {
        max-width: 52ch;
        margin: 0;
      }
      .foot-notes p + p {
        margin-top: 8px;
      }
      .foot-links {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 10px 28px;
        justify-content: end;
      }
      .foot-links a {
        color: var(--muted);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .foot-links a:hover {
        color: var(--fg);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .foot-bottom {
        padding-top: 20px;
      }

      /* ─── figures (illustration placeholders) ─────────────────────────── */
      figure.fig {
        margin: 0;
        min-width: 0;
      }
      .fig-frame {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
        background: var(--wash);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: clamp(22px, 4vw, 40px);
        overflow: hidden;
      }
      .fig-frame--surface {
        background: var(--surface);
      }
      .fig-frame--r169 {
        aspect-ratio: 16 / 9;
      }
      .fig-frame--r32 {
        aspect-ratio: 3 / 2;
      }
      .fig-frame--r43 {
        aspect-ratio: 4 / 3;
      }
      .fig-frame--r11 {
        aspect-ratio: 1 / 1;
      }
      .fig-frame--diagram {
        aspect-ratio: auto;
        min-height: 180px;
      }
      .fig-icon {
        color: var(--accent-deep);
        flex-shrink: 0;
      }
      .fig-icon svg {
        width: clamp(38px, 7vw, 52px);
        height: auto;
        display: block;
      }
      .fig-type {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.03em;
        line-height: 1.5;
        color: var(--muted);
        max-width: 34ch;
      }
      .fig figcaption {
        font-family: var(--font-mono);
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted);
        padding-top: 12px;
      }
      .fig-diagram {
        width: 100%;
        max-width: 440px;
        flex-shrink: 0;
        color: var(--accent-deep);
      }
      .fig-diagram svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .fig-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 20px;
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--muted);
      }
      .fig-legend .lg-dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
      }
      .fig-legend .lg-sa {
        background: var(--accent-deep);
      }
      .fig-legend .lg-sg {
        background: var(--accent);
      }
      .fig-article {
        margin-top: var(--gap-lg);
      }
      .fig-infographic {
        border-top: 1px solid var(--border);
        margin-top: var(--gap-xl);
        padding-top: var(--gap-xl);
      }
      .fig-infographic + .mnemo {
        border-top: 1px solid var(--border);
        margin-top: var(--gap-xl);
        padding-top: var(--gap-xl);
      }

      /* ─── responsive ─────────────────────────────────────────────────── */
      @media (max-width: 720px) {
        :root {
          --gutter: 20px;
        }
        .topnav nav {
          display: none;
        }
        .topnav nav.is-open {
          display: flex;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          background: var(--surface);
          border-bottom: 1px solid var(--border);
          padding: 4px var(--gutter) 16px;
          box-shadow: 0 12px 24px -18px
            color-mix(in oklch, var(--fg) 40%, transparent);
        }
        .topnav nav.is-open a:not(.nav-cta) {
          padding: 13px 0;
          border-top: 1px solid var(--border);
          font-size: 15.5px;
          color: var(--fg);
        }
        .topnav nav.is-open .nav-cta {
          margin: 12px 0 0;
          border-top: 0;
        }
        .nav-toggle {
          display: inline-flex;
        }
        .foot-grid {
          grid-template-columns: 1fr;
        }
        .foot-links {
          justify-content: start;
        }
      }
      @media (max-width: 480px) {
        .section {
          padding-block: 40px;
        }
        .article-head {
          padding-block: 36px 24px;
        }
        .topnav-inner {
          padding-block: 10px;
        }
        .logo {
          font-size: 17px;
        }
      }
      @media (max-width: 340px) {
        :root {
          --gutter: 16px;
        }
        h1 {
          font-size: 27px;
        }
        .logo {
          font-size: 15.5px;
        }
        .btn-lg {
          padding: 12px 20px;
          font-size: 15px;
        }
        .foot-links {
          gap: 8px 20px;
        }
        .equiv th,
        .equiv td {
          padding: 11px 8px;
          font-size: 14px;
        }
      }

      /* ─── reduced motion ─────────────────────────────────────────────── */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }