:root {
    /* Warm paper palette — picked, not defaulted */
    --paper:       #F6F1E7;
    --paper-2:     #FBF8F1;
    --ink:         #231E16;
    --ink-2:       #514838;
    --muted:       #978B74;
    --accent:      #8A3F2B;   /* oxblood / burnt sienna */
    --accent-2:    #B5765E;
    --hair:        #E4DAC6;
    --hair-2:      #D2C4A8;
    --good:        #4F7A4A;

    --serif:  "Hoefler Text", "Charter", Georgia, "Times New Roman", serif;
    --body:   "Charter", Georgia, "Palatino", "Times New Roman", serif;

    --measure: 68ch;
    --measure-box: 82ch;
    --page:    980px;
  }

  /* Site is intentionally cream/light only — no dark theme. */
  :root { color-scheme: light dark; }

  /* Dark theme — activates on the viewer's OS preference (prefers-color-scheme).
     Warm dark to match the cream identity, not a cold grey. Tokens only — every
     component styles through these vars, so the whole site flips here. */
  @media (prefers-color-scheme: dark) {
    :root {
      --paper:   #16130D;   /* warm near-black */
      --paper-2: #1F1B13;
      --ink:     #EDE6D6;   /* warm off-white */
      --ink-2:   #C4B9A3;
      --muted:   #8F836B;
      --accent:  #D08A5E;   /* brighter oxblood so it reads on dark */
      --accent-2:#C9916E;
      --hair:    #342C1E;
      --hair-2:  #45392733;
      --good:    #7FA86B;
    }
    /* dark-mode image softening so stark white screenshots don't glare */
    figure img, .cs-section figure img, .article img { filter: brightness(0.92) contrast(1.02); }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--body); font-size:1.0625rem; line-height:1.56;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .wrap { max-width:var(--page); margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.1rem,3vw,2rem) 3.5rem; }

  /* ---------- Masthead ---------- */
  .masthead { margin-bottom:clamp(2rem,3.5vw,2.6rem); }
  .kicker {
    font-family:var(--body); font-size:1rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--accent); font-weight:700; margin:0 0 1.1rem;
  }
  h1 {
    font-family:var(--serif); font-weight:700; margin:0 0 1.1rem;
    font-size:clamp(3rem,10vw,5rem); line-height:0.95; letter-spacing:-0.02em; text-wrap:balance;
  }
  .lede {
    font-size:clamp(1.15rem,2.4vw,1.4rem); line-height:1.5; color:var(--ink-2);
    max-width:52ch; margin:0; font-style:italic;
  }

  /* ---------- Stat cards ---------- */
  .stats {
    margin-top:clamp(1.3rem,3vw,1.8rem);
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.6rem;
  }
  @media (min-width:620px){ .stats { grid-template-columns:repeat(4,1fr); } }
  .stat {
    background:var(--paper-2); border:1px solid var(--hair);
    border-radius:3px; padding:1rem 1.1rem;
  }
  .stat b {
    display:block; font-family:var(--serif); font-weight:700;
    font-size:1.3rem; line-height:1.05; letter-spacing:-0.01em; color:var(--ink);
  }
  .stat span { display:block; margin-top:0.35rem; font-size:1rem; line-height:1.3; color:var(--muted); }

  /* ---------- How I work ---------- */
  .howiwork { margin-top:clamp(1.8rem,3.5vw,2.4rem); padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.6rem); background:var(--paper-2); border:1px solid var(--hair); border-radius:4px; }
  .howiwork h2 { font-family:var(--serif); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; margin:0 0 0.7rem; }
  .howiwork p { margin:0 0 0.6rem; max-width:var(--measure-box); }
  .howiwork p:last-child { margin-bottom:0; }
  .howiwork ul.reads { margin:0.1rem 0 0.9rem; padding:0; list-style:none; max-width:var(--measure-box); }
  .howiwork ul.reads li { padding-left:1.1rem; text-indent:-1.1rem; margin:0 0 0.35rem; }
  .howiwork ul.reads li::before { content:"—"; color:var(--accent); margin-right:0.55rem; }
  .howiwork ul.reads b { font-weight:600; color:var(--ink); }
  .howiwork ul.reads .gloss { color:var(--muted); }

  /* standalone call-out — deliberately detached from the timeline */
  .callout {
    margin:-1rem 0 clamp(1.6rem,3vw,2.2rem) clamp(2.1rem,4vw,2.6rem);
    padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.4rem,2.8vw,2rem);
    background:var(--paper-2); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:4px;
  }
  .callout .eyebrow { display:block; font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin:0 0 0.5rem; }
  .callout h3 { font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; margin:0 0 0.6rem; color:var(--ink); }
  .callout p { margin:0; max-width:var(--measure-box); }
  /* in-timeline asides: clear the timeline's vertical rule so the box doesn't overlap it */
  .callout.flush { margin-left:clamp(2.1rem,4vw,2.6rem); margin-right:0; }
  .howiwork strong { color:var(--ink); }

  /* ---------- Era divider ---------- */
  .era { position:relative; margin:clamp(2.2rem,4vw,3rem) 0 clamp(1.4rem,3vw,2rem); padding-left:clamp(2.1rem,4vw,2.6rem); }
  .era:first-of-type { margin-top:0; }
  .era span { font-family:var(--body); font-size:1rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); background:var(--paper); padding-right:0.9rem; }
  .era::after { content:""; position:absolute; left:calc(2.1rem + 0.2rem); right:0; top:50%; height:1px; background:var(--hair); z-index:-1; }

  /* ---------- Headline result + metric chips ---------- */
  .headline-result { font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.3; color:var(--ink); margin:0.7rem 0 0; letter-spacing:-0.01em; }
  .chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.8rem 0 0.2rem; }
  .chip { display:inline-flex; align-items:baseline; gap:0.35rem; background:var(--paper-2); border:1px solid var(--hair); border-radius:100px; padding:0.3rem 0.8rem; font-size:1rem; line-height:1.2; }
  .chip b { font-family:var(--serif); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
  .chip span { color:var(--muted); }

  /* ---------- Collapsible detail ---------- */
  details.more { margin:0; }
  details.more > summary {
    list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem;
    margin-top:0.8rem; font-size:1rem; font-weight:700; color:var(--accent);
    font-family:var(--body); user-select:none; width:max-content;
  }
  details.more > summary::-webkit-details-marker { display:none; }
  details.more > summary .label-closed { display:inline; }
  details.more > summary .label-open { display:none; }
  details.more[open] > summary .label-closed { display:none; }
  details.more[open] > summary .label-open { display:inline; }
  details.more > summary .caret { transition:transform .2s; }
  details.more[open] > summary .caret { transform:rotate(90deg); }
  details.more > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
  details.more .more-body > *:first-child { margin-top:0.85rem; }

  /* ---------- Timeline ---------- */
  .timeline { position:relative; margin-top:clamp(2rem,4vw,2.8rem); }
  .timeline::before {
    content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--hair-2);
  }

  .entry { position:relative; padding:0 0 clamp(2.4rem,4.5vw,3.2rem) clamp(2.1rem,4vw,2.6rem); }
  .entry:last-child { padding-bottom:0; }
  .entry::before {
    content:""; position:absolute; left:2px; top:0.5rem; width:11px; height:11px;
    border-radius:50%; background:var(--paper); border:1.5px solid var(--hair-2);
  }
  .entry.is-current::before { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); }

  .when {
    font-size:1rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent);
    font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:0.45rem;
  }
  .entry h2 {
    font-family:var(--serif); font-weight:700; margin:0;
    font-size:clamp(1.45rem,3.3vw,1.9rem); line-height:1.1; letter-spacing:-0.01em; text-wrap:balance;
  }
  /* per-entry logo chip */
  .entry-head { display:flex; align-items:center; gap:0.9rem; }
  .entry-head h2 { flex:1; }
  .logo-chip {
    flex:0 0 auto; width:54px; height:54px; border-radius:8px;
    background:var(--paper-2); border:1px solid var(--hair);
    display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px;
  }
  .logo-chip img { max-width:100%; max-height:100%; width:auto; height:auto; display:block; }
  @media (max-width:560px){ .logo-chip { width:44px; height:44px; } }
  .descriptor {
    margin:0.35rem 0 0; font-style:italic; color:var(--muted); font-size:1rem;
  }
  .entry p { margin:0.7rem 0 0; max-width:var(--measure); }
  .entry p:first-of-type { margin-top:0.8rem; }

  .block-label {
    display:block; font-weight:700; color:var(--ink);
    font-family:var(--serif); font-size:1.02rem; letter-spacing:-0.005em;
    margin:1.1rem 0 0.1rem;
  }
  .entry ul.metrics {
    margin:1rem 0 0; padding:0; list-style:none; max-width:var(--measure);
  }
  .entry ul.metrics li { position:relative; padding-left:1.1rem; margin-bottom:0.45rem; }
  .entry ul.metrics li::before { content:"›"; position:absolute; left:0; color:var(--accent-2); font-weight:700; }
  .entry ul.metrics li.metric-figure { padding-left:0; margin:0.6rem 0 0.9rem; }
  .entry ul.metrics li.metric-figure::before { content:none; }
  .entry ul.metrics li.metric-figure figure { margin:0; max-width:100%; }
  b.num { font-variant-numeric:tabular-nums; color:var(--ink); }

  .list-plain { margin:1rem 0 0; padding:0; list-style:none; max-width:var(--measure); }
  .list-plain li { position:relative; padding-left:1.2rem; margin-bottom:0.7rem; }
  .list-plain li::before { content:"—"; position:absolute; left:0; color:var(--accent-2); }

  blockquote {
    margin:1.8rem 0 0.4rem; padding:0.1rem 0 0.1rem 1.1rem; border-left:2px solid var(--accent-2);
    font-style:italic; color:var(--ink-2); max-width:var(--measure);
  }
  blockquote cite { display:block; margin-top:0.5rem; font-style:normal; font-size:1rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
  blockquote p { margin:0 0 0.7rem; }
  blockquote p:last-of-type { margin-bottom:0; }
  /* testimonial with photo */
  .testimonial { display:flex; gap:1rem; margin:1.8rem 0 0.4rem; max-width:var(--measure); align-items:flex-start; }
  .testimonial .avatar { flex:0 0 auto; width:48px; height:48px; border-radius:50%; overflow:hidden; border:1px solid var(--hair-2); }
  .testimonial .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
  .testimonial blockquote { margin:0; border-left:2px solid var(--accent-2); padding-left:1rem; }

  /* formula block (SLEEEP) */
  .formula {
    margin:1.1rem 0 0; padding:1rem 1.2rem; background:var(--paper-2);
    border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:3px;
    font-size:1rem; line-height:1.7; max-width:var(--measure);
  }
  .formula .eq { font-weight:700; color:var(--ink); }
  .formula .where { color:var(--muted); padding-left:1rem; display:block; }

  /* ---------- Images / proof ---------- */
  figure { margin:1rem 0 0; max-width:var(--measure); }
  figure img { display:block; width:100%; height:auto; border:1px solid var(--hair-2); border-radius:3px; }
  figure figcaption { margin-top:0.5rem; font-size:1rem; color:var(--muted); font-style:italic; }

  .img-slot {
    margin:1.3rem 0 0; max-width:var(--measure);
    border:1.5px dashed var(--hair-2); border-radius:3px; background:var(--paper-2);
    padding:1.6rem 1.2rem; text-align:center; color:var(--muted); font-size:1rem; font-style:italic;
  }
  .img-slot b { display:block; font-style:normal; color:var(--accent); font-family:var(--serif); margin-bottom:0.2rem; }

  /* ---------- Featured in ---------- */
  .featured { margin-top:clamp(2rem,4vw,2.8rem); padding-top:1.6rem; border-top:1px solid var(--hair); }
  .featured .eyebrow { font-size:1rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem; }
  .featured-logos { display:flex; flex-wrap:wrap; align-items:center; gap:2.2rem; }
  .featured-logos img { height:36px; width:auto; opacity:0.72; filter:grayscale(1); transition:opacity .2s; }
  .featured-logos img:hover { opacity:1; filter:grayscale(0); }

  /* ---------- Tools ---------- */
  .tools { margin-top:clamp(2rem,4vw,2.8rem); padding-top:1.6rem; border-top:1px solid var(--hair); }
  .tools h2 { font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em; margin:0 0 0.5rem; }
  .tools .note { margin:0 0 1.3rem; font-size:1rem; color:var(--muted); font-style:italic; max-width:var(--measure-box); }
  .tools dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.8rem 2.4rem; }
  .tools dt { font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:0.08rem; }
  .tools dd { margin:0; font-size:1rem; line-height:1.5; color:var(--ink); }
  @media (max-width:560px){ .tools dl { grid-template-columns:1fr; gap:0.2rem 0; } .tools dt { margin-top:0.7rem; } }

  /* ---------- Certifications ---------- */
  .certs { margin-top:clamp(2rem,4vw,2.8rem); padding-top:1.6rem; border-top:1px solid var(--hair); }
  .certs h2 { font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em; margin:0 0 1.2rem; }
  .certs ul { columns:2; column-gap:2.5rem; margin:0; padding:0; list-style:none; }
  .certs li { break-inside:avoid; margin-bottom:0.85rem; font-size:1rem; line-height:1.35; color:var(--ink); display:flex; gap:0.6rem; align-items:flex-start; }
  .certs li .cert-logo { flex:0 0 auto; width:26px; height:26px; border-radius:5px; border:1px solid var(--hair); background:var(--paper); overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .certs li .cert-logo img { width:100%; height:100%; object-fit:contain; }
  .certs li .issuer { color:var(--muted); }
  @media (max-width:560px){ .certs ul { columns:1; } }

  /* ---------- Closing ---------- */
  .closing { margin-top:clamp(2.2rem,4.5vw,3rem); padding-top:1.8rem; border-top:1px solid var(--hair); }
  .closing p {
    font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,3.4vw,1.85rem);
    line-height:1.38; letter-spacing:-0.005em; max-width:46ch; margin:0; text-wrap:balance; color:var(--ink);
  }

  .ext { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; }
  .ext:hover { border-bottom-color:var(--accent); color:var(--accent); }
  a { color:var(--accent); text-underline-offset:2px; }
  a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- Site header (nav) ---------- */
  .site-header {
    border-bottom:1px solid var(--hair); background:var(--paper);
    position:sticky; top:0; z-index:10;
  }
  .site-header .bar {
    max-width:var(--page); margin:0 auto; padding:0.9rem clamp(1.1rem,3vw,2rem);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .brand { font-family:var(--serif); font-weight:700; font-size:1.25rem; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
  .brand:hover { color:var(--accent); }
  .site-nav { display:flex; gap:clamp(1.6rem,4vw,2.8rem); align-items:center; }
  .nav-social { display:none; }   /* only shown inside the mobile overlay */
  .site-nav a { font-family:var(--body); font-size:1.0625rem; letter-spacing:0.02em; color:var(--ink-2); text-decoration:none; padding:0.3rem 0; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--accent); }
  .site-nav a[aria-current="page"] { font-weight:700; }
  @media (max-width:560px){ .site-header .bar { flex-wrap:wrap; row-gap:0.5rem; } }
  @media (max-width:480px){ .site-nav { gap:1rem; flex-wrap:wrap; } .site-nav a { font-size:1rem; } }

  /* ---------- Mobile hamburger menu (CSS-only, no JS) ---------- */
  .nav-toggle, .nav-toggle-label { display:none; }
  .brand { white-space:nowrap; }
  @media (max-width:680px){
    .site-header .bar { flex-wrap:nowrap; }
    /* hamburger button, top-right */
    .nav-toggle-label {
      display:flex; flex-direction:column; justify-content:center; gap:5px;
      width:48px; height:48px; cursor:pointer; margin:-0.3rem -0.3rem -0.3rem 0;
      padding:12px; border-radius:6px; -webkit-tap-highlight-color:transparent;
      position:relative; z-index:50;   /* ABOVE the open nav overlay (z-index:40) so the X stays tappable */
    }
    .nav-toggle-label span { display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s; }
    /* full-screen overlay panel */
    .site-nav {
      position:fixed; inset:0; top:0; z-index:40;
      background:var(--paper);
      flex-direction:column;
      justify-content:flex-end;      /* bring items DOWN into thumb reach */
      align-items:flex-end;          /* right-aligned for right-handed thumbs */
      gap:0;
      padding:2rem clamp(1.6rem,7vw,2.6rem) clamp(3rem,14vh,6rem);
      transform:translateX(100%); transition:transform .3s ease;
      visibility:hidden;
    }
    .site-nav a {
      font-family:var(--serif); font-size:1.7rem; font-weight:700;
      color:var(--ink); text-align:right; width:100%;
      padding:0.85rem 0;             /* generous tap spacing */
      border-bottom:1px solid var(--hair);
    }
    .site-nav a:first-child { border-top:1px solid var(--hair); }
    .site-nav a[aria-current="page"] { color:var(--accent); }
    /* social icons at the bottom of the overlay, right-aligned to match the links */
    .nav-social { display:flex; gap:1.6rem; justify-content:flex-end; width:100%; padding:1.4rem 0 0.2rem; }
    .nav-social a { padding:0; border:none; width:auto; color:var(--ink-2); display:inline-flex; }
    .nav-social a:hover { color:var(--accent); }
    .nav-social svg { width:28px; height:28px; display:block; }
    /* open state */
    .nav-toggle:checked ~ .site-nav { transform:translateX(0); visibility:visible; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--ink); }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){ opacity:0; }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--ink); }
    /* explicit "Close" text cue beside the X when open */
    .nav-toggle:checked ~ .nav-toggle-label::after {
      content:"Close"; position:absolute; right:52px; top:50%; transform:translateY(-50%);
      font-family:var(--body); font-size:0.95rem; letter-spacing:0.1em; text-transform:uppercase;
      color:var(--muted); font-weight:700; white-space:nowrap;
    }
    /* lock scroll feel: overlay covers page */
    body:has(.nav-toggle:checked){ overflow:hidden; }
  }

  /* ---------- Site footer ---------- */
  .site-footer { border-top:1px solid var(--hair); background:var(--paper-2); margin-top:clamp(2.5rem,5vw,4rem); }
  .site-footer .cols {
    max-width:var(--page); margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.1rem,3vw,2rem) 1.6rem;
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem;
  }
  @media (max-width:620px){
    .site-footer .cols { grid-template-columns:1fr; gap:1.8rem; text-align:center; justify-items:center; }
    .site-footer h4 { margin-bottom:0.6rem; }
    .site-footer ul li { margin-bottom:0.9rem; }
    .site-footer ul a, .site-footer .email-plain { font-size:1.1rem; }
    .site-footer .legal { justify-content:center; }
  }
  .site-footer h4 { font-family:var(--body); font-size:1rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 0.9rem; }
  .site-footer .brand-foot { font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--ink); margin:0 0 0.5rem; }
  .site-footer ul { list-style:none; margin:0; padding:0; }
  .site-footer ul li { margin-bottom:0.7rem; }
  .site-footer ul a { font-size:1.0625rem; color:var(--ink-2); text-decoration:none; }
  .site-footer ul a:hover { color:var(--accent); }
  .site-footer .legal {
    max-width:var(--page); margin:0 auto; padding:1.2rem clamp(1.1rem,3vw,2rem);
    border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:0.5rem 1.6rem; align-items:center;
    font-size:1rem; color:var(--muted);
  }
  .site-footer .legal a { color:var(--muted); text-decoration:none; }
  .site-footer .legal a:hover { color:var(--accent); }
  .email-plain { font-size:1.0625rem; color:var(--ink-2); }
  .social-row { display:flex; gap:1rem; margin:0 0 0.9rem; }
  .social-row a { display:inline-flex; color:var(--ink-2); transition:color .2s; }
  .social-row a:hover { color:var(--accent); }
  .social-row svg { width:22px; height:22px; display:block; }
  @media (max-width:560px){ .social-row { justify-content:center; } .social-row svg { width:26px; height:26px; } }
  .site-footer { scroll-margin-top:4.5rem; }

  /* ---------- Availability ---------- */
  .availability { margin-top:clamp(2.2rem,4.5vw,3rem); padding-top:1.8rem; border-top:1px solid var(--hair); }
  .availability h2 { font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em; margin:0 0 1.3rem; }
  .availability dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:1rem 2rem; max-width:var(--measure-box); }
  @media (max-width:560px){ .availability dl { grid-template-columns:1fr; gap:0.3rem 0; } .availability dt { margin-top:0.9rem; } }
  .availability dt { font-size:1rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); font-weight:700; white-space:nowrap; padding-top:0.15rem; }
  .availability dd { margin:0; font-size:1.0625rem; line-height:1.5; color:var(--ink); }
  .intro { margin:clamp(1.8rem,3.5vw,2.6rem) 0 0; }
  .intro p { max-width:var(--measure-box); margin:0 0 0.8rem; font-size:1.1rem; line-height:1.6; color:var(--ink-2); }
  .intro p:last-child { margin-bottom:0; }
  .intro strong { color:var(--ink); font-weight:600; }

  /* ---------- Ask-an-AI block ---------- */
  .ask-ai { margin-top:clamp(1.4rem,3vw,2rem); padding:clamp(1.2rem,2.6vw,1.6rem) clamp(1.3rem,2.8vw,1.8rem);
    background:var(--paper-2); border:1px solid var(--hair); border-radius:4px; max-width:var(--measure-box); }
  .ask-ai h3 { font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; margin:0 0 0.3rem; color:var(--ink); }
  .ask-ai .sub { margin:0 0 1rem; font-size:1rem; color:var(--muted); }
  .ai-buttons { display:flex; flex-wrap:wrap; gap:0.6rem; }
  .ai-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 0.9rem;
    background:var(--paper); border:1px solid var(--hair-2); border-radius:100px;
    font-size:1rem; font-weight:600; color:var(--ink-2); text-decoration:none; transition:border-color .15s, color .15s; }
  .ai-btn svg { width:18px; height:18px; flex:0 0 auto; display:block; }
  .ai-btn svg .mono { fill:var(--ink-2); transition:fill .15s; }
  .ai-btn svg .monostroke { color:var(--ink-2); transition:color .15s; }
  .ai-btn:hover { border-color:var(--accent); color:var(--ink); }
  .ai-btn.chatgpt:hover svg .mono { fill:#0D0D0D; }
  .ai-btn.claude:hover svg .mono { fill:#D97757; }
  .ai-btn.perplexity:hover svg .monostroke { color:#20808D; }
  .ai-btn.grok:hover svg .mono { fill:#0D0D0D; }
  .ai-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ===== Case study (work.html) ===== */
/* ---------- Case study ---------- */
  .cs-label { font-size:1rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 1rem; }
  /* case-study title: a headline, not a one-word hero — smaller than the homepage h1 */
  .masthead h1 { font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.1; letter-spacing:-0.015em; margin:0 0 1rem; max-width:20ch; }
  .cs-anon { font-style:italic; color:var(--muted); max-width:var(--measure); margin:0 0 2rem; }
  .cs-lead { font-family:var(--body); font-weight:400; font-size:1.0625rem; line-height:1.56; color:var(--ink); max-width:var(--measure); margin:0 0 0.9rem; }
  .cs-intro p { max-width:var(--measure); margin:0 0 1rem; }
  .cs-section { margin-top:clamp(2.4rem,5vw,3.4rem); }
  .cs-section > h2 { font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,4vw,2.3rem); letter-spacing:-0.015em; margin:0 0 1rem; text-wrap:balance; }
  .cs-section > h3 { font-family:var(--serif); font-weight:700; font-size:1.3rem; letter-spacing:-0.01em; margin:1.6rem 0 0.6rem; }
  .cs-section p { max-width:var(--measure); margin:0 0 1rem; }
  .cs-section ul { max-width:var(--measure); margin:0 0 1rem; padding-left:0; list-style:none; }
  .cs-section ul li { position:relative; padding-left:1.2rem; margin-bottom:0.6rem; }
  .cs-section ul li::before { content:"—"; position:absolute; left:0; color:var(--accent-2); }
  .cs-q { font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--accent); margin:0 0 1rem; }
  .cs-step-num { font-size:1rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0; }
  /* results grid */
  .cs-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.1rem 1.4rem; margin:1.8rem 0 2.4rem; max-width:var(--measure-box); }
  @media (min-width:620px){ .cs-results { grid-template-columns:repeat(3,1fr); } }
  .cs-results .stat { background:var(--paper-2); border:1px solid var(--hair); border-radius:4px; padding:1.5rem 1.4rem; text-align:center; }
  .cs-results .stat b { display:block; font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1.05; color:var(--accent); font-variant-numeric:tabular-nums; }
  .cs-results .stat span { display:block; margin-top:0.55rem; font-size:0.98rem; line-height:1.3; color:var(--muted); }
  /* key terms */
  /* Key Terms — 3-column card grid (mirrors original Brizy layout); each term+definition is one grid cell */
  .cs-termgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem 2.4rem; max-width:var(--measure-box); margin:1.6rem 0 0; }
  .cs-termgrid dt { font-weight:700; font-family:var(--serif); color:var(--ink); font-size:1.35rem; letter-spacing:-0.01em; margin:0 0 0.3rem; }
  .cs-termgrid dd { margin:0; color:var(--ink-2); line-height:1.5; }
  @media (max-width:760px){ .cs-termgrid { grid-template-columns:repeat(2,1fr); gap:1.8rem 2rem; } }
  @media (max-width:460px){ .cs-termgrid { grid-template-columns:1fr; gap:1.4rem; } }

  /* Insights — icon card grid (mirrors original; teal icons re-toned to oxblood for brand fit) */
  .cs-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem 2.6rem; max-width:var(--measure-box); margin:1.6rem 0 0; }
  @media (max-width:560px){ .cs-cards { grid-template-columns:1fr; gap:1.8rem; } }
  .cs-card h3 { font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; margin:0.9rem 0 0.4rem; }
  .cs-card p { margin:0; color:var(--ink-2); line-height:1.5; max-width:40ch; }
  .cs-card-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--paper); }
  .cs-card-icon svg { width:24px; height:24px; }
  .cs-section figure { margin:1.4rem 0; max-width:var(--measure); }
  /* Results images + flagged data screenshots use the wider display width so charts/text stay legible */
  .cs-results + figure, .cs-results + figure + figure, .cs-results + figure + figure + figure,
  .cs-section figure.cs-wide { max-width:var(--measure-box); }
  .cs-section figure img { display:block; width:100%; height:auto; border:1px solid var(--hair-2); border-radius:3px; }
  .cs-section figure figcaption { margin-top:0.5rem; font-size:1rem; color:var(--muted); font-style:italic; }
  /* Best part — oxblood-border callout (matches the site's standalone .callout pattern) */
  .cs-bestpart { margin:clamp(2.6rem,6vw,4rem) 0; max-width:var(--measure); padding:clamp(1.4rem,2.8vw,1.9rem) clamp(1.5rem,3vw,2rem); background:var(--paper-2); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:4px; }
  .cs-bestpart h2 { font-family:var(--body); font-weight:700; font-size:0.9rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin:0 0 0.5rem; }
  .cs-bestpart p { margin:0; max-width:var(--measure); font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,3vw,1.65rem); line-height:1.3; color:var(--ink); }
  .cs-cta { margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:1.8rem; border-top:1px solid var(--hair); }
  .cs-cta h2 { font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,3.4vw,2rem); margin:0 0 1rem; max-width:var(--measure); text-wrap:balance; }
  .cs-disclaimer { margin-top:2rem; font-size:0.95rem; color:var(--muted); font-style:italic; max-width:var(--measure); }

