/* The Authority of Genius — mobile-first. Cream, ink and rust, as the original
   editorial site; Georgia for reading, a grotesque for the instrument chrome. */
:root{
  --paper:#eeeae0; --paper-2:#f7f3ea; --panel:#e4e5d9; --green:#d4ddc8;
  --ink:#202722; --ink-2:#3c443d; --muted:#5d6459; --line:#c8c9bc;
  --red:#b74329; --red-2:#8f2f1b; --hot:#e56a43;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif; --serif:Georgia,"Times New Roman",serif;
  --bar:52px; --rail:44px; --safe-b:env(safe-area-inset-bottom,0px);
  /* narrator palette */
  --bg:var(--paper); --accent:var(--red); --rule:var(--line); --dim:var(--muted); --faint:#6d7468;
  --mono:var(--sans);
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + var(--rail) + 8px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off){scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.62 var(--serif);overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:400;line-height:1.12;margin:0}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.eyebrow{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.note{font:13px/1.6 var(--sans);color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-80px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip-link:focus{top:10px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:var(--hot);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}

/* ---- app bar + rail ----------------------------------------------------- */
.appbar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:8px;
  padding:0 10px 0 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0;flex:1}
.brand svg{width:30px;height:30px;flex:none}
.brand span{font:600 11px/1.15 var(--sans);letter-spacing:.12em;text-transform:uppercase;max-width:9.5em}
@media (min-width:560px){.brand span{max-width:none;font-size:12px}}
.brand i{font-style:normal;color:var(--red)}
.bar-tools{display:flex;gap:4px}
.tool{display:flex;align-items:center;gap:6px;min-width:44px;min-height:40px;justify-content:center;padding:0 10px;
  background:none;border:1px solid var(--line);border-radius:20px;font:600 12px var(--sans);text-decoration:none;cursor:pointer}
.tool svg{width:15px;height:15px}
.tool span{display:none}
.tool:hover{border-color:var(--ink)}
#tnListen{background:var(--red);border-color:var(--red);color:#fff}
#tnListen span{display:inline}
.tool[hidden]{display:none}
.rail{position:sticky;top:var(--bar);z-index:49;background:var(--ink);color:var(--paper)}
.rail-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px 10px;scroll-snap-type:x proximity}
.rail-in::-webkit-scrollbar{display:none}
.rail a{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:16px;
  font:13px var(--sans);text-decoration:none;white-space:nowrap;color:#d9dccf;transition:background .2s,color .2s}
.rail a b{font:600 11px var(--sans);color:#b7c5ae}
.rail a[aria-current="true"]{background:var(--paper);color:var(--ink)}
.rail a[aria-current="true"] b{color:var(--red)}

/* ---- hero: the travelling page leads; the title sits in its empty cream -- */
.hero{position:relative;padding:0 0 8px}
.hero-art{position:relative;margin:0;overflow:hidden;background:#efe9dc;aspect-ratio:16/10}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:92% 50%}
.badge{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);
  font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:14px}
.badge svg{width:14px;height:14px;color:var(--hot)}
.hero-text{padding:14px 18px 0}
.hero h1{font-size:clamp(46px,13vw,104px);letter-spacing:-.035em;line-height:.98;margin:2px 0 16px}
.hero h1 em{color:var(--red);display:block}
.listen-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink);color:var(--paper);border:0;border-radius:14px;padding:14px 16px;margin:0 0 10px;min-height:64px}
.listen-cta .ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.listen-cta .ico svg{width:18px;height:18px;color:#fff}
.listen-cta b{display:block;font:600 16px/1.25 var(--sans)}
.listen-cta small{display:block;font:13px/1.4 var(--sans);color:#c6cbbf;margin-top:3px}
.listen-cta:hover .ico{background:var(--hot)}
.cast{background:#f3efe5;border:1px solid var(--line);border-radius:14px;padding:10px 12px 12px;margin:0 0 18px}
.cast img{display:block;width:100%;height:auto;max-height:120px;object-fit:contain;mix-blend-mode:multiply}
.cast ol{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.cast li{font:11px/1.3 var(--sans);color:var(--muted)}
.cast li b{display:block;font:600 12px/1.25 var(--sans);color:var(--ink);margin-bottom:2px}
.cast p{font:11px var(--sans);color:var(--muted);text-align:center;margin:8px 0 0}
.intro{font-size:20px;line-height:1.45}

/* ---- illustration plates ------------------------------------------------- */
.plate{margin:18px 0 20px;border:1px solid var(--ink);box-shadow:6px 6px 0 #d3d5c6;overflow:hidden;background:#efe9dc;aspect-ratio:4/3}
.plate img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.plate:hover img{transform:scale(1.04)}
.js .plate img.pending{opacity:0;transform:scale(1.06)}
.js .plate img.shown{opacity:1;transform:none;transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.plate-top{margin-top:0}
.stage-art{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:8px;margin:0 0 14px;filter:sepia(.05)}
.sheet-art{display:block;width:calc(100% + 36px);margin:-16px -18px 14px;height:150px;object-fit:cover}

/* ---- sections ------------------------------------------------------------ */
main>section{scroll-margin-top:calc(var(--bar) + var(--rail))}
.thread,.part,.links,.synthesis,.finder,.sources,.circulate{padding:44px 0 30px;border-top:1px solid var(--ink)}
.thread h2,.links h2,.synthesis h2,.finder h2,.circulate h2,.sources h2{font-size:clamp(34px,8.5vw,58px);letter-spacing:-.025em;margin-bottom:18px}
.thread h2 em{color:var(--red)}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 0}
.stepper button{border:1px solid var(--ink);background:none;border-radius:10px 10px 0 0;padding:10px 4px;cursor:pointer;font:600 13px var(--sans);display:flex;flex-direction:column;gap:2px;align-items:center}
.stepper button span{font-size:10px;letter-spacing:.14em;color:var(--red)}
.stepper button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.stepper button[aria-selected="true"] span{color:#f09b79}
.stages{background:var(--ink);color:var(--paper);border-radius:0 0 12px 12px;padding:22px 20px;min-height:200px}
.stage-no{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#e79c77}
.stage h3{font-size:30px;margin:14px 0 12px}
.stage-go{font:13px/1.5 var(--sans);color:#c6cbbf;margin:0}
.js .stage[hidden]{display:none}
.js .stage.in{animation:rise .4s ease both}
.fit{margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.fit summary{cursor:pointer;font-size:19px}
.fit p{margin:12px 0 0}
.route{display:grid;gap:0;border:1px solid var(--line);margin-top:10px}
.route a{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:14px;border-bottom:1px solid var(--line);text-decoration:none}
.route a:last-child{border:0}
.route a:hover{background:var(--green)}
.route b{font:600 12px var(--sans);color:var(--red);grid-row:span 2;padding-top:4px}
.route strong{font-weight:400;font-size:20px}
.route small{font:13px/1.45 var(--sans);color:var(--muted)}

.part-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.part-no{font-size:44px;line-height:.9;color:var(--red)}
.part-head h2{font-size:clamp(30px,7.6vw,48px);letter-spacing:-.02em}
.part-intro{font-size:19px;line-height:1.5;margin:16px 0 22px;max-width:46em}

/* chapter 1 strip */
.strip{display:grid;grid-template-columns:1fr 1.25fr;gap:2px;background:var(--ink);border:1px solid var(--ink)}
.frame{position:relative;display:block;overflow:hidden;height:220px;background:#fbfaf6}
.frame img,.frame .slice{width:100%;height:100%;object-fit:cover;filter:sepia(.18);transition:transform .7s}
.frame:first-child img{object-position:center 22%}
.frame:hover img,.frame:hover .slice{transform:scale(1.06)}
.frame-letter{grid-column:1/-1;height:170px}
.frame span{position:absolute;left:0;right:0;bottom:0;padding:9px 10px;background:#202722e0;color:var(--paper);font:12px/1.3 var(--sans);letter-spacing:.04em}
.frame span b{background:var(--red);padding:1px 6px;margin-right:7px;font-weight:600}
.strip-cap{font-size:16px;margin:12px 0 26px;color:var(--ink-2)}
.strip-cap strong{font-weight:400;font-size:20px;color:var(--ink);display:block}

/* timeline (record) */
.timeline{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 16px 20px;margin:0 0 24px}
.tl-lede{font:14px/1.5 var(--sans);color:var(--muted)}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:4px 0 14px}
.tabs button{flex:1 0 auto;min-height:44px;border:1px solid var(--line);background:none;border-radius:22px;padding:0 16px;cursor:pointer;font:600 15px var(--sans)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tl-panel .year{font-size:64px;line-height:1;color:var(--red)}
.tl-panel h3{font-size:24px;margin:8px 0 10px}
.tl-panel .mech{font:600 14px/1.5 var(--sans);background:var(--green);padding:10px 12px;border-radius:8px}
.tl-panel .lim{font:13px/1.6 var(--sans);color:var(--muted)}
.tl-panel .src{font:13px var(--sans)}
.js .tl-panel.in{animation:rise .35s ease both}

/* chapter 2 reach */
.reach{border:1px solid var(--line);background:#f8efdc;margin-bottom:24px;overflow:hidden}
.reach-art{display:block;height:210px;overflow:hidden}
.reach-art .slice{width:100%;height:100%}
.reach-text{padding:18px}
.reach-num{font:700 92px/1 var(--serif);color:#b52e20;letter-spacing:-.05em;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.reach-num span{font-size:46px}
.reach-toggle{display:flex;gap:6px;margin:4px 0 14px;flex-wrap:wrap}
.reach-toggle button{min-height:40px;border:1px solid var(--ink);background:none;border-radius:20px;padding:0 14px;font:600 12px var(--sans);cursor:pointer}
.reach-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.more{font:600 13px var(--sans)}

/* chapter 3 duel */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;background:var(--panel);border:1px solid var(--line);padding:18px 14px;margin-bottom:24px}
.book{text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center}
.book .label{font:600 10px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;min-height:2.6em}
.cover{width:118px;height:160px;margin:10px auto 14px;background:var(--red);color:#fff4da;display:grid;place-items:center;border-left:9px solid #873920;
  box-shadow:6px 6px 0 #c7c7b7;transform:rotate(-5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cover span{font-size:17px;line-height:1.2;letter-spacing:.04em}
.cover em{display:block;font-size:12px;text-transform:lowercase;margin:2px 0}
.book.dark .cover{background:var(--ink);border-color:#485045;transform:rotate(5deg)}
.book:hover .cover,.book:focus-visible .cover{transform:rotate(0) translateY(-6px)}
.book b{font-weight:400;font-size:15px;line-height:1.3}
.book small{font:12px/1.4 var(--sans);color:var(--muted);margin-top:3px}
.vs{grid-column:1/-1;grid-row:2;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.vs>span{display:block;font-size:19px}
.vs svg{display:block;width:150px;margin:8px auto;stroke:var(--red);stroke-width:3;fill:none}
.vs svg path{stroke-dasharray:420}
.vs a{display:block;text-decoration:none;font:13px var(--sans)}
.vs strong{display:block;font:48px/1 var(--serif);color:var(--red);margin:2px 0}
.duel-note{grid-column:1/-1;font:11px/1.5 var(--sans);color:var(--muted);text-align:center;margin:0}

/* chapter 4 seat */
.seat{background:var(--ink);color:var(--paper);margin-bottom:24px}
.seat-art{padding:20px 40px 6px;text-align:center}
.seat-art svg{max-height:170px;fill:none;stroke:#cfdbbc;stroke-width:5}
.seat-art .chair{stroke:#ee805d;stroke-width:7;transition:transform .5s}
.seat-art span{display:block;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-top:8px;color:#bdc8b7}
.seat[data-mode="decide"] .chair{transform:translateY(-6px)}
.seat-text{padding:10px 16px 18px}
.seat-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.seat-toggle button{min-height:44px;border:1px solid #57614f;background:none;border-radius:10px;color:var(--paper);font:600 13px var(--sans);cursor:pointer}
.seat-toggle button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.seat-steps{list-style:none;margin:0;padding:0}
.seat-steps a{display:grid;grid-template-columns:34px 1fr;padding:12px 4px;border-bottom:1px solid #57614f;text-decoration:none;font:15px var(--sans);transition:opacity .3s,padding .2s}
.seat-steps a b{color:#f09b79;grid-row:span 2}
.seat-steps small{color:#bdc8b7;font-size:12px}
.seat-steps a:hover{padding-left:10px}
.js .seat-steps li.dim a{opacity:.32}
.seat .note{color:#bdc8b7;margin:12px 0 0}

/* chapter 5 sequence */
.seq{background:var(--panel);border:1px solid var(--line);padding:18px 16px;margin-bottom:24px}
.seq-head h3{font-size:28px;margin-bottom:6px}
.seq-line{list-style:none;margin:0;padding:0}
.seq-line a{position:relative;display:block;padding:14px 0 14px 28px;text-decoration:none;border-left:2px solid var(--red);margin-left:6px}
.seq-line i{position:absolute;left:-8px;top:20px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--panel)}
.seq-line strong{font:700 30px/1 var(--serif);color:var(--red);display:block}
.seq-line b{font:600 13px var(--sans);display:block;margin:6px 0 2px}
.seq-line small{font:14px/1.45 var(--sans)}
.js .seq.in .seq-line li{animation:slide .6s ease both}
.js .seq.in .seq-line li:nth-child(2){animation-delay:.18s}
.js .seq.in .seq-line li:nth-child(3){animation-delay:.36s}
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.outcomes a{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-decoration:none;display:flex;flex-direction:column;gap:3px}
.outcomes b{font-weight:400;font-size:19px}
.outcomes small{font:12px/1.4 var(--sans);color:var(--muted)}
.ok,.no{align-self:flex-start;font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:10px;color:#fff}
.ok{background:#3f6b45}.no{background:var(--muted)}

/* ---- case cards: a swipeable shelf, each opens a sheet -------------------- */
.cases{margin:6px 0 8px}
.cases-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:600 12px var(--sans);color:var(--muted);margin:0 0 8px}
.cases-head span{letter-spacing:.06em}
.case-track{display:grid;gap:0}
.case{border-top:1px solid var(--line)}
.case>summary{list-style:none;cursor:pointer;padding:16px 40px 16px 4px;position:relative}
.case>summary::-webkit-details-marker{display:none}
.case>summary::after{content:"+";position:absolute;right:10px;top:16px;font:24px var(--sans);color:var(--red)}
.case[open]>summary::after{content:"–"}
.c-label{display:block;font:600 10px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.c-title{display:block;font-size:20px;line-height:1.28}
.c-open{display:none}
.case-body{padding:6px 4px 26px}
.js .case-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 16px;margin:0 -18px;scrollbar-width:none;overscroll-behavior-x:contain}
.js .case-track::-webkit-scrollbar{display:none}
.js .case{flex:0 0 min(80%,330px);scroll-snap-align:center;border:1px solid var(--ink);border-radius:14px;background:var(--paper-2);
  box-shadow:4px 4px 0 #d3d5c6;transition:transform .25s,box-shadow .25s}
.js .case:hover{transform:translateY(-3px);box-shadow:6px 7px 0 #cfd1c1}
.js .case>summary{padding:18px 18px 16px;min-height:188px;display:flex;flex-direction:column}
.js .case>summary::after{display:none}
.js .c-n{font:700 34px/1 var(--serif);color:var(--red);margin-bottom:12px}
.js .c-title{font-size:21px;flex:1}
.js .c-open{display:flex;align-items:center;gap:6px;margin-top:14px;font:600 13px var(--sans);color:var(--red)}
.js .case .case-body{display:none}
.c-n{display:none}
.js .c-n{display:block}
.dots{display:flex;gap:5px;justify-content:center;margin-top:2px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,width .2s}
.dots i.on{background:var(--red);width:16px;border-radius:3px}
.swipe-hint{font:12px var(--sans);color:var(--muted)}

.bridge{margin:26px 0 10px;padding:18px;border-left:3px solid var(--red);background:#e5e4d8}
.bridge p{font-size:19px;margin:6px 0 0}
.next{display:inline-flex;gap:8px;align-items:baseline;margin-top:14px;font:600 13px var(--sans);text-decoration:none;color:var(--red);min-height:32px}
.next span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---- case body content (from the investigation) --------------------------- */
.case-body h3,#sheetBody h3{font-size:23px;margin:22px 0 10px}
.case-body .large,#sheetBody .large{font-size:21px;line-height:1.45}
#sheetBody img{display:block;width:100%;height:auto}
#sheetBody figure{margin:16px 0}
#sheetBody figcaption{font:12px/1.6 var(--sans);color:var(--muted);padding:8px 0}
#sheetBody .split,#sheetBody .essay-grid,#sheetBody .case-study{display:block}
#sheetBody .pull,.case-body .pull{font-size:25px;line-height:1.3;border-left:3px solid var(--red);padding:6px 0 6px 18px;margin:24px 0}
#sheetBody .finding,.case-body .finding{background:#e2e3d6;padding:14px;font:14px/1.7 var(--sans);margin:16px 0;border-radius:6px}
#sheetBody .archive-tag,.case-body .archive-tag,#sheetBody .case-no,.case-body .case-no{font:600 11px var(--sans);letter-spacing:.1em;color:var(--red);text-transform:uppercase;margin:22px 0 8px}
#sheetBody .comparison,.case-body .comparison{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0;display:block;overflow-x:auto}
#sheetBody .comparison th,#sheetBody .comparison td,.case-body .comparison td,.case-body .comparison th{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line);min-width:120px}
#sheetBody .comparison th{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em}
#sheetBody .quote,.case-body .quote{background:var(--green);padding:18px;font-size:22px;line-height:1.3;margin:16px 0}
#sheetBody .quote small{display:block;font:11px var(--sans);text-transform:uppercase;letter-spacing:.08em;margin-top:12px}
#sheetBody .source,.case-body .source{font:13px var(--sans);display:inline-block;margin:6px 0}
#sheetBody .note{font-size:13px}
#sheetBody .steps,.case-body .steps{display:grid;gap:10px;margin:16px 0}
#sheetBody .step{border-top:1px solid var(--line);padding-top:10px}
#sheetBody .step p{font-size:15px}
#sheetBody .number{font:600 12px var(--sans);color:var(--red)}
#sheetBody .label{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase}
#sheetBody details{border-top:1px solid var(--line);padding:14px 0}
#sheetBody summary{font-size:19px;cursor:pointer}
#sheetBody .thesis{display:block}
#sheetBody .document{background:#dad9cd;padding:12px}
#sheetBody .portrait img{max-height:520px;object-fit:cover;object-position:center 28%}
#sheetBody .eyebrow{margin-top:4px}
#sheetBody [style*="max-width"]{max-width:none!important}
#sheetBody .model,#sheetBody [class*="grid"]{max-width:100%}
#sheetBody a[href^="http"]::after{content:""}

/* ---- relationship index --------------------------------------------------- */
.link-filter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:16px 0 12px}
.link-filter button{flex:none;min-height:40px;min-width:48px;border:1px solid var(--ink);background:none;border-radius:20px;padding:0 14px;font:600 13px var(--sans);cursor:pointer}
.link-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rels{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rel{border:1px solid var(--line);border-radius:12px;background:var(--paper-2);transition:opacity .25s,transform .25s}
.rel[hidden]{display:none}
.rel a{display:block;padding:14px 16px;text-decoration:none}
.rel-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.chip{font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px solid #d8b3a6;padding:3px 8px;border-radius:10px}
.kind{font:600 12px var(--sans);background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:10px}
.who{display:block;font-size:19px;line-height:1.3;margin-bottom:6px}
.what{display:block;font:14px/1.55 var(--sans);color:var(--ink-2)}
.go{display:inline-block;margin-top:8px;font:600 13px var(--sans);color:var(--red)}

/* ---- synthesis ------------------------------------------------------------ */
.concl{display:grid;gap:10px;margin:10px 0 22px}
.concl article{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px}
.concl b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:700 14px var(--sans)}
.concl h3{font-size:22px;margin:10px 0 8px}
.concl p{font-size:16px;margin:0}
.specific h3{font-size:24px;margin-bottom:10px}
.closing{background:var(--ink);color:var(--paper);padding:24px 20px;margin:26px 0 6px;display:grid;gap:22px}
.closing h2{font-size:clamp(32px,8vw,52px);margin:8px 0 14px}
.closing .eyebrow{color:#e79c77}
.closing-art{display:block;overflow:hidden;border:1px solid #57614f}
.closing-art .slice{transition:transform .8s}
.closing-art:hover .slice{transform:scale(1.04)}

/* ---- finder ---------------------------------------------------------------- */
.finder label{display:block;font:13px var(--sans);margin-bottom:8px}
#case-search{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--ink);border-radius:12px;background:#fbf9f3;font:17px var(--sans);color:var(--ink)}
.quick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px 0}
.quick button{flex:none;min-height:36px;border:1px solid var(--line);background:none;border-radius:18px;padding:0 12px;font:13px var(--sans);cursor:pointer}
#result-count{font:13px var(--sans);color:var(--muted);margin:8px 0}
.dir{list-style:none;padding:0;margin:0}
.dir li{border-bottom:1px solid var(--line)}
.dir li[hidden]{display:none}
.dir a{display:block;padding:12px 2px;text-decoration:none}
.dir span{display:block;font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.dir mark{background:#f3d9a8;color:inherit}

/* ---- sources (reading room) ------------------------------------------------ */
.sources .evidence-key{display:grid;gap:10px;margin:18px 0}
.sources .evidence-key>div{padding:14px;background:var(--panel);font:14px/1.6 var(--sans);border-radius:10px}
.sources .evidence-key strong{display:block;margin-bottom:6px}
.sources details{border-top:1px solid var(--line);padding:14px 0}
.sources summary{font-size:18px;cursor:pointer}
.sources ul{font:14px/1.7 var(--sans);padding-left:20px}
.sources li{margin:6px 0;overflow-wrap:anywhere}
.sources p{font-size:15px}
.transcript .t-ch{margin:18px 0 6px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.transcript p{font-size:15px;margin:0 0 8px}
.transcript b{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* ---- share shelf ----------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tile-pick{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;background:var(--paper-2);border:1px solid var(--ink);border-radius:12px;padding:8px;transition:transform .2s}
.tile-pick:hover{transform:translateY(-3px)}
.tile-pick img{width:100%;height:auto;border-radius:6px;display:block;background:var(--panel)}
.tile-pick b{font:600 11px var(--sans);letter-spacing:.1em;color:var(--red)}
.tile-pick span{font-size:14px;line-height:1.3}
.sh-card{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;display:block}
.sh-post{font-size:16px;margin:12px 0}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-acts .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:12px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:600 14px var(--sans);text-decoration:none;cursor:pointer;padding:0 10px}
.sh-acts .btn.ghost{background:none;color:var(--ink)}
.sh-acts .btn svg{width:16px;height:16px}
.sh-acts .wide{grid-column:1/-1}
.sh-masto{display:none;grid-column:1/-1;gap:6px}
.sh-masto.on{display:flex}
.sh-masto input{flex:1;min-height:46px;border:1px solid var(--ink);border-radius:12px;padding:0 12px;font:15px var(--sans);background:#fff}
.sh-small{font:12px/1.5 var(--sans);color:var(--muted);margin:10px 0 0}

.card-page{border:0}
.card-page h2{font-size:clamp(28px,7vw,44px)}
.card-img{width:100%;max-width:640px;height:auto;display:block;border:1px solid var(--ink);border-radius:10px}
.card-foot{margin-top:12px}
.card-go{text-decoration:none}

/* ---- sheets ---------------------------------------------------------------- */
.sheet{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;height:92dvh;background:var(--paper);color:var(--ink);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px #0004}
.sheet::backdrop{background:#141a16a8}
.sheet[open]{animation:sheet-up .32s cubic-bezier(.2,.8,.2,1)}
.sheet-in{display:flex;flex-direction:column;height:100%}
.sheet-bar{position:relative;display:flex;align-items:center;gap:6px;padding:14px 10px 8px;border-bottom:1px solid var(--line);flex:none}
.grab{position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
.sheet-count{flex:1;font:600 12px var(--sans);letter-spacing:.08em;color:var(--muted);text-align:center}
.sheet-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font:20px var(--sans);display:grid;place-items:center;flex:none}
.sheet-btn svg{width:18px;height:18px}
.sheet-btn:disabled{opacity:.3}
.sheet-btn.done{border-color:var(--red);color:var(--red)}
.sheet-scroll{overflow-y:auto;overscroll-behavior:contain;padding:16px 18px calc(30px + var(--safe-b));flex:1}
.sheet-label{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
.sheet-title{font-size:28px;letter-spacing:-.01em;margin-bottom:18px;outline:0}
.share-sheet{height:auto;max-height:92dvh}

/* ---- footer ----------------------------------------------------------------- */
.foot{border-top:1px solid var(--ink);padding:26px 0 110px;font:13px/1.7 var(--sans);color:var(--muted)}
.foot strong{color:var(--ink)}
.linklike{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font:inherit;color:inherit}

/* ---- narrator, house player restyled ------------------------------------- */
.narr-pill{border-radius:24px;font-family:var(--sans);background:var(--ink);color:var(--paper);border-color:var(--ink);bottom:calc(.75rem + var(--safe-b))}
.narr-pill .ico{color:var(--hot)}
.narr-pill .meta{color:#aeb4a8}
.narr-bar{padding-bottom:var(--safe-b)}

/* ---- motion ------------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:.2;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.js .duel.in .vs svg path{animation:draw 1.1s .2s ease both}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off .reveal,.motion-off .plate img{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---- larger screens: still the same app, more room ------------------------ */
@media (min-width:560px){
  .tool span{display:inline}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .concl{grid-template-columns:repeat(3,1fr)}
  .frame{height:280px}
  .plate{aspect-ratio:16/7}
  .strip{grid-template-columns:.8fr 1.2fr 1fr}
  .frame-letter{grid-column:auto;height:280px}
}
@media (min-width:880px){
  .wrap{padding:0 32px}
  .hero{max-width:1240px;margin:0 auto;min-height:620px;display:flex;align-items:center}
  .hero-art{position:absolute;top:0;right:0;bottom:0;width:70%;aspect-ratio:auto;background:none}
  .hero-art img{object-fit:contain;object-position:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
  .badge{left:auto;right:18px;bottom:18px}
  .hero-text{position:relative;padding:40px 0 40px 40px;max-width:520px}
  .plate{aspect-ratio:auto;max-width:640px}
  .plate img{height:auto}
  .stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:0 24px;align-items:start}
  .stage-art{grid-row:span 4;margin:0}
  .stages{min-height:170px}
  .route{grid-template-columns:repeat(5,1fr)}
  .route a{grid-template-columns:1fr;border-bottom:0;border-right:1px solid var(--line)}
  .route b{grid-row:auto}
  .reach{display:grid;grid-template-columns:1.4fr 1fr}
  .reach-art{height:auto;min-height:320px}
  .duel{grid-template-columns:1fr .8fr 1fr;padding:30px}
  .vs{grid-column:2;grid-row:1;border:0;align-self:center}
  .cover{width:170px;height:220px}
  .cover span{font-size:23px}
  .seat{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .seq{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:28px}
  .seq-line{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .seq-line a{border-left:0;border-top:2px solid var(--red);margin:14px 0 0;padding:22px 0 0}
  .seq-line i{left:0;top:-8px}
  .outcomes{grid-column:2}
  .rels{grid-template-columns:1fr 1fr}
  .closing{grid-template-columns:1.25fr .9fr;align-items:center;padding:40px}
  .dir{columns:2;column-gap:30px}
  .dir li{break-inside:avoid}
  .sources .evidence-key{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .sheet{max-width:760px;margin:auto auto 0;}
  .js .case{flex-basis:300px}
}
@media print{
  .appbar,.rail,.narr,.circulate,.finder,.progress,.listen-cta{display:none!important}
  .js .case-track{display:block}
  .js .case .case-body{display:block}
  body{background:#fff}
}