/* wp-volume.css: the /learn/psychotherapy/ volume route stylesheet.

   Created batch 4 lane D under DEC-016(4). PART A and PART B below are the two
   inline <style> blocks that were repeated, byte for byte, in all 13 volume
   pages: 386 + 12,112 bytes on each page, 162,474 bytes of duplicate payload
   across the corpus. They are spliced from the live file bytes, never retyped,
   and are not edited here. Their relative order is preserved, and the <link>
   that replaces them sits at the exact document position they occupied, after
   learn.css, so the effective cascade is unchanged.

   PART C is the Brandcraft v4 layer and is the only authored CSS in this file.
*/
/* ==== PART A: extracted verbatim, first inline block (.pt-back) ==== */

.pt-back {
  position: relative; z-index: 10;
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 11pt; padding: 12px 24px;
  background: #FDFBF7; border-bottom: 1px solid #E8DDD0;
}
.pt-back a { color: #8F4A33; text-decoration: none; font-weight: 500; }
.pt-back a:hover { text-decoration: underline; }
@media print { .pt-back { display: none !important; } }

/* ==== PART B: extracted verbatim, second inline block (design system) ==== */

:root {
  --indigo-deep: #7A3052;
  --indigo: #9E4B72;
  --indigo-mid: #C07898;
  --indigo-light: #D4A0B8;
  --indigo-wash: #F5E0EB;
  --indigo-tint: #FBF0F4;
  --slate: #3A2A35;
  --slate-mid: #5C4A58;
  --slate-light: #9E8A98;
  --copper: #C48B7A;
  --copper-light: #FAE8E0;
  --rust: #A05B6B;
  --rust-light: #FCF0F2;
  --ink: #1A1A2E;
  --text: #2A2A3A;
  --text-mid: #555566;
  --text-light: #8888AA;
  --border: #D0D0DE;
  --border-light: #E4E4EE;
  --clinical-label: #7A3A4A;
  --cream: #FAFAFE;
  --warm: #F5F3F0;
  --white: #FFFFFF;
}


*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important; }
html, body { margin: 0; padding: 0; }

/* @page margin:0 globally - position:fixed bar spans full page height.
   Per-page spacing via box-decoration-break:clone on .content padding. */
@page { size: 210mm 297mm; margin: 0; }

body {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 12.5pt; line-height: 1.7; color: var(--text);
  background: var(--white); text-align: left;
}

/* ── TYPOGRAPHY - larger for readability ── */
h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  page-break-after: avoid; break-after: avoid;
  orphans: 3; widows: 3;
}
h4, h5 { page-break-after: avoid; break-after: avoid; orphans: 3; widows: 3; }
h1 { font-size: 22pt; color: var(--indigo-deep); margin: 0 0 12px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 17pt; color: var(--slate); margin: 24px 0 12px; font-weight: 600; line-height: 1.3;
     padding-bottom: 5px; border-bottom: 1.5px solid var(--indigo-wash); }
h3 { font-size: 13.5pt; color: var(--indigo); margin: 18px 0 8px; font-weight: 600; line-height: 1.3; }
h4 { font-family: 'Switzer'; font-size: 12pt; color: var(--slate); margin: 12px 0 5px; font-weight: 600; }
h5 { font-family: 'Switzer'; font-size: 11pt; color: var(--slate-mid); margin: 10px 0 4px; font-weight: 600; }
p  { margin-bottom: 10px; overflow-wrap: break-word; orphans: 3; widows: 3; }
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
ul, ol { padding-left: 24px; margin: 10px 0 14px; }
li { margin-bottom: 6px; overflow-wrap: break-word; line-height: 1.65; }
sup { font-size: 70%; vertical-align: super; }
hr { border: none; border-top: 1px solid var(--border-light); margin: 16px 0; }
code { font-size: 10.5pt; background: var(--warm); padding: 2px 6px; border-radius: 3px;
       font-family: 'JetBrains Mono', monospace; }

