:root{--paper:#eee8dc;--ink:#191813;--muted:#716b61;--line:rgba(25,24,19,.2);--accent:#b77d35;--wrap:min(90vw,1280px);--serif:"Newsreader",Georgia,serif;--sans:"Manrope",Arial,sans-serif;--mono:"DM Mono",monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:400 16px/1.65 var(--sans);text-rendering:optimizeLegibility}img{display:block;width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.story-nav{position:absolute;z-index:10;top:0;left:5vw;right:5vw;height:5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.25);color:#f5eee2;font:.58rem var(--mono);text-transform:uppercase;letter-spacing:.09em}.story-nav span{color:var(--accent)}
.story-hero{position:relative;isolation:isolate;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;color:#f4ecdf;background:#15130f}.story-noah .story-hero{background:#15130f url("assets/noah-ark/noah-and-the-ark.png") center/cover no-repeat}.story-hero-media,.story-hero-shade{position:absolute;z-index:-3;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px)}.story-hero-media{object-fit:cover}.story-noah .story-hero-media{filter:blur(7px) saturate(.72);transform:scale(1.035)}.story-hero-shade{z-index:-2;background:linear-gradient(90deg,rgba(8,8,7,.95),rgba(8,8,7,.38)),linear-gradient(0deg,rgba(8,8,7,.9),transparent 68%)}.story-hero-inner{width:var(--wrap);margin:0 auto 7vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.4fr);gap:7vw;align-items:end}.story-hero-copy{min-width:0}.story-kicker,.story-number{margin:0;color:#d5a45d;font:.62rem var(--mono);text-transform:uppercase;letter-spacing:.11em}.story-hero h1{max-width:900px;margin:1.2rem 0 1.4rem;font:300 clamp(4.5rem,9vw,10rem)/.76 var(--serif);letter-spacing:-.055em}.story-hero-copy>p:not(.story-kicker){max-width:680px;margin:0;color:rgba(244,236,223,.72);font:300 clamp(1.15rem,1.7vw,1.55rem)/1.35 var(--serif)}.story-square{position:relative;aspect-ratio:1;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.35);box-shadow:0 20px 70px rgba(0,0,0,.4)}.story-square img{height:100%;object-fit:cover}.story-noah .story-square img{object-position:21% center}.story-bird .story-hero{background:#24333c url("assets/noah-ark/tiny-bird-background.png") center/cover no-repeat}.story-bird .story-hero-media{opacity:1;filter:saturate(.82) brightness(.72)}.story-bird .story-hero-shade{background:linear-gradient(90deg,rgba(8,20,29,.88),rgba(8,20,29,.15) 72%),linear-gradient(0deg,rgba(8,20,29,.65),transparent 60%)}.story-wasteland .story-hero-media{filter:saturate(.65) contrast(1.08)}
.page-player{width:var(--wrap);margin:-1px auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;padding:1.1rem 1.3rem;border:1px solid #9b8061;background:#191713;color:#f3eadb}.page-player button{display:flex;align-items:center;gap:.75rem;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:.61rem var(--mono);text-transform:uppercase;letter-spacing:.08em}.page-play{width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%}.page-play i{width:0;height:0;margin-left:3px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}.page-player.playing .page-play i{width:8px;height:11px;margin:0;border:0;border-inline:3px solid currentColor}.page-wave{height:50px;min-width:0}.page-wave canvas{display:block;width:100%;height:100%}.page-time{display:flex;gap:.6rem;color:#b5aa99;font:.53rem var(--mono)}
.story-section{width:var(--wrap);margin:auto;padding:clamp(6rem,10vw,11rem) 0;border-bottom:1px solid var(--line)}.story-lead{display:grid;grid-template-columns:.35fr 1fr .75fr;gap:5vw;align-items:start}.story-lead h2{margin:-.12em 0 0;font:300 clamp(3rem,5.4vw,6rem)/.9 var(--serif);letter-spacing:-.045em}.story-lead>p:last-child{margin:0;color:var(--muted);line-height:1.85}.story-notes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:5rem;border-block:1px solid var(--line)}.story-notes article{min-height:17rem;padding:1.6rem 2rem 2rem 0;display:flex;flex-direction:column}.story-notes article+article{padding-left:2rem;border-left:1px solid var(--line)}.story-notes span,.credit-line{color:#9a662c;font:.58rem var(--mono);text-transform:uppercase;letter-spacing:.09em}.story-notes h3{margin:auto 0 .7rem;font:400 1.65rem/1 var(--serif)}.story-notes p{margin:0;color:var(--muted);font-size:.85rem}
.lyrics{width:min(88vw,820px);margin:auto;padding:clamp(7rem,11vw,12rem) 0}.lyrics header{display:flex;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--line);font:.58rem var(--mono);text-transform:uppercase;letter-spacing:.09em}.lyrics article{padding-top:4rem;font:300 clamp(1.35rem,2.2vw,2rem)/1.7 var(--serif)}.lyrics h3{margin:3.5rem 0 1rem;color:#93602a;font:.58rem var(--mono);text-transform:uppercase;letter-spacing:.12em}.lyrics p{margin:0 0 1.4rem}.lyrics .refrain{padding-left:1.5rem;border-left:2px solid #c08a47}.lyrics .spoken{color:var(--muted);font-style:italic}.story-credit{width:var(--wrap);margin:auto;padding:2rem 0 5rem;display:flex;justify-content:space-between;gap:2rem;color:var(--muted);font-size:.7rem}.story-credit p{margin:0}.story-back{display:inline-block;border-bottom:1px solid var(--line)}
@media(max-width:800px){.story-nav{height:4rem}.story-hero{min-height:82svh}.story-hero-inner{grid-template-columns:1fr;margin-bottom:5vh}.story-hero h1{font-size:17vw}.story-square{display:none}.page-player{grid-template-columns:1fr auto}.page-wave{grid-column:1 / -1;grid-row:2}.story-lead{grid-template-columns:1fr;gap:1.4rem}.story-notes{grid-template-columns:1fr}.story-notes article,.story-notes article+article{min-height:0;padding:1.5rem 0;border-left:0;border-top:1px solid var(--line)}.story-notes h3{margin-top:2rem}.story-credit{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-hero video{display:none}}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}