/* Contrast is independent of the architectural lighting behind the interface. */
:root,[data-theme="dark"] {
  color-scheme:dark;
  --page:#090d16;
  --paper:#ffffff;
  --muted:#e1eaff;
  --text:#ffffff;
  --text-body:#f1f5ff;
  --text-secondary:#e1eaff;
  --accent-text:#cfddff;
  --accent-solid:#a9bfff;
  --line:#cfddff55;
  --panel:#0d1728f5;
  --panel-solid:#101c30;
  --panel-line:#b5caff55;
  --copy-scrim:#050b17e0;
  --header-scrim:#060d1af5;
  --reading-surface:#07101ff2;
  --hover-surface:#10213be8;
  --focus:#bbd0ff;
  --text-shadow:0 2px 14px #000a;
}
[data-theme="light"] {
  color-scheme:light;
  --page:#e7edf3;
  --paper:#132744;
  --muted:#3c506e;
  --text:#132744;
  --text-body:#213957;
  --text-secondary:#3c506e;
  --accent-text:#214da0;
  --accent-solid:#315cb5;
  --line:#24497442;
  --panel:#f5f8fcf7;
  --panel-solid:#f5f8fc;
  --panel-line:#49678f55;
  --copy-scrim:#f5f8fced;
  --header-scrim:#f3f7fcf7;
  --reading-surface:#f3f7fcf2;
  --hover-surface:#f8fbfff0;
  --focus:#204da9;
  --text-shadow:none;
}
html,body,#world {background:var(--page);color:var(--text);}
html {scrollbar-color:var(--accent-solid) var(--page);}
body {transition:background-color .3s,color .3s;}
a:focus-visible,button:focus-visible {outline-color:var(--focus);}
::selection {background:#3157b2;color:#fff;}
.skip-link {background:var(--panel-solid);color:var(--text);border:1px solid var(--panel-line);}

/* Headers, navigation, language controls and the complete chapter index. */
.header {border-bottom-color:var(--line);}
.header:before {background:linear-gradient(var(--header-scrim) 0%,var(--header-scrim) 52%,transparent);}
.brand,.header-actions,.header-location,.language-button,.index-button {color:var(--text);}
.header-location {opacity:1;}
.language-alt {color:var(--text-secondary);border-color:var(--line);}
.index-button b {background:var(--text);}
.live-dot {background:var(--accent-solid);box-shadow:0 0 10px color-mix(in srgb,var(--accent-solid) 40%,transparent);}
.chapter-index {background:var(--panel);color:var(--text);}
.index-label,.index-links small,.index-footer,.reading-button {color:var(--text-secondary);}
.index-links>a {color:var(--text);border-bottom-color:var(--line);}
.index-links b,.index-links>a:hover {color:var(--accent-text);}
.scene-rail a {color:var(--text-secondary);text-shadow:var(--text-shadow);}
.scene-rail a i {background:var(--line);}
.scene-rail a.active i {background:var(--accent-solid);}

.theme-toggle {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:38px;min-height:38px;padding:8px 12px;border:1px solid var(--panel-line);border-radius:24px;background:var(--hover-surface);color:var(--text);font-size:10px;line-height:1;white-space:nowrap;transition:background-color .25s,border-color .25s,color .25s;}
.theme-toggle:hover {border-color:var(--accent-solid);background:var(--panel-solid);}
.theme-toggle svg {flex-shrink:0;}
.theme-moon {display:none;}
[data-theme="light"] .theme-sun {display:none;}
[data-theme="light"] .theme-moon {display:block;}

/* Semantic content: brighten the small labels as well as the large headings. */
.scene-copy h1,.scene-copy h2 {color:var(--text);text-shadow:var(--text-shadow);}
.scene-copy .body-copy,.side-bottom .body-copy,.reading-mode .scene-copy .body-copy {color:var(--text-body);text-shadow:var(--text-shadow);}
.eyebrow,.chapter-heading,.chapter-heading>span:first-child {color:var(--text-secondary);text-shadow:var(--text-shadow);}
.hero-subtitle,.enter-link,.service-tags {color:var(--accent-text);text-shadow:var(--text-shadow);}
.enter-link,.service-tags li {border-color:var(--line);}
.enter-link:hover {color:var(--text);}
.case-details dt {color:var(--text);}
.case-details dd {color:var(--text-body);}
.case-details>div {border-top-color:var(--line);}
.case-details {text-shadow:var(--text-shadow);}
.development-badge {color:var(--text);border-color:var(--panel-line);background:var(--hover-surface);}
.development-badge i {background:var(--accent-solid);}
.chapter-beats button,.chapter-beats button.active span {color:var(--text);text-shadow:var(--text-shadow);}
.chapter-beats button span {opacity:1;}
.chapter-beats button i {background:var(--line);}
.chapter-beats button.active i {background:var(--accent-solid);}
.world-disclaimer {color:var(--text-secondary);text-shadow:var(--text-shadow);}
.contact-links {border-color:var(--line);}
.contact-links>div>span,.contact-links address,footer {color:var(--text-secondary);text-shadow:var(--text-shadow);}
.contact-links a {color:var(--text);text-shadow:var(--text-shadow);}
.contact-links .map-link {color:var(--accent-text);}

/* Feathered reading light prevents white architecture from washing out copy. */
.copy-inner {isolation:isolate;}
.copy-inner:before {inset:-35px -40px;background:var(--copy-scrim);border-radius:25px;filter:blur(23px);}
.hero .copy-inner:before,.contact .copy-inner:before,.side-bottom .copy-inner:before {inset:-40px -70px;background:linear-gradient(0deg,var(--copy-scrim) 0%,var(--copy-scrim) 65%,transparent 100%);filter:blur(30px);}
.film-frame {background:linear-gradient(#050a1444,transparent 25%,transparent 55%,#050a1455);box-shadow:inset 0 0 100px #02050a33;}
[data-theme="light"] .film-frame {background:linear-gradient(#eaf0f744,transparent 25%,transparent 60%,#eaf0f744);box-shadow:inset 0 0 110px #c5d3e122;}

/* Scene controls and smaller supporting text have their own readable surface. */
.journey-hud {isolation:isolate;}
.journey-hud:before {content:'';position:absolute;inset:-30px calc(-1 * var(--edge)) -30px;background:linear-gradient(transparent,var(--header-scrim) 48%);z-index:-1;pointer-events:none;}
.scroll-cue,.chapter-status,.status-total,.motion-button {color:var(--text-secondary);text-shadow:var(--text-shadow);}
.status-number,.motion-icon {color:var(--text);}
.scroll-line,.status-divider {background:var(--line);}
.scroll-line:after {background:var(--accent-solid);}
.credits-button {color:var(--text);background:var(--hover-surface);border:1px solid var(--panel-line);border-radius:12px;padding:3px 8px;}
.world-annotation {color:var(--text);background:var(--hover-surface);padding:6px 9px;border:1px solid var(--panel-line);border-radius:3px;text-shadow:none;}
.world-annotation i {border-color:var(--accent-text);}
.world-annotation:before {background:linear-gradient(transparent,var(--accent-solid));}
.world-hover {color:var(--text);background:var(--hover-surface);border-color:var(--panel-line);}
.credits-dialog {color:var(--text-body);background:var(--panel-solid);border-color:var(--panel-line);}
.credits-dialog h2,.close-dialog {color:var(--text);}
.credits-dialog a {color:var(--accent-text);}
.credits-dialog::backdrop {background:#020713bc;}
[data-theme="light"] .credits-dialog::backdrop {background:#27436255;}
.loading-mark {color:var(--text);}
.loading-mark i,.scroll-progress span {background:var(--accent-solid);}
.scroll-progress {background:var(--line);}
.no-script {background:var(--page);color:var(--text);}
.reading-mode .chapter {background:var(--reading-surface);}
.reading-mode .journey-hud {background:var(--reading-surface);}
.world-fallback {background:radial-gradient(ellipse at 50% 30%,#293653,#090d16 70%);}
[data-theme="light"] .world-fallback {background:radial-gradient(ellipse at 50% 30%,#fff,#dce6f0 75%);}
[data-theme="light"] .world-fallback img {filter:drop-shadow(20px 30px 15px #617ca64d);}
[data-theme="light"] .fallback-arches {border-color:#5774a44d;box-shadow:0 0 0 40px #7a98b90d,0 0 0 80px #7a98b909;}

@media(max-width:700px) {
  .header-actions {gap:14px;}
  .theme-toggle {padding:7px;min-width:34px;min-height:34px;}
  .theme-label {display:none;}
  .copy-inner:before {inset:-24px -25px;filter:blur(18px);}
  .hero .copy-inner:before,.contact .copy-inner:before,.side-bottom .copy-inner:before {inset:-25px -38px;filter:blur(26px);}
  .world-annotation {padding:4px 6px;}
}
@media(max-width:420px) {
  .header {gap:12px;}
  .header-actions {gap:12px;}
  .index-button>span {display:none;}
  .index-button {gap:0;min-width:24px;min-height:34px;justify-content:center;}
}
@media(max-width:350px) {
  :root {--edge:20px;}
  .brand {gap:9px;}
  .brand img {width:29px;}
  .brand>span {font-size:12px;}
  .brand small {font-size:4.5px;}
  .header-actions {gap:10px;}
}