/* ===== Legal pages ===== */
.legal-page { max-width:68ch; }
  .legal-page h1 { font-size:clamp(2.2rem,6vw,3rem); margin-bottom:0.4rem; }
  .legal-page .updated { color:var(--muted); font-style:italic; margin:0 0 2rem; font-size:1rem; }
  .legal-page h2 { font-family:var(--serif); font-weight:700; font-size:1.4rem; margin:2rem 0 0.6rem; letter-spacing:-0.01em; }
  .legal-page p, .legal-page li { max-width:68ch; }
  .legal-page ul { padding-left:1.2rem; }
  .legal-page li { margin-bottom:0.5rem; }

/* ===== Writing index ===== */
.writing-index { max-width:var(--measure-box); }
  .writing-index h1 { font-size:clamp(2.4rem,7vw,3.6rem); margin:0 0 0.6rem; }
  .writing-index .lede { font-size:clamp(1.1rem,2.3vw,1.3rem); color:var(--ink-2); font-style:italic; margin:0 0 clamp(1.8rem,4vw,2.6rem); max-width:52ch; }
  .post-list { list-style:none; margin:0; padding:0; }
  .post-list li { padding:1.3rem 0; border-top:1px solid var(--hair); }
  .post-list li:last-child { border-bottom:1px solid var(--hair); }
  .post-list .when { font-size:0.95rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .post-list h2 { font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,3vw,1.7rem); letter-spacing:-0.01em; margin:0.3rem 0 0.4rem; }
  .post-list h2 a { color:var(--ink); text-decoration:none; }
  .post-list h2 a:hover { color:var(--accent); }
  .post-list p { margin:0; color:var(--ink-2); max-width:var(--measure); }
  .post-soon { color:var(--muted); font-style:italic; }

