/* ============================================================
   MONTSIRKON — investment black design system
   Palette tokens are defined once here; each project page
   swaps them via <body data-theme="...">.
   ============================================================ */

:root {
  /* core — Zircon Blue (#00849D), the house colour, on its own shade ramp */
  --bg: #001a1f;
  --surface: #00282f;
  --text: #e6f3f5;
  --muted: #9fb9be;
  --hairline: #5a8189;
  --border: #00424f;
  --accent: #00849d;
  --accent-strong: #4bb8cf;

  /* header (consistent chrome across themes, recolored for legibility) */
  --header-bg: #001a1f;
  --header-text: #e6f3f5;
  --header-border: #00424f;

  /* per-project card accents (landing grid) */
  --c-bluesky: #94cee3;
  --c-hovn: #e9754f;
  --c-targad: #5fb8b0;
  --c-residence: #b08d57;

  --container: 72rem;
  --header-h: 4.5rem;
}

/* ---- project palettes ---------------------------------------- */

/* Blue Sky Cashmere — per bsc.mn brand: white ground, crest-logo navy
   #1B427B, sky blue #94CEE3 as secondary accent */
body[data-theme="bluesky"] {
  --bg: #fbfbfa;
  --surface: #f2f5f9;
  --text: #23303f;
  --muted: #5c6b7c;
  --hairline: #a8bacf;
  --border: #dde5ee;
  --accent: #94cee3;
  --accent-strong: #1b427b;
  --header-bg: #fbfbfa;
  --header-text: #23303f;
  --header-border: #dde5ee;
}

/* HOVN — canonical brand palette per Hovn_LogoGuide/Brand Canon v1.0:
   Deep Brown #422F22 · Cream #F7E1C9 · Apricot #E9754F (accent only) */
body[data-theme="hovn"] {
  --bg: #f7e1c9;
  --surface: #f1d6b4;
  --text: #422f22;
  --muted: #6a5a49;
  --hairline: #c9a87d;
  --border: #e3c9a2;
  --accent: #e9754f;
  --accent-strong: #9c4123;
  --header-bg: #f7e1c9;
  --header-text: #422f22;
  --header-border: #e3c9a2;
}

body[data-theme="targad"] {
  --bg: #0f3d3e;
  --surface: #134746;
  --text: #dededa;
  --muted: #a5b8b2;
  --hairline: #3f6a67;
  --border: #245654;
  --accent: #5fb8b0;
  --accent-strong: #5fb8b0;
  --accent-2: #d9c7a7;
  --header-bg: #001a1f;
  --header-text: #e6f3f5;
  --header-border: #00424f;
}

body[data-theme="residence"] {
  /* «Цэнгэл» хотхон landing: warm-cream editorial body, bronze accent
     carried over from the portfolio card (--c-residence). The hero is
     a full-bleed drawing under a dark scrim; header chrome stays
     investment black (see the residence component rules at the end
     of this file). */
  --bg: #faf8f4;
  --surface: #f2eee6;
  --text: #292522;
  --muted: #6d6559;
  --hairline: #b9ad9a;
  --border: #e5ddcd;
  --accent: #b08d57;
  --accent-strong: #8a6a3b;
  --header-bg: #001a1f;
  --header-text: #e6f3f5;
  --header-border: #00424f;
}

/* ---- reset / base --------------------------------------------- */

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

html {
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* stepping through the window — brief fade on page load */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: page-fade 0.55s ease both;
  }
}

@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p a,
.text-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.25em;
  transition: text-decoration-color 250ms ease, color 250ms ease;
}

p a:hover,
.text-link:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--accent-strong);
}

:focus-visible {
  outline: 1px solid var(--accent-strong);
  outline-offset: 4px;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: top 250ms ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ---- typography ------------------------------------------------ */

h1, h2, h3 {
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--text);
}

h1 { letter-spacing: 0.15em; }
h2 { letter-spacing: 0.15em; font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
h3 { letter-spacing: 0.15em; font-size: 1rem; }

.label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: var(--text);
}

.muted {
  color: var(--muted);
}

