/* The House — editorial layout system (6 images, art-directed rhythm) */

.page-house {
  --house-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --house-max: 72rem;
  --house-space: clamp(3rem, 5.5vw, 4.25rem);
  --house-space-sm: clamp(1.5rem, 2.8vw, 2rem);
  --house-space-xs: clamp(0.85rem, 1.6vw, 1.15rem);
}

.page-house main.house {
  background: var(--ivory-warm);
  overflow-x: clip;
}

.page-house .foot-lux {
  background: var(--stone-light);
}

/* —— Shared shell (one alignment system) —— */
.house-shell {
  width: min(100%, var(--house-max));
  margin-inline: auto;
  padding-inline: var(--house-gutter);
}

.house-kicker {
  margin: 0 0 var(--house-space-xs);
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.house-chapter__statement {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  max-width: 22em;
}

.house-chapter__label {
  margin: var(--house-space-xs) 0 0;
  font-family: var(--font-sans);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.house-chapter__line {
  margin: var(--house-space-xs) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--charcoal);
  max-width: 14em;
}

/* —— Reveal —— */
.house-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 0.08, 0.24, 1),
    transform 0.95s cubic-bezier(0.22, 0.08, 0.24, 1);
}

.house-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .house-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .house-hero__img[data-hero-parallax] {
    transform: none !important;
  }
}

/* —— Hero · full-bleed cinematic —— */
.house-hero {
  position: relative;
  height: 100svh;
  min-height: 32rem;
  background: #11080b;
  overflow: hidden;
}

.house-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  line-height: 0;
}

.house-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
  animation: house-hero-in 1.1s ease both;
}

@keyframes house-hero-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.house-hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(17, 8, 11, 0.42) 0%, transparent 32%, transparent 58%, rgba(17, 8, 11, 0.55) 100%),
    linear-gradient(90deg, rgba(17, 8, 11, 0.38) 0%, transparent 42%);
}

.house-hero__content {
  position: absolute;
  inset: auto 0 clamp(2rem, 4.5vh, 3rem);
  z-index: 2;
  color: var(--text-on-dark);
  pointer-events: none;
}

.house-hero__eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(237, 232, 223, 0.58);
}

.house-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.8vw, 2.85rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(252, 249, 244, 0.96);
}

.house-hero__lede {
  margin: 0.6rem 0 0;
  max-width: 15em;
  font-family: var(--font-serif);
  font-size: clamp(0.82rem, 1.15vw, 0.95rem);
  font-style: italic;
  line-height: 1.45;
  color: rgba(237, 232, 223, 0.74);
}

/* —— Body chapters · consistent vertical rhythm —— */
.house-body {
  display: flex;
  flex-direction: column;
}

.house-chapter {
  padding-block: var(--house-space);
}

.house-chapter__head {
  margin-bottom: var(--house-space-sm);
}

/* —— Runway · single composed piece —— */
.house-chapter--runway {
  background: var(--ivory-warm);
  overflow: visible;
}

.house-runway__piece {
  position: relative;
  width: min(100%, 42rem);
  margin-left: clamp(0rem, 4vw, 2.5rem);
  margin-right: 0;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.house-runway__gown {
  margin: 0 0 0 auto;
  line-height: 0;
  width: 92%;
  transform-origin: bottom right;
  transform: scale(1.06) translateY(clamp(2rem, 5vh, 3.5rem));
}

.house-runway__gown img {
  display: block;
  width: 100%;
  height: auto;
}

.house-runway__detail {
  position: absolute;
  left: -2%;
  bottom: 0;
  margin: 0;
  line-height: 0;
  width: 34%;
  z-index: 2;
  box-shadow: 0 18px 44px rgba(42, 36, 30, 0.12);
  transform: translateY(0.85rem);
}

.house-runway__detail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 3.6;
  object-fit: cover;
  object-position: 50% 38%;
}

@media (min-width: 768px) {
  .house-chapter__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: var(--house-space-sm);
    align-items: end;
    margin-bottom: var(--house-space-sm);
  }

  .house-chapter__statement {
    grid-column: 1;
  }

  .house-chapter__label {
    grid-column: 2;
    margin: 0;
    text-align: right;
  }

  .house-kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .house-chapter__statement {
    grid-row: 2;
  }

  .house-runway__piece {
    width: min(100%, 54rem);
    margin-left: clamp(1.5rem, 8vw, 5rem);
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }

  .house-runway__gown {
    width: 88%;
    transform: scale(1.1) translateY(clamp(2.5rem, 6vh, 4.5rem));
  }

  .house-runway__detail {
    width: 30%;
    left: -1%;
    bottom: 0;
    transform: translateY(1.15rem);
  }
}

/* —— Craft · full-bleed with caption on velvet —— */
.house-chapter.house-chapter--craft {
  padding-block: 0;
  background: var(--surface-intimate);
}

.house-craft__frame {
  position: relative;
  margin: 0;
  line-height: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.house-craft__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: 58% center;
}

.house-craft__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(2.5rem, 20vh, 5.75rem) clamp(1.25rem, 5vw, 2.5rem) clamp(1.25rem, 5vw, 2.5rem);
  pointer-events: none;
}

