/* 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, .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 { 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) */
/* at rest the plate shows the full URUK logo (the top bar's mark, in its orange); while the City talks, thinks, listens
   or draws, or the pointer is on it, the logo fades and the sand shows (welcome-refinement AC3, AC4). It goes at once and
   comes back slowly: the sand lets go of its drawing and gathers into the mark, then the logo fades in over it */
.guide-orb-mark { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: auto; height: auto; margin: 0;
  border-radius: 50%; background: #171513; box-shadow: none; color: var(--accent); opacity: 1; pointer-events: none; transition: opacity 1.8s ease-in-out .8s; }
.guide-orb-mark svg { width: 64%; height: 64%; }
.guide.orb .guide-orb-mark { animation: none; }
.guide.orb:is(.talking, .thinking, .centre, .drawing) .guide-orb-mark { opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .guide-orb:hover .guide-orb-mark { opacity: 0; transition: opacity .6s var(--ease); } }
/* no sand to show (the static tier, reduced motion, a plate still loading or one that could not start): the logo stays */
.guide .guide-orb:has(> .guide-plate:not([data-voice-state="animated"])) .guide-orb-mark { opacity: 1; }
.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;
}
body[data-scene="landing"] .guide.orb {
  --welcome-guide-top: calc(var(--sa-t) + 15vh + clamp(100px, 9vw, 128px)); /* the title, then the City (no line between: welcome-refinement) */
  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 */
  body[data-scene="landing"] .guide.orb { --welcome-guide-top: calc(var(--sa-t) + 11vh + 124px); }
}
/* upright narrow phones in Arabic: the title takes two lines there (320 x 640, 340 x 720), so the City starts lower */
@media (max-width: 760px) and (min-height: 561px) {
  html[lang="ar"] body[data-scene="landing"] .guide.orb { --welcome-guide-top: calc(var(--sa-t) + 11vh + 144px); }
}

/* ---- 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; }
}
/* 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) */
/* ?flow=1: the five sections always show their names, as URUK UI's bar (Laith, 20 Oct 2026: the headers are permanent) */
@media (min-width: 900px) {
  body[data-flow] .section-word .lb { max-width: none; opacity: .75; margin-inline-start: 10px; transition: opacity .4s; }
  body[data-flow] .section-word:is(:hover, :focus-visible, [aria-current="page"]) .lb { opacity: 1; }
}
@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: the title over its glow (the pictures that played behind the doors left with welcome-refinement) */
.intro .intro-glow, .intro .land-title { z-index: 1; }

/* ---- 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; }
/* with the new flow the docked guide waits at the inline start on every page: the screen's left, mirrored in Arabic
   (Laith, 20 Oct 2026: "make sure the AI on the right is positioned on the left of the screen") */
body[data-flow] .guide.orb.docked:not(.centre) { inset-inline: calc(var(--gutter) - 6px) auto; } /* (opened, it centres as before) */
.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); }
/* the line scrolls (below), and a scroll box clips at its edge: the first letter's overhang, its blur as it eases in
   and its shadow were cut ("I am URUK" read "ı am URUK"). Room on every side, given back by the margin; content-box so
   the words sit exactly where they did, in the corner layout and the centred ones alike. */
.guide.orb .guide-line { box-sizing: content-box; padding: 4px 8px; margin: -4px -8px; overflow-x: hidden; }
.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; } }

/* ---- 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); }

/* ---- Settings (homes-map-selection, ?flow=1): no menu; the language pill is a small gear and the language's code, on
   every screen, opening a short list: EN, AR, then privacy */
body[data-flow] .top #lang { display: inline-flex; }
.settings-gear { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.settings-pop { min-width: 200px; }
.settings-label { padding: 8px 2px 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.settings-langs { display: flex; gap: 2px; }
.settings-langs .lang-option { flex: 1; justify-content: center; letter-spacing: .08em; }

/* ---- the 8 pillars' page (homes-map-selection, ?flow=1: the Heart of the City's place). The site's own dress: the
   dark ground, the serif title, the words underlined; the star beside the list. A pillar chosen tints the page: the
   glow behind the star, its core, the title's colour, the rule under the words, all in that pillar's colour. */
.pillars-page { --pillar: var(--accent); --pillar-tint: rgba(254, 103, 34, .12); position: relative; max-width: 1080px; margin: 0 auto;
  padding: calc(var(--sa-t) + 120px) var(--gutter) 220px; }
.pillars-page-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease), background 1.4s var(--ease);
  background: radial-gradient(ellipse 48% 42% at 28% 48%, color-mix(in srgb, var(--pillar) 22%, transparent), transparent 70%); }
