/* ================================================================ NOBODY! — shared stylesheet for every SCENE (child) page, both shows. Edit here once; all scene pages update. Per-page accent: put one class on — act-gold (Nobody Loses!, Act One) act-haze (Nobody Loses!, Act Two) act-climb (Nobody Wins!, Act Three) act-blaze (Nobody Wins!, Act Four) Colour language: --a / --a-rgb = the act accent (story/structure); gold = the "music" accent (players + song markers), fixed across acts. ================================================================ */ *,*::before,*::after{box-sizing:border-box} :root{ --bg0:#0b0a12; --bg1:#151024; --ink:#ece8f2; --mut:#a49db4; --faint:#6a647c; --gold:#f5c451; --gold2:#ffd884; --haze:#8b6fc4; --climb:#6fb0d8; --blaze:#ff9e3d; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.09); } html{-webkit-text-size-adjust:100%} body{ margin:0; color:var(--ink); font:16px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; background: radial-gradient(1100px 460px at 50% -8%, rgba(245,196,81,.16), transparent 60%), radial-gradient(900px 400px at 50% 2%, rgba(139,111,196,.14), transparent 58%), linear-gradient(180deg,var(--bg0),var(--bg1) 60%,#0a0812); background-attachment:fixed; min-height:100vh; padding:0 20px 64px; --a:var(--gold); --a-rgb:245,196,81; /* default = gold */ } body.act-gold {--a:var(--gold); --a-rgb:245,196,81} body.act-haze {--a:var(--haze); --a-rgb:139,111,196} body.act-climb{--a:var(--climb); --a-rgb:111,176,216} body.act-blaze{--a:var(--blaze); --a-rgb:255,158,61} .wrap{max-width:760px;margin:0 auto} a{color:var(--gold2)} /* breadcrumb */ .crumb{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline; padding:20px 0 0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px} .crumb a{color:var(--a);text-decoration:none;letter-spacing:.12em;text-transform:uppercase} .crumb a:hover{color:var(--gold2)} .crumb span{color:var(--faint);letter-spacing:.12em;text-transform:uppercase} /* scene header */ .scene-head{text-align:center;padding:26px 0 8px;border-bottom:1px solid var(--line);margin-bottom:22px} .scene-no{font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase; font-size:12px;color:var(--a)} .scene-head h1{margin:.14em 0 .12em;font-weight:800;line-height:1.02; font-size:clamp(30px,7vw,52px);color:var(--ink); text-shadow:0 0 26px rgba(var(--a-rgb),.16)} .scene-meta{margin:0;color:var(--mut);font-style:italic;font-size:14px} /* player (music = gold) */ .player{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold); border-radius:12px;padding:14px 16px;margin:0 0 30px} .player-label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--gold2);margin-bottom:10px} .player-label::before{content:"♪";margin-right:7px;color:var(--gold)} .suno-embed{border:0;border-radius:8px;width:100%;display:block} .suno-link{display:inline-block;margin-top:8px;font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px;letter-spacing:.08em;color:var(--faint);text-decoration:none} .suno-link:hover{color:var(--gold2)} .player + .player{margin-top:-14px} /* the book */ .book{max-width:40em;margin:0 auto} .book .stage{color:#cfc8dd;font-style:italic;margin:0 0 18px;line-height:1.72} .book .stage b{color:var(--gold2);font-style:normal;font-weight:600} .book .stage em{color:#efe9f6;font-style:normal;font-weight:600} .book .line{margin:0 0 16px;line-height:1.7} .book .who{display:inline;color:var(--a);font-weight:700; text-transform:uppercase;letter-spacing:.09em;font-size:.86em} .book .cue{color:#c7bfda;font-style:italic;font-size:.93em} .book .line em{font-style:italic;color:#fff} /* section markers inside the book (e.g. "THE REVEAL") */ .book .beat{text-align:center;color:var(--a);font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:26px 0 18px;opacity:.85} /* slim "the song plays here" marker (music = gold) */ .song-cue{display:flex;align-items:center;gap:16px;margin:30px 0} .song-cue::before,.song-cue::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(245,196,81,.45),transparent)} .song-cue .cue-t{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px; letter-spacing:.08em;text-transform:uppercase;color:var(--gold2);white-space:nowrap;text-align:center} .book .button{border-top:1px solid var(--line);padding-top:18px;margin-top:26px} .book .button .blabel{color:var(--a);font-style:normal;font-weight:700; letter-spacing:.1em;text-transform:uppercase;font-size:.82em} /* scene nav */ .scene-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; margin:40px auto 0;max-width:40em} .scene-nav a{border:1px solid var(--line);border-radius:999px;padding:10px 18px; text-decoration:none;color:var(--gold2);font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px;letter-spacing:.03em;background:var(--panel)} .scene-nav a:hover{border-color:rgba(var(--a-rgb),.5);background:rgba(var(--a-rgb),.08)} footer{max-width:40em;margin:40px auto 0;border-top:1px solid var(--line);padding-top:20px; text-align:center;color:var(--faint);font-size:12.5px;line-height:1.7} footer .disc{font-style:italic;color:var(--mut);max-width:32em;margin:0 auto} @media(max-width:520px){ body{padding:0 15px 48px} }