/* GULYAKA — unified cinematic color system (entire site) */

:root {
  --shadow-soft: 0 28px 64px rgba(42, 36, 30, 0.12);
  --shadow-deep: 0 40px 96px rgba(42, 36, 30, 0.16);

  /* Master palette — controlled depth, not flat beige */
  --ivory-warm: #f3ece2;
  --ivory: #ebe3d6;
  --stone-light: #ddd4c8;
  --stone: #d0c6b8;
  --stone-deep: #c3b8a9;
  --sand-warm: #d8cfc2;
  --sand: #cfc4b6;
  --olive-mist: #dfe3d9;
  --olive-wash: #c5cdc0;
  --olive: #4a5246;
  --olive-soft: #6a7264;
  --olive-deep: #3e4540;
  --olive-intimate: #525a4e;
  --charcoal: #2a2825;
  --charcoal-soft: #574f47;
  --warm-umber: #6b6358;
  --burgundy: #6b4550;
  --burgundy-whisper: rgba(107, 69, 80, 0.14);
  --gold: #9a8456;
  --gold-soft: #b39a6a;
  --silver: #857f78;
  --warm-dark: #454039;
  --text-ivory: #ede8df;
  --text-ivory-soft: rgba(237, 232, 223, 0.84);
  --text-on-dark: var(--text-ivory);

  /* Surface ladder — distinct temperatures */
  --surface-1: var(--ivory-warm);
  --surface-2: var(--stone-light);
  --surface-3: var(--stone);
  --surface-4: var(--olive-mist);
  --surface-5: var(--stone-deep);
  --surface-intimate: var(--sand-warm);
  --surface-deep: var(--olive-intimate);

  --line: rgba(42, 38, 32, 0.12);
  --line-faint: rgba(42, 38, 32, 0.07);
  --nav-glass: rgba(232, 225, 215, 0.9);
  --nav-glass-solid: rgba(224, 216, 206, 0.96);
  --nav-glass-dark: rgba(48, 44, 40, 0.92);

  --font-serif: "Bodoni Moda", "Times New Roman", serif;
  --font-sans: "Jost", system-ui, sans-serif;
  --ease-slow: cubic-bezier(0.22, 0.08, 0.24, 1);

  /* Legacy token map */
  --black: var(--charcoal);
  --ink: var(--charcoal);
  --muted: var(--charcoal-soft);
  --text: var(--charcoal);
  --text-soft: var(--charcoal-soft);
  --cream: var(--ivory-warm);
  --champagne: var(--stone-light);
  --dawn: var(--stone);
  --parchment: var(--ivory);
  --wine: var(--burgundy);
  --forest: var(--olive);
  --bg-deep: var(--stone);
  --bg-base: var(--ivory-warm);
  --bg-panel: var(--stone-deep);
  --bg-olive: var(--olive-mist);
  --bg-burgundy: var(--burgundy-whisper);
  --nav-bg-light: var(--nav-glass);
  --nav-bg-light-strong: var(--nav-glass-solid);
  --nav-bg-dark: var(--nav-glass-dark);
}

/* —— Global base —— */

body {
  color: var(--charcoal);
  background: var(--stone-light);
  font-weight: 300;
  letter-spacing: 0.03em;
  font-feature-settings: "kern" 1, "liga" 1;
}

