/* URUK mockup: tokens, layout, components. Mobile first (390 px), then ≥ 900 px. Logical properties throughout, so
   dir="rtl" mirrors the layout without extra rules (the few physical exceptions say so).
   Look (Uruk Master File, Brand Guideline 2026): Limestone grounds, Basalt type and panels, a light sans set large
   with tight tracking, small labels, the eight-point mark as the anchor, the 45° wedge as the motif. Pillar colours
   only when a pillar is lit. No heavy shadows, no decorative gradients. */
:root {
  --basalt: #3a3634; --limestone: #e4e2d4; --paper: #f1efe6; /* the brand's colours (Master File 3.2) */
  /* the roles they play, so a theme can swap them (css/city-theme.css): ink on ground, surfaces above the ground */
  --ink: var(--basalt); --ground: var(--limestone); --surface: var(--paper); --ink-2: #5c5652; --clay: #9c6b47; --clay-ink: #7d5232; /* clay for small text: 5.2:1 on Limestone (Clay itself is 3.5:1) */
  --line: rgba(58, 54, 52, 0.18); --scrim: rgba(58, 54, 52, 0.42);
  /* the brand's typefaces (Master File 3.4): Season (Sans, Mix, Serif) and, for Arabic, Omnia Display. Until their
     files are in, the free stand-ins after them take over: Figtree, Instrument Serif, IBM Plex Sans Arabic */
  --f-sans: "Season Sans", Figtree, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Season Serif", "Season Mix", "Instrument Serif", Georgia, serif;
  --f-ar: "IBM Plex Sans Arabic", "Season Sans", Figtree, sans-serif;
  --f-ar-display: "Omnia Display", "Omnia Arabic", "IBM Plex Sans Arabic", sans-serif;
  --r: 18px; --tap: 44px;
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 20px;
  --guide-h: 236px; /* measured by ui/layout.js trackHeight (wired in app.js) */
  --guide-gap: calc(10px + var(--sa-b)); /* the guide floats this far above the bottom edge */
  --guide-top: calc(var(--guide-h) + var(--guide-gap)); /* its top edge, from the bottom: lay things out above it */
  color-scheme: light;
}
html { background: var(--ground); color: var(--ink); font: 400 16px/1.45 var(--f-sans); -webkit-text-size-adjust: 100%; }