/* ══ COVER ══ full-bleed - vw/vh units always match page size in print */
.cover {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
  page-break-after: always; background: var(--cream);
}
.cover-band {
  position: absolute; left: 0; top: 0; bottom: 0; width: 16mm;
  background: linear-gradient(180deg, var(--indigo-deep), var(--indigo), var(--indigo-mid));
}
.cover-main {
  position: absolute; left: 16mm; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
}
.cover-pinstripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--copper);
}
.cover-body {
  flex: 1; padding: 48px 36px 60px 24px; display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.cover-watermark {
  position: absolute; bottom: 70px; right: 20px;
  font-family: 'Newsreader', serif; font-size: 120pt; font-weight: 700;
  letter-spacing: 10px; z-index: 0; pointer-events: none;
}
.cover-brand { font-family: 'Newsreader', serif; font-size: 26pt; font-weight: 700; color: var(--slate); letter-spacing: 3px; }
.cover-brand-sub { font-family: 'Switzer'; font-size: 8pt; color: var(--slate-mid); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.cover-series { font-family: 'Switzer'; font-size: 9.5pt; text-transform: uppercase; letter-spacing: 3px; color: var(--indigo); font-weight: 600; margin-top: 36px; }
.cover-title { font-family: 'Newsreader', serif; font-size: 34pt; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: 14px; margin-bottom: 14px; }
.cover-subtitle { font-family: 'Newsreader', serif; font-size: 13pt; font-style: italic; color: var(--text-mid); margin-bottom: 18px; }
.cover-topics { font-size: 10.5pt; color: var(--text-mid); line-height: 1.85; border-left: 3px solid var(--indigo-mid); padding-left: 16px; margin-bottom: 32px; }
.cover-author-block { margin-top: auto; padding: 18px 0 28px; border-top: 1px solid var(--border); }
.cover-author-name { font-family: 'Switzer'; font-size: 14pt; font-weight: 600; color: var(--ink); }
.cover-author-cred { font-family: 'Switzer'; font-size: 9.5pt; color: var(--slate-mid); margin-top: 3px; }
.cover-author-email { font-family: 'Switzer'; font-size: 8.5pt; color: var(--text-mid); margin-top: 2px; }
.cover-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 48px; background: var(--indigo-deep);
  display: flex; justify-content: space-between; align-items: center; padding: 0 24px;
  font-family: 'Switzer'; font-size: 8pt; color: var(--white);
}
.cover-footer .cf-web { font-weight: 600; font-size: 9pt; }
.cover-footer .cf-insta { color: rgba(255,255,255,0.7); }

/* ══ TOC ══ full-bleed */
.toc {
  width: 100vw; height: 100vh;
  overflow: hidden; position: relative; page-break-after: always;
  padding: 30mm 22mm 30mm 28mm;
}
.toc::before {
  content: ''; position: absolute; left: 0; top: 0; width: 4mm; height: 297mm;
  background: var(--indigo-deep);
}
.toc h1 { font-size: 28pt; margin-bottom: 32px; color: var(--indigo-deep); }
.toc-item { display: flex; align-items: baseline; padding: 16px 0; border-bottom: 0; /* was 1px dotted; dead under the section-7 stitch override on body.wp-volume, neutralized for the grep gate */ }
.toc-num { font-family: 'JetBrains Mono', monospace; font-size: 18pt; font-weight: 300; color: var(--indigo-light); min-width: 54px; }
.toc-name { font-family: 'Newsreader', serif; font-size: 15pt; font-weight: 600; color: var(--ink); }
.toc-tag { font-size: 10pt; color: var(--text-light); margin-top: 44px; text-align: center; font-style: italic; }

/* ══ CHAPTER DIVIDER ══ full-bleed */
.divider {
  width: 100vw; height: 100vh;
  page-break-after: always; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--indigo-tint) 0%, var(--indigo-wash) 50%, var(--cream) 100%);
}
.div-band { position: absolute; left: 0; top: 0; width: 18mm; height: 100vh; background: var(--indigo-deep); }
.div-body { position: absolute; left: 18mm; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.div-num { font-family: 'JetBrains Mono', monospace; font-size: 72pt; color: var(--indigo-light); font-weight: 300; line-height: 1; }
.div-title { font-family: 'Newsreader', serif; font-size: 28pt; color: var(--indigo-deep); font-weight: 700; margin-top: 12px; }
.div-stripe { width: 60px; height: 3px; background: var(--copper); margin: 20px auto; }
.div-desc { font-family: 'Switzer'; font-size: 11pt; color: var(--text-mid); max-width: 400px; line-height: 1.6; }
.div-foot { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: 'Switzer'; font-size: 8pt; color: var(--text-light); }

/* ══ CONTENT PAGES ══ box-decoration-break:clone repeats padding on EVERY page fragment */
.content {
  padding: 28mm 20mm 28mm 24mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  page-break-after: always;
  position: relative;
}
.content:last-of-type { page-break-after: avoid; }

/* 4mm indigo left bar - fixed, full page height (works because @page margin:0) */
.content::before {
  content: ''; position: fixed; left: 0; top: 0; bottom: 0;
  width: 4mm; background: var(--indigo-deep);
}

/* left-bar div hidden - bar rendered via .content::before */
.left-bar { display: none; }

.pg-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8.5pt; color: var(--slate-mid); letter-spacing: 0.3px;
  padding-bottom: 6px;
}
.pg-head .hd-brand { font-family: 'Newsreader', serif; font-size: 9pt; font-weight: 700; color: var(--slate); letter-spacing: 1px; }
.pg-head .hd-chapter { color: var(--indigo); font-weight: 500; }
.pg-stripe { height: 2px; margin-bottom: 16px; background: linear-gradient(90deg, var(--indigo), var(--indigo-mid), var(--copper), transparent); }

.pg-foot {
  padding-top: 10px; border-top: 1px solid var(--border-light);
  font-size: 8pt; color: var(--text-light); margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.pg-foot .ft-web { color: var(--indigo-deep); font-weight: 600; }
.pg-foot .ft-insta { color: var(--indigo); }

/* ══ TABLES ══ */
table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  font-size: 10.5pt; line-height: 1.45; table-layout: fixed;
  page-break-inside: avoid; break-inside: avoid; overflow: hidden;
}
thead { display: table-header-group; break-inside: avoid; }
th {
  background: var(--slate); color: var(--cream); padding: 9px 12px;
  text-align: left; font-weight: 600; font-size: 10pt;
  overflow-wrap: break-word; word-wrap: break-word;
}
td {
  padding: 8px 12px; border-bottom: 1px solid var(--border-light);
  vertical-align: top; overflow-wrap: break-word; word-wrap: break-word;
}
tr { page-break-inside: avoid; break-inside: avoid; }
tbody tr:nth-child(even) td { background: var(--indigo-tint); }

