/* =============================================================================
   Ben.M — Maison (The House)                       assets/css/pages/maison.css
   -----------------------------------------------------------------------------
   Page styles for maison.html. Composes main.css tokens, slots and components;
   every class here is page-prefixed (.maison-*). Logical properties only —
   anything physical is mirrored explicitly for RTL.

     00  Hero — hides under a green veil      04  Principles
     01  Story — three chapters + seams       05  Care
     02  Craft — stacked / pinned timeline    06  Two doors
     03  Leathers & materials + colours       07  Kurdish (ckb) tuning
   ========================================================================== */


/* =============================================================================
   00  Hero
   ========================================================================== */
.maison-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  min-block-size: 100vh;
  min-block-size: 100svh;
  background-color: var(--c-green-950);
}
.maison-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--c-green-950);
}
.maison-hero__media img { object-position: 50% 58%; filter: brightness(1.32) contrast(1.06); }
/* the deep green tint, laid over the photo like a lacquer */
.maison-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-green-600);
  mix-blend-mode: multiply;
  opacity: .62;
  pointer-events: none;
}
.maison-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 74% 36%, color-mix(in srgb, var(--c-gold-300) 10%, transparent) 0%, transparent 60%),
    radial-gradient(100% 80% at 70% 34%, transparent 0%, color-mix(in srgb, var(--c-green-950) 30%, transparent) 64%, color-mix(in srgb, var(--c-green-950) 70%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-green-950) 66%, transparent) 0%,
      color-mix(in srgb, var(--c-green-950) 6%, transparent) 28%,
      color-mix(in srgb, var(--c-green-950) 24%, transparent) 56%,
      color-mix(in srgb, var(--c-green-950) 86%, transparent) 86%,
      var(--c-green-950) 100%);
}
.maison-hero__shade {                      /* deepens as the hero scrolls away (maison.js) */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-green-950);
  opacity: 0;
  pointer-events: none;
}

.maison-hero__inner {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: inherit;
  padding-block: calc(var(--header-h) + clamp(18px, 4svh, 44px)) clamp(22px, 4svh, 44px);
}
.maison-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.maison-hero__caption { color: var(--fg-muted); }

.maison-hero__headline {
  align-self: end;
  padding-block: clamp(32px, 6svh, 72px) clamp(26px, 4.4svh, 52px);
}
.maison-hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(4.6rem, min(12.6vw, 21svh), 13.5rem);
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--fg-strong);
}
.maison-hero__line { display: block; }
.maison-hero__line--2 { padding-inline-start: .92em; }
.maison-hero__title em,
.maison-hero__brand {                      /* "Ben.M" — italic Cormorant in both languages */
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.035em;
  color: var(--c-gold-400);
}
.maison-hero__brand { display: inline-block; direction: ltr; }
.maison-hero__of {                         /* the small italic "of" — an editorial aside */
  display: inline-block;
  vertical-align: top;
  margin-block-start: .5em;
  margin-inline-end: .14em;
  font-size: .3em;
  font-style: italic;
  letter-spacing: 0;
  color: var(--c-sage-300);
}

.maison-hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: 26px;
  align-items: end;
}
.maison-hero__rule { grid-column: 1 / -1; }
.maison-hero__lead {
  grid-column: 1 / -1;
  max-inline-size: 31em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
  text-wrap: pretty;
}
.maison-hero__index { grid-column: 1 / -1; }
.maison-hero__index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.maison-hero__index-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 12px;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
  text-decoration: none;
  transition: color .4s;
}
.maison-hero__index-link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  block-size: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
[dir="rtl"] .maison-hero__index-link::after { transform-origin: right center; }
.maison-hero__index-link:hover { color: var(--accent-soft); }
.maison-hero__index-link:hover::after { transform: scaleX(1); }
.maison-hero__index-num {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
.maison-hero__cue { display: none; }

@media (max-width: 699.98px) {
  .maison-hero__caption { display: none; }
}
@media (min-width: 900px) {
  .maison-hero__lead { grid-column: 1 / span 5; }
  .maison-hero__index { grid-column: 6 / span 6; }
  .maison-hero__index-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .maison-hero__index-link { flex-direction: column; gap: 8px; }
  .maison-hero__cue {
    grid-column: 12 / span 1;
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-micro);
    text-transform: var(--tt-ui);
    color: var(--fg-muted);
    text-decoration: none;
  }
  .maison-hero__cue:hover { color: var(--fg-strong); }
  .maison-hero__cue-line {
    position: relative;
    inline-size: 1px;
    block-size: 64px;
    overflow: hidden;
    background: var(--line);
  }
  .maison-hero__cue-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateY(-100%);
    animation: maison-cue 2.4s var(--ease-inout) infinite;
  }
}
@keyframes maison-cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* intro: the photo surfaces from the green and settles (plays when ready) */
@media (prefers-reduced-motion: no-preference) {
  html.js .maison-hero__media { animation: maison-hero-in 2.8s var(--ease-out) .1s both; }
  html.js:not([data-ready]) .maison-hero__media { animation-play-state: paused; }
  html.js:not(.benm-booted) .maison-hero__media { animation-play-state: running; }
}
@keyframes maison-hero-in {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: none; }
}


