/* campaign.css - the one stylesheet every SEO campaign page links.
 *
 * Two jobs:
 *   1. Self-hosted @font-face rules, so a campaign page makes ZERO third-party
 *      requests. faq.html (the page this style block came from) loads Crimson
 *      Pro and JetBrains Mono from fonts.googleapis.com / fonts.gstatic.com;
 *      copying that head into 24 pages would put a Google request on the very
 *      pages that position Margin as private, and would make the free tool's
 *      zero-off-host-request test unsatisfiable. See SEO plan task 5 step 0c.
 *   2. The shared site styles, so 24 pages are not 24 hand-maintained copies.
 *
 * The style block below is lifted VERBATIM from faq.html's <style> element on
 * 2026-08-01 - design tokens, the .leaf margin primitive, the type and space
 * scales, the graded rule weights, nav and footer. It carries the standing
 * design law from the 2026-08-01 design pass; do not re-derive it here.
 *
 * Existing site pages are unchanged by this file. Converting them off Google
 * Fonts is a separate call for Mitch.
 *
 * The FONT-FACES block is generated - run tools/vendor_fonts.py, never hand-edit.
 */

/* FONT-FACES:BEGIN - generated by tools/vendor_fonts.py, do not hand-edit */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-600-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-600-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-pro-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FONT-FACES:END */

/* ---------------------------------------------------------------------------
 * Shared site styles, lifted verbatim from faq.html on 2026-08-01.
 * ------------------------------------------------------------------------ */
