/* One continuous canvas. Chapters follow its palette and reveal choreography. */
:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #151515;
  --muted: #626262;
  --surface: #efefef;
  --surface-strong: #e1e1e1;
  --line: #d6d6d6;
  --line-strong: #929292;
  --accent: var(--ink);
}
:root[data-theme="dark"],
html:not([data-theme-ready]) [data-section-theme="dark"] {
  color-scheme: dark;
  --paper: #151515;
  --ink: #f5f5f5;
  --muted: #b0b0b0;
  --surface: #222222;
  --surface-strong: #303030;
  --line: #3e3e3e;
  --line-strong: #828282;
}
html { background: var(--paper); }
body, .site-container, .site { background: var(--paper); color: var(--ink); }
/* Color transitions belong to controls, never every descendant or map tile. */
:is(a, button) {
  transition: background-color var(--control-duration, 220ms) ease, color var(--control-duration, 220ms) ease,
    border-color var(--control-duration, 220ms) ease, box-shadow 220ms ease;
}
/* JS owns palette interpolation. Nested CSS color transitions must not trail it.
   Shadows also contain palette colors, so they must update with their backgrounds.
   Keep entrances, image fades and movement running on their existing timelines. */
html[data-palette-transition] #site,
html[data-palette-transition] #site *,
html[data-palette-transition] #site *::before,
html[data-palette-transition] #site *::after {
  transition-property: opacity, transform, filter, clip-path !important;
}
::selection { background: var(--ink); color: var(--paper); }
.location::before, .surroundings::before, .homesites::before,
.team::before, .roadmap::before { display: none; }
.hero, .cover-details, .location, .surroundings, #solution,
#coordination, .team, .roadmap, .homesites, .site-footer {
  background: var(--paper);
  color: var(--ink);
}
.wordmark { letter-spacing: .1em; }
.project-name { letter-spacing: .18em; }
.location .place-art { filter: none; }
.team-art, .roadmap-art, .journey-image svg {
  filter: grayscale(1);
}
.cover-details { border-bottom: 0; }
.bank-badge { border-radius: 0; }
.location, #solution, .team, .roadmap { padding-top: 6.875rem; padding-bottom: 6.25rem; }
.location-intro, .team-intro, .roadmap-intro { font-size: 1rem; line-height: 1.75; }
.location-close { color: var(--muted); }
#coordination { color-scheme: inherit; }
#solution { color-scheme: inherit; }
#coordination .se-detail-header { background: var(--paper); color: var(--ink); padding-top: 6.25rem; }
#coordination .se-detail-header p { color: var(--muted); }
#coordination .se-detail-header .se-kicker { color: var(--muted); }
#coordination .se-detail-summary { background: var(--surface); border-top: 0.125rem solid var(--ink); }
#coordination .se-stat-value { font-variant-numeric: tabular-nums; }
#coordination .se-fixed-label { color: var(--muted) !important; }
#coordination .se-segment { border: 0.0625rem solid var(--line); }
#coordination .se-segment button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.team-member-art { background: var(--surface); }
.team-member h3 { margin-top: 0.25rem; }
.team-finance, .team-agent { color: var(--muted); }
.roadmap-stage { background: transparent; }
.roadmap-stage[data-stage="now"] { background: var(--surface); border-color: var(--ink); }
.roadmap-stage::before { background: var(--paper); border-color: var(--ink); }
.roadmap-stage:first-child::before, .roadmap-stage[data-stage="now"]::before { background: var(--ink); }
.roadmap-stage[data-stage="now"]::before { box-shadow: 0 0 0 0.3125rem var(--paper); }
.roadmap-stages::after, .stage-marks i { background: var(--ink); }
.roadmap-stage[data-stage="now"] .stage-marks i { background: var(--ink); }
.contact-section .inquiry-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border: 0.0625rem solid var(--ink);
  border-radius: 0.1875rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
.site-footer { border-color: var(--line); }
.footer-identity { color: var(--ink); }
.footer-identity small { color: var(--muted); }