/* =============================================================================
   01  Story — intro + three chapters, sewn together by stitched seams
   ========================================================================== */
.maison-story { overflow: clip; }
.maison-story__head {
  display: grid;
  gap: 26px;
  margin-block-end: clamp(80px, 11vw, 176px);
}
.maison-story__title { max-inline-size: 12em; }
.maison-story__lead {
  max-inline-size: 31em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
  text-wrap: pretty;
}
@media (min-width: 1000px) {
  .maison-story__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .maison-story__head .c-eyebrow { grid-column: 1 / -1; }
  .maison-story__title { grid-column: 1 / span 7; }
  .maison-story__lead { grid-column: 9 / span 4; padding-block-end: .5em; }
}

.maison-chapters { display: grid; gap: clamp(64px, 9vw, 140px); }
.maison-chapter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.maison-chapter__figure { grid-column: 1 / -1; margin: 0; min-inline-size: 0; }
.maison-chapter__body {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
}
.maison-chapter__media { aspect-ratio: 4 / 3; background-color: var(--c-paper); }
.maison-chapter--1 .maison-chapter__media img { object-position: 60% 50%; }
.maison-chapter--2 .maison-chapter__media { aspect-ratio: 3 / 2; }
.maison-chapter--2 .maison-chapter__media img { object-position: 36% 40%; }
.maison-chapter--3 .maison-chapter__media { aspect-ratio: 4 / 5; }
.maison-chapter--3 .maison-chapter__media img { object-position: 50% 46%; }
.maison-chapter__caption { margin-block-start: 16px; }

/* the big numeral sits behind the chapter title, like a blind-stamped mark */
.maison-chapter__numeral {
  position: absolute;
  z-index: -1;
  inset-block-start: clamp(40px, 4vw, 64px);
  inset-inline-start: -.06em;
  font-family: var(--f-serif-latin);
  font-weight: 300;
  font-size: clamp(8.4rem, 15.5vw, 17.5rem);
  line-height: .76;
  letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-soft);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
.maison-chapter__label { margin-block-end: clamp(64px, 7.4vw, 118px); }
.maison-chapter__title {
  max-inline-size: 9em;
  margin-block-end: clamp(18px, 2vw, 28px);
  font-size: clamp(2.3rem, 4.2vw, 4.4rem);
  line-height: 1;
}
.maison-chapter__text {
  max-inline-size: 30em;
  color: var(--fg);
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .maison-chapter--1 .maison-chapter__figure { grid-column: 1 / span 7; }
  .maison-chapter--1 .maison-chapter__body { grid-column: 9 / span 4; }
  .maison-chapter--2 .maison-chapter__figure { grid-column: 6 / span 7; grid-row: 1; }
  .maison-chapter--2 .maison-chapter__body { grid-column: 1 / span 4; grid-row: 1; }
  .maison-chapter--3 .maison-chapter__figure { grid-column: 2 / span 5; }
  .maison-chapter--3 .maison-chapter__body { grid-column: 8 / span 5; }
  /* the numeral steps over the gutter toward its picture */
  .maison-chapter--1 .maison-chapter__numeral,
  .maison-chapter--3 .maison-chapter__numeral { margin-inline-start: -.32em; }
}

/* a stitched seam between chapters: dashes like a saddle stitch */
.maison-seam {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--accent-soft);
}
.maison-seam__line {
  flex: 1;
  block-size: 1px;
  background-image: linear-gradient(90deg, currentColor 0 58%, transparent 58% 100%);
  background-size: 12px 1px;
  opacity: .85;
}
.maison-seam__knot { background: currentColor; }


