/* The approved tactile surface, shared across the site in neutral charcoal. */
:root{--bg:#050607;--panel:#0b0c0e;--text:#e9e7df;--muted:#b3b1ab;--gold:#b8a782;--line:#aaa08a33}
body{background:#050607;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('assets/theater-texture.webp') center/cover no-repeat;filter:grayscale(1) brightness(.43) contrast(1.08);opacity:.93}
header{background:#050607b8;border-color:var(--line);box-shadow:0 6px 22px #0005;backdrop-filter:blur(10px)}
header nav a{font-size:12px;color:#c4c1b8}
header nav a.active{color:#e7dbc1}
.brand{color:#efede7}
.home-hero{background:transparent;height:calc(100svh - 104px);min-height:720px;max-height:920px}
.hero-art{width:50.2%;height:100%;opacity:1;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 76%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 92%,transparent);mask-composite:intersect}
.hero-art img{width:215%;height:auto;max-width:none;left:-30%;top:-12%;filter:saturate(.78) brightness(.98)}
.hero-shade{pointer-events:none;background:linear-gradient(0deg,#05060790,transparent 25%)}
.hero-copy{margin-left:49%;padding:67px 7% 100px 3%;max-width:none}
.hero-copy h1{font-size:clamp(59px,6.1vw,88px);color:#eeede8;letter-spacing:-.045em;margin:26px 0}
.hero-copy h1 em{color:#d8d6cb}
.hero-quote{font-size:28px;color:#d9ceb6}
.hero-copy .intro{font-size:15px;color:#cbc9bf;max-width:41ch;margin-bottom:30px}
.hero-copy .text-link{display:block;margin:20px 0 0;width:max-content;color:#c0b397}
.button,.button.gold{background:linear-gradient(135deg,#151719dc,#090b0deb);border-color:#a9987280;color:#e1d5b8;box-shadow:inset 0 0 15px #ffffff04}
.button:hover,.button.gold:hover{background:#24272a;color:#fff;border-color:#d6c8a8}
.story,.gateway,.cast-intro,.cast-content,.world-intro,.avalor-section,.mutara-introduction,.mutara-society,.becomer-section,.mutara-learning,.zillem-introduction,.zillem-forms,.nivara-section,.zillem-catalog,.zillem-life,.eidolon-section,.public-hub,.guide-view,.archive,.night-updates{background:transparent}
.section-pad{position:relative}
.section-pad+.section-pad{border-top-color:var(--line)}
.gateway-card,.nation-card,.city-card,.forms-grid article,.hub-coming,.learning-row,.night-account-banner,.creature-locked,.result-card{background-color:#090a0bbf;border-color:var(--line)}
.night-account-banner{background:#0a0b0dab}
.night-updates{background:#03040570}
.night-dialog,.music-panel{background:linear-gradient(#070809dc,#070809ed),url('assets/theater-texture.webp') center/cover}
.night-dialog input,.night-tabs button,.music-panel .button{background-color:#08090b}
.night-dialog::backdrop{background:#020304de}
dialog{background:#090b0d;color:var(--text);border-color:var(--line)}
#reader{background:linear-gradient(#070809e8,#070809f5),url('assets/theater-texture.webp') center/cover fixed}
.reader-bar{background:#0a0b0df5}
.reader-body .image-open{background:#060708}
.profile-overview dd:empty{min-width:20px}
.profile-overview .profile-description{font-size:25px;color:#e3ded2}
.profile-portrait img{max-height:640px}
.portrait-image{background:#050607;box-shadow:0 16px 50px #0003}
.portrait-image img{filter:none}
.portrait-info p{text-transform:none;letter-spacing:.08em}
.ensemble-series{margin-top:42px}
.cast-series+.cast-series{margin-top:62px}
.cast-series-heading{display:flex;gap:24px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:15px}
.cast-series-heading h3{font-size:38px}
.cast-series .portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:27px}
.cast-series:last-child .portrait-grid{max-width:calc(25% - 15px);grid-template-columns:1fr}
.cast-series:last-child .portrait-grid:has(>a:nth-child(2)){max-width:none}
.updates-empty{max-width:600px;color:var(--muted);margin-top:28px}
footer{background:#020304a8}
.place-hero-shade{background:linear-gradient(0deg,#050607,transparent 65%),linear-gradient(90deg,#030608bd,transparent 75%)}
.night-tools button{background:#090b0e6e;border-color:#a39a8555}

/* Reading order is an ordered list: the parallel stories are part of the route. */
.reading-route{padding-top:82px;padding-bottom:70px;border-block:1px solid var(--line);background:#04050680;scroll-margin-top:0}
.reading-route .section-top{align-items:end;gap:60px}
.reading-route h2{font-size:clamp(40px,4.5vw,64px)}
.reading-lead{max-width:455px;font-size:16px;color:#c1bcb0;line-height:1.75}
.reading-instruction{margin:28px 0 48px;max-width:800px;color:#aaa69d;font-size:14px}
.reading-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0;position:relative}
.reading-track::before{content:"";position:absolute;top:19px;left:0;right:0;height:1px;background:linear-gradient(90deg,#655652,#b5a07b,#666b78,#655652)}
.reading-stop{--series-accent:#b9a186;position:relative;min-width:0;padding-top:59px}
.route-number{position:absolute;top:0;left:0;width:40px;height:40px;border:1px solid #9c8b6b80;border-radius:50%;display:grid;place-items:center;font-size:12px;letter-spacing:.12em;background:#090b0e;color:#c5b797;z-index:1}
.reading-stop+.reading-stop::before{content:"›";position:absolute;top:6px;left:-18px;background:#090b0c;color:#ac9875;font-size:20px;line-height:24px;padding:0 3px}
.series-lockup{position:relative;isolation:isolate;min-height:190px;padding:28px 14px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#09090bb0;border:1px solid #a3927040}
.series-lockup::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 115%,var(--series-accent),transparent 72%);opacity:.14}
.series-lockup::after{content:"";position:absolute;bottom:15px;height:1px;width:64px;background:var(--series-accent);opacity:.7}
.series-brand{font:10px/1.5 var(--sans);letter-spacing:.24em;color:#b4afa1;margin-bottom:18px;text-transform:uppercase}
.series-lockup h3{font:600 clamp(25px,2.6vw,40px)/.96 var(--serif);letter-spacing:-.03em;color:#e7e0d2;text-shadow:0 2px 10px #000;white-space:nowrap}
.blood{--series-accent:#a1534b}
.blood .series-lockup h3{color:#d4b0a1;letter-spacing:.045em}
.darkcode{--series-accent:#ac9b57}
.darkcode .series-lockup h3{color:#d2c49c;letter-spacing:-.035em}
.singularity{--series-accent:#8b99b7}
.singularity .series-lockup h3{color:#bcc8d8;font-size:clamp(24px,2.2vw,34px)}
.reading-kind{font-size:11px;color:#b8aa94;margin:22px 0 10px;min-height:18px}
.episode-range{font:34px/1.2 var(--serif);letter-spacing:-.025em;color:#eee7d8}
.episode-range span{font:14px/1.2 var(--serif);letter-spacing:0}
.episode-caption{font-size:8px;color:#93908b;letter-spacing:.18em}
.reading-caption{margin-top:14px;font-size:13px;color:#ada69b;line-height:1.5}
.reading-note{margin:30px 0 25px;font-size:12px;color:#a6a096}
.reading-context{padding:19px 0;border-block:1px solid var(--line);font-size:14px;max-width:860px}
.reading-context summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;color:#d4c8ad}
.reading-context p{max-width:740px;color:var(--muted);margin-top:15px}
@media(min-width:1750px){.hero-art img{top:-20%}.hero-copy{padding-top:80px}}
@media(max-width:1150px) and (min-width:761px){.hero-copy{padding-top:80px;margin-left:46%;padding-left:2%}.hero-copy h1{font-size:61px}.hero-copy .eyebrow{font-size:8px}.hero-art{width:52%}.hero-art img{width:240%;left:-39%;top:0}.reading-track{gap:18px}.series-brand{font-size:9px}.series-lockup{padding-inline:8px}.series-lockup h3{font-size:28px}.singularity .series-lockup h3{font-size:24px}.reading-kind{font-size:10px}}
@media(max-width:760px){
 header nav.open{background:#08090bf5}
 .home-hero{height:auto;max-height:none;min-height:880px}
 .hero-art{width:100%;height:500px;mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent)}
 .hero-art img{width:auto;height:144%;top:-15%;left:calc(50% - 435px);filter:saturate(.78) brightness(.93)}
 .hero-shade{background:linear-gradient(0deg,#050607 0%,#050607fa 18%,#05060755 55%,transparent 80%)}
 .hero-copy{margin:0;padding:380px 7% 105px}
 .hero-copy h1{font-size:clamp(51px,11vw,75px);margin:24px 0}
 .hero-copy .eyebrow{font-size:8px}
 .hero-copy .intro{font-size:14px}
 .hero-quote{font-size:25px}
 .hero-copy .text-link{margin:20px 0 0;display:block}
 .reading-route .section-top{display:block}
 .reading-lead{margin-top:28px;font-size:15px}
 .reading-instruction{font-size:13px;margin-bottom:34px}
 .reading-track{grid-template-columns:1fr;gap:38px;padding-left:48px}
 .reading-track::before{left:17px;top:17px;bottom:10px;width:1px;height:auto;right:auto;background:linear-gradient(#7a6154,#8c815f,#677287,#7a6154)}
 .reading-stop{padding:0}
 .route-number{left:-49px;width:36px;height:36px}
 .reading-stop+.reading-stop::before{display:none}
 .series-lockup{min-height:180px;padding:27px 12px}
 .series-lockup h3,.singularity .series-lockup h3{font-size:36px}
 .reading-kind{margin-top:17px}
 .reading-caption{margin-top:10px}
 .cast-series .portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cast-series:last-child .portrait-grid{max-width:calc(50% - 7px);grid-template-columns:1fr}
 .cast-series-heading{display:block}
 .cast-series-heading h3{font-size:32px;margin-top:10px}
 .portrait-image{aspect-ratio:2/3}
 .profile-overview .profile-description{font-size:23px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view{animation:none}.portrait-card img{transition:none}}