.house-page {
  --house-olive: #373d1f;
  --house-ink: #27281d;
  --house-ivory: #f8f5ec;
  --house-stone: #d3ccbf;
  --house-muted: #686b56;
  --house-border: #c9c2af;
  background: var(--house-ivory);
  color: var(--house-ink);
  font-family: "Clash Display Variable", Arial, sans-serif;
  line-height: 1.5;
}

.house-page .cedar-header {
  position: relative;
  z-index: 10;
  min-height: 5.5rem;
  background: var(--house-ivory);
  border-bottom: 1px solid var(--house-border);
}

.house-page main {
  min-height: 1px;
  padding-top: 0;
}

.house-page main > section {
  position: relative;
  padding: clamp(4rem, 9vw, 9rem) max(1.25rem, 7vw);
}

.house-page h1,
.house-page h2,
.house-page p {
  max-width: 42rem;
}

.house-page h1,
.house-page h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.045em;
}

.house-page h1 { font-size: clamp(3.5rem, 9vw, 9.5rem); line-height: .88; }
.house-page h2 { font-size: clamp(2.25rem, 5vw, 5.5rem); line-height: .96; }
.house-page p { margin: 0; }

.house-eyebrow {
  margin-bottom: 1.25rem !important;
  color: var(--house-muted);
  font: 700 .72rem/1.2 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.house-hero {
  display: grid;
  min-height: min(49rem, 78vh);
  align-items: end;
  isolation: isolate;
  overflow: hidden;
  background: var(--house-olive) url('../assets/figma/rectangle-2-3-17.webp') center / cover no-repeat;
  color: var(--house-ivory);
}

.house-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(30 35 15 / 82%), rgb(30 35 15 / 22%) 75%), linear-gradient(0deg, rgb(30 35 15 / 70%), transparent 55%);
  content: '';
}

.house-hero__content { max-width: 68rem; }
.house-hero .house-eyebrow { color: #e9e1cd; }
.house-hero__intro { margin-top: 2rem; max-width: 32rem; font-size: clamp(1.25rem, 2vw, 2rem); }

.house-introduction,
.house-connection {
  background: var(--house-stone);
}

.house-section__copy {
  display: grid;
  grid-template-columns: minmax(12rem, .75fr) minmax(14rem, 1.25fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: end;
  max-width: 90rem;
  margin: 0 auto;
}

.house-section__copy h2 { grid-column: 2; }
.house-section__copy p:last-child { grid-column: 1; grid-row: 2; color: var(--house-muted); font: 500 1.08rem/1.55 Arial, sans-serif; }

.house-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: stretch;
  min-height: 34rem;
  max-width: 100rem;
  margin: 0 auto;
  background: var(--house-ivory);
}

.house-category:nth-of-type(even) { grid-template-columns: minmax(18rem, .82fr) minmax(0, 1fr); }
.house-category:nth-of-type(even) .house-category__copy { order: 2; }
.house-category__copy { display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
.house-category__copy p:not(.house-eyebrow) { margin-top: 1.5rem; max-width: 30rem; color: var(--house-muted); font: 500 1.05rem/1.6 Arial, sans-serif; }

.house-category__media {
  min-height: 25rem;
  background-position: center;
  background-size: cover;
}

.house-category--play .house-category__media { background: var(--house-olive) url('../assets/figma/vector-6-182.svg') center / 38% no-repeat; }
.house-category--eat .house-category__media { background: var(--house-stone) url('../assets/figma/vale-kitchen-image-10-105.webp') center / cover no-repeat; }
.house-category--gather .house-category__media { background: var(--house-olive) url('../assets/figma/bar-interior-11-114.webp') center / cover no-repeat; }
.house-category--sleep .house-category__media { background: var(--house-stone) url('../assets/figma/room-image-8-140.webp') center / cover no-repeat; }

.house-link,
.house-button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 3rem;
  margin-top: 2.25rem;
  padding: .75rem 1.2rem;
  border: 1px solid var(--house-olive);
  color: var(--house-olive);
  font: 700 .76rem/1.1 Arial, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.house-link:hover,
.house-link:focus-visible,
.house-button:hover,
.house-button:focus-visible { background: var(--house-olive); color: var(--house-ivory); }

.house-close {
  background: var(--house-olive);
  color: var(--house-ivory);
}

.house-close__content { max-width: 90rem; margin: 0 auto; }
.house-close .house-eyebrow { color: var(--house-stone); }
.house-close h2 { max-width: 36rem; }
.house-close__content > p:not(.house-eyebrow) { margin-top: 1.5rem; color: var(--house-stone); font: 500 1.05rem/1.6 Arial, sans-serif; }
.house-close__links { display: flex; flex-wrap: wrap; gap: .75rem; }
.house-close .house-button { border-color: var(--house-ivory); background: var(--house-ivory); color: var(--house-olive); }
.house-close .house-button--quiet { background: transparent; color: var(--house-ivory); }
.house-close .house-button--quiet:hover,
.house-close .house-button--quiet:focus-visible { background: var(--house-ivory); color: var(--house-olive); }

.house-page .site-footer { margin-top: 0; }
.house-page .site-footer__nav a { color: inherit; text-decoration: none; }

@media (max-width: 760px) {
  .house-page .cedar-header { min-height: 4.5rem; }
  .house-page main > section { padding: 4rem 1.25rem; }
  .house-hero { min-height: 38rem; }
  .house-section__copy,
  .house-category,
  .house-category:nth-of-type(even) { grid-template-columns: 1fr; gap: 2rem; }
  .house-section__copy h2,
  .house-section__copy p:last-child { grid-column: auto; grid-row: auto; }
  .house-category:nth-of-type(even) .house-category__copy { order: 0; }
  .house-category__copy { padding-block: 0; }
  .house-category__media { min-height: 18rem; }
  .house-close__links { align-items: stretch; flex-direction: column; }
  .house-close .house-button { width: 100%; justify-content: center; }
}