/* Map controls and vector geography follow the same palette. */
.map-experience { color: var(--ink); }
.map-explorer, .map-detail-dock, .map-tool,
.map-boundary-toggle, .map-loading, .map-error,
.surroundings .maplibregl-popup-content, .surroundings .maplibregl-ctrl-group {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.map-explorer, .map-detail-dock { border-radius: 0.25rem; box-shadow: 0 0.5rem 2rem #00000012; }
.map-vignette { display: none; }
.map-row-icon { color: var(--ink); }
.map-home-icon { background: var(--ink); color: var(--paper); }
.map-home-row { color: var(--ink); }
.map-place-row { color: var(--ink); }
.isbel-marker { --marker-color: var(--ink); }
.isbel-marker-symbol { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.isbel-marker-label { background: var(--paper); color: var(--ink); border-color: var(--line); }
.isbel-marker[data-category="home"], .isbel-marker[data-category="home"]::after { background: var(--ink); border-color: var(--paper); }
.isbel-marker[data-category="home"] .isbel-marker-symbol,
.isbel-marker[data-category="home"] .isbel-marker-label { color: var(--paper); }
.isbel-marker-label small { color: inherit; opacity: .75; }
.map-toggle { background: var(--ink); }
.map-toggle::after { background: var(--paper); transition: transform .2s ease, background-color 220ms ease; }
.map-caption { color: var(--ink); text-shadow: none; }
.surroundings .maplibregl-popup-tip { border-right-color: var(--paper); }
.surroundings .route-link, .map-home-link { background: var(--ink); color: var(--paper) !important; }
.map-experience .maplibregl-ctrl-icon,
.map-experience .maplibregl-ctrl-attrib-button { filter: invert(var(--map-icon-tone, 0)); }

@container (min-width:47.5625rem) {
  .cover-details { padding-top: 2.625rem; padding-bottom: 3.125rem; }
  .team-member-art { height: 18.75rem; }
}
@container (max-width:47.5rem) {
  .location, #solution, .team, .roadmap { padding-top: 4.5rem; padding-bottom: 4rem; }
  .location-intro, .team-intro, .roadmap-intro { font-size: 0.875rem; }
  #coordination .se-detail-header { padding-top: 4rem; }
}

/* Image captions keep a fixed backing even when the image below is pale. */
.place-view::after {
  inset: 45% 0 0;
  background: linear-gradient(transparent, #0009);
}
.place-caption { color: #fff; text-shadow: 0 0.0625rem 0.5rem #0008; }

.map-home-row[aria-pressed="true"] { color: var(--ink); }
.map-place-row[aria-pressed="true"] { color: var(--paper); }
.map-place-row[aria-pressed="true"] :is(small, .map-row-arrow) { color: inherit; }
.map-place-row[aria-pressed="true"] small { opacity: .85; }
.surroundings .map-filter[aria-pressed="true"] { color: var(--paper); }

/* A very thin reading line works on photography and either chapter tone. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 0.125rem;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: difference;
}
.reading-progress span {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(var(--reading-progress, 0));
}
.hero-scroll-link {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 0.0625rem solid #ffffff80;
}
.hero-scroll-link span, .inquiry-button span, .team-link span {
  transition: transform 250ms ease;
}
.hero-scroll-link:hover span { transform: translateY(0.25rem); }
.inquiry-button:hover span, .team-link:hover span { transform: translate(0.1875rem, -0.1875rem); }
.hero a:focus-visible { outline-color: #fff; }
/* Stable sections: native image loading, no scroll entrances or hidden copy. */
#site img.image-error { opacity: 0; }
.roadmap-stages::after { transform: none; animation: none; }
@container (max-width:47.5rem) {
  .hero-scroll-link { margin-top: 0; }
  .motion-ready [data-motion] { --motion-y: 0.625rem; }
  .motion-ready [data-motion="title"] { --motion-y: 0.875rem; }
  .motion-ready [data-motion="fade"], .motion-ready [data-motion="image"] { --motion-y: 0; }
  .roadmap-stages::after { transform: none; transform-origin: top; }
  #coordination .se-detail-summary {
    top: 0.625rem;
    padding: 0.875rem;
    gap: 0.625rem 0.75rem;
    box-shadow: 0 0.375rem 1.5rem #0000000d;
  }
}
@container (max-width:30rem) {
  #coordination .se-detail-summary .se-stat-value { font-size: clamp(1.375rem, 6.8cqw, 1.6875rem); }
}
@media (max-width:47.5rem) and (max-height:37.5rem) {
  #coordination .se-detail-summary { position: relative; top: auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .motion-ready [data-motion] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .place-art, .roadmap-stages::after { transform: none !important; }
}
@media print {
  #site .location-editorial { opacity: 1 !important; }
  :root { --paper: #fff !important; --ink: #151515 !important; --muted: #626262 !important; --surface: #efefef !important; --surface-strong: #e1e1e1 !important; --line: #d6d6d6 !important; --line-strong: #929292 !important; }
  .reading-progress { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready [data-motion] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #site img { opacity: 1 !important; }
  .place-art, .roadmap-stages::after { transform: none; }
  #coordination .se-detail-summary { position: relative; top: auto; }
}

/* A quiet handoff from the overview to the detailed story. */
.project-threshold {
  display: flex;
  justify-content: center;
  padding: 2.125rem 6% 2.5rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.threshold-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8125rem;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--muted);
}
.threshold-scroll {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 1.9375rem;
  border: 0.0625rem solid currentColor;
  border-radius: 0.75rem;
}
.threshold-scroll span {
  position: absolute;
  top: 0.375rem;
  left: 50%;
  width: 0.125rem;
  height: 0.3125rem;
  margin-left: -0.0625rem;
  border-radius: 0.125rem;
  background: currentColor;
  animation: none;
}
.threshold-cue:hover { color: var(--ink); }
.threshold-cue:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: 0.3125rem; }
@keyframes threshold-scroll {
  0%, 15% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(0.5625rem); opacity: 1; }
  90%, 100% { transform: translateY(0.5625rem); opacity: 0; }
}
@container (max-width:47.5rem) {
  .project-threshold { padding: 1.625rem 6% 1.875rem; }
  .threshold-cue { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion:reduce), print {
  .threshold-scroll span { animation: none; opacity: 1; transform: none; }
}

/* Keep map symbols, labels and controls legible on both geographic palettes. */
.map-experience .isbel-marker-symbol {
  border: 0.0625rem solid var(--line-strong);
  box-shadow: 0 0.125rem 0.5rem #0003;
}
.map-experience .isbel-marker[aria-pressed="true"] .isbel-marker-symbol,
.map-experience .isbel-marker:hover .isbel-marker-symbol {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 0.25rem var(--paper), 0 0 0 0.3125rem var(--line-strong);
}
.map-experience .isbel-marker[data-category="home"] {
  border-color: var(--paper);
  box-shadow: 0 0 0 0.0625rem var(--line-strong), 0 0.1875rem 0.75rem #0003;
}
.map-experience .isbel-marker[data-category="home"] .isbel-marker-symbol {
  background: none;
  color: var(--paper);
  border: 0;
  box-shadow: none;
}
.map-experience .isbel-marker-label { border-color: var(--line-strong); }
.map-experience .maplibregl-ctrl-attrib,
.map-experience .maplibregl-ctrl-scale {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.map-experience .maplibregl-ctrl-attrib a { color: var(--ink); }
.map-bottom-tools { right: auto; }
@media (max-width:47.5rem) {
  .map-boundary-toggle > span:nth-child(2) { display: inline; font-size: 0.6875rem; }
  .map-boundary-toggle > span:nth-child(2)::after { content: none; }
  .map-boundary-toggle { min-height: 2.75rem; padding: 0.625rem 0.75rem; }
  .map-caption { left: auto; right: 0.75rem; bottom: 2.875rem; }
}