/* The Heart: an image-first architectural study, with optional district-only 3D. */
.district-page { padding:calc(96px + var(--sa-t)) var(--gutter) calc(var(--guide-top) + 48px); max-width:1800px; margin:auto; }
.district-head { margin-bottom:32px; }
.district-head .kicker { margin-top:0; }
.district-head .display { max-width:12ch; font-size:clamp(42px,5vw,76px); }
.district-head .lead { max-width:48ch; font-size:16px; }
.district-layout { display:grid; gap:36px; }
.district-figure { position:relative; margin:0; background:#cecec7; overflow:hidden; border-radius:4px; aspect-ratio:18/11; }
.district-image { width:100%; height:100%; object-fit:cover; }
.district-viewport { position:absolute; inset:0; visibility:hidden; }
.district-viewport.is-live { visibility:visible; }
.district-canvas { display:block; width:100%; height:100%; touch-action:none; }
.district-image-tag { position:absolute; inset-inline-start:16px; top:16px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); pointer-events:none; }
.district-views { display:flex; border-bottom:1px solid var(--line); }
.district-view { flex:1; border:0; border-bottom:2px solid transparent; background:transparent; min-height:60px; padding:12px 8px; text-align:start; font-size:13px; color:var(--ink-2); }
.district-view[aria-pressed="true"] { border-bottom-color:var(--clay); color:var(--ink); }
.district-view-number { display:block; font-size:12px; color:var(--clay-ink); margin-bottom:3px; }
.district-gallery-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; padding-top:20px; }
.district-caption { font-size:13px; color:var(--ink-2); max-width:40ch; margin:0; }
.district-actions { display:flex; gap:8px; flex-wrap:wrap; }
.district-status { margin:12px 0 0; min-height:1.5em; font-size:12px; color:var(--ink-2); }
.district-directory h2 { font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; margin:0 0 16px; }
.district-places { border-top:1px solid var(--line); }
.district-place { display:flex; align-items:center; width:100%; gap:14px; min-height:76px; padding:16px 0; text-align:start; border:0; border-bottom:1px solid var(--line); background:transparent; }
.district-place-number { font-size:12px; color:var(--clay-ink); align-self:flex-start; padding-top:3px; }
.district-place strong { font-size:15px; font-weight:450; display:block; }
.district-place-line { display:block; color:var(--ink-2); font-size:12px; margin-top:4px; }
.district-place-arrow { margin-inline-start:auto; font-size:21px; font-weight:300; }
.district-place:hover strong { color:var(--clay-ink); }
.district-note { max-width:88ch; font-size:12px; color:var(--ink-2); margin:28px 0 0; line-height:1.7; }
@media (min-width:1100px) {
  .district-page { padding-inline:clamp(30px,4vw,80px); }
  .district-head { display:grid; grid-template-columns:1fr 340px; column-gap:50px; align-items:end; }
  .district-head .kicker { grid-column:1 / -1; }
  .district-head .display { max-width:16ch; }
  .district-head .lead { margin:0 0 4px; }
  .district-layout { grid-template-columns:minmax(0,1fr) 290px; gap:40px; }
}
@media (max-width:599px) {
  .district-head { margin-bottom:24px; }
  .district-head .display { max-width:11ch; }
  .district-figure { aspect-ratio:18/11; }
  .district-image-tag { top:12px; inset-inline-start:12px; font-size:9px; }
  .district-view { font-size:12px; }
}
html[lang="ar"] { font-family: var(--f-ar); }
body { margin: 0; min-height: 100dvh; overflow: hidden; }
.tbd { background: repeating-linear-gradient(45deg, #f2bb2033 0 6px, transparent 6px 12px); outline: 1px dashed #b38600; padding: 0 4px; border-radius: 4px; font-variant-numeric: tabular-nums; }
/* reduced motion: everything settles at once, and a looping animation plays its 1 ms once instead of flickering */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* a word in another script keeps its own face (the language button shows "عربي" on an English page) */
:lang(ar) { font-family: var(--f-ar); }
[lang="en"], [lang="es"] { font-family: var(--f-sans); }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

.skip {
  position: fixed; z-index: 60; inset-inline-start: 12px; top: calc(8px + var(--sa-t));
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--ground);
  font-size: 14px; text-decoration: none; transform: translateY(-200%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ---- top bar: logo at the start, language + star at the end. It lets taps through to the stage between them. */
.top {
  position: fixed; z-index: 30; top: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: calc(10px + var(--sa-t)) 10px;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); /* physical: symmetric */
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.logo { display: flex; align-items: center; min-height: var(--tap); margin-inline-start: -6px; padding: 6px; border-radius: 8px; }
.logo img { width: auto; height: 32px; }
.top-actions { display: flex; align-items: center; gap: 6px; margin-inline-end: -6px; }

/* pills: Map, the language, I'm interested: 44 px, the tap target itself. */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 450; line-height: 1; letter-spacing: .01em;
  white-space: nowrap; transition: border-color .2s var(--ease), transform .12s var(--ease);
}
.pill:active { transform: scale(.97); }
/* "I'm interested": the one dark pill in the bar, on every scene but the temple's flight (UX pass, 16 Oct 2026) */
.pill-primary { border-color: var(--ink); background: var(--ink); color: var(--ground); font-weight: 500; }
body[data-scene="origin"] #interest-btn { display: none; }
/* the language in use, in its own script; a phone keeps it in the menu, except on the intro */
.lang-btn { gap: 6px; padding-inline: 12px 10px; }
.lang-caret { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
@media (max-width: 899px) { body:not([data-scene="landing"]) #lang { display: none; } }
.lang-pop {
  position: fixed; z-index: 45; display: grid; gap: 2px; min-width: 160px; padding: 6px; border-radius: 16px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(58, 54, 52, .35);
}
.lang-option { min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 15px; text-align: start; }
.lang-option.on { background: var(--ground); font-weight: 500; }
@media (hover: hover) { .lang-option:hover { background: color-mix(in srgb, var(--ground) 60%, transparent); } }
/* the menu button: three lines */
.menu-icon { position: relative; width: 20px; height: 1.5px; border-radius: 1px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.icon-btn.menu-btn { border: 1px solid var(--line); background: var(--surface); }
/* the menu (ui/menu.js): the pages, then the ways to talk, then the languages */
.menu { display: grid; gap: 24px; }
.menu .menu-list { margin-top: 0; max-width: none; }
.menu-list a[aria-current="page"] { font-weight: 500; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-langs .seg { max-width: 100%; }
.seg .lang-option { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.seg .lang-option.on { background: var(--ink); color: var(--ground); }
/* a page scrolled under the bar: the bar gets a ground, so nothing reads through the logo and the pills */
.top { transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
body[data-scrolled] .top {
  background: rgba(228, 226, 212, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}

.icon-btn {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: transparent;
}
/* the mark turns one pillar (45°) when pointed at: its eight points land where they started */
.icon-btn img { width: 30px; height: 30px; transition: transform .6s var(--ease); }
.icon-btn:active img { transform: scale(.92); }
@media (hover: hover) {
  .pill:hover { border-color: rgba(58, 54, 52, .5); }
  .icon-btn:hover img { transform: rotate(45deg); }
}

/* ---- stage: the scene's root, full bleed under everything */
#stage { position: fixed; inset: 0; z-index: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none; }

/* scene stubs (Task 3): a heading and one line in the space between the top bar and the guide */
.stub {
  min-height: 100%; display: flex; flex-direction: column; justify-content: center;
  max-width: 720px;
  padding: calc(var(--sa-t) + 92px) var(--gutter) calc(var(--guide-top) + 64px);
}
.display {
  margin: 0; font-weight: 300; font-size: clamp(40px, 24px + 4.2vw, 76px); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
html[lang="ar"] .display { letter-spacing: 0; line-height: 1.25; }
.lead { margin: 18px 0 0; max-width: 32ch; font-size: 17px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.list { list-style: none; margin: 32px 0 0; padding: 0; max-width: 440px; border-top: 1px solid var(--line); }
.list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 17px;
}
.list a::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-inline-end: 4px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); /* physical, flipped below */
}
[dir="rtl"] .list a::after { transform: rotate(-135deg); }
@media (hover: hover) { .list a:hover { color: var(--ink-2); } }

/* ---- Map button: in the top bar, beside the language, on every scene that isn't the map (the intro and the temple
   have their own ways on). It replaces the "Back to the map" chips. */
.map-btn { gap: 7px; padding: 0 14px 0 11px; padding-inline: 11px 14px; }
.map-btn::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.5 5.5 2l5 2 4-1.5v10l-4 1.5-5-2-4 1.5zM5.5 2v10M10.5 4v10' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.5 5.5 2l5 2 4-1.5v10l-4 1.5-5-2-4 1.5zM5.5 2v10M10.5 4v10' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:is([data-scene="landing"], [data-scene="masterplan"], [data-scene="origin"]) .map-btn { display: none; }

/* ---- guide: a pane of frosted glass floating at the bottom centre, on phones and wide screens alike, so whatever is
   behind it (the city, a page) stays in view and centred. Lowkey gloss: a soft light on its top edge and a sheen
   that passes over it when the guide answers. Without backdrop blur (or with reduced transparency) it turns
   near-solid, so text always reads. */
.guide {
  --glass: rgba(242, 238, 228, .48);
  position: fixed; z-index: 20; bottom: var(--guide-gap); inset-inline: 10px; margin-inline: auto; max-width: 560px;
  display: grid; gap: 10px; isolation: isolate;
  padding: 14px 14px 12px; --gutter: 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .06)), var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .34),
    0 1px 2px rgba(58, 54, 52, .06), 0 22px 48px -18px rgba(58, 54, 52, .34);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease);
}
/* the gloss: light pooled at the top edge, and the sheen (.replied) that sweeps across once per answer */
.guide::before, .guide::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.guide::before { background: radial-gradient(120% 70% at 18% -18%, rgba(255, 255, 255, .62), transparent 58%); }
.guide::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .08) 54%, transparent 64%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; opacity: 0;
}
.guide.replied::after { animation: sheen 1.15s var(--ease) both; }
@keyframes sheen { 0% { opacity: 0; background-position: 140% 0; } 18% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } }
/* the visitor is typing: the glass lifts a little and clears */
.guide:focus-within { --glass: rgba(246, 243, 235, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .42), 0 1px 2px rgba(58, 54, 52, .06), 0 28px 60px -18px rgba(58, 54, 52, .4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .guide { --glass: rgba(242, 239, 230, .95); } }
@media (prefers-reduced-transparency: reduce) { .guide { --glass: rgba(242, 239, 230, .97); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* the blur is redrawn whenever the city moves behind it: lighter on the lite tier, none on Plan C's weak devices */
body[data-tier="lite"] .guide { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
body[data-tier="static"] .guide { --glass: rgba(242, 239, 230, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
.guide:empty { display: none; }
.guide-head { display: flex; align-items: center; gap: 6px; min-height: 18px; padding-inline: 2px; font-size: 12px; line-height: 1; letter-spacing: .02em; color: var(--ink-2); }
.guide-ai::before { content: "·"; margin-inline-end: 6px; }
/* the guide's mark: the brand star, small; it turns while the guide thinks */
.guide-mark { flex: none; width: 18px; height: 18px; margin-inline-end: 2px; background: url("../../assets/mark.svg") center / contain no-repeat; }
.guide.thinking .guide-mark { animation: tick .9s var(--ease) infinite; }
@keyframes tick { to { transform: rotate(45deg); } } /* eight points: a turn of 45° lands where it started */
/* expand / collapse the conversation: a chevron at the head's end, with a full tap target */
.guide-toggle { position: relative; flex: none; width: 32px; height: 18px; margin-inline-start: auto; padding: 0; border: 0; background: transparent; color: var(--ink-2); }
.guide-toggle::before { content: ""; position: absolute; inset: -13px -6px; }
.guide-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -2px 0 0 -4px;
  border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease);
}
.guide.expanded .guide-toggle::after { margin-top: -6px; transform: rotate(225deg); }
.guide-line {
  margin: 0; padding-inline: 2px; font-size: 17px; line-height: 1.4; letter-spacing: -0.005em; text-wrap: pretty; cursor: pointer;
  text-shadow: 0 0 12px rgba(250, 247, 240, .7); /* lifts the words off a busy picture behind the glass */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* while the guide is writing: each word surfaces out of a soft blur, and a caret follows the last one */
.w { animation: word-in .42s var(--ease) both; }
@keyframes word-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.guide-line.streaming::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 4px; border-radius: 50%; background: var(--clay); vertical-align: middle; animation: caret 1s ease-in-out infinite; }
@keyframes caret { 50% { opacity: .2; } }
/* thinking: three dots in clay, rising in turn */
.typing { display: inline-flex; align-items: center; gap: 5px; height: 1.4em; vertical-align: middle; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); animation: dot 1.1s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
/* what the visitor just asked, echoed above the answer while the conversation is folded */
.guide-you {
  justify-self: end; max-width: 82%; margin: 0; padding: 7px 13px; border-radius: 16px 16px 4px 16px;
  background: var(--ink); color: var(--ground); font-size: 14px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[dir="rtl"] .guide-you { border-radius: 16px 16px 16px 4px; }
.guide-you.in, .guide-msg.in { animation: bubble-in .42s var(--ease) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.guide.expanded .guide-you { display: none; }
/* the conversation, expanded: guide at the start, the visitor at the end */
.guide-log {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px 2px; list-style: none;
  max-height: min(46dvh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-mask: linear-gradient(transparent, #000 14px); mask: linear-gradient(transparent, #000 14px);
}
.guide.expanded .guide-log { animation: log-open .38s var(--ease) both; }
@keyframes log-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guide-msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.guide-msg:empty { display: none; }
.guide-msg-guide { align-self: flex-start; background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); border-start-start-radius: 5px; }
.guide-msg-visitor { align-self: flex-end; background: var(--ink); color: var(--ground); border-start-end-radius: 5px; }
.guide-msg-typing { padding-block: 8px; }
.guide.expanded .guide-line { display: none; }

/* shrink to the orb: a small circle at the head's end, before the chevron */
.guide-shrink { position: relative; flex: none; width: 28px; height: 18px; margin-inline-start: auto; padding: 0; border: 0; background: transparent; color: var(--ink-2); }
.guide-shrink::before { content: ""; position: absolute; inset: -13px -4px; }
.guide-shrink::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 2px transparent, 0 0 6px rgba(156, 107, 71, .35); }
.guide-shrink + .guide-toggle { margin-inline-start: 4px; }
@media (hover: hover) { .guide-shrink:hover, .guide-toggle:hover { color: var(--ink); } }
.guide-orb { display: none; }
.guide.panel-in { animation: panel-in .42s var(--ease) both; transform-origin: 50% 100%; }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.86); } to { opacity: 1; transform: none; } }

/* ---- the orb (guide.setView('orb'); the site starts this way): the brand's mark, as in the logo, in a soft glow of
   the eight pillar colours (the star's order, clockwise from the top: Master File, Brand Strategy and colours), its
   chips floating in a ring round it (positions from guide/ui.js layoutRing: --x/--y from the orb's centre). The box
   lets taps through to the city; only the orb and the chips take them. While the guide speaks, its chips fold into
   the orb and its words take their place just above it (the map keeps what it shows clear of them); a question keeps
   its answers out. Tapped, the orb spins and the panel opens out of it. */
.guide.orb {
  inset-inline: 0; width: auto; max-width: none; margin: 0; height: var(--ring-h, 260px);
  display: block; padding: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
.guide.orb::before, .guide.orb::after { display: none; }
body[data-tier] .guide.orb { -webkit-backdrop-filter: none; backdrop-filter: none; } /* over the tiers' own blur */
.guide.orb > :not(.guide-orb, .chips, .guide-line, .sr-only, .guide-slot) { display: none !important; }
.guide.orb:not(.has-slot) > .guide-slot { display: none !important; }
.guide.orb .guide-orb {
  position: absolute; left: 50%; top: var(--orb-y, 140px); display: grid; place-items: center;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: auto;
  transition: transform .2s var(--ease);
}
/* the glow: the pillar colours round the mark, slowly turning, breathing */
.guide.orb .guide-orb::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(#1557b7, #7a5226, #280049, #f2bb20, #04494a, #52634c, #710505, #f86926, #1557b7);
  filter: blur(11px); opacity: .5;
  animation: halo-turn 16s linear infinite, halo-breathe 4.8s ease-in-out infinite alternate;
}
@keyframes halo-turn { to { rotate: 360deg; } }
@keyframes halo-breathe { from { opacity: .38; scale: .94; } to { opacity: .62; scale: 1.06; } }
.guide.orb .guide-orb:active { transform: scale(.92); }
@media (hover: hover) { .guide.orb .guide-orb:hover { transform: scale(1.06); } }
.guide-orb-mark { width: 50px; height: 50px; background: url("../../assets/mark.svg") center / contain no-repeat; border-radius: 50%; box-shadow: 0 6px 18px -6px rgba(58, 54, 52, .45); }
.guide.orb.thinking .guide-orb-mark { animation: tick .9s var(--ease) infinite; }
.guide.orb.thinking .guide-orb::before { animation-duration: 4s, 1.2s; }
.guide.orb-in .guide-orb { animation: orb-pop .5s var(--ease) both; }
@keyframes orb-pop { from { opacity: 0; transform: scale(.5); } }
/* tapped: it spins as its chips fold in, then the panel opens out of it */
.guide.orb.opening .guide-orb-mark { animation: orb-spin .43s cubic-bezier(.5, 0, .2, 1) both; }
.guide.orb.opening .guide-orb::before { opacity: .9; scale: 1.3; transition: opacity .3s, scale .3s; }
@keyframes orb-spin { to { transform: rotate(360deg) scale(1.12); } }
/* the chips round it: they fly out of the orb, then float, each on its own beat */
.guide.orb .chips { position: absolute; inset: 0; display: block; overflow: visible; margin: 0; padding: 0; pointer-events: none; }
.guide.orb .chips .chip {
  position: absolute; left: 50%; top: var(--orb-y, 140px); translate: var(--x) var(--y); pointer-events: auto;
  font-size: 13.5px; padding: 0 15px;
  background: rgba(252, 250, 245, .74); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 6px 18px -6px rgba(58, 54, 52, .35);
  animation: drift calc(6.5s + var(--i, 0) * .7s) ease-in-out calc(var(--i, 0) * -1.7s) infinite;
  transition: translate .45s var(--ease), scale .45s var(--ease), opacity .3s var(--ease);
}
.guide.orb .chips .chip-spare { display: none; }
.guide.ring-in .chips .chip { animation: ring-out .55s var(--ease) calc(.06s + var(--i, 0) * .05s) both, drift calc(6.5s + var(--i, 0) * .7s) ease-in-out calc(.6s + var(--i, 0) * -1.7s) infinite; }
@keyframes ring-out { from { translate: var(--x0) var(--y0); scale: .35; opacity: 0; } }
/* alive, not restless (Laith, 12 Oct 2026): each chip drifts round a small loop, a few pixels and a hair of a turn, on a
   beat of its own (6.5-10 s), so the ring never moves in step */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -4px) rotate(.6deg); }
  50% { transform: translate(0, -7px) rotate(0deg); }
  75% { transform: translate(-3px, -3px) rotate(-.6deg); }
}
.guide.orb .chips .chip:active { scale: .95; }
/* folded in as the orb opens */
.guide.orb.opening .chips .chip { translate: var(--x0) var(--y0); scale: .3; opacity: 0; pointer-events: none; }
/* what the guide says: above the ring, its chips staying where they are; it stays a while, then fades */
.guide.orb .guide-line {
  position: absolute; left: 50%; bottom: calc(100% + 6px); width: max-content; max-width: min(340px, calc(100vw - 32px));
  margin: 0; padding: 10px 16px; border-radius: 18px; transform: translateX(-50%); text-align: center; color: var(--ink);
  background: rgba(247, 244, 236, .76); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 12px 30px -14px rgba(58, 54, 52, .3);
  font-size: 15px; line-height: 1.4; -webkit-line-clamp: 4; line-clamp: 4; pointer-events: auto;
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .3s var(--ease), translate .35s var(--ease), visibility 0s linear .3s;
}
.guide.orb.talking .guide-line, .guide.orb.asking .guide-line { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s var(--ease), translate .35s var(--ease); }
.guide.orb .guide-line.streaming::after { display: none; }
/* with a scene's block (the intro's name form): the guide's line and the block stand above the ring, always shown */
.guide.orb.has-slot .guide-line, .guide.orb.has-slot .guide-slot {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 32px)); max-width: none; pointer-events: auto;
}
.guide.orb.has-slot .guide-line {
  top: 0; bottom: auto; opacity: 1; visibility: visible; translate: none; padding: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 18px; line-height: 1.4; text-align: center; text-wrap: balance;
}
.guide.orb.has-slot .guide-slot { top: var(--slot-top, 64px); }
@media (prefers-reduced-motion: reduce) { .guide.orb .chips .chip, .guide.orb .guide-orb, .guide.orb .guide-orb::before { animation: none !important; } }
/* docked (guide.dock, on pages that scroll: UX pass, 16 Oct 2026): the orb waits in the bottom corner at the inline end,
   with no ring and no words over the page, which keeps all of its width; tapped, the panel opens. */
