/* Art direction drawn from the Plexious artwork by RiiCAT. */
@font-face{font-family:Chakra;src:url('fonts/Chakra-0.ttf') format('truetype');font-display:swap}
@font-face{font-family:ShareTech;src:url('fonts/ShareTechMono-0.ttf') format('truetype');font-display:swap}
@font-face{font-family:SoftSans;src:url('fonts/DM-Sans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:SoftSans;src:url('fonts/DM-Sans-Medium.ttf') format('truetype');font-weight:500 700;font-display:swap}
:root{--bg:#080809;--panel:#121214;--ink:#eeefed;--muted:#bbb9be;--red:#f02422;--line:#f0242245;--display:SoftSans,'DM Sans',Arial,sans-serif}
body{background-color:var(--bg);background-image:repeating-linear-gradient(90deg,transparent 0 119px,#ffffff03 119px 120px)}
.masthead,.experience-nav{background:#080809ed;border-bottom-color:#e52c2a55;backdrop-filter:blur(16px)}
.wordmark{font-weight:400;letter-spacing:.2em}
.edition,.eyebrow,.section-tag,.character-top,.character-theme,.hero-bottom,.hero-art-credit,.clock-label,.small-note{font-family:ShareTech,monospace}
h1,h2,h3,h4,h5,h6,.hero-line{font-family:var(--display);font-weight:400;letter-spacing:-.035em;mix-blend-mode:normal}
h2 em{display:inline;color:inherit;background:none;padding:0;box-shadow:none}
.hero{min-height:max(850px,100svh);padding:210px 7% 145px;background:#050505;isolation:isolate}
.hero-art{inset:132px -8% 0 24%;background-size:cover;background-position:50% 42%;background-repeat:no-repeat;mask-image:none;transform:none!important;filter:none}
.hero-shade{background:linear-gradient(90deg,#050505 0%,#050505fa 22%,#050505de 36%,#05050580 48%,#05050508 67%),linear-gradient(0deg,#050505 0%,#05050580 12%,transparent 34%);pointer-events:none}
.hero-content{max-width:1500px}
.hero h1{font-family:Chakra,'Arial Narrow',sans-serif;font-size:clamp(80px,12.3vw,188px);font-weight:400;line-height:1.05;letter-spacing:.045em;margin:28px 0;color:#fff;mix-blend-mode:difference;width:fit-content;text-wrap:nowrap}
.hero-line{font-size:clamp(34px,3.5vw,54px);line-height:1.1;max-width:570px}
.hero-line em{color:#ff4944}
.hero-description{max-width:430px;color:#d3d1d3;text-shadow:0 2px 15px #000}
.hero-content>.eyebrow{color:#d0cdce;font-size:11px;letter-spacing:.13em}
.hero-art-credit{position:absolute;right:5%;bottom:105px;z-index:1;margin:0;padding:8px 12px;background:#050505d9;border-left:2px solid var(--red);color:#d9d7d7;font-size:12px;letter-spacing:.04em}
.hero-art-credit strong{color:#fff;font-weight:400}
.hero-bottom{left:7%;right:5%;color:#bfbabb;font-size:11px}
.primary-link{background:#f02724;color:#fff;border:1px solid #ff6861;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.primary-link:hover{background:#f0efed;color:#080809}
.section{position:relative;background-color:#09090b;background-image:linear-gradient(#08080b99,#08080bbd),url('textures/signal-grain.jpg');background-size:cover;background-position:center;border-bottom-color:#f024223d}
.section:nth-of-type(even){background-image:linear-gradient(#08080b99,#08080bbd),url('textures/fractured-lines.jpg');background-position:65% center}
.section-tag{letter-spacing:.12em}
.personas,.people,.places-exchange,.site-end{background-color:#101012}
.character-card,.district-panel,.beyond-grid article,.causal-chain>article,.city-grid>article,.route-card,.creator-card,.site-end-links>a,.policy-answer,.coalition-detail{border:1px solid #b4b4b44f;border-radius:0;background-color:#111113;background-image:linear-gradient(135deg,#f024220a,transparent 50%);box-shadow:inset 3px 0 0 #f02422}
.character-card{position:relative}
.character-card::after{content:"";position:absolute;right:8px;top:8px;width:18px;height:18px;border-top:1px solid var(--red);border-right:1px solid var(--red);pointer-events:none}
.character-card:hover,.site-end-links>a:hover,.creator-card:hover{border-color:#f02422;background-color:#181315}
.character-card h3{font-weight:400;font-size:clamp(32px,3.2vw,48px)}
.character-top{color:#aaa8ab}
.character-theme{color:#ff5954}
.history,.emergency-turns,.route-principle{background-color:#09090b;color:var(--ink)}
.history h2 em,.emergency-turns h2 em,.route-principle h2 em{background:none;color:inherit;padding:0}
.history .section-tag,.history .split-heading>p,.timeline p,.emergency-grid p{color:#c1bec5}
.history .section-tag span:first-child,.timeline-index{color:#ed7771}
.timeline article,.timeline,.editorial-question,.emergency-grid article,.principle-grid p{border-color:#ffffff2e}
.history .editorial-question em{color:#edc4c1}
.district-tabs button[aria-selected=true]{background:#e8e8e4;color:#0c0c0e;border-color:#e8e8e4}
.district-tabs button[aria-selected=true] span,.district-tabs button[aria-selected=true] small{color:#9b1715}
.choice-buttons button{border-radius:0;border-color:#88858b;background:#131315}
.choice-buttons button:hover,.choice-buttons button[aria-pressed=true]{border-color:var(--red);box-shadow:inset 3px 0 var(--red)}
.contents{border-color:#f0242260;border-radius:0;background:#101012f5}
footer{border-top:1px solid #f0242260;background:#080809}
footer small{color:#c5c1c3}footer small strong{color:#fff;font-weight:500}
@media(min-width:1800px){.hero-art{background-size:cover;background-position:center 45%}}
@media(max-width:1000px) and (min-width:601px){.hero{min-height:870px}.hero-art{left:10%;right:-30%}.hero-shade{background:linear-gradient(90deg,#050505 0%,#050505e6 30%,#05050560 57%,transparent 80%),linear-gradient(0deg,#050505,transparent 45%)}.hero-description{max-width:350px}.hero-line{max-width:430px}}
@media(max-width:600px){
 .hero{min-height:1020px;padding:485px 6% 145px;align-items:flex-start}
 .hero-art{inset:149px -40% auto -8%;height:465px;background-position:50% 40%;background-size:cover}
 .hero-shade{background:linear-gradient(90deg,#050505b3 0%,#05050545 30%,transparent 65%),linear-gradient(0deg,#050505 0%,#050505 39%,#050505bd 47%,transparent 66%)}
 .hero h1{font-size:16vw;letter-spacing:.035em;margin:18px 0 20px}
 .hero-line{font-size:36px;max-width:100%;margin-bottom:22px}
 .hero-description{font-size:15px;max-width:330px}
 .hero-content>.eyebrow{font-size:9px;letter-spacing:.1em}
 .hero-art-credit{top:435px;bottom:auto;right:6%;font-size:10px;padding:5px 9px}
 .hero-bottom{left:6%;right:6%;font-size:9px;bottom:25px;gap:12px}
 h2{font-size:clamp(31px,8.6vw,43px);line-height:1.16}
 .section-tag{font-size:10px;letter-spacing:.035em}
 .wordmark{font-size:19px;letter-spacing:.15em}
 footer .wordmark{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.hero-art{transform:none!important}}