/*
 * Design tokens (Apple Human Interface conventions, warm-tinted to the maquette):
 *  - labels in four strengths (ink / ink-2 secondary / muted tertiary / line separators), never flat greys on glass
 *  - fills: system grey fills for controls; tinted accent fill for secondary actions
 *  - materials: "regular" glass for cards and bars (thick blur + saturation, a bright hairline where light catches the
 *    edge), "thick" for big surfaces, a dark material for tools over the scene; bigger surfaces cast deeper shadows
 *  - one motion curve (iOS sheet curve) and press feedback on pointer-down everywhere
 */
:root {
  --bg: #efece6;
  --surface: #fbfaf8;
  --ink: #1d1b18;                       /* label */
  --ink-2: rgba(29, 27, 24, 0.68);      /* secondary label */
  --muted: rgba(29, 27, 24, 0.45);      /* tertiary label */
  --line: rgba(29, 27, 24, 0.09);       /* separator */
  --fill: rgba(118, 112, 104, 0.13);    /* control fill */
  --fill-2: rgba(118, 112, 104, 0.08);
  --accent: #f0782a;
  --accent-2: #ff8b42;
  --accent-tint: rgba(240, 120, 42, 0.13);
  --accent-ink: #ffffff;
  --glass: rgba(251, 250, 248, 0.72);   /* regular material */
  --glass-thick: rgba(251, 250, 248, 0.86);
  --glass-dark: rgba(30, 29, 32, 0.62); /* dark material: tools over the scene */
  --blur: blur(28px) saturate(180%);
  --hairline: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --radius: 24px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(30, 22, 10, 0.06), 0 6px 16px -8px rgba(30, 22, 10, 0.18);
  --shadow: 0 1px 2px rgba(30, 22, 10, 0.05), 0 16px 40px -18px rgba(30, 22, 10, 0.28);
  --shadow-lg: 0 2px 4px rgba(30, 22, 10, 0.05), 0 30px 70px -28px rgba(30, 22, 10, 0.38);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out: entrances and exits */
  --gutter: clamp(16px, 4.5vw, 64px);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;            /* tracking at 16 px */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* type: size-specific tracking (tight on display sizes, ~0 on small text), leading inverse to size */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
h1 { letter-spacing: -0.035em; line-height: 1.0; }
h2 { letter-spacing: -0.028em; line-height: 1.06; }
h3 { letter-spacing: -0.02em; line-height: 1.15; }
h1 span, h2 span { color: var(--muted); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

/* eyebrow: the chapter number and name, in the accent -- sentence case, not shouted */
.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.003em;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font: 600 15px/1 var(--font);
  letter-spacing: -0.009em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease), background .2s, filter .2s;
}
/* feedback on press, instantly */
.btn:active { transform: scale(0.96); transition-duration: .08s; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }  /* filled: the one primary action */
.btn--accent:hover { filter: brightness(1.06); }
.btn--round { width: 46px; padding: 0; background: var(--accent-tint); color: var(--accent); } /* tinted: secondary */
.btn--round:hover { background: rgba(240, 120, 42, 0.2); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--ghost { background: var(--fill); color: var(--ink); }

:focus-visible { outline: 3px solid rgba(240, 120, 42, 0.55); outline-offset: 2px; border-radius: 10px; }
button { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- loader (loader.js) */
/* the project's cover blurred behind a glass card; in the card the building is told through its floor plans (the
   timeline's keyframes are written by loader.js for each building); words and progress under the card */
.loader {
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* camera-like moves on screen */
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__backdrop {
  position: absolute; inset: -40px; /* room for the blur's soft edge */
  background: var(--bg) center / cover no-repeat;
  filter: blur(16px) saturate(1.05);
  opacity: 0; transform: scale(1.06); will-change: transform;
  transition: opacity 400ms var(--ease-out);
}
.loader.has-cover .loader__backdrop { opacity: 0.9; animation: loader-drift 20s linear forwards; }
.loader::before { /* warm veil: keeps the card legible over any cover */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(239, 236, 230, 0.35), rgba(239, 236, 230, 0.72));
}
.ld-wrap { position: relative; z-index: 2; display: grid; gap: 22px; width: min(820px, calc(100vw - 48px)); }
.loader__card {
  --S: min(54vh, calc(min(820px, 100vw - 48px) * 0.66)); /* the stage's side */
  position: relative; height: calc(var(--S) * 1.08); border-radius: 32px;
  background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg);
  animation: loader-in 500ms var(--ease-out) backwards;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.loader.is-done .loader__card { opacity: 0; transform: translateY(-6px) scale(0.98); }
.ld-logo { position: absolute; left: 22px; top: 20px; height: 26px; z-index: 1; }

/* the stage: a square in the card, in perspective; the building rotated as a whole, each storey a layer at its height */
.ld-stage {
  --gapE: calc(var(--S) * 0.108); --gapC: calc(var(--S) * 0.082); /* closed: about a real storey (3 m) to the footprint */
  position: absolute; left: 50%; top: 50%; width: var(--S); aspect-ratio: 1; translate: -50% -50%; perspective: 2400px;
}
.ld-bld, .ld-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.ld-planl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-stage { transition: opacity 700ms var(--ease-out); }
/* the generated building, rendered into the card (loader3d.js): it takes over from the drawing */
.ld-3d { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; opacity: 0; transition: opacity 800ms var(--ease-out); }
.loader__card.is-3d .ld-3d { opacity: 1; }
.loader__card.is-3d .ld-stage { opacity: 0; }

/* the plan drawing: walls draw themselves (first round), the flats tint in, the rooms are named */
.lplan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lplan path { vector-effect: non-scaling-stroke; }
.lplan__units path { fill-opacity: 0.2; stroke-width: 1.4; stroke-opacity: 0.9; }
.lplan__lines path { fill: none; stroke-width: 0.7; }
.lplan__walls path { fill: #3b3631; stroke: #3b3631; stroke-width: 0.06; vector-effect: none; } /* user units: the draw-on dashes need them */
.lplan__rooms text { font: 600 12px/1 var(--font); letter-spacing: 0; fill: #6f675d; text-anchor: middle; dominant-baseline: middle; }
.lplan__tags text { font: 700 21px/1 var(--font); letter-spacing: 0; fill: #fff; text-anchor: middle; }
.ld-stage.is-built .ld-typ .lplan__walls path { stroke-dasharray: 1; animation: lp-draw 1600ms var(--ease-out) 200ms backwards, lp-fill 500ms var(--ease-out) 1200ms backwards; }
.ld-stage.is-built .ld-typ .lplan__lines { animation: loader-fade 600ms var(--ease-out) 900ms backwards; }
.ld-stage.is-built .ld-typ .lplan__units path { animation: loader-fade 500ms var(--ease-out) backwards; animation-delay: calc(1300ms + var(--i) * 90ms); }

/* under the card: the words on the left, the progress on the right */
.ld-under { display: grid; grid-template-columns: minmax(0, 1fr) min(300px, 36%); align-items: end; gap: 32px; padding: 0 6px; }
.ld-cap { position: relative; min-height: 112px; }
.ld-cap__item { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; animation: 16s linear infinite; }
.ld-cap__item--static, .ld-cap__item--js { opacity: 1; animation: ld-text-in 600ms var(--ease-out) backwards; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.ld-cap__item.is-out { opacity: 0; transform: translateY(-8px); }
.ld-kicker { margin: 0 0 8px; font: 600 13px/1 var(--font); color: var(--accent); }
.ld-title { font: 700 clamp(26px, 3vw, 38px)/1.05 var(--font-display); letter-spacing: -0.028em; color: var(--ink); }
.ld-line { margin-top: 8px; font: 400 15px/1.45 var(--font); color: var(--ink-2); }
.ld-progress { display: grid; gap: 8px; padding-bottom: 6px; }
.ld-status { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 13px/1 var(--font); color: var(--ink-2); }
.ld-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.ld-status.is-done .ld-spin-i { display: none; }
.ld-spin-i { flex: none; box-sizing: border-box; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent-tint); border-top-color: var(--accent); animation: loader-spin 800ms linear infinite; }
.loader__bar { position: relative; width: 100%; height: 4px; border-radius: 4px; background: rgba(118, 112, 104, 0.18); overflow: hidden; }
.loader__bar span {
  display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out);
}
.loader__bar::after { /* sheen: the bar is alive even while a step takes long */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%); animation: loader-sheen 1.4s linear infinite;
}
.loader__text { margin: 2px 0 0; font-size: 13px; color: #b3261e; letter-spacing: -0.003em; }
@keyframes loader-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes loader-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes loader-sheen { to { transform: translateX(100%); } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-fade { from { opacity: 0; } }
@keyframes ld-text-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes lp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lp-fill { from { fill-opacity: 0; } }
@media (max-width: 760px) {
  .ld-wrap { width: calc(100vw - 24px); gap: 16px; }
  .loader__card { --S: min(calc(100vw - 40px), 46vh); border-radius: 26px; }
  .ld-logo { left: 16px; top: 14px; height: 22px; }
  .ld-under { grid-template-columns: 1fr; gap: 14px; padding: 0 4px; }
  .ld-cap { min-height: 104px; }
  .ld-title { font-size: 26px; }
  .ld-line { font-size: 14px; }
  .lplan__rooms { display: none; }
}

/* ---------------------------------------------------------------- opening satellite zoom (satellite.js) */
.sat { position: fixed; inset: 0; z-index: 45; background: #20262b; transition: opacity 700ms var(--ease-out); }
.sat.is-out { opacity: 0; pointer-events: none; }
.sat__map, .sat__clouds, .sat__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sat::after { /* a soft vignette: the captions read over any imagery */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10, 12, 14, 0.38));
}
.sat__caption { position: absolute; z-index: 1; left: var(--gutter); bottom: 64px; color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45); }
.sat__kicker { margin: 0 0 6px; font: 600 13px/1 var(--font); color: rgba(255, 255, 255, 0.78); }
.sat__place { margin: 0; font: 700 clamp(40px, 6.4vw, 88px)/1 var(--font-display); letter-spacing: -0.035em; }
.sat__place.is-in { animation: ld-text-in 500ms var(--ease-out) backwards; }
.sat__caption { transition: opacity 400ms var(--ease-out); }
.sat__caption.is-hidden { opacity: 0; }
.sat__credit { position: absolute; z-index: 1; right: 14px; bottom: 10px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.sat__pin { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.sat__pin.is-on { opacity: 1; }
.sat__dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, 0.4); }
.sat__dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fff; animation: sat-pulse 1.6s var(--ease-out) infinite; }
.sat__name {
  position: absolute; left: 0; bottom: 20px; translate: -50% 0; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.95); color: var(--ink); font: 600 13px/1 var(--font); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(4px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sat__pin.has-name .sat__name { opacity: 1; transform: none; }
@keyframes sat-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
@media (max-width: 760px) { .sat__caption { bottom: 40px; right: var(--gutter); } .sat__place { font-size: 34px; line-height: 1.05; } }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 10px 0 6px; /* the brand plate sits at the left end */
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 32px; display: block; }
/* the brand plate: AK ATILIM İNŞAAT on a dark ground in the light bar -- the gold mark and the name read at a glance;
   a gold hairline edges it and a faint gold glow carries the step into the glass */
.topbar .brand {
  position: relative; height: 48px; padding: 0 18px 0 14px; border-radius: 17px; text-decoration: none;
  background: linear-gradient(135deg, #2a2621 0%, #1a1815 60%, #12100d 100%);
  box-shadow: inset 0 0 0 0.5px rgba(214, 176, 107, 0.45), inset 0 1px 0 rgba(255, 244, 222, 0.08), 0 4px 14px -6px rgba(20, 16, 10, 0.45);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.topbar .brand::after { /* the step into the glass */
  content: ''; position: absolute; top: 18%; bottom: 18%; right: -14px; width: 14px; pointer-events: none;
  background: radial-gradient(60% 50% at 0% 50%, rgba(214, 176, 107, 0.28), transparent 70%);
}
.topbar .brand:hover { box-shadow: inset 0 0 0 0.5px rgba(214, 176, 107, 0.7), inset 0 1px 0 rgba(255, 244, 222, 0.1), 0 6px 18px -6px rgba(20, 16, 10, 0.5); }
.topbar .brand:active { transform: scale(0.98); }
.topbar .brand__logo { height: 34px; }
/* navigation: a segmented control (grey track, the current item a raised white segment) */
.nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill);
}
.nav__link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .35s var(--ease), color .2s, box-shadow .35s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:active { transform: scale(0.97); }
.nav__link.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.1); }