/* =============================================================================
   02  Craft — stacked by default; .is-pinned (maison.js, ≥1024 px with motion)
   turns the track into a pinned horizontal timeline
   ========================================================================== */
.maison-anchor { display: block; position: relative; block-size: 0; }
.maison-anchor.is-pinned { inset-block-start: var(--header-h); }

.maison-craft {
  position: relative;
  overflow: clip;
  padding-block: var(--space-section);
}
.maison-craft__pin { position: relative; }
.maison-craft__track {
  position: relative;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.maison-craft__intro {
  display: grid;
  gap: 22px;
  justify-items: start;
  max-inline-size: 44rem;
  margin-block-end: clamp(72px, 9vw, 120px);
}
.maison-craft__title { max-inline-size: 10em; }
.maison-craft__lead { max-inline-size: 30em; color: var(--fg); text-wrap: pretty; }
.maison-craft__hint { display: none; }

.maison-craft__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(88px, 12vw, 120px) var(--grid-gap);
}
.maison-step { position: relative; min-inline-size: 0; }
.maison-step__media { aspect-ratio: 4 / 5; background-color: var(--c-green-800); }
/* craft/hides.jpg carries a small violet speck near its top edge (≈10 % down): the crop is anchored
   to the bottom so it stays out of frame (pinned: the 1.2 zoom; stacked: a light 1.14 zoom) */
.maison-step[data-step="0"] .maison-step__media img { transform-origin: 50% 100%; }
.maison-craft:not(.is-pinned) .maison-step[data-step="0"] .maison-step__media img { scale: 1.14; }
.maison-step__num {
  position: absolute;
  z-index: 2;
  inset-block-start: -.44em;
  inset-inline-start: -.06em;
  font-family: var(--f-serif-latin);
  font-weight: 300;
  font-size: clamp(4.6rem, 7.6vw, 8.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-gold-500);
  pointer-events: none;
  user-select: none;
}
.maison-step__body { display: grid; gap: 10px; padding-block-start: 24px; }
.maison-step__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--accent);
}
.maison-step__title { font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.04; }
.maison-step__text {
  max-inline-size: 30em;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--fg);
  text-wrap: pretty;
}
.maison-craft__outro {
  display: grid;
  gap: 24px;
  justify-items: start;
  margin-block-start: clamp(80px, 10vw, 140px);
}
.maison-craft__quote {
  max-inline-size: 11em;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
  text-wrap: balance;
}
.maison-craft__quote em { font-style: var(--fst-em); color: var(--em); }
.maison-craft__progress { display: none; }

@media (min-width: 700px) {
  .maison-craft__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maison-step:nth-child(even) { margin-block-start: clamp(64px, 9vw, 140px); }
}
@media (min-width: 1100px) {
  .maison-craft__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maison-step:nth-child(even) { margin-block-start: 0; }
  .maison-step:nth-child(3n + 2) { margin-block-start: clamp(64px, 7vw, 120px); }
}

/* ---- pinned horizontal timeline ------------------------------------------- */
.maison-craft.is-pinned {
  --step-h: min(58svh, 760px);
  --step-copy: clamp(250px, 20vw, 330px);
  /* the rail starts and ends on the page container's edges (wide screens: not the viewport's) */
  --rail-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-block: 0;
}
.maison-craft.is-pinned .maison-craft__pin {
  display: flex;
  align-items: center;
  block-size: 100vh;
  block-size: 100svh;
  overflow: clip;
  padding-block: calc(var(--header-h) * .7) clamp(84px, 12svh, 120px);
}
.maison-craft.is-pinned .maison-craft__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(88px, 8vw, 150px);
  inline-size: max-content;
  max-inline-size: none;
  margin: 0;
  padding-inline: var(--rail-pad) max(clamp(120px, 14vw, 260px), var(--rail-pad));
  will-change: transform;
}
.maison-craft.is-pinned .maison-craft__intro {
  flex: none;
  inline-size: min(31vw, 500px);
  margin: 0;
}
.maison-craft.is-pinned .maison-craft__hint {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 12px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
}
.maison-craft.is-pinned .maison-craft__hint .c-icon { --icon-size: 18px; color: var(--accent); animation: maison-nudge 2.2s var(--ease-inout) infinite; }
[dir="rtl"] .maison-craft.is-pinned .maison-craft__hint .c-icon { animation-name: maison-nudge-rtl; }
@keyframes maison-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@keyframes maison-nudge-rtl { 0%, 100% { translate: 0 0; } 50% { translate: -8px 0; } }