.house-craft__line {
  margin: 0;
  max-width: min(14em, 42%);
  font-family: "Cormorant", "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: 0.015em;
  text-align: right;
  font-feature-settings: "liga" 1, "kern" 1;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.house-craft__line-part--hand {
  color: #c95828;
}

.house-craft__line-part--embroidery {
  color: #d43838;
}

.house-craft__line-part--velvet {
  color: #ddd4c8;
}

/* —— Respite · full-width band — edge colours from the photo —— */
.house-chapter.house-chapter--respite {
  padding-block: clamp(0.4rem, 1.2vw, 0.65rem);
  background: rgb(37 40 34);
}

.house-respite__band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.house-respite__frame {
  position: relative;
  margin: 0;
  line-height: 0;
  width: min(100%, 17.5rem);
}

.house-respite__extend--left {
  background-image: linear-gradient(to bottom, rgb(33 36 33) 0.0%, rgb(36 39 33) 1.186%, rgb(36 39 33) 2.372%, rgb(36 39 33) 3.558%, rgb(36 39 33) 4.744%, rgb(37 40 34) 5.93%, rgb(37 40 34) 7.116%, rgb(37 40 34) 8.302%, rgb(37 40 34) 9.489%, rgb(38 41 36) 10.675%, rgb(37 40 34) 11.861%, rgb(37 40 34) 13.047%, rgb(38 41 36) 14.233%, rgb(39 42 37) 15.419%, rgb(43 46 40) 16.605%, rgb(39 42 37) 17.791%, rgb(39 42 37) 18.977%, rgb(39 42 37) 20.163%, rgb(41 42 37) 21.349%, rgb(42 43 38) 22.535%, rgb(42 43 38) 23.721%, rgb(42 43 38) 24.907%, rgb(42 43 38) 26.093%, rgb(42 43 38) 27.279%, rgb(43 44 39) 28.466%, rgb(44 45 40) 29.652%, rgb(42 43 38) 30.838%, rgb(43 44 39) 32.024%, rgb(44 45 40) 33.21%, rgb(43 44 39) 34.396%, rgb(43 44 39) 35.582%, rgb(41 42 37) 36.768%, rgb(42 43 38) 37.954%, rgb(43 44 39) 39.14%, rgb(42 43 38) 40.326%, rgb(42 43 38) 41.512%, rgb(42 43 38) 42.698%, rgb(41 42 37) 43.884%, rgb(42 43 38) 45.07%, rgb(42 43 38) 46.256%, rgb(41 42 37) 47.443%, rgb(39 42 37) 48.629%, rgb(41 42 37) 49.815%, rgb(40 40 36) 51.001%, rgb(40 40 36) 52.187%, rgb(40 40 36) 53.373%, rgb(40 40 36) 54.559%, rgb(40 40 36) 55.745%, rgb(40 40 36) 56.931%, rgb(38 39 34) 58.117%, rgb(38 41 36) 59.303%, rgb(40 40 36) 60.489%, rgb(38 39 34) 61.675%, rgb(37 40 34) 62.861%, rgb(37 40 34) 64.047%, rgb(37 40 34) 65.234%, rgb(37 40 34) 66.42%, rgb(37 40 34) 67.606%, rgb(37 40 34) 68.792%, rgb(37 40 34) 69.978%, rgb(37 40 34) 71.164%, rgb(37 40 34) 72.35%, rgb(37 40 34) 73.536%, rgb(37 40 34) 74.722%, rgb(37 40 34) 75.908%, rgb(37 40 34) 77.094%, rgb(37 40 34) 78.28%, rgb(37 40 34) 79.466%, rgb(37 40 34) 80.652%, rgb(36 39 33) 81.838%, rgb(37 40 34) 83.024%, rgb(36 39 33) 84.211%, rgb(35 38 32) 85.397%, rgb(35 38 32) 86.583%, rgb(33 37 31) 87.769%, rgb(32 35 30) 88.955%, rgb(32 35 30) 90.141%, rgb(31 34 31) 91.327%, rgb(31 34 31) 92.513%, rgb(30 33 29) 93.699%, rgb(30 33 29) 94.885%, rgb(30 33 29) 96.071%, rgb(28 30 27) 97.257%, rgb(28 30 27) 98.443%, rgb(26 29 26) 99.629%, rgb(25 28 25) 100%);
}

.house-respite__extend--right {
  background-image: linear-gradient(to bottom, rgb(37 40 34) 0.0%, rgb(37 40 34) 1.186%, rgb(37 40 34) 2.372%, rgb(38 41 36) 3.558%, rgb(39 42 37) 4.744%, rgb(39 42 37) 5.93%, rgb(39 42 37) 7.116%, rgb(40 44 38) 8.302%, rgb(39 42 37) 9.489%, rgb(41 45 39) 10.675%, rgb(43 46 40) 11.861%, rgb(43 46 40) 13.047%, rgb(44 47 41) 14.233%, rgb(44 47 41) 15.419%, rgb(44 47 41) 16.605%, rgb(44 47 41) 17.791%, rgb(44 47 41) 18.977%, rgb(44 47 41) 20.163%, rgb(44 47 41) 21.349%, rgb(45 48 43) 22.535%, rgb(45 48 43) 23.721%, rgb(48 49 44) 24.907%, rgb(48 49 44) 26.093%, rgb(48 49 44) 27.279%, rgb(48 49 44) 28.466%, rgb(50 51 46) 29.652%, rgb(49 50 45) 30.838%, rgb(49 50 45) 32.024%, rgb(48 52 46) 33.21%, rgb(50 51 46) 34.396%, rgb(48 52 46) 35.582%, rgb(50 53 47) 36.768%, rgb(51 54 48) 37.954%, rgb(50 53 47) 39.14%, rgb(50 53 47) 40.326%, rgb(50 51 46) 41.512%, rgb(48 52 46) 42.698%, rgb(48 52 46) 43.884%, rgb(48 52 46) 45.07%, rgb(48 52 46) 46.256%, rgb(47 51 45) 47.443%, rgb(48 49 44) 48.629%, rgb(45 48 43) 49.815%, rgb(45 48 43) 51.001%, rgb(44 47 41) 52.187%, rgb(44 47 41) 53.373%, rgb(44 47 41) 54.559%, rgb(43 46 40) 55.745%, rgb(44 47 41) 56.931%, rgb(43 46 40) 58.117%, rgb(43 46 40) 59.303%, rgb(43 46 40) 60.489%, rgb(44 47 41) 61.675%, rgb(43 46 40) 62.861%, rgb(43 46 40) 64.047%, rgb(43 46 40) 65.234%, rgb(43 46 40) 66.42%, rgb(43 46 40) 67.606%, rgb(43 46 40) 68.792%, rgb(43 46 40) 69.978%, rgb(43 46 40) 71.164%, rgb(43 46 40) 72.35%, rgb(44 47 41) 73.536%, rgb(43 46 40) 74.722%, rgb(43 46 40) 75.908%, rgb(43 46 40) 77.094%, rgb(43 46 40) 78.28%, rgb(43 46 40) 79.466%, rgb(43 46 40) 80.652%, rgb(44 47 41) 81.838%, rgb(41 45 39) 83.024%, rgb(41 45 39) 84.211%, rgb(41 45 39) 85.397%, rgb(37 40 34) 86.583%, rgb(39 42 37) 87.769%, rgb(38 41 36) 88.955%, rgb(37 40 34) 90.141%, rgb(37 40 34) 91.327%, rgb(36 39 33) 92.513%, rgb(36 39 33) 93.699%, rgb(33 36 33) 94.885%, rgb(33 36 33) 96.071%, rgb(33 36 33) 97.257%, rgb(32 35 32) 98.443%, rgb(31 34 31) 99.629%, rgb(31 34 31) 100%);
}

.house-respite__extend {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50vw - 50% + 1px);
  pointer-events: none;
  z-index: 2;
}

