:root {
    --paper:       #FDF8ED;
    --paper-warm:  #F8F2E9;
    --paper-bright:#FFFFFF;
    --paper-dark:  #232938;

    --ink:         #232938;
    --ink-deep:    #232938;
    --ink-soft:    #444B5C;
    --ink-mute:    #5F6474;
    --ink-quiet:   #9296A1;

    --gold:        #C7A33C;
    --gold-display:#A08026;  /* Ship O: the gold for large italic headings by day, 3.4:1 on the cream where #C7A33C is 2.2:1 */
    --gold-deep:   #705E1D;
    --gold-soft:   #E0C77C;

    --line:        #D8D2C2;
    --line-soft:   #E6E0CF;
    --line-faint:  #EFEADC;

    --plum:        #6F4969;
    --urgent:      #7A2A1E;
    --urgent-bg:   #EFDED5;

    /* Ship U: the stand-ins (fonts.css) come straight after each face, so text does not move when the face arrives. */
    --serif: 'Cormorant Garamond', 'CG Fallback', 'CG Fallback Android', 'Times New Roman', Georgia, serif;
    --sans:  'Raleway', 'Raleway Fallback', 'Raleway Fallback Android', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ease:     cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --max:      1200px;
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    font-kerning: normal;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.094  0 0 0 0 0.106  0 0 0 0 0.102  0 0 0 0.030 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  h1, h2, h3, h4 { color: var(--ink-deep); font-weight: 600; }
  .disp, .sub-statement, .manifesto-line, .cf-title, h1, h2, h3, h4, .tip-title, .ix-title, .band-label, .sec-h, .further-h { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  a[href^="tel:"] { white-space: nowrap; font-variant-numeric: lining-nums; }
  [id] { scroll-margin-top: 96px; }
  a { color: inherit; text-decoration: none; }
  em { font-style: italic; }
  ::selection { background: var(--paper-warm); color: var(--ink-deep); }
  p, li, blockquote { font-variant-numeric: oldstyle-nums proportional-nums; }
  img { max-width: 100%; }

  /* ============ Night reading ============ */
  [data-theme="dark"] {
    --paper:       #191E29;
    --paper-warm:  #1F2531;
    --paper-bright:#242B39;
    --ink:         #E8E3D6;
    --ink-deep:    #F3EFE4;
    --ink-soft:    #C4BFAF;
    --ink-mute:    #98948A;
    --ink-quiet:   #9A968C;
    --line:        #3A4152;
    --line-soft:   #333A4A;
    --line-faint:  #2B3242;
    --gold-deep:   #C9A547;
    --gold-soft:   #8E7A35;
    --gold-display:#C7A33C;
  }
  [data-theme="dark"] body { background-image: none; }
  [data-theme="dark"] .ix-row:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 12%, rgba(255,255,255,0.05) 88%, transparent); }
  [data-theme="dark"] .media-card:hover { background: rgba(255,255,255,0.05); }
  [data-theme="dark"] .masthead { background: rgba(25,30,41,0.92); }
  [data-theme="dark"] .top-nav { background: rgba(25,30,41,0.98); }
  /* v240 — night-mode plates: give them their paper back, dimmed. The plates
     became sepia washes in v234a/v236/v237, v239a keyed their cream out to
     transparency, and the day rules above feather them with a radial mask and
     blend them with multiply so they melt into the cream page. The night rule
     was still the v3c/v187 gold invert built for opaque line art, whose own
     comment said "Line-art ONLY". Inverting a wash inverts its lighting, so
     the lit side went dark and the shadow went bright: an x-ray. Nothing
     avoids that on transparent dark ink over a dark page, because making the
     ink visible means making it lighter, and more ink then means more light.

     So the plate is given a ground. Mask off, multiply off, backed with the
     cream it was keyed from, the whole dimmed to about #6F6C66. Dark ink sits
     on lighter paper again and the drawing keeps its own lighting. The mask
     MUST come off with it: left on, it masks the background too and paints a
     grey disc instead of a plate. About 4.0:1 mount over ink, 1.5:1 over page;
     checked at the 520px frontispiece and the 78px contents thumbnail. Book
     covers are still never in these selectors. The inline family and ornament
     chips are the exception, handled in templates/marketing-worker.js, where
     they keep the gold because a glyph has no modelling to lose. */
  [data-theme="dark"] .ls-plate-fig img, [data-theme="dark"] .ix-plate img,
  [data-theme="dark"] .rel-fig img, [data-theme="dark"] .cf-illustration img,
  [data-theme="dark"] .cf-side-plate img {
    -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal;
    background: #FCF8EE; filter: brightness(0.56) sepia(0.38) saturate(1.15) contrast(1.04); }
  /* v241 SAFEGUARDING/NIGHT. Until now the crisis furniture answered night mode
     by staying on cream paper and forcing its ink variables back to daylight
     values. It was legible, but it lit up the page, and it did not match the
     worker-rendered panel on handouts and chapter feet, which had gone dark
     and taken the service names down with it. Both now use one palette: a warm
     near-black ground, the tier rules dropped to a whisper, and the service
     name the brightest element in the box, because that is the word a parent is
     looking for at 2am. Every colour the light sheet sets inside this furniture
     is answered here. Do not add one without adding its dark partner. */
  [data-theme="dark"] .cs-box { background: #221E16; border-color: #5A4A22; box-shadow: 0 20px 44px -32px rgba(0,0,0,0.55); }
  [data-theme="dark"] .cs-title { color: #C9A547; }
  [data-theme="dark"] .cs-tier { border-bottom-color: #3A3327; color: #C4BFAF; }
  [data-theme="dark"] .cs-label { color: #F3EFE4; }
  [data-theme="dark"] .cs-resource { color: #B9B3A3; }
  [data-theme="dark"] .cs-resource strong { color: #E8C879; }
  [data-theme="dark"] .cs-resource a { color: #D9B45C; }
  [data-theme="dark"] .ch-crisis-cue { background: #2C1D19; border-color: #7A3A2E; border-left-color: #C4614C; }
  [data-theme="dark"] .ch-crisis-cue .ch-crisis-h { color: #E8A088; }
  [data-theme="dark"] .ch-crisis-cue p { color: #D8D2C4; }
  [data-theme="dark"] .ch-crisis-cue strong { color: #E8A088; }
  /* The disclosure bar had no dark partner at all: a rose slab on a night page. */
  [data-theme="dark"] .crisis-summary { background: #2C1D19; border-color: #7A3A2E; border-left-color: #C4614C; }
  [data-theme="dark"] .crisis-summary:hover { background: #35231E; }
  [data-theme="dark"] .crisis-summary-text { color: #E8A088; }
  [data-theme="dark"] .crisis-summary-mark { background: #C4614C; box-shadow: 0 0 0 4px rgba(196,97,76,0.18); }
  [data-theme="dark"] .crisis-summary-chev { border-right-color: #C4614C; border-bottom-color: #C4614C; }
  [data-theme="dark"] .crisis-summary-cue { color: #98948A; }
  [data-theme="dark"] .crisis-summary:focus-visible { outline-color: #E8A088; }
  [data-theme="dark"] .tn-link--urgent { color: #E08A78; }
  [data-theme="dark"] .tn-link--urgent::before { background: #E08A78; }
  [data-theme="dark"] .cta-navy, [data-theme="dark"] .tn-link--pill { background: var(--gold-deep); color: #191E29; }
  [data-theme="dark"] .cta-navy:hover, [data-theme="dark"] .tn-link--pill:hover { background: var(--gold); color: #191E29; }
  [data-theme="dark"] .book-inside { box-shadow: inset 3px 0 8px -4px rgba(0,0,0,0.6), 1px 3px 14px -4px rgba(0,0,0,0.6); }
  .tn-link--mode { background: none; border: 0; cursor: pointer; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--ink-mute); }
  .tn-link--mode:hover { color: var(--ink-deep); }

  .exit-veil { position: fixed; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); z-index: 9998; }
  .exit-veil.on { opacity: 1; }

  .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink-deep); color: var(--paper-bright); padding: 10px 18px; z-index: 300; font-family: var(--sans); font-size: 0.85rem; }
  .skip-link:focus { left: 12px; top: 12px; }

  .read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--gold); z-index: 9999; opacity: 0; transition: width 0.06s linear, opacity 0.2s var(--ease); pointer-events: none; will-change: width; }
  .read-progress.is-visible { opacity: 1; }

  /* Signature furniture: the double rule of a classic title page */
  .rule-double { border: 0; height: 5px; border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--ink-deep); background: none; }
  .rule-double--gold { border-top-color: var(--gold-deep); border-bottom-color: var(--gold-deep); opacity: 0.85; }

  /* Animated underline for editorial links */
  .u-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%; transition: background-size 0.4s var(--ease-out), color 0.25s var(--ease); padding-bottom: 3px; }
  .u-link:hover { background-size: 100% 1px; }

  /* ============ The page grid: margin label + content ============ */
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 56px; }
  .band { position: relative; }
  .band::before { content: ''; display: block; height: 1px; background: var(--line); }
  .band--rule::before { height: 5px; background: none; border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--ink-deep); }
  .band-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px 72px; padding: 104px 0 118px; align-items: start; }
  .band-grid--tight { padding: 56px 0 60px; }
  .band-label { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-deep); padding-top: 12px; line-height: 2; }
  .band-label em { display: block; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--gold-deep); margin-top: 10px; font-weight: 500; }
  .band-label::before { content: ''; display: block; width: 34px; height: 2px; background: var(--gold); margin-bottom: 16px; }
  @media (max-width: 900px) {
    .wrap { padding: 0 24px; }
    .band-grid { grid-template-columns: 1fr; gap: 22px; padding: 64px 0 72px; }
    .band-label { padding-top: 0; }
  }

  /* Display headline */
  .disp { font-family: var(--serif); font-weight: 600; font-size: clamp(2.7rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--ink-deep); }
  .disp em { font-style: italic; color: var(--gold-display); font-weight: 500; letter-spacing: -0.01em; }
  .disp .dot { color: var(--gold-deep); }
  .disp--hero { font-size: clamp(4rem, 9.5vw, 7.4rem); line-height: 0.94; letter-spacing: -0.028em; }
  .disp--mid { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
  .lede-serif { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2.5vw, 1.62rem); line-height: 1.48; color: var(--ink-soft); max-width: 34ch; }

  /* ============ Masthead ============ */
  .masthead { position: sticky; top: 0; z-index: 100; transition: transform 0.4s var(--ease-out); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); background: rgba(248, 242, 233, 0.93); }
  .masthead.is-tucked { transform: translateY(-102%); }
  .masthead::after { content: ''; display: block; height: 5px; border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--ink-deep); }
  .masthead-inner { max-width: var(--max); margin: 0 auto; padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .brand { display: inline-flex; align-items: center; gap: 14px; }
  .brand-mark { width: 32px; height: 32px; color: var(--gold-deep); flex: none; }
  .brand-stack { display: flex; flex-direction: column; line-height: 1.0; }
  .brand-text { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.014em; color: var(--ink-deep); white-space: nowrap; }
  .brand-text em { font-style: italic; color: var(--gold); font-weight: 500; }
  .brand-sub { font-family: var(--sans); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }
  .top-nav { display: flex; align-items: center; gap: 26px; }
  .tn-link { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; color: var(--ink-soft); background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 2px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 4px; transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease); }
  .tn-link:hover { color: var(--ink-deep); background-size: 100% 2px; }
  .tn-link[aria-current="page"] { color: var(--ink-deep); background-size: 100% 2px; }
  .tn-link--pill { background: var(--ink-deep); color: var(--paper-warm); padding: 10px 24px; border-radius: 999px; font-weight: 600; letter-spacing: 0.05em; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
  .tn-link--pill:hover { background: var(--gold-deep); color: var(--paper-warm); transform: translateY(-1px); background-size: 0; }
  .tn-link--urgent { color: var(--urgent); font-weight: 700; }
  .tn-link--urgent::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--urgent); margin-right: 7px; vertical-align: 2px; }
  /* v3b — Signed-in account control (far right, understated) + dropdown, in the
     register a serious subscription publication uses: a small navy monogram
     disc, the reader's first name, a quiet caret, and a clean menu. Ships
     hidden; auth_js reveals it for signed-in readers and hides Sign in
     (and Subscribe for members). */
  .tn-account { position: relative; display: inline-flex; align-items: center; }
  .tn-account[hidden] { display: none; }
  .tn-account-btn { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-soft); padding: 2px 0; transition: color 0.2s var(--ease); }
  .tn-account-btn:hover { color: var(--ink-deep); }
  .tn-account-avatar { width: 27px; height: 27px; border-radius: 50%; background: var(--ink-deep); color: var(--paper-warm); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 0.92rem; line-height: 1; flex: none; }
  .tn-account-name { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tn-account-caret { font-size: 0.66rem; color: var(--ink-mute); }
  .tn-account-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 194px; background: var(--paper-bright); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 0 0 8px 8px; box-shadow: 0 18px 38px -24px rgba(28,34,46,0.32); padding: 6px 0; z-index: 130; }
  .tn-account-menu[hidden] { display: none; }
  .tn-account-item { display: block; padding: 11px 22px; font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-deep); white-space: nowrap; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
  .tn-account-item:hover { background: var(--paper-warm); color: var(--ink-deep); }
  [data-theme="dark"] .tn-account-avatar { background: var(--gold-deep); color: #191E29; }
  [data-theme="dark"] .tn-account-menu { background: #242B39; border-color: var(--line); }
  [data-theme="dark"] .tn-account-item { color: var(--ink); }
  [data-theme="dark"] .tn-account-item:hover { background: rgba(255,255,255,0.05); }
  /* In the mobile drawer the account control and its menu flow inline as
     full-width rows, matching the stacked nav. */
  @media (max-width: 1200px) {
    .tn-account { width: 100%; flex-direction: column; align-items: flex-start; }
    .tn-account-btn { width: 100%; padding: 6px 0; }
    .tn-account-menu { position: static; min-width: 0; width: 100%; border: 0; border-top: 1px solid var(--line-faint); border-radius: 0; box-shadow: none; padding: 4px 0 0; background: transparent; }
    .tn-account-item { padding: 10px 0 10px 34px; }
  }
  .tn-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
  .nav-toggle { display: none; }
  /* v3b — Collapse the 8-item inline nav to the hamburger drawer at <=1200px.
     At iPad widths (portrait ~810, landscape ~1080/1194) the full inline nav
     cannot sit on one line beside the wordmark, so the flex row shrank items
     and multi-word labels ("The library", "Quick Tips") wrapped to two
     lines. The masthead-inner caps at var(--max)=1200, so the inline nav layout
     is identical for every viewport >=1200 (where it fits); below that we serve
     the clean right-anchored drawer. white-space:nowrap on .tn-link is the
     belt-and-braces guard so a label never breaks mid-word. */
  @media (max-width: 1200px) {
    .masthead-inner { padding: 14px 24px; gap: 12px; position: relative; }
    .top-nav { position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: rgba(253,248,237,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 20px 24px 24px; gap: 18px; display: none; }
    .top-nav.open { display: flex; }
    .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; padding: 8px; min-width: 44px; min-height: 44px; cursor: pointer; }
    .nt-bar { width: 22px; height: 2px; background: var(--ink-deep); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
    .nav-toggle.open .nt-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open .nt-bar:nth-child(2) { opacity: 0; }
    .nav-toggle.open .nt-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }
  /* v166 — Phone masthead. On a real phone the wordmark, the decorative
     tagline and the hamburger fought for the same bar and the tagline wrapped
     to two cramped lines against the toggle. The tagline is decorative here, so
     it is dropped below 600px (the wordmark carries the identity); the wordmark
     and mark are eased down a touch and the padding tightened so the wordmark
     and the hamburger each breathe. iPad keeps the full stacked lockup. */
  @media (max-width: 600px) {
    .brand-sub { display: none; }
    .masthead-inner { padding: 13px 18px; gap: 10px; }
    .brand { gap: 11px; }
    .brand-mark { width: 28px; height: 28px; }
    .brand-text { font-size: 1.34rem; }
    .brand-stack { justify-content: center; }
  }
  /* Ship W, 26 September 2026: on a wide screen the strapline sits under the wordmark in two even lines on every
     page, “Therapist-written / support for parents”. On one line it needs 77px that the full bar’s links do not have
     without crowding them; left to wrap, it broke after “support” on the full bar and not at all on the others. */
  @media (min-width: 1201px) { .brand-sub-line { display: block; } }
  /* Ship U: the variants of the bar (shared.masthead). Quiet on Urgent help and the crisis guides, sent on what a
     school or a therapist sends, focus on sign-in and the step before payment. Each is the full bar's height at every
     width, so the bar does not step from one page to the next. On a wide screen the full bar's strapline wraps under
     its links where a variant's fits on one line, so a variant holds the full bar's height there; below 1200px the
     links go into the drawer and quiet and sent are the full bar's height on their own. The focused bar keeps its one
     link in the bar at every width, so it is held to the full bar's height at each size. */
  .masthead--focus .masthead-inner, .masthead--quiet .masthead-inner, .masthead--sent .masthead-inner { min-height: 83px; }
  @media (max-width: 1200px) {
    .masthead--quiet .masthead-inner, .masthead--sent .masthead-inner { min-height: 0; }
    .masthead--focus .masthead-inner { min-height: 72px; }
  }
  @media (max-width: 600px) {
    .masthead--focus .masthead-inner { min-height: 70px; }
  }

  /* ============ Search: the ledger line ============ */
  .search-band { border-bottom: 1px solid var(--line-soft); }
  .search-inner { max-width: var(--max); margin: 0 auto; padding: 40px 56px 36px; }
  .search-q { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--ink-soft); margin-bottom: 4px; }
  .search-row { display: flex; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--ink-deep); padding-bottom: 10px; }
  /* v231 — min-width:0. A flex item will not shrink below its intrinsic
     width unless told to, so on a 320px phone the input held its default
     20-character width and pushed the Search button off the right edge. */
  .search-row input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink-deep); padding: 8px 0 0; }
  .search-row input::placeholder { color: var(--ink-quiet); }
  .search-row input:focus-visible { outline: none; }
  .search-row:focus-within { border-bottom-color: var(--gold-deep); box-shadow: 0 1px 0 var(--gold-deep); }
  .search-row button { border: 0; background: transparent; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); cursor: pointer; padding: 0 0 2px; transition: color 0.2s var(--ease); }
  .search-row button:hover { color: var(--ink-deep); }
  .search-hint { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); margin-top: 12px; font-weight: 600; }
  /* v184 - the grouped search panel */
  .search-inner { position: relative; }
  .search-panel { position: absolute; left: 0; right: 0; top: calc(100% - 46px); z-index: 40; background: var(--card, #FEFBF3); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 26px 60px -30px rgba(35,41,56,0.4); padding: 10px 0 6px; max-height: 62vh; overflow-y: auto; }
  [data-theme="dark"] .search-panel { background: #202633; box-shadow: 0 26px 60px -24px rgba(0,0,0,0.7); }
  .sp-group { padding: 6px 0 8px; }
  .sp-group + .sp-group { border-top: 1px solid var(--line-soft); }
  .sp-kicker { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); padding: 8px 22px 6px; }
  .sp-item { display: block; padding: 8px 22px; text-decoration: none; }
  .sp-item:hover, .sp-item:focus-visible { background: rgba(199,163,60,0.09); }
  .sp-title { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--ink-deep); line-height: 1.3; }
  .sp-dek { display: block; font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-mute); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-more { display: block; padding: 6px 22px 10px; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; }
  .sp-more:hover { color: var(--ink-deep); }
  .sp-empty { padding: 14px 22px 12px; }
  .sp-empty-line { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 6px; }
  .tonight { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 2; color: var(--ink-mute); }
  .tonight .tn-q { color: var(--gold-deep); background-image: linear-gradient(var(--gold-deep), var(--gold-deep)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease); }
  .tonight .tn-q:hover { color: var(--ink-deep); background-size: 100% 1px; }
  .tonight .tn-sep { color: var(--line); margin: 0 10px; font-style: normal; }
  /* v183 - separators ride with their items so a wrap never orphans a dot */
  .nw { white-space: nowrap; }
  .tonight .tn-q:not(:first-of-type)::before { content: '\00B7'; color: var(--line); margin: 0 10px; font-style: normal; display: inline-block; }
  .tc-item:not(:first-of-type)::before { content: '\00B7'; color: var(--line); margin: 0 10px; font-style: normal; display: inline-block; }
  .ch-toc a:not(:first-of-type)::before { content: '\00B7'; color: var(--line); margin: 0 9px; font-style: normal; display: inline-block; }
  @media (max-width: 900px) { .search-inner { padding: 28px 24px 26px; } }

  /* ============ Continue-reading band ============ */
  .continue-band { border-bottom: 1px solid var(--line-soft); background: var(--paper-warm); }
  .continue-inner { max-width: var(--max); margin: 0 auto; padding: 14px 56px; font-family: var(--serif); font-style: italic; font-size: 1.04rem; color: var(--ink-soft); }
  @media (max-width: 900px) { .continue-inner { padding: 12px 24px; } }

  /* ============ Three small things (quick tips) ============ */
  .tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .tip-card { border-top: 1px solid var(--line); padding-top: 26px; }
  .tip-kicker { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
  .tip-title { font-family: var(--serif); font-weight: 600; font-size: 1.34rem; line-height: 1.2; color: var(--ink-deep); margin-bottom: 8px; }
  .tip-dek { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-mute); line-height: 1.5; margin-bottom: 12px; }
  .tip-body { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); line-height: 1.66; }
  @media (max-width: 860px) { .tip-grid { grid-template-columns: 1fr; gap: 30px; } }

  /* ============ Keep / your shelf ============ */
  .keep-btn { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); background: none; border: 0; border-bottom: 1px solid var(--gold-soft); cursor: pointer; padding: 10px 0 4px; min-height: 32px; margin-top: 2px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
  .keep-btn:hover { color: var(--ink-deep); }
  .keep-btn.is-kept { color: var(--ink-deep); border-color: var(--ink-deep); }
  .keep-btn.is-kept::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: 1px; }

  /* ============ Hero ============ */
  .hero-band { padding: 108px 0 112px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); gap: 80px; align-items: center; }
  @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 64px; } .hero-band { padding: 64px 0 72px; } }
  .hero-kicker { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 30px; display: flex; align-items: center; gap: 16px; }
  .hero-kicker::after { content: ''; flex: 0 0 44px; height: 1px; background: var(--gold); }
  .hero-copy .disp--hero { margin-bottom: 40px; }
  .hero-statement { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.42rem, 2.7vw, 1.85rem); line-height: 1.44; color: var(--ink-soft); max-width: 34ch; margin-bottom: 24px; }
  .hero-sub { font-family: var(--serif); font-size: 1.16rem; line-height: 1.66; color: var(--ink-mute); max-width: 44ch; margin-bottom: 44px; }
  .hero-ctas { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
  .cta-navy { display: inline-block; background: var(--ink-deep); color: var(--paper-warm); font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em; padding: 17px 38px; border-radius: 999px; transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); box-shadow: 0 14px 28px -18px rgba(28,34,46,0.65); }
  .cta-navy:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(112,94,29,0.6); }
  .quiet-link { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-deep); background-image: linear-gradient(var(--gold-deep), var(--gold-deep)); background-size: 100% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 3px; transition: color 0.25s var(--ease); }
  .quiet-link:hover { color: var(--ink-deep); background-image: linear-gradient(var(--ink-deep), var(--ink-deep)); }
  .hero-colophon { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-mute); line-height: 1.7; margin-top: 48px; max-width: 52ch; }
  .hero-colophon .hc-abbr { font-family: var(--sans); font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-deep); }

  /* ============ The book: it opens ============ */
  .book-wrap { position: relative; }
  .book-wrap::after { content: ''; position: absolute; left: 10%; right: 4%; bottom: -30px; height: 34px; background: radial-gradient(ellipse at 50% 0%, rgba(28,34,46,0.32) 0%, transparent 68%); z-index: -1; transition: opacity 0.6s var(--ease-out); }
  /* v231 — --bw is the book's own width. Every measurement inside the covers
     is a fraction of it, so the object scales as one thing at any width. The
     fractions are taken from the 380px desktop book, which is unchanged. */
  .book-scene { --bw: min(380px, 80vw); position: relative; display: block; width: var(--bw); margin: 0 auto; aspect-ratio: 3 / 4.15; perspective: 1800px; outline-offset: 8px; }
  .book-scene, .book-scene * { -webkit-tap-highlight-color: transparent; }

  /* The page block and title page, revealed when the cover opens */
  .book-inside { position: absolute; inset: 2px 0 2px calc(var(--bw) * 0.026); border-radius: 2px 8px 8px 2px; background: #FCF8EE;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    box-shadow: inset 3px 0 8px -4px rgba(90,70,40,0.5), 1px 3px 10px -4px rgba(28,34,46,0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--bw) * 0.142) calc(var(--bw) * 0.079) calc(var(--bw) * 0.095); text-align: center; }
  .book-inside::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: max(4px, calc(var(--bw) * 0.018)); border-radius: 0 8px 8px 0;
    background: repeating-linear-gradient(180deg, #F2EBD9 0 2px, #DCD2B8 2px 3px, #E8E0CC 3px 5px); box-shadow: inset -2px 0 3px rgba(28,34,46,0.25); }
  .book-inside > span, .bo-inner > span { display: block; }
  .tp-title, .tp-rule, .tp-line, .tp-invite, .bo-title, .bo-rule, .bo-line, .bo-pub { display: block; }
  .tp-mark { width: calc(var(--bw) * 0.095); height: calc(var(--bw) * 0.095); color: var(--gold-deep); }
  .tp-title { font-family: var(--serif); font-weight: 600; font-size: calc(var(--bw) * 0.080); line-height: 1.15; color: var(--ink-deep); text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
  .tp-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
  .tp-rule { width: calc(var(--bw) * 0.105); height: 1px; background: var(--gold); margin: calc(var(--bw) * 0.042) auto; }
  .tp-line { font-family: var(--serif); font-style: italic; font-size: calc(var(--bw) * 0.0413); color: var(--ink-mute); line-height: 1.5; max-width: 22ch; margin: 0 auto; }
  .tp-invite { font-family: var(--sans); font-size: calc(var(--bw) * 0.0245); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); }

  /* The cover assembly rotates from the spine */
  .book-cover { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 3% 50%; transition: transform 0.95s var(--ease-out); will-change: transform; }
  .book-scene:hover .book-cover, .book-scene:focus-visible .book-cover { transform: rotateY(-24deg); }
  .book-scene.opening .book-cover { transform: rotateY(-152deg); transition-duration: 1.05s; }
  .book-scene.opening .book-inside { box-shadow: inset 3px 0 8px -4px rgba(90,70,40,0.5), 1px 3px 18px -4px rgba(28,34,46,0.45); }

  /* v3b — Front cover face. backface-visibility:hidden alone is unreliable on
     iPad/WebKit when the element also has overflow:hidden (Safari flattens it
     and paints the back), which was leaking a mirrored gold title onto the
     inside page as the cover opened. translateZ(1px) promotes this to a real
     3D layer (so backface-visibility is honoured) AND lifts the front 1px off
     the centre plane, so its hidden back sits behind the cream endpaper rather
     than coplanar with it. Paired with .book-endpaper translateZ(1px) the
     other way, the two faces can never z-fight. */
  .book-object { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1px);
    box-shadow: inset 4px 0 9px -4px rgba(0,0,0,0.55), inset -3px 0 6px -3px rgba(0,0,0,0.4), 0 36px 70px -30px rgba(28,34,46,0.62), 0 10px 26px -12px rgba(28,34,46,0.45); }
  /* v3b — Inside front cover (the clean cream pastedown revealed when the book
     opens). translateZ(1px) after the 180deg flip lifts it 1px toward the
     viewer in the open state, so it always sits in front of the front face's
     hidden back. A plain warm-cream page (--paper-warm) with a faint gold inner
     rule — a real book's inside cover, never the reversed title artwork. */
  .book-endpaper { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--paper-warm);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    box-shadow: inset 0 0 40px rgba(90,70,40,0.18), 2px 4px 14px -6px rgba(28,34,46,0.4); }
  .book-endpaper::after { content: ''; position: absolute; inset: calc(var(--bw) * 0.042); border: 1px solid rgba(199,163,60,0.35); }
  .book-object svg.bo-cloth { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bo-hinge { position: absolute; top: 0; bottom: 0; left: calc(var(--bw) * 0.037); width: max(2px, calc(var(--bw) * 0.008)); background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(255,255,255,0.06) 60%, rgba(0,0,0,0.35)); }
  .bo-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--bw) * 0.137) calc(var(--bw) * 0.095) calc(var(--bw) * 0.100); text-align: center; }
  .bo-frame { position: absolute; inset: calc(var(--bw) * 0.053) calc(var(--bw) * 0.053) calc(var(--bw) * 0.053) calc(var(--bw) * 0.068); border: 1px solid rgba(199,163,60,0.6); pointer-events: none; }
  .bo-frame::before { content: ''; position: absolute; inset: calc(var(--bw) * -0.018); border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
  .bo-frame::after { content: ''; position: absolute; inset: calc(var(--bw) * 0.013); border: 1px solid rgba(199,163,60,0.3); }
  .bo-corner { position: absolute; width: calc(var(--bw) * 0.032); height: calc(var(--bw) * 0.032); border: 1px solid rgba(199,163,60,0.75); }
  .bo-corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .bo-corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .bo-corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .bo-corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
  .bo-foil { color: transparent; background-image: linear-gradient(115deg, #A88433 0%, #E8CD7E 22%, #C9A547 38%, #8E6E22 52%, #E3C471 70%, #B08A35 88%, #D9BA67 100%); background-size: 220% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; animation: foil-glint 9s var(--ease) infinite; }
  @keyframes foil-glint { 0%, 62% { background-position: 0% 0; } 78% { background-position: 90% 0; } 100% { background-position: 0% 0; } }
  .bo-top { position: relative; z-index: 2; }
  .bo-mark { width: calc(var(--bw) * 0.121); height: calc(var(--bw) * 0.121); margin: calc(var(--bw) * 0.053) auto 0; display: block; color: #C9A547; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); }
  .bo-title { position: relative; z-index: 2; font-family: var(--serif); font-weight: 600; font-size: calc(var(--bw) * 0.113); line-height: 1.1; letter-spacing: 0.01em; }
  .bo-title em { font-style: italic; font-weight: 500; }
  .bo-rule { width: calc(var(--bw) * 0.121); height: 1px; background: rgba(199,163,60,0.65); margin: calc(var(--bw) * 0.053) auto; position: relative; }
  .bo-rule::after { content: ''; position: absolute; top: calc(var(--bw) * -0.005); left: 50%; transform: translateX(-50%); width: max(3px, calc(var(--bw) * 0.0105)); height: max(3px, calc(var(--bw) * 0.0105)); border-radius: 50%; background: rgba(199,163,60,0.8); }
  .bo-line { font-family: var(--serif); font-style: italic; font-size: calc(var(--bw) * 0.043); color: rgba(224,199,124,0.9); line-height: 1.5; max-width: 24ch; margin: 0 auto; }
  /* v231 — 0.28em, not 0.34em. At 0.34 the imprint ran a few pixels past the
     frame at every width and broke as 'KENSINGTON SQUARE THERAPY .' over a
     lone 'LONDON', which is not how an imprint sits on a cover. */
  .bo-pub { position: relative; z-index: 2; font-family: var(--sans); font-size: calc(var(--bw) * 0.0235); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
  @media (prefers-reduced-motion: reduce) {
    .book-cover { transition: none; }
    .book-scene:hover .book-cover, .book-scene.opening .book-cover { transform: none; }
  }
  /* v166 — Phone book. The cover opens leftward from the spine, so at phone
     widths the full -152deg twirl swung the dark cover off the left edge and
     the book was simply too large for the viewport. On phones the book is
     scaled down and both the hover and the open are eased to contained angles,
     so the whole movement, cover and all, stays on screen and reads as an
     intentional, premium open rather than a spill. Light and dark alike. */
  @media (max-width: 600px) {
    .book-scene { --bw: min(236px, 62vw); }
    .book-scene:hover .book-cover, .book-scene:focus-visible .book-cover { transform: rotateY(-15deg); }
    .book-scene.opening .book-cover { transform: rotateY(-96deg); }
    .book-wrap::after { left: 15%; right: 9%; bottom: -20px; height: 24px; }
  }

  /* ============ Manifesto: the navy moment ============ */
  .manifesto { background: var(--paper-dark); color: var(--paper-warm); position: relative; overflow: hidden; }
  .manifesto::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(199,163,60,0.11) 0%, transparent 60%), radial-gradient(ellipse 700px 420px at 95% 110%, rgba(199,163,60,0.07) 0%, transparent 60%); pointer-events: none; }
  .manifesto-inner { max-width: 940px; margin: 0 auto; padding: 140px 56px 132px; text-align: center; position: relative; }
  .manifesto-mark { width: 34px; height: 34px; color: var(--gold); margin: 0 auto 40px; display: block; opacity: 0.9; }
  .manifesto-line { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.28; letter-spacing: -0.012em; color: var(--paper-warm); }
  .manifesto-line strong { color: var(--gold-soft); font-weight: 500; }
  .manifesto-cite { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-top: 44px; }
  /* v179 — the manifesto keeps its navy ground in night mode, so its ink must
     stay warm cream; the dark tokens turn --paper-warm dark, which made the
     quote unreadable (navy on navy). */
  [data-theme="dark"] .manifesto { color: #F3EFE4; }
  [data-theme="dark"] .manifesto-line { color: #F3EFE4; }
  @media (max-width: 700px) { .manifesto-inner { padding: 90px 24px 84px; } }

  /* ============ v179: the house audio player (shared with the member estate) ============ */

  /* ============ Prose in bands ============ */
  .band-body { font-family: var(--serif); font-size: 1.22rem; line-height: 1.72; color: var(--ink-soft); max-width: 58ch; }
  .band-body p { margin-bottom: 22px; }
  .band-body p:last-child { margin-bottom: 0; }
  .band-body strong { color: var(--ink-deep); font-weight: 600; }
  /* A number a parent can tap to call reads as a link: Urgent help's opening paragraph, 24 September 2026. The deep
     gold since Ship Q (25 September), as on the crisis list beneath it: the lighter gold was 2.25:1 on the cream. */
  .band-body a.tel { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
  .band-body a.tel:hover, .band-body a.tel:focus-visible { color: var(--gold-deep); }
  .band-head { margin-bottom: 34px; }
  .band-head .disp { margin-bottom: 20px; }

  /* ============ Chapter index rows ============ */
  .ix { border-top: 2px solid var(--ink-deep); position: relative; }
  .ix::after { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .ix-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 150px 30px; gap: 8px 30px; padding: 32px 0 34px; border-bottom: 1px solid var(--line-soft); align-items: baseline; transition: background 0.25s var(--ease); position: relative; }
  .ix-row:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75) 12%, rgba(255,255,255,0.75) 88%, transparent); }
  .ix-row.is-hidden { display: none; }
  .ix-num { grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--gold); line-height: 1; padding-top: 5px; }
  .ix-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.7vw, 1.85rem); line-height: 1.16; letter-spacing: -0.012em; color: var(--ink-deep); transition: color 0.25s var(--ease); }
  a.ix-title:hover { color: var(--gold-deep); }
  .ix-flag { display: inline-block; font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-warm); background: var(--gold-deep); border-radius: 999px; padding: 4px 12px; margin-left: 16px; vertical-align: 4px; }
  .ix-dek { grid-column: 2; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--ink-mute); max-width: 52ch; margin-top: 2px; }
  .ix-meta { grid-column: 3; grid-row: 1 / span 2; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet); text-align: right; line-height: 2.1; padding-top: 10px; }
  .ix-arrow { grid-column: 4; grid-row: 1 / span 2; font-family: var(--serif); color: var(--gold-deep); font-size: 1.25rem; padding-top: 8px; opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
  .ix-row:hover .ix-arrow { opacity: 1; transform: translateX(4px); }
  @media (max-width: 760px) {
    .ix-row { grid-template-columns: 40px minmax(0,1fr); padding: 26px 0 28px; }
    .ix-num { font-size: 1.15rem; }
    .ix-meta { grid-column: 2; grid-row: auto; text-align: left; padding-top: 4px; line-height: 1.8; }
    .ix-arrow { display: none; }
  }

  /* Library rows carry a plate */
  .ix--plates .ix-row { grid-template-columns: 58px 78px minmax(0, 1fr) 150px 30px; align-items: center; }
  .ix-plate { grid-row: 1 / span 2; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; }
  /* v3b — during an active search the rows are re-ordered by relevance, so the
     baked reading-order numbers would read as out of sequence. Hide them while
     searching; they return when the query is cleared. */
  .ix--plates.is-searching .ix-num { visibility: hidden; }
  /* v3b — Member vs visitor library intro. The static HTML ships the visitor
     (signed-out) lede; the masthead auth script sets [data-member] on <html>
     for a signed-in subscriber, swapping to the member's own-library lede so a
     paying member is oriented to finding, not sold a subscription. */
  .lede-in { display: none; }
  html[data-member] .lede-out { display: none; }
  html[data-member] .lede-in { display: block; }
  .ix-plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 82%);
    mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 82%); }
  .ix--plates .ix-title-cell { align-self: baseline; }
  .ix--plates .ix-dek { grid-column: 3; }
  .ix--plates .ix-meta { grid-column: 4; }
  .ix--plates .ix-arrow { grid-column: 5; }
  @media (max-width: 760px) {
    .ix--plates .ix-row { grid-template-columns: 40px 56px minmax(0,1fr); }
    .ix-plate { width: 56px; height: 56px; }
    .ix--plates .ix-dek, .ix--plates .ix-meta { grid-column: 3; }
  }

  /* ============ Topic flow ============ */
  .topic-flow { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.22rem; line-height: 2.2; color: var(--gold-deep); max-width: 62ch; }
  .tc-item { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 3px; transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease); }
  .tc-item:hover { color: var(--ink-deep); background-size: 100% 1px; }
  .tc-item.is-on { color: var(--ink-deep); background-size: 100% 1px; }
  .tc-item.tc-none { opacity: 0.38; }
  /* v193 -- Urgent help moves out of the menu to its own slim line under the
     masthead, right side (Sam, 29 Aug). One home, every page, every width. */
  .ts-bar--public { display: flex; justify-content: flex-end; align-items: center; max-width: 1180px; margin: 0 auto; padding: 7px 32px; }
  .ts-urgent { font-family: 'Raleway', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7A2A1E; text-decoration: none; white-space: nowrap; }
  .ts-urgent::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7A2A1E; margin-right: 7px; vertical-align: 2px; }
  .ts-urgent:hover { color: #8C3B2E; }
  [data-theme="dark"] .ts-urgent { color: #E08A78; }
  [data-theme="dark"] .ts-urgent::before { background: #E08A78; }
  @media (max-width: 600px) { .ts-bar--public { padding: 6px 18px; } }
  /* v191a -- per-age what-helps switcher + take-this-with-you card */
  .wh-age-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 18px; }
  .wh-age-label { font-family: 'Raleway', sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-right: 6px; }
  .wh-pick { cursor: pointer; background: transparent; border: 1px solid var(--line-soft); border-radius: 999px; font-family: 'Raleway', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); padding: 4px 12px; transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease); }
  .wh-pick:hover { color: var(--ink-deep); border-color: var(--gold); }
  .wh-pick.is-on { background: var(--ink-deep); color: var(--paper); border-color: var(--ink-deep); }
  .tk-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--paper-bright); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 30px auto; max-width: 700px; }
  .tk-cta-text { flex: 1 1 320px; }
  .tk-cta-kicker { font-family: 'Raleway', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px; }
  .tk-cta-body { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
  .tk-cta-btn { flex: 0 0 auto; font-family: 'Raleway', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--paper); background: var(--ink-deep); border-radius: 999px; padding: 11px 20px; text-decoration: none; transition: background 0.2s var(--ease); }
  .tk-cta-btn:hover { background: var(--gold-deep); color: var(--paper); }
  [data-theme="dark"] .tk-cta-btn { color: #191E29; }
  [data-theme="dark"] .wh-pick.is-on { color: #191E29; }
  .tc-sep { color: var(--line); margin: 0 10px; font-style: normal; }
  .tc-count { font-family: var(--sans); font-style: normal; font-size: 0.62rem; font-weight: 600; color: var(--ink-quiet); vertical-align: super; margin-left: 4px; }
  .results-line { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 22px; }
  .tc-clear { display: inline-block; margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-mute); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .tc-clear:hover { color: var(--ink-deep); }

  /* ============ Age chips ============ */
  .age-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
  .af-chip { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 24px; cursor: pointer; transition: all 0.25s var(--ease); }
  .af-chip:hover { border-color: var(--gold-deep); color: var(--ink-deep); }
  .af-chip.is-on { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper-warm); }

  /* ============ Plates gallery ============ */
  .ls-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 36px; }
  .ls-plate { display: flex; flex-direction: column; gap: 12px; text-align: center; transition: transform 0.3s var(--ease-out); }
  .ls-plate:hover { transform: translateY(-4px); }
  .ls-plate-fig { margin: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
  .ls-plate-fig img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, #000 56%, transparent 80%);
    mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, #000 56%, transparent 80%); }
  .ls-plate-caption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--gold-deep); margin: 0; }
  .ls-plate-title { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin: 0; }
  @media (max-width: 1024px) { .ls-plates { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px)  { .ls-plates { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } }

  /* ============ A chapter, in full ============ */
  .chapter-full-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
  @media (max-width: 960px) { .chapter-full-grid { grid-template-columns: 1fr; gap: 40px; } }
  .lead-excerpt { font-family: var(--serif); font-size: 1.26rem; line-height: 1.74; color: var(--ink); max-width: 58ch; margin-bottom: 24px; }
  .lead-excerpt.is-drop::first-letter { float: left; font-size: 4.3em; line-height: 0.78; padding: 6px 14px 0 0; color: var(--gold-deep); font-weight: 600; font-family: var(--serif); }
  .cf-side-plate { text-align: center; padding-top: 20px; }
  .cf-side-plate img { width: 100%; max-width: 280px; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 54%, transparent 78%);
    mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 54%, transparent 78%); }
  .cf-side-caption { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold-deep); margin-top: 6px; }

  /* ============ Listening and watching ============ */
  .audio-card { border-top: 2px solid var(--ink-deep); position: relative; padding: 30px 0 34px; margin-bottom: 44px; }
  .audio-card::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .audio-kicker { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
  .audio-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.2; margin-bottom: 8px; }
  .audio-line { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-mute); margin-bottom: 22px; max-width: 50ch; }
  .audio-card audio { width: 100%; max-width: 560px; display: block; }
  .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; border-top: 1px solid var(--line); }
  .media-card { border-bottom: 1px solid var(--line-faint); padding: 24px 4px 26px; display: block; transition: background 0.25s var(--ease); }
  .media-card:hover { background: rgba(255,255,255,0.65); }
  .media-kicker { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 10px; }
  .media-card--podcast .media-kicker { color: var(--gold-deep); }
  .media-card--film .media-kicker { color: var(--plum); }
  .media-title { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; line-height: 1.2; color: var(--ink-deep); margin-bottom: 6px; transition: color 0.25s var(--ease); }
  .media-card:hover .media-title { color: var(--gold-deep); }
  .media-source { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-mute); line-height: 1.5; }
  .media-gloss { font-family: var(--serif); font-style: italic; font-size: 0.99rem; color: var(--ink-soft); line-height: 1.55; margin-top: 8px; max-width: 46ch; }
  @media (max-width: 700px) { .media-grid { grid-template-columns: 1fr; } }

  /* ============ The aside callout ============ */
  .aside-callout { border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--line); padding: 40px 0 44px; max-width: 660px; position: relative; }
  .aside-callout::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .ac-eyebrow { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
  .ac-eyebrow svg { width: 18px; height: 18px; }
  .ac-h { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.24; margin-bottom: 18px; letter-spacing: -0.012em; }
  .ac-body { font-family: var(--serif); font-size: 1.16rem; line-height: 1.7; color: var(--ink-soft); }
  .ac-body a { color: var(--gold-deep); background-image: linear-gradient(var(--gold-deep), var(--gold-deep)); background-size: 100% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; }
  .ac-body a:hover { color: var(--ink-deep); }

  /* ============ Subscription ============ */
  .sub-statement { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.12; letter-spacing: -0.018em; margin-bottom: 34px; max-width: 22ch; }
  .sub-statement em { font-style: italic; color: var(--gold-display); font-weight: 500; }
  .sub-price { font-family: var(--serif); font-weight: 500; font-size: clamp(3.6rem, 7vw, 5.2rem); line-height: 1; color: var(--ink-deep); letter-spacing: -0.02em; }
  .sub-price .sb-per { font-size: 0.32em; font-style: italic; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; margin-left: 6px; }
  .sub-price-rule { width: 64px; height: 1px; background: var(--gold); margin: 30px 0; }
  .sub-terms { font-family: var(--serif); font-size: 1.18rem; line-height: 1.7; color: var(--ink-soft); max-width: 50ch; margin-bottom: 40px; }
  .sub-defence { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-mute); margin-top: 28px; }

  /* ============ Crisis standing block ============ */
  .crisis-standing { padding: 40px 0 88px; }
  .cs-box { background: #FCF7E8; border: 1px solid #D9C68A; border-radius: 3px; padding: 34px 40px 26px; max-width: 880px; margin: 0 auto; box-shadow: 0 20px 44px -32px rgba(112,94,29,0.35); }
  .cs-title { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--urgent); margin-bottom: 18px; }
  .cs-tier { padding: 12px 0; border-bottom: 1px dashed #D9C68A; font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: var(--ink-deep); }
  .cs-tier:last-child { border-bottom: 0; padding-bottom: 6px; }
  .cs-label { display: block; color: var(--ink); margin-bottom: 3px; }
  .cs-resource { color: var(--ink-soft); }
  .cs-resource, .cs-label, .tk-crisis-line { font-variant-numeric: lining-nums; }
  .cs-resource strong { color: var(--ink-deep); font-weight: 600; }
  /* Ship Q, 25 September 2026: a number on the list can be tapped to call, and is underlined so that it reads as
     something to press whatever a reader can see of colour. The deep gold, which holds at least 3:1 against the cream
     where the lighter gold does not, and is the light gold again by night; Urgent help's opening marks its numbers the
     same way. Plain on paper (see the print rules). */
  .cs-resource a.tel { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .cs-resource a.tel:hover, .cs-resource a.tel:focus-visible { color: var(--gold-deep); }
  @media (max-width: 700px) { .cs-box { padding: 26px 22px 20px; } }
  /* v3c — Crisis help collapsed by default into an always-visible disclosure.
     The full seven-tier standing block (999 -> Samaritans, verbatim from
     signposts.json) sits inside; a parent opens it in one tap. Native <details>
     is keyboard-operable and screen-reader friendly and works with JavaScript
     off (the summary is a real button; the help is one activation away). The
     nav "Urgent help" link and any #crisis hash both auto-open it. */
  .crisis-disclosure { max-width: 880px; margin: 44px auto 80px; scroll-margin-top: 104px; }
  .crisis-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 24px; background: var(--urgent-bg); border: 1px solid #D9BFB4; border-left: 4px solid var(--urgent); border-radius: 5px; transition: background 0.2s var(--ease); }
  .crisis-summary::-webkit-details-marker { display: none; }
  .crisis-summary::marker { content: ""; }
  .crisis-summary:hover { background: #E8CFC1; }
  .crisis-summary:focus-visible { outline: 2px solid var(--urgent); outline-offset: 3px; }
  .crisis-summary-mark { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 4px rgba(122,42,30,0.14); }
  .crisis-summary-text { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--urgent); }
  .crisis-summary-cue { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-mute); margin-left: auto; }
  .crisis-summary-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--urgent); border-bottom: 2px solid var(--urgent); transform: rotate(45deg); transition: transform 0.25s var(--ease); }
  .crisis-disclosure[open] .crisis-summary { border-radius: 5px 5px 0 0; }
  .crisis-disclosure[open] .crisis-summary-chev { transform: rotate(-135deg); }
  .crisis-panel { animation: crisisReveal 0.3s var(--ease-out); }
  @keyframes crisisReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  /* The summary IS the block title, so drop the duplicate heading and the box's
     own big vertical padding inside the disclosure. The seven tiers are
     untouched; the hidden title stays in the DOM. */
  .crisis-disclosure .crisis-standing { padding: 0; }
  .crisis-disclosure .cs-title { display: none; }
  .crisis-disclosure .cs-box { border-radius: 0 0 5px 5px; border-top: 0; }
  @media (max-width: 560px) { .crisis-summary-cue { display: none; } }
  @media (prefers-reduced-motion: reduce) { .crisis-panel { animation: none; } .crisis-summary-chev, .crisis-summary { transition: none; } }

  /* ============ Footer ============ */
  footer.site-foot { background: var(--paper-dark); color: rgba(248,248,245,0.82); position: relative; }
  footer.site-foot::before { content: ''; display: block; height: 5px; border-top: 2px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }
  .footer-grid { max-width: var(--max); margin: 0 auto; padding: 84px 56px 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 52px; }
  .footer-brand { display: flex; gap: 15px; align-items: flex-start; }
  .fb-mark { width: 34px; height: 34px; color: var(--gold); flex: none; }
  .fb-text { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.25; color: #F8F2E9; }
  .fb-text em { color: #E0C77C; font-size: 0.92rem; display: block; margin-top: 6px; font-weight: 400; }
  footer.site-foot a:focus-visible { outline-color: #E0C77C; }
  .fb-meta { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.65; color: rgba(248,248,245,0.6); margin-top: 16px; max-width: 30ch; }
  /* Ship U: the footer's three headings are h2, not h4, so the page's outline does not jump two levels at its foot (Lighthouse heading order). They look as they did. */
  .footer-col h2 { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 700; line-height: 1.65; }
  .footer-col ul { list-style: none; }
  .footer-col li { font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; padding: 5px 0; }
  .footer-col a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease); }
  .footer-col a:hover { color: var(--paper-warm); background-size: 100% 1px; }
  .footer-cred { padding-top: 10px; color: rgba(248,248,245,0.62); font-family: var(--sans); font-size: 0.8rem; line-height: 1.6; }
  .footer-cred .fc-abbr { color: var(--gold); }
  .footer-colophon { max-width: var(--max); margin: 0 auto; padding: 34px 56px; border-top: 1px solid rgba(248,248,245,0.12); display: grid; grid-template-columns: 190px 1fr; gap: 72px; }
  .footer-colophon .fc-label { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 700; padding-top: 5px; }
  .footer-colophon p { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.7; color: rgba(248,248,245,0.6); max-width: 60ch; }
  .footer-colophon p em { color: #E0C77C; }
  .footer-bottom { max-width: var(--max); margin: 0 auto; padding: 24px 56px 34px; border-top: 1px solid rgba(248,248,245,0.12); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(248,248,245,0.55); }
  @media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; padding: 60px 24px 40px; } .footer-colophon { grid-template-columns: 1fr; gap: 12px; padding: 28px 24px; } .footer-bottom { padding: 22px 24px 30px; } }
  @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

  /* ============ Reader ============ */
  .ch-frontispiece { max-width: 780px; margin: 84px auto 28px; padding: 0 24px; text-align: center; }
  .cf-eyebrow { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 20px; }
  .cf-eb-sep { margin: 0 12px; color: var(--gold); }
  .cf-eb-part { white-space: nowrap; }
  /* v231 — the eyebrow is one unbreakable run (no whitespace between the
     spans), so on the narrowest phones it ran off the page rather than
     wrapping. It is set a little tighter there instead, and still fits. */
  @media (max-width: 380px) {
    .cf-eyebrow { font-size: 0.54rem; letter-spacing: 0.22em; }
    .cf-eb-sep { margin: 0 8px; }
  }
  .cf-ornament-top { width: 38px; height: 1px; background: var(--gold); margin: 0 auto 34px; position: relative; }
  .cf-ornament-top span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 9px; color: var(--gold); font-size: 0.95rem; }
  .cf-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.9rem, 6.4vw, 4.6rem); line-height: 1.0; letter-spacing: -0.022em; margin: 0 auto 26px; hyphens: none; }
  .cf-title em { font-style: italic; color: var(--gold-display); font-weight: 500; }
  .cf-dek { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.34rem; line-height: 1.48; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 32px; }
  .cf-byline { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 10px; }
  .cf-read-time { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-mute); margin-bottom: 40px; }
  .ch-toc { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-mute); margin: 0 auto 40px; max-width: 60ch; line-height: 2; }
  .ch-toc-label { font-family: var(--sans); font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); margin-right: 14px; }
  .ch-toc a { white-space: nowrap; color: var(--gold-deep); background-image: linear-gradient(var(--gold-deep), var(--gold-deep)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease); }
  .ch-toc a:hover { color: var(--ink-deep); background-size: 100% 1px; }
  .ch-toc .tc-sep { color: var(--line); margin: 0 9px; }
  .cf-illustration { margin: 0 auto 6px; max-width: 320px; }
  .cf-illustration img { width: 100%; display: block; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 50%, transparent 75%);
    mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 50%, transparent 75%); }

  .prose { max-width: 700px; margin: 0 auto; padding: 30px 24px 48px; }
  .prose p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.76; color: var(--ink); margin: 0 0 28px; hyphens: auto; -webkit-hyphens: auto; }
  .prose p strong { font-weight: 600; color: var(--ink-deep); }
  .prose .dropcap::first-letter { font-family: var(--serif); float: left; font-size: 4.8em; line-height: 0.76; padding: 8px 14px 0 0; color: var(--gold-deep); font-weight: 600; }
  .prose .opener-caps { font-variant: small-caps; letter-spacing: 0.05em; }
  .prose h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.65rem, 3.2vw, 2.1rem); line-height: 1.22; margin: 76px 0 26px; text-align: center; letter-spacing: -0.01em; }
  .prose h2::before { content: '\2766'; display: block; font-style: normal; font-size: 0.9rem; color: var(--gold); margin: 0 auto 20px; }
  .prose .asterism { text-align: center; color: var(--gold); font-size: 1.05rem; letter-spacing: 0.6em; margin: 54px 0; }
  .prose ol, .prose ul { margin: 0 0 28px; padding-left: 0; list-style: none; counter-reset: refs; }
  .prose ol li { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); padding: 12px 0 12px 52px; position: relative; border-top: 1px solid var(--line-faint); counter-increment: refs; }
  .prose ol li::before { content: counter(refs, decimal-leading-zero); position: absolute; left: 4px; top: 14px; font-style: italic; color: var(--gold); font-size: 1.05rem; }
  /* v271 - sources link to the exact page. Quiet in the running text, plain as a link on hover. */
  .prose a.src-link { color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease); }
  .prose a.src-link:hover, .prose a.src-link:focus-visible { color: var(--gold-deep); text-decoration-color: var(--gold); }
  .prose a.src-link::after { content: ' ↗'; font-family: var(--sans); font-size: 0.72em; color: var(--gold-deep); }
  [data-theme="dark"] .prose a.src-link { text-decoration-color: var(--gold-soft); }
  /* Ship T, 26 September 2026: a number in a chapter's prose can be tapped (the organisation a chapter names by token). */
  .prose a.pb-tel { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .prose a.pb-tel:hover, .prose a.pb-tel:focus-visible { color: var(--gold-deep); }
  .prose ul li { font-family: var(--serif); font-size: 1.18rem; line-height: 1.7; color: var(--ink); padding: 8px 0 8px 30px; position: relative; }
  .prose ul li::before { content: ''; position: absolute; left: 6px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .prose blockquote.plain-quote { border-left: 2px solid var(--gold); padding: 6px 0 6px 28px; margin: 0 0 28px; }
  .prose blockquote.plain-quote p { font-style: italic; color: var(--ink-soft); margin-bottom: 14px; }
  .prose blockquote.plain-quote p:last-child { margin-bottom: 0; }

  .ap-pull { margin: 72px 0; padding: 52px 0; border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--line); text-align: center; position: relative; }
  .ap-pull::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .ap-pull blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 2.35rem); line-height: 1.32; color: var(--ink-deep); max-width: 30ch; margin: 0 auto; border: 0; padding: 0; letter-spacing: -0.012em; text-indent: -0.45ch; }
  .ap-pull cite { display: block; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.24em; text-transform: uppercase; font-style: normal; margin-top: 20px; }

  .ch-crisis-cue { background: var(--urgent-bg); border: 1px solid #D9BFB4; border-left: 4px solid var(--urgent); border-radius: 0 6px 6px 0; padding: 26px 30px; margin: 48px 0; }
  .ch-crisis-cue .ch-crisis-h { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.24em; text-transform: uppercase; color: var(--urgent); margin: 0 0 12px; }
  .ch-crisis-cue p { font-family: var(--serif); font-size: 1.14rem; line-height: 1.62; color: var(--ink); margin: 0 0 10px; }
  .ch-crisis-cue p:last-child { margin-bottom: 0; }
  .ch-crisis-cue strong { color: var(--urgent); font-weight: 600; }
  /* 23 September 2026 (D5): a crisis callout that opens a chapter is lifted into the chapter
     head, above the plate and contents, with the focused support block that carries its routes.
     The head already carries the page gutter, so this takes none of its own, and its width is
     the body column's (.prose: 700px less its 24px gutters), so it lines up with the text. */
  .cf-urgent { max-width: 652px; margin: 0 auto 40px; padding: 0; text-align: left; box-sizing: border-box; }
  .cf-urgent .ch-crisis-cue { margin: 0 0 18px; }
  .cf-urgent .pb-fsb { margin: 0; }

  .further-h { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; text-align: center; margin: 0 0 36px; }
  .ext-support { max-width: 700px; margin: 0 auto; padding: 44px 24px 24px; }
  .es-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; border-top: 2px solid var(--ink-deep); position: relative; }
  .es-grid::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .es-card { border-bottom: 1px solid var(--line-faint); padding: 24px 0; }
  .es-name { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: var(--ink-deep); margin-bottom: 5px; }
  .es-what { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-mute); line-height: 1.55; margin-bottom: 10px; }
  .es-line { font-family: var(--sans); font-size: 0.84rem; color: var(--ink-soft); }
  .es-line strong { color: var(--ink-deep); font-weight: 700; }
  .es-line a.tel { text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .es-line a.tel:hover, .es-line a.tel:focus-visible { color: var(--gold-deep); }
  @media (max-width: 620px) { .es-grid { grid-template-columns: 1fr; } }

  .author-bio { max-width: 700px; margin: 48px auto 0; padding: 0 24px; }
  .ab-inner { border-top: 1px solid var(--line); padding-top: 30px; display: flex; gap: 20px; align-items: flex-start; }
  .ab-mark { width: 28px; height: 28px; color: var(--gold-deep); flex: none; margin-top: 5px; }
  .ab-text { font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.68; color: var(--ink-soft); }

  .related { max-width: 1020px; margin: 0 auto; padding: 72px 24px 96px; }
  .rel-head { text-align: center; margin-bottom: 46px; }
  .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
  .rel-card { display: flex; flex-direction: column; gap: 12px; text-align: center; transition: transform 0.3s var(--ease-out); border-top: 1px solid var(--line); padding-top: 36px; }
  .rel-card:hover { transform: translateY(-4px); }
  .rel-fig { margin: 0 auto; width: 150px; }
  .rel-fig img { width: 100%; display: block; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 54%, transparent 78%);
    mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 54%, transparent 78%); }
  .rel-t { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; line-height: 1.18; color: var(--ink-deep); letter-spacing: -0.01em; }
  .rel-card:hover .rel-t { color: var(--gold-deep); }
  .rel-d { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-mute); line-height: 1.5; }
  @media (max-width: 860px) { .rel-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 38px; } }

  /* v166 — Continue-in-the-library dek + the gated shop-window cards. Each
     related card is fully visible (title, dek, read time, plate) but marked
     members-only by a small lock; the closing script un-gates them and drops
     the lock for a signed-in subscriber. */
  .rel-dek { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-mute); margin: 14px 0 0; }
  .rel-kicker { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 0; }
  .rel-lock { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 0; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; opacity: 0.82; transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
  .rel-lock-i { width: 12px; height: 12px; color: var(--gold-deep); flex: none; }
  .rel-card.is-gated:hover .rel-lock { color: var(--gold-deep); opacity: 1; }
  html[data-subscriber] .rel-card .rel-lock { display: none; }

  /* v270 — Put it into practice. The public twin of the subscriber chapter's
     practice block: tips and activities by title (gated), printables free. */
  .prx { max-width: 760px; margin: 0 auto; padding: 44px 24px 12px; }
  .prx .further-h { margin-bottom: 14px; }
  .prx-lede { font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); text-align: center; max-width: 52ch; margin: 0 auto 30px; text-wrap: balance; }
  .prx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
  .prx-col-h { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
  .prx-col-h span { color: var(--ink-mute); font-weight: 600; letter-spacing: 0.14em; }
  .prx-list, .prx-sheets { list-style: none; margin: 0; padding: 0; }
  .prx-list li + li { border-top: 1px solid var(--line-faint); }
  .prx-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; color: inherit; text-decoration: none; }
  .prx-t { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--ink-deep); transition: color 0.2s var(--ease); }
  .prx-d { font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); }
  .prx-m { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-mute); }
  .prx-item:hover .prx-t, .prx-item:focus-visible .prx-t, .prx-sheet:hover .prx-t, .prx-sheet:focus-visible .prx-t { color: var(--gold-deep); }
  .prx-more { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-mute); margin: 8px 0 0; }
  .prx-print { margin-top: 30px; }
  .prx-sheets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }
  .prx-sheet { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none; padding: 10px 0; }
  .prx-sheet-thumb { flex: none; width: 58px; aspect-ratio: 210 / 297; background: #FCFCF9; border: 1px solid var(--line-soft); box-shadow: 0 8px 18px -14px rgba(35,41,56,0.5); overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); }
  .prx-sheet-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .prx-sheet:hover .prx-sheet-thumb, .prx-sheet:focus-visible .prx-sheet-thumb { transform: translateY(-2px); border-color: var(--gold); }
  .prx-sheet-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .prx-sheet .prx-t { font-size: 1rem; }
  .prx-note { display: flex; gap: 8px; align-items: flex-start; font-family: var(--sans); font-size: 0.8rem; line-height: 1.55; color: var(--ink-mute); margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line-faint); }
  .prx-note a { color: var(--gold-deep); border-bottom: 1px solid var(--line); }
  .prx-lock-i { width: 13px; height: 13px; color: var(--gold-deep); flex: none; margin-top: 3px; }
  html[data-subscriber] .prx-note { display: none; }
  /* F7, 24 September 2026 — the two guides on Urgent help. The practice list, a step below its paragraph,
     no wider than it, and with an arrow, so a parent reading on a phone at the worst hour sees links. */
  .urg-guides { margin: 22px 0 0; max-width: 38em; border-top: 1px solid var(--line-soft); }
  .urg-guides .prx-item { padding: 14px 0; }
  .sy-k { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
  .sy-list { margin-top: 14px; }
  .urg-go { color: var(--gold-deep); font-weight: 400; margin-left: 4px; }
  [data-theme="dark"] .prx-sheet-thumb { border-color: var(--line); filter: brightness(0.9); }
  @media (max-width: 720px) {
    .prx-cols { grid-template-columns: 1fr; gap: 22px; }
    .prx-sheets { grid-template-columns: 1fr; gap: 4px; }
  }

  /* v166 — The closing movement: a subscription bridge and a warm share prompt,
     one calm block at the foot of every article. The subscribe bridge hides for
     a signed-in subscriber (data-subscriber); the share prompt stays for all,
     since a chapter is meant to be passed on. */
  .pbc { max-width: 760px; margin: 0 auto; padding: 6px 24px 0; }
  .pbc-sub { text-align: center; border-top: 2px solid var(--ink-deep); position: relative; padding: 46px 0 6px; }
  .pbc-sub::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  html[data-subscriber] .pbc-sub { display: none; }
  [data-theme="dark"] .pbc-sub, [data-theme="dark"] .pbc-sub::before { border-top-color: var(--line); background-color: transparent; }
  [data-theme="dark"] .pbc-sub::before { background: var(--line); }
  .pbc-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin: 0 0 20px; }
  .pbc-eyebrow svg { width: 15px; height: 15px; color: var(--gold-deep); }
  .pbc-h { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.05rem); line-height: 1.16; letter-spacing: -0.015em; color: var(--ink-deep); margin: 0 auto; max-width: 16ch; }
  .pbc-body { font-family: var(--serif); font-size: 1.12rem; line-height: 1.62; color: var(--ink-soft); margin: 18px auto 30px; max-width: 54ch; }
  .pbc-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .pbc-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; font-weight: 600; padding: 14px 28px; border-radius: 2px; transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
  .pbc-btn--primary { background: var(--ink-deep); color: var(--paper); box-shadow: inset 0 -2px 0 var(--gold-deep); }
  .pbc-btn--primary:hover { background: var(--gold-deep); color: #191E29; transform: translateY(-2px); box-shadow: none; }
  .pbc-btn--ghost { border: 1px solid var(--line); color: var(--ink); }
  .pbc-btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); transform: translateY(-2px); }
  [data-theme="dark"] .pbc-btn--primary { background: var(--gold-deep); color: #191E29; box-shadow: none; }
  [data-theme="dark"] .pbc-btn--primary:hover { background: var(--gold); }
  .pbc-share { text-align: center; margin: 40px auto 0; padding: 30px 0 0; border-top: 1px solid var(--line); max-width: 54ch; }
  .pbc-share-h { font-family: var(--serif); font-style: italic; font-size: 1.28rem; color: var(--ink-deep); margin: 0 0 8px; }
  .pbc-share-body { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-mute); line-height: 1.55; margin: 0 auto 20px; }
  .pbc-share-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: none; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.03em; font-weight: 600; color: var(--ink-deep); border: 1px solid var(--line); border-radius: 2px; padding: 12px 22px; transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
  .pbc-share-btn:hover, .pbc-share-btn.is-copied { border-color: var(--gold-deep); color: var(--gold-deep); }
  .pbc-share-i { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
  @media (max-width: 600px) { .pbc-actions { flex-direction: column; } .pbc-btn { width: 100%; } }
  /* Ship X, 26 September 2026: the monthly letter, at the end of every chapter (letter_form in build.py). A subscriber
     has the letters that come with her subscription, so it is not offered to her. Field borders meet 3:1. */
  .pbc-letter { text-align: center; margin: 40px auto 0; padding: 30px 0 0; border-top: 1px solid var(--line); max-width: 54ch; scroll-margin-top: 96px; }
  html[data-subscriber] .pbc-letter { display: none; }
  .pbc-lt { max-width: 30rem; margin: 0 auto; text-align: left; }
  .pbc-lt-label { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-deep); margin: 0 0 8px; }
  .pbc-lt-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .pbc-lt-input { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: 11px 14px; font-family: var(--serif); font-size: 1.08rem; color: var(--ink-deep); background: var(--paper-bright); border: 1px solid #8B8474; border-radius: 2px; }
  [data-theme="dark"] .pbc-lt-input { border-color: #7D8597; }
  .pbc-lt-input::placeholder { font-style: italic; color: var(--ink-mute); }
  .pbc-lt-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,163,60,0.18); }
  .pbc-lt-btn { flex: 0 0 auto; min-height: 48px; cursor: pointer; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.03em; font-weight: 600; color: var(--ink-deep); background: none; border: 1px solid #8B8474; border-radius: 2px; padding: 12px 22px; transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
  .pbc-lt-btn:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
  .pbc-lt-btn:focus-visible, .pbc-lt-input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
  .pbc-lt-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .pbc-lt-small { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--ink-mute); margin: 10px 0 0; text-align: center; }
  .pbc-lt-small a { color: var(--gold-deep); }
  [data-theme="dark"] .pbc-lt-btn { border-color: #7D8597; }
  @media (max-width: 600px) { .pbc-lt-btn { width: 100%; } }

  .band-asterism { text-align: center; color: var(--gold-deep); font-size: 0.9rem; letter-spacing: 0.85em; padding: 52px 0 44px; }

  /* Reveal on scroll, staggered */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
  .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .stagger.is-in > * { opacity: 1; transform: none; }
  .stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
  .stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
  .stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
  .stagger.is-in > *:nth-child(4) { transition-delay: 0.26s; }
  .stagger.is-in > *:nth-child(5) { transition-delay: 0.33s; }
  .stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
  .stagger.is-in > *:nth-child(7) { transition-delay: 0.47s; }
  .stagger.is-in > *:nth-child(8) { transition-delay: 0.54s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
    .read-progress, .cta-navy, .tn-link--pill, .book-object { transition: none; }
    .bo-foil { animation: none; }
  }

  @media print {
    .masthead, .read-progress, .related { display: none; }
    body { background: #fff; font-size: 11pt; }
    .prose p { font-size: 11.5pt; line-height: 1.6; }
    /* Ship E, 24 September 2026: daylight on paper whatever the screen was set to, the crisis list open (it printed
       as "Tap for helplines"), and none of the controls that mean nothing on paper. */
    :root, [data-theme="dark"] { --paper: #FFFFFF; --paper-warm: #F8F2E9; --paper-bright: #FFFFFF; --ink: #232938; --ink-deep: #232938; --ink-soft: #444B5C; --ink-mute: #5F6474; --ink-quiet: #767A85; --line: #D8D2C2; --line-soft: #E6E0CF; --line-faint: #EFEADC; --gold-deep: #705E1D; --gold-soft: #E0C77C; }
    [data-theme="dark"] body { background: #FFFFFF; color: #232938; }
    [data-theme="dark"] img { filter: none !important; }
    .crisis-disclosure .crisis-panel { display: block !important; }
    .crisis-summary-cue, .crisis-summary-chev { display: none !important; }
    .ts-bar, .search-band, .continue-band, .wh-age-bands, .tk-cta, .pbc, .ext-support .aside-callout, .site-foot, .gs, .ch-toc, .keep-btn, .af-chips, .nav-toggle, [data-share-action] { display: none !important; }
    a[href^="tel:"], .cs-resource a.tel, .es-line a.tel, .prose a.pb-tel { color: inherit; text-decoration: none; }
  }

  /* ============ Ledger form (introduce your school) ============ */
  .ledger-form { max-width: 620px; }
  .lf-field { margin-bottom: 34px; }
  .lf-field label { display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); line-height: 1.9; margin-bottom: 2px; }
  /* line-height: 0 keeps the italic aside out of the line box, so a label carrying one
     is exactly as tall as a label without one and the two fields in a row share a baseline. */
  .lf-field label em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-quiet); margin-left: 10px; font-size: 0.92rem; line-height: 0; }
  .lf-field input, .lf-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink-deep); background: transparent; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-deep); padding: 8px 0 10px; border-radius: 0; }
  .lf-field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
  .lf-field input:focus-visible, .lf-field textarea:focus-visible { outline: none; border-bottom-color: var(--gold-deep); }
  .lf-field input::placeholder, .lf-field textarea::placeholder { color: var(--ink-quiet); font-style: italic; }
  /* Two shared rows, labels in the first and fields in the second, so a label that wraps
     moves BOTH inputs rather than dropping one of them half a line. */
  .lf-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 34px; row-gap: 4px; }
  .lf-row > .lf-field { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  @media (max-width: 700px) { .lf-row { grid-template-columns: 1fr; column-gap: 0; row-gap: 4px; } }
  .lf-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 6px; }
  .lf-hint { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--ink-mute); }
  .lf-error { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: #8C3B2E; margin-top: 18px; }
  .lf-confirm { border-left: 2px solid var(--gold); padding: 6px 0 6px 26px; font-family: var(--serif); font-size: 1.18rem; line-height: 1.8; color: var(--ink-soft); }
  .lf-turnstile { margin: 6px 0 26px; min-height: 66px; }
  .hp-field { position: absolute; left: -9999px; top: -9999px; }
  [data-theme="dark"] .lf-field input, [data-theme="dark"] .lf-field textarea { border-bottom-color: var(--line); color: var(--ink-deep); }
  [data-theme="dark"] .lf-error { color: #D98B7C; }

  /* ============ What-helps layer (chapter pages) ============ */
  .wh-short { max-width: 700px; margin: 0 auto; padding: 6px 24px 10px; }
  .wh-short { border: 0; }
  .wh-short .wh-kicker, .wh-close .wh-kicker { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
  .wh-short { position: relative; }
  .wh-short::before { content: ''; display: block; border-top: 2px solid var(--ink-deep); border-bottom: 1px solid var(--ink-deep); height: 5px; margin-bottom: 30px; }
  .wh-h { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.24; color: var(--ink-deep); margin: 0 0 22px; letter-spacing: -0.012em; }
  .wh-h em { font-style: italic; color: var(--gold-deep); }
  .wh-list { list-style: none; margin: 0; padding: 0; }
  .wh-list li { font-family: var(--serif); font-size: 1.12rem; line-height: 1.72; color: var(--ink-soft); padding: 14px 0 14px 26px; position: relative; border-top: 1px solid var(--line-soft); }
  .wh-list li:first-child { border-top: 0; }
  .wh-list li::before { content: ''; position: absolute; left: 0; top: 26px; width: 10px; height: 1px; background: var(--gold); }
  .wh-list li strong { font-weight: 600; color: var(--ink-deep); }
  .wh-readon { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; }
  .wh-readon a { color: var(--gold-deep); }
  .wh-readon a:hover { color: var(--ink-deep); }
  .wh-close { max-width: 700px; margin: 0 auto; padding: 10px 24px 20px; }
  .wh-close .further-h { border-top: 2px solid var(--ink-deep); position: relative; padding-top: 34px; }
  .wh-close .further-h::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 1px; background: var(--ink-deep); }
  .wh-close-intro { font-family: var(--serif); font-style: italic; font-size: 1.14rem; line-height: 1.7; color: var(--ink-mute); text-align: center; max-width: 54ch; margin: -14px auto 26px; }
  .wh-more { margin-top: 26px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.02rem; }
  [data-theme="dark"] .wh-short::before, [data-theme="dark"] .wh-close .further-h { border-top-color: var(--line); }
  [data-theme="dark"] .wh-short::before { border-bottom-color: var(--line); }
  [data-theme="dark"] .wh-close .further-h::before { background: var(--line); }
  @media print { .wh-short, .wh-close { break-inside: avoid; } }

  /* ============ Quietly-answered rows (subscribe page) ============ */
  .qa-rows { max-width: 660px; }
  .qa-row { padding: 26px 0; border-top: 1px solid var(--line-soft); }
  .qa-row:last-child { border-bottom: 1px solid var(--line-soft); }
  .qa-q { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; color: var(--ink-deep); margin-bottom: 10px; letter-spacing: -0.01em; }
  .qa-a { font-family: var(--serif); font-size: 1.12rem; line-height: 1.8; color: var(--ink-soft); max-width: 60ch; }
  .qa-a a { color: var(--gold-deep); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .qa-a a:hover { color: var(--ink-deep); }

  /* ============ Numbered how-it-works rows ============ */
  .how-rows { counter-reset: how; }
  .how-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px 26px; padding: 30px 0; border-top: 1px solid var(--line-soft); }
  .how-row:last-child { border-bottom: 1px solid var(--line-soft); }
  .how-num { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--gold); line-height: 1; padding-top: 4px; }
  .how-title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink-deep); margin-bottom: 8px; }
  .how-body { font-family: var(--serif); font-size: 1.12rem; line-height: 1.85; color: var(--ink-soft); max-width: 60ch; }
  @media (max-width: 700px) { .how-row { grid-template-columns: 44px 1fr; } }
  .how-foot { font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); padding: 26px 0 0; border-top: 1px solid var(--line-soft); }
  .how-foot a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(199,163,60,0.5); }
  .how-foot a:hover { color: var(--ink-deep); border-bottom-color: var(--gold); }

  /* v204 — the logged-out shelf: what a piece is, not what it says. */
  .tip-locked { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line-soft); }
  .tip-locked a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .tip-locked a:hover { color: var(--accent); border-color: var(--accent); }

  /* ============ v203 the free-read invitation ============ */
  .prose.is-walled { position: relative; }
  .prose.is-walled::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, rgba(248,242,233,0) 0%, var(--paper, #F8F2E9) 92%); pointer-events: none; }
  .tpb-wall { max-width: 700px; margin: 4px auto 42px; padding: 30px 34px 28px; background: var(--paper-bright, #FEFBF3); border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: 6px; }
  .tpb-wall-k { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); }
  .tpb-wall-h { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.14; color: var(--ink-deep); margin: 12px 0 14px; }
  .tpb-wall-b { font-family: var(--serif); font-size: 1.1rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px; max-width: 56ch; }
  .tpb-wall-b strong { color: var(--ink-deep); font-weight: 500; }
  .tpb-wall-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 20px 0 14px; }
  .tpb-wall-btn { display: inline-block; font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink-deep); color: #FEFBF3; padding: 15px 26px; border-radius: 3px; text-decoration: none; }
  .tpb-wall-btn:hover { background: var(--gold-deep); }
  .tpb-wall-alt { font-family: var(--serif); font-style: italic; font-size: 1.04rem; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
  .tpb-wall-alt:hover { color: var(--ink-deep); }
  .tpb-wall-note { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-mute); margin: 0; }
  .tpb-wall-note + .tpb-wall-note { margin-top: 8px; }
  .tpb-wall-note a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--line-soft); }

  /* ============ v198 audience fork (schools page) ============ */
  /* Sam: the page has to be readable by two people who want different
     things. The fork sits under the hero and sorts them in three seconds:
     a parent passing the library to her school, and a school deciding
     whether to take it. Two plates, each with its own reason and its own
     way in. */
  /* max-width matches .band-body's 58ch measure, so the pair sits under the prose on the
     same right edge instead of overhanging it. */
  .fork { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; max-width: 35.4rem; }
  @media (max-width: 780px) { .fork { grid-template-columns: 1fr; } }
  .fork-card { display: block; border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: 4px; padding: 22px 22px 20px; background: var(--paper-bright, #FEFBF3); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease; }
  .fork-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(28,34,46,0.4); border-color: var(--gold); }
  .fork-eye { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
  .fork-h { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; line-height: 1.2; color: var(--ink-deep); margin: 10px 0 10px; text-wrap: balance; }
  .fork-b { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
  .fork-go { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
  .fork-card:hover .fork-go { color: var(--accent, #863B26); }

  /* v198 — the parent pass-it-on band. Warmer ground than the school
     bands around it, so a parent reading down the page knows this part is
     addressed to her. */
  .passon { border-left: 3px solid var(--gold); background: var(--paper-warm, #F8F2E9); padding: 28px 30px; border-radius: 4px; }
  .passon .band-body { margin-bottom: 18px; }
  .passon .band-body:last-child { margin-bottom: 0; }

  /* ============ v272 THE HOME PAGE, need-led (24 September 2026) ============
     Sam: parents, teachers and therapists should find exactly what helps, easily. The page
     opens on the parent's question, not the book's name: a search, the subjects parents most
     often start with, and what is free. Every subject follows, grouped the way parents
     describe them, each opening on its free page. Built on the existing grammar (Cormorant,
     Raleway, navy, gold, cream, the etching plates); nothing new in the palette. */
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .home section { position: relative; }
  .sec-head { max-width: 46rem; margin-bottom: 48px; }
  .sec-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
  .sec-head--row > div { max-width: 40rem; }
  .sec-kicker { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .sec-kicker::before { content: ''; flex: 0 0 30px; height: 2px; background: var(--gold); }
  .sec-h { font-family: var(--serif); font-weight: 600; font-size: clamp(2.05rem, 4.2vw, 3.2rem); line-height: 1.06; letter-spacing: -0.018em; color: var(--ink-deep); text-wrap: balance; }
  .sec-h em { font-style: italic; font-weight: 500; color: var(--gold-deep); }
  .sec-lede { font-family: var(--serif); font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); margin-top: 18px; max-width: 40rem; }

  /* The finder */
  .fd { padding: 92px 0 96px; border-bottom: 1px solid var(--line); background:
      radial-gradient(1200px 520px at 12% -10%, rgba(199,163,60,0.10), transparent 62%),
      radial-gradient(900px 480px at 100% 110%, rgba(35,41,56,0.05), transparent 60%); }
  .fd-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr); gap: 72px; align-items: start; }
  .fd-kicker { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
  .fd-kicker::after { content: ''; flex: 0 0 40px; height: 1px; background: var(--gold); }
  .fd-h { font-family: var(--serif); font-weight: 600; font-size: clamp(3.1rem, 7.4vw, 6.1rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink-deep); text-wrap: balance; }
  .fd-h em { font-style: italic; font-weight: 500; color: var(--gold-display); letter-spacing: -0.015em; }
  .fd-lede { font-family: var(--serif); font-size: clamp(1.18rem, 1.8vw, 1.36rem); line-height: 1.62; color: var(--ink-soft); max-width: 38rem; margin: 28px 0 36px; }
  .fd-search { position: relative; display: flex; align-items: center; gap: 0; max-width: 40rem; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 22px 44px -32px rgba(28,34,46,0.55), 0 2px 0 rgba(255,255,255,0.6) inset; transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease); }
  .fd-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(199,163,60,0.18), 0 22px 44px -30px rgba(28,34,46,0.55); }
  .fd-search-icon { position: absolute; left: 22px; width: 20px; height: 20px; fill: none; stroke: var(--ink-mute); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
  .fd-search input { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.24rem; color: var(--ink-deep); background: transparent; border: 0; outline: 0; padding: 19px 12px 19px 56px; }
  .fd-search input::placeholder { color: var(--ink-quiet); font-style: italic; }
  .fd-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .fd-search button { flex: 0 0 auto; margin: 6px; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-warm); background: var(--ink-deep); border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer; transition: background 0.2s var(--ease); }
  .fd-search button:hover, .fd-search button:focus-visible { background: var(--gold-deep); }
  .fd-quick { margin-top: 26px; max-width: 42rem; }
  .fd-quick-label { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink-mute); margin-bottom: 12px; }
  .fd-chips { display: flex; flex-wrap: wrap; gap: 8px 8px; }
  .fd-chip { font-family: var(--sans); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-deep); background: var(--paper-warm); border: 1px solid var(--line-soft); border-radius: 999px; padding: 9px 15px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); }
  .fd-chip:hover, .fd-chip:focus-visible { border-color: var(--gold); background: var(--paper-bright); color: var(--gold-deep); transform: translateY(-1px); }
  .fd-free { background: var(--paper-bright); border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: 6px; padding: 26px 26px 20px; box-shadow: 0 30px 60px -48px rgba(28,34,46,0.6); }
  .fd-free-kicker { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
  .fd-free-item { display: block; padding: 15px 0; border-bottom: 1px solid var(--line-faint); color: inherit; transition: padding 0.2s var(--ease); }
  .fd-free-item:hover, .fd-free-item:focus-visible { padding-left: 6px; }
  .ffi-h { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.22rem; line-height: 1.25; color: var(--ink-deep); }
  .fd-free-item:hover .ffi-h { color: var(--gold-deep); }
  .ffi-h::after { content: ' →'; color: var(--gold); font-weight: 500; }
  .ffi-d { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink-mute); margin-top: 4px; }
  .fd-urgent { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--urgent); }
  .fd-urgent:hover { text-decoration: underline; text-underline-offset: 3px; }
  .fd-urgent-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 4px rgba(122,42,30,0.12); }
  @media (max-width: 980px) { .fd-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .fd { padding: 56px 0 64px; } }
  @media (max-width: 560px) {
    .fd-search input { font-size: 1.08rem; padding: 16px 8px 16px 48px; }
    .fd-search-icon { left: 18px; }
    .fd-search button { padding: 12px 16px; font-size: 0.7rem; }
    .fd-free { padding: 22px 20px 16px; }
  }

  /* Subjects, by area of life. Ship W, 26 September 2026: one line for each group, opening its part of Find help. */
  .la { padding: 104px 0 88px; }
  .la-rows { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-soft); }
  .la-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: inherit; }
  .la-fig { display: block; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; background: #FCF8EE; }
  .la-plate { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
  .la-text { display: block; min-width: 0; }
  .la-title { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--ink-deep); transition: color 0.2s var(--ease); }
  .la-dek { display: block; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--ink-mute); margin-top: 3px; }
  .la-go { font-family: var(--serif); font-size: 1.2rem; color: var(--gold-deep); transition: transform 0.2s var(--ease); }
  .la-row:hover .la-title, .la-row:focus-visible .la-title { color: var(--gold-deep); }
  .la-row:hover .la-go, .la-row:focus-visible .la-go { transform: translateX(3px); }
  @media (min-width: 900px) { .la-rows { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
  .la-safe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; padding: 18px 22px; border: 1px solid var(--line-soft); border-left: 3px solid var(--urgent); border-radius: 4px; background: var(--paper-warm); }
  .la-safe-h { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink-soft); }
  .la-safe-a { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--ink-deep); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
  .la-safe-a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
  .la-safe-a--urgent { color: var(--urgent); }
  @media (max-width: 900px) { .la { padding: 64px 0 56px; } }

  /* Who writes it */
  .who { padding: 96px 0; background: var(--paper-warm); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .who-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .who-body p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.66; color: var(--ink-soft); margin-bottom: 18px; max-width: 38rem; }
  .who-body .who-cred { font-style: italic; font-size: 1.04rem; color: var(--ink-mute); border-left: 2px solid var(--gold); padding-left: 16px; }
  @media (max-width: 900px) { .who-grid { grid-template-columns: 1fr; gap: 24px; } .who { padding: 64px 0; } }

  /* The subscription */
  .sub2 { padding: 104px 0; }
  .sub2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); gap: 64px; align-items: center; }
  .sub2-h { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.018em; color: var(--ink-deep); text-wrap: balance; }
  .sub2-h em { font-style: italic; font-weight: 500; color: var(--gold-deep); }
  .sub2-card { background: var(--ink-deep); color: var(--paper-warm); border-radius: 8px; padding: 34px 34px 30px; box-shadow: 0 40px 80px -56px rgba(28,34,46,0.9); }
  .sub2-price { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--gold-soft); font-variant-numeric: lining-nums; }
  .sub2-price span { font-style: italic; font-size: 1.3rem; color: rgba(248,242,233,0.7); margin-left: 10px; }
  .sub2-terms { font-family: var(--serif); font-size: 1.1rem; line-height: 1.62; color: rgba(248,242,233,0.86); margin: 18px 0 26px; }
  .sub2-card .cta-navy { background: var(--gold); color: #191E29; box-shadow: none; }
  .sub2-card .cta-navy:hover { background: var(--paper-warm); }
  .sub2-note { font-family: var(--serif); font-style: italic; font-size: 1rem; color: rgba(248,242,233,0.7); margin-top: 18px; }
  [data-theme="dark"] .sub2-card { background: #10141C; border: 1px solid var(--line); }
  @media (max-width: 900px) { .sub2-grid { grid-template-columns: 1fr; gap: 28px; } .sub2 { padding: 64px 0; } }

  /* For schools and for therapists: two links after the subscription (Ship W), in place of the three doors. */
  .pro { padding: 8px 0 64px; }
  .pro-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .pro-link { display: block; padding: 22px 24px 20px; border: 1px solid var(--line-soft); border-top: 3px solid var(--gold); border-radius: 8px; background: var(--paper-bright); color: inherit; transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease); }
  .pro-link:hover, .pro-link:focus-visible { border-color: var(--gold); box-shadow: 0 24px 44px -38px rgba(28,34,46,0.55); }
  .pro-k { display: block; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); }
  .pro-h { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.36rem; line-height: 1.2; color: var(--ink-deep); margin: 8px 0 6px; }
  .pro-d { display: block; font-family: var(--serif); font-size: 1.04rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }
  .pro-go { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
  @media (min-width: 900px) { .pro-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

  /* Consultations */
  .consult2 { padding: 72px 0 40px; border-top: 1px solid var(--line); }
  .consult2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .consult2-grid p { font-family: var(--serif); font-size: 1.16rem; line-height: 1.66; color: var(--ink-soft); margin-bottom: 16px; max-width: 38rem; }
  @media (max-width: 900px) { .consult2-grid { grid-template-columns: 1fr; gap: 20px; } }

  /* Night partners for the new surfaces */
  [data-theme="dark"] .fd { background: radial-gradient(1200px 520px at 12% -10%, rgba(199,163,60,0.08), transparent 62%); }
  [data-theme="dark"] .fd-search, [data-theme="dark"] .fd-free, [data-theme="dark"] .pro-link { background: var(--paper-bright); border-color: var(--line); }
  [data-theme="dark"] .pro-link { border-top-color: var(--gold); }
  [data-theme="dark"] .pro-link:hover, [data-theme="dark"] .pro-link:focus-visible { border-color: var(--gold); }
  [data-theme="dark"] .la-rows, [data-theme="dark"] .la-row { border-color: var(--line); }
  [data-theme="dark"] .fd-chip { background: var(--paper-warm); border-color: var(--line); color: var(--ink-deep); }
  [data-theme="dark"] .la-fig { background: #FCF8EE; }
  [data-theme="dark"] .la-plate { mix-blend-mode: normal; filter: brightness(0.56) sepia(0.38) saturate(1.15) contrast(1.04); }
  [data-theme="dark"] .fd-urgent, [data-theme="dark"] .la-safe-a--urgent { color: #E08A78; }
  [data-theme="dark"] .fd-urgent-dot { background: #C4614C; }
  [data-theme="dark"] .la-safe { border-left-color: #C4614C; }
  @media (prefers-reduced-motion: reduce) { .fd-chip, .la-go, .pro-link { transition: none; } .la-row:hover .la-go, .la-row:focus-visible .la-go { transform: none; } }



  /* v272 — one search, from every page. Self-contained: it carries its own variables, so the
     worker's pages (which do not load this sheet) render it exactly as the library pages do.
     build.py hands this string to build.mjs in gs-bundle.json with the markup and the script. */
  .gs, .tn-search { --paper: #FDF8ED; --paper-warm: #F8F2E9; --paper-bright: #FFFFFF; --ink-deep: #232938; --ink-soft: #444B5C;
    --ink-mute: #5F6474; --ink-quiet: #9296A1; --gold: #C7A33C; --gold-deep: #705E1D; --line: #D8D2C2; --line-soft: #E6E0CF;
    --line-faint: #EFEADC; --urgent: #7A2A1E; --urgent-bg: #EFDED5;
    --serif: 'Cormorant Garamond', 'CG Fallback', 'CG Fallback Android', 'Times New Roman', Georgia, serif; --sans: 'Raleway', 'Raleway Fallback', 'Raleway Fallback Android', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
  [data-theme="dark"] .gs, [data-theme="dark"] .tn-search { --paper: #191E29; --paper-warm: #1F2531; --paper-bright: #242B39; --ink-deep: #F3EFE4;
    --ink-soft: #C4BFAF; --ink-mute: #98948A; --ink-quiet: #6E6B64; --line: #3A4152; --line-soft: #333A4A; --line-faint: #2B3242; --gold-deep: #C9A547; }
  .gs .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .gs *, .gs *::before, .gs *::after { box-sizing: border-box; }
  .gs p { margin: 0; }
  /* ============ v272 ONE SEARCH, FROM EVERY PAGE ============ */
  .tn-search { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); background: var(--paper-bright); border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 10px 8px 12px; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); white-space: nowrap; }
  .tn-search:hover, .tn-search:focus-visible { border-color: var(--gold); color: var(--ink-deep); }
  .tn-search-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .tn-kbd, .gs-foot kbd { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; color: var(--ink-mute); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; line-height: 1.5; background: var(--paper); }
  .tn-search--phone { display: none; }
  .tn-search--phone .tn-search-label, .tn-search--phone .tn-kbd { display: none; }
  @media (max-width: 1200px) {
    .top-nav .tn-search { display: none; }
    .tn-search--phone { display: inline-flex; margin-left: auto; padding: 9px; border-radius: 50%; }
    .tn-search--phone .tn-search-ico { width: 18px; height: 18px; }
  }
  html.gs-open { overflow: hidden; }
  .gs { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 20px 20px; }
  .gs[hidden] { display: none; }
  .gs-backdrop { position: absolute; inset: 0; background: rgba(28,34,46,0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: gsFade 0.18s var(--ease-out); }
  .gs-panel { position: relative; width: min(720px, 100%); max-height: min(78vh, 760px); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 40px 90px -40px rgba(28,34,46,0.7), 0 2px 0 rgba(255,255,255,0.5) inset; overflow: hidden; animation: gsRise 0.22s var(--ease-out); }
  @keyframes gsFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gsRise { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
  .gs-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); background: var(--paper-bright); }
  .gs-ico { flex: 0 0 22px; height: 22px; fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; }
  .gs-input { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.36rem; color: var(--ink-deep); background: transparent; border: 0; outline: none; padding: 6px 0; }
  .gs-input::placeholder { color: var(--ink-quiet); font-style: italic; }
  .gs-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .gs-input:focus-visible { outline: none; }
  .gs-close { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
  .gs-close:hover { color: var(--ink-deep); border-color: var(--gold); }
  .gs-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px; }
  .gs-group { padding: 10px 0 4px; }
  .gs-group + .gs-group { border-top: 1px solid var(--line-faint); }
  .gs-kicker { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); padding: 6px 12px 6px; }
  .gs-opt { display: block; padding: 10px 12px; border-radius: 6px; color: inherit; text-decoration: none; scroll-margin: 8px; }
  .gs-opt:hover, .gs-opt.is-active { background: var(--paper-warm); }
  .gs-opt.is-active { box-shadow: inset 3px 0 0 var(--gold); }
  .gs-opt-h { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
  .gs-opt-t { font-family: var(--serif); font-weight: 600; font-size: 1.14rem; line-height: 1.3; color: var(--ink-deep); }
  .gs-opt-d { display: block; font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; color: var(--ink-mute); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gs-badge { flex: 0 0 auto; font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #3F6A4B; border: 1px solid rgba(63,106,75,0.35); border-radius: 999px; padding: 2px 8px; }
  .gs-badge--sub { color: var(--gold-deep); border-color: rgba(112,94,29,0.35); }
  .gs-start, .gs-none { padding: 14px 12px 10px; }
  .gs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
  .gs-chip { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--ink-deep); background: var(--paper-bright); border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 14px; }
  .gs-chip:hover, .gs-chip:focus-visible { border-color: var(--gold); color: var(--gold-deep); }
  .gs-more-row { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
  .gs-more { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); border-bottom: 1px solid var(--line); }
  .gs-more:hover { color: var(--ink-deep); border-bottom-color: var(--gold); }
  .gs-more--urgent { color: var(--urgent); }
  .gs-none-h { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink-deep); }
  .gs-none-d { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-mute); margin: 4px 0 12px; }
  .gs-foot { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--paper-bright); font-family: var(--sans); font-size: 0.72rem; color: var(--ink-mute); }
  @media (max-width: 700px) {
    .gs { padding: 0; }
    .gs-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
    .gs-foot { display: none; }
    .gs-input { font-size: 1.16rem; }
  }
  [data-theme="dark"] .gs-panel { background: var(--paper); border-color: var(--line); }
  [data-theme="dark"] .gs-bar, [data-theme="dark"] .gs-foot { background: var(--paper-bright); }
  [data-theme="dark"] .gs-opt:hover, [data-theme="dark"] .gs-opt.is-active { background: var(--paper-warm); }
  [data-theme="dark"] .gs-badge { color: #9CC2A6; border-color: rgba(156,194,166,0.35); }
  [data-theme="dark"] .gs-more--urgent { color: #E08A78; }
  [data-theme="dark"] .tn-search { background: var(--paper-bright); border-color: var(--line); }
  @media (prefers-reduced-motion: reduce) { .gs-backdrop, .gs-panel { animation: none; } }
  .gs-group--urgent .gs-kicker { color: var(--urgent); }
  .gs-opt--urgent .gs-opt-t { color: var(--urgent); }
  .gs-opt--urgent { background: var(--urgent-bg); }
  .gs-opt--urgent:hover, .gs-opt--urgent.is-active { background: var(--urgent-bg); box-shadow: inset 3px 0 0 var(--urgent); }
  [data-theme="dark"] .gs-opt--urgent { background: #2C1D19; }
  [data-theme="dark"] .gs-opt--urgent .gs-opt-t, [data-theme="dark"] .gs-group--urgent .gs-kicker { color: #E8A088; }