/* ══ CALLOUT BOXES ══ */
.box {
  margin: 14px 0; padding: 14px 18px; border-radius: 5px;
  page-break-inside: avoid; break-inside: avoid; overflow: hidden;
}
.box .box-label {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5pt; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px;
}
.box p, .box li { font-size: 11pt; line-height: 1.5; }

.box-pearl { background: var(--indigo-wash); border-left: 0; /* was a 3px side-tab; dead under the section-10 body.wp-volume overrides, neutralized with the tab class (design-ban) */ border-radius: 0 5px 5px 0; }
.box-pearl .box-label { color: var(--indigo-deep); }

.box-strategy { background: var(--rust-light); border-left: 0; border-radius: 0 5px 5px 0; }
.box-strategy .box-label { color: var(--rust); }

.box-clinical { background: var(--copper-light); border-left: 0; border-radius: 0 5px 5px 0; }
.box-clinical .box-label { color: var(--clinical-label); }

.box-mnemonic { background: var(--indigo-tint); border: 1.5px solid var(--indigo-mid); }
.box-mnemonic .box-label { color: var(--indigo-deep); }
.box-mnemonic .device { font-family: 'Newsreader', serif; font-size: 13pt; color: var(--ink); font-weight: 600; margin: 5px 0; line-height: 1.35; }

/* ══ BACK PAGE ══ full-bleed */
.back {
  width: 100vw; height: 100vh;
  page-break-before: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--indigo-deep); color: var(--white);
  position: relative; overflow: hidden;
}
.back-line { width: 60px; height: 1px; background: var(--copper); margin: 0 auto; }
.back-brand { font-family: 'Newsreader', serif; font-size: 48pt; font-weight: 700; color: var(--white); letter-spacing: 5px; margin-top: 20px; }
.back-sub { font-family: 'Switzer'; font-size: 10pt; color: var(--indigo-mid); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 8px; }
.back-stripe { width: 60px; height: 1px; background: var(--copper); margin: 28px auto; }
.back-tagline { font-family: 'Newsreader', serif; font-size: 16pt; color: var(--white); font-style: italic; margin-bottom: 32px; }
.back-section { margin: 6px 0; }
.back-label { font-family: 'JetBrains Mono', monospace; font-size: 7pt; text-transform: uppercase; letter-spacing: 2.5px; color: var(--indigo-mid); margin-bottom: 4px; }
.back-value { font-family: 'Switzer'; font-size: 13pt; color: var(--white); line-height: 1.8; }
.back-value.big { font-size: 16pt; font-weight: 600; color: var(--copper); }
.back-value .email { color: var(--copper); font-size: 11pt; }
.back-info { margin-top: 40px; font-family: 'Switzer'; font-size: 11pt; color: var(--indigo-mid); max-width: 400px; line-height: 1.9; }


/* ==== PART C follows ==== */
/* ============================================================================
   PART C: Brandcraft v4 layer (NEW in batch 4, lane D).

   Everything above this marker is the verbatim extraction and is never edited.
   This layer sits after it, so it wins by source order without changing the
   relative order of anything that was already there.

   Ruling map:
     DEC-016(5)  the bespoke book-jacket palette (indigo/slate/copper/rust) is
                 KEPT on .cover and .back. Those two surfaces are a printed
                 jacket and read the same in both themes, deliberately.
     DEC-016(6)  .cover-title is the marker-H1 analog. Rendering only: the
                 wording is untouched, no heading element is introduced, and the
                 treatment is applied entirely from CSS so the 13 volume files
                 keep a two-line-class diff.
     DESIGN-V4   sec 5 legibility floor, sec 6 imperfection grammar (offset
                 solid shadows, no blur glows), sec 7 quiet calibration on the
                 crisis block, sec 9 motion budget (draw once, nothing loops).
     L15 / L16   dark ships with the change; no dark text token reused as a fill.
   ========================================================================= */

/* --- 1. Undo the token collision -------------------------------------------
   The extracted block declares --ink at :root, which is also a tokens.css v4
   token. Consequence before this fix, verified in captures, not theorised:
   in light the sitewide shell drifted to a cold #1A1A2E; in dark tokens.css's
   :root:not([data-theme="light"]) rule (0,2,0) outranked the block's :root
   (0,1,0), so --ink became the LIGHT cream while the book kept a white ground,
   and every strong/b, .toc-name and .cover-title rendered cream-on-white. The
   "CUE for growth" mnemonic in WP-07 lost its three leading letters entirely.

   Restoring the tokens.css declarations verbatim here hands --ink back to the
   theme. The jacket keeps its own ink under a name nothing else can claim. */