.house-respite__extend--left {
  right: calc(100% - 1px);
}

.house-respite__extend--right {
  left: calc(100% - 1px);
}

.house-respite__frame img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .house-respite__frame {
    width: min(100%, 19rem);
  }
}

/* —— Editorial · one unified block —— */
.house-chapter.house-chapter--editorial {
  --house-editorial-bg: #f7f6f3;
  padding-block: clamp(0.4rem, 1.2vw, 0.65rem);
  background: var(--house-editorial-bg);
}

.house-editorial__piece {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: 0;
}

.house-editorial__quote {
  margin: 0;
  padding: 0;
  border: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.15rem);
  text-align: center;
}

.house-editorial__quote::before,
.house-editorial__quote::after {
  content: "";
  display: block;
  width: clamp(2.25rem, 7vw, 3.25rem);
  height: 1px;
  background: rgba(42, 40, 37, 0.2);
  flex-shrink: 0;
}

.house-editorial__verse {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.14;
  letter-spacing: 0.015em;
  color: var(--charcoal);
}

.house-editorial__frame {
  margin: 0;
  line-height: 0;
  flex: 0 0 clamp(12rem, 44vw, 18rem);
  width: clamp(12rem, 44vw, 18rem);
  background: var(--house-editorial-bg);
}

.house-editorial__frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}

@media (min-width: 768px) {
  .house-editorial__piece {
    width: min(100%, 46rem);
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
  }

  .house-editorial__frame {
    flex-basis: 21rem;
    width: 21rem;
  }
}

/* —— Close —— */
.house-close {
  background: var(--warm-dark);
  color: var(--text-on-dark);
  padding-block: var(--house-space);
  border-top: 1px solid rgba(196, 173, 120, 0.18);
}

.house-close__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--house-space-sm);
}

.house-close__line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  color: rgba(252, 249, 244, 0.94);
  max-width: 18em;
}

.house-close__cta {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(196, 173, 120, 0.95);
  border-bottom: 1px solid rgba(196, 173, 120, 0.42);
  padding-bottom: 0.2rem;
}

.house-close__cta:hover {
  color: var(--text-on-dark);
  border-bottom-color: rgba(252, 249, 244, 0.6);
}

@media (min-width: 768px) {
  .house-close__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}