.pillars-page[data-pillar] .pillars-page-glow { opacity: 1; }
.pillars-page-head { max-width: 48ch; margin-bottom: 28px; }
.pillars-page-head .kicker { margin: 0 0 6px; color: var(--pillar); transition: color .9s var(--ease); }
.pillars-page-head .display { margin: 0 0 12px; }
.pillars-page-head .lead { margin: 0; color: var(--ink-2); }
.pillars-page-layout { display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.pillars-page-star { margin: 0; position: sticky; top: calc(var(--sa-t) + 96px); display: grid; gap: 20px; }
.pillar-star { width: 100%; height: auto; display: block; overflow: visible; }
.pillar-glow { fill: var(--pillar); opacity: 0; transition: opacity 1.2s var(--ease), fill 1.2s var(--ease); }
.pillars-page[data-pillar] .pillar-glow { opacity: .5; }
.pillar-ring { stroke: rgba(228, 226, 212, .45); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: pillar-ring-turn 90s linear infinite; transition: stroke .9s; }
.pillars-page[data-pillar] .pillar-ring { stroke: color-mix(in srgb, var(--pillar) 70%, #fff); }
@keyframes pillar-ring-turn { to { transform: rotate(360deg); } }
.pillar-point { opacity: .92; cursor: pointer; transform-box: view-box; transform-origin: 120px 120px;
  transition: opacity .5s var(--ease), transform .7s var(--ease); animation: pillar-point-in .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes pillar-point-in { from { opacity: 0; transform: scale(.35); } }
.pillar-star:has(.pillar-point.on) .pillar-point:not(.on) { opacity: .3; transform: scale(.94); } /* one chosen: the others step back */
.pillar-point.on { opacity: 1; transform: scale(1.12); }
@media (hover: hover) { .pillar-point:not(.on):hover { opacity: 1; } }
.pillar-star-core { fill: var(--ground); stroke: rgba(228, 226, 212, .35); stroke-width: 1; transition: fill 1.2s var(--ease), stroke .9s; }
.pillars-page[data-pillar] .pillar-star-core { fill: var(--pillar); stroke: #fff; }
.pillars-page-side { display: grid; gap: 28px; }
.pillars-page .pillar-row { transition: background-color .4s var(--ease), box-shadow .6s var(--ease); }
.pillars-page .pillar-row[aria-pressed="true"] { background: none; box-shadow: inset 2px 0 0 var(--pillar); }
.pillars-page .pillar-row[aria-pressed="true"] .pillar-name { color: #fff; }
.pillar-detail { padding-inline-start: 16px; border-inline-start: 2px solid var(--pillar); max-width: 60ch; min-height: 150px; transition: border-color .9s var(--ease); }
.pillar-detail.in { animation: pillar-detail-in .8s var(--ease) both; }
@keyframes pillar-detail-in { from { opacity: 0; transform: translateY(10px); } }
.pillar-detail-name { margin: 0 0 6px; font-size: clamp(30px, 3.6vw, 44px); color: var(--pillar); transition: color .9s var(--ease); }
.pillar-detail-tagline { margin: 0 0 10px; color: var(--ink); font-size: 17px; }
.pillar-detail-line { margin: 0; color: var(--ink-2); line-height: 1.55; }
.pillars-draft { margin-top: 40px; }
@media (max-width: 760px) {
  .pillars-page { padding-top: calc(var(--sa-t) + 140px); }
  .pillars-page-layout { grid-template-columns: minmax(0, 1fr); }
  .pillars-page-star { position: static; max-width: 280px; margin: 0 auto; }
  .pillars-page-glow { background: radial-gradient(ellipse 60% 30% at 50% 30%, color-mix(in srgb, var(--pillar) 24%, transparent), transparent 70%); }
}
@media (prefers-reduced-motion: reduce) { .pillar-ring { animation: none; } .pillar-point { animation: none; } .pillar-detail.in { animation: none; } }
html[dir="rtl"] .pillars-page .pillar-row[aria-pressed="true"] { box-shadow: inset -2px 0 0 var(--pillar); }
/* ?flow=1: URUK UI's colonnade at the Heart's address (uruk-ui/css/pillars.css, linked by ui/colonnade.js) in URUK UI's
   own tokens, mapped to the site's. The site's sections' row ends at 98 px on phones and tablets (under 900 px): below
   760 px URUK UI's own spacing already starts there (its I-VIII tabs at 98, the stone at 148, the pillars at 158), so
   only the notch's inset is added; from 760 to 899 px, where URUK UI has no tabs, the stone moves under the row */
body[data-flow] .temple { --gut: var(--gutter); --swing: cubic-bezier(.22, .8, .2, 1); --serif: var(--f-serif); --orange: var(--accent); --dim: rgba(228, 226, 212, .62); }
@media (min-width: 760px) and (max-width: 899px) {
  body[data-flow] .temple .ent { top: calc(var(--sa-t) + 116px); }
  body[data-flow] .temple .cols { top: calc(var(--sa-t) + 128px); }
}
@media (max-width: 759px) {
  body[data-flow] .temple .tabs8 { top: calc(var(--sa-t) + 98px); }
  body[data-flow] .temple .ent { top: calc(var(--sa-t) + 148px); }
  body[data-flow] .temple .cols { top: calc(var(--sa-t) + 158px); }
}
/* ?flow=1: a home's page is its model alone, across the page and as tall as the screen allows above the guide (Laith,
   20 Oct 2026: "Just keep the focus on the 3d model") */
body[data-flow] .page-home-model .page-inner { display: block; max-width: 1400px; }
body[data-flow] .page-home-model .home-view { position: relative; top: auto; margin-inline: auto; height: max(340px, calc(100dvh - var(--sa-t) - 340px)); } /* (it ends above the guide, open at the bottom on wide screens) */
@media (max-width: 899px) { body[data-flow] .page-home-model .home-view { height: max(320px, calc(100dvh - var(--sa-t) - 250px)); } }
/* ?numbers=1: a home's ways to look, numbered beside its model as URUK UI's list (homes-numbering): Roman numerals in the
   serif, the one in view large and white with its line and the orange mark, the others quiet */
.home-views { position: absolute; z-index: 3; inset-inline-start: clamp(16px, 3vw, 36px); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; pointer-events: none; }
.home-view-item { all: unset; pointer-events: auto; cursor: pointer; position: relative; display: grid; grid-template-columns: 3.2ch auto; align-items: baseline; column-gap: 16px; padding: 4px 0; color: rgba(228, 226, 212, .5); transition: color .35s var(--ease); }
.home-view-item:hover { color: rgba(228, 226, 212, .8); }
.home-view-item .hv-num { font-family: var(--f-serif); font-weight: 300; font-size: 28px; line-height: 1; text-align: end; transition: font-size .45s var(--ease); }
.home-view-item .hv-name { font-family: var(--f-serif); font-weight: 300; font-size: 18px; line-height: 1.1; transition: font-size .45s var(--ease); }
.home-view-item .hv-sub { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: max-height .45s var(--ease), opacity .45s var(--ease), margin .45s var(--ease); }
.home-view-item[aria-current="true"] { color: #fff; }
.home-view-item[aria-current="true"] .hv-num { font-size: 50px; }
.home-view-item[aria-current="true"] .hv-name { font-size: 28px; }
.home-view-item[aria-current="true"] .hv-sub { max-height: 3em; opacity: .78; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(254, 103, 34, .7); }
.home-view-item[aria-current="true"]::before { content: ""; position: absolute; inset-inline-start: -14px; top: 22px; border: 6px solid transparent; border-inline-start-color: var(--accent); }
.home-view-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.home-view.has-views .home-model-controls { display: none !important; } /* (as .still: the list holds its views) */
.home-view.has-views::after { content: ""; position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; width: min(46%, 420px); pointer-events: none; background: linear-gradient(to right, rgba(20, 18, 16, .72), rgba(20, 18, 16, 0)); border-start-start-radius: inherit; border-end-start-radius: inherit; } /* the words legible over a floor's light plan */
html[dir="rtl"] .home-view.has-views::after { background: linear-gradient(to left, rgba(20, 18, 16, .72), rgba(20, 18, 16, 0)); }
.home-views { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
@media (max-width: 759px) { .home-view.has-views::after { inset-block: auto 0; inset-inline: 0; width: auto; height: 76px; background: linear-gradient(to top, rgba(20, 18, 16, .78), rgba(20, 18, 16, 0)); border-radius: 0 0 20px 20px; } }
@media (max-width: 759px) {
  .home-views { top: auto; bottom: 14px; transform: none; inset-inline: 14px; display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .home-view-item { grid-template-columns: auto auto; column-gap: 8px; white-space: nowrap; }
  .home-view-item .hv-num { font-size: 18px; } .home-view-item .hv-name { font-size: 14px; }
  .home-view-item[aria-current="true"] .hv-num { font-size: 26px; } .home-view-item[aria-current="true"] .hv-name { font-size: 18px; }
  .home-view-item .hv-sub, .home-view-item[aria-current="true"] .hv-sub { display: none; }
  .home-view-item[aria-current="true"]::before { top: 10px; }
}
/* ---- with the flow, a home's page: the house alone, no card around it (Laith, 20 Oct 2026: "make sure the page is only
   focused on the house"), and no pill boxes: the floor bar is words, underlined in orange when in view ("No pill
   boxes") */
body[data-flow] .page-home-model .home-view { border-color: transparent; background: radial-gradient(ellipse at 50% 58%, rgba(228, 226, 212, .05), transparent 72%); }
body[data-flow] .page-home-model .home-model-controls { border-top: 0; background: none; }
body[data-flow] .floor-bar, body[data-flow] .home-model-controls .floor-bar { padding: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-flow] .floor-pill { border-radius: 0; background: none; color: rgba(228, 226, 212, .62); border-bottom: 1px solid transparent; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
body[data-flow] .floor-pill[aria-pressed="true"] { background: none; color: #fff; border-bottom-color: var(--accent); }
body[data-flow] .floor-arrow { border-radius: 0; }
/* ---- with the flow and ?numbers=1 (homes-numbering): the panel on the left, the house beside it. The ways to look on
   URUK UI's curve (the one in view at the edge, the others stepping out), then the facts in a light wash, no lines */
body[data-flow] .page-home-model.with-panel .page-inner { display: grid; grid-template-columns: minmax(290px, 360px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: center; max-width: 1480px; }
.home-panel { display: grid; gap: 16px; align-content: center; min-width: 0; }
.home-panel-kicker { margin: 0; }
.home-panel-title { margin: 0; font-size: clamp(30px, 2.8vw, 44px); line-height: 1.02; }
.home-views.on-curve { position: static; transform: none; inset: auto; gap: 2px; padding-block: 4px; pointer-events: auto; text-shadow: none; }
.home-views.on-curve .home-view-item { transform: translateX(calc(var(--curve-x, 0px) * var(--curve-dir, 1))); opacity: var(--curve-fade, 1); transition: transform .6s var(--ease), opacity .6s var(--ease), color .35s var(--ease); }
html[dir="rtl"] .home-views.on-curve .home-view-item { --curve-dir: -1; }
body[data-flow] .page-home-model.with-panel .home-view.has-views::after { display: none; } /* (the list is beside the house, not over it) */
.home-panel-facts { margin: 0; gap: 0; border-radius: 14px; background: rgba(36, 32, 29, .4); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home-panel-facts .fact { padding: 11px 16px; background: transparent; }
.home-panel-facts .fact dt { color: rgba(228, 226, 212, .84); font-size: 12.5px; letter-spacing: .04em; }
.home-panel-facts .fact dd { color: #fff; font-size: 20px; }
.home-panel-facts .fact a, .home-panel-facts .more-link { color: rgba(228, 226, 212, .9); }
@media (max-width: 899px) {
  /* phones and tablets: the name, the house, its ways to look, then its facts, down the page */
  body[data-flow] .page-home-model.with-panel .page-inner { display: flex; flex-direction: column; gap: 14px; }
  body[data-flow] .page-home-model.with-panel .home-panel { display: contents; }
  body[data-flow] .page-home-model.with-panel .home-panel-kicker { order: 0; }
  body[data-flow] .page-home-model.with-panel .home-panel-title { order: 1; font-size: 30px; }
  body[data-flow] .page-home-model.with-panel .home-view { order: 2; height: max(300px, 52dvh); }
  body[data-flow] .page-home-model.with-panel .home-panel-views { order: 3; min-width: 0; }
  body[data-flow] .page-home-model.with-panel .home-panel-facts { order: 4; margin-bottom: calc(var(--guide-gap, 16px) + 80px); }
  .home-views.on-curve { display: flex; overflow-x: auto; gap: 18px; padding-block: 4px 8px; scrollbar-width: none; }
  .home-views.on-curve .home-view-item { transform: none; opacity: 1; }
}
/* the model's page arriving (after the homes list's way in): the house grows into place, the panel comes in beside it */
body[data-flow] .page-home-model.with-panel .home-view { animation: home-arrive .8s var(--ease) both; }
body[data-flow] .page-home-model.with-panel .home-panel > * { animation: home-panel-in .7s var(--ease) both; animation-delay: .18s; }
@keyframes home-arrive { from { opacity: 0; transform: scale(.94); } }
@keyframes home-panel-in { from { opacity: 0; transform: translateX(calc(-18px * var(--curve-dir, 1))); } }
html[dir="rtl"] .home-panel > * { --curve-dir: -1; }
@media (prefers-reduced-motion: reduce) { body[data-flow] .page-home-model.with-panel .home-view, body[data-flow] .page-home-model.with-panel .home-panel > * { animation: none; } }
/* (the page's older two columns put the house first and every other child second: here the panel is first, the house
   second, at the column's full width) */
body[data-flow] .page-home-model.with-panel .home-panel { grid-column: 1; grid-row: 1; }
body[data-flow] .page-home-model.with-panel .home-view { grid-column: 2; grid-row: 1; width: 100%; margin: 0; position: relative; top: auto; align-self: center; }
@media (max-width: 899px) { body[data-flow] .page-home-model.with-panel .home-view { align-self: stretch; } }
@media (max-width: 899px) {
  body[data-flow] .page-home-model.with-panel .page-inner { align-items: stretch; text-align: start; }
  body[data-flow] .page-home-model.with-panel :is(.home-panel-views, .home-panel-facts, .home-view) { width: 100%; max-width: 100%; margin-inline: 0; }
  body[data-flow] .page-home-model.with-panel .home-views.on-curve { width: 100%; justify-content: flex-start; }
}
/* with the flow, the docked guide (Laith, 20 Oct 2026: "doesnt look like how we configured it. It doesnt animate and stuff
   and it seems to look too small"; "This should animate ands change to the icons that we had earlier"): larger; as
   configured, the sand shows while it talks and draws (on the 8 pillars, each pillar's sign), the logo at rest, breathing
   while there is something to read, the dot in the orange */
body[data-flow] .guide.orb.docked:not(.centre), body[data-flow] .guide.orb.docked:not(.centre) .guide-orb { width: 96px; height: 96px; } /* (opened, it takes the open guide's size) */
body[data-flow] .guide.orb.docked.news .guide-orb-mark svg { animation: orb-breathe 2.6s ease-in-out infinite; }
body[data-flow] .guide.orb.docked.news .guide-orb::after { top: 6px; inset-inline-end: 6px; width: 14px; height: 14px; background: var(--accent); box-shadow: 0 0 0 2px var(--ground), 0 0 10px rgba(254, 103, 34, .7); }
@keyframes orb-breathe { 50% { transform: scale(1.08) rotate(22.5deg); filter: drop-shadow(0 0 10px rgba(254, 103, 34, .55)); } }
@media (max-width: 760px) { body[data-flow] .guide.orb.docked:not(.centre), body[data-flow] .guide.orb.docked:not(.centre) .guide-orb { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { body[data-flow] .guide.orb.docked.news .guide-orb-mark svg { animation: none; } }