.maison-craft.is-pinned .maison-craft__steps {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(80px, 7.4vw, 140px);
}
/* a waxed thread runs through the whole timeline, behind the pictures */
.maison-craft.is-pinned .maison-craft__steps::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: -6vw;
  inset-block-start: 36%;
  block-size: 1px;
  background-image: linear-gradient(90deg, var(--c-gold-600) 0 58%, transparent 58% 100%);
  background-size: 14px 1px;
  opacity: .5;
}
.maison-craft.is-pinned .maison-step {
  flex: none;
  display: grid;
  grid-template-columns: calc(var(--step-h) * .8) var(--step-copy);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(26px, 2.4vw, 44px);
  block-size: var(--step-h);
  margin: 0;
}
.maison-craft.is-pinned .maison-step:nth-child(odd) { margin-block-end: 9svh; }
.maison-craft.is-pinned .maison-step:nth-child(even) { margin-block-start: 9svh; }
.maison-craft.is-pinned .maison-step__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
}
.maison-craft.is-pinned .maison-step__media img { scale: 1.2; }
.maison-craft.is-pinned .maison-step__num {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-block-start: -.12em;
  font-size: clamp(5rem, 7vw, 8.6rem);
  -webkit-text-stroke-color: var(--c-gold-600);
  transition: -webkit-text-stroke-color .8s var(--ease-out);
}
.maison-craft.is-pinned .maison-step.is-active .maison-step__num { -webkit-text-stroke-color: var(--c-gold-400); }
.maison-craft.is-pinned .maison-step__body {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
}
.maison-craft.is-pinned .maison-step__body > * { transition: opacity .8s var(--ease-out); }
.maison-craft.is-pinned .maison-step:not(.is-active) .maison-step__body > * { opacity: .55; }
.maison-craft.is-pinned .maison-craft__outro {
  flex: none;
  inline-size: min(32vw, 520px);
  margin: 0;
}

/* progress: counter, foil line and the six named ticks */
.maison-craft.is-pinned .maison-craft__progress {
  position: absolute;
  z-index: 2;
  inset-inline: var(--rail-pad);
  inset-block-end: clamp(18px, 3.6svh, 40px);
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 2.4vw, 40px);
}
.maison-craft__counter {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  direction: ltr;
}
.maison-craft__counter-total { font-size: .8rem; color: var(--fg-muted); }
.maison-craft__rail { position: relative; flex: 1; padding-block-start: 40px; }
.maison-craft__bar { position: relative; display: block; block-size: 1px; overflow: hidden; background: var(--line); }
.maison-craft__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--g-foil);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .maison-craft__bar-fill { transform-origin: right center; }
.maison-craft__ticks { position: absolute; inset: 0; }
.maison-craft__ticks > li {
  position: absolute;
  inset-block-end: -6px;
  inset-inline-start: var(--at, 0%);
  translate: -50% 0;
}
[dir="rtl"] .maison-craft__ticks > li { translate: 50% 0; }
.maison-craft__tick {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-inline: 6px;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  white-space: nowrap;
  color: var(--fg-muted);
  transition: color .5s;
}
.maison-craft__tick-label { order: -1; }
.maison-craft__tick-dot {
  inline-size: 7px;
  block-size: 7px;
  border: 1px solid var(--accent-soft);
  background: var(--bg);
  transform: rotate(45deg);
  transition: background-color .5s, transform .6s var(--ease-out);
}
.maison-craft__tick:hover,
.maison-craft__tick.is-active { color: var(--fg-strong); }
.maison-craft__tick.is-done .maison-craft__tick-dot,
.maison-craft__tick.is-active .maison-craft__tick-dot { background: var(--c-gold-500); }
.maison-craft__tick.is-active .maison-craft__tick-dot { transform: rotate(45deg) scale(1.5); }


/* =============================================================================
   03  Leathers & materials — six swatches + the house colours
   ========================================================================== */
.maison-materials__head {
  display: grid;
  gap: 28px;
  margin-block-end: clamp(56px, 7vw, 108px);
}
.maison-materials__heading { display: grid; gap: 24px; justify-items: start; }
.maison-materials__title { max-inline-size: 10em; }
.maison-materials__text { max-inline-size: 30em; color: var(--fg); text-wrap: pretty; }
@media (min-width: 900px) {
  .maison-materials__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .maison-materials__text { padding-block-end: .6em; }
}