:root {
  --ink: #2B2320;
  --wp-ink: #1A1A2E;
  /* The sitewide --marker (#C75B39) measures 4.21:1 on white, which clears the
     accent rule for display sizes but not the 4.5:1 copy floor. Small accent
     text on this route uses a darkened sibling instead of weakening the floor.
     tokens.css is frozen, so --marker itself is left alone. */
  --wp-accent: #B94E2E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme="light"]) { --wp-accent: #E08A6B; }
}
[data-theme="dark"] { --wp-accent: #E08A6B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme="light"]) { --ink: #EFE9E1; }
}
[data-theme="dark"] { --ink: #EFE9E1; }

/* --- 2. Reading-surface palette, theme-aware -------------------------------
   New names only, so nothing here can be captured by tokens.css or capture it.
   The jacket variables (--indigo*, --slate, --copper, --rust, --cream) are left
   exactly as extracted: .cover and .back still consume them untouched. */
:root {
  --wp-page: #FFFFFF;
  --wp-body: #2A2A3A;
  --wp-muted: #555566;
  --wp-faint: #6E6157;
  --wp-rule: #E2DACF;
  --wp-rule-firm: #C9BFB1;
  --wp-chapter: #7A3052;
  --wp-section: #2B2320;
  --wp-sub: #8F3A5E;
  --wp-pearl-bg: #F7E9F0;
  --wp-pearl-edge: #93446A;
  --wp-strategy-bg: #FBEFF1;
  --wp-strategy-edge: #985363;
  --wp-clinical-bg: #FAEBE3;
  --wp-clinical-edge: #98492F;
  --wp-mnemonic-bg: #FCF4F7;
  --wp-mnemonic-edge: #9C5476;
  --wp-th-bg: #2B2320;
  --wp-th-ink: #FFFFFF;
  --wp-zebra: #FAF6F2;
  --wp-code-bg: #F3EFE8;
  --wp-spine: linear-gradient(180deg, #7A3052, #9E4B72 55%, #C48B7A);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme="light"]) {
    --wp-page: #141210;
    --wp-body: #E4DDD4;
    --wp-muted: #C4BAAE;
    --wp-faint: #998F84;
    --wp-rule: #35302A;
    --wp-rule-firm: #48413A;
    --wp-chapter: #E9AEC6;
    --wp-section: #EFE9E1;
    --wp-sub: #DFA0BC;
    --wp-pearl-bg: #241A20;
    --wp-pearl-edge: #C07898;
    --wp-strategy-bg: #241A1D;
    --wp-strategy-edge: #C98A99;
    --wp-clinical-bg: #241C18;
    --wp-clinical-edge: #D6A08C;
    --wp-mnemonic-bg: #1F1A1E;
    --wp-mnemonic-edge: #A9738D;
    --wp-th-bg: #2A2521;
    --wp-th-ink: #EFE9E1;
    --wp-zebra: #1A1714;
    --wp-code-bg: #1D1A17;
  }
}
[data-theme="dark"] {
  --wp-page: #141210;
  --wp-body: #E4DDD4;
  --wp-muted: #C4BAAE;
  --wp-faint: #998F84;
  --wp-rule: #35302A;
  --wp-rule-firm: #48413A;
  --wp-chapter: #E9AEC6;
  --wp-section: #EFE9E1;
  --wp-sub: #DFA0BC;
  --wp-pearl-bg: #241A20;
  --wp-pearl-edge: #C07898;
  --wp-strategy-bg: #241A1D;
  --wp-strategy-edge: #C98A99;
  --wp-clinical-bg: #241C18;
  --wp-clinical-edge: #D6A08C;
  --wp-mnemonic-bg: #1F1A1E;
  --wp-mnemonic-edge: #A9738D;
  --wp-th-bg: #2A2521;
  --wp-th-ink: #EFE9E1;
  --wp-zebra: #1A1714;
  --wp-code-bg: #1D1A17;
}

/* --- 3. The page ground ----------------------------------------------------
   The extracted block pins body to var(--white), which is a literal #FFFFFF and
   therefore never followed the theme. The reading surface now does. */
body.wp-volume { background: var(--wp-page); color: var(--wp-body); }

/* --- 4. Shell containment --------------------------------------------------
   The extracted block sets bare-element type rules (h1..h5, p, ul, li, table).
   Those leak into the sitewide header, footer and crisis partial, which are
   shell components tokens.css already owns. Verified leak: every footer column
   heading on a volume page carried a 1.5px indigo rule under it that the same
   footer does not have on the hub.

   Deliberately NARROW. A first attempt reset font, size, colour and weight to
   inherit on shell headings, which was wrong: those selectors (0,2,3) outrank
   tokens.css's own .crisis-block__title (0,1,0), so the crisis heading lost its
   terracotta serif and flattened to 16.67px body text. Caught by the gate on
   the hub-versus-volume comparison, not by reading the CSS.

   tokens.css already wins every property it actually declares, so the leak is
   exactly the set it does NOT declare on these elements. Measurement, twice
   corrected, put that set at: the h2 bottom rule everywhere, plus colour in the
   footer only. Narrowing to the bottom rule alone had left the five footer
   column headings at var(--slate) on the dark ground, 1.39:1, all but
   invisible. The crisis heading's colour is tokens.css's own and is not touched
   here, which is what the first attempt got wrong. */
body.wp-volume .site-header h1, body.wp-volume .site-header h2,
body.wp-volume .site-header h3, body.wp-volume .site-footer h1,
body.wp-volume .site-footer h2, body.wp-volume .site-footer h3,
body.wp-volume .crisis-block h1, body.wp-volume .crisis-block h2,
body.wp-volume .crisis-block h3 {
  padding-bottom: 0; border-bottom: 0;
}
body.wp-volume .site-footer h1, body.wp-volume .site-footer h2,
body.wp-volume .site-footer h3 { color: inherit; }

/* --- 5. Breadcrumb ---------------------------------------------------------
   Ink-only text on the page's own paper, no chip. consent.html's precedent for
   a bare wordmark link with nothing to stamp. */
body.wp-volume .pt-back {
  font-family: var(--font-ui); font-size: 0.9375rem;
  background: var(--wp-page); color: var(--wp-faint);
  border-bottom: 1px solid var(--wp-rule);
  padding: var(--space-3) var(--space-6);
}
body.wp-volume .pt-back a { color: var(--wp-accent); font-weight: 600; }

/* --- 6. The jacket: cover and back ----------------------------------------
   DEC-016(5). Palette untouched in both themes. The only additions are the
   marker-H1 analog and an offset-solid edge so the jacket reads as a printed
   object sitting ON the page rather than a browser-coloured band. */
body.wp-volume .cover { box-shadow: inset 0 -1px 0 var(--wp-rule); }

/* .cover-title, the marker-H1 analog (DEC-016(6)).
   The product's H1 signature is the scribble underline; the jacket's signature
   is Newsreader in the book's own ink. Both are honoured: the face and the
   colour stay as the jacket set them, and the scribble arrives underneath in
   the jacket's copper. Drawn from CSS only, so no element is added and the
   title's text is byte-identical to what shipped. */
/* fit-content, not inline-block: .cover-title is a flex item in a column, so it
   is blockified and stretched to the cross axis. Left as inline-block the
   scribble ran the full width of the cover instead of the width of the title. */
body.wp-volume .cover-title {
  position: relative; color: var(--wp-ink);
  width: fit-content; max-width: 100%; align-self: flex-start;
}
body.wp-volume .cover-title::after {
  content: ""; position: absolute; left: -1.5%; right: -1.5%; bottom: -0.14em;
  height: 0.19em; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3,7 C48,3 96,10 147,6 C198,2 246,9 297,5' fill='none' stroke='%23C48B7A' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M6,9.4 C54,6.2 104,11.6 152,8.4 C202,5.2 250,10.8 294,7.6' fill='none' stroke='%23C48B7A' stroke-width='2.2' stroke-linecap='round' opacity='0.62'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  body.wp-volume .cover-title::after {
    clip-path: inset(0 100% 0 0);
    animation: wp-scribble 750ms var(--ease-weave) 350ms forwards;
  }
  @keyframes wp-scribble { to { clip-path: inset(0 0 0 0); } }
}
body.wp-volume .cover-author-name { color: var(--wp-ink); }
body.wp-volume .back-brand, body.wp-volume .back-tagline { color: #FFFFFF; }

/* Colophon contrast. Keeping the jacket palette does not buy an exemption from
   the 4.5:1 floor, and the shipped colophon was well under it: the label tint
   measured 2.69:1 on the deep indigo ground and the large value 3.09:1. These
   are the same hues lifted until they pass (5.4:1 and 6.5:1), so the jacket
   reads as it did while the text is actually readable. */
body.wp-volume .back-sub, body.wp-volume .back-label { color: #E6C0D2; }
body.wp-volume .back-value.big, body.wp-volume .back-value .email { color: #F0D8C8; }
body.wp-volume .back-info { color: #E6C0D2; }

/* --- 7. Contents -----------------------------------------------------------
   LAW-9 register: serif, restrained, zero rotation. The row separator was a
   1px dotted border; it becomes the painted stitch this product uses instead
   (DEC-013's med-faq idiom, which is also why no dashed or dotted rule is
   introduced anywhere in this layer). */
body.wp-volume .toc h1 { color: var(--wp-chapter); transform: none; }
body.wp-volume .toc-item {
  border-bottom: 0; position: relative;
  padding-block: var(--space-4);
}
body.wp-volume .toc-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--wp-rule-firm) 0 9px, transparent 9px 16px);
  opacity: 0.85;
}
body.wp-volume .toc-num { color: var(--wp-accent); font-family: var(--font-data); }
body.wp-volume .toc-name { color: var(--wp-section); }
body.wp-volume .toc-tag { color: var(--wp-faint); }

/* --- 8. Chapter openers ----------------------------------------------------
   Not jacket surfaces, so v4 paper. The stock rotates down the book so a long
   volume does not read as the same page repeated; informational content sits
   at 0deg throughout, per the floor law. */
body.wp-volume .divider { background: var(--paper-butter); }
body.wp-volume .divider:nth-of-type(3n+2) { background: var(--paper-sky); }
body.wp-volume .divider:nth-of-type(3n) { background: var(--paper-green); }
body.wp-volume .div-band { background: var(--ink); opacity: 0.14; }
body.wp-volume .div-num { color: var(--ink); font-family: var(--font-data); opacity: 0.55; }
body.wp-volume .div-title { color: var(--ink); transform: none; }
body.wp-volume .div-stripe { width: 74px; height: 3px; background: var(--marker); border-radius: 2px; }
body.wp-volume .div-desc, body.wp-volume .div-foot { color: var(--ink); }
body.wp-volume .div-foot { opacity: 0.72; }

/* --- 9. Reading body -------------------------------------------------------
   Dense exam material read chapter after chapter. Serif running text, no
   rotation, no annotations, strictest floor. */
body.wp-volume .content::before { background: var(--wp-spine); }
body.wp-volume .content h1 { color: var(--wp-chapter); transform: none; }
body.wp-volume .content h2 {
  color: var(--wp-section); border-bottom: 0; padding-bottom: 0;
  position: relative; padding-top: var(--space-3);
}
body.wp-volume .content h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 62px; height: 3px;
  border-radius: 2px; background: var(--thread-run);
}
body.wp-volume .content h3 { color: var(--wp-sub); }
body.wp-volume .content h4 { color: var(--wp-section); }
body.wp-volume .content h5 { color: var(--wp-muted); }
body.wp-volume .pg-head { color: var(--wp-faint); border-bottom: 1px solid var(--wp-rule); }
body.wp-volume .pg-head .hd-brand { color: var(--wp-section); }
body.wp-volume .pg-head .hd-chapter { color: var(--wp-accent); }
body.wp-volume .pg-stripe { background: var(--thread-run); opacity: 0.55; }
body.wp-volume .pg-foot { color: var(--wp-faint); border-top: 1px solid var(--wp-rule); }
body.wp-volume .pg-foot .ft-web { color: var(--wp-accent); }
body.wp-volume .pg-foot .ft-insta { color: var(--wp-faint); }
body.wp-volume .content hr { border-top: 1px solid var(--wp-rule); }
body.wp-volume .content code { background: var(--wp-code-bg); color: var(--ink); }
body.wp-volume .content a { color: var(--wp-accent); }
/* 112 in-chapter contents links across the corpus carry a hardcoded
   style="color:var(--indigo)" attribute. Inline styles outrank every selector,
   and that colour measures 3.40:1 on the dark ground. Since the 13 files are
   held to a two-line-class diff, the override happens here. This is the only
   !important in this layer and it exists to beat an inline attribute, which is
   the one thing specificity cannot reach. */
body.wp-volume .content a[style] { color: var(--wp-accent) !important; }

/* Tables: the honest artifact. Tabular lining numerals, flat rules, no glow. */
body.wp-volume .content th { background: var(--wp-th-bg); color: var(--wp-th-ink); }
/* A <strong> inside a header cell inherited strong{color:var(--ink)} from the
   extracted block and landed ink-on-ink: 1.00:1, literally invisible, caught by
   the gate on WP-06. Header cells carry their own ink. */
body.wp-volume .content th strong, body.wp-volume .content th b { color: var(--wp-th-ink); }
body.wp-volume .content td { border-bottom: 1px solid var(--wp-rule); }
body.wp-volume .content tbody tr:nth-child(even) td { background: var(--wp-zebra); }
body.wp-volume .content table { font-variant-numeric: tabular-nums lining-nums; }

/* --- 10. Callout boxes -----------------------------------------------------
   The left-border-plus-tint structure already scans well for someone cramming,
   so it stays. The label becomes a small stamp; the box gains the offset solid
   shadow the grammar asks for, never a blur glow. Zero rotation. */
body.wp-volume .box {
  border-radius: var(--radius-sm);
  box-shadow: 3px 4px 0 rgb(43 35 32 / 10%);
  transform: none;
}
body.wp-volume .box .box-label {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 3px 9px 2px; border: 1.5px solid currentColor; border-radius: 3px 7px 4px 8px;
  font-family: var(--font-data); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.11em; font-variant-numeric: tabular-nums lining-nums;
}
body.wp-volume .box-pearl { background: var(--wp-pearl-bg); border: 1.5px solid var(--wp-pearl-edge); }
body.wp-volume .box-pearl .box-label { color: var(--wp-pearl-edge); }
body.wp-volume .box-strategy { background: var(--wp-strategy-bg); border: 1.5px solid var(--wp-strategy-edge); }
body.wp-volume .box-strategy .box-label { color: var(--wp-strategy-edge); }
body.wp-volume .box-clinical { background: var(--wp-clinical-bg); border: 1.5px solid var(--wp-clinical-edge); }
body.wp-volume .box-clinical .box-label { color: var(--wp-clinical-edge); }
body.wp-volume .box-mnemonic { background: var(--wp-mnemonic-bg); border: 1.5px solid var(--wp-mnemonic-edge); }
body.wp-volume .box-mnemonic .box-label { color: var(--wp-mnemonic-edge); }
body.wp-volume .box-mnemonic .device { color: var(--wp-section); }
@media (prefers-reduced-motion: reduce) { body.wp-volume .box { box-shadow: 3px 4px 0 rgb(43 35 32 / 10%); } }

/* --- 11. Crisis, quiet ------------------------------------------------------
   DESIGN-V4 sec 7. The partial's markup is untouched; the route wrapper the
   volumes already carry (.wp-crisis) is the only hook used, so the shipped
   crisis aside stays byte-identical. Pale ground, white card, zero rotation. */
body.wp-volume .wp-crisis { background: var(--paper-quiet); padding-block: var(--space-12); }
body.wp-volume .wp-crisis .crisis-block { background: var(--cloth); }
body.wp-volume .wp-crisis .pen, body.wp-volume .wp-crisis .annotation { display: none; }
body.wp-volume .wp-crisis * { transform: none; }

/* --- 12. Footer ------------------------------------------------------------
   Shell component; the containment above already returned it to tokens.css.
   The one addition is the page-ground seam so the footer does not float. */
body.wp-volume .site-footer { border-top: 1px solid var(--wp-rule); }

/* --- 12b. Screen type floors ------------------------------------------------
   The extracted block sizes this corpus in points because it is laid out as a
   210x297mm book: 7pt colophon labels, 8pt running heads, 8.5pt page furniture.
   Those are correct on paper and illegal on screen. Measured on WP-07 before
   this block: 14 elements under the 12px absolute floor, down to 9.33px.

   The lift is scoped to @media screen, so the printed book keeps its own
   typography and only the screen reading gets the floor. Nothing here changes
   a word, only the size it is set at. */
@media screen {
  body.wp-volume .cover-brand-sub { font-size: 12px; letter-spacing: 1.6px; }
  body.wp-volume .cover-author-cred { font-size: 13px; }
  body.wp-volume .cover-author-email { font-size: 12.5px; }
  body.wp-volume .cover-series { font-size: 13px; }
  body.wp-volume .cover-footer { font-size: 12px; }
  body.wp-volume .cover-footer .cf-web { font-size: 12.5px; }
  body.wp-volume .div-foot { font-size: 12px; }
  body.wp-volume .pg-head { font-size: 12px; }
  body.wp-volume .pg-head .hd-brand { font-size: 12.5px; }
  body.wp-volume .pg-foot { font-size: 12px; }
  body.wp-volume .back-label { font-size: 12px; letter-spacing: 2px; }
  body.wp-volume .toc-tag { font-size: 14px; }
  body.wp-volume .box .box-label { font-size: 13px; }
}

/* --- 13. Print -------------------------------------------------------------
   These volumes are laid out as a 210x297mm book and residents do print them.
   The extracted block forces print-color-adjust:exact on every element, so a
   theme-aware ground is not merely ignored by the printer, it would be painted:
   printing from dark mode would put a near-black fill on all 297mm. Pinning the
   printed ground back to paper is the guard for the surface this layer added.
   Nothing else about the print layout is touched. */
@media print {
  body.wp-volume { background: #FFFFFF; color: #2A2A3A; }
  body.wp-volume .cover-title::after { animation: none; clip-path: none; }
}

/* --- 14. Phone and small tablet ---------------------------------------------
   Everything above this point is a 210x297mm book, and until this block that is
   what a phone was served: 33 KB of print stylesheet, loaded last, with not one
   width query and not one clamp in it. Measured at 375px before this layer:

     .content padding 28mm 20mm 28mm 24mm      166px of margin, a 209px column
     .toc     padding 30mm 22mm 30mm 28mm      189px of margin, a 186px column,
                                               with a 54px number gutter inside
     .cover-watermark                          a 120pt glyph 666.7px wide, sat
                                               at left -311.7, three fifths of
                                               the word painted off-canvas
     .pg-foot .ft-insta                        left 307.6 right 386.1 in a box
                                               ending at 299.4, so "@weave.
                                               clinic" ran off the viewport with
                                               nothing to clip or scroll it
     .div-num 72pt, .cover-title 34pt          set for a 210mm page
     .cover/.toc/.divider/.back                100vw by 100vh with overflow
                                               hidden, so a phone that needs
                                               more than one screen loses the
                                               overflow rather than growing

   THE MEDIA TYPE IS THE PRINT GUARD. `@media screen and (max-width: 767px)`
   cannot match during printing whatever the paper size is, because `screen` and
   `print` are disjoint media types. Nothing in this block can reach the printed
   book, and that was verified rather than assumed: the three reference volumes
   were printed to PDF before and after, rasterised at 72dpi, and all 220 pages
   hash identically. Do not relax the `screen` keyword to a bare width query.

   Rem and viewport units throughout, and the sitewide --space-* tokens wherever
   they cascade, so this layer scales with the reader's text size while PART A
   and PART B keep their millimetres for paper. */
@media screen and (max-width: 767px) {

  /* 14.1 Full-bleed panels stop being pages.
     100vh with overflow:hidden is a page box; on a phone it is a guillotine.
     The three panels whose children are absolutely positioned (.cover-main,
     .div-body) are returned to flow first, or the panel would collapse to zero
     height the moment its own height stopped being fixed. .cover-main keeps
     position:relative, not static: it is the containing block for
     .cover-pinstripe and .cover-footer, and dropping it would move both to the
     cover's own left edge, on top of the spine band. */
  body.wp-volume .cover,
  body.wp-volume .toc,
  body.wp-volume .divider,
  body.wp-volume .back { width: auto; height: auto; }

  body.wp-volume .cover-band { width: 10px; }
  body.wp-volume .cover-main {
    position: relative; left: 0; top: 0;
    margin-left: 10px; min-height: 100svh;
  }
  body.wp-volume .cover-body {
    padding: var(--space-8) var(--space-5) var(--space-16);
  }

  body.wp-volume .toc {
    overflow: visible;
    padding: var(--space-10) clamp(1rem, 4.5vw, 1.5rem)
             var(--space-10) clamp(1.5rem, 6vw, 2rem);
  }
  /* 297mm of absolute bar on a page that is now as tall as its contents. */
  body.wp-volume .toc::before { width: 3px; height: 100%; }

  body.wp-volume .div-band { width: 10px; height: 100%; }
  body.wp-volume .div-body {
    position: static; margin-left: 10px; min-height: 62svh;
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  body.wp-volume .back {
    min-height: 100svh; padding: var(--space-16) var(--space-6);
  }

  /* 14.2 The watermark, contained rather than deleted.
     It is a 4% alpha ghost carried inline on the element, so it costs the cover
     nothing to keep, and keeping it is the point: the jacket reads as a printed
     object. 5 characters at clamp(2.25rem, 13vw, 4.5rem) with tracking in em
     rather than px measures ~180px at 320 and ~300px at 767, both inside the
     cover with room to spare. */
  body.wp-volume .cover-watermark {
    right: var(--space-4); bottom: var(--space-16);
    font-size: clamp(2.25rem, 13vw, 4.5rem); letter-spacing: 0.06em;
  }

  /* 14.3 Jacket type, clamped.
     Point sizes set for a 210mm measure against a ~200px one. Every clamp keeps
     the shipped size as its ceiling, so nothing above the breakpoint moves. */
  body.wp-volume .cover-brand { font-size: clamp(1.375rem, 6.5vw, 1.625rem); letter-spacing: 0.1em; }
  body.wp-volume .cover-series { margin-top: var(--space-6); }
  body.wp-volume .cover-title { font-size: clamp(1.75rem, 7.5vw, 2.125rem); overflow-wrap: break-word; }
  body.wp-volume .cover-subtitle { font-size: clamp(1rem, 4.2vw, 1.125rem); }
  body.wp-volume .cover-topics { font-size: 1rem; padding-left: var(--space-4); margin-bottom: var(--space-8); }
  body.wp-volume .cover-author-name { font-size: clamp(1.0625rem, 4.5vw, 1.1875rem); }
  body.wp-volume .cover-footer {
    height: auto; min-height: 44px; flex-wrap: wrap;
    gap: 2px var(--space-3); padding: var(--space-2) var(--space-4);
  }

  /* 14.4 Contents.
     The 54px number gutter was a quarter of the 186px column it sat inside. */
  body.wp-volume .toc h1 { font-size: clamp(1.625rem, 7vw, 2.125rem); margin-bottom: var(--space-6); }
  body.wp-volume .toc-item { gap: var(--space-3); padding-block: var(--space-3); }
  body.wp-volume .toc-num { min-width: 2rem; font-size: clamp(0.9375rem, 4vw, 1.125rem); }
  body.wp-volume .toc-name { font-size: clamp(1rem, 4.4vw, 1.1875rem); }
  body.wp-volume .toc-tag { margin-top: var(--space-6); }

  /* 14.5 Chapter openers. */
  body.wp-volume .div-num { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  body.wp-volume .div-title { font-size: clamp(1.5rem, 6.5vw, 2rem); margin-top: var(--space-2); }
  body.wp-volume .div-desc { font-size: 1rem; max-width: 100%; }
  body.wp-volume .div-foot { bottom: var(--space-5); }

  /* 14.6 The reading column.
     The spine narrows with it: .content::before is position:fixed at the
     viewport's left edge, so a 4mm bar plus a 1.25rem text inset would have
     left a 5px gutter. 6px of bar against a 1.5rem minimum inset leaves 18px. */
  body.wp-volume .content {
    padding: var(--space-8) clamp(1rem, 4.5vw, 1.5rem)
             var(--space-10) clamp(1.5rem, 6vw, 2rem);
  }
  body.wp-volume .content::before { width: 6px; }

  /* Running head and foot are space-between flex rows with no wrap, which is
     what put "IG: @weave.clinic" past the viewport edge. They wrap now, and the
     wider column below means they rarely need to. */
  body.wp-volume .pg-head,
  body.wp-volume .pg-foot { flex-wrap: wrap; gap: 2px var(--space-3); }
  body.wp-volume .pg-foot { margin-top: var(--space-5); }

  /* 14.7 Tables become their own scrollers.
     Not a taste call. table-layout:fixed at width:100% hands every column the
     same width whatever it holds, and the extracted block pairs that with
     overflow-wrap:break-word, so a three-column table on a 280px column gave
     each cell ~69px of text and chopped "desensitization" mid-word to fit. Set
     to display:block with overflow-x:auto the table becomes a scroll container
     and its rows are wrapped in one anonymous table box, which takes auto
     layout: columns size to their content, shrink no further than their longest
     word, and the reader swipes when the words genuinely will not fit. One
     anonymous box for thead and tbody together is what keeps the header cells
     aligned to their columns; splitting them into two tables would not.
     border-collapse and border-spacing are inherited properties, so the
     collapsed borders carry into that anonymous box unchanged.
     The probe reports a table in this state as `contained`, which is correct:
     the content is reachable by swiping, not amputated. */
  body.wp-volume .content table {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8125rem; line-height: 1.4;
  }
  body.wp-volume .content th,
  body.wp-volume .content td { padding: 7px 9px; }
  body.wp-volume .content th { font-size: 0.78125rem; }

  /* 14.8 Callouts and lists, tightened to the narrower column. */
  body.wp-volume .box { padding: var(--space-3) var(--space-4); }
  body.wp-volume .content ul,
  body.wp-volume .content ol { padding-left: var(--space-5); }

  /* 14.9 Colophon. */
  body.wp-volume .back-brand { font-size: clamp(2.25rem, 11vw, 3.5rem); letter-spacing: 0.08em; }
  body.wp-volume .back-tagline { font-size: clamp(1.125rem, 5vw, 1.375rem); margin-bottom: var(--space-6); }
  body.wp-volume .back-value { font-size: clamp(1rem, 4.4vw, 1.1875rem); }
  body.wp-volume .back-value.big { font-size: clamp(1.0625rem, 4.8vw, 1.25rem); }
  body.wp-volume .back-info { max-width: 100%; margin-top: var(--space-8); font-size: 1rem; }
}