/* ===== Article ===== */
.article { max-width:var(--measure); }
  .article .eyebrow { display:block; font-size:1rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 1rem; }
  .article h1 { font-size:clamp(2rem,5vw,2.9rem); line-height:1.08; margin:0 0 0.8rem; }
  .article .byline { font-size:1rem; color:var(--muted); margin:0 0 0.4rem; }
  .article .standfirst { font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.45rem); line-height:1.4; color:var(--ink-2); margin:1.2rem 0 2rem; }
  .article h2 { font-family:var(--serif); font-weight:700; font-size:clamp(1.4rem,3vw,1.75rem); letter-spacing:-0.01em; margin:2.2rem 0 0.7rem; text-wrap:balance; }
  .article h3 { font-family:var(--serif); font-weight:700; font-size:1.2rem; margin:1.6rem 0 0.5rem; }
  .article p { margin:0 0 1.1rem; }
  .article ul { margin:0 0 1.1rem; padding-left:1.3rem; }
  .article li { margin-bottom:0.5rem; }
  .article .cohort { margin:1.1rem 0; padding:1rem 1.2rem; background:var(--paper-2); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:3px; font-variant-numeric:tabular-nums; }
  .article blockquote { margin:1.6rem 0; padding-left:1.1rem; border-left:2px solid var(--accent-2); font-style:italic; color:var(--ink-2); }
  .article-foot { margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:1.6rem; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:0.4rem 1.4rem; font-size:1rem; }
  .article-foot a { color:var(--accent); }

