:root {
  color-scheme: dark;
  --paper: #050505;
  --ink: #eeeeee;
  --red: #e3e3e3;
  --line: #333336;
  --muted: #adadaf;
  --panel: #101012;
  --surface: #1a1a1c;
}

body:before { opacity: .055; }
.world { isolation: isolate; }
.map-area::before {
  content: '';
  position: absolute;
  inset: 0 -12% 0 -24%;
  z-index: -1;
  background: radial-gradient(ellipse at 54% 49%, #19191c 0, #0c0c0e 42%, transparent 72%);
  pointer-events: none;
}
.eyebrow, .coordinates, .map-topline, .map-note, .footer > span,
.card-meta, .case-facts small, .about-text small, .contact-foot { color: var(--muted); }
.live-dot { box-shadow: 0 0 10px #ffffff9c; }
.intro-copy { color: #c3c3c6; }
h1 em, .about-text h2 em, .contact-page h2 em, .panel-heading h2 em { color: #bcbcc2; }
.title-star { color: #a2a2aa; }
.skip { color: var(--paper); }
.contact-link { border-color: #69696e; }
.explore, .text-link, .contact-email { border-color: #7b7b81; }
.explore:hover, .text-link:hover, .contact-email:hover { border-color: #fff; color: #fff; }
.map-building:hover .building-body, .map-building:focus-visible .building-body { filter: drop-shadow(0 5px 13px #ffffff35); }
.map-building:hover .building-marker, .map-building:focus-visible .building-marker { fill: #4c4c52; }
.map-building:focus-visible .marker-ring { stroke: #fff; }
.map-tooltip { color: var(--ink); background: #171719; border: 1px solid #57575c; box-shadow: 0 7px 20px #0009; }
.map-controls { background: #101012ed; }
.map-controls button:hover { background: #303035; }
.map-controls button:focus-visible { outline-offset: -3px; }
dialog { background: var(--panel); }
dialog::backdrop { background: #000c; }
#panel { border: 1px solid var(--line); scrollbar-color: #626268 var(--panel); }
.close-panel, .card-arrow { background: var(--surface); }
.card-arrow { border: 1px solid #56565c; }
.project-card .card-image, .case-hero, .case-gallery button, .about-collage { background: var(--surface); }
.case-facts { border-color: #66666b; }
.case-story section + section { margin-top: 32px; }
.case-story section p {
  max-width: 64ch;
  margin: 0;
  color: #d0d0d2;
  font-size: 15px;
  line-height: 1.75;
}
.about-collage img { border-color: #38383d; box-shadow: 0 6px 18px #0009; }
#lightbox { background: #080809; color: var(--ink); }

@media (max-width: 760px) {
  h1 { white-space: normal; font-size: clamp(52px, 12vw, 92px); }
  .title-star { top: -.9em; }
  .map-stage { inset: 0 -5% 45px; }
  #panel { border: 0; }
}

@media (max-width: 390px) {
  .map-stage { inset: 0 -7% 40px; }
}