/* ---- layout ---------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section {
  padding-block: clamp(4.5rem, 12vh, 8.5rem);
}

.section-head {
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.section-head .label {
  margin-bottom: 1.25rem;
}

.section-head h2 {
  color: var(--accent-strong);
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  opacity: 0.45;
}

.grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- header ---------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease;
}

.site-header.is-scrolled {
  background: var(--header-bg);
  border-bottom-color: var(--header-border);
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--header-text);
  white-space: nowrap;
}

.wordmark span {
  color: var(--muted);
}

.wordmark-descriptor {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--header-text);
  opacity: 0.75;
  transition: opacity 250ms ease;
}

.site-nav a:hover {
  opacity: 1;
}

/* ---- language toggle ------------------------------------------- */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}

.lang-toggle .lang-sep {
  color: var(--muted);
  opacity: 0.6;
}

.lang-toggle button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.25rem 0.125rem;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}

.site-header .lang-toggle button {
  color: var(--header-text);
  opacity: 0.55;
}

.lang-toggle button:hover {
  opacity: 1;
}

.lang-toggle button.is-active,
.site-header .lang-toggle button.is-active {
  opacity: 1;
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
}

body:not([data-theme]) .site-header .lang-toggle button.is-active {
  color: var(--header-text);
  border-bottom-color: var(--hairline);
}

/* ---- hero (landing) -------------------------------------------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: calc(var(--header-h) + 2rem) clamp(1.25rem, 5vw, 3rem) 6rem;
}

.hero-label {
  margin-bottom: 2.5rem;
}

.hero-wordmark {
  font-size: clamp(1.75rem, 7vw, 4.25rem);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-indent: 0.35em; /* optically recenters tracked type */
  color: var(--text);
}

.hero-wordmark span {
  color: var(--muted);
}

.hero-rule {
  width: min(16rem, 40vw);
  margin: 2.5rem 0 2.25rem;
  border: 0;
  border-top: 1px solid var(--hairline);
  opacity: 0.5;
}

.hero-descriptor {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  text-indent: 0.45em;
  color: var(--muted);
  margin-bottom: 2.75rem;
}

.hero-tagline {
  max-width: 34rem;
  color: var(--text);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
}

.scroll-cue {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  color: var(--muted);
  font-size: 0.5625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-indent: 0.4em;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: var(--hairline);
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::after {
    animation: cue-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes cue-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.55); opacity: 0.25; }
}

/* ---- sub-page hero --------------------------------------------- */

.subhero {
  padding: calc(var(--header-h) + clamp(5rem, 14vh, 9rem)) 0 clamp(4rem, 10vh, 6.5rem);
}

.subhero .label {
  margin-bottom: 1.75rem;
  color: var(--accent-strong);
}

.subhero h1 {
  font-size: clamp(1.625rem, 5vw, 3.25rem);
  letter-spacing: 0.25em;
}

.subhero .lead {
  max-width: 38rem;
  margin-top: 2rem;
  color: var(--muted);
}

/* brand logo standing in for the page h1 (e.g. HOVN) */
.brand-h1 {
  line-height: 0;
}

.brand-h1 img {
  display: block;
  width: auto;
  height: clamp(3.75rem, 9vw, 6rem);
}

/* crest-shaped logos (taller than wordmarks) get more height */
.brand-h1 img.logo-tall {
  height: clamp(5rem, 11vw, 7.5rem);
}

.back-link {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 250ms ease;
}

.back-link:hover {
  color: var(--accent-strong);
}

/* ---- portfolio window grid ------------------------------------- */

