/*
  Homepage composition/modeling layer.

  This is intentionally separate from home.css while the tall living-wall
  reference is being matched through screenshot loops. It owns composition,
  centering, spacing, and reference-like hierarchy; the procedural wall/material
  files still own plaster geometry and damage.
*/

html.home-page {
  --reference-copy: 48rem;
  --reference-card: 50rem;
}

/* Full-width terraces must be centered against the viewport, not against the
   site's narrower body column. Without this correction an 834px terrace begins
   at the body's 107px inset and pushes the document to 941px wide. */
.home-page .ecology-terrace {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
}

/* The reference opens with atmosphere, then a compact centered navigation bar.
   Keep the sky as a real block, but stop letting the header become a huge slab. */
.home-page .site-sky-block {
  height: clamp(8rem, 13vw, 10.8rem);
  background:
    radial-gradient(circle at 50% 115%, rgba(226, 220, 200, .08), transparent 42%),
    linear-gradient(180deg, rgba(231, 237, 237, .08), transparent 68%),
    #83949a;
}

.home-page .site-header {
  z-index: 9;
  display: flex;
  width: min(62rem, calc(100% - 3.2rem));
  max-width: 62rem;
  min-height: 5.2rem;
  margin: -5.1rem auto 0;
  padding: .55rem 7.4rem .55rem 1.4rem;
  align-items: center;
  justify-content: center;
  color: #f0dfcb;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .055)),
    rgba(59, 57, 46, .9);
  border: 1px solid rgba(239, 218, 193, .18);
  border-radius: .45rem;
  box-shadow:
    0 10px 24px rgba(31, 31, 26, .18),
    inset 0 1px rgba(255, 255, 255, .055);
}

.home-page .site-header .main-menu {
  width: 100%;
  justify-content: center;
  gap: .4rem clamp(1.3rem, 4vw, 2.6rem);
}

.home-page .site-header .main-menu a {
  min-height: 3.8rem;
  padding: .45rem .1rem;
  color: rgba(245, 225, 201, .9);
  font-size: 1.52rem;
}

.home-page .site-header .main-menu a:hover,
.home-page .site-header .main-menu a:focus,
.home-page .site-header .main-menu a[aria-current="page"] {
  color: #fff2df;
  border-bottom-color: rgba(238, 207, 174, .8);
}

.home-page .site-environment-controls {
  top: .95rem;
  right: 1rem;
}

.home-page .environment-icon-button {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
  padding: .5rem;
  color: rgba(244, 226, 204, .84);
  background: rgba(255, 244, 226, .035);
  border-color: rgba(239, 218, 193, .17);
}

/* The tall concept is brand-first. FOXMOSS, not a generic marketing sentence,
   is the dominant first beige-wall read. */
.home-page .studio-hero {
  display: flex;
  min-height: clamp(29rem, 44vw, 36rem);
  padding-top: max(clamp(6.2rem, 9vw, 8rem), calc(var(--home-overlap) + 4.4rem)) !important;
  padding-right: clamp(2rem, 6vw, 4.8rem) !important;
  padding-bottom: clamp(4.2rem, 6vw, 5.4rem) !important;
  padding-left: clamp(2rem, 6vw, 4.8rem) !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-page .home-wordmark-block {
  width: min(100%, var(--reference-copy));
  margin: 0 auto;
}

.home-page .hero-brand-mark {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 auto 1.3rem;
  color: rgba(84, 69, 55, .82);
}

.home-page .hero-brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .home-wordmark {
  margin: 0;
  padding-left: .14em;
  color: #3c2d25;
  font-size: clamp(5.3rem, 10.2vw, 7.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .14em;
  text-wrap: nowrap;
}

.home-page .home-tagline {
  margin: 1.15rem auto 0;
  color: #5c4133;
  font-size: clamp(1.9rem, 3.7vw, 2.35rem);
  font-style: italic;
  line-height: 1.25;
}

.home-page .home-ornament {
  display: grid;
  width: min(100%, 31rem);
  margin: 1.7rem auto 0;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: rgba(91, 66, 51, .66);
}

.home-page .home-ornament::before,
.home-page .home-ornament::after {
  height: 1px;
  content: "";
  background: currentColor;
}

.home-page .home-ornament > span {
  display: block;
  width: .72rem;
  height: .72rem;
  border: 1px solid currentColor;
  rotate: 45deg;
}

/* Shared reference-like centered section title: title mass in the middle, short
   horizontal rules to either side, and a quiet italic subtitle beneath. */
.home-page .reference-section-heading {
  width: min(100%, var(--reference-copy));
  margin: 0 auto clamp(2.4rem, 4vw, 3.2rem);
  text-align: center;
}

.home-page .reference-title-row {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  gap: 1.25rem;
}

.home-page .reference-title-row::before,
.home-page .reference-title-row::after {
  height: 1px;
  content: "";
  background: rgba(91, 66, 51, .62);
}

.home-page .reference-title-row h2 {
  margin: 0;
  color: #3d2e26;
  font-size: clamp(2.8rem, 5.2vw, 3.8rem);
  white-space: nowrap;
}

.home-page .reference-section-heading > p {
  margin: .7rem auto 0;
  color: #60473a;
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.45;
}

/* Project wall: the terrace is still the physical wall, while each project
   becomes a lighter inset plaque. */
.home-page .featured-project {
  display: block;
  margin-top: calc(-1 * var(--home-overlap)) !important;
  padding-right: clamp(1.8rem, 5vw, 3.8rem) !important;
  padding-bottom: clamp(5.8rem, 9vw, 7.8rem) !important;
  padding-left: clamp(1.8rem, 5vw, 3.8rem) !important;
  background: transparent;
  border: 0;
}

.home-page .project-list {
  display: grid;
  width: min(100%, var(--reference-card));
  margin: 0 auto;
  gap: clamp(1.5rem, 3vw, 2.2rem);
}

.home-page .project-card {
  display: grid;
  width: 100%;
  margin: 0;
  padding: clamp(1.8rem, 3.8vw, 2.4rem);
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 16rem);
  gap: 2rem;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 232, 210, .47), rgba(236, 190, 158, .27)),
    rgba(239, 200, 174, .3);
  border: 1px solid rgba(126, 90, 68, .24);
  border-radius: .25rem;
  box-shadow:
    0 8px 20px rgba(100, 69, 51, .09),
    inset 0 1px rgba(255, 245, 231, .34);
}