.page-head__title,
.contact-intro__title,
.hero-lux__logotype {
  font-family: var(--font-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: 0.08em;
}

.page-head__sub,
.header__nav,
.lang-switch button,
.campaign__nav,
.campaign__chapter,
.contact-intro__eyebrow,
.location-card__tag,
.foot-lux {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.prose-block__lead,
.stage__words,
.collection-outro,
.contact-rooms__intro {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-optical-sizing: auto;
}

body::after {
  display: none;
}

main {
  background: var(--stone-light);
}

.edge-mark {
  color: var(--olive-soft);
  opacity: 0.32;
}

/* Photography: never graded or fogged */
.hero-lux__bg,
.maison-interlude__fig img,
.editorial-grade,
.stage__fig img,
.contact-intro__fig img,
.apt-hero__img,
.apt-fitting__frame img,
.ctt-hero__media img,
.campaign__frame img {
  filter: none;
}

.stage__fig::after,
.mosaic__cell::after {
  display: none;
}

.media--missing {
  background: var(--stone);
}

/* —— Typography —— */

.page-head__title,
.hero-lux__title {
  font-weight: 300;
  letter-spacing: 0.05em;
}

.page-head__sub,
.header__nav,
.lang-switch button,
.campaign__nav,
.foot-lux {
  font-weight: 400;
  letter-spacing: 0.18em;
}

.prose-block__lead,
.stage__words,
.collection-outro {
  font-weight: 300;
}

/* Readable text on all light surfaces */
.page-head__title,
.prose-block__lead,
.prose-block p,
.contact-intro__title,
.contact-lux__intro,
.location-card__name {
  color: var(--charcoal);
}

.page-head__sub,
.prose-block p,
.contact-lux__meta p,
.location-card__text,
.foot-lux {
  color: var(--charcoal-soft);
}

/* —— Tone-aware typography —— */

.tone-light,
.page-head,
.prose-block,
.page-collection .stage,
.page-contact .contact-intro {
  color: var(--charcoal);
}

.tone-dark,
.collection-outro {
  color: var(--text-ivory-soft);
}

.tone-light .page-head__title,
.tone-light .prose-block__lead,
.tone-light .contact-intro__title {
  color: var(--charcoal);
}

.tone-dark p,
.collection-outro p {
  color: var(--text-ivory-soft);
}

.collection-outro a {
  color: var(--gold-soft);
}

.pillar__title {
  color: var(--gold-soft);
}

.pillar__text {
  color: var(--text-ivory-soft);
}

/* —— Header & logo contrast system —— */

.header {
  background: var(--nav-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-faint);
  color: var(--charcoal);
  transition:
    background 0.4s var(--ease-slow),
    color 0.35s var(--ease-slow),
    border-color 0.35s ease;
}

.header--transparent {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header--transparent.header--scrolled {
  background: var(--nav-glass-solid);
  border-bottom-color: var(--line-faint);
}

/* Menu open: white panel + editorial photo (all pages, incl. index top) */
body.nav-open .header {
  background: rgba(252, 249, 244, 0.99);
  color: var(--charcoal);
  backdrop-filter: blur(16px);
  border-bottom: none !important;
}

body.nav-open .header__nav,
body.nav-open .header__nav.is-open {
  border-top: none !important;
}

body.nav-open .header__logo-img--dark {
  display: block !important;
}

body.nav-open .header__logo-img--light {
  display: none !important;
}

body.nav-open .header__menu span {
  background: var(--charcoal);
}

body.nav-open .header__sound {
  color: var(--charcoal);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.5);
}

body.nav-open .lang-switch {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.5);
}

body.nav-open .lang-switch button {
  color: var(--charcoal-soft);
}

body.nav-open .lang-switch button[aria-pressed="true"] {
  color: var(--burgundy);
  border-color: rgba(107, 69, 80, 0.28);
  background: rgba(168, 145, 88, 0.12);
}

/* Navbar: always official dark green mark */
.header__logo-img--dark {
  display: block;
}

.header__logo-img--light {
  display: none !important;
}

.page-home .header--transparent .header__logo-img--dark {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.28));
}

.header__menu span {
  background: var(--charcoal);
  transition: background 0.35s ease;
}

.lang-switch {
  border-radius: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.28);
  padding: 0.15rem;
}

.lang-switch button {
  border-radius: 0;
  color: var(--charcoal-soft);
  border: 1px solid transparent;
}

.lang-switch button[aria-pressed="true"] {
  color: var(--burgundy);
  border-color: rgba(107, 69, 80, 0.28);
  background: rgba(168, 145, 88, 0.12);
}

/* Over dark page bands: keep navbar light so the green logo stays visible */
.header--on-dark:not(.header--transparent),
.header--invert:not(.header--transparent) {
  background: var(--nav-glass-solid) !important;
  color: var(--charcoal);
  border-bottom-color: var(--line-faint);
}

.header--on-dark:not(.header--transparent) .header__menu span,
.header--invert:not(.header--transparent) .header__menu span {
  background: var(--charcoal);
}

.header--on-dark:not(.header--transparent) .lang-switch,
.header--invert:not(.header--transparent) .lang-switch {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.35);
}

.header--on-dark:not(.header--transparent) .lang-switch button,
.header--invert:not(.header--transparent) .lang-switch button {
  color: var(--charcoal-soft);
}

.header--on-dark:not(.header--transparent) .lang-switch button[aria-pressed="true"],
.header--invert:not(.header--transparent) .lang-switch button[aria-pressed="true"] {
  color: var(--burgundy);
  border-color: rgba(107, 69, 80, 0.28);
  background: rgba(168, 145, 88, 0.12);
}

/* Homepage hero (menu closed): beige mark on photography */
.page-home:not(.nav-open) .header--maison.header--transparent.header--on-dark .header__logo-img--dark,
.page-home:not(.nav-open) .header--maison.header--transparent.header--invert .header__logo-img--dark,
.page-house:not(.nav-open) .header--maison.header--transparent.header--on-dark .header__logo-img--dark,
.page-house:not(.nav-open) .header--maison.header--transparent.header--invert .header__logo-img--dark {
  display: none !important;
}