/* ===== Homepage (body.home) ===== */
  /* Hero h1: larger than the case-study title, which shares .masthead h1 */
  .home .masthead h1 { font-size:clamp(2.4rem,6vw,3.6rem); max-width:none; }

  .home-bet, .home-quotes, .home-routes { margin-top:clamp(2.2rem,4.5vw,3rem); padding-top:1.8rem; border-top:1px solid var(--hair); }
  .home-bet h2, .home-quotes h2, .home-routes h2 { font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em; margin:0 0 1.4rem; }
  .home-bet p { max-width:var(--measure-box); margin:0 0 0.9rem; font-size:1.1rem; line-height:1.6; color:var(--ink-2); }
  .home-bet p:last-child { margin-bottom:0; }

  /* Quotes */
  .home-quotes-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  @media (max-width:720px){ .home-quotes-list { grid-template-columns:1fr; } }
  .home-quotes blockquote { margin:0; padding:1.2rem 1.3rem; background:var(--paper-2); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:4px; }
  .home-quotes blockquote p { margin:0 0 0.8rem; font-style:italic; color:var(--ink); line-height:1.5; }
  .home-quotes cite { font-style:normal; font-weight:700; font-size:0.95rem; color:var(--ink-2); }
  .quote-by { display:flex; align-items:center; gap:0.65rem; margin-top:0.9rem; }
  .quote-by .avatar { flex:0 0 auto; width:40px; height:40px; border-radius:50%; overflow:hidden; border:1px solid var(--hair-2); }
  .quote-by .avatar img { width:100%; height:100%; object-fit:cover; display:block; }

  /* Routes onward */
  .home-routes-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  @media (max-width:720px){ .home-routes-list { grid-template-columns:1fr; } }
  .home-route { display:block; padding:1.3rem 1.4rem; background:var(--paper-2); border:1px solid var(--hair); border-radius:4px; text-decoration:none; transition:border-color .2s; }
  .home-route:hover { border-color:var(--accent-2); }
  .home-route h3 { font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--accent); margin:0 0 0.3rem; }
  .home-route p { margin:0; color:var(--ink-2); font-size:0.98rem; line-height:1.4; }