/* Field Guides — v3 reduction system. Table-agnostic.
   Every guide sets six values; nothing else changes:
     --bg  --paper  --ink  --muted  --line  --accent  --accent-ink  --bone
   Display: condensed wood-type. Prose: Georgia. Labels: narrow caps, wide tracking.
   Structure comes from hairlines and space — no boxes, gradients, textures or shadows. */
body.guide-v3{background-image:none;font:18px/1.62 Georgia,'Times New Roman',serif}
body.guide-v3 main{max-width:1200px;padding-top:0}
.guide-v3 ::selection{background:var(--accent);color:#fff}

/* Scared Stiff v3 — reduction. Type and artwork carry everything.
   One ground (#0d0b0e), one ink (#f5f1ea), one accent (#e0322c). Helvetica for reading, Impact for statements.
   No chips, no boxes, no shadows, no texture. Hairlines and space do the structure. */

body.guide-v3 main{max-width:1200px;padding-top:0}
.guide-v3 ::selection{background:#e0322c;color:#fff}

.guide-reading-enabled nav.act-map{display:grid}

/* ---------- type ---------- */
.guide-v3 h1,.guide-v3 h2,.guide-v3 .act-divider strong,.guide-v3 .act-map strong{font-family:Haettenschweiler,'Arial Narrow',Impact,sans-serif;font-weight:900}
.guide-v3 h2{text-transform:uppercase;letter-spacing:.5px;color:var(--ink);text-shadow:none;max-width:22ch;line-height:.98}
.guide-v3 h3{font:700 21px/1.28 Georgia,serif;letter-spacing:-.2px}
.guide-v3 .kicker{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:none;padding:0;font:700 12px/1.4 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.guide-v3 .kicker .scene{background:none;border:0;padding:0;color:var(--accent);letter-spacing:2.5px}
.guide-v3 .kicker .scene--ref{color:var(--muted)}
.guide-v3 section{margin:130px 0}
.guide-v3 .evidence-deep-dive{border-top:1px solid var(--line);padding-top:44px;margin:80px 0}
.guide-v3 .evidence-deep-dive h2{font-size:28px}
.guide-v3 section>p,.guide-v3 section>ol:not(.score-route),.guide-v3 section>ul{max-width:62ch}
.guide-v3 p{text-wrap:pretty}
.guide-v3 ol:not(.score-route) li::marker{color:var(--accent-ink);font-weight:700}

/* ---------- chrome ---------- */
.guide-v3 header{border-bottom:1px solid var(--line);background:rgba(11,6,20,.92);backdrop-filter:blur(12px)}
body.guide-v3 header.compact-library-nav{position:sticky;display:flex;flex-wrap:wrap;align-items:center}
body.guide-v3 header.compact-library-nav nav{margin-top:0}
body.guide-v3 header.compact-library-nav .guide-home{color:var(--ink);letter-spacing:2px;font-size:13px}
header.compact-library-nav .all-tables>summary{border:1px solid var(--line);border-radius:99px}
.guide-v3 .guide-reader-bar{background:rgba(11,6,20,.94);border:0;border-bottom:1px solid var(--line);box-shadow:none;backdrop-filter:blur(12px)}
.guide-v3 a{text-decoration-color:var(--accent-ink)}
.guide-v3 .button,.guide-v3 button,.guide-v3 .opening.cinematic .button{background:var(--accent);color:#fff;border:0;border-radius:99px;padding:14px 26px;box-shadow:none;font:700 16px/1.2 'Arial Narrow',Arial,sans-serif;transition:opacity .15s}
.guide-v3 .button:hover,.guide-v3 .button:focus-visible{opacity:.85;transform:none;box-shadow:none}
.button-ghost{display:inline-flex;align-items:center;min-height:48px;padding:11px 4px;font:700 16px/1.2 'Arial Narrow',Arial,sans-serif;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}
.button-ghost:hover,.button-ghost:focus-visible{color:var(--accent)}
.hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---------- hero: artwork, then the statement ---------- */
.guide-v3 .opening.cinematic{display:block;width:100vw;margin-left:calc(50% - 50vw);border:0;box-shadow:none;background:var(--bg);min-height:0;padding:0;isolation:auto}
.guide-v3 .opening.cinematic:after{display:none}
.guide-v3 .opening.cinematic .art{position:static;inset:auto;display:block;width:auto;max-width:min(1200px,92vw);height:auto;max-height:76vh;object-fit:contain;margin:56px auto 0;transform:none;opacity:1}
.guide-v3 .opening.cinematic .intro{position:static;width:auto;max-width:820px;margin:0 auto;padding:64px 5vw 24px;text-align:center}
.guide-v3 .opening.cinematic .kicker{display:block;background:none;color:var(--muted);padding:0;font:700 13px/1.4 'Arial Narrow',Arial,sans-serif;letter-spacing:3px;margin-bottom:22px}
.guide-v3 .opening.cinematic h1{font-size:clamp(88px,11vw,168px);line-height:.88;color:var(--ink);text-shadow:none;margin:0 0 28px;letter-spacing:-1px}
.guide-v3 .opening.cinematic h1 br{display:none}
.guide-v3 .opening.cinematic p:not(.kicker){font-size:18px;line-height:1.62;max-width:46ch;margin:0 auto 18px;color:var(--muted)}
.guide-v3 .opening.cinematic p:not(.kicker) strong{display:block;font:400 25px/1.4 Georgia,serif;color:var(--ink);margin-bottom:14px}
.guide-v3 .opening.cinematic .hero-actions{margin-top:34px}

/* ---------- act map: three quiet columns ---------- */
.act-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:110px 0 0;border-top:1px solid var(--line)}
.act-map a{display:block;background:none;border:0;border-right:1px solid var(--line);padding:30px 28px 8px;margin:0;text-decoration:none;font:inherit;min-height:0;box-shadow:none;transition:background .15s}
.act-map a:last-child{border-right:0}
.act-map a:hover,.act-map a:focus-visible{background:var(--paper);border-color:var(--line);transform:none}
.act-map span{display:block;background:none;color:var(--accent-ink);font:700 12px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;padding:0;margin-bottom:14px}
.act-map strong{display:block;font-size:44px;line-height:1;text-transform:uppercase;color:var(--ink);text-shadow:none;margin-bottom:12px}
.act-map small{display:block;font:14px/1.55 'Arial Narrow',Arial,sans-serif;color:var(--muted)}

/* ---------- act breaks: image, then one word ---------- */
.act-divider{display:block;width:100vw;margin:170px 0 0 calc(50% - 50vw);max-width:none;background:var(--bg);border:0;box-shadow:none;overflow:visible;scroll-margin-top:120px}
#act-learn{margin-top:120px}
.act-divider>a{display:block;width:min(1200px,92vw);margin:0 auto}
.act-divider img{display:block;width:100%;height:auto}
.act-divider figcaption{position:static;width:min(820px,92vw);margin:0 auto;padding:56px 0 0;text-align:center;overflow:visible}
.act-divider figcaption:before{display:none}
.act-label{display:block;background:none;color:var(--accent-ink);font:700 13px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;padding:0;margin-bottom:18px}
.act-divider strong{display:block;font-size:clamp(72px,9vw,140px);line-height:.9;text-transform:uppercase;color:var(--ink);text-shadow:none;margin-bottom:20px}
.act-divider figcaption p{margin:0 auto 26px;color:var(--muted);font-size:18px;line-height:1.6;max-width:44ch}
.act-toc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.act-toc a{font:700 13px/1 'Arial Narrow',Arial,sans-serif;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:12px 18px;white-space:nowrap}
.act-toc a:hover,.act-toc a:focus-visible{border-color:var(--accent);color:var(--accent);background:none}
.act-divider--reverse{grid-template-columns:none}

/* ---------- score routes: numbers and hairlines ---------- */
.guide-v3 .score-route{counter-reset:step;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guide-v3 .score-route li{counter-increment:step;position:relative;padding:26px 24px 26px 0;background:none;border:0;border-right:1px solid var(--line);padding-left:24px}
.guide-v3 .score-route li:first-child{padding-left:0}
.guide-v3 .score-route li:last-child{border-right:0}
.guide-v3 .score-route li:before{content:counter(step,decimal-leading-zero);display:block;font:700 13px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:2px;color:var(--accent-ink);margin-bottom:14px;position:static}
.guide-v3 .score-route li:after{display:none}
.guide-v3 .score-route strong{font:700 19px/1.25 'Arial Narrow',Arial,sans-serif;letter-spacing:-.2px}
.guide-v3 .score-route span{color:var(--muted);font-size:15px}

/* ---------- notes: a red sentence, not a box ---------- */
.guide-v3 .note{border:0;border-left:2px solid var(--accent);background:none;padding:6px 0 6px 26px;margin:34px 0}
.guide-v3 .note:before{content:'Coach’s note';display:block;font:700 12px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}

/* ---------- lessons ---------- */
.guide-v3 .lesson{gap:40px}
.guide-v3 .lesson article{border-top:1px solid var(--line);background:none;padding:26px 0 0}
.guide-v3 .lesson h3:before{content:none}
.guide-v3 .step{color:var(--accent-ink);font:700 12px/1.4 'Arial Narrow',Arial,sans-serif;letter-spacing:2px}

/* ---------- picture lesson + playfield ---------- */
.guide-v3 .picture-step{border:0;background:var(--paper)}
.guide-v3 .picture-number{background:var(--accent);color:#fff;border-radius:99px}
.guide-v3 .photo{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.guide-v3 .photo img{border-radius:8px}
.guide-v3 .photo figcaption{text-align:left;color:var(--muted);padding:14px 0 0}

/* ---------- disclosures: hairline list ---------- */
.guide-v3 .mode-catalog{gap:0;border-top:1px solid var(--line)}
.guide-v3 .mode-catalog details{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.guide-v3 .mode-catalog details[open]{border-color:var(--line);box-shadow:none}
.guide-v3 .mode-catalog summary,.guide-v3 .reference-fold>summary{font:700 19px/1.35 'Arial Narrow',Arial,sans-serif;list-style:none;position:relative;padding:24px 48px 24px 0}
.guide-v3 .mode-catalog summary::-webkit-details-marker,.guide-v3 .reference-fold>summary::-webkit-details-marker{display:none}
.guide-v3 .mode-catalog summary:before,.guide-v3 .reference-fold>summary:before{content:'+';position:absolute;right:6px;left:auto;top:20px;color:var(--accent-ink);font:300 32px/1 'Arial Narrow',Arial,sans-serif}
.guide-v3 .mode-catalog details[open]>summary:before,.guide-v3 .reference-fold[open]>summary:before{content:'−'}
.guide-v3 .mode-catalog details[open] summary{border-bottom:0}
.guide-v3 .mode-catalog summary small{letter-spacing:0;text-transform:none}
.guide-v3 .mode-body{padding:0 0 26px}
.reference-fold{margin:30px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none;overflow:hidden}
.reference-fold[open]{box-shadow:none;border-color:var(--line)}
.reference-fold>summary{cursor:pointer;color:var(--ink)}
.reference-fold>summary small{display:block;font:400 14px/1.4 'Arial Narrow',Arial,sans-serif;color:var(--muted);margin-top:6px;letter-spacing:0;text-transform:none}
.reference-fold[open]>summary{border-bottom:1px solid var(--line)}
.reference-fold .strategy-table,.reference-fold .route-cards{margin:24px 0}
.reference-fold>p{margin:0 0 24px;max-width:62ch}
.guide-v3 .shot{border-bottom:1px solid var(--line);padding:20px 0}
.guide-v3 .shot summary{font:700 19px/1.4 'Arial Narrow',Arial,sans-serif}
.guide-v3 .shot summary:hover{color:var(--accent)}

/* ---------- six tales: a reference, not a to-do ---------- */
.tale-list{list-style:none;counter-reset:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line);max-width:none}
.tale-list li{display:grid;grid-template-columns:64px minmax(0,17ch) minmax(0,1fr);gap:0 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.tale-n{font:700 13px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:2px;color:var(--accent-ink)}
.tale-list strong{font:700 19px/1.3 Georgia,serif;color:var(--ink)}
.tale-how{font:16px/1.6 Georgia,serif;color:var(--muted)}
@media (max-width:760px){.tale-list li{grid-template-columns:44px minmax(0,1fr);gap:4px 16px}.tale-how{grid-column:2}}

/* ---------- tables, quiz, watch, credits ---------- */
.guide-v3 .strategy-table table{background:none}
.guide-v3 .strategy-table th{color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700;padding:12px 16px 12px 0;border-bottom:1px solid var(--ink)}
.guide-v3 .strategy-table td{font-size:16px;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.guide-v3 .strategy-table tbody tr:nth-child(odd){background:none}
.guide-v3 .strategy-table tbody tr:hover{background:rgba(255,255,255,.03)}
.guide-v3 .quiz{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:34px}
.guide-v3 .quiz .kicker{color:var(--muted)}
.guide-v3 .quiz button{background:none;color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:12px 20px}
.guide-v3 .quiz button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.guide-v3 .watch-image span{background:#0b0614e8;color:var(--ink);border-left:0;font:700 15px/1.4 'Arial Narrow',Arial,sans-serif}
.guide-v3 .watch-image img{border-radius:12px}
.guide-v3 figcaption{font-family:'Arial Narrow',Arial,sans-serif}
.guide-v3 .credits{font-size:14px;line-height:1.65;color:var(--muted);border-top:1px solid var(--line)}
.guide-v3 footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:30px 0 8px;letter-spacing:2px}

/* ---------- figures kept from the guide ---------- */
.guide-v3 .scared-practical-art,.guide-v3 .scared-finale-spread{background:var(--paper);border:0;border-radius:16px;box-shadow:none;overflow:hidden}
.guide-v3 .scared-practical-art figcaption strong,.guide-v3 .scared-finale-spread figcaption strong{font-family:'Arial Narrow',Arial,sans-serif;font-weight:700;letter-spacing:-.3px;text-transform:none;font-size:24px;color:var(--ink)}
.guide-v3 .scared-practical-art figcaption,.guide-v3 .scared-finale-spread figcaption{font:16px/1.6 'Arial Narrow',Arial,sans-serif;color:var(--muted)}
.guide-v3 .scared-finale-spread figcaption small,.guide-v3 .scared-practical-art figcaption small{color:var(--bone)}

/* ---------- terms + tooltips ---------- */
.guide-v3 .term-link{text-decoration-style:dotted;text-decoration-color:var(--accent-ink);text-decoration-thickness:1.5px}
.guide-v3 .term-link:hover,.guide-v3 .term-link:focus-visible{color:var(--accent-ink);outline-color:var(--accent-ink)}
.guide-v3 .term-tooltip{background:#170f24;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:600 15px/1.5 'Arial Narrow',Arial,sans-serif;box-shadow:0 20px 50px #000a}
.term-tooltip .term-tooltip-more{display:block;margin-top:9px;color:var(--accent-ink);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px}

.section-top .number{display:none}
.guide-v3 .section-top{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:24px;align-items:center;margin-bottom:18px}
.guide-v3 .section-top h2{margin-bottom:0}
.guide-v3 .lesson-accent{display:none}
.guide-v3 .section-heading,.guide-v3 .section-top{grid-template-columns:1fr}

/* ---------- desktop ---------- */
@media (min-width:1100px){
  body.guide-v3 h2{font-size:52px;margin-bottom:26px}
  body.guide-v3 .evidence-deep-dive h2{font-size:28px}
  body.guide-v3 .picture-steps{grid-template-columns:1fr 1fr;gap:28px}
  body.guide-v3 .picture-step{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start}
  body.guide-v3 .picture-step svg{width:210px;height:270px}
  body.guide-v3 .picture-step figcaption{padding:20px;font-size:16px;line-height:1.55}
  body.guide-v3 .picture-step h3{font-size:20px;line-height:1.2;margin:10px 0}
  body.guide-v3 .guide-v3 .scared-practical-art{margin:64px auto}
  body.guide-v3 .guide-v3 .scared-practical-art img{max-height:300px;object-fit:contain}
  body.guide-v3 .guide-v3 .scared-finale-spread{max-width:920px;margin:64px auto}
  body.guide-v3 .guide-v3 .scared-finale-spread img{max-height:340px;object-fit:contain}
}
@media (max-width:900px){
  .act-map{grid-template-columns:1fr;border-top:0}
  .act-map a{border-right:0;border-top:1px solid var(--line);padding:24px 0 18px}
  .guide-v3 .score-route{grid-template-columns:1fr 1fr}
  .guide-v3 .score-route li{border-right:0;padding-left:0;padding-right:16px}
  .guide-v3 section{margin:90px 0}
  .act-divider{margin-top:110px}
}
@media (max-width:640px){
  .guide-v3 .opening.cinematic h1{font-size:clamp(64px,17vw,88px)}
  .guide-v3 .tales{grid-template-columns:1fr 1fr}
  .guide-v3 .opening.cinematic .art{margin-top:24px}
  .guide-v3 .opening.cinematic .intro{padding:44px 6vw 10px}
}
@media print{
  .act-map,.act-divider{display:none}
  .reference-fold>*{display:block!important}
  .guide-v3 .opening.cinematic{width:auto;margin:0}
}

/* ---------- folded attributions ---------- */
.sources{margin:26px 0 0;max-width:62ch}
.sources>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);padding:8px 0;min-height:0}
.sources>summary::-webkit-details-marker{display:none}
.sources>summary:before{content:'+';color:var(--accent-ink);font-size:16px;line-height:1}
.sources[open]>summary:before{content:'−'}
.sources>summary:hover{color:var(--ink)}
.sources>p{margin:6px 0 0;font:14px/1.65 Georgia,serif;color:var(--muted);border-left:1px solid var(--line);padding-left:18px}

/* ---------- full-bleed teaching moments ---------- */
.guide-v3 section.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-top:150px;margin-bottom:150px;padding:96px 5vw;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guide-v3 section.bleed>*{max-width:1200px;margin-left:auto;margin-right:auto}
.guide-v3 section.bleed>p{max-width:62ch}

/* ---------- spec blocks: dense data, no ornament ---------- */
.guide-v3 .strategy-table.spec table{font-family:'Arial Narrow',Arial,sans-serif}
.guide-v3 .strategy-table.spec td{font-size:16px;line-height:1.55}
.guide-v3 .strategy-table.spec td:first-child{font-weight:700;color:var(--ink);width:26%}
.guide-v3 .strategy-table.spec td strong{color:var(--bone)}

/* ---------- wood-type refinements ---------- */
.guide-v3 h1,.guide-v3 .act-divider strong,.guide-v3 .act-map strong{letter-spacing:.5px}
.guide-v3 h2{letter-spacing:1px}
.guide-v3 .opening.cinematic h1{letter-spacing:1.5px}
.guide-v3 .score-route strong{font-family:Georgia,serif;font-weight:700;font-size:19px}
.guide-v3 .tale label{font-family:Georgia,serif;font-size:18px}
.guide-v3 .shot summary,.guide-v3 .mode-catalog summary,.guide-v3 .reference-fold>summary{font-family:Georgia,serif;font-weight:700;font-size:19px}
.guide-v3 footer{font-family:'Arial Narrow',Arial,sans-serif;letter-spacing:3.5px}
@media (max-width:900px){.guide-v3 section.bleed{margin-top:96px;margin-bottom:96px;padding:64px 5vw}}

/* header: keep the table menu on one line */
header.compact-library-nav .all-tables>summary{white-space:nowrap;padding:8px 16px}
body.guide-v3 header.compact-library-nav{gap:20px}

.guide-v3 .feedback-link{display:inline-block;margin-top:12px;font:700 15px/1.3 Georgia,serif;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent-ink);padding-bottom:3px}
.guide-v3 .feedback-link:hover,.guide-v3 .feedback-link:focus-visible{color:var(--accent-ink)}

.quiz-options{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 4px}
.quiz-progress{margin:0 0 10px;color:var(--muted);font:700 12px/1.4 'Arial Narrow',Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.guide-v3 .quiz-options button{margin:0}
.guide-v3 .quiz h3{max-width:48ch}
.guide-v3 .quiz-again{margin-top:22px;background:none;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:11px 18px;font:700 13px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.guide-v3 .quiz-again:hover,.guide-v3 .quiz-again:focus-visible{color:var(--ink);border-color:var(--muted)}

/* Small text never uses --accent (the saturated action color); it uses --accent-ink,
   which is tuned to clear 4.5:1 on both --bg and --paper. */
.guide-v3 .kicker .scene,.guide-v3 .act-label,.guide-v3 .act-map span,
.guide-v3 .score-route li:before,.guide-v3 .note:before,.guide-v3 .step,
.guide-v3 .tale-n,.guide-v3 .sources>summary:before,
.guide-v3 .mode-catalog summary:before,.guide-v3 .reference-fold>summary:before{color:var(--accent-ink)}
.guide-v3 .guide-reader-menu a[aria-current=location],.guide-v3 .guide-reader-menu a:hover{color:var(--accent-ink)}
.guide-v3 .term-link{text-decoration-color:var(--accent-ink)}

/* Align the running head to the page column: main is a centred 1200px box with 5vw
   padding, so its text starts at 192px on a 1440 viewport while the header sat at
   72px. Same column for both now. */
body.guide-v3 header.compact-library-nav,
body.scared header.compact-library-nav{padding-inline:max(5vw,calc((100vw - 1200px)/2 + 5vw))}
body.guide-v3 header.compact-library-nav>*,body.scared header.compact-library-nav>*{display:flex;align-items:center;min-height:44px}


/* ================= Audit round 1 fixes =================
   1. FOLD: the poster ate the whole first screen, putting h1 at y=917 and the first
      prose as far down as y=1954. The artwork now yields the top of the page.
   2. MEASURE: `section>p` is a CHILD selector, so every paragraph nested in a
      disclosure, note or sources block escaped it and ran 107-140 characters. The
      rules people actually read were the unconstrained ones.
   3. BLEED: `>*{margin-inline:auto}` centred narrow children and left-aligned wide
      ones, so the heading sat 72px left of every other heading while its own kicker
      floated 358px right of it.
   4. COLUMN: all three families now share one content column so moving between
      guides does not shift the page sideways.
   5. Term links were a dotted accent underline, which is the browser's own
      misspelling convention. */

body.guide-v3 main{max-width:1240px;padding-inline:40px}
body.guide-v3 header.compact-library-nav{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))}

.guide-v3 .opening.cinematic .art{max-height:52vh;margin:24px auto 0}
.guide-v3 .opening.cinematic .intro{padding:36px 5vw 20px}
.guide-v3 .opening.cinematic h1{font-size:clamp(60px,6.4vw,104px);margin-bottom:20px}
.guide-v3 .opening.cinematic p:not(.kicker) strong{font-size:22px}

.guide-v3 section p,.guide-v3 .mode-body p,.guide-v3 .mode-body li,
.guide-v3 .note p,.guide-v3 .sources>p,.guide-v3 .detail-body p{max-width:62ch}
.guide-v3 td p,.guide-v3 th p,.guide-v3 figcaption p,.guide-v3 figcaption{max-width:none}

.guide-v3 section.bleed>*{max-width:1160px;margin-inline:auto}
.guide-v3 section.bleed h2{max-width:22ch}
.guide-v3 section.bleed>p{max-width:62ch;margin-inline:auto;margin-left:0}

.guide-v3 .score-route{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.guide-v3 .strategy-table table,.guide-v3 table{table-layout:fixed;width:100%}
.guide-v3 td,.guide-v3 th{overflow-wrap:break-word}

.guide-v3 .term-link{text-decoration-style:solid;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent-ink) 50%,transparent)}
.guide-v3 .term-link:hover,.guide-v3 .term-link:focus-visible{text-decoration-color:var(--accent-ink)}

.guide-v3 .source-list li,.guide-v3 .credits p,.guide-v3 .credits li,.guide-v3 .large{max-width:62ch}


/* ================= Audit round 2 =================
   R2 REGRESSION: restoring max-width:22ch on .bleed h2 while .bleed>* still had
   margin-inline:auto made the heading narrow enough to CENTRE, 319px off the body
   column. Give .bleed the column as padding and stop centring its children.
   R3: many Coach's Notes hold text directly in the div with no inner <p>, so a
   .note p cap never matched them - cap the container.
   R4: plain section list items were never covered by the measure fix.
   R6: lord-of-the-rings shot cards were 19 characters per line.
   R8: this family's reader bar sat 12px inside the column; match the other family. */
.guide-v3 section.bleed{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))}
.guide-v3 section.bleed>*{max-width:1160px;margin-inline:0}
.guide-v3 section.bleed>p{max-width:62ch}
.guide-v3 .note{max-width:62ch}
.guide-v3 section ul li,.guide-v3 section ol li{max-width:62ch}
.guide-v3 .score-route li,.guide-v3 .tale-list li,.guide-v3 .act-toc li,.guide-v3 .act-map li{max-width:none}
.guide-v3 .shot-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.guide-v3 .guide-reader-bar{padding-inline:max(28px,calc((100vw - 1240px)/2 + 28px))}
.guide-v3 .opening.cinematic .art{max-height:44vh}
.guide-v3 table{width:100%}

/* round 2b: the last measure leaks - text held directly by a container the cap never
   reached (p.credits as a direct child of main, glossary definitions, act captions),
   and the reader bar padding overshot: that bar already sits inside the column. */
.guide-v3 p.credits,.guide-v3 .credits,.guide-v3 .glossary dd,.guide-v3 .glossary dt{max-width:62ch}
.guide-v3 .act-divider figcaption p{max-width:44ch}
.guide-v3 .guide-reader-bar{padding-inline:0}
.guide-v3 .strategy-table,.guide-v3 .strategy-table table{width:100%}


/* ================= Audit round 3 =================
   N2: the art-left/prose-right teaching sections used six different splits, three of
   them on one page, because the per-table desktop sheets override the shared
   components with id-level selectors. One split, forced at that weight.
   N3: a 240px floor on a full-width 1160px grid gives four 227px columns, about a
   quarter of a readable measure. A 320px floor gives three at ~360px. */
.guide-v3 .layout,.guide-v3 .visual-led{grid-template-columns:440px minmax(0,1fr)!important;gap:40px!important}
.guide-v3 .lesson{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:40px!important}
.guide-v3 .shot-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;gap:24px}

/* the forced 440px first column overrode guide.css's narrow-viewport collapse and
   overflowed at 560; restore the collapse at the same weight. */
@media (max-width:900px){
  .guide-v3 .layout,.guide-v3 .visual-led,.guide-v3 .lesson{grid-template-columns:1fr!important;gap:24px!important}
}

/* ================= Audit round 4 =================
   D1: three families, three fixed panel widths (760/900/760), each right-anchored to a
   trigger ~350px from the viewport edge. Whenever the width exceeded the space to the
   left of the trigger the panel ran off-canvas - at 800-1152 on v3, 700-900 on the
   others. scrollWidth stays at the viewport width for negative overflow, which is why
   this survived three rounds. One width formula for all three, derived from the space
   actually available, plus a viewport pin on narrow screens. */
.guide-v3 .all-tables>.all-tables-panel{
  width:min(760px,calc(100vw - 380px))!important;max-width:none!important;
  left:auto!important;right:0!important;transform:none!important}
@media (max-width:820px){
  .guide-v3 .all-tables>.all-tables-panel{position:fixed!important;left:16px!important;right:16px!important;
    top:64px!important;width:auto!important;max-height:72vh;overflow:auto}
}

/* D2: the reusable components were standardised but the per-page desktop sheets set
   `section` itself as a grid with eight different splits (elvira alone used three on
   one page). One art-left standard; the two art-right sections mirror it so the prose
   column keeps the same width. */
body.guide-v3 main>section{grid-template-columns:440px minmax(0,1fr)!important;gap:40px!important}
body.guide-v3 main>section#titles,body.guide-v3 main>section#movies{
  grid-template-columns:minmax(0,1fr) 440px!important}
@media (max-width:900px){body.guide-v3 main>section{grid-template-columns:1fr!important;gap:24px!important}}

@media (max-width:700px){
  .guide-v3 .shot-grid,.guide-v3 .tales,.guide-v3 .score-route,.guide-v3 .terms,
  .guide-v3 .practice-ladder{grid-template-columns:1fr!important}
}

/* D-N2: a .lesson nested inside an already-offset parent kept splitting 2-up at 560. */
@media (max-width:900px){
  .guide-v3 .lesson .lesson,.guide-v3 section .lesson{grid-template-columns:1fr!important}
}

/* the per-table sheet re-introduces a second track at narrow widths via auto-flow or
   template-areas, so collapsing columns alone was not enough. */
@media (max-width:900px){
  body.guide-v3 main>section{grid-template-columns:1fr!important;grid-template-areas:none!important;
    grid-auto-flow:row!important;grid-auto-columns:auto!important}
  body.guide-v3 main>section>*{grid-column:auto!important;grid-row:auto!important}
}

/* D-N2: table-layout:fixed does not collapse, so a 3-column table in a 560 viewport
   gave ~160px cells at 16-29 characters per line. Below 700 the table keeps a
   readable column width and scrolls inside its own wrapper, so the page itself still
   has no horizontal scroll and the header row stays associated with its cells. */
@media (max-width:700px){
  .guide-v3 .strategy-table,.guide-v3 .table-wrap{overflow-x:auto}
  .guide-v3 table{table-layout:auto!important;min-width:860px}
}

/* ---- Art-direction audit: the teaching image was being delivered at 320-440px on
   every page regardless of how good the source was, because the shared art column is
   440px. The playfield is the asset the whole guide exists to support, so sections
   that carry one get a wider column and the image fills it. ---- */
.guide-v3 main>section:has(.photo),.guide-v3 main>section:has(.map-reference){
  grid-template-columns:660px minmax(0,1fr)!important}
.guide-v3 .photo,.guide-v3 .map-reference{width:100%}
.guide-v3 .photo img,.guide-v3 .map-reference img{width:100%;height:auto;max-height:none}
@media (max-width:1100px){
  .guide-v3 main>section:has(.photo),.guide-v3 main>section:has(.map-reference){
    grid-template-columns:1fr!important}
}

/* the playfield sits in a nested .layout grid whose own first column was still 440px */
.guide-v3 .layout:has(.photo),.guide-v3 .layout:has(.map-reference),
.guide-v3 .visual-led:has(.photo),.guide-v3 .visual-led:has(.map-reference){
  grid-template-columns:660px minmax(0,1fr)!important}
@media (max-width:1100px){
  .guide-v3 .layout:has(.photo),.guide-v3 .layout:has(.map-reference),
  .guide-v3 .visual-led:has(.photo),.guide-v3 .visual-led:has(.map-reference){
    grid-template-columns:1fr!important}
}

/* guardians' reference sits in a different wrapper and stayed at 320px */
.guide-v3 .map-reference{width:100%;max-width:none}
.guide-v3 *:has(> .map-reference){grid-template-columns:660px minmax(0,1fr)!important}
@media (max-width:1100px){.guide-v3 *:has(> .map-reference){grid-template-columns:1fr!important}}


/* Five-guide explanatory field graphics */
.guide-v3 .field-graphic{margin:30px 0 34px;width:min(100%,980px);background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.guide-v3 .field-graphic img{display:block;width:100%;height:auto;background:var(--bg)}
.guide-v3 .field-graphic figcaption{padding:16px 20px;color:var(--muted);font:15px/1.5 Arial,sans-serif}
.guide-v3 .field-graphic figcaption strong{display:block;color:var(--ink);font:800 17px/1.3 Arial,sans-serif;margin-bottom:5px}
.guide-v3 #shots .field-graphic{width:min(100%,1100px)}
.guide-v3 .opening.cinematic .art{border-radius:0}
@media(max-width:700px){.guide-v3 .field-graphic{margin:22px 0 28px}.guide-v3 .field-graphic figcaption{padding:14px 16px;font-size:14px}}

/* Scared Stiff is the hero model: a full-width cinematic image fading into the
   title, never a small centred poster. */
.guide-v3 .opening.cinematic .art{
  width:100%;
  max-width:none;
  height:clamp(420px,66vh,700px);
  max-height:none;
  margin:0;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(#000 42%,transparent 92%);
  mask-image:linear-gradient(#000 42%,transparent 92%);
}
.guide-v3 .opening.cinematic .intro{position:relative;margin:-120px auto 0;padding-top:0}
@media(max-width:640px){
  .guide-v3 .opening.cinematic .art{height:clamp(360px,58vh,480px)}
  .guide-v3 .opening.cinematic .intro{margin:-90px auto 0;padding-top:0}
  .guide-v3 .opening.cinematic h1 br{display:block}
}