.page-home:not(.nav-open) .header--maison.header--transparent.header--on-dark .header__logo-img--light,
.page-home:not(.nav-open) .header--maison.header--transparent.header--invert .header__logo-img--light,
.page-house:not(.nav-open) .header--maison.header--transparent.header--on-dark .header__logo-img--light,
.page-house:not(.nav-open) .header--maison.header--transparent.header--invert .header__logo-img--light {
  display: block !important;
}

.header--on-dark.header--transparent.header--scrolled,
.header--invert.header--transparent.header--scrolled {
  background: var(--nav-glass-solid);
}

.header--transparent.header--scrolled:not(.header--on-dark):not(.header--invert) {
  color: var(--charcoal);
}

.header--transparent.header--scrolled:not(.header--on-dark):not(.header--invert) .header__logo-img--dark {
  filter: none;
}

/* —— Menu overlay: white + editorial photograph —— */
body.nav-open .header__nav.is-open {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 1;
  background-color: rgba(252, 249, 244, 0.52);
  background-image:
    linear-gradient(
      180deg,
      rgba(252, 249, 244, 0.9) 0%,
      rgba(252, 249, 244, 0.8) 26%,
      rgba(252, 249, 244, 0.62) 48%,
      rgba(252, 249, 244, 0.48) 68%,
      rgba(252, 249, 244, 0.65) 86%,
      rgba(252, 249, 244, 0.82) 100%
    ),
    url("../images/editorial-menu-portrait.webp");
  background-position: center top, center bottom;
  background-size: auto, cover;
  background-repeat: no-repeat;
}

body.nav-open .header__nav.is-open a {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  color: var(--charcoal);
  border-bottom: none;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  padding: 0.95rem 0;
  text-shadow:
    0 0 12px rgba(252, 249, 244, 0.88),
    0 1px 2px rgba(252, 249, 244, 0.75);
}

.header__nav.is-open a {
  border-bottom: none;
}

.header__nav-aside {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: clamp(2.25rem, 7vh, 3.25rem) 0 clamp(2rem, 5vh, 2.5rem);
  border-top: none;
}

body.nav-open .header__nav-aside__line {
  margin: 0 0 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.22em;
  line-height: 1.5;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(252, 249, 244, 0.85),
    0 1px 2px rgba(252, 249, 244, 0.7);
}

body.nav-open .header__nav-aside__cta {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid rgba(107, 69, 80, 0.35);
}

body.nav-open .header__nav-aside__cta:hover {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

@media (max-width: 900px) {
  body.nav-open .header__nav.is-open a {
    font-size: 0.72rem;
    padding: 1.05rem 0;
  }

  body.nav-open .header__nav-aside__line {
    font-size: 0.58rem;
  }

  body.nav-open .header__nav-aside__cta {
    font-size: 0.62rem;
  }
}

@media (min-width: 901px) {
  .header__nav-aside {
    display: none;
  }
}

@media (max-width: 900px) {
  .header__nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(100dvh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }

  body.nav-open .header__nav.is-open {
    isolation: isolate;
  }
}

/* —— Hero (no overlays) —— */

.hero-lux--image::before,
.hero-lux--image::after {
  display: none;
  content: none;
}

.hero-lux__rail {
  display: none;
}

/* —— Homepage: photo → intimate stone → deeper foot —— */

.page-home main {
  background: linear-gradient(180deg, var(--stone) 0%, var(--ivory-warm) 38%, var(--stone-light) 100%);
}

.page-home .campaign {
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(2.25rem, 5vw, 3.5rem);
  background: linear-gradient(180deg, var(--surface-intimate) 0%, var(--surface-3) 55%, var(--surface-5) 100%);
}

.campaign__field {
  position: relative;
  max-width: var(--max, 1180px);
  margin: 0 auto;
  min-height: clamp(380px, 58vh, 640px);
}

.campaign__frame {
  margin: 0;
  line-height: 0;
}

.campaign__frame img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--shadow-deep);
}

.campaign__frame--a {
  position: relative;
  z-index: 1;
  width: min(74%, 640px);
}

.campaign__frame--b {
  position: absolute;
  right: clamp(8%, 5vw, 14%);
  bottom: 6%;
  z-index: 2;
  width: min(50%, 460px);
  transform: translateY(4%);
}

.campaign__frame--c {
  position: absolute;
  left: clamp(4%, 3vw, 8%);
  bottom: -2%;
  z-index: 3;
  width: min(42%, 380px);
  transform: translateY(18%);
}

.campaign__chapter {
  max-width: var(--max, 1180px);
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  padding: 0 clamp(1rem, 4vw, 2rem);
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--warm-umber);
}

/* Hero → breath → three-chapter campaign */
.maison-interlude {
  margin: 0;
  padding: 0;
  line-height: 0;
  background: var(--warm-dark);
}