/* Tokens — identical to other pages */
  :root {
    --cream:    #F5F1E8;
    --cream-2:  #EBE5D6;
    --paper:    #FBF7EC;
    --ink:      #1A1814;
    --ink-soft: #2C2820;
    --red:      #B83A2E;
    --pencil:   #6B6358;
    --highlight:#E8D88A;
    --rule:     rgba(107,99,88,0.18);

    /* ---- Rules, graded ----
       One rule weight made structure and decoration read identically. */
    --hair:     rgba(107,99,88,0.10);
    --spine:    rgba(107,99,88,0.28);
    --ink-note: #5C554A;   /* margin-note ink */

    /* ---- Measure scale ---- named by job, not re-guessed per section. */
    --measure:       58ch;   /* the reading column */
    --measure-tight: 46ch;   /* asides, captions, secondary prose */
    --measure-note: 232px;   /* the margin rail */
    --measure-wide: 1040px;
    --gutter:       56px;

    /* ---- Type scale ---- six steps; every size resolves to one. */
    --t-display: clamp(38px, 6.2vw, 68px);
    --t-head:    clamp(29px, 3.4vw, 42px);
    --t-lede:    21px;
    --t-body:    18px;
    --t-note:    15px;
    --t-label:   11px;

    /* ---- Space scale ---- vertical rhythm inherited, not re-guessed. */
    --s1: 8px;  --s2: 14px; --s3: 22px; --s4: 34px;
    --s5: 52px; --s6: 80px; --s7: 116px;

  }

  /* ================ THE LEAF ================
     A page leaf: one reading column hung off the red rule, with a true
     outer margin beside it carrying the annotations. Small print and
     asides live in the margin — where a reader looks for them —
     instead of padding out the reading column. Below 1080px the margin
     has nowhere to go, so notes fold under the passage they annotate
     and keep their marginal styling. Shared with index.html. */
  .leaf {
    display: grid;
    grid-template-columns: minmax(0, var(--measure));
    gap: var(--s4);
    align-items: start;
  }
  @media (min-width: 1080px) {
    .leaf {
      grid-template-columns: minmax(0, var(--measure)) var(--measure-note);
      gap: var(--gutter);
    }
  }
  .leaf-note {
    font-family: 'Crimson Pro', serif;
    font-size: var(--t-note);
    line-height: 1.5;
    color: var(--ink-note);
  }
  .leaf-note::before {
    content: "";
    display: block;
    width: 28px; height: 1px;
    background: var(--red);
    opacity: 0.55;
    margin: 9px 0 12px;
  }
  .leaf-note p { margin: 0 0 var(--s2); }
  .leaf-note p:last-child { margin-bottom: 0; }
  .leaf-note strong { font-weight: 600; color: var(--ink); }
  .leaf-note .datum {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  @media (max-width: 1079px) {
    .leaf-note {
      padding-left: var(--s3);
      border-left: 1px solid var(--hair);
    }
    .leaf-note::before { display: none; }
  }



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

  /* `clip` (rather than `hidden`) prevents horizontal overflow without
     making the element a scroll container — `hidden` would, and that
     breaks `position: sticky` on descendants like the .faq-filter bar.
     Mirrors the homepage. */
  html, body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  @supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
  }
  html { scroll-behavior: auto; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    background: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.1%200%200%200%200%200.09%200%200%200%200%200.07%200%200%200%200.045%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url%28%23p%29'/%3E%3C/svg%3E");
    color: var(--ink);
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    left: 88px;
    width: 1.5px;
    background: var(--red);
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
    animation: draw-margin-line 0.8s cubic-bezier(.2,.7,.2,1) both;
  }
  @media (max-width: 720px) { body::before { left: 28px; } }
  @keyframes draw-margin-line {
    from { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
    to   { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
  }

  /* ================ Selection + focus polish ================ */
  ::selection {
    background: var(--highlight);
    color: var(--ink);
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* A11Y utilities */
  .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;
  }
  .skip-link {
    position: absolute;
    top: -100px; left: 16px;
    z-index: 100;
    background: var(--ink);
    color: var(--cream);
    padding: 12px 18px;
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: top .2s ease;
  }
  .skip-link:focus {
    top: 16px;
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }

  /* Nav (matches all other pages) */
  nav.top {
    position: relative;
    z-index: 10;   /* above the z-index:2 content sections so the open mobile menu panel isn't painted over */
    padding: 28px 56px 0 120px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    animation: fade-down 1.1s cubic-bezier(.2,.7,.2,1) both;
  }
  .wordmark {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
    text-decoration: none;
    flex-shrink: 0;
  }
  nav.top ul { list-style: none; display: flex; gap: 28px; }
  nav.top a.link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pencil);
    text-decoration: none;
    transition: color .2s ease;
    position: relative;
    white-space: nowrap;
  }
  nav.top a.link:hover { color: var(--ink); }
  nav.top a.link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  nav.top a.link:hover::after { transform: scaleX(1); }
  nav.top a.link.active { color: var(--ink); }
  nav.top a.link.active::after { transform: scaleX(1); }

  @media (max-width: 900px) {
    nav.top { padding: 24px 32px 0 64px; }
    nav.top ul { gap: 22px; }
    nav.top a.link[data-mobile="hide-md"] { display: none; }
  }
  @media (max-width: 600px) {
    nav.top {
      padding: 20px 20px 0 52px;
      align-items: center;
      gap: 12px;
    }
    nav.top ul { gap: 18px; }
    nav.top a.link { font-size: 11px; letter-spacing: 0.06em; }
    nav.top a.link[data-mobile="hide-sm"] { display: none; }
    .wordmark { font-size: 20px; }
  }
  @media (max-width: 380px) {
    nav.top { padding: 18px 16px 0 44px; gap: 8px; }
    nav.top ul { gap: 14px; }
    nav.top a.link { font-size: 10px; }
  }

  /* ============== Mobile hamburger menu (JS-enhanced, ≤900px) ==============
     The responsive cascade above (hide-md / hide-sm) is the no-JS fallback.
     With JS, the whole nav collapses behind a hamburger so EVERY tab is
     reachable on mobile — not just the priority three. All rules below are
     scoped under .js so a non-JS visitor never sees a dead button.
     =========================================================================*/
  .nav-toggle {
    display: none;          /* hidden on desktop and whenever JS is absent */
    background: none;
    border: 0;
    padding: 21px 11px;
    margin: -13px -3px;     /* 44x44 tap target; offsets keep the original nav footprint */
    cursor: pointer;
    color: var(--ink);
    line-height: 0;
    flex-shrink: 0;
  }
  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
  }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after  { top: 7px; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    transition: transform .25s ease, opacity .2s ease, background .2s ease;
  }
  /* Open → X. Driven off aria-expanded so visual + a11y state can't drift. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after { transition: none; }
  }

  @media (max-width: 900px) {
    .js .nav-toggle { display: block; }
    .js nav.top { align-items: center; }
    /* Collapse the inline list into a right-anchored dropdown panel,
       clear of the fixed red margin line on the left. */
    .js nav.top ul {
      position: absolute;
      top: 100%;
      right: 20px;
      left: auto;
      margin-top: 12px;
      display: none;            /* collapsed until opened */
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      min-width: 180px;
      padding: 20px 24px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 2px;
      box-shadow: 0 8px 28px rgba(26,24,20,0.10);
      z-index: 3;              /* above the fixed red margin line (z-index:1) */
    }
    .js nav.top.nav-open ul { display: flex; }
    /* Reveal EVERY item in the open panel — override the cascade hides
       (sub-pages hide the <a>; the panel a.link rule below re-shows those,
       index hides the <li>, handled here). */
    .js nav.top.nav-open li:has(a.link[data-mobile="hide-md"]),
    .js nav.top.nav-open li:has(a.link[data-mobile="hide-sm"]) { display: list-item; }
    .js nav.top ul a.link {
      display: block;          /* full-width tap target; also un-hides the
                                  <a>-based cascade hides used on sub-pages */
      font-size: 13px;
      letter-spacing: 0.08em;
      padding: 4px 0;
      white-space: nowrap;
    }
    .js nav.top a.link.active { color: var(--ink); }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js nav.top ul {
      transform: translateY(-6px);
      opacity: 0;
      transition: opacity .2s ease, transform .2s ease;
    }
    .js nav.top.nav-open ul { transform: translateY(0); opacity: 1; }
  }

  /* Reveal on scroll */
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(.2,.7,.2,1),
                transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .js .reveal.visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ================ Page hero ================ */
  .page-hero {
    position: relative;
    z-index: 2;
    padding: 88px 56px 56px 120px;
    max-width: 1320px;
    margin: 0 auto;
  }
  @media (max-width: 720px) {
    .page-hero { padding: 64px 24px 40px 56px; }
  }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pencil);
    margin: 0 0 28px -16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: calc(100% + 16px);
    animation: fade-up 1.1s cubic-bezier(.2,.7,.2,1) .15s both;
  }
  .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--red);
    flex-shrink: 0;
  }

  .page-hero h1 {
    font-family: 'Crimson Pro', serif;
    font-weight: 600;
    font-size: clamp(38px, 6.2vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 28px;
    max-width: 14ch;
    animation: fade-up 1.1s cubic-bezier(.2,.7,.2,1) .3s both;
  }
  .page-hero h1 .accent { color: var(--red); }

  .page-hero .lede {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: var(--pencil);
    max-width: var(--measure);
    margin: 0 0 0 28px;
    animation: fade-up 1.1s cubic-bezier(.2,.7,.2,1) .5s both;
  }

  /* ================ FAQ Section structure ================ */
  /* A section is a themed group of Q&A. Same two-column layout as
     the specs page (small mono label on the left, content right). */
  .faq-section {
    position: relative;
    z-index: 2;
    padding: 56px 56px 56px 120px;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    border-top: 1px solid var(--rule);
  }
  @media (min-width: 900px) {
    .faq-section {
      grid-template-columns: 200px minmax(0, 1fr);
      gap: 64px;
      padding: 72px 56px 72px 120px;
    }
  }
  @media (max-width: 720px) {
    .faq-section { padding: 48px 24px 48px 56px; }
  }

  .faq-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pencil);
    line-height: 1.5;
  }
  .faq-label .num {
    color: var(--red);
    margin-right: 10px;
    font-weight: 500;
  }

  .faq-content { max-width: 720px; }

  /* ================ FAQ filter bar (nav + search) ================ */
  /* JS-gated: without JS the full list renders normally and this bar
     stays hidden, so every answer is still reachable by scrolling. */
  .faq-filter { display: none; }
  .js .faq-filter {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: 16px 56px 16px 120px;
    margin: 0 auto;
  }
  @media (max-width: 720px) {
    .js .faq-filter { padding: 12px 24px 12px 56px; }
  }
  .faq-filter-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }
  .faq-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
  }
  .faq-search input {
    width: 100%;
    font-family: 'Crimson Pro', serif;
    font-size: 16px;
    padding: 9px 32px 9px 14px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    border-radius: 2px;
  }
  .faq-search input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  /* Suppress the browser-native search ✕ so it doesn't double up with ours. */
  .faq-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .faq-search-clear {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    border: none; background: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--pencil);
    padding: 4px 6px; display: none;
  }
  .faq-search-clear:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .faq-search.has-value .faq-search-clear { display: block; }

  .faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pencil);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 7px 13px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .faq-chip:hover { color: var(--ink); border-color: var(--pencil); }
  .faq-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
  .faq-chip[aria-pressed="true"] {
    color: var(--cream);
    background: var(--ink);
    border-color: var(--ink);
  }

  /* Filtering state, applied to <main>. */
  .qa.is-hidden, .faq-section.is-hidden { display: none; }
  .faq-noresults {
    display: none;
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 56px 48px 120px;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--pencil);
  }
  @media (max-width: 720px) { .faq-noresults { padding: 40px 24px 40px 56px; } }
  .faq-noresults.is-visible { display: block; }
  .faq-noresults a { color: var(--ink); border-bottom: 1px solid var(--red); text-decoration: none; }
  /* When filtering, drop the reveal fade so results appear instantly. */
  .faq-filtering .faq-section.reveal { opacity: 1; transform: none; }
  mark.faq-hl { background: var(--highlight); color: inherit; padding: 0 1px; border-radius: 1px; }

  /* Each Q&A pair. Q is italic Crimson, A is regular Crimson. The small
     red "Q." glyph gives each item a visual anchor without using all-caps. */
  .qa {
    padding: 24px 0;
    border-bottom: 1px solid var(--rule);
    /* Clear the sticky filter bar when jumped to via an anchor link. */
    scroll-margin-top: 96px;
    /* Row hover: the same faint highlighter wash the specs tables use —
       a marker running down the page as you scan the questions. */
    transition: background .2s ease;
  }
  .qa:hover { background: rgba(232,216,138,0.10); }
  .qa:first-child { padding-top: 0; }
  .qa:last-child { border-bottom: none; padding-bottom: 0; }

  .qa .q {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 12px;
  }
  .qa .q-mark {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    color: var(--red);
    flex-shrink: 0;
    line-height: 1;
    /* The Q. glyph hangs in the left margin like a manuscript marker */
    margin-left: -28px;
    width: 12px;
    text-align: right;
  }
  @media (max-width: 600px) {
    .qa .q-mark { margin-left: -20px; }
  }
  .qa h3 {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    flex: 1;
  }

  .qa .a {
    font-family: 'Crimson Pro', serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: var(--measure);
  }
  .qa .a p { margin-bottom: 14px; }
  .qa .a p:last-child { margin-bottom: 0; }
  .qa .a em { font-style: italic; color: var(--ink); font-weight: 500; }
  .qa .a strong { font-weight: 600; color: var(--ink); }
  .qa .a a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    transition: background .2s ease;
  }
  .qa .a a:hover {
    background: rgba(184, 58, 46, 0.08);
  }
  .qa .a code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    background: var(--cream-2);
    padding: 1px 6px;
  }
  /* List inside FAQ answers — used when an answer enumerates concrete
     commitments. Custom red marker (small dash) instead of disc bullets;
     fits the brand's typographic voice rather than looking like a form. */
  .qa .a ul {
    list-style: none;
    padding: 0;
    margin: 4px 0 14px 0;
  }
  .qa .a ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    line-height: 1.55;
  }
  .qa .a ul li:last-child { margin-bottom: 0; }
  .qa .a ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 12px;
    height: 1.5px;
    background: var(--red);
  }

  /* ================ Closing ================ */
  .closing {
    position: relative;
    z-index: 2;
    padding: 96px 56px 96px 120px;
    max-width: 1320px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 720px) {
    .closing { padding: 64px 24px 64px 56px; }
  }
  .closing h2 {
    font-family: 'Crimson Pro', serif;
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    max-width: 24ch;
  }
  .closing p {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
    color: var(--pencil);
    max-width: var(--measure);
    margin-bottom: 32px;
  }
  .closing p a.closing-link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
    font-style: normal;
    transition: background .2s ease;
  }
  .closing p a.closing-link:hover {
    background: rgba(184, 58, 46, 0.08);
  }
  .closing-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
  }
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--ink-soft);
    color: var(--cream);
    padding: 17px 30px 17px 34px;
    font-family: 'Crimson Pro', serif;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 -4px rgba(26,24,20,0.15);
  }
  .cta .arrow { font-family: 'JetBrains Mono', monospace; transition: transform .2s ease; }
  .cta:hover .arrow { transform: translateX(4px); }

  .secondary-action {
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
  }

  /* Footer */
  footer {
    padding: 48px 56px 56px 120px;
    max-width: 1320px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    z-index: 2;
  }
  @media (max-width: 720px) {
    footer { padding: 36px 24px 40px 56px; }
  }
  footer .foot-mark {
    font-family: 'Crimson Pro', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
    color: var(--ink);
  }
  footer .foot-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pencil);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }
  footer .foot-meta a {
    color: var(--pencil);
    text-decoration: none;
    transition: color .2s ease;
  }
  footer .foot-meta a:hover { color: var(--ink); }
  /* The store is the only place on this site where a reader can get
     something right now, so it is the one footer item that reads as an
     action rather than a destination. */
  footer .foot-meta a.foot-store {
    color: var(--ink);
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
  }
  footer .foot-meta a.foot-store:hover { background: rgba(184,58,46,0.08); }

  /* Animations (same system as other pages) */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Handwritten effects (same as other pages) */
  @keyframes ink-bleed {
    from { clip-path: inset(0 100% 0 0); opacity: 0.5; }
    to   { clip-path: inset(0 0% 0 0); opacity: 1; }
  }
  @keyframes draw-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes accent-return {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .js .ink-headline { clip-path: inset(0 100% 0 0); opacity: 0.5; }
  .js h1.ink-hero   { clip-path: inset(0 100% 0 0); opacity: 0.5; }

  .js .reveal.visible .ink-headline {
    animation: ink-bleed 0.85s cubic-bezier(.2,.7,.2,1) both;
  }
  .js .page-hero h1.ink-hero,
  .js h1.ink-hero {
    animation: ink-bleed 1.1s cubic-bezier(.2,.7,.2,1) .25s both;
  }
  .js .reveal.visible .ink-headline .accent,
  .js .ink-hero .accent {
    display: inline-block;
    animation: accent-return 0.5s cubic-bezier(.2,.7,.2,1) .55s both;
  }
  .js .ink-hero .accent {
    animation-delay: 1.0s;
  }
  .js .ink-eyebrow::before {
    transform-origin: left center;
    transform: scaleX(0);
    animation: draw-line 0.7s cubic-bezier(.2,.7,.2,1) .35s both;
  }

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

  /* ================ Editorial typographic polish ================
     Modern line-breaking + a deep-link affordance. Pure progressive
     enhancement — unsupported browsers ignore it and fall back to
     today's exact rendering (no layout shift, no regression).
       • balance — evens multi-line headings so the last line is never
         a lone orphan word.
       • pretty  — improves long-form rag, avoids single-word widows.
       • :target — gives a deep-linked block headroom + a brief
         highlighter wash; reduced-motion users get spacing only.
         (.qa already sets scroll-margin-top:96px; :target adds a touch
         more headroom and the wash when a question is linked directly.) */
  h1:not(.ink-hero), h2, h3, h4,
  .eyebrow,
  .divider .label { text-wrap: balance; }

  p, li, .lede, blockquote, figcaption, dd { text-wrap: pretty; }

  :target { scroll-margin-top: 100px; }
  @media (prefers-reduced-motion: no-preference) {
    h2:target, h3:target, .qa:target {
      animation: target-glow 2.2s ease-out both;
    }
    @keyframes target-glow {
      0%, 22% { background-color: var(--highlight); }
      100%    { background-color: transparent; }
    }
  }

  /* ================ Advanced opt-ins (added for review) ================
     Pure progressive enhancement — unsupported browsers ignore both.
     1. Cross-document view transitions: crossfade page-to-page nav
        instead of hard-cutting. Guard below neutralises it to an instant
        cut under reduced-motion (the universal * rule can't reach the
        ::view-transition pseudo-tree). Review the hand-off to each page's
        load-entrance animations in a real browser.
     2. hanging-punctuation: opening quotes/brackets hang into the margin,
        book-style (Safari today; ignored elsewhere). */
  @view-transition { navigation: auto; }

  body { hanging-punctuation: first; }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
  }

  /* ================ PRINT STYLES ================
     Site-wide print / PDF support: drop decorative chrome, force black
     ink on white paper, keep headings with their content, and expand
     external link URLs so a printed page stands on its own. The
     reveal-elements override is essential — without it, any block not
     yet scrolled into view would print blank. */
  @media print {
    /* Drop the persistent red margin line */
    body::before { display: none; }

    /* Readable contrast on paper */
    body {
      background: #fff !important;
      color: #000 !important;
      font-size: 11pt;
      line-height: 1.5;
    }

    /* Hide nav, footer, and the skip link */
    nav.top, footer, .skip-link { display: none !important; }

    /* Force reveal-animation elements to their final, visible state */
    .reveal { opacity: 1 !important; transform: none !important; }

    /* Headings stay with their content */
    h1, h2, h3 {
      page-break-after: avoid;
      break-after: avoid;
      color: #000 !important;
    }

    /* No mid-paragraph page breaks */
    p, li { orphans: 3; widows: 3; }

    /* Emphasis keeps its weight/slant but drops decorative colour */
    strong, em { color: #000 !important; }

    /* Show URLs after external links; internal anchors stay clean */
    a[href^="http"]::after,
    a[href^="mailto:"]::after {
      content: " (" attr(href) ")";
      font-size: 9pt;
      color: #555;
    }
    a[href^="#"]::after,
    a[href^="/"]::after,
    a[href^="."]::after { content: ""; }

    /* Decorative red list dashes print black */
    ul li::before { background: #000 !important; }
  }