.home-page .project-card h3 {
  margin: 0 0 .55rem;
  color: #3c2d25;
  font-size: clamp(2.7rem, 4.5vw, 3.35rem);
}

.home-page .project-card p {
  max-width: 34rem;
  margin: 0 0 1.15rem;
  color: #5c4235;
  font-size: 1.58rem;
  line-height: 1.48;
}

.home-page .project-card .project-summary {
  font-style: italic;
}

.home-page .project-card .project-detail {
  font-size: 1.46rem;
  opacity: .92;
}

.home-page .project-card .button-row {
  margin-top: 1.35rem;
}

.home-page .project-card .button-link {
  min-height: 4.2rem;
  padding: .65rem 1.35rem;
  color: #fff1e2;
  background: #6e4938;
  border-color: rgba(97, 61, 45, .7);
  border-radius: 999px;
}

.home-page .project-card .button-link:hover,
.home-page .project-card .button-link:focus {
  color: #fff8ee;
  background: #79503d;
  border-color: #57382c;
}

.home-page .project-card .quiet-link {
  color: #6e4938;
  border-bottom-color: rgba(110, 73, 56, .36);
}

.home-page .project-card .project-status {
  min-height: 0;
  padding: 1.4rem 1.2rem;
  justify-content: center;
  color: #654b3d;
  text-align: center;
  background: rgba(91, 83, 67, .1);
  border: 1px solid rgba(104, 89, 70, .22);
  border-radius: .25rem;
}

.home-page .project-card .project-status .status-kicker {
  color: #725445;
  font-size: 1.08rem;
}

.home-page .project-card .project-status strong {
  color: #47352d;
  font-size: 1.7rem;
}

.home-page .project-card .project-status small,
.home-page .project-card .project-status span {
  color: #654b3d;
}

/* About and contact are centered, quieter terraces in the reference. */
.home-page .about-section,
.home-page .support-section {
  margin-top: calc(-1 * var(--home-overlap)) !important;
  padding-right: clamp(2rem, 6vw, 5rem) !important;
  padding-bottom: clamp(6rem, 9vw, 8rem) !important;
  padding-left: clamp(2rem, 6vw, 5rem) !important;
  border-top: 0;
  text-align: center;
}

.home-page .about-section > p:not(.section-label),
.home-page .support-section > p:not(.section-label) {
  max-width: 43rem;
  margin-right: auto;
  margin-left: auto;
  color: #5b4236;
  line-height: 1.58;
}

.home-page .about-section .about-copy {
  font-style: italic;
}

.home-page .support-section .contact-pill {
  display: inline-flex;
  min-height: 4.4rem;
  margin: .5rem auto 1.3rem;
  padding: .7rem 1.6rem;
  align-items: center;
  justify-content: center;
  color: #fff2e3;
  background: #80604f;
  border: 1px solid rgba(93, 62, 48, .42);
  border-radius: 999px;
}

.home-page .support-section .contact-pill:hover,
.home-page .support-section .contact-pill:focus {
  color: #fff9f1;
  background: #765544;
}

/* Keep the current footer structure for this checkpoint, but center the brand
   mass and make its hierarchy closer to the reference until the footer gets its
   own later modeling pass. */
.home-page .site-footer {
  min-height: 18rem;
  align-items: center;
}

.home-page .footer-brand .eyebrow {
  font-size: 1.5rem;
  letter-spacing: .11em;
}

.home-page .footer-tagline {
  font-size: 1.55rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .home-page .site-header {
    width: calc(100% - 2rem);
    min-height: 4.9rem;
    margin-top: -4.8rem;
    padding-right: 6.8rem;
    padding-left: 1rem;
  }

  .home-page .site-header .main-menu {
    justify-content: flex-start;
    gap: .25rem 1.15rem;
  }

  .home-page .site-header .main-menu a {
    font-size: 1.42rem;
  }

  .home-page .home-wordmark {
    font-size: clamp(4.3rem, 13vw, 6rem);
  }

  .home-page .project-card {
    grid-template-columns: 1fr;
  }

  .home-page .project-card .project-status {
    text-align: left;
  }
}

@media (max-width: 460px) {
  .home-page .site-header {
    width: calc(100% - 1.2rem);
  }

  .home-page .site-header .main-menu li:nth-child(4) {
    display: none;
  }

  .home-page .home-wordmark {
    letter-spacing: .1em;
    padding-left: .1em;
  }

  .home-page .reference-title-row {
    gap: .8rem;
  }

  .home-page .reference-title-row h2 {
    font-size: 2.65rem;
  }
}