.guide.orb.docked {
  inset-inline: auto calc(var(--gutter) - 6px); bottom: calc(var(--guide-gap) + var(--dock-lift, 0px));
  width: 64px; height: 64px; --orb-y: 32px;
}
.guide.orb.docked :is(.chips, .guide-line) { display: none; }
/* what it said waits in the conversation; a clay dot on the orb says so until it is opened */
.guide.orb.docked.news .guide-orb::after {
  content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--clay); box-shadow: 0 0 0 2px var(--ground);
}


/* chips: glass pills that wrap onto a second row rather than scroll sideways (every scene keeps its set short) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start; min-height: var(--tap); padding: 0 16px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .64); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(58, 54, 52, .07);
  font-size: 14px; font-weight: 450; white-space: nowrap;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
}
.chip:active { transform: scale(.96); background: rgba(255, 255, 255, .75); }
@media (hover: hover) { .chip:hover { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(58, 54, 52, .3), 0 2px 6px rgba(58, 54, 52, .08); } }
.chips.fresh .chip { animation: chip-in .4s var(--ease) both; }
.chips.fresh .chip:nth-child(2) { animation-delay: .04s; }
.chips.fresh .chip:nth-child(3) { animation-delay: .08s; }
.chips.fresh .chip:nth-child(4) { animation-delay: .12s; }
.chips.fresh .chip:nth-child(n+5) { animation-delay: .16s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ask anything: one glass field with the send button inside it */
.ask { position: relative; display: flex; align-items: center; margin: 0; }
.ask-input {
  flex: 1; min-width: 0; height: 48px; padding: 0 58px 0 18px; padding-inline: 18px 58px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .68); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 3px rgba(58, 54, 52, .08);
  font-size: 16px; /* 16 px: phones don't zoom on focus */
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ask-input:focus { outline: none; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(58, 54, 52, .28), 0 0 0 4px rgba(156, 107, 71, .14); }
.ask-input::placeholder { color: var(--ink-2); opacity: 1; }
.ask-input:disabled { cursor: default; }
/* a 44 px tap target, drawn as a 36 px disc (the background stops at the content box) */
.send {
  position: absolute; inset-inline-end: 2px; top: 50%; margin-top: -22px;
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 4px; border: 0; border-radius: 50%;
  background: rgba(58, 54, 52, .22); background-clip: content-box; overflow: visible;
  transition: background-color .25s var(--ease), transform .15s var(--ease);
}
.ask.ready .send { background-color: var(--ink); }
.send:active { transform: scale(.9); }
.send-icon, .send-mark { grid-area: 1 / 1; width: 16px; height: 16px; pointer-events: none; }
.send-icon {
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.5v-11M3.5 7 8 2.5 12.5 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.5v-11M3.5 7 8 2.5 12.5 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .send-icon { transform: none; }
.send-mark { width: 20px; height: 20px; opacity: 0; transform: scale(.4); background: url("../../assets/mark-light.svg") center / contain no-repeat; transition: opacity .2s var(--ease), transform .3s var(--ease); }
/* sent (a tap or Enter): the arrow takes off upward, and a ring spreads from the button */
.send.launch .send-icon { animation: launch .5s var(--ease) both; }
@keyframes launch { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-20px); opacity: 0; } 46% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.send.launch::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(58, 54, 52, .45); animation: ring .6s var(--ease) both; }
@keyframes ring { to { box-shadow: 0 0 0 14px rgba(58, 54, 52, 0); } }
/* thinking: the arrow gives way to the brand mark, turning; the button breathes */
.guide.thinking .send { background-color: var(--ink); cursor: progress; }
.guide.thinking .send::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; animation: breathe-btn 1.4s ease-in-out infinite; pointer-events: none; }
.guide.thinking .send-icon { opacity: 0; animation: none; }
.guide.thinking .send-mark { opacity: 1; transform: none; animation: tick .9s var(--ease) infinite; }
@keyframes breathe-btn { 50% { box-shadow: 0 0 0 5px rgba(156, 107, 71, .22); } }
.ask.ready .send:focus-visible, .send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* before the first scene: the mark turning in the middle (index.html; the first scene clears the stage) */
.boot-mark { position: absolute; left: 50%; top: 46%; width: 40px; height: 40px; margin: -20px 0 0 -20px; background: url("../../assets/mark.svg") center / contain no-repeat; opacity: .5; animation: tick 1.1s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }
/* before the first scene: no empty pills or panels */
body:not([data-ready]) :is(#guide, #map-btn, #lang, #interest-btn, #menu-btn) { visibility: hidden; }
/* the site couldn't start (app.js showBootFailure): only the logo and the message */
body[data-failed] { --guide-h: 0px; }
body[data-failed] :is(#guide, #map-btn, #lang, #interest-btn, #menu-btn) { display: none; }
.stub-actions { display: flex; gap: 8px; margin-top: 28px; }

/* ---- scene transition (ui/wedge.js): two 45° wedges sweep round the bottom inline-start corner */
.wedge { position: fixed; inset: 0; z-index: 10; pointer-events: none; visibility: hidden; }
.wedge.on { visibility: visible; }
.wedge i { position: absolute; inset: 0; clip-path: polygon(0 100%, 0 100%, 0 100%); }
.wedge .wedge-a { background: var(--surface); }
.wedge .wedge-b { background: var(--ground); }
.wedge.fade { background: var(--ground); opacity: 0; }
.wedge.fade i { display: none; }
[dir="rtl"] .wedge { transform: scaleX(-1); }

/* ---- sheet: bottom sheet on phones, side panel from 900 px */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity .3s var(--ease); }
.sheet {
  position: fixed; z-index: 41; bottom: 0; inset-inline: 0; margin-inline: auto; max-width: 560px; max-height: min(88dvh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r) var(--r) 0 0; padding-bottom: var(--sa-b);
  transform: translateY(100%); transition: transform .38s var(--ease); outline: none;
}
.sheet::before { content: ""; flex: none; align-self: center; width: 36px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--line); }
.scrim.open { opacity: 1; }
.sheet.open, [dir="rtl"] .sheet.open { transform: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 10px 0; padding-inline-start: 24px; }
.sheet-title { margin: 14px 0 0; font-size: 26px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.sheet-close { position: relative; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; }
.sheet-close::before, .sheet-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -0.75px 0 0 -9px; background: currentColor; transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 28px; color: var(--ink-2); }
.sheet-body > :first-child { margin-top: 0; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px 16px; border-top: 1px solid var(--line); }
.sheet-placeholder { display: grid; justify-items: start; gap: 20px; padding-block: 8px 4px; }
.sheet-placeholder p { margin: 0; max-width: 34ch; line-height: 1.6; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 450;
  transition: transform .12s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { border-color: var(--ink); background: var(--ink); color: var(--ground); }

/* ---- toast: under the top bar, clear of the Map button and the guide */
.toast {
  position: fixed; z-index: 50; inset-inline: var(--gutter); margin-inline: auto; width: fit-content; max-width: calc(100% - 2 * var(--gutter));
  top: calc(var(--sa-t) + 68px);
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 14px;
  opacity: 0; transform: translateY(-8px); transition: opacity .24s var(--ease), transform .24s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* ---- wide screens: guide becomes a card at the bottom inline start; the stage stays full bleed */
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .top { padding-block: calc(20px + var(--sa-t)) 20px; }
  .logo img { height: 40px; }
  .pill { font-size: 14px; }
  .stub { padding-block: 140px calc(var(--guide-top) + 56px); }
  .lead { font-size: 20px; margin-top: 22px; }
  :root { --guide-gap: calc(20px + var(--sa-b)); }
  .guide { inset-inline: 0; width: min(640px, calc(100% - 48px)); max-width: none; padding: 16px 18px 14px; border-radius: 30px; --gutter: 18px; }
  .guide-log { max-height: min(40dvh, 380px); }
  .chip { padding: 0 15px; }
  .guide.orb { width: auto; }
  .toast { top: calc(var(--sa-t) + 88px); }
  .sheet {
    top: 0; bottom: 0; inset-inline: auto 0; width: 440px; max-width: none; max-height: none; margin: 0;
    border-radius: 0; padding-top: var(--sa-t); transform: translateX(100%);
  }
  [dir="rtl"] .sheet { transform: translateX(-100%); }
  .sheet::before { display: none; }
  .sheet-head { padding: 20px 16px 0; padding-inline-start: 32px; }
  .sheet-title { font-size: 30px; }
  .sheet-body { padding: 18px 32px 32px; }
  .sheet-actions { padding: 16px 32px 24px; }
}

/* big screens: a wider pane, so the chips sit in one row and the city keeps the height */
@media (min-width: 1200px) { .guide { width: min(760px, calc(100% - 48px)); } }

/* reduced motion: the sheet fades in place instead of sliding */
@media (prefers-reduced-motion: reduce) {
  .sheet, [dir="rtl"] .sheet { transform: none; opacity: 0; transition: opacity 200ms linear !important; }
  .sheet.open { opacity: 1; }
}
/* a [TBD] that wraps keeps its outline and padding on every line */
.tbd { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- the masterplan (scenes/masterplan.js, masterplan/view3d.js): the canvas full bleed under the top bar and the
   guide, labels in HTML over it. Labels are projected in physical px, so the overlay is laid out from the left/top
   (physical on purpose); the label text itself keeps the page's direction. */
body[data-scene="masterplan"] #stage { overflow: hidden; }
.map, .map-view { position: absolute; inset: 0; overflow: hidden; }
.map { background: #e3dccd; } /* the scene's haze: no flash before the first frame */
.map-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; opacity: 0; transition: opacity .5s var(--ease); }
.map-view.ready .map-canvas { opacity: 1; }
.map-canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.map-loading {
  position: absolute; inset-inline: 0; top: 40%; margin: 0; text-align: center;
  font-size: 15px; letter-spacing: .01em; color: var(--ink-2); transition: opacity .3s var(--ease);
}
.map-view.ready .map-loading { opacity: 0; pointer-events: none; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; direction: ltr; }
.map-view .film { z-index: auto; } /* under the labels, by DOM order */
.map-overlay { transition: opacity .5s var(--ease); }
.map-overlay.hush { opacity: 0; } /* while the city rises from the temple (view3d arrive) */

.pin {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; color: var(--ink);
  visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s linear .2s; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.pin.on { visibility: visible; opacity: 1; transition: opacity .2s var(--ease); pointer-events: auto; }
.pin-body {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 5px 10px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  font-size: 12px; line-height: 16px; font-weight: 450; letter-spacing: .01em;
}
[dir="rtl"] .pin-body { direction: rtl; }
button.pin .pin-body::after { content: ""; position: absolute; inset: -10px -4px; } /* a 44 px tap target round a small label */
.pin-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.pin-stem { position: absolute; left: -0.5px; top: -10px; width: 1px; height: 10px; background: var(--ink); opacity: .45; }
.pin-stem::after { content: ""; position: absolute; left: -2px; bottom: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: inherit; }
/* zone names: no stem, a little lighter, centred on the zone */
.pin-zone .pin-body { transform: translate(-50%, -50%); background: rgba(241, 239, 230, .88); color: var(--ink-2); letter-spacing: .02em; }
/* lit: the layer's accent, or the pillar's colour, as a ring and a larger dot (text stays Basalt on Paper) */
.pin.lit .pin-body { box-shadow: 0 0 0 1.5px var(--pin, var(--ink)); color: var(--ink); }
.pin.lit .pin-dot { width: 9px; height: 9px; background: var(--pin, var(--clay)); }
@media (hover: hover) { button.pin:hover .pin-body { box-shadow: 0 0 0 1px var(--ink); } }
button.pin:focus-visible { outline: none; }
button.pin:focus-visible .pin-body { outline: 2px solid var(--ink); outline-offset: 2px; }
/* your home: Basalt with the mark, the one label that never yields */
.pin-home .pin-body { gap: 7px; padding: 7px 13px 7px 10px; background: var(--ink); color: var(--ground); box-shadow: none; font-size: 13px; transform: translate(-50%, calc(-100% - 14px)); }
.pin-home .pin-stem { top: -14px; height: 14px; opacity: .8; }
.pin-mark { flex: none; width: 14px; height: 14px; background: url("../../assets/mark-light.svg") center / contain no-repeat; }

/* back to the whole city: a zoom-out glass (UX pass: the four corners read as full screen) */
.map-reset, .plan-reset {
  position: absolute; z-index: 2; top: calc(var(--sa-t) + 68px); inset-inline-end: calc(var(--gutter) - 6px);
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent;
  opacity: 0; transition: opacity .3s var(--ease);
}
.map-view.ready .map-reset { opacity: 1; }
.map-reset::before, .plan-reset::before {
  content: ""; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.map-reset::after, .plan-reset::after {
  content: ""; position: absolute; width: 16px; height: 16px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.75' cy='6.75' r='4.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10.25 10.25 14.5 14.5M4.5 6.75h4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.75' cy='6.75' r='4.75' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10.25 10.25 14.5 14.5M4.5 6.75h4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-reset:active::before, .plan-reset:active::before { transform: scale(.94); }

/* how the map moves, once, for mouse users: a quiet line under the top bar */
.map-hint {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--sa-t) + 72px); margin: 0; padding: 8px 14px; border-radius: 999px;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none; font-size: 13px; color: var(--ink);
  background: rgba(247, 244, 236, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 8px 24px -12px rgba(58, 54, 52, .3);
  opacity: 0; transition: opacity .5s var(--ease);
}
.map-hint.on { opacity: 1; }
@media (min-width: 900px) { .map-hint { top: calc(var(--sa-t) + 96px); } }

/* the sheets the map opens */
.map-sheet p { margin: 0 0 12px; line-height: 1.55; max-width: 38ch; }
.map-sheet .map-sheet-zone { margin-bottom: 8px; font-size: 13px; letter-spacing: .02em; color: var(--ink-2); }
/* the flat picker (scenes/masterplan.js openFlatPicker): the building's floor plan is the picker, the chosen flat glows */
/* the flat picker: segmented controls, a key plan on its card, the chosen flat warm and glowing */
.flat-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.flat-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ground); }
.flat-seg-btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.flat-seg-btn.on { background: #fffdf7; color: var(--ink); box-shadow: 0 1px 2px rgba(58, 54, 52, .14), 0 2px 8px rgba(58, 54, 52, .08); }
.flat-seg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.flat-card { margin: 0 -6px; padding: 10px 10px 12px; border-radius: 16px; background: #faf8f1; box-shadow: inset 0 0 0 1px rgba(58, 54, 52, .07); }
.flat-plan { margin: 0; }
.flat-svg { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; font-family: var(--f-sans); }
.flat-shell { fill: #fffdf7; stroke: var(--ink); stroke-width: .42; }
.flat-walls { display: none; stroke: var(--ink-2); stroke-width: .07; stroke-linecap: round; opacity: .2; }
.flat-walls.on { display: inline; }
.flat-core { stroke: rgba(58, 54, 52, .25); stroke-width: .08; }
.flat-hatch { stroke: rgba(58, 54, 52, .22); stroke-width: .14; }
.flat-zone { cursor: pointer; outline: none; }
.flat-cell { fill: rgba(255, 253, 247, .62); stroke: rgba(58, 54, 52, .5); stroke-width: .16; transition: fill .3s var(--ease); }
.flat-edge { fill: none; stroke: transparent; stroke-width: .3; transition: stroke .3s var(--ease); }
.flat-halo, .flat-fill, .flat-taken { opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.flat-halo { fill: #f0a35e; }
.flat-warm-a { stop-color: #f3c08e; }
.flat-warm-b { stop-color: #e29a5c; }
.flat-inner { stroke: rgba(255, 253, 247, .85); stroke-width: .09; stroke-linecap: round; pointer-events: none; }
.flat-num, .flat-beds { text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #fffdf7; stroke-width: .55; stroke-linejoin: round; transition: fill .3s var(--ease); }
.flat-num { font-size: 1.55px; font-weight: 500; letter-spacing: .12px; fill: var(--ink-2); }
.flat-beds { font-size: 2.5px; font-weight: 400; fill: var(--ink); }
.flat-zone:focus-visible .flat-edge { stroke: var(--ink); }
@media (hover: hover) { .flat-zone:not(.on, .taken, .dim):hover .flat-cell { fill: rgba(243, 192, 142, .32); } }
.flat-zone.on .flat-fill { opacity: 1; }
.flat-zone.on .flat-halo { opacity: .55; animation: flat-breathe 2.6s ease-in-out infinite alternate; }
.flat-zone.on .flat-edge { stroke: #b9733a; }
.flat-zone.on :is(.flat-num, .flat-beds) { fill: #fffdf7; stroke: #d48a4e; }
@keyframes flat-breathe { from { opacity: .35; } to { opacity: .75; } }
.flat-zone.taken { cursor: not-allowed; }
.flat-zone.taken .flat-taken { opacity: 1; }
.flat-zone.taken .flat-cell { fill: rgba(228, 226, 212, .55); }
.flat-zone.taken :is(.flat-num, .flat-beds) { fill: rgba(92, 86, 82, .6); stroke: #efede4; }
.flat-zone.dim { cursor: default; }
.flat-zone.dim :is(.flat-cell, .flat-num, .flat-beds) { opacity: .4; }
.flat-side { font-size: 1.35px; font-weight: 500; letter-spacing: .32px; text-transform: uppercase; text-anchor: middle; fill: var(--ink-2); paint-order: stroke; stroke: #faf8f1; stroke-width: 1.6; stroke-linejoin: round; }
.flat-road { stroke: rgba(58, 54, 52, .35); stroke-width: .14; stroke-dasharray: 1.4 1; }
.flat-green { fill: none; stroke: #a7b98a; stroke-width: .28; stroke-linecap: round; }
.flat-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.flat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.flat-key { width: 14px; height: 10px; border-radius: 3px; border: 1px solid rgba(58, 54, 52, .45); background: #fffdf7; }
.flat-key.on { border-color: #b9733a; background: linear-gradient(#f3c08e, #e29a5c); box-shadow: 0 0 6px rgba(240, 163, 94, .7); }
.flat-key.taken { background: repeating-linear-gradient(45deg, rgba(58, 54, 52, .28) 0 1px, #e9e7dc 1px 4px); }
.flat-note { margin: 10px 2px 16px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.flat-facts .flat-id { margin: 0; font-size: 12px; letter-spacing: .02em; color: var(--ink-2); }
.flat-facts .flat-type { margin: 2px 0 8px; font-size: 19px; font-weight: 300; }
.flat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .flat-zone.on .flat-halo { animation: none; } }
/* the flat lit in its building stays clear: a light veil over the map, not the usual shade */
.scrim.open:has(+ .sheet .flat-picker) { opacity: .2; }
/* a bottom sheet leaves the map room above it for the flat lit in its building */
@media (max-width: 899px) { .sheet:has(.flat-picker) { max-height: min(64dvh, 640px); } }
.map-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.map-facts li { padding: 6px 12px; border-radius: 999px; background: var(--ground); color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.map-walk { color: var(--ink); }

/* the 3D map couldn't run (Task 7 puts the static plan here) */
.map-fallback-mark { width: 56px; height: 56px; margin-bottom: 28px; }

@media (min-width: 900px) {
  .map-reset, .plan-reset { top: calc(var(--sa-t) + 92px); }
  .pin-body { font-size: 13px; }
}

/* ---- forms in sheets (call-back, founder): calm fields on Paper, labels above */
.form { display: grid; gap: 16px; }
.form-lead { margin: 0; line-height: 1.55; }
.form-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; letter-spacing: .01em; color: var(--ink-2); }
.field-input {
  width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fbfaf6; color: var(--ink); font-size: 16px; /* 16 px: phones don't zoom on focus */
}
.field-input:focus { outline: none; border-color: var(--ink); }
select.field-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%); background-size: 6px 6px; background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-repeat: no-repeat; }
[dir="rtl"] select.field-input { background-position: 16px 52%, 22px 52%; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.field-error { margin: 0; font-size: 14px; color: #8a2d1c; }
.field-input[aria-invalid="true"] { border-color: #8a2d1c; box-shadow: 0 0 0 1px #8a2d1c; }
.field-note { margin-inline-start: 6px; color: var(--ink-2); opacity: .8; }
/* the enquiry (ui/enquiry.js): a question a tap away, the consent with its notice, and who replies, above Send */
.enquiry-add { justify-self: start; min-height: var(--tap); color: var(--ink-2); font-size: 14px; }
.check-wrap { display: grid; gap: 4px; }
.check-wrap .field-error { padding-inline-start: 34px; }
.enquiry-notice-link { justify-self: start; min-height: 32px; margin-inline-start: 34px; font-size: 13px; color: var(--ink-2); }
.enquiry-notice { margin-inline-start: 34px; }
.enquiry-who { margin: 4px 0 -6px; font-size: 14px; color: var(--ink); }
.field-hint { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
/* the mock deposit being verified: the mark turning beside the line */
.verifying { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.verifying-mark { width: 20px; height: 20px; background: url("../../assets/mark.svg") center / contain no-repeat; animation: tick .9s var(--ease) infinite; }
.code-switch { justify-self: start; min-height: var(--tap); font-size: 14px; color: var(--ink-2); }

/* ---- the intro (scenes/landing.js): the story's title card, and the guide under it, warm and glowing */
.intro { position: absolute; inset: 0; overflow: hidden; background: #e6e0d3; }
/* the title card's canvas runs past the top of the screen, so its centre (the title) sits at 38 %; leaving, it moves
   over the next scene while the sand blows away (under the guide and the top bar) */
.intro-sand { position: fixed; z-index: 0; left: 0; top: -32vh; width: 100%; height: 140vh; pointer-events: none; }
.intro-sand.leaving { z-index: 9; }
.intro-glow {
  position: absolute; z-index: 1; left: 50%; bottom: -8vh; width: min(900px, 170vw); height: 64vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 212, 156, .6), rgba(255, 212, 156, .2) 55%, transparent);
  transform: translateX(-50%); animation: breathe 5.5s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .7; transform: translateX(-50%) scale(.95); } to { opacity: 1; transform: translateX(-50%) scale(1.05); } }
body[data-scene="landing"] { background: #e6e0d3; }
body[data-scene="landing"] .logo { visibility: hidden; }
body[data-scene="landing"] .guide {
  inset-inline: 12px; max-width: 460px; padding-bottom: 16px;
  --glass: rgba(246, 240, 228, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(156, 107, 71, .14), 0 24px 60px rgba(156, 107, 71, .16), 0 0 80px 8px rgba(255, 205, 140, .38);
  animation: glow 5.5s ease-in-out infinite alternate;
}
@keyframes glow { to { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(156, 107, 71, .14), 0 24px 60px rgba(156, 107, 71, .16), 0 0 120px 20px rgba(255, 205, 140, .55); } }
body[data-scene="landing"] .guide-mark { filter: drop-shadow(0 0 5px rgba(255, 186, 104, .9)); }
body[data-scene="landing"] .ask { display: none; } /* one field at a time: the name first; ask anything once inside */
/* the guide's panel centred on the intro and the map (Laith, 12 Oct 2026): its head in the middle (its two controls stay
   at its end), the line, the button and the chips under it; the ask field and an opened conversation as they were */
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) .guide-head { position: relative; justify-content: center; }
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) :is(.guide-shrink, .guide-toggle) { position: absolute; top: 0; margin: 0; }
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) .guide-toggle { inset-inline-end: 0; }
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) .guide-shrink { inset-inline-end: 36px; }
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) .guide-line { text-align: center; }
:is(body[data-scene="landing"], body[data-scene="masterplan"]) .guide:not(.orb) .chips { justify-content: center; }
body[data-scene="landing"] .guide:not(.orb) .intro-name { justify-items: center; }
body[data-scene="landing"] .guide:not(.orb) .intro-name-row { width: 100%; }
body[data-scene="landing"] .guide:not(.orb) :is(.intro-go, .intro-anon) { justify-self: center; }
.guide-slot[hidden] { display: none; }
.intro-name { display: grid; gap: 6px; }
.intro-name-row { display: flex; gap: 8px; }
.intro-name-row .field-input { flex: 1; min-width: 0; }
.intro-name .btn { min-height: var(--tap); }
.intro-name .field-input:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgba(255, 196, 120, .45); }
.intro-go { justify-self: start; }
.intro-anon {
  justify-self: start; min-height: var(--tap); padding: 0 2px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(58, 54, 52, .3); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .intro-glow, body[data-scene="landing"] .guide { animation: none; } }
/* the intro as the orb (how the site starts): the welcome and the name above it, its chips round it, low on the
   screen under the title, never into it (the title card's centre is at 38vh; its last line about 0.45 of the title
   size below) */
body[data-scene="landing"] {
  --title-bottom: calc(38vh + .45 * clamp(56px, 11.5vw, 172px));
}
/* what URUK is and where (scenes/landing.js), just under the title; the guide stands clear of it */
.intro-tagline {
  position: absolute; z-index: 2; inset-inline: var(--gutter); top: calc(var(--title-bottom) + 14px); margin: 0 auto; max-width: 30ch;
  text-align: center; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; pointer-events: none;
}
@media (min-width: 900px) { .intro-tagline { top: calc(var(--title-bottom) + 8px); font-size: 16px; } }
body[data-scene="landing"] { --tagline-room: 52px; }
/* opened, the panel stands in the same place: just under the title, in the middle of the screen */
body[data-scene="landing"] .guide:not(.orb) { top: calc(var(--title-bottom) + var(--tagline-room) + 24px); bottom: auto; }
body[data-scene="landing"] .guide.orb {
  inset-inline: 0; width: auto; max-width: none; margin: 0; padding: 0; bottom: auto; animation: none; box-shadow: none; background: none;
  top: max(calc(var(--title-bottom) + var(--tagline-room) + 16px), calc(100vh - var(--ring-h, 360px) - var(--sa-b) - clamp(14px, 4vh, 40px)));
}
body[data-scene="landing"] .guide.orb .guide-line { color: var(--ink); }
body[data-scene="landing"] .guide.orb .intro-name { justify-items: center; }
body[data-scene="landing"] .guide.orb .intro-name-row { width: 100%; }
body[data-scene="landing"] .guide.orb .intro-anon, body[data-scene="landing"] .guide.orb .intro-go { justify-self: center; }
@media (min-width: 900px) {
  .intro-sand { top: -24vh; height: 124vh; }
  .intro-glow { bottom: auto; top: 40vh; height: 62vh; }
  body[data-scene="landing"] .guide { inset-inline: 0; margin-inline: auto; width: 460px; }
}

/* ---- the eight pillars (star sheet): the star's order, each with its brand colour */
.pillars { display: grid; gap: 14px; }
.pillars-lead { margin: 0; line-height: 1.55; }
.pillar-list { margin: 0; padding: 0; list-style: none; display: grid; }
.pillar-row {
  display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; width: 100%; padding: 13px 4px;
  border: 0; border-top: 1px solid var(--line); background: transparent; text-align: start; color: var(--ink);
  transition: background-color .2s var(--ease);
}
.pillar-list li:first-child .pillar-row { border-top: 0; }
.pillar-row:active { background: var(--pillar-tint, transparent); }
@media (hover: hover) { .pillar-row:hover { background: color-mix(in srgb, var(--pillar-tint) 45%, transparent); } }
.pillar-dot { width: 14px; height: 14px; margin-top: 3px; background: var(--pillar); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pillar-text { display: grid; gap: 2px; }
.pillar-name { font-size: 17px; letter-spacing: -0.01em; }
.pillar-tagline { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.pillars-draft { margin: 4px 0 0; font-size: 13px; }

/* ---- places on the map: the architect's render on top */
.map-render { width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: -16px -24px 16px; }

/* ---- the Heart's vote */
.vote { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.vote legend { margin-bottom: 10px; padding: 0; }

/* ---- pages (founder, My URUK, debug): a scrolling column between the top bar and the guide; on wide screens it
   sits to the inline end of the guide card */
.page-host { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--sa-t) + 84px) var(--gutter) calc(var(--guide-top) + 32px); }
.page-inner { max-width: 520px; margin-inline: auto; }
.page-wide { max-width: 860px; }
@media (min-width: 900px) {
  .page { padding: 120px 48px calc(var(--guide-top) + 48px); }
}
.kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.display-s { font-size: clamp(34px, 22px + 3vw, 56px); }
.section-title { margin: 40px 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn { text-decoration: none; }
.btn-wide { width: 100%; margin-top: 6px; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.linkish { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.muted { color: var(--ink-2); }
.founder-form { margin-top: 28px; }

/* the chosen home, as a quiet line above the form */
.home-chip {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 26px; padding: 14px 16px;
  border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.home-chip-label { grid-column: 1 / -1; font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }
.home-chip-text { font-size: 16px; }

/* Email | Phone */
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; width: max-content; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.seg-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; }
.seg-btn.on { background: var(--ink); color: var(--ground); }

/* the 6-digit code: always left to right, even in Arabic */
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; }
.code-box {
  height: 60px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf6;
  font-size: 26px; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums;
}
.code-box:focus { outline: none; border-color: var(--ink); }

/* the stamp, pressed into the page */
.stamp-wrap { display: grid; place-items: center; margin: 4px 0 18px; }
.stamp { width: min(78vw, 300px); height: auto; filter: drop-shadow(0 6px 18px rgba(58, 54, 52, .14)); }
.stamp.pressed { animation: press .38s var(--ease) both; }
@keyframes press { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.stamp-s .stamp { width: min(52vw, 200px); }
.note-card { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--ground); }
.note-card p { margin: 0; line-height: 1.5; }
.note-card .note-title { margin-bottom: 6px; font-size: 17px; }
.note-card .btn-primary { margin-top: 14px; background: var(--ground); color: var(--ink); border-color: var(--ground); }
/* an enquiry (ui/enquiry.js): its question box, the thanks, and the list in My URUK */
.field-area { min-height: 92px; padding: 12px 16px; line-height: 1.45; resize: vertical; font-family: inherit; }
.enquiry-form .seg { max-width: 100%; }
.enquiry-thanks { margin-top: 0; }
.note-card .btn:not(.btn-primary) { margin-top: 14px; background: transparent; color: var(--ground); border-color: rgba(241, 239, 230, .4); }
.enquiry-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.enquiry-list li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(241, 239, 230, .18); }
.enquiry-what { font-size: 15px; }
.enquiry-when { font-size: 13px; opacity: .78; }

/* My URUK */
.my-stamp { display: grid; justify-items: center; margin-top: 20px; }
.my-token { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.card { padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.card p { margin: 0; }
.card .row { margin-top: 14px; }
.card-title { font-size: 18px; }
.prefs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.pref { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 14px; }
.pref::after { content: "×"; font-size: 16px; color: var(--ink-2); }
.milestones { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--line); }
.milestones li { position: relative; padding: 10px 0 10px 20px; padding-inline: 20px 0; font-size: 15px; }
.milestones li::before { content: ""; position: absolute; inset-inline-start: -5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 1px var(--ink-2); }

/* debug */
.debug-json { margin-top: 24px; padding: 16px; max-height: 60vh; overflow: auto; border-radius: 12px; background: var(--surface); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ---- homes: cards (a snap carousel on phones, a grid on wide screens) */
/* stacked, one above the other on phones (no sideways scrolling); a grid on wide screens */
.home-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 28px 0 0; }
.home-cards::-webkit-scrollbar { display: none; }
.home-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: inherit; text-decoration: none; }
.home-card-media { position: relative; aspect-ratio: 16 / 10; background: #d9d3c5; }
.home-card-media img { width: 100%; height: 100%; object-fit: cover; }
.home-card-media.no-img, .home-view.still:not(:has(img)) { display: grid; place-items: center; }
.home-card-mark { width: 56px; height: 56px; opacity: .55; background: url("../../assets/mark.svg") center / contain no-repeat; }
.home-card-flag { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; }
.home-card-body { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.home-card-body p { margin: 0; }
.home-card-title { font-size: 20px; letter-spacing: -0.01em; }
.home-card-line { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.home-card-meta { margin-top: 4px !important; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
@media (hover: hover) { .home-card:hover { box-shadow: 0 0 0 1px var(--ink); } }
/* the homes the guide picked: first, marked, and settling in one after another */
.home-card-match { box-shadow: 0 0 0 1.5px var(--ink), 0 18px 40px -22px rgba(58, 54, 52, .45); }
.home-cards-match .home-card { animation: card-in .55s var(--ease) both; }
.home-cards-match .home-card:nth-child(2) { animation-delay: .07s; }
.home-cards-match .home-card:nth-child(3) { animation-delay: .14s; }
.home-cards-match .home-card:nth-child(n+4) { animation-delay: .2s; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.home-card-badge {
  position: absolute; inset-inline-start: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 8px; padding-inline: 8px 11px; border-radius: 999px; background: rgba(58, 54, 52, .82); color: var(--ground);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .02em;
}
.home-card-badge-mark { width: 12px; height: 12px; background: url("../../assets/mark-light.svg") center / contain no-repeat; }
.home-cards-rest .home-card { opacity: .82; }
.home-cards-rest { margin-top: 0; }
@media (min-width: 900px) {
  .home-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .home-card-media { aspect-ratio: 4 / 3; }
}

/* ---- one home: the model on its plinth, then the facts */
.home-view {
  position: relative; height: min(48dvh, 440px); margin: -8px calc(-1 * var(--gutter)) 22px;
  background: radial-gradient(ellipse at 50% 70%, #efebe1 0%, var(--ground) 70%);
}
.viewer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.viewer-canvas:active { cursor: grabbing; }
.home-view-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; color: var(--ink-2); }
.home-still { width: 100%; height: 100%; object-fit: cover; }
.home-view-note { position: absolute; inset-inline-start: var(--gutter); bottom: 12px; margin: 0; font-size: 13px; }
.see-inside { position: absolute; z-index: 2; inset-inline-end: var(--gutter); bottom: 14px; min-height: var(--tap); }
.see-inside[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
/* an apartment: the flat on its own or in its building (scenes/home.js), and what you are looking at */
.flat-alone { position: absolute; z-index: 2; inset-inline-start: var(--gutter); bottom: 14px; min-height: var(--tap); }
.home-view-tag { position: absolute; z-index: 2; inset-inline-start: var(--gutter); top: 12px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(241, 239, 230, .86); box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.flat-alone[hidden], .home-view-tag[hidden] { display: none; }
.home-view-tag.proposed-layout { top: 70px; }
/* the floor bar (scenes/home.js), while the floors sit side by side */
.floor-bar {
  position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 24px); padding: 4px; border-radius: 999px; background: rgba(241, 239, 230, .92); box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(58, 54, 52, .08);
}
.floor-bar[hidden] { display: none; }
.floor-pills { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.floor-pills::-webkit-scrollbar { display: none; }
.floor-pill { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.floor-pill[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.floor-arrow { position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.floor-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -2px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.floor-next::after { margin-left: -6px; transform: rotate(-135deg); }
[dir="rtl"] .floor-arrow::after { scale: -1 1; }
.floor-arrow:disabled { opacity: .28; cursor: default; }
@media (pointer: coarse) { .floor-pill { min-height: 44px; } .floor-arrow { width: 44px; height: 44px; } }
@media (min-width: 900px) {
  .home-view { height: 460px; margin-inline: 0; border-radius: 20px; }
  /* wide screens: the home on the left, held in view while its details scroll on the right, all above the guide */
  .page-home .page-inner { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .page-home .page-inner > * { grid-column: 2; }
  .page-home .home-view { grid-column: 1; grid-row: 1 / span 24; position: sticky; top: 0; margin: 0; height: min(600px, max(340px, calc(100dvh - var(--guide-top) - 160px))); }
  .page-home .page-inner > .kicker { margin-top: 8px; }
}
.suits { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 24px 0 0; overflow: hidden; border-radius: 14px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.fact { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); }
.fact dt { font-size: 12px; letter-spacing: .03em; color: var(--ink-2); }
.fact dd { margin: 0; font-size: 20px; font-weight: 300; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* a fact that takes you somewhere (In the city → the map, every one of them lit): the whole cell is the link */
.fact-action { position: relative; transition: background-color .2s var(--ease); }
.fact-link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.fact-link::after { content: ""; position: absolute; inset: 0; } /* the whole cell answers the tap */
.fact-go { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.fact-go::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); transition: transform .2s var(--ease); }
[dir="rtl"] .fact-go::after { transform: translateY(-1px) rotate(-135deg); }
.fact-action:active { background: color-mix(in srgb, var(--surface) 90%, var(--ink)); }
.fact-link:focus-visible { outline: none; }
.fact-action:has(.fact-link:focus-visible) { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) {
  .fact-action:hover { background: color-mix(in srgb, var(--surface) 94%, var(--ink)); }
  .fact-action:hover .fact-go { color: var(--ink); }
  .fact-action:hover .fact-go::after { transform: translate(3px, -1px) rotate(45deg); }
  [dir="rtl"] .fact-action:hover .fact-go::after { transform: translate(-3px, -1px) rotate(-135deg); }
}
.walks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.walks li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.walk-min { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.walks + .form-note { margin-top: 8px; }
.compare { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px 14px; align-items: baseline; font-size: 15px; }
.compare-head { font-size: 13px; color: var(--ink-2); }
.compare-label { font-size: 13px; color: var(--ink-2); }

/* ---- origin: the temple flight (or the stills), the beat counter, Skip, and the name card at the tablet */
.origin { position: absolute; inset: 0; overflow: hidden; background: #e6d8bf; }
.flight-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.origin-stills { position: absolute; inset: 0; }
.origin-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.origin-still.on { opacity: 1; }
.origin-step { position: absolute; z-index: 2; inset-inline-start: var(--gutter); top: calc(var(--sa-t) + 72px); margin: 0; font-size: 12px; letter-spacing: .12em; color: var(--ink); opacity: .7; }
.origin-skip { position: absolute; z-index: 2; inset-inline-end: var(--gutter); top: calc(var(--sa-t) + 64px); }
.name-card {
  position: absolute; z-index: 3; inset-inline: var(--gutter); bottom: calc(var(--guide-top) + 12px); margin-inline: auto; max-width: 420px;
  display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(58, 54, 52, .14);
  animation: rise .4s var(--ease) both;
}
.name-card .row { margin-top: 0; }
.name-card-q { margin: 0; font-size: 17px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .name-card { inset-inline: 0; bottom: calc(var(--guide-top) + 16px); width: 420px; } .origin-step { top: 100px; } .origin-skip { top: 92px; } }

/* the temple's last frame over the scene swap, rising away as the map eases out (origin/rise.js): above the stage,
   under the wedge, the guide and the top bar */
.rise-still {
  position: fixed; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent) center / 260% 260% no-repeat;
  mask: radial-gradient(closest-side, #000 62%, transparent) center / 260% 260% no-repeat;
}

/* ---- the maquette's finish: a still grain and a warm vignette over the 3D views (ui/film.js) */
.film { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.film::before { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 128px; opacity: .05; mix-blend-mode: overlay; }
.map-view .film::before, .home-view .film::before { opacity: .012; }
.film::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(74, 52, 30, .13)); }

/* ---- Plan C: the static masterplan (masterplan/static.js) */
.plan { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: #e3dccd; cursor: grab; user-select: none; -webkit-user-select: none; }
.plan:active { cursor: grabbing; }
.plan-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.plan-world.glide { transition: transform .7s var(--ease); }
.plan-img, .plan-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.plan-svg { overflow: visible; }
.plan-svg rect.p-home { pointer-events: auto; }
.plan-img { transition: filter .35s var(--ease), opacity .35s var(--ease); }
.plan-svg g { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.p-home { stroke: rgba(58, 54, 52, .35); stroke-width: .6; }
.p-planned { fill: #efe9dc; stroke: rgba(58, 54, 52, .4); stroke-width: .8; }
.p-farm { fill: #a7b98a; fill-opacity: .55; stroke: #7d8f6a; stroke-width: .8; }
.p-tree { fill: #7d8f6a; fill-opacity: .7; }
/* the coloured masterplan's programme on Plan C (static.js) */
.p-glass { fill: #e4ece8; stroke: #a9b8b2; stroke-width: .8; }
.p-water { fill: #5aa9b6; stroke: #e4dccb; stroke-width: .8; }
.p-yard { fill: #d8cfbd; stroke: rgba(58, 54, 52, .35); stroke-width: .8; }
.p-pod { fill: #ece5d6; stroke: rgba(58, 54, 52, .4); stroke-width: .8; }
.p-court { stroke: rgba(58, 54, 52, .25); stroke-width: .6; }
.p-island { fill: #e8d9b5; stroke: #a7b98a; stroke-width: 2; }
.p-bridge { stroke: #e4dccb; }
.plan[data-lit] .plan-img { filter: grayscale(.85) brightness(1.06); opacity: .7; }
.plan[data-lit] .plan-svg g:not(.lit) { opacity: .28; filter: grayscale(1); }
.plan[data-lit] .plan-svg g.lit .p-planned, .plan[data-lit] .plan-svg g.lit .p-farm { fill: var(--lit); fill-opacity: .75; }
.p-mine-ring { fill: none; stroke: var(--ink); stroke-width: 3; }
.p-mine-halo { fill: #fff3dc; fill-opacity: .45; stroke: none; animation: halo 2.4s ease-in-out 5; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.25); fill-opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .p-mine-halo { animation: none; } }

/* the home card's price, from Salesforce through /api */
.map-price { margin-block-start: 12px; display: grid; gap: 4px; }
.map-price-amount { font-size: 1.25rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.demo-tag { font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--clay-ink); }
.map-availability { color: var(--ink-2); }

/* the consent prompt (backend phase 2): a small card clear of the title card and the guide: on phones above the guide
   bar (on the intro, above the title); from 900 px in the bottom corner opposite the guide. It never blocks the site. */
.consent { position: fixed; z-index: 40; inset-inline: var(--gutter); inset-block-end: calc(var(--guide-h, 0px) + var(--sa-b) + 12px); max-inline-size: 440px; margin-inline: auto; padding: 14px 16px; display: grid; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(58, 54, 52, .2); font-size: .92rem; }
/* the intro on phones: the guide floats low and the title sits mid-screen, so the card takes the empty band above the title */
body[data-scene="landing"] .consent { inset-block: calc(var(--sa-t) + 60px) auto; }
.consent-title { font-size: .95rem; font-weight: 600; margin: 0; }
.consent p { margin: 0; color: var(--ink-2); }
.consent .row { flex-wrap: wrap; gap: 8px; margin: 0; }
/* phones: no title line (it stays for screen readers), so the card fits the band above the intro's title */
@media (max-width: 899px) { .consent-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.consent .btn { min-block-size: 44px; padding-inline: 14px; font-size: .9rem; }
.consent-choose { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .consent, body[data-scene="landing"] .consent { inset-inline: auto 24px; inset-block: auto calc(var(--sa-b) + 24px); max-inline-size: 400px; margin: 0; }
}
/* the home page, from the flat picker: which flat it is */
.flat-pick { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(243, 192, 142, .22); color: var(--ink); font-size: 14px; }

/* ---- amenities (scenes/amenities.js): every place by area, its render or the masterplan round it */
.amenity-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--ink); }
.amenity-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.amenity-pill.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.amenity-area { margin-top: 34px; }
.amenity-area-head { display: grid; justify-items: start; gap: 6px; }
.amenity-area-head .section-title { margin: 0; }
.amenity-area-pitch { margin: 0; max-width: 62ch; color: var(--ink-2); line-height: 1.5; }
.amenity-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
@media (min-width: 700px) { .amenity-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.amenity { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); scroll-margin: 120px; }
.amenity-media { position: relative; aspect-ratio: 16 / 10; background: #e6e0d2; }
.amenity-media img, .amenity-media canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.amenity-media canvas { opacity: 0; transition: opacity .4s var(--ease); }
.amenity-media canvas.drawn { opacity: 1; }
.amenity-media.no-img { display: grid; place-items: center; }
.amenity-source { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(250, 248, 241, .9); color: var(--ink-2); font-size: 12px; letter-spacing: .04em; }
.amenity-body { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; }
.amenity-body p { margin: 0; }
.amenity-title { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.amenity-fact { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.amenity-walk { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.amenity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.amenity-focus { box-shadow: 0 0 0 2px #b9733a, 0 18px 40px -22px rgba(58, 54, 52, .45); animation: card-in .55s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .amenity-focus { animation: none; } .amenity-media canvas { transition: none; } }
.more-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.more-link::after { content: "→"; text-decoration: none; }
[dir="rtl"] .more-link::after { content: "←"; }
@media (hover: hover) { .more-link:hover { text-decoration-color: currentColor; } }
.map-sheet-more { margin-top: 14px; }
.home-amenities, .district-more { margin-top: 12px; }

/* Stable-size preview crossfades into the first 3D frame without a blank panel. */
.home-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.65; transition:opacity .3s var(--ease); pointer-events:none; }
.home-view .viewer-canvas { opacity:0; transition:opacity .32s var(--ease); }
.home-view.ready .viewer-canvas { opacity:1; }
.home-view.ready .home-preview { opacity:0; }
.home-view-loading { z-index:1; background:linear-gradient(transparent,rgba(235,230,218,.7),transparent); }

.map-cable-switch { position:absolute; z-index:6; inset-inline-end:20px; top:146px; min-height:44px; display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--line); border-radius:24px; background:var(--ground); color:var(--ink); font:inherit; font-size:12px; }
.map-cable-switch::after { content:''; width:28px; height:16px; border-radius:12px; background:radial-gradient(circle at 8px 8px,#fff 5px,transparent 6px),#aaa397; }
.map-cable-switch[aria-checked="true"]::after { background:radial-gradient(circle at 20px 8px,#fff 5px,transparent 6px),#78855b; }

/* One shared furnished blueprint for apartment previews and the flat picker. */
.apartment-blueprint { margin-block: 36px; padding: clamp(16px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: #faf8f2; }
.apartment-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.apartment-plan-heading .kicker, .apartment-plan-heading .section-title { margin: 0 0 6px; }
.apartment-plan-note, .apartment-plan-key, .apartment-plan-mobile-note { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.apartment-plan-scroll { overflow-x: auto; overscroll-behavior-inline: contain; margin-block: 20px; border-radius: 12px; background: #fffefa; direction: ltr; }
.apartment-blueprint-svg { display: block; width: 100%; min-width: 580px; max-height: 780px; }
.apartment-drawing { stroke: #6d7872; stroke-width: .025; fill: none; }
.apt-floor { fill: #f5f1e6; stroke: none; }
.apt-room { stroke: none; fill: #f3eee3; }
.apt-room-bedroom { fill: #e7ece4; }
.apt-room-bathroom, .apt-room-powder { fill: #e2e9e8; }
.apt-room-balcony { fill: #e4e5d7; }
.apt-wall { stroke: #42534e; stroke-linecap: square; }
.apt-window { stroke: #739b9b; stroke-width: .035; fill: none; }
.apt-item { fill: #fffdf8; stroke: #8a887b; stroke-width: .025; }
.apt-item-bed, .apt-item-sofa, .apt-item-chair { fill: #cedacf; }
.apt-item-wardrobe, .apt-item-kitchen, .apt-item-dining, .apt-item-coffee, .apt-item-nightstand { fill: #dfcbb0; }
.apt-item-toilet, .apt-item-vanity, .apt-item-shower { fill: #fffefd; }
.apt-leaf { stroke: #987147; stroke-width: .04; }
.apt-swing { stroke: #b69b7d; stroke-width: .024; fill: none; }
.apt-label { fill: #344b43; stroke: #fffefa; stroke-width: .055; paint-order: stroke; font-size: .245px; font-weight: 500; text-anchor: middle; dominant-baseline: middle; }
.apartment-drawing.hide-furniture .apt-furniture { display: none; }
.apartment-plan-mobile-note { display: none; }
.flat-inner .apartment-drawing { opacity: .84; }
.flat-inner .apt-label { display: none; }
.flat-zone.on .flat-num, .flat-zone.on .flat-beds { paint-order: stroke; stroke: #42635a; stroke-width: .55; }
@media (max-width: 640px) {
 .apartment-plan-heading { align-items: flex-start; flex-wrap: wrap; }
 .apartment-plan-mobile-note { display: block; }
 .apartment-blueprint { margin-inline: calc(-1 * var(--gutter) / 2); }
 .home-view-tag { max-width: calc(100% - 32px); font-size: 12px; border-radius: 12px; }
}
/* the home page's own actions (scenes/home.js), under its facts */
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.note-card .form-note { color: rgba(241, 239, 230, .78); }

/* ---- Help me choose (homes/fit.js): how many of you, then the homes that fit side by side */
.fit { display: grid; gap: 16px; }
.fit-households { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-scroll { overflow-x: auto; overscroll-behavior-inline: contain; margin-inline: -24px; padding-inline: 24px; scrollbar-width: thin; }
.fit-table { display: grid; grid-template-columns: minmax(86px, auto) repeat(var(--cols, 2), minmax(132px, 1fr)); align-items: stretch; font-size: 14px; color: var(--ink); }
.fit-table > * { padding: 10px 10px 10px 0; padding-inline: 0 10px; border-bottom: 1px solid var(--line); }
.fit-label { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); font-size: 12px; color: var(--ink-2); }
.fit-head { display: grid; gap: 8px; align-content: start; }
.fit-head b { font-weight: 450; font-size: 15px; line-height: 1.25; }
.fit-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #d9d3c5; }
.fit-cell { font-variant-numeric: tabular-nums; }
.fit-actions { display: grid; gap: 6px; align-content: start; border-bottom: 0; }
.fit-actions .btn { min-height: var(--tap); padding: 0 12px; font-size: 14px; }
.fit-again { justify-self: start; min-height: var(--tap); color: var(--ink-2); font-size: 14px; }
@media (min-width: 900px) { .sheet:has(.fit) { width: min(760px, 100vw); } }
/* the close of a page about the city: could you live here? (ui/enquiry.js interestCard) */
.interest-card { margin-top: 44px; max-width: 640px; }
.interest-card .row { margin-top: 14px; }
.interest-card .btn { margin-top: 0; }
.district-page > .interest-card { margin-inline: auto 0; }
/* the map's More (scenes/masterplan.js openLayers): what can be lit, each with its colour */
.layers { display: grid; gap: 18px; }
.layers .layer-list { margin-top: 0; max-width: none; }
.layer-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font-size: 17px; text-align: start; }
.layer-row[aria-pressed="true"] { font-weight: 500; }
.layer-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--clay); }
.layer-homes { background: #c9a27a; } .layer-heart { background: #b98e63; } .layer-amenities { background: #d2a96a; }
.layer-farm { background: #8fa66a; } .layer-landscape { background: #6f9a83; } /* masterplan/api.js LAYER_TINTS */
/* From my door: the walks on Plan C (masterplan/static.js), a label above each place; More's way in */
.p-walk { stroke: #b4532f; stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.pin-walk .pin-body { box-shadow: 0 0 0 1.5px #b4532f; }
.layers-walks { justify-self: start; }
.home-walks { margin-top: 10px; }
/* My future home (ui/share.js): the card, then the ways to send it */
.share { display: grid; gap: 14px; }
.share-card { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -22px rgba(58, 54, 52, .45); }
/* Arabic titles in the brand's Arabic display face, Omnia Display (Master File 3.4), once its files are in */
html[lang="ar"] :is(.display, .sheet-title) { font-family: var(--f-ar-display); }