.maison-interlude__fig {
  margin: 0;
  max-height: min(42vh, 420px);
  overflow: hidden;
}

.maison-interlude__fig img {
  width: 100%;
  height: min(42vh, 420px);
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: none;
  opacity: 0.94;
}

.campaign__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-top: clamp(2.25rem, 6vw, 3.5rem);
  font-size: 0.5625rem;
  text-transform: uppercase;
}

.campaign__nav a {
  border-bottom: 1px solid transparent;
}

.campaign__nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.55;
}

@media (max-width: 720px) {
  .campaign__field {
    min-height: auto;
    padding-bottom: 2rem;
  }

  .campaign__frame--a {
    width: 88%;
  }

  .campaign__frame--b {
    position: relative;
    right: auto;
    width: 78%;
    margin: -14% 0 0 auto;
    transform: none;
  }

  .campaign__frame--c {
    position: relative;
    left: auto;
    width: 68%;
    margin: -12% auto 0 0;
    transform: none;
  }

  .maison-interlude__fig {
    max-height: min(36vh, 320px);
  }

  .maison-interlude__fig img {
    height: min(36vh, 320px);
  }
}

.page-home .foot-lux {
  background: var(--surface-5);
  border-top-color: var(--line);
}

/* —— Inner pages: editorial pacing & tonal hierarchy —— */

.page-head {
  padding-top: calc(var(--header-h) + clamp(1.75rem, 5vw, 2.75rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-faint);
  text-align: left;
}

.page-head__title {
  color: var(--charcoal);
}

.page-head__sub {
  color: var(--charcoal-soft);
}

.page-collection .page-head {
  text-align: center;
  background: linear-gradient(180deg, var(--ivory-warm) 0%, var(--stone-light) 100%);
}

.page-collection .stage--noir {
  background: linear-gradient(165deg, var(--stone) 0%, var(--stone-light) 100%);
  color: var(--charcoal);
}

.page-collection .stage--dawn {
  background: linear-gradient(165deg, var(--olive-mist) 0%, var(--ivory) 100%);
  color: var(--charcoal);
}

.page-collection .stage--heritage {
  background: linear-gradient(160deg, var(--sand-warm) 0%, var(--stone) 50%, var(--olive-wash) 100%);
}

.page-collection .stage__grid {
  padding: clamp(1.5rem, 4.5vw, 3rem) clamp(1rem, 4vw, 2rem);
  min-height: min(72vh, 780px);
  gap: clamp(1rem, 3vw, 2.25rem);
}

.page-collection .stage__ix {
  color: var(--gold);
  opacity: 0.72;
}

.page-collection .stage__words,
.page-collection .stage--noir .stage__words,
.page-collection .stage--noir .stage__copy--light .stage__words {
  color: var(--charcoal);
}

.page-collection .stage[data-watermark]::before {
  color: rgba(107, 69, 80, 0.05);
}

.page-collection .stage--heritage .stage__ix {
  color: var(--burgundy);
  opacity: 0.88;
}

.page-collection .stage--heritage[data-watermark]::before {
  color: rgba(107, 69, 80, 0.11);
}

.page-collection .stage__fig--framed,
.page-collection .stage__fig--tilt,
.page-collection .stage__fig--float {
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.page-collection .stage__fig img {
  border: none;
  box-shadow: var(--shadow-soft);
}

/* Legacy collection-outro — replaced by .page-house .house-fittings */

/* Shared blocks */
.prose-block {
  padding: clamp(2.25rem, 7vw, 4rem) clamp(1rem, 4vw, 2rem);
  background: var(--surface-intimate);
}

.prose-block--muted {
  background: linear-gradient(180deg, var(--stone-deep) 0%, var(--stone-light) 100%);
}

.prose-block--muted p,
.prose-block--muted .prose-block__lead {
  color: var(--charcoal-soft);
}

.prose-block__cta a {
  color: var(--burgundy);
}

.foot-lux {
  background: var(--surface-5);
  border-top: 1px solid var(--line);
  color: var(--charcoal-soft);
}

.foot-lux a:hover {
  color: var(--charcoal);
  border-bottom-color: var(--burgundy);
}

a:hover {
  border-bottom-color: var(--gold);
}

.btn-lux {
  border-radius: 0;
  color: var(--charcoal);
  border: 1px solid var(--line);
  background: transparent;
}

.btn-lux:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.25);
}

.skip-link {
  background: var(--stone);
  color: var(--charcoal);
}

.campaign__nav a {
  color: var(--olive);
}

.campaign__nav a:hover {
  color: var(--burgundy);
  border-bottom-color: var(--gold);
}

.campaign__nav-dot {
  background: var(--silver);
}
