:root{--case-cyan:#45e3d4;--case-gold:#f0bd59;--case-ink:#071114;--case-paper:#edf1eb;--case-line:rgba(7,17,20,.18)}
.casebook-page{background:var(--case-paper);color:var(--case-ink)}
.casebook-page .world-banner{min-height:clamp(110px,16vw,210px)}
.breadcrumbs{max-width:1180px;margin:auto;padding:1rem 2rem;font:500 .78rem/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.breadcrumbs a{color:#086b69}
.breadcrumbs span{margin-left:.7rem}
.casebook-hero{max-width:1180px;margin:auto;padding:clamp(3rem,8vw,7rem) 2rem;display:grid;grid-template-columns:1.7fr 1fr;gap:4rem;align-items:end}
.casebook-hero h1{font:600 clamp(3.5rem,8vw,7.8rem)/.85 'Playfair Display',serif;letter-spacing:-.055em;margin:.5rem 0 1.5rem}
.casebook-hero h1 em{color:#087a75}
.casebook-hero p:not(.eyebrow){font-size:1.18rem;line-height:1.7;max-width:680px}
.eyebrow,.kicker{font:500 .78rem/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.15em;color:#087a75}
.casebook-hero dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid var(--case-line)}
.casebook-hero dl div{padding:1.2rem .5rem;border-right:1px solid var(--case-line)}
.casebook-hero dt{font:600 2.2rem 'Playfair Display',serif}
.casebook-hero dd{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.spoiler-desk,.case-section,.desk-nav,.casebook-sources{max-width:1180px;margin:auto}
.spoiler-desk{background:#fff;padding:2rem;display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;border:1px solid var(--case-line)}
.spoiler-desk h2,.section-heading h2{font:600 clamp(2rem,4vw,4rem)/1 'Playfair Display',serif;margin:.4rem 0 1rem}
.spoiler-desk fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.spoiler-desk legend{position:absolute;clip:rect(0 0 0 0)}
.spoiler-desk label{display:block;cursor:pointer}
.spoiler-desk input{position:absolute;opacity:0}
.spoiler-desk label span{display:flex;min-height:100%;flex-direction:column;gap:.4rem;padding:1rem;border:1px solid var(--case-line)}
.spoiler-desk input:checked+span{background:var(--case-ink);color:white;border-color:var(--case-cyan)}
.spoiler-desk small{opacity:.7}
.desk-nav{display:flex;flex-wrap:wrap;gap:.6rem;padding:2rem 0}
.desk-nav a,.chronology-controls button{border:1px solid var(--case-line);background:transparent;color:inherit;padding:.7rem 1rem;text-decoration:none;font:500 .78rem 'DM Mono',monospace;text-transform:uppercase}
.desk-nav a:hover,.chronology-controls button[aria-pressed=true]{background:var(--case-ink);color:white}
.case-section{padding:clamp(4rem,8vw,7rem) 2rem;border-top:1px solid var(--case-line)}
.section-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:end;margin-bottom:2.5rem}
.section-heading>p{font-size:1.05rem;line-height:1.7}
.ink-section{max-width:none;background:var(--case-ink);color:#eef5f0}
.ink-section>*{max-width:1140px;margin-left:auto;margin-right:auto}
.chronology-controls{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.chronology-controls div{display:flex;flex-wrap:wrap;gap:.5rem}
.case-timeline{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--case-line);border:1px solid var(--case-line)}
.case-timeline li{background:var(--case-paper);padding:1.4rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;min-height:190px}
.case-index{font:500 .72rem 'DM Mono',monospace;color:#087a75}
.case-timeline h3{font:600 1.35rem 'Playfair Display',serif;margin:.6rem 0}
.case-timeline p{line-height:1.55;margin:0}
.format{font:500 .68rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.format.novel{color:#056c68}
.format.comic{color:#9b5616}
.format.companion{color:#6b4a91}
.section-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.section-actions a,.audio-grid a{color:inherit;font-weight:700}
.relationship-map{position:relative;display:grid;place-items:center;min-height:520px}
.relation-centre{position:absolute;z-index:2}
.relation-centre a{display:grid;place-items:center;width:190px;height:190px;border-radius:50%;background:var(--case-cyan);color:var(--case-ink);text-decoration:none;text-align:center}
.relation-centre span,.relation-ring span{font:500 .68rem 'DM Mono',monospace;text-transform:uppercase}
.relation-centre b{font:600 1.8rem 'Playfair Display',serif}
.relation-ring{width:min(760px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 18rem}
.relation-ring a{border:1px solid rgba(255,255,255,.2);padding:1rem;color:white;text-decoration:none;display:flex;flex-direction:column;gap:.35rem}
.relation-ring a:hover{border-color:var(--case-cyan)}
.reveal-note,.case-note{font:500 .75rem 'DM Mono',monospace;letter-spacing:.04em}
.river-map{display:grid;grid-template-columns:1fr 90px 1fr;gap:1rem;align-items:center}
.river-map>article{background:white;border:1px solid var(--case-line);padding:2rem}
.river-map h3{font:600 2rem 'Playfair Display',serif;margin:.5rem 0}
.river-map article>span,.tributaries small{font-size:.76rem;color:#52615d}
.thames-line{height:8px;background:#087a75;position:relative}
.thames-line span{position:absolute;transform:rotate(-90deg);font:500 .65rem 'DM Mono',monospace;top:-2rem;left:1.2rem}
.tributaries{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tributaries article{padding:1.3rem;border-top:3px solid var(--case-gold);background:#e4ebe5}
.tributaries small{display:block;margin-top:.5rem;line-height:1.5}
.glossary-search{display:block;max-width:520px;margin:0 0 2rem}
.glossary-search span{display:block;font:.75rem 'DM Mono',monospace;text-transform:uppercase;margin-bottom:.5rem}
.glossary-search input{width:100%;font:inherit;padding:1rem;background:#102125;border:1px solid rgba(255,255,255,.25);color:white}
.magic-glossary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15)}
.magic-glossary article{background:var(--case-ink);padding:1.5rem}
.magic-glossary span,.audio-grid span,.rpg-grid span{font:.68rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--case-cyan)}
.magic-glossary h3,.audio-grid h3,.rpg-grid h3{font:600 1.5rem 'Playfair Display',serif;margin:.6rem 0}
.magic-glossary p,.audio-grid p,.rpg-grid p{line-height:1.6}
.audio-grid,.rpg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.audio-grid article,.rpg-grid article{padding:1.5rem;background:white;border:1px solid var(--case-line)}
.audio-grid .audio-lead,.rpg-grid .rpg-lead{grid-row:span 2;background:var(--case-ink);color:white}
.audio-grid .audio-lead h3,.rpg-grid .rpg-lead h3{font-size:2rem}
.affiliate-ready{margin-top:1rem;padding:1.2rem;border-left:4px solid var(--case-gold);background:#e4ebe5}
.affiliate-ready p{margin:.3rem 0}
.tabletop-section{background:#e1e7df}
.casebook-sources{margin-top:3rem;margin-bottom:3rem;padding:2rem;border:1px solid var(--case-line)}
.casebook-sources div{display:flex;gap:1rem;flex-wrap:wrap}
.casebook-sources a{color:#086b69}
.appearance-results>h3{font:600 2rem 'Playfair Display',serif}.appearance-results>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16)}.appearance-results a{padding:1rem;background:var(--case-ink);color:white;text-decoration:none;display:flex;flex-direction:column}.appearance-results span{color:var(--case-cyan);font:.68rem 'DM Mono',monospace;text-transform:uppercase}.atlas-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem}.atlas-map{position:relative;min-height:500px;overflow:hidden;background:linear-gradient(165deg,#dfe9e3,#a8c5bd);border:1px solid var(--case-line)}.atlas-map:before{content:"";position:absolute;inset:43% -10%;height:45px;background:#087a75;transform:rotate(8deg);box-shadow:0 0 0 12px rgba(255,255,255,.18)}.atlas-map button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;padding:.55rem .7rem;border:1px solid var(--case-ink);background:var(--case-paper);font:600 .72rem 'DM Mono',monospace;cursor:pointer}.atlas-map button[aria-pressed=true]{background:var(--case-ink);color:white;border-color:var(--case-cyan)}.place-file{background:var(--case-ink);color:white;padding:2rem}.place-file>span,.place-file small,.international-grid span,.collect-grid span,.community-grid label>span,.community-grid aside>span{font:.7rem 'DM Mono',monospace;text-transform:uppercase;color:var(--case-cyan)}.place-file h3{font:600 2.4rem 'Playfair Display',serif}.place-file li{margin:.6rem 0}.comic-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15)}.comic-guide article{padding:1.4rem;background:var(--case-ink)}.comic-guide span{color:var(--case-cyan);font:.68rem 'DM Mono',monospace;text-transform:uppercase}.comic-guide h3,.international-grid h3,.collect-grid h3,.community-grid h3{font:600 1.45rem 'Playfair Display',serif}.comic-guide small{opacity:.7;line-height:1.5}.history-line{list-style:none;padding:0;margin:0}.history-line li{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding:1.4rem 0;border-top:1px solid var(--case-line)}.history-line time{font:.74rem 'DM Mono',monospace;text-transform:uppercase;color:#087a75}.history-line h3{margin:0 0 .4rem;font:600 1.45rem 'Playfair Display',serif}.history-line p{margin:0;line-height:1.6}.international-grid,.collect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.international-grid article,.collect-grid article{background:white;border:1px solid var(--case-line);padding:1.4rem}.collecting-section{background:#e1e7df}.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.community-grid form{display:grid;gap:1rem}.community-grid label{display:grid;gap:.5rem}.community-grid select,.community-grid textarea{font:inherit;padding:1rem;color:white;background:#102125;border:1px solid rgba(255,255,255,.25)}.community-grid textarea{min-height:140px;resize:vertical}.community-grid button{width:max-content;padding:.8rem 1rem;background:var(--case-cyan);border:0;font-weight:700}.community-grid aside{padding:1.5rem;border:1px solid rgba(255,255,255,.2)}
@media(max-width:800px){.appearance-results>div,.comic-guide,.international-grid,.collect-grid,.atlas-layout,.community-grid{grid-template-columns:1fr}.atlas-map{min-height:400px}.history-line li{grid-template-columns:1fr;gap:.5rem}.casebook-hero,.spoiler-desk,.section-heading{grid-template-columns:1fr;gap:1.5rem}
.casebook-hero dl{grid-template-columns:repeat(3,1fr)}
.spoiler-desk fieldset,.case-timeline,.magic-glossary,.audio-grid,.rpg-grid{grid-template-columns:1fr}
.chronology-controls{align-items:flex-start;flex-direction:column}
.relation-ring{grid-template-columns:1fr;gap:.5rem;padding-top:220px}
.relation-centre{top:10px}
.relationship-map{align-items:start}
.river-map{grid-template-columns:1fr}
.thames-line{height:55px}
.thames-line span{transform:none;top:1.25rem;left:1rem;color:white}
.tributaries{grid-template-columns:1fr}
.audio-grid .audio-lead,.rpg-grid .rpg-lead{grid-row:auto}
.desk-nav{padding:1rem 2rem}
.casebook-sources{margin:2rem}
}