/* ---------------------------------------------------------------- scene */
.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.lbl {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--glass-thick);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity .45s var(--ease);
  will-change: transform, opacity;
}
.lbl.is-on { opacity: 1; }
.lbl--key { color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-sm); }
.lbl--pin {
  background: var(--glass-dark);
  color: #fff;
  padding: 8px 14px 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.003em;
}
.lbl--pin::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(239,125,45,.3);
}
.lbl--pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 26px;
  background: linear-gradient(var(--glass-dark), transparent);
}

/* ---------------------------------------------------------------- progress rail */
.rail {
  position: fixed;
  z-index: 10;
  right: calc(var(--gutter) - 4px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.4s;
}
.rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 12px/1 var(--font);
  color: var(--ink-2);
}
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.rail button::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29, 27, 24, .2);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
  transition: background .3s, transform .4s var(--ease);
}
.rail:hover button span,
.rail button.is-active span { opacity: 1; transform: none; }
.rail button.is-active { color: var(--ink); font-weight: 600; }
.rail button span { padding: 5px 10px; border-radius: 999px; background: var(--glass-thick); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); box-shadow: var(--shadow-sm); }
.rail button.is-active::after { background: var(--accent); transform: scale(1.45); }

/* ---------------------------------------------------------------- facade switch */
.facades {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 22px;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .35s;
}
.facades.is-on { transform: translate(-50%, 0); opacity: 1; }
.facades button {
  border: 0;
  border-radius: 999px;
  padding: 9px 15px;
  background: none;
  cursor: pointer;
  font: 500 13px/1 var(--font);
  letter-spacing: -0.003em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .35s var(--ease), color .2s, box-shadow .35s var(--ease);
}
.facades button:active { transform: scale(0.96); }
.facades button.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.1); }

