/* The City theme (Laith, 17 Oct 2026: "implement the new UI on the site"): the uruk-ui design language over the whole
   site. A dark ground, light words, the plate as the guide, buttons as underlined words, serif titles. On the brand's
   own colours (Master File 3.2: Basalt, Limestone, the Connection pillar's orange) and type (3.4: Season, with its
   stand-ins until licensed). Loaded after mockup.css; mockup.css names colours by role (ink, ground, surface), so this
   file swaps the roles and then restyles what the new UI does differently. Remove its <link> to go back.
   18 Oct 2026 (Laith: "apply this theme/design pack"): the pack's own deep ground (#141210, Basalt at night) and its
   type (Hanken Grotesk, after Season), with Limestone and the brand's orange.
   18 Oct 2026, URUK UI phase 1 (URUK-UI-DECISIONS.md B): the pack's orange #fe6722 (for the Master File's #f86926), its
   dim ink, its 15 px body, its focus ring and its exact word buttons (`.word`), at 44 px to tap. */
:root {
  --ground: #141210; --ink: var(--limestone); --surface: #1f1b19; --surface-2: #29241f;
  --ink-2: rgba(228, 226, 212, .7); /* 9.4:1 on the ground */
  --line: rgba(228, 226, 212, .16); --scrim: rgba(10, 9, 8, .66);
  --accent: #fe6722; /* URUK UI's orange (Laith, 18 Oct; was the Master File's Connection #f86926) */
  --dim: rgba(228, 226, 212, .62); /* URUK UI: a word at rest */
  --clay: var(--accent); --clay-ink: #f6a27a;
  --error: #f4a394;
  --glass-dark: rgba(28, 25, 23, .9);
  --f-sans: "Season Sans", "Hanken Grotesk", Figtree, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
html, body { background: var(--ground); color: var(--ink); }
html { font-size: 15px; } /* URUK UI's body: 15px/1.45 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- type: serif titles (Season Serif; Instrument Serif stands in), the sans for everything else */
.display, .sheet-title, .card-title, .amenity-title, .flat-type, .fit-head b { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.005em; }
.display { line-height: 1.05; }
.display em { font-style: italic; color: #fff; }
html[lang="ar"] :is(.display, .sheet-title, .card-title, .amenity-title, .flat-type) { font-family: var(--f-ar-display); }
.lead, .muted, .form-lead { color: var(--ink-2); }
.kicker, .section-title, .field-label, .eyebrow { letter-spacing: .14em; }

/* ---- buttons are words, exactly as URUK UI's .word: small capitals over a hairline, white on hover, the lit one
   (the main action, the one chosen) white over an orange line. 44 px to tap (the pack's 40, raised). */
:is(.word, .btn, .pill, .chip, .seg-btn, .lang-option, .flat-seg-btn, .floor-pill, .fit-households .btn, .see-inside, .flat-alone) {
  min-height: var(--tap); padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -1px 0 rgba(243, 239, 230, .22); color: var(--dim);
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  transition: color .3s, box-shadow .3s;
}
:is(.word, .btn, .pill, .chip, .seg-btn, .lang-option, .flat-seg-btn, .floor-pill, .see-inside, .flat-alone):hover { color: #fff; background: none; }
:is(.word[aria-current="true"], .word.lit, .btn-primary, .pill-primary, .seg-btn.on, .lang-option.on, .flat-seg-btn.on, .floor-pill[aria-pressed="true"], .see-inside[aria-pressed="true"], .fit-households .btn-primary) {
  color: #fff; background: none; box-shadow: inset 0 -1px 0 var(--accent);
}
.btn-primary:hover, .pill-primary:hover { color: #fff; box-shadow: inset 0 -1px 0 var(--accent); }
.btn:active, .pill:active, .chip:active { transform: none; opacity: .8; }
.btn:disabled { opacity: .4; }
.btn-wide { width: auto; justify-self: start; }
/* rows of words breathe more than rows of pills */
:is(.row, .menu-actions, .home-actions, .fit-households, .flat-actions, .sheet-actions, .stub-actions, .amenity-actions, .flat-controls, .district-actions) { column-gap: 22px; }
:is(.seg, .flat-seg) { gap: 18px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.seg .lang-option, .seg .seg-btn { padding: 0 2px; min-height: var(--tap); border-radius: 0; }
.seg .lang-option.on, .seg .seg-btn.on { background: none; color: #fff; box-shadow: inset 0 -1px 0 var(--accent); }
/* the Street's "Help me choose" is a word too */
.uh-help { min-height: var(--tap); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--accent);
  color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.uh-help:hover { background: none; color: #fff; }
html[lang="ar"] .uh-help { letter-spacing: 0; text-transform: none; font-size: 14px; }
/* Arabic letters stay joined: no capitals, no tracking, a little larger */
html[lang="ar"] :is(.word, .btn, .pill, .chip, .seg-btn, .lang-option, .flat-seg-btn, .floor-pill, .see-inside, .flat-alone, .kicker, .section-title, .field-label) { letter-spacing: 0; text-transform: none; font-size: 14px; }
.linkish, .more-link { color: var(--ink); text-decoration-color: rgba(228, 226, 212, .4); }

/* ---- the top bar: the brand's mark in orange, the wordmark in Limestone, the actions as words */
.logo { color: var(--ink); gap: 12px; }
.logo .bm { width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 10px rgba(254, 103, 34, .35)); }
.logo .bw { height: 16px; width: 54px; color: var(--ink); } /* sized, not auto: the wordmark's box follows a resize at once */
.top-actions { gap: 20px; }
.top .pill, .top .lang-btn { background: none; }
.top-actions > button { min-width: var(--tap); justify-content: center; } /* a short word (عربي) is still a 44 px target */
.icon-btn.menu-btn { border: 0; background: none; }
.menu-icon { background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
body[data-scrolled] .top { background: rgba(20, 18, 16, .92); box-shadow: 0 1px 0 var(--line); }
.lang-pop { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, .6); }
.lang-option { justify-content: flex-start; }
.map-btn::before { background: currentColor; }
@media (max-width: 899px) { .top-actions { gap: 8px; margin-inline-end: -2px; } }

/* ---- forms: a field is a line to write on */
.field-input { min-height: var(--tap); padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: inset 0 -1px 0 rgba(228, 226, 212, .45); }
.field-input:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.field-input::placeholder { color: rgba(228, 226, 212, .5); }
.field-input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--error); border: 0; }
select.field-input option { background: var(--surface); color: var(--ink); }
.field-area { padding: 10px 2px; }
.field-error { color: var(--error); }
.check { color: var(--ink); }
.check input { accent-color: var(--accent); }
.code-box { background: transparent; color: var(--ink); border-color: var(--line); }

/* ---- surfaces: few, quiet, square-ish */
.sheet { background: var(--surface); color: var(--ink); }
.sheet-body { color: var(--ink-2); }
.note-card { background: rgba(228, 226, 212, .06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; }
.note-card .form-note { color: var(--ink-2); }
/* (the old dark card lit its words in the ground's colour: on the City's ground they'd vanish) */
.note-card .btn:not(.btn-primary) { color: var(--ink-2); background: none; border: 0; }
.note-card .btn-primary { color: var(--ink); background: none; border: 0; }
.note-card .row { column-gap: 22px; }
.card, .home-chip, .amenity { background: rgba(228, 226, 212, .05); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; }
.facts { background: var(--line); border-radius: 4px; }
.fact { background: var(--ground); }
.map-facts li { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.toast { background: var(--ink); color: var(--ground); }
.consent { background: var(--surface); color: var(--ink); border-color: var(--line); }
.consent p { color: var(--ink-2); }
.tbd { color: var(--ink); }
.boot-mark, .guide-mark, .verifying-mark { background-image: url("../../assets/mark-light.svg"); }
.wedge .wedge-a { background: var(--surface); }
.wedge .wedge-b, .wedge.fade { background: var(--ground); }

/* ---- the guide is the City: the sand plate in the corner, its words beside it (uruk-ui .city) */
.guide-orb-mark { display: none; }
.guide-plate { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #171513; }
.guide-plate .uh-cv, .guide-plate .uh-static-mark { position: absolute; inset: 0; }
.uh-cv-plate { width: 100%; height: 100%; display: block; }
.uh-cv-panel { display: none !important; }
.guide-plate .uh-static-mark { background: url('../../assets/mark-light.svg') center / 80% no-repeat; }
/* on the Street the City's choices are the home's figures: room for them on one line, clear of the list of homes */
@media (min-width: 761px) { body.uh-on .guide.orb { width: min(720px, calc(100% - 2 * var(--gutter))); } }
.guide.orb {
  left: max(var(--gutter), env(safe-area-inset-left)); right: auto; inset-inline-end: auto; bottom: calc(18px + var(--sa-b)); top: auto;
  width: min(600px, calc(100% - 2 * var(--gutter))); height: auto; margin: 0;
  display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 22px; row-gap: 8px; align-items: center;
  pointer-events: auto;
}
[dir="rtl"] .guide.orb { left: auto; right: max(var(--gutter), env(safe-area-inset-right)); }
.guide.orb .guide-orb {
  position: relative; left: auto; top: auto; margin: 0; grid-column: 1; grid-row: 1 / span 4; align-self: center;
  width: 112px; height: 112px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(228, 226, 212, .14), 0 18px 34px -12px rgba(0, 0, 0, .7); transition: box-shadow .5s var(--ease), transform .2s var(--ease);
}
.guide.orb .guide-orb::before { display: none; }
.guide.orb.talking .guide-orb, .guide.orb.thinking .guide-orb { box-shadow: 0 0 0 1px rgba(254, 103, 34, .45), 0 0 40px 3px rgba(254, 103, 34, .26), 0 18px 34px -12px rgba(0, 0, 0, .7); }
.guide.orb .guide-line {
  position: static; grid-column: 2; transform: none; translate: none; width: auto; max-width: none; margin: 0; padding: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: start;
  color: var(--ink); font-size: 18px; font-weight: 300; line-height: 1.35; text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
  opacity: 1; visibility: visible; -webkit-line-clamp: 4; line-clamp: 4;
}
.guide.orb .guide-slot { position: static; grid-column: 2; transform: none; width: auto; }
/* a block to answer with (the journey's fields): in the words' column, under the line; the ask field steps aside */
.guide.orb.has-slot :is(.guide-line, .guide-slot) { position: static; left: auto; top: auto; transform: none; width: auto; grid-column: 2; text-align: start; text-wrap: pretty; }
.guide.orb.has-slot > form.ask { display: none !important; }
.guide.orb .chips { position: static; grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 22px; pointer-events: auto; }
.guide.orb .chips .chip {
  position: static; translate: none; transform: none; animation: none; opacity: 1; scale: 1;
  min-height: var(--tap); padding: 0 1px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 -1px 0 rgba(228, 226, 212, .3); font-size: 12px;
}
.guide.orb .chips .chip:first-child { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.guide.orb .chips .chip-spare { display: inline-flex; }
.guide.orb > form.ask { display: flex !important; grid-column: 2; }
.guide.orb .ask-input { height: 40px; padding: 0 44px 0 2px; padding-inline: 2px 44px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 rgba(228, 226, 212, .5); color: var(--ink); font-size: 15px; font-weight: 300; }
.guide.orb .ask-input:focus { box-shadow: inset 0 -1px 0 var(--accent); }
.ask-input::placeholder { color: rgba(228, 226, 212, .55); }
.send { background-color: transparent; }
.send-icon { background: var(--ink-2); }
.ask.ready .send, .guide.thinking .send { background-color: transparent; }
.ask.ready .send-icon { background: var(--accent); }
@media (max-width: 760px) {
  .guide.orb { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; bottom: calc(14px + var(--sa-b)); }
  .guide.orb .guide-orb { width: 76px; height: 76px; }
  .guide.orb .guide-line { font-size: 16px; -webkit-line-clamp: 3; line-clamp: 3; }
}
/* docked on pages that scroll: the plate alone, in the corner (guide.dock) */
.guide.orb.docked { left: auto; right: auto; inset-inline: auto calc(var(--gutter) - 6px); width: 64px; height: 64px; display: block; }
.guide.orb.docked .guide-orb { position: absolute; inset: 0; width: 64px; height: 64px; grid-row: auto; }
.guide.orb.docked > form.ask { display: none !important; }
/* the panel (the conversation), dark glass */
.guide:not(.orb) { --glass: var(--glass-dark); background: var(--glass); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, .65); color: var(--ink); }
.guide:not(.orb)::before, .guide:not(.orb)::after { display: none; }
.guide:not(.orb) .guide-line { text-shadow: none; }
.guide-head { color: var(--ink-2); }
.guide-msg-guide { background: rgba(228, 226, 212, .08); box-shadow: none; color: var(--ink); }
.guide:not(.orb) .ask-input { background: rgba(228, 226, 212, .08); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.guide:not(.orb) .chip { box-shadow: inset 0 -1px 0 rgba(228, 226, 212, .3); }

/* ---- the welcome: the title, then the City in the middle (uruk-ui .land) */
.intro, body[data-scene="landing"] { background: var(--ground); }
.intro-glow { background: radial-gradient(closest-side, rgba(254, 103, 34, .16), rgba(254, 103, 34, .05) 55%, transparent); }
.land-title {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); top: calc(var(--sa-t) + 15vh); margin: 0; text-align: center;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1; color: var(--ink); text-wrap: balance;
}
.intro-tagline { top: calc(var(--sa-t) + 15vh + clamp(56px, 6.6vw, 88px)); color: var(--ink-2); }
body[data-scene="landing"] .guide.orb {
  --welcome-guide-top: calc(var(--sa-t) + 15vh + clamp(118px, 12vw, 160px));
  left: 0; right: 0; inset-inline: 0; margin-inline: auto; top: var(--welcome-guide-top); bottom: auto;
  width: min(460px, calc(100% - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 12px;
  max-height: max(160px, calc(100svh - var(--welcome-guide-top) - var(--sa-b) - 64px)); overflow-y: auto; overscroll-behavior: contain;
}
body[data-scene="landing"] .guide.orb .guide-orb { grid-column: 1; grid-row: 1; width: min(220px, 52vw); height: min(220px, 52vw); }
body[data-scene="landing"] .guide.orb :is(.guide-line, .guide-slot, .chips) { position: static; left: auto; top: auto; transform: none; width: 100%; grid-column: 1; grid-row: auto; text-align: center; justify-content: center; }
body[data-scene="landing"] .guide.orb .guide-line { font-size: 17px; }
body[data-scene="landing"] .guide.orb > form.ask { display: none !important; }
body[data-scene="landing"] .guide.orb .intro-name { justify-items: center; width: 100%; }
body[data-scene="landing"] .guide:not(.orb) { top: calc(var(--sa-t) + 15vh + 150px); }
@media (max-width: 760px) {
  .land-title { top: calc(var(--sa-t) + 11vh + 36px); font-size: 38px; } /* under the row of section glyphs */
  .intro-tagline { top: calc(var(--sa-t) + 11vh + 88px); }
  body[data-scene="landing"] .guide.orb { --welcome-guide-top: calc(var(--sa-t) + 11vh + 150px); }
}

/* ---- the map: compact shades carry the controls while leaving the city in daylight */
.map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 18, 16, .64) 0%, rgba(20, 18, 16, 0) 11%),
              linear-gradient(0deg, rgba(20, 18, 16, .86) 0%, rgba(20, 18, 16, .50) 12%, rgba(20, 18, 16, 0) 25%);
}
/* The stacked phone guide and second navigation row need their original broader
   contrast bands; the compact desktop shades leave their text over bright roofs. */
@media (max-width: 899px) {
  .map::after {
    background: linear-gradient(180deg, rgba(20, 18, 16, .7) 0%, rgba(20, 18, 16, 0) 16%),
                linear-gradient(0deg, rgba(20, 18, 16, .92) 0%, rgba(20, 18, 16, .55) 18%, rgba(20, 18, 16, 0) 36%);
  }
}
.map-view { z-index: auto; }
.pin-zone .pin-body { background: rgba(20, 18, 16, .82); color: var(--ink-2); }
.pin-home .pin-mark { background-image: url("../../assets/mark.svg"); }
.map-hint { background: var(--glass-dark); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.map-loading { color: var(--ink); }

/* ---- the home page: the model on a dark plinth */
.home-view { background: radial-gradient(ellipse at 50% 70%, #4b4643 0%, var(--ground) 70%); }
.home-view-loading { background: linear-gradient(transparent, rgba(20, 18, 16, .7), transparent); color: var(--ink-2); }
.home-view-tag, .floor-bar { background: var(--glass-dark); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); }
.floor-pill { min-height: var(--tap); }
/* the floor pills are word buttons here (no padding): space them apart so the storeys read as one bar */
.floor-pills { gap: 18px; }
.floor-arrow { color: var(--ink); }
.flat-pick { background: rgba(254, 103, 34, .14); color: var(--ink); }
/* the drawings stay on paper: the flat picker's key plan and the apartment blueprint */
.flat-card, .apartment-blueprint { color: #3a3634; }
.flat-card .flat-legend, .apartment-blueprint :is(.apartment-plan-note, .apartment-plan-key, .apartment-plan-mobile-note, .kicker, .section-title) { color: #5c5652; }
.flat-facts .flat-id, .flat-note { color: var(--ink-2); }

/* ---- the Heart, Amenities, Help me choose */
.district-figure, .amenity-media, .fit-img, .home-card-media { background: #2f2c2a; }
.district-image-tag { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.district-view { color: var(--ink-2); }
.district-view[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.amenity-source { background: var(--glass-dark); color: var(--ink-2); }
.fit-label { background: var(--surface); }
.layer-row { color: var(--ink); }
.pillar-row { color: var(--ink); }
.prefs .pref { color: var(--ink); }
/* the logo is no longer part of the title: it shows on the welcome too */
body[data-scene="landing"] .logo { visibility: visible; }
/* phones: the bar holds the logo, Map, I'm interested, Day/Night and the menu (the new UI's smaller lockup) */
@media (max-width: 480px) {
  .logo { gap: 8px; }
  .logo .bm { width: 26px; height: 26px; }
  .logo .bw { height: 14px; width: 48px; }
  .top-actions { gap: 2px; margin-inline-end: -4px; }
  .top #interest-btn { padding-inline: 6px; font-size: 11px; letter-spacing: .08em; }
}
/* the sections as the new UI's glyphs (uruk-ui .secs): dotted, traced in white when hovered and in orange when current,
   the current one named. Wide screens: in the bar. Phones: a row under the logo, each named. They stand in for the
   Map button. My URUK lights orange once the visitor has signed up (journey.js). */
.sections { display: flex; align-items: center; gap: 6px; }
.section-word { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); justify-content: center; padding: 0 8px; color: var(--ink-2); text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.section-word .gl { display: block; flex: none; width: 26px; height: 26px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .65)); }
.gl .gd { stroke: rgba(228, 226, 212, .55); stroke-width: 1.5; stroke-dasharray: .01 2.4; transition: opacity .5s; }
.gl .gs { stroke: #fff; stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease), stroke .4s; }
.section-word:is(:hover, :focus-visible, [aria-current="page"]) .gs { stroke-dashoffset: 0; }
.section-word:is(:hover, [aria-current="page"]) .gd { opacity: .25; }
.section-word[aria-current="page"] { color: #fff; }
.section-word[aria-current="page"] .gs { stroke: var(--accent); }
.section-word[aria-current="page"] .gl { filter: drop-shadow(0 0 4px rgba(254, 103, 34, .7)) drop-shadow(0 1px 5px rgba(0, 0, 0, .6)); }
.section-word .lb { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .7s var(--ease), opacity .5s, margin .7s var(--ease); }
.section-word:is(:hover, :focus-visible, [aria-current="page"]) .lb { max-width: 200px; opacity: 1; margin-inline-start: 10px; }
.section-word:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
body[data-registered] .section-word[data-sec="my"] .gd { stroke: rgba(254, 103, 34, .8); }
html[lang="ar"] .section-word { letter-spacing: 0; text-transform: none; font-size: 14px; }
.top #map-btn { display: none !important; }
@media (min-width: 900px) { .sections { flex: 1; justify-content: flex-end; margin-inline-end: 14px; } } /* at the right, beside the actions (Laith, 18 Oct) */
@media (max-width: 899px) {
  .sections { position: fixed; z-index: 21; top: calc(var(--sa-t) + 54px); inset-inline: var(--gutter); gap: 2px; justify-content: space-between; }
  .section-word { flex-direction: column; gap: 3px; min-height: 0; padding: 4px 4px 2px; }
  .section-word .gl { width: 22px; height: 22px; }
  .section-word .lb { max-width: none; opacity: .62; margin: 0 !important; font-size: 8.5px; letter-spacing: .1em; }
  .section-word[aria-current="page"] .lb { opacity: 1; }
  html[lang="ar"] .section-word .lb { font-size: 10px; letter-spacing: 0; }
  /* room for the row: pages, the Street's controls and the journey's rail sit under it */
  .page, .district-page { padding-top: calc(var(--sa-t) + 128px); }
  .heart-renders-pic { margin-top: calc(var(--sa-t) + 104px); }
  .uh-acts { top: calc(var(--sa-t, 0px) + 112px) !important; }
  .journey-rail { top: calc(var(--sa-t) + 104px); }
  .origin-skip { top: calc(var(--sa-t) + 108px) !important; }
}
body:not([data-ready]) .sections { visibility: hidden; }
body[data-failed] .sections { display: none; }
body[data-scene="landing"] .sections { opacity: .9; }

/* ---- the Heart's renders (the new UI): ATI's pictures across the screen, five in a list beside the City's line */
.heart-renders { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: end; column-gap: 48px;
  min-height: min(100svh, 1000px); padding: calc(96px + var(--sa-t)) clamp(30px, 4vw, 80px) 112px; color: var(--ink); overflow: hidden; }
.heart-renders-pic { position: absolute; inset: 0; z-index: -1; background: var(--surface); }
.heart-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.heart-render.on { opacity: 1; }
.heart-renders-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 12, 11, .94) 0%, rgba(14, 12, 11, .6) 34%, rgba(14, 12, 11, 0) 66%), linear-gradient(to bottom, rgba(14, 12, 11, .6), transparent 24%); }
.heart-renders-shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgba(14, 12, 11, .62), rgba(14, 12, 11, 0) 42%); }
[dir="rtl"] .heart-renders-shade::after { background: linear-gradient(to right, rgba(14, 12, 11, .62), rgba(14, 12, 11, 0) 42%); }
.heart-renders-copy .display { max-width: 12ch; margin: 0 0 16px; font-size: clamp(42px, 5vw, 76px); }
.heart-renders-copy .kicker { margin: 0 0 10px; color: var(--ink-2); }
.heart-render-line { max-width: 46ch; min-height: 3em; margin: 0 0 14px; font-size: 18px; font-weight: 300; line-height: 1.45; }
.heart-render-line strong { font-weight: 500; }
.heart-renders-actions { display: flex; flex-wrap: wrap; column-gap: 22px; }
.heart-drum { display: grid; gap: 4px; }
/* the new UI's list (uruk-ui .drum), on every section (the Heart, the City, Origin; URUK UI phase 6): roman numerals in the
   serif, the one shown glowing orange, its line wiped in */
.drum-item { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; min-height: 52px; padding: 6px 0; border: 0; background: none;
  color: rgba(228, 226, 212, .62); text-align: start; cursor: pointer; text-shadow: 0 1px 16px rgba(0, 0, 0, .6); transition: color .4s; }
.drum-item:hover, .drum-item:focus-visible { color: #fff; }
.drum-item:hover .drum-n { color: var(--accent); }
.drum-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drum-n { grid-row: span 2; font-family: var(--f-serif); font-size: 30px; line-height: 1; letter-spacing: .02em; transition: color .4s, text-shadow .5s, transform .8s var(--ease); transform-origin: 0 85%; }
.drum-t { font-family: var(--f-serif); font-size: 21px; line-height: 1.15; transition: transform .8s var(--ease); transform-origin: 0 50%; }
.drum-s { display: none; position: relative; margin-top: 6px; padding-bottom: 7px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(228, 226, 212, .8); }
.drum-s::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 28px; height: 1px; background: var(--accent); box-shadow: 0 0 8px rgba(254, 103, 34, .9); }
.drum-item[aria-current="true"] { color: #fff; cursor: default; }
.drum-item[aria-current="true"] .drum-n { font-size: 46px; text-shadow: 0 0 22px rgba(254, 103, 34, .75), 0 0 4px rgba(254, 103, 34, .6); }
.drum-item[aria-current="true"] .drum-t { font-size: 27px; }
.drum-item[aria-current="true"] .drum-s { display: block; animation: drum-wipe .8s var(--ease) both; }
@keyframes drum-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html[lang="ar"] .drum-s { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .drum-item[aria-current="true"] .drum-s { animation: none; } }
.heart-renders-cap { position: absolute; inset-inline-start: clamp(30px, 4vw, 80px); bottom: 20px; margin: 0; color: rgba(228, 226, 212, .55); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
html[lang="ar"] .heart-renders-cap { letter-spacing: 0; }
.heart-renders + .district-page { padding-top: 56px; }
@media (max-width: 899px) {
  .heart-renders { grid-template-columns: 1fr; min-height: 0; padding: 0 0 8px; overflow: visible; }
  .heart-renders-pic { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; overflow: hidden; }
  .heart-renders-shade { background: linear-gradient(to top, var(--ground) 0%, rgba(20, 18, 16, 0) 42%), linear-gradient(to bottom, rgba(14, 12, 11, .55), transparent 26%); }
  .heart-renders-shade::after { display: none; }
  .heart-renders-copy { margin-top: -120px; padding: 0 var(--gutter); position: relative; }
  .heart-drum { padding: 12px var(--gutter) 0; }
  .heart-renders-cap { position: static; padding: 14px var(--gutter) 0; }
}
@media (prefers-reduced-motion: reduce) { .heart-render { transition: none; } }

/* ---- the journey (journey.js): its rail under the bar, and the small forms the City asks with */
.journey-rail { position: fixed; z-index: 30; top: calc(60px + var(--sa-t)); inset-inline: 0; display: flex; justify-content: center; gap: 18px; padding: 6px 16px; pointer-events: none; }
.journey-rail[hidden] { display: none; }
.journey-step { position: relative; padding-inline-start: 12px; color: rgba(228, 226, 212, .5); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.journey-step::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: currentColor; opacity: .6; }
.journey-step.done { color: var(--ink-2); }
.journey-step.on { color: var(--ink); }
.journey-step.on::before { background: var(--accent); opacity: 1; box-shadow: 0 0 8px rgba(254, 103, 34, .6); }
html[lang="ar"] .journey-step { letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (min-width: 1180px) { .journey-rail { top: calc(72px + var(--sa-t)); } }
@media (max-width: 760px) { body[data-scene="homes"] .journey-rail { display: none; } } /* the Street's own controls sit there */
body[data-journey] .page-inner { padding-top: 26px; } /* room for the rail above a page's title */
.journey-form .field-error { margin: 4px 0 0; color: var(--error); font-size: 13px; }
.journey-note { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
.journey-consent { display: grid; gap: 10px; margin-bottom: 12px; }
.journey-consent .check { display: flex; gap: 10px; align-items: center; min-height: var(--tap); font-size: 14px; }
.journey-form > .btn-primary { justify-self: start; }

/* ---- the welcome's doors (landing.js): Show me brings up the temple's city, Explore freely the plan's print; a
   veil keeps the title and the City readable over either. Opacity only, so it stays smooth on a phone. */
.intro-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; overflow: hidden; will-change: opacity; }
.intro-bg.on { opacity: 1; }
.intro-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(20, 18, 16, .78), rgba(20, 18, 16, .5) 60%, rgba(14, 12, 11, .82)); }
.intro-bg-temple .intro-bg-img { object-position: 50% 60%; filter: sepia(.18) saturate(.92) brightness(.74); transform: scale(1.03); transition: transform 6s var(--ease); } /* the render's bright sand, toned to the Basalt ground */
.intro-bg-temple.on .intro-bg-img { transform: scale(1); }
.intro-bg-plan { background: #171513; }
.intro-bg-plan .intro-bg-img { object-fit: contain; transform: scale(1.12); transition: transform 6s var(--ease); }
.intro-bg-plan.on .intro-bg-img { transform: scale(1.04); }
.intro-bg-plan::after { background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(20, 18, 16, .72), rgba(20, 18, 16, .25) 70%); }
.intro .intro-glow, .intro .land-title, .intro .intro-tagline { z-index: 1; }
.intro[data-door] .intro-glow { opacity: .5; transition: opacity .9s var(--ease); }
body[data-scene="landing"] .guide.orb .chip.door-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
/* phones, upright: the plan stands up the screen, as Plan C turns it */
@media (orientation: portrait) {
  .intro-bg-plan .intro-bg-img { inset: auto; left: 50%; top: 50%; width: 150svh; height: auto; max-width: none; object-fit: fill;
    transform: translate(-50%, -50%) rotate(90deg) scale(1.08); }
  .intro-bg-plan.on .intro-bg-img { transform: translate(-50%, -50%) rotate(90deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .intro-bg, .intro-bg-img { transition: opacity .3s linear !important; } .intro-bg-img { transform: none !important; } .intro-bg-plan .intro-bg-img { transform: translate(-50%, -50%) rotate(90deg) !important; } }
@media (prefers-reduced-motion: reduce) and (orientation: landscape) { .intro-bg-plan .intro-bg-img { transform: none !important; } }

/* ---- the City's ask (uruk-ui .city form): a field on a hairline, and its button a word (Send, or Thinking) */
.guide .send { width: auto; min-width: var(--tap); height: var(--tap); padding: 0 2px; border-radius: 0; background: none !important; box-shadow: none; transform: none; }
.guide .send > * { display: none; }
.guide .send::after { content: attr(aria-label); font: 500 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: color .3s; }
.guide .ask.ready .send::after, .guide .send:hover::after { color: #fff; }
.guide.thinking .send::after { color: var(--accent); }
html[lang="ar"] .guide .send::after { letter-spacing: 0; font-size: 14px; }
.guide.orb .ask-input, .guide:not(.orb) .ask-input { padding-inline-end: 72px; }

/* ---- My URUK as the new UI's Yours (scenes/my.js): the home behind, the list on one side, what is chosen beside it */
.my-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ground); }
.my-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); }
.my-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 12, 11, .82) 0%, rgba(14, 12, 11, .42) 46%, rgba(14, 12, 11, .78) 100%), linear-gradient(0deg, rgba(14, 12, 11, .8), transparent 40%); }
[dir="rtl"] .my-bg::after { background: linear-gradient(270deg, rgba(14, 12, 11, .82) 0%, rgba(14, 12, 11, .42) 46%, rgba(14, 12, 11, .78) 100%), linear-gradient(0deg, rgba(14, 12, 11, .8), transparent 40%); }
.my-page { z-index: 1; background: none; }
.my-wrap { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 560px); grid-template-areas: "head head" "drum panel"; column-gap: clamp(32px, 6vw, 110px); row-gap: 28px; align-items: start; max-width: 1180px; margin-inline: auto; }
.my-head { grid-area: head; }
.my-head .display { margin: 0; }
.my-drum { grid-area: drum; display: grid; gap: 6px; position: sticky; top: 140px; }
.my-drum-item { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; min-height: 56px; padding: 6px 0; border: 0; background: none; text-align: start;
  color: rgba(228, 226, 212, .62); cursor: pointer; text-shadow: 0 1px 16px rgba(0, 0, 0, .6); transition: color .4s; }
.my-drum-item:hover, .my-drum-item:focus-visible { color: #fff; }
.my-drum-item:hover .my-drum-n { color: var(--accent); }
.my-drum-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-drum-n { grid-row: span 2; font-family: var(--f-serif); font-size: 30px; line-height: 1; transition: color .4s, text-shadow .5s; }
.my-drum-t { font-family: var(--f-serif); font-size: 22px; line-height: 1.15; }
.my-drum-s { display: none; position: relative; margin-top: 6px; padding-bottom: 7px; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(228, 226, 212, .8); }
.my-drum-s::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 28px; height: 1px; background: var(--accent); box-shadow: 0 0 8px rgba(254, 103, 34, .9); }
.my-drum-item[aria-current="true"] { color: #fff; cursor: default; }
.my-drum-item[aria-current="true"] .my-drum-n { font-size: 46px; text-shadow: 0 0 22px rgba(254, 103, 34, .75), 0 0 4px rgba(254, 103, 34, .6); }
.my-drum-item[aria-current="true"] .my-drum-t { font-size: 27px; }
.my-drum-item[aria-current="true"] .my-drum-s { display: block; animation: drum-wipe .8s var(--ease) both; }
html[lang="ar"] .my-drum-s { letter-spacing: 0; }
.my-panel { grid-area: panel; display: grid; gap: 16px; align-content: start; min-width: 0; }
.my-panel-title { margin: 0; font-size: clamp(30px, 3vw, 40px); }
.my-panel .note-card, .my-panel .card { margin: 0; background: rgba(20, 18, 16, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.my-signup .kicker { margin: 0 0 8px; color: var(--clay-ink); }
.my-details { display: grid; grid-template-columns: 130px 1fr; gap: 12px 18px; margin: 0; font-size: 15px; }
.my-details dt { padding-top: 2px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(228, 226, 212, .5); }
.my-details dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
html[lang="ar"] .my-details dt { letter-spacing: 0; font-size: 13px; }
.my-panel .milestones { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid rgba(228, 226, 212, .18); }
.my-panel .milestones li { position: relative; padding: 0 0 20px 24px; padding-inline: 24px 0; color: rgba(228, 226, 212, .62); font-family: var(--f-serif); font-size: 20px; }
.my-panel .milestones li::before { content: ''; position: absolute; inset-inline-start: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1px rgba(228, 226, 212, .45); }
@media (max-width: 899px) {
  .my-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "drum" "panel"; row-gap: 20px; }
  .my-drum { position: static; display: flex; gap: 2px; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .my-drum-item { grid-template-columns: 1fr; justify-items: center; text-align: center; flex: 1; min-height: 0; padding: 4px 2px 10px; }
  .my-drum-n { grid-row: auto; font-size: 26px; }
  .my-drum-t { font-family: var(--f-sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .my-drum-item[aria-current="true"] .my-drum-n { font-size: 34px; }
  .my-drum-item[aria-current="true"] .my-drum-t { font-size: 10px; }
  .my-drum-item[aria-current="true"] .my-drum-s { display: none; }
  .my-drum-item[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  html[lang="ar"] .my-drum-t { font-size: 12px; letter-spacing: 0; }
}

/* the welcome without a glow behind the guide (Laith, 18 Oct): no warm light breathing behind it, no halo round its
   panel or its plate; the panel in the theme's dark glass */
.intro-glow { display: none; }
body[data-scene="landing"] .guide { animation: none; box-shadow: none; }
body[data-scene="landing"] .guide:not(.orb) { --glass: rgba(28, 25, 23, .9); box-shadow: inset 0 0 0 1px var(--line); }
body[data-scene="landing"] .guide-mark { filter: none; }
body[data-scene="landing"] .guide.orb .guide-orb, body[data-scene="landing"] .guide.orb:is(.talking, .thinking) .guide-orb { box-shadow: 0 0 0 1px rgba(228, 226, 212, .14); }

/* Day / Night: the icon alone (Laith, 18 Oct); its name stays for screen readers and in its tooltip */
.theme-toggle { width: var(--tap); min-width: var(--tap); padding: 0 !important; justify-content: center; box-shadow: none; }
.theme-toggle .theme-label { display: none; }
.top .theme-toggle, .top .theme-toggle:hover { box-shadow: none; } /* an icon, not a word: no line under it */

/* a home's page (Laith, 18 Oct): the City on the left, under the model; on phones it waits in the left corner. A
   docked guide never shows a field it was asked with. */
@media (min-width: 900px) { body[data-scene="home"] .guide.orb { width: min(560px, 40vw); } }
body[data-scene="home"] .guide.orb.docked { inset-inline: calc(var(--gutter) - 6px) auto; }
.guide.orb.docked .guide-slot { display: none !important; }
/* the map behind a home's or a place's card stays in view: only a light veil (Laith, 18 Oct: "too grey") */
body[data-scene="masterplan"] .scrim.open { opacity: .25; }

/* ---- the City (URUK UI phase 2, URUK-UI-DECISIONS.md): one line at a time, written at the pace of its voice (each
   word eases out of a blur), bold facts lit (orange-underlined where they act), the plate glowing while it speaks or
   thinks, "Ask me anything" with the word ASK. While it listens the plate comes to the centre with its line, its
   suggestions and the field, and the page breaks into sand behind it (.guide-vac). */
.guide.orb.talking .guide-orb, .guide.orb.thinking .guide-orb { box-shadow: 0 0 0 1px rgba(254, 103, 34, .45), 0 0 44px 4px rgba(254, 103, 34, .28), 0 18px 34px -12px rgba(0, 0, 0, .7); }
.guide.orb .guide-orb { cursor: pointer; }
.guide.orb .guide-line { min-height: 1.35em; cursor: default; overflow: visible; display: block; -webkit-line-clamp: unset; line-clamp: none; transition: opacity .4s var(--ease); }
.guide.orb:not(.centre) .guide-line { max-height: min(24svh, 12rem); overflow-y: auto; overscroll-behavior: contain; }
.guide.orb, .guide.orb .guide-line { scrollbar-width: thin; scrollbar-color: var(--ink-2) transparent; }
.guide.orb.thinking .guide-line { opacity: .45; }
.guide-line .w { opacity: 0; filter: blur(3px); transform: translateY(.12em); display: inline-block; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), filter .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
.guide-line .w.in { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .guide-line .w { filter: none; transform: none; transition: opacity .2s; } }
.guide-line .k { font-weight: 500; color: #fff; }
.guide-line .k.in { text-shadow: 0 0 14px rgba(254, 103, 34, .45), 0 1px 14px rgba(0, 0, 0, .6); }
.guide-line .k.tap { cursor: pointer; box-shadow: inset 0 -1px 0 rgba(254, 103, 34, .85); }
.guide-line .k.tap:hover, .guide-line .k.tap:focus-visible { text-shadow: 0 0 16px rgba(254, 103, 34, .8); }
.guide.orb > form.ask { align-items: center; gap: 14px; }
.guide.orb .ask-input { flex: 1; min-width: 0; padding: 6px 2px; padding-inline: 2px; }
.guide.orb .ask-word { flex: none; }
/* the welcome: tapping the plate brings the field forward */
body[data-scene="landing"] .guide.orb.ask-open > form.ask { display: flex !important; grid-column: 1; width: min(360px, 100%); }
/* listening: the City in the centre, the page as sand behind it */
.guide-vac { position: fixed; inset: 0; z-index: 15; width: 100%; height: 100%; pointer-events: none; display: none; }
body.listening .guide-vac { display: block; }
.guide.orb.centre, .guide.orb.docked.centre {
  left: 0; right: 0; inset-inline: 0; margin-inline: auto; top: 50%; bottom: auto; translate: 0 -50%;
  width: min(560px, calc(100% - 2 * var(--gutter))); height: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 14px;
}
.guide.orb.centre .guide-orb, .guide.orb.docked.centre .guide-orb { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: min(300px, 70vw); height: min(300px, 70vw); }
.guide.orb.centre :is(.guide-line, .chips), .guide.orb.docked.centre :is(.guide-line, .chips) { display: flex; flex-wrap: wrap; grid-column: 1; grid-row: auto; width: 100%; justify-content: center; text-align: center; }
.guide.orb.centre .guide-line, .guide.orb.docked.centre .guide-line { display: block; }
.guide.orb.centre .guide-line, .guide.orb.docked.centre .guide-line { max-height: min(35vh, 18rem); overflow-y: auto; overscroll-behavior: contain; }
.guide.orb.centre > form.ask, .guide.orb.docked.centre > form.ask { display: flex !important; grid-column: 1; width: min(360px, 100%); }
.guide.orb.centre .guide-slot { display: none !important; }
@media (max-width: 760px) {
  .guide.orb.centre .guide-orb, .guide.orb.docked.centre .guide-orb { width: min(220px, 60vw); height: min(220px, 60vw); }
}

/* ---- the consent card (the consent legal handoff, 17 Oct 2026), in URUK UI's words: a dark plate with a hairline.
   The lead choice is the lit word; a decline is a word of the same size in full ink, never dimmed; equal choices are
   identical. On phones it sits above the City; from 900 px in the bottom corner the City leaves free. */
.consent { background: rgba(20, 18, 16, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(228, 226, 212, .16);
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .75); color: var(--ink); padding: 18px 20px 14px; gap: 10px; font-size: 14px; line-height: 1.45; }
.consent-title { font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: #fff; padding-inline-end: 28px; }
html[lang="ar"] .consent-title { font-family: var(--f-ar-display); }
@media (max-width: 899px) { .consent-title { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 19px; } }
.consent p { color: rgba(228, 226, 212, .82); }
.consent .consent-note, .consent .consent-sub { font-size: 12.5px; color: var(--dim); }
.consent-words { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 2px; }
.word.full { color: var(--ink); box-shadow: inset 0 -1px 0 rgba(243, 239, 230, .5); }
.word.full:hover { color: #fff; }
.consent-link { font-size: 13px; color: var(--ink); min-height: var(--tap); }
.consent-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: var(--tap); block-size: var(--tap); border: 0; background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.consent-switches { display: grid; gap: 2px; margin-block: 2px 4px; }
.consent-switches[hidden] { display: none; }
.consent-switch { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding-block: 8px; min-height: var(--tap); border-block-end: 1px solid rgba(228, 226, 212, .1); cursor: pointer; }
.consent-switch input { appearance: none; -webkit-appearance: none; margin: 2px 0 0; inline-size: 34px; block-size: 20px; border-radius: 10px; background: rgba(228, 226, 212, .22); position: relative; cursor: pointer; transition: background .25s; flex: none; }
.consent-switch input::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #e4e2d4; transition: translate .25s; }
.consent-switch input:checked { background: var(--accent); }
.consent-switch input:checked::after { translate: 14px 0; }
[dir="rtl"] .consent-switch input:checked::after { translate: -14px 0; }
.consent-switch input:disabled { opacity: .55; cursor: default; }
.consent-switch-text { display: grid; gap: 2px; }
.consent-switch-text b { font-weight: 500; color: var(--ink); }
.consent-hint { font-size: 12.5px; color: var(--dim); }
.consent-choices { display: grid; gap: 8px; }
.consent-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.consent-chat { display: grid; gap: 6px; }
/* the City is an AI: a small mark beside ASK, always there */
.ai-mark { flex: none; align-self: center; font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--dim); padding: 2px 6px; border: 1px solid rgba(228, 226, 212, .3); border-radius: 4px; line-height: 1.2; }
/* the consent's switches and words in the City's slot: on a plate of their own, readable over the light map */
.guide-slot .consent-chat { padding: 10px 16px 6px; border-radius: 12px; background: rgba(20, 18, 16, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(228, 226, 212, .14); }

/* ---- the launch film (URUK UI's Plan A, on Enter): over everything, then closing in a circle into the City's plate */
.launch-film { position: fixed; inset: 0; z-index: 80; background: #000; }
.launch-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.launch-film.closing { clip-path: circle(var(--fr, 150vmax) at var(--fx, 50%) var(--fy, 50%)); transition: clip-path 1.8s cubic-bezier(.7, 0, .2, 1), opacity .8s .9s; }
.launch-film.gone { opacity: 0; }
.film-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .12); }
.film-bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px rgba(254, 103, 34, .8); }
.film-controls { position: absolute; inset-inline-end: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(18px + var(--sa-b)); display: flex; gap: 22px; opacity: 0; transition: opacity .8s; }
.launch-film.ready .film-controls, .film-controls:focus-within { opacity: 1; }
.film-controls .word { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
body.filming :is(.top, #guide, #stage, .consent, .journey-rail, #map-btn) { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 760px) { .launch-film video { object-fit: contain; } }
@media (prefers-reduced-motion: reduce) { .launch-film.closing { transition: none; } }
/* the welcome's story doors: a stretch of the film, toned to the ground as the temple's render was */
.intro-bg-film .intro-bg-img { filter: brightness(.7) saturate(.92); }

/* ---- Origin: the film in chapters, its list the section's seal */
.origin-film { position: absolute; inset: 0; overflow: hidden; background: #000; }
.origin-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.origin-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 9, 8, .62), rgba(10, 9, 8, 0) 46%), linear-gradient(0deg, rgba(10, 9, 8, .7), rgba(10, 9, 8, 0) 40%); }
.origin-seal { position: absolute; inset-inline-start: var(--gutter); top: calc(var(--sa-t) + 26vh); /* under the film's own title */ margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; z-index: 2; }
.origin-sound { position: absolute; inset-inline-end: var(--gutter); top: calc(var(--sa-t) + 120px); z-index: 2; color: rgba(255, 255, 255, .85); }
.origin-cap { position: absolute; inset-inline-end: var(--gutter); bottom: 12px; margin: 0; z-index: 2; font-size: 11px; color: rgba(228, 226, 212, .55); }
@media (max-width: 760px) {
  .origin-video { object-fit: cover; }
  .origin-seal { top: calc(var(--sa-t) + 112px); gap: 0; }
  .origin-seal .drum-item { min-height: 40px; grid-template-columns: 34px 1fr; padding: 2px 0; }
  .origin-seal .drum-n { font-size: 20px; }
  .origin-seal .drum-t { font-size: 16px; }
  .origin-seal .drum-item[aria-current="true"] .drum-n { font-size: 26px; }
  .origin-seal .drum-item[aria-current="true"] .drum-t { font-size: 19px; }
  .origin-seal .drum-s { display: none !important; }
  .origin-sound { top: auto; bottom: calc(var(--guide-h, 0px) + var(--sa-b) + 18px); }
  .origin-cap { display: none; }
}

/* ---- the City: URUK UI's 2D plan or the 3D city, one word apart, and the City's list (its seal) */
.plan2d { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: none; }
.plan2d.on { display: block; }
/* never over the 3D city: on 3D the plan is hidden whatever the pour's state (the switch paints the view before the
   sand has finished flying back) */
body[data-cityview="3d"] .plan2d { display: none; }
.plan2d.pick { cursor: pointer; }
/* under the plan the 3D city fades out, its labels with it (they keep themselves visible), and takes no taps */
body[data-cityview="plan"] #stage .map { opacity: 0; pointer-events: none; }
body[data-cityview="plan"] #stage .map * { pointer-events: none !important; }
.city-switch { position: absolute; z-index: 3; inset-inline-end: calc(var(--gutter) + 56px); top: calc(var(--sa-t) + 104px); color: #fff; } /* clear of the map's zoom */
/* the plan's own "Show the whole city": shown only on the plan (the 3D city keeps its own, hidden with the map) */
#stage .plan-reset { display: none; }
body[data-cityview="plan"] #stage .plan-reset { display: grid; opacity: 1; z-index: 3; }
.city-seal { position: absolute; z-index: 3; inset-inline-start: var(--gutter); top: calc(var(--sa-t) + 110px); margin: 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 24vw; }
.city-seal .drum-item { min-height: 44px; padding: 3px 0; }
/* on the 3D city the list sits over the map: a ground of its own */
body[data-cityview="3d"] .city-seal { padding: 10px 14px; border-radius: 12px; background: rgba(20, 18, 16, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body[data-cityview="3d"] .city-switch { padding: 0 12px; background: rgba(20, 18, 16, .72); border-radius: 8px; }
@media (max-width: 760px) {
  /* phones: the list is one row of words under the header, scrolled sideways */
  .city-seal { inset-inline: 0; top: calc(var(--sa-t) + 150px); max-width: none; display: flex; gap: 18px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; background: none !important; backdrop-filter: none !important; }
  .city-seal::-webkit-scrollbar { display: none; }
  .city-seal .drum-item { grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; white-space: nowrap; min-height: var(--tap); }
  .city-seal .drum-n, .city-seal .drum-item[aria-current="true"] .drum-n { grid-row: auto; font-size: 18px; }
  .city-seal .drum-t, .city-seal .drum-item[aria-current="true"] .drum-t { font-size: 17px; }
  .city-seal .drum-s { display: none !important; }
  .city-switch { top: calc(var(--sa-t) + 100px); inset-inline-end: var(--gutter); }
}

/* ---- the soft launch (URUK UI phase 7): the welcome's pulse, the meter while holding, the clay film at Name */
.pulse { position: absolute; z-index: 1; inset-inline: var(--gutter); bottom: calc(var(--sa-b) + 22px); margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--dim); }
.pulse b { color: var(--ink); font-weight: 500; }
.pulse i { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(254, 103, 34, .8); }
.demand { position: fixed; z-index: 25; inset-inline-end: var(--gutter); top: calc(var(--sa-t) + 160px); width: min(300px, calc(100% - 2 * var(--gutter))); padding: 14px 16px 12px; border-radius: 12px; background: rgba(20, 18, 16, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(228, 226, 212, .14); color: var(--ink); font-size: 13.5px; line-height: 1.45; opacity: 0; translate: 0 8px; transition: opacity .5s, translate .5s; }
.demand.on { opacity: 1; translate: 0 0; }
.demand p { margin: 0 0 10px; }
.demand b { color: #fff; font-weight: 600; }
.demand-bar { height: 2px; background: rgba(228, 226, 212, .16); }
.demand-bar span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px rgba(254, 103, 34, .8); transition: width 1.4s cubic-bezier(.22, .8, .2, 1); }
.demand small { display: block; margin-top: 8px; font-size: 11px; color: var(--dim); }
.clay { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s; background: #0d0b0a; }
.clay.on { opacity: 1; }
.clay-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
.clay-cap { position: absolute; inset-inline-end: var(--gutter); bottom: 12px; margin: 0; font-size: 11px; color: rgba(228, 226, 212, .55); }
@media (max-width: 760px) {
  .pulse { font-size: 11px; gap: 4px 10px; bottom: calc(var(--sa-b) + 12px); }
  .demand { top: auto; bottom: calc(var(--guide-h, 0px) + var(--sa-b) + 16px); }
}
/* phones in the journey: the rail sits under the section icons (after the rail's own rule, so it holds), and on the
   City the journey drives the plan, so its list steps aside and the switch moves under the rail */
@media (max-width: 760px) {
  .journey-rail { top: calc(var(--sa-t) + 100px); }
  body[data-journey] .city-seal { display: none; }
  body[data-journey] .city-switch { top: calc(var(--sa-t) + 134px); }
}

/* ---- My URUK as the design (URUK UI phase 8): What is next, Your Circle's ring, Your Mark's road */
.chapters { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 2px; }
.chapter { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 0; border-block-end: 1px solid rgba(228, 226, 212, .1); color: var(--dim); }
.chapter b { font-family: var(--f-serif); font-weight: 400; font-size: 19px; color: var(--ink); }
.chapter .chapter-when { align-self: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.chapter.next .chapter-when { color: var(--accent); }
.chapter.open b { color: #fff; }
.chapter .note { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.chapter .word { grid-column: 1 / -1; justify-self: start; }
html[lang="ar"] .chapter .chapter-when { letter-spacing: 0; text-transform: none; font-size: 13px; }
.circle-ring { position: relative; width: 168px; height: 168px; margin: 4px 0 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(228, 226, 212, .14); }
.circle-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(228, 226, 212, .16); }
.circle-dot.on { background: var(--accent); box-shadow: 0 0 10px rgba(254, 103, 34, .8); }
.circle-ring p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; font-family: var(--f-serif); font-size: 40px; line-height: 1; color: #fff; }
.circle-ring small { font-family: var(--f-sans); font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.circle-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 6px 0 12px; }
.circle-link code { font-size: 12.5px; color: var(--ink); padding: 6px 10px; border-radius: 6px; background: rgba(228, 226, 212, .08); direction: ltr; }
.road { margin: 14px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.road li { position: relative; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(228, 226, 212, .4); padding-inline-start: 12px; }
.road li::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.road li.done { color: var(--dim); }
.road li.now { color: #fff; }
.road li.now::before { background: var(--accent); box-shadow: 0 0 8px rgba(254, 103, 34, .9); }
html[lang="ar"] .road li { letter-spacing: 0; text-transform: none; font-size: 13px; }
.road-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(228, 226, 212, .2); font-size: 12px; color: var(--dim); }

/* ---- Hindi and Chinese (URUK UI phase 10): no letter tracking or capitals (tracking breaks Devanagari's headline
   and spaces Chinese characters apart), a touch larger; the serif falls back to the system's for these scripts */
html:is([lang="hi"], [lang="zh"]) :is(.word, .btn, .pill, .chip, .seg-btn, .lang-option, .flat-seg-btn, .floor-pill, .see-inside, .flat-alone, .kicker, .section-title, .field-label) { letter-spacing: .02em; text-transform: none; font-size: 13.5px; }
html:is([lang="hi"], [lang="zh"]) :is(.drum-s, .road li, .chapter .chapter-when, .section-word .lb, .journey-step, .consent-link, .film-controls .word, .pulse, .demand small) { letter-spacing: 0; text-transform: none; }
html[lang="zh"] body { line-height: 1.6; }

/* a house's card on the map (plan-2d-interaction AC7): its 3D plan first, the floors side by side on their plinth;
   a tap opens them on the home page */
.map-sheet-plan { display: grid; justify-items: center; gap: 8px; width: calc(100% + 48px); margin: -16px -24px 18px; padding: 18px 16px 12px; border: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(228, 226, 212, .07), transparent 70%); color: var(--ink-2); cursor: pointer; }
.map-sheet-plan img { display: block; width: 100%; max-width: 560px; height: auto; transition: transform .5s var(--ease); }
.map-sheet-plan:hover img, .map-sheet-plan:focus-visible img { transform: scale(1.02); }
.map-sheet-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.map-sheet-plan-cap { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .map-sheet-plan-cap, html[lang="zh"] .map-sheet-plan-cap, html[lang="hi"] .map-sheet-plan-cap { letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .map-sheet-plan img { transition: none; } }

/* the blueprint's paper keeps its own ink: its Furniture toggle in Basalt, underlined orange while the furniture shows */
.apartment-blueprint .pill.apartment-furniture-toggle { color: #3a3634; background: none; box-shadow: inset 0 -1px 0 rgba(58, 54, 52, .5); font-weight: 600; }
.apartment-blueprint .pill.apartment-furniture-toggle[aria-pressed="true"] { color: #141210; box-shadow: inset 0 -2px 0 var(--accent); }
.apartment-blueprint .pill.apartment-furniture-toggle:hover { color: #141210; box-shadow: inset 0 -2px 0 rgba(58, 54, 52, .8); }