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

    --ink:         #232938;
    --ink-deep:    #1C222E;
    --ink-soft:    #444B5C;
    --ink-mute:    #6B7080;
    --ink-quiet:   #9296A1;

    --gold:        #C7A33C;
    --gold-deep:   #705E1D;
    --gold-soft:   #E0C77C;

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

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

    --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:  'Raleway', 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 { text-wrap: balance; }
  [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:   #6E6B64;
    --line:        #3A4152;
    --line-soft:   #333A4A;
    --line-faint:  #2B3242;
    --gold-deep:   #C9A547;
    --gold-soft:   #8E7A35;
  }
  [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); }
  /* v3c — Night-mode line-art, tinted to the house gold. The illustrations
     carry a baked cream paper field with dark strokes. invert(1) flips that to
     light strokes on a near-black field; brightness(0.49) then drops the field
     toward true black (which mix-blend-mode:screen renders transparent over the
     navy) while leaving the strokes mid-tone enough to take colour; sepia +
     saturate + hue-rotate push the strokes to the brand gold (~#C7A33C), warm
     and premium rather than the stark white/x-ray a plain invert produced, and
     the closing brightness lifts them back to presence. v187 tunes the recipe
     richer and warmer (saturate 2.75 to 3.6, closing brightness 1.34 to 1.18,
     hue-rotate -3 to -4deg, floor 0.52 to 0.49, contrast 1.03 to 1.08):
     strokes now sit near hue 35deg rather than the old pale hue 41deg at 71%
     lightness, and the lower closing brightness stops the inverted paper
     residue lifting above the navy as a ghost rectangle behind each plate.
     Clears AA non-text contrast on #191E29 with margin.
     Line-art ONLY; the photographic book covers are never
     in these selectors, so covers keep their true colour in night mode. */
  [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 {
    filter: invert(1) brightness(0.49) sepia(1) saturate(3.6) hue-rotate(-4deg) brightness(1.18) contrast(1.08); mix-blend-mode: screen; }
  [data-theme="dark"] .cs-box { background: #FCF7E8; }
  [data-theme="dark"] .cs-box, [data-theme="dark"] .cs-tier { --ink: #232938; --ink-deep: #1C222E; --ink-soft: #444B5C; color: #232938; }
  [data-theme="dark"] .ch-crisis-cue { --ink: #232938; --urgent: #7A2A1E; }
  [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); 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; gap: 5px; background: none; border: 0; padding: 8px; 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; }
  }

  /* ============ 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 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: 0 0 2px; margin-top: 8px; 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) ============ */
  .tpb-audio { display: flex; align-items: center; gap: 16px; margin: 26px 0 10px; padding: 16px 18px; background: var(--card, #FEFBF3); border: 1px solid var(--gold-deep, #705E1D); border-radius: 3px; text-align: left; }
  .tpb-audio__el { display: none; }
  .tpb-audio__play { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; color: var(--gold-deep, #705E1D); border: 1px solid var(--gold-deep, #705E1D); border-radius: 50%; font-size: 1rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
  .tpb-audio__play:hover { background: var(--gold-deep, #705E1D); color: var(--paper); }
  .tpb-audio__play:focus-visible { outline: 2px solid var(--gold-deep, #705E1D); outline-offset: 2px; }
  .tpb-audio__icon { line-height: 1; transform: translateX(1px); }
  .tpb-audio.is-playing .tpb-audio__icon { transform: none; }
  .tpb-audio__body { flex: 1 1 auto; min-width: 0; }
  .tpb-audio__row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .tpb-audio__label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep, #705E1D); }
  .tpb-audio__est { font-weight: 500; letter-spacing: 0.08em; }
  .tpb-audio__time { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tpb-audio__seek, .tpb-audio__vol { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 2px; background: var(--line); cursor: pointer; border: 0; padding: 0; }
  .tpb-audio__seek { width: 100%; display: block; background: linear-gradient(to right, var(--gold-deep, #705E1D) 0 var(--pct, 0%), var(--line) var(--pct, 0%) 100%); }
  .tpb-audio__vol { width: 74px; }
  .tpb-audio__seek::-webkit-slider-thumb, .tpb-audio__vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--gold-deep, #705E1D); border: 0; cursor: pointer; }
  .tpb-audio__seek::-moz-range-thumb, .tpb-audio__vol::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--gold-deep, #705E1D); border: 0; cursor: pointer; }
  .tpb-audio__seek:focus-visible, .tpb-audio__vol:focus-visible { outline: 2px solid var(--gold-deep, #705E1D); outline-offset: 4px; }
  .tpb-audio__row2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
  .tpb-audio__vol-wrap { display: inline-flex; align-items: center; gap: 7px; }
  .tpb-audio__vol-ic { color: var(--gold-deep, #705E1D); font-size: 0.85rem; }
  .tpb-audio__dl { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep, #705E1D); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .tpb-audio__dl:hover { color: var(--ink); border-color: var(--ink); }
  [data-theme="dark"] .tpb-audio { background: rgba(255,255,255,0.03); }
  @media (max-width: 560px) { .tpb-audio { flex-direction: column; align-items: stretch; } .tpb-audio__play { width: 48px; height: 48px; } }

  /* ============ 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; }
  .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 0; }
  .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); 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 strong { color: var(--ink-deep); font-weight: 600; }
  @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: var(--paper-warm); }
  .fb-text em { color: var(--gold-soft); font-size: 0.92rem; display: block; margin-top: 6px; font-weight: 400; }
  .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; }
  .footer-col h4 { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 700; }
  .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: var(--gold-soft); }
  .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); 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; }
  .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; }
  .ch-audio { max-width: 560px; margin: 6px auto 0; }
  .ch-audio audio { width: 100%; display: block; }
  .ch-audio-kicker { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; text-align: center; }

  .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-h { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; 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; }

  .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; }
  @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; }

  /* 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%; } }

  .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; }
  }

  /* ============ 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); margin-bottom: 4px; }
  .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; }
  .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; }
  .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
  @media (max-width: 700px) { .lf-row { grid-template-columns: 1fr; gap: 0; } }
  .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); }
  .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; } }

  /* 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 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. */
  .fork { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
  @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: 26px 26px 24px; 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; }
  .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; }