/* ---------------------------------------------------------------- story */
.story { position: relative; z-index: 2; pointer-events: none; padding-bottom: 30vh; }
.step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* bottom padding keeps every chapter card above the view compass (bottom-left) */
  padding: 110px var(--gutter) 290px;
}
.step--right { justify-content: flex-end; padding-right: calc(var(--gutter) + 120px); }
.step a, .step button { pointer-events: auto; }

.card {
  pointer-events: auto;
  width: min(400px, 100%);
  padding: 28px 28px 26px;
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg);
}
.card h2 { font-size: clamp(30px, 3.1vw, 40px); margin-bottom: 12px; }
.card > p { color: var(--ink-2); font-size: 15px; line-height: 1.5; letter-spacing: -0.009em; }
.card strong { color: var(--ink); font-weight: 600; }
.note { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--muted) !important; }

/* facts: an inset grouped list -- quiet label above, the value in the label colour */
.facts { margin: 20px 0 0; display: grid; gap: 0; border-radius: 16px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 0.5px var(--line); overflow: hidden; }
.facts div { padding: 11px 14px; border-top: 0.5px solid var(--line); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.009em; }
.facts--grid { grid-template-columns: 1fr 1fr; }
.facts--grid div:nth-child(2) { border-top: 0; }
.facts--grid div:nth-child(even) { border-left: 0.5px solid var(--line); }

.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; font-weight: 500; font-size: 14px; letter-spacing: -0.006em; color: var(--ink); }
.ticks li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-2px);
}

/* hero: Meadow-like floating composition over the maquette */
.step--hero { align-items: stretch; padding: 0; }
.hero {
  position: relative;
  overflow: clip;
  width: 100%;
  min-height: 100vh;
  padding: 130px var(--gutter) 48px;
}
.hero__intro { position: absolute; left: var(--gutter); top: 150px; width: min(300px, 40vw); }
.hero__lead { font-size: 15px; line-height: 1.5; letter-spacing: -0.009em; color: var(--ink-2); }
.hero__actions { display: flex; gap: 8px; margin-top: 20px; }
.hero__title { position: absolute; right: var(--gutter); top: 136px; text-align: left; isolation: isolate; }
.hero__title::before,
.hero__intro::before {
  content: '';
  position: absolute;
  inset: -70px -90px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(235, 231, 223, 0.92), rgba(235, 231, 223, 0.6) 55%, rgba(235, 231, 223, 0));
  pointer-events: none;
}
.hero__intro { isolation: isolate; }
.hero__title h1 { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: -0.04em; line-height: 0.98; }
.hero__title .kicker { margin-bottom: 12px; }

