/* =========================================================================
   Maison Orivaux — parent-company site (2026-10).
   Palette and typography carried over from the original Maison Orivaux design
   (see archive/leather-concept-2026-07/). The Lifeabulous section uses that
   brand's own colours and wordmark, scoped to the section.
   ========================================================================= */

:root {
  --ivory:      #F5F1E8;
  --porcelain:  #FBFAF7;
  --ink:        #0B0B0B;
  --charcoal:   #222222;
  --hero-ink:   #040404;
  --gold:       #B39A65;   /* brand brass - rules and marks on dark grounds */
  --gold-soft:  #C7AF7E;   /* brass lifted for small text on dark grounds */
  --gold-ink:   #856434;   /* brass deepened for small text on light grounds (WCAG AA) */
  --muted:      rgba(34, 34, 34, .72);
  --muted-dark: rgba(245, 241, 232, .74);
  --rule-light: rgba(245, 241, 232, .18);

  /* Lifeabulous (scoped use only) */
  --lfb-black:  #0c0b0a;
  --lfb-ivory:  #f5efe4;
  --lfb-gold:   #c9ab72;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bodoni: "Bodoni Moda", "Didot", Georgia, serif;

  --gutter: clamp(20px, 5vw, 56px);
  --max:    1200px;
  --space:  clamp(72px, 11vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--charcoal);
  font: 300 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }

.shell { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.shell--narrow { max-width: 760px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ivory); color: var(--ink); padding: 10px 16px; font-size: .875rem;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- header ---- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  padding-block: clamp(18px, 3vw, 28px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark {
  font: 500 .8125rem/1 var(--serif);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--ivory); text-decoration: none; white-space: nowrap;
}
.site-nav { display: flex; gap: clamp(18px, 3vw, 36px); }
.site-nav a {
  font: 400 .6875rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-dark); text-decoration: none; padding-block: 8px;
}
.site-nav a:hover { color: var(--gold-soft); }
@media (max-width: 559px) { .site-nav { display: none; } }

/* ---- hero ---- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--hero-ink); color: var(--ivory);
  min-height: min(100svh, 980px);
  display: grid; place-items: center;
  padding-block: clamp(110px, 16vw, 160px) clamp(80px, 12vw, 120px);
  text-align: center;
}
.hero__scene {
  position: absolute; inset: 0; z-index: -2;
  background: url("images/maison-chateau.jpg") center 40% / cover no-repeat;
  background-image: image-set(url("images/maison-chateau.webp") type("image/webp"),
                              url("images/maison-chateau.jpg") type("image/jpeg"));
  filter: blur(3px) saturate(.75) brightness(.42);
  transform: scale(1.08);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(4, 4, 4, .82), rgba(4, 4, 4, .35) 70%, transparent),
    linear-gradient(to bottom, rgba(4, 4, 4, .75), rgba(4, 4, 4, .15) 35%, rgba(4, 4, 4, .2) 65%, rgba(4, 4, 4, .9));
}
.hero__inner { display: grid; justify-items: center; }
@media (max-width: 559px) {
  .hero { min-height: 0; padding-block: 128px 96px; }   /* size to content on phones: no empty band */
}
.hero__mark { width: clamp(150px, 26vw, 260px); }
.hero__mark img {
  width: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
}
.hero__title { margin-top: clamp(14px, 2.4vw, 26px); display: grid; justify-items: center; gap: 14px; }
.hero__name {
  font: 400 clamp(2rem, 6.2vw, 4.25rem)/1 var(--serif);
  letter-spacing: .2em; text-transform: uppercase; margin-right: -.2em;   /* optical centring of tracking */
  color: var(--gold-soft);
}
.hero__entity {
  font: 400 .75rem/1 var(--sans); letter-spacing: .4em; margin-right: -.4em;
  color: var(--muted-dark);
  display: inline-flex; align-items: center; gap: 16px;
}
.hero__entity::before, .hero__entity::after { content: ""; width: 40px; height: 1px; background: var(--gold); opacity: .7; }
.hero__lede {
  margin-top: clamp(22px, 3vw, 32px); max-width: 30ch;
  font: 300 italic clamp(1.25rem, 2.4vw, 1.75rem)/1.4 var(--serif);
  color: var(--ivory);
}

/* ---- sections ---- */
.section { padding-block: var(--space); }
.section--ivory { background: var(--ivory); }
.section--porcelain { background: var(--porcelain); }
.contact { padding-block: clamp(64px, 8vw, 104px); }
.section--ink { background: var(--lfb-black); color: var(--lfb-ivory); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .8; }
.eyebrow--light { color: var(--lfb-gold); }
.display {
  margin-top: 22px;
  font: 400 clamp(1.9rem, 4.4vw, 3.1rem)/1.12 var(--serif);
  color: var(--ink); max-width: 20ch;
}
.display--sm { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.body-copy { margin-top: 24px; max-width: 58ch; font-size: clamp(1rem, 1.2vw, 1.0625rem); color: var(--muted); }
.body-copy--light { color: rgba(245, 239, 228, .76); }
.link { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 5px; font-weight: 400; }
.link:hover { color: var(--gold-ink); }

/* ---- Lifeabulous ---- */
.lifeabulous__inner {
  display: grid; gap: clamp(32px, 5vw, 72px); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .lifeabulous__inner { grid-template-columns: auto 1fr; } }
.lifeabulous__mark { width: clamp(120px, 18vw, 220px); }
.lfb-wordmark {
  margin-top: 22px; font: 500 clamp(1.9rem, 5vw, 3.4rem)/1 var(--bodoni);
  letter-spacing: .12em; text-transform: uppercase;
}
.lfb-wordmark__lead { color: var(--lfb-ivory); }
.lfb-wordmark__tail { color: var(--lfb-gold); }
.lfb-wordmark sup { font-size: .32em; vertical-align: super; margin-left: .15em; color: var(--lfb-gold); letter-spacing: 0; }
.lifeabulous__tagline {
  margin-top: 18px; font: 300 italic clamp(1.25rem, 2.2vw, 1.6rem)/1.35 var(--serif); color: var(--lfb-ivory);
}
.button {
  display: inline-block; margin-top: 32px; padding: 15px 26px;
  border: 1px solid rgba(201, 171, 114, .65); color: var(--lfb-ivory);
  font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s, color .2s;
}
.button:hover { border-color: var(--lfb-gold); color: #fff; }

/* ---- footer ---- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding-block: clamp(44px, 6vw, 64px); border-top: 1px solid var(--rule-light); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between; }
.wordmark--footer { color: var(--gold-soft); }
.site-footer__legal { font-size: .8125rem; line-height: 1.7; }