.maison-materials__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px var(--grid-gap);
}
.maison-material {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.maison-material__swatch {
  position: relative;
  aspect-ratio: 16 / 10;                   /* phones: a landscape sample (rendered at this aspect) */
  overflow: hidden;
  background-color: var(--swatch, var(--c-green-700));
  background-image:
    radial-gradient(110% 80% at 28% 16%, color-mix(in srgb, var(--c-white) 20%, transparent), transparent 62%),
    linear-gradient(165deg, transparent 40%, color-mix(in srgb, var(--c-green-950) 34%, transparent));
}
.maison-material__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out), scale 1.4s var(--ease-out);
}
.maison-material__swatch.is-ready .maison-material__img { opacity: 1; }
.maison-material__sheen {                  /* a warm light follows the pointer across the leather */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 22%), color-mix(in srgb, var(--c-gold-100) 55%, transparent) 0%, transparent 46%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .7s var(--ease-out);
  pointer-events: none;
}
.maison-material:hover .maison-material__sheen { opacity: 1; }
.maison-material:hover .maison-material__img { scale: 1.035; }
.maison-material__body { display: grid; gap: 8px; align-content: start; min-inline-size: 0; }
.maison-material__no {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--accent);
}
.maison-material__name { font-size: clamp(1.7rem, 2.3vw, 2.3rem); line-height: 1.05; }
.maison-material__finish {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
}
.maison-material__text {
  margin-block-start: 6px;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--fg);
  text-wrap: pretty;
}
.maison-material__care {
  display: grid;
  gap: 4px;
  margin-block-start: 8px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.maison-material__care-label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--accent);
}
@media (min-width: 700px) {
  .maison-materials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(56px, 7vw, 88px); }
  .maison-material { gap: 24px; }
  .maison-material__swatch { aspect-ratio: 4 / 5; }
}
@media (min-width: 1100px) {
  .maison-materials__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maison-material:nth-child(3n + 2) { margin-block-start: clamp(48px, 5vw, 88px); }
}

/* ---- the house colours ---------------------------------------------------- */
.maison-colours {
  display: grid;
  gap: clamp(28px, 3.4vw, 44px);
  margin-block-start: clamp(96px, 12vw, 176px);
  padding-block-start: clamp(40px, 5vw, 64px);
  border-block-start: 1px solid var(--line);
}
.maison-colours__head { display: grid; gap: 16px; align-content: start; }
.maison-colours__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.maison-colours__text { max-inline-size: 26em; font-size: var(--fs-small); line-height: 1.75; color: var(--fg-muted); }
.maison-colours__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 10px;
}
.maison-colour {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 8px 2px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.maison-colour__chip {
  position: relative;
  display: block;
  inline-size: clamp(56px, 5.4vw, 88px);
  aspect-ratio: 1;
  margin-block-end: 10px;
  border-radius: 50%;
  background-color: var(--swatch);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 12%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--c-green-950) 80%, transparent);
  transition: transform .7s var(--ease-out);
}
.maison-colour__chip::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.maison-colour:hover .maison-colour__chip { transform: translateY(-4px); }
.maison-colour[aria-pressed="true"] .maison-colour__chip::after { opacity: 1; transform: scale(1); }
.maison-colour__en {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.maison-colour__ku { font-size: .8125rem; line-height: 1.5; color: var(--fg-muted); }
.maison-colour[aria-pressed="true"] .maison-colour__en { color: var(--accent); }

.maison-colours__detail {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
  min-block-size: 11.5em;
  padding-block-start: clamp(20px, 2.4vw, 32px);
  border-block-start: 1px solid var(--line);
}
.maison-colours__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--fg-strong);
}
.maison-colours__alt { font-size: .55em; color: var(--fg-muted); }
.maison-colours__meta {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--accent);
}
.maison-colours__desc { max-inline-size: 34em; color: var(--fg); }
.maison-colours__detail.is-changing > * { animation: maison-fade-in .7s var(--ease-out) both; }
@keyframes maison-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  .maison-colours__row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .maison-colours__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .maison-colours__text { padding-block-end: .3em; }
  .maison-colour__chip { inline-size: clamp(64px, 7vw, 124px); }
  /* name · description · link, read as one line across the page */
  .maison-colours__detail {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto;
    grid-template-areas: "name desc cta" "meta desc cta";
    column-gap: var(--grid-gap);
    align-items: start;
    min-block-size: 0;
  }
  .maison-colours__name { grid-area: name; }
  .maison-colours__meta { grid-area: meta; }
  .maison-colours__desc { grid-area: desc; padding-block-start: .5em; }
  .maison-colours__cta { grid-area: cta; align-self: start; margin-block-start: .4em; }
}