.windows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .windows {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.window-card {
  --card-accent: var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.5rem;
  min-height: 18rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

@media (min-width: 768px) {
  .window-card {
    min-height: 22rem;
  }
}

.window-card:hover,
.window-card:focus-visible {
  border-color: var(--card-accent);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}

.window-card:focus-visible {
  outline-color: var(--card-accent);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.card-index {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.card-sector {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.card-name {
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  letter-spacing: 0.2em;
  color: var(--card-accent);
  transition: color 250ms ease;
}

.card-desc {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 24rem;
}

.card-open {
  margin-top: 1.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 250ms ease;
}

.window-card:hover .card-open,
.window-card:focus-visible .card-open {
  color: var(--card-accent);
}

/* ---- buttons ---------------------------------------------------- */

.btn {
  text-decoration: none; /* also when a .btn sits inside a <p>, which underlines links */
  display: inline-block;
  padding: 0.9375rem 2.5rem;
  border: 1px solid var(--accent-strong);
  color: var(--accent-strong);
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.btn:hover {
  background: var(--accent-strong);
  color: var(--bg);
}

/* ---- content blocks --------------------------------------------- */

.prose p + p {
  margin-top: 1.25rem;
}

.prose p {
  max-width: 44rem;
}

.meta-list {
  display: grid;
  gap: 1.75rem;
}

.meta-list dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.meta-list dd {
  font-size: 0.9375rem;
  color: var(--text);
}

.meta-list dd a:hover {
  color: var(--accent-strong);
}

.pillars {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.pillars li {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.pillars li .pillar-index {
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
}

/* stat rows (project pages) */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats.stats-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .stat {
    padding: 2.5rem 2rem 2.5rem 0;
  }
}

.stat-value {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
  line-height: 1.2;
}

.stat-label {
  margin-top: 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* feature / capability rows */
.feature-list {
  list-style: none;
  border-top: 1px solid var(--border);
}

.feature-list li {
  display: grid;
  gap: 0.375rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .feature-list li {
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
  }
}

.feature-list .feature-name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.feature-list .feature-desc {
  font-size: 0.9375rem;
  color: var(--text);
}

/* collection preview placeholders (HOVN) */
.collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .collection {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.collection-item {
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  transition: border-color 250ms ease;
}

.collection-item:hover {
  border-color: var(--accent);
}

.collection-item .item-index {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-bottom: auto;
}

.collection-item .item-name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}

.collection-item .item-note {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* timeline (Targad) */
.timeline {
  list-style: none;
  border-top: 1px solid var(--border);
}

.timeline li {
  display: grid;
  gap: 0.375rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .timeline li {
    grid-template-columns: 10rem 1fr;
    gap: 2rem;
  }
}

.timeline .timeline-date {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--accent-strong);
}

.timeline .timeline-desc {
  font-size: 0.9375rem;
}

/* CTA band */
.cta-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* footer supplies the closing hairline when the band sits directly above it */
main > .cta-band:last-child {
  border-bottom: 0;
}

.cta-band .container {
  padding-block: clamp(3.5rem, 9vh, 5.5rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .cta-band .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-band h2 {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
}

.cta-band p {
  margin-top: 0.75rem;
  color: var(--muted);
  max-width: 30rem;
}

/* ---- footer ------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(3rem, 8vh, 4.5rem) 0 2.5rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.footer-brand .wordmark {
  color: var(--text);
}

.footer-contact {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: normal;
  line-height: 2;
}

.footer-contact a:hover {
  color: var(--accent-strong);
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---- reveal on scroll -------------------------------------------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 600ms ease, transform 600ms ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .window-card,
  .window-card:hover,
  .window-card:focus-visible {
    transform: none;
  }
}

/* ================================================================
   Residence — «Цэнгэл» хотхон page components
   Scope: body[data-theme="residence"] only.
   ================================================================ */

/* header details that would otherwise read the light-body tokens
   (--muted / --accent-strong) go murky on the dark chrome — pin them */
body[data-theme="residence"] .site-header .wordmark span,
body[data-theme="residence"] .site-header .lang-toggle .lang-sep {
  color: #9a9a96;
}

body[data-theme="residence"] .site-header .lang-toggle button.is-active {
  color: #b08d57;
  border-bottom-color: #b08d57;
}

/* ---- hero: full-bleed drawing under a dark scrim ----------------- */

body[data-theme="residence"] .cine-hero {
  position: relative;
  isolation: isolate;
  min-height: 85vh;
  min-height: 85svh;
  display: flex;
  align-items: flex-end;
}

body[data-theme="residence"] .cine-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dark scrim: keeps the white-ground drawing cinematic and the
   overlaid type + transparent header legible; bottom lands on the
   site's investment black before handing over to the cream body */
body[data-theme="residence"] .cine-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 10, 0.82) 0%,
    rgba(10, 12, 10, 0.46) 30%,
    rgba(10, 12, 10, 0.4) 55%,
    rgba(0, 26, 31, 0.97) 100%
  );
}

body[data-theme="residence"] .cine-hero-content {
  width: 100%;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3.5rem, 9vh, 6rem);
}

body[data-theme="residence"] .cine-hero .back-link {
  color: #b9b4a6;
}

body[data-theme="residence"] .cine-hero .label {
  color: #b9b4a6;
}

body[data-theme="residence"] .cine-eyebrow {
  margin: 2rem 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #c49d64;
}

body[data-theme="residence"] .cine-hero h1 {
  font-size: clamp(1.75rem, 6vw, 3.75rem);
  letter-spacing: 0.18em;
  color: #f2efe7;
}

body[data-theme="residence"] .cine-tagline {
  margin-top: 1.75rem;
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ddd8ca;
}

body[data-theme="residence"] .cine-hero .lead {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: #c3beb0;
}

/* ---- archival plates --------------------------------------------- */
/* fixed light-mat colors so plates render identically on both grounds */

body[data-theme="residence"] .plate {
  margin: 0;
  background: #fdfcfa;
  border: 1px solid #e5ddcd;
  padding: clamp(0.625rem, 1.6vw, 1rem);
  box-shadow: 0 24px 48px -32px rgba(41, 37, 34, 0.4);
}

body[data-theme="residence"] .plate img {
  width: 100%;
  height: auto;
  border: 1px solid #b9ad9a;
}

body[data-theme="residence"] .plate-cap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #78706a;
}

body[data-theme="residence"] .plate-cap::before {
  content: "";
  flex: 0 0 1.25rem;
  height: 1px;
  background: #b08d57;
}

/* technical drawings sit on a faint drafting-grid mat */
body[data-theme="residence"] .plate--diagram {
  background-image:
    repeating-linear-gradient(0deg, rgba(176, 141, 87, 0.07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(176, 141, 87, 0.07) 0 1px, transparent 1px 12px);
}

/* ---- stats band under the hero ------------------------------------ */

body[data-theme="residence"] .stats-band {
  padding-block: clamp(2.75rem, 7vh, 4.5rem);
}

/* ---- editorial layout helpers ------------------------------------- */

body[data-theme="residence"] .grid-2 {
  align-items: start;
}

/* terracing figures presented as an annotated diagram row;
   column ratios chosen so both drawings land at equal height */
body[data-theme="residence"] .diagram-row {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (min-width: 768px) {
  body[data-theme="residence"] .diagram-row {
    grid-template-columns: 58fr 42fr;
    align-items: end;
  }
}

body[data-theme="residence"] .amenity-row {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (min-width: 768px) {
  body[data-theme="residence"] .amenity-row {
    grid-template-columns: 54fr 46fr;
    align-items: end;
  }
}

/* ---- floors (03) --------------------------------------------------- */

body[data-theme="residence"] .floors {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 768px) {
  body[data-theme="residence"] .floors {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

body[data-theme="residence"] .floor h3 {
  color: var(--accent-strong);
  margin-bottom: 1.25rem;
}

body[data-theme="residence"] .floor .plate {
  margin-bottom: 1.5rem;
}

body[data-theme="residence"] .room-list {
  list-style: none;
  border-top: 1px solid var(--border);
}

body[data-theme="residence"] .room-list li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

body[data-theme="residence"] .home-note {
  max-width: 44rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}

/* ---- numbered fact rows (04, 05) ------------------------------------ */

body[data-theme="residence"] .fact-list {
  list-style: none;
  border-top: 1px solid var(--border);
  counter-reset: fact;
}

body[data-theme="residence"] .fact-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

body[data-theme="residence"] .fact-list li::before {
  counter-increment: fact;
  content: counter(fact);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent-strong);
  padding-top: 0.3em;
}

/* ---- credit + CTA ---------------------------------------------------- */

body[data-theme="residence"] .credit-band {
  padding-block: clamp(3rem, 7vh, 4.5rem);
}

body[data-theme="residence"] .credit-text {
  max-width: 44rem;
  margin-top: 1.25rem;
}

body[data-theme="residence"] .credit-status {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

body[data-theme="residence"] .cta-tag {
  color: var(--accent-strong);
  margin-bottom: 1.25rem;
}

/* ---- mobile navigation (disclosure menu under the header, <768px) ---- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.75rem;
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--header-text);
}

.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  height: 1px;
  background: currentColor;
  transition: transform 250ms ease, top 250ms ease;
}

.nav-toggle::before { top: calc(50% - 4px); }
.nav-toggle::after { top: calc(50% + 4px); }

.nav-toggle[aria-expanded="true"]::before { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { top: 50%; transform: rotate(-45deg); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

@media (max-width: 767.98px) {
  .header-inner .lang-toggle { margin-left: auto; }

  .site-header.nav-open {
    background: var(--header-bg);
    border-bottom-color: var(--header-border);
  }

  .site-header.nav-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    padding: 0.25rem clamp(1.25rem, 5vw, 3rem) 1.25rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
  }

  .site-header.nav-open .site-nav a {
    display: block;
    padding: 0.9375rem 0;
    border-top: 1px solid var(--header-border);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle::before,
  .nav-toggle::after { transition: none; }
}

/* residence: gallery grid for the future photoreal renders (see the RENDERS slot in residence.html) */
body[data-theme="residence"] .gallery {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body[data-theme="residence"] .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- homepage: group structure diagram --------------------------- */

.group-map {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  text-align: center;
}

.group-root {
  position: relative;
  display: inline-block;
  padding-bottom: 1.75rem;
}

.group-root::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 1.75rem;
  background: var(--hairline);
  opacity: 0.6;
}

.group-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.group-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.group-branches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .group-branches { grid-template-columns: repeat(4, 1fr); }
}

.group-node {
  position: relative;
  padding: 1.75rem 0.75rem 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--text);
  transition: background 250ms ease;
}

.group-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1.25rem;
  background: var(--hairline);
  opacity: 0.6;
}

.group-node:hover,
.group-node:focus-visible { background: var(--surface); }

.group-node-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--card-accent);
}

.group-node-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- residence: visit steps, FAQ, mobile action bar, print ------- */

body[data-theme="residence"] .steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  body[data-theme="residence"] .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

body[data-theme="residence"] .steps li {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

body[data-theme="residence"] .steps h3 {
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}

body[data-theme="residence"] .steps p {
  font-size: 0.9375rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* mobile action bar (residence): slides in after the hero, hides at the CTA band */

.cta-bar { display: none; }

@media (max-width: 767.98px) {
  .cta-bar {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.75rem clamp(1.25rem, 5vw, 3rem);
    background: var(--header-bg);
    border-top: 1px solid var(--header-border);
    transform: translateY(100%);
    transition: transform 300ms ease;
  }

  .cta-bar.is-visible { transform: none; }

  .cta-bar .btn {
    width: 100%;
    text-align: center;
    color: #e6f3f5;
    border-color: #b08d57;
  }

  body[data-theme="residence"].has-cta-bar { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-bar { transition: none; }
}

@media print {
  body[data-theme="residence"] { background: #fff; color: #000; padding-bottom: 0; }
  body[data-theme="residence"] .site-header,
  body[data-theme="residence"] .cta-bar,
  body[data-theme="residence"] .lang-toggle,
  body[data-theme="residence"] .back-link,
  body[data-theme="residence"] .skip-link { display: none !important; }
  body[data-theme="residence"] .cine-hero { display: block; min-height: 0; }
  body[data-theme="residence"] .cine-hero-img { position: static; width: 100%; height: auto; }
  body[data-theme="residence"] .cine-hero::after { display: none; }
  body[data-theme="residence"] .cine-hero-content { padding: 1.5rem 0; }
  body[data-theme="residence"] .cine-hero h1,
  body[data-theme="residence"] .cine-tagline,
  body[data-theme="residence"] .cine-eyebrow,
  body[data-theme="residence"] .cine-hero .lead,
  body[data-theme="residence"] .cine-hero .label { color: #000 !important; }
  body[data-theme="residence"] .reveal { opacity: 1 !important; transform: none !important; }
  body[data-theme="residence"] .plate,
  body[data-theme="residence"] .fact-list li,
  body[data-theme="residence"] .steps li { break-inside: avoid; }
  body[data-theme="residence"] .plate { box-shadow: none; }
}