/* stat: a small widget -- caption above, a large tabular value */
.stat {
  position: absolute;
  pointer-events: auto;
  display: grid;
  gap: 4px;
  min-width: 128px;
  padding: 14px 18px 15px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
}
.stat__label { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.stat__value { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat--a { left: calc(var(--gutter) + 6vw); top: 46vh; }
.stat--b { right: calc(var(--gutter) + 14vw); top: 52vh; }

.feature-chip {
  position: absolute;
  left: var(--gutter);
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
  text-decoration: none;
  transition: transform .45s var(--ease);
}
.feature-chip:hover { transform: translateY(-2px); }
.feature-chip:active { transform: scale(0.98); transition-duration: .08s; }
.feature-chip small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.feature-chip strong { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; }
.feature-chip svg { color: var(--muted); }
.feature-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

/* ---------------------------------------------------------------- archive */
.archive {
  position: relative;
  z-index: 3;
  background: var(--surface);
  border-radius: 36px 36px 0 0;
  padding: clamp(56px, 8vw, 110px) var(--gutter) 80px;
  box-shadow: 0 -30px 60px -40px rgba(60,45,25,.35);
}
.archive__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.archive__head h2 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.038em; }
.archive__lead { max-width: 380px; font-size: 17px; line-height: 1.47; letter-spacing: -0.014em; color: var(--ink-2); }

/* decade filter: a segmented control */
.decades { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 28px; border-radius: 999px; background: var(--fill); }
.decades button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 500 14px/1 var(--font);
  letter-spacing: -0.006em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .35s var(--ease), color .2s, box-shadow .35s var(--ease);
}
.decades button:active { transform: scale(0.97); }
.decades button em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.decades button.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.1); }
.decades button.is-active em { color: var(--ink-2); }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.project {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px var(--line), var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.project:hover { transform: translateY(-3px); box-shadow: 0 0 0 0.5px var(--line), var(--shadow-lg); }
.project:active { transform: scale(0.985); transition-duration: .1s; }
.project__media { position: relative; aspect-ratio: 3 / 2; background: var(--bg); }
.project__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a project still without its presentation: its name over a quiet plate, no broken image */
.project__ph { display: grid; place-items: center; height: 100%; padding: 20px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--bg) 0 12px, #e9e5dd 12px 13px); color: var(--muted); font-size: 13px; font-weight: 600; }
.project__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--glass-thick);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.project__badge::before { content: '● '; color: var(--accent); }
.project__body { padding: 20px 22px 22px; display: grid; gap: 12px; }
.project__body h3 { font-size: 24px; letter-spacing: -0.022em; }
.project__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.project__meta span { padding: 5px 10px; border-radius: 999px; background: var(--fill-2); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.project__addr { font-size: 14px; line-height: 1.45; letter-spacing: -0.006em; color: var(--muted); }
.project--empty {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 220px;
  padding: 24px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}
.project--empty:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.project--empty strong { display: block; color: var(--ink-2); font-size: 17px; font-weight: 600; margin-bottom: 4px; }

/* ---------------------------------------------------------------- projects map (projectsMap.js) */
.pmap { margin: 0 0 28px; }
.pmap__stage {
  position: relative;
  height: clamp(380px, 56vw, 620px);
  border-radius: 28px;
  overflow: hidden;
  background: #dfe8ea;
  box-shadow: 0 0 0 0.5px var(--line), var(--shadow);
  touch-action: pan-y; /* one finger scrolls the page; two fingers move the map */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.pmap__stage.is-dragging { cursor: grabbing; }
.pmap__svg, .pmap__labels { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap__labels { pointer-events: none; }
.pmap__sea { fill: #d9e5e8; }
.pmap__land { fill: #ebe6dc; }
.pmap__province { fill: #f7f3ec; }
.pmap__district { fill: transparent; stroke: rgba(120, 104, 80, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pmap__district.is-host { fill: rgba(240, 120, 42, 0.07); }
.pmap__lake { fill: #d9e5e8; }
.pmap__road { fill: none; stroke: rgba(232, 154, 104, 0.75); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pmap__water { fill: #7c97a1; font: italic 500 13px/1 var(--font); letter-spacing: 0.04em; text-anchor: middle; }
.pmap__dname { fill: rgba(29, 27, 24, 0.5); font: 500 11px/1 var(--font); text-anchor: middle; paint-order: stroke; stroke: #f7f3ec; stroke-width: 3px; }
.pmap__pins { position: absolute; inset: 0; pointer-events: none; }
.pmap__pin, .pmap__cluster { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
.pmap__pin { display: block; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; text-decoration: none; color: var(--ink); outline: none; }
.pmap__pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.pmap__dot {
  position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(240, 120, 42, 0.18), 0 4px 12px rgba(80, 40, 10, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pmap__pin:hover .pmap__dot, .pmap__pin:focus-visible .pmap__dot, .pmap__pin.is-active .pmap__dot { transform: scale(1.25); box-shadow: 0 0 0 9px rgba(240, 120, 42, 0.22), 0 6px 16px rgba(80, 40, 10, 0.35); }
.pmap__name {
  position: absolute; left: 30px; top: 1px; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  background: var(--glass-thick); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-sm);
  font: 600 12px/1.1 var(--font); letter-spacing: -0.003em;
  opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .35s var(--ease);
  pointer-events: none;
}
.pmap__pin.is-named .pmap__name, .pmap__pin:hover .pmap__name, .pmap__pin.is-active .pmap__name { opacity: 1; transform: none; }
.pmap__pin.is-left .pmap__name { left: auto; right: 30px; }
.pmap__cluster {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #fff;
  background: var(--ink); color: #fff; font: 700 13px/1 var(--font); cursor: pointer;
  box-shadow: 0 0 0 6px rgba(29, 27, 24, 0.14), var(--shadow-sm);
}
.pmap__card {
  position: absolute; left: 0; top: 0; width: 260px; z-index: 2;
  border-radius: 20px; overflow: hidden;
  background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg);
  animation: pmapIn .35s var(--ease-out);
}
@keyframes pmapIn { from { opacity: 0; translate: 0 6px; } }
.pmap__card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg); }
.pmap__cardbody { display: grid; gap: 4px; padding: 14px 16px 16px; }
.pmap__cardbody b { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.02em; }
.pmap__cardbody small { font-size: 12px; font-weight: 600; color: var(--accent); }
.pmap__cardbody span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.pmap__cardbody .btn { margin-top: 8px; justify-self: start; }
.pmap__cardbody em { margin-top: 6px; font-size: 12px; font-style: normal; color: var(--muted); }
.pmap__ctl {
  position: absolute; right: 14px; top: 14px; display: grid; gap: 2px; padding: 3px; border-radius: 14px;
  background: var(--glass-thick); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-sm);
}
.pmap__ctl button {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px;
  background: transparent; color: var(--ink); font: 500 20px/1 var(--font); cursor: pointer;
}
.pmap__ctl button:hover { background: var(--fill-2); }
.pmap__ctl button:active { transform: scale(0.94); }
.pmap__hint {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 9px 14px; border-radius: 999px;
  background: var(--glass-dark); color: #fff; font-size: 13px; font-weight: 500;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.pmap__stage.show-hint .pmap__hint { opacity: 1; }
.pmap__attr { position: absolute; right: 12px; bottom: 8px; font-size: 10px; color: var(--muted); pointer-events: none; }
.pmap.is-failed .pmap__stage { display: none; }
@media (max-width: 760px) {
  .pmap__stage { height: 72vh; max-height: 560px; border-radius: 22px; }
  .pmap__card { width: min(240px, calc(100% - 20px)); }
}

/* ---------------------------------------------------------------- the story's end: other projects */
.next { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.next__title { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.next__list { display: grid; gap: 8px; }
.next__item {
  display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 16px;
  text-decoration: none; background: var(--fill-2); transition: background .25s, transform .35s var(--ease);
}
.next__item:hover { background: var(--fill); }
.next__item:active { transform: scale(0.98); }
.next__item img, .next__ph { width: 64px; height: 44px; border-radius: 11px; object-fit: cover; flex: none; background: var(--bg); }
.next__item b { display: block; font-size: 14px; letter-spacing: -0.01em; }
.next__item small { font-size: 12px; color: var(--muted); }
.next__all { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; justify-self: start; }
.next__all:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- about / contact (app.js renderContact) */
.about {
  position: relative; z-index: 3; background: var(--surface);
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end;
  border-top: 1px solid var(--line);
}
.about__head h2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.035em; margin-bottom: 14px; }
.about__lead { max-width: 520px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.about__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.about__facts div { padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), var(--shadow-sm); }
.about__facts dt { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.about__facts dd { margin: 0; font: 700 22px/1.15 var(--font-display); letter-spacing: -0.02em; }
.about__contact { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.about__contact li { padding: 14px 18px; border-radius: 18px; background: var(--fill-2); font-size: 15px; line-height: 1.4; }
.about__contact span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.about__contact a { color: var(--ink); text-decoration: none; }
.about__contact a:hover { color: var(--accent); }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .about__facts dd { font-size: 19px; }
}

/* ---------------------------------------------------------------- menu (under 960 px) */
.menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px;
  background: var(--fill-2); color: var(--ink); cursor: pointer;
}
.menu-btn:active { transform: scale(0.95); }
.menu {
  position: fixed; z-index: 19; top: 82px; left: var(--gutter); right: var(--gutter);
  display: grid; gap: 2px; padding: 8px; border-radius: 22px;
  background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg);
  animation: menuIn .35s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; translate: 0 -8px; } }
.menu a { padding: 14px 16px; border-radius: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }
.menu a:active, .menu a:hover { background: var(--fill-2); }
.menu[hidden] { display: none; }
@media (max-width: 960px) {
  .menu-btn { display: grid; }
}
@media (max-width: 760px) {
  .menu { top: 72px; left: 12px; right: 12px; }
}

/* ---------------------------------------------------------------- footer */
.footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px var(--gutter) 40px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.footer__logo { height: 30px; }

/* ---------------------------------------------------------------- choreography */
/* hero copy appears once the city has risen */
.hero > * { transition: opacity 1s ease, transform 1.1s var(--ease); }
body:not(.is-ready) .hero > * { opacity: 0; transform: translateY(18px); }
.hero__title { transition-delay: 0s; }
.hero__intro { transition-delay: .15s; }
.stat--a { transition-delay: .3s; }
.stat--b { transition-delay: .42s; }
.feature-chip { transition-delay: .55s; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 52vh;
  background: linear-gradient(180deg, rgba(235, 231, 223, 0.92) 0%, rgba(235, 231, 223, 0.55) 55%, rgba(235, 231, 223, 0) 100%);
  pointer-events: none;
}
/* story cards slide in when their stop is reached */
/* (materialize: the glass sharpens out of a blur as it rises, rather than a bare fade) */
.step:not(.step--hero) .card { opacity: 0; filter: blur(8px); transform: translateY(24px) scale(.98); transition: opacity .6s ease, filter .7s var(--ease), transform .8s var(--ease); }
.step.is-in .card { opacity: 1; filter: none; transform: none; }
/* inertia: cards trail the scroll by a few pixels and settle (app.js sets --lag from the scroll speed) */
.step:not(.step--hero) .card { translate: 0 var(--lag, 0px); }
.step--center { justify-content: center; align-items: flex-end; padding-bottom: 12vh; }
.card--wide { width: min(560px, 100%); text-align: left; }
.card--wide .btn { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .hero > *, .step .card { transition: none !important; opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; }
}

/* view compass: where the camera stands relative to the building */
.compass {
  position: fixed;
  z-index: 10;
  left: var(--gutter);
  bottom: 22px;
  margin: 0;
  padding: 10px 10px 9px;
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .6s var(--ease);
  pointer-events: none;
}
.compass.is-on { opacity: 1; transform: none; }
.compass svg { display: block; }
.compass__ring { fill: none; stroke: rgba(29,27,24,.14); stroke-width: 1; stroke-dasharray: 2 3; }
.compass__bldg { fill: var(--ink); }
.compass__front { stroke: var(--accent); stroke-width: 3; }
.compass__cone { fill: var(--accent-tint); stroke: none; }
.compass__cam { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.compass__lbl { font: 500 8px/1 var(--font); fill: var(--ink-2); text-anchor: middle; }
.compass figcaption { font-size: 11px; font-weight: 600; letter-spacing: -0.003em; color: var(--ink-2); margin-top: 2px; }

/* ?temiz: only the maquette (for reviewing renders) */
.is-clean .topbar, .is-clean .story, .is-clean .rail, .is-clean .facades, .is-clean .compass { visibility: hidden; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .nav { display: none; }
  .rail { display: none; }
  .step--right { padding-right: var(--gutter); }
  .step { padding-bottom: 40px; } /* no compass on small screens */
  .stat--b { right: var(--gutter); }
}

@media (max-width: 760px) {
  .topbar { top: 10px; height: 56px; padding: 0 8px 0 5px; border-radius: 16px; }
  .brand__logo { height: 28px; }
  .topbar .brand { height: 46px; padding: 0 14px 0 11px; border-radius: 12px; }
  .topbar .brand__logo { height: 28px; }
  .step, .step--right { align-items: flex-end; justify-content: center; padding: 90px 16px 140px; } /* clear of the dock + facade tabs */
  .card { padding: 22px; }
  .hero { padding: 96px 16px 32px; }
  .hero__title { left: 16px; right: 16px; top: 92px; }
  .hero__intro { left: 16px; right: 16px; width: auto; top: auto; bottom: 148px; }
  .stat { min-width: 0; padding: 10px 14px; }
  .stat__value { font-size: 22px; }
  .stat--a { left: 16px; top: 44vh; }
  .stat--b { right: 16px; top: 50vh; }
  .feature-chip { display: none; } /* on phones the dock owns the bottom; "Keşfe başla" leads to the same place */
  .stat--a { top: 40vh; }
  .stat--b { top: 46vh; }
  .facades { bottom: 14px; max-width: calc(100% - 24px); }
  .compass { display: none; }
  .hero__title::before, .hero__intro::before { display: none; }
  .hero::before { display: none; }
  .hero__title h1 { text-shadow: 0 0 22px rgba(235, 231, 223, 0.95), 0 0 6px rgba(235, 231, 223, 0.9); }
  .hero__intro { padding: 14px 16px 16px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
  .facades button { padding: 9px 11px; font-size: 12px; }
}

/* ---------------------------------------------------------------- real-time daylight */
.daychip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; margin-right: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--fill-2);
  font: 500 12px/1 var(--font); letter-spacing: 0; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.daychip__sun { width: 9px; height: 9px; border-radius: 50%; background: #f2a541; box-shadow: 0 0 0 3px rgba(242, 165, 65, .22); transition: background .6s, box-shadow .6s; }
.is-dusk .daychip__sun { background: #ef7d2d; box-shadow: 0 0 0 3px rgba(239, 125, 45, .25); }
.is-night .daychip__sun { background: #c9d4ee; box-shadow: 0 0 0 3px rgba(201, 212, 238, .22); }
/* after dark the hero sits on a dark sky: light type on a dusky glow */
.is-night .hero__title h1, .is-night .hero__title .kicker, .is-night .hero__lead { color: #f1ede6; }
.is-night .hero__title h1 span { color: #b9b3a8; }
.is-night .hero__title::before, .is-night .hero__intro::before {
  background: radial-gradient(closest-side, rgba(20, 26, 40, 0.75), rgba(20, 26, 40, 0.45) 55%, rgba(20, 26, 40, 0));
}
@media (max-width: 960px) { .daychip { display: none; } }
/* the chapter card's head: kicker on the left, the scene's clock and sky on the right (same words as the header chip) */
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card__head .kicker { margin-bottom: 0; }
.card__sky {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: 500 12px/1 var(--font); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.card__sky .daychip__sun { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(242, 165, 65, .22); }
.card__sky [data-sky]:empty { display: none; }
.step .card.is-gone { opacity: 0 !important; transition: opacity .25s ease; }

/* ---------------------------------------------------------------- scene controls (play, time, weather) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene-ctl {
  position: fixed; z-index: 11; right: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px; border-radius: 999px;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
  font: 600 13px/1 var(--font); letter-spacing: -0.003em; color: var(--ink);
}
.is-archive .scene-ctl { opacity: 0; pointer-events: none; transform: translateY(120%); }
.facades.is-on ~ .scene-ctl { bottom: 76px; } /* above the facade tabs while they show */
.scene-ctl { transition: opacity .4s, transform .55s var(--ease), bottom .55s var(--ease); }
.scene-ctl button:active { transform: scale(0.95); transition: transform .08s; }
.scene-ctl button { transition: transform .35s var(--ease), background .2s, color .2s; }
.scene-ctl__play {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 13px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; cursor: pointer;
}
.scene-ctl__play:hover { filter: brightness(1.06); }
.scene-ctl__play svg { width: 13px; height: 13px; fill: currentColor; }
.scene-ctl__play .i-pause, .scene-ctl__play[aria-pressed="true"] .i-play { display: none; }
.scene-ctl__play[aria-pressed="true"] .i-pause { display: block; }
.scene-ctl__sep { width: 1px; height: 20px; background: var(--line); }
@media (max-width: 760px) {
  .scene-ctl { right: 10px; left: 10px; bottom: 10px; justify-content: space-between; }
  .scene-ctl__play span { display: none; }
  .scene-ctl__play { padding: 0 11px; }
}

/* ---------------------------------------------------------------- share + toast */
.scene-ctl__share {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--fill); color: var(--ink); cursor: pointer;
}
.scene-ctl__share:hover { background: rgba(118, 112, 104, 0.2); }
.scene-ctl__share svg { width: 16px; height: 16px; }
/* sound switch (sound.js): the waves when on, a cross when off */
.scene-ctl__sound .snd-on { display: none; }
.scene-ctl__sound[aria-pressed="true"] .snd-on { display: inline; }
.scene-ctl__sound[aria-pressed="true"] .snd-off { display: none; }
.scene-ctl__sound[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }
/* sound mixer (mixer.js): a glass card over the dock, a slider per sound */
.mixer {
  position: fixed; z-index: 14; right: 22px; top: 92px; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 92px - 150px); overflow: auto; /* clear of the dock and the facade tabs */
  padding: 16px 16px 14px; border-radius: 26px; background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg); color: var(--ink); animation: wx-in .4s var(--ease-out);
}
.mixer[hidden] { display: none; }
.mixer__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 2px 10px; }
.mixer__kicker { margin: 0 0 4px; font: 600 12px/1 var(--font); color: var(--accent); }
.mixer__title { font: 700 22px/1.1 var(--font-display); letter-spacing: -0.02em; }
.mixer__x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.mixer__x svg { width: 12px; height: 12px; }
.mixer__meter { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 0.5px var(--line); }
.mixer__bar { position: relative; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.mixer__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #6aa86f, #d9b44a 62%, var(--accent)); transition: transform 80ms linear; }
.mixer__ceil { position: absolute; top: -2px; bottom: -2px; left: 66.67%; width: 2px; background: #b3261e; }
.mixer__read { margin: 7px 0 0; font: 400 12px/1.3 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.mixer__read b { color: var(--ink); font-weight: 600; }
.mixer__hint { margin: 10px 2px 2px; font: 400 12px/1.4 var(--font); color: var(--muted); }
.mixer__group { margin: 14px 2px 4px; font: 600 12px/1 var(--font); color: var(--ink-2); }
.mixer__row { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 2px 8px; padding: 6px 2px; border-top: 0.5px solid var(--line); }
.mixer__row label { font: 500 13.5px/1.2 var(--font); }
.mixer__val { font: 500 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.mixer__play { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.mixer__play svg { width: 10px; height: 10px; }
.mixer__play:active { transform: scale(0.92); }
.mixer__row input[type="range"] {
  grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.mixer__row input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--fill) var(--p, 50%)); }
.mixer__row input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--fill) var(--p, 50%)); }
.mixer__row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 0 0.5px rgba(0,0,0,.08); }
.mixer__row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mixer__foot { display: flex; gap: 8px; padding: 12px 2px 2px; }
#mixerBtn[aria-expanded="true"] { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .mixer { right: 12px; left: 12px; width: auto; top: 84px; max-height: calc(100vh - 84px - 150px); } }

.ld-sound {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-top: 4px; padding: 0 12px 0 10px;
  border: 0; border-radius: 999px; background: var(--fill); color: var(--ink-2); font: 600 12.5px/1 var(--font); cursor: pointer;
  transition: background .2s, color .2s;
}
.ld-sound svg { width: 14px; height: 14px; }
.ld-sound:hover { background: rgba(118, 112, 104, 0.2); color: var(--ink); }
.ld-sound[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: 96px; transform: translate(-50%, 0); padding: 10px 16px; border-radius: 999px;
  background: var(--glass-dark); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: #fff;
  font: 600 14px/1 var(--font); letter-spacing: -0.006em; box-shadow: var(--shadow);
  animation: toast-in .45s var(--ease); transition: opacity .4s, transform .5s var(--ease);
}
.toast.is-out { opacity: 0; transform: translate(-50%, 8px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- floor plans (floors.js, section.js) */
.btn--tint { background: var(--accent-tint); color: var(--accent); gap: 7px; }
.btn--tint:hover { background: rgba(240, 120, 42, 0.2); }
.btn--tint svg { width: 15px; height: 15px; }
.btn--tint[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* the flats of a floor: letter in its plan colour, type, where, areas -- as in a sales brochure's table */
.plan-units__sub { margin: 0 0 10px; font: 500 14px/1.35 var(--font); color: var(--ink-2); }
.plan-units__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.unit {
  --tone: var(--accent);
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background .2s, opacity .2s;
}
.unit:hover, .unit.is-on { background: color-mix(in srgb, var(--tone) 11%, transparent); }
.unit:focus-visible { outline: 2px solid var(--tone); outline-offset: -2px; }
.unit.is-dim { opacity: .5; }
.unit__badge {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--tone); color: #fff; font: 700 14px/1 var(--font);
}
.unit__main, .unit__area { display: grid; gap: 2px; min-width: 0; }
.unit__main b { font: 600 15px/1.2 var(--font); letter-spacing: -0.012em; }
.unit__main small { font: 400 12.5px/1.3 var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.unit__area { text-align: right; }
.unit__area b { font: 600 15px/1.2 var(--font); letter-spacing: -0.012em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit__area small { font: 400 12px/1.3 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-units__note { margin: 10px 0 0; font: 400 12px/1.4 var(--font); color: var(--muted); }
.plan-units + .btn { margin-top: 14px; }

/* the slider: a floor rail at the right, the floor's card where the chapter cards sit */
.floors { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.floors > * { pointer-events: auto; transition: opacity .35s, transform .5s var(--ease); }
.floors:not(.is-open) > * { opacity: 0; pointer-events: none; transform: translateX(16px); }
.floors:not(.is-open) > .floors__card { transform: translateX(-16px); }
.floors-open .step .card, .floors-open .rail, .floors-open #compass { opacity: 0 !important; pointer-events: none; transition: opacity .3s; }
.floors-open .facades { opacity: 0; pointer-events: none; }
.is-archive .floors > * { opacity: 0 !important; pointer-events: none; }
.floors__rail {
  position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; border-radius: 999px; background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow);
}
.floors__rail button {
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
  font: 600 14px/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, transform .3s var(--ease);
}
.floors__rail button:hover { background: var(--fill); color: var(--ink); }
.floors__rail button:active { transform: scale(0.92); transition-duration: .08s; }
.floors__rail button[aria-selected="true"] { background: var(--ink); color: #fff; }
.floors__card {
  position: absolute; left: 32px; top: 50%; translate: 0 -50%; width: min(380px, calc(100vw - 140px)); max-height: calc(100vh - 200px); overflow: auto;
  padding: 18px 14px 14px; border-radius: 28px; background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg); color: var(--ink);
}
.floors__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 8px 12px; }
.floors__kicker { margin: 0 0 4px; font: 600 12px/1 var(--font); color: var(--accent); }
.floors__title { margin: 0; font: 700 24px/1.1 var(--font-display); letter-spacing: -0.022em; }
.floors__meta { margin: 6px 0 0; font: 400 13px/1.35 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.floors__x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
}
.floors__x:hover { background: var(--fill-2); color: var(--ink); }
.floors__x svg { width: 12px; height: 12px; }
.floors__foot { padding: 12px 8px 2px; }
.floors__suncard {
  position: absolute; right: 86px; top: 50%; translate: 0 -50%; width: min(360px, calc(100vw - 520px)); min-width: 300px; max-height: calc(100vh - 220px); overflow: auto;
  padding: 16px; border-radius: 28px; background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg); color: var(--ink); animation: wx-in .45s var(--ease);
}
.floors__sub { margin: 0 2px 10px; font: 600 13px/1.3 var(--font); letter-spacing: -0.003em; color: var(--ink-2); }
.floors__sun { display: flex; flex-direction: column; gap: 6px; }
.sunrow {
  display: grid; grid-template-columns: 1fr 96px; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px; border: 0; border-radius: 16px; background: rgba(255,255,255,.7); text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 0.5px var(--line); transition: box-shadow .3s var(--ease), transform .35s var(--ease);
}
.sunrow:active { transform: scale(0.98); transition-duration: .08s; }
.sunrow.is-on { box-shadow: inset 0 0 0 2px var(--accent); }
.sunrow__dir b { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.sunrow__dir small, .sunrow__num small { color: var(--muted); font-size: 12px; letter-spacing: 0; }
.sunrow__bars { grid-row: span 2; width: 96px; height: 30px; }
.sunrow__bars rect { fill: #e9c9a6; }
.sunrow__bars rect.is-key { fill: var(--accent); }
.sunrow__num { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sunrow__num b { color: var(--ink); font-weight: 600; }
.floors__view { margin: 10px 0 0; border-radius: 18px; overflow: hidden; background: #ddd6cb; aspect-ratio: 16 / 10; position: relative; }
.floors__view img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s; }
.floors__view.is-loading img { opacity: .35; }
.floors__view figcaption { position: absolute; left: 10px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(20,18,15,.6); color: #fff; font-size: 11px; }
.floors__note { margin: 10px 2px 0; font-size: 12px; line-height: 1.4; letter-spacing: 0; color: var(--muted); }

/* on the model: one small pill per flat (letter + type); the rooms are named on the plan itself */
.section-labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* under the cards, like the map labels */
.floors-open .section-labels { z-index: 11; } /* the slider's own card is in .floors (above) */
.is-archive .section-labels { display: none; }
.plan-pill {
  --tone: var(--accent);
  position: absolute; left: 0; top: 0; translate: -50% -50%; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 3px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ink); font: 600 13px/1 var(--font); letter-spacing: -0.006em; white-space: nowrap;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.16); transition: opacity .2s, scale .25s var(--ease);
  animation: pill-in .4s var(--ease) both;
}
.plan-pill span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: #fff; font-size: 12px; font-weight: 700; }
.plan-pill.is-on { scale: 1.08; z-index: 2; }
.plan-pill.is-dim { opacity: .45; }
@keyframes pill-in { from { opacity: 0; scale: .9; } }
@media (max-width: 760px) {
  .floors__rail { top: auto; bottom: 12px; right: 50%; translate: 50% 0; flex-direction: row; }
  .floors-open .scene-ctl { opacity: 0; pointer-events: none; } /* the rail takes the dock's place */
  .floors__rail button { width: 34px; height: 34px; }
  .floors__card { left: 10px; right: 10px; width: auto; top: 76px; translate: 0 0; max-height: 34vh; padding: 14px 8px 8px; border-radius: 24px; }
  .floors__title { font-size: 20px; }
  .floors__suncard { right: 10px; left: 10px; width: auto; min-width: 0; top: auto; bottom: 116px; translate: 0 0; max-height: 40vh; }
  .unit { padding: 6px 6px; gap: 10px; grid-template-columns: 26px 1fr auto; }
  .unit__badge { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
  .unit__main b, .unit__area b { font-size: 14px; }
  .unit__main small { white-space: nowrap; }
  .unit__area small, .step .plan-units__note { display: none; }
  .plan-units__sub { margin-bottom: 6px; font-size: 13px; }
  .plan-pill { height: 24px; font-size: 12px; padding-right: 8px; }
  .plan-pill span { width: 18px; height: 18px; font-size: 11px; }
}

/* ---------------------------------------------------------------- sky widget (app.js: time, season, clouds, weather) */
.wx-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 6px; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--ink); font: 600 13px/1 var(--font); cursor: pointer;
}
.wx-pill:hover { background: rgba(118, 112, 104, 0.2); }
.wx-pill[aria-expanded="true"] { background: var(--ink); color: #fff; }
.wx-pill__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.wx-pill__cond { color: var(--ink-2); font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-pill[aria-expanded="true"] .wx-pill__cond { color: rgba(255,255,255,.66); }

/* the orb: a moon underneath, the sun over it (--sun 0 night .. 1 day, --gold towards sunrise / sunset), clouds,
   rain or snow drifting across; everything soft-edged like a lit sphere seen through haze */
.wx-orb {
  --sun: 1; --gold: 0; --cloud: 0; --rain: 0;
  --c1: color-mix(in oklab, #fff4a6, #ffc15c calc(var(--gold) * 100%));
  --c2: color-mix(in oklab, #ffb02e, #ff6a2b calc(var(--gold) * 100%));
  --c3: color-mix(in oklab, #ff8a3c, #e2436e calc(var(--gold) * 100%));
  position: relative; display: block; width: 150px; height: 150px; border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle at 38% 32%, #f4f7ff 0%, #c9d4ec 45%, #8b9cc4 80%, #6a7aa6 100%); /* the moon */
  box-shadow: 0 0 60px rgba(255, 150, 60, calc(var(--sun) * .55)), 0 0 46px rgba(150, 170, 230, calc((1 - var(--sun)) * .45));
}
.wx-orb::before { /* the sun */
  content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: var(--sun); transition: opacity .6s;
  background: radial-gradient(circle at 40% 34%, var(--c1) 0%, var(--c2) 48%, var(--c3) 86%, color-mix(in oklab, var(--c3), #ff5d8f 40%) 100%);
}
.wx-orb__swirl { /* slow molten swirl over the sun */
  position: absolute; inset: 6%; border-radius: 50%; opacity: calc(var(--sun) * .75); mix-blend-mode: soft-light; filter: blur(7px);
  background: conic-gradient(from 0deg, rgba(255,255,220,.95), rgba(255,140,40,.2), rgba(255,240,150,.9), rgba(255,110,60,.3), rgba(255,255,220,.95));
  animation: wx-spin 14s linear infinite;
}
.wx-orb__clouds { /* clouds drift across, more of them as the cover grows */
  position: absolute; inset: -10% -30%; opacity: var(--cloud); filter: blur(5px); transition: opacity .6s;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), transparent) 6% 62% / 46% 34% no-repeat,
    radial-gradient(closest-side, rgba(244,246,250,.95), transparent) 38% 52% / 54% 40% no-repeat,
    radial-gradient(closest-side, rgba(232,236,242,.95), transparent) 70% 66% / 50% 36% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9), transparent) 92% 48% / 44% 30% no-repeat;
  animation: wx-drift 9s ease-in-out infinite alternate;
}
.wx-orb__rain { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .6s; }
.wx-orb[data-precip="rain"] .wx-orb__rain {
  opacity: calc(.35 + var(--rain) * .6);
  background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(220,232,250,.85) 9px 10.5px, transparent 10.5px 22px);
  background-size: 100% 44px; animation: wx-rain .5s linear infinite;
}
.wx-orb[data-precip="snow"] .wx-orb__rain {
  opacity: .9;
  background: radial-gradient(circle, #fff 0 1.6px, transparent 2.4px) 0 0 / 18px 18px, radial-gradient(circle, rgba(255,255,255,.8) 0 1.2px, transparent 2px) 9px 7px / 22px 22px;
  animation: wx-snow 4s linear infinite;
}
@keyframes wx-spin { to { rotate: 360deg; } }
@keyframes wx-drift { from { translate: -6% 0; } to { translate: 6% 0; } }
@keyframes wx-rain { to { background-position: 0 44px; } }
@keyframes wx-snow { to { background-position: 0 72px, 9px 95px; } }
.wx-orb--mini { width: 24px; height: 24px; box-shadow: 0 0 10px rgba(255,150,60, calc(var(--sun) * .6)); }
.wx-orb--mini .wx-orb__swirl { filter: blur(1.5px); }
.wx-orb--mini .wx-orb__clouds { filter: blur(1px); }

.wx-card {
  position: fixed; z-index: 13; right: 22px; bottom: 76px; width: 344px; padding: 18px 18px 16px; border-radius: 28px;
  background: var(--glass-thick); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--hairline), var(--shadow-lg);
  color: var(--ink); animation: wx-in .5s var(--ease); transform-origin: calc(100% - 60px) 100%; /* grows out of its pill */
}
.wx-card[hidden] { display: none; }
.facades.is-on ~ .wx-card { bottom: 130px; }
.is-archive .wx-card { display: none; }
@keyframes wx-in { from { opacity: 0; translate: 0 12px; scale: .98; filter: blur(4px); } }
.wx-card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.wx-card__head b { display: block; font: 600 17px/1.2 var(--font); letter-spacing: -0.014em; }
.wx-card__head small { display: block; margin-top: 2px; font: 500 13px/1.2 var(--font); letter-spacing: -0.003em; color: var(--ink-2); }
.wx-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); }
.wx-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: 500 12px/1 var(--font); color: var(--ink-2); cursor: pointer; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.wx-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 2px 6px -2px rgba(0,0,0,.12); }
.wx-card__stage { position: relative; height: 176px; margin: 6px -18px 4px; display: grid; justify-items: center; overflow: hidden; }
.wx-card__stage .wx-orb { margin-top: 18px; }
.wx-card__band { /* the frosted band across the orb's lower half, as in the reference */
  position: absolute; left: 0; right: 0; top: 50%; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,.6);
}
.wx-card__big { font: 600 48px/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.wx-card__cond { display: grid; justify-items: end; text-align: right; }
.wx-card__cond b { font: 600 20px/1.15 var(--font-display); letter-spacing: -.02em; }
.wx-card__cond small { font: 500 13px/1.25 var(--font); letter-spacing: -0.003em; color: var(--ink-2); }
.wx-sliders { display: grid; gap: 6px; margin: 8px 0 12px; }
.wx-slider { display: grid; grid-template-columns: 20px 1fr 64px; align-items: center; gap: 10px; color: var(--ink-2); }
.wx-slider svg { width: 17px; height: 17px; }
.wx-slider output { font: 500 13px/1 var(--font); letter-spacing: -0.003em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.wx-slider input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
.wx-slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #1f2a44, #f7a23a 30%, #ffe7a6 50%, #f7a23a 70%, #1f2a44); }
.wx-slider input#wxDay::-webkit-slider-runnable-track { background: linear-gradient(90deg, #8fb0d9, #9ccf86 30%, #ffd166 50%, #f29b4b 75%, #8fb0d9); }
.wx-slider input#wxCloud::-webkit-slider-runnable-track { background: linear-gradient(90deg, #8ec5ff, #c9d3df 60%, #7d8693); }
.wx-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06); }
.wx-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #d9d3c9; }
.wx-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.wx-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wx-pick button {
  display: grid; justify-items: center; gap: 3px; padding: 7px 0 6px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink-2); font: 500 10.5px/1 var(--font); letter-spacing: 0; cursor: pointer; transition: background .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.wx-pick button:active { transform: scale(0.94); transition-duration: .08s; }
.wx-pick button svg { width: 17px; height: 17px; }
.wx-pick button:hover { background: var(--fill-2); }
.wx-pick button[aria-checked="true"] { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 10px -3px rgba(0,0,0,.16); }
@media (max-width: 760px) {
  .wx-card { left: 10px; right: 10px; width: auto; bottom: 62px; }
  .wx-pill__cond { display: none; }
  .wx-card__stage { height: 150px; }
  .wx-card__stage .wx-orb { width: 124px; height: 124px; }
  .wx-card__big { font-size: 36px; }
}

/* ---------------------------------------------------------------- accessibility preferences */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(251, 250, 248, 0.97); --glass-thick: #fbfaf8; --glass-dark: rgba(30, 29, 32, 0.96); --blur: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: rgba(29, 27, 24, 0.86); --muted: rgba(29, 27, 24, 0.7); --line: rgba(29, 27, 24, 0.3); }
  .card, .stat, .feature-chip, .topbar, .scene-ctl, .wx-card, .floors__suncard, .floors__card { box-shadow: inset 0 0 0 1px rgba(29, 27, 24, 0.35), var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .wx-orb__swirl, .wx-orb__clouds, .wx-orb__rain { animation: none !important; }
  .wx-card, .floors__suncard, .plan-pill { animation: none !important; }
  .loader.has-cover .loader__backdrop { animation: none; transform: none; }
  .ld-stage.is-built .lplan__rooms, .ld-stage.is-built .lplan__tags, .ld-stage.is-built .lplan__lines, .ld-stage.is-built .lplan__units path { animation: none; }
  .ld-stage.is-built .ld-typ .lplan__walls path { animation: none; stroke-dasharray: none; }
  .ld-cap__item { animation: none !important; }
  .ld-cap__item:first-child { opacity: 1; }
  .loader__bar::after { display: none; }
  .ld-spin-i { animation: none; }
  .loader.is-done .loader__card { transform: none; }
}