/* =============================================================================
   04  Principles
   ========================================================================== */
.maison-values { position: relative; isolation: isolate; overflow: clip; }
.maison-values__texture { position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none; }
.maison-values__texture img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.maison-values__texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 40%, transparent, color-mix(in srgb, var(--c-green-950) 70%, transparent)),
    linear-gradient(180deg, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 45%, transparent) 30%, color-mix(in srgb, var(--c-green-950) 45%, transparent) 70%, var(--c-green-950));
}
.maison-values__head {
  display: grid;
  justify-items: center;
  gap: 26px;
  margin-block-end: clamp(64px, 8vw, 120px);
  text-align: center;
}
.maison-values__title { max-inline-size: 13em; }
.maison-values__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: 1px solid var(--line);
}
.maison-value {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-block: clamp(32px, 3.6vw, 56px);
  border-block-end: 1px solid var(--line);
}
.maison-value__icon {
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: 14px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
  stroke-linecap: butt;                    /* (round caps would show a dot per path before the draw starts) */
  stroke-linejoin: round;
  overflow: visible;
}
.maison-value__num {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
}
.maison-value__title {
  font-size: var(--fs-h4);
  font-weight: calc(var(--fw-display) + 100);
  line-height: var(--lh-h4);
}
.maison-value__text { max-inline-size: 28em; font-size: var(--fs-small); line-height: 1.75; color: var(--fg); text-wrap: pretty; }
@media (min-width: 700px) {
  .maison-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maison-value { padding-inline: clamp(20px, 2.6vw, 44px); }
  .maison-value:nth-child(odd) { padding-inline-start: 0; }
  .maison-value:nth-child(even) { border-inline-start: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .maison-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .maison-value { border-block-end: 0; }
  .maison-value:nth-child(odd) { padding-inline-start: clamp(20px, 2.6vw, 44px); }
  .maison-value:first-child { padding-inline-start: 0; }
  .maison-value + .maison-value { border-inline-start: 1px solid var(--line); }
  .maison-values__grid { border-block-end: 1px solid var(--line); }
}


/* =============================================================================
   05  Care — the care box (sticky on wide screens) and six habits
   ========================================================================== */
.maison-care__grid { display: grid; gap: clamp(56px, 8vw, 96px); }
.maison-care__visual { position: relative; min-inline-size: 0; }
.maison-care__figure { margin: 0; }
.maison-care__media { aspect-ratio: 4 / 5; background-color: var(--c-paper); }
.maison-care__media img { object-position: 50% 40%; }
.maison-care__caption { margin-block-start: 26px; }
.maison-care__content { display: grid; gap: 24px; align-content: start; justify-items: start; min-inline-size: 0; }
.maison-care__title { max-inline-size: 10em; }
.maison-care__lead {
  max-inline-size: 30em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
  text-wrap: pretty;
}
.maison-care__list {
  inline-size: 100%;
  margin-block-start: clamp(16px, 2.6vw, 36px);
  border-block-start: 1px solid var(--line);
}
.maison-care__step {
  display: grid;
  grid-template-columns: clamp(58px, 6.4vw, 104px) minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-block-end: 1px solid var(--line);
}
.maison-care__num {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: .9;
  color: var(--em);
}
.maison-care__step-title {
  margin-block-end: 8px;
  font-size: var(--fs-h4);
  font-weight: calc(var(--fw-display) + 100);
  line-height: var(--lh-h4);
}
.maison-care__step-text { max-inline-size: 36em; color: var(--fg); text-wrap: pretty; }
.maison-care__more {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-block-start: 8px;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
@media (max-width: 999.98px) {
  .maison-care__visual { max-inline-size: 560px; }
}
@media (min-width: 1000px) {
  .maison-care__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(56px, 7vw, 140px);
  }
  .maison-care__figure {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 36px);
  }
}


/* =============================================================================
   06  Two doors — the collection, or the atelier
   ========================================================================== */
.maison-doors { position: relative; }
.maison-doors__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.maison-door {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  min-block-size: clamp(460px, 74svh, 780px);
  color: var(--fg);
}
.maison-door__media { position: absolute; inset: 0; z-index: -3; }
.maison-door__media img { transition: transform 1.8s var(--ease-out); }
.maison-door--shop .maison-door__media img { object-position: 46% 50%; }
.maison-door--atelier .maison-door__media img { object-position: 50% 66%; }
.maison-door:hover .maison-door__media img { transform: scale(1.06); }
.maison-door__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--c-green-950) 94%, transparent) 0%,
    color-mix(in srgb, var(--c-green-950) 62%, transparent) 38%,
    color-mix(in srgb, var(--c-green-950) 18%, transparent) 72%,
    color-mix(in srgb, var(--c-green-950) 30%, transparent) 100%);
  transition: opacity .9s var(--ease-out);
}
.maison-door__frame {
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  z-index: -1;
  border: 1px solid var(--c-gold-400);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
}
.maison-door:hover .maison-door__frame,
.maison-door:focus-within .maison-door__frame { opacity: .75; transform: scale(1); }
.maison-door__body {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-inline-size: 36rem;
  padding: clamp(32px, 5vw, 80px) var(--gutter);
}
.maison-door__index {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
}
.maison-door__title { font-size: clamp(2.7rem, 4.8vw, 5.2rem); line-height: .98; }
.maison-door__link { color: inherit; text-decoration: none; }
.maison-door__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.maison-door__link:focus-visible { outline: none; }
.maison-door:has(.maison-door__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -8px; }
.maison-door__text { max-inline-size: 26em; color: var(--fg); text-wrap: pretty; }
.maison-door__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-block-start: 8px;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.maison-door:hover .c-btn__arrow { inline-size: 44px; }
@media (min-width: 900px) {
  .maison-doors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maison-door + .maison-door { border-inline-start: 1px solid var(--line); }
  .maison-door__body { padding-inline: clamp(36px, 4.6vw, 80px); }
}
@media (max-width: 899.98px) {
  .maison-door + .maison-door { border-block-start: 1px solid var(--line); }
}


/* Split headings keep their height: main.css gives every line mask padding .1em and margin −.1em, but
   adjacent negative margins collapse to −.1em, so a split heading is .1em taller per line break and
   shrinks when the reveal reverts (anchors then land a few px off). Doubling the top margin of the
   following masks compensates (−.2em ↔ padding .1em + .1em). */
.page--maison .split-line-mask + .split-line-mask { margin-block-start: -.2em; }
:root[lang="ckb"] .page--maison .split-line-mask + .split-line-mask { margin-block-start: -.48em; }


/* =============================================================================
   07  Kurdish (ckb) — Naskh needs air: taller lines, slightly smaller display
   ========================================================================== */
:root[lang="ckb"] .maison-hero__title {
  font-size: clamp(4rem, min(10.6vw, 17svh), 11.4rem);
  line-height: 1.22;
  font-weight: 500;
}
:root[lang="ckb"] .maison-hero__line--2 { padding-inline-start: .7em; }
:root[lang="ckb"] .maison-hero__index-link { letter-spacing: 0; }
:root[lang="ckb"] .maison-chapter__title { font-size: clamp(2rem, 3.6vw, 3.7rem); line-height: 1.36; }
:root[lang="ckb"] .maison-step__title { font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1.4; }
:root[lang="ckb"] .maison-step__text,
:root[lang="ckb"] .maison-material__text,
:root[lang="ckb"] .maison-value__text,
:root[lang="ckb"] .maison-colours__text { line-height: 1.95; }
:root[lang="ckb"] .maison-craft__quote { font-size: clamp(1.9rem, 3.2vw, 3.3rem); line-height: 1.4; }
:root[lang="ckb"] .maison-material__name { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.4; }
:root[lang="ckb"] .maison-material__care { line-height: 1.9; }
:root[lang="ckb"] .maison-colours__name { line-height: 1.45; }
:root[lang="ckb"] .maison-care__step-title { line-height: 1.5; }
:root[lang="ckb"] .maison-door__title { font-size: clamp(2.3rem, 4.1vw, 4.4rem); line-height: 1.3; }
:root[lang="ckb"] .maison-craft__tick { font-size: .8125rem; }