/* Wall-first terrace phase. Each semantic section is one scrolling object:
   full-viewport beige material plane underneath, centered normal DOM content above it. */
#content {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible;
}

.scene-block { position: relative; }

.site-ground-block {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.ecology-terrace {
  --terrace-copy-width: 56rem;
  --terrace-top-clip: inset(0);
  position: relative;
  z-index: var(--scene-depth, 2);
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  max-width: none !important;
  margin-top: clamp(3.8rem, 6vw, 5.8rem) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  padding-top: clamp(2.4rem, 4.8vw, 3.4rem) !important;
  padding-right: max(1.4rem, calc((100vw - var(--terrace-copy-width)) / 2)) !important;
  padding-bottom: clamp(2.4rem, 4.8vw, 3.4rem) !important;
  padding-left: max(1.4rem, calc((100vw - var(--terrace-copy-width)) / 2)) !important;
  color: #34261e;
  background: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(91, 72, 48, .16) !important;
  border-left: 0 !important;
  box-shadow:
    inset 0 -1px 0 rgba(83, 65, 44, .055),
    0 12px 24px rgba(49, 36, 25, .09) !important;
  backdrop-filter: none !important;
}

/* Truthful first-paint fallback. Before JS calculates the tiny broken contour,
   this is a normal full beige slab; after enhancement it takes the same clip as
   the procedural material canvases. */
.ecology-terrace::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: #d3aa8f;
  clip-path: var(--terrace-top-clip);
  -webkit-clip-path: var(--terrace-top-clip);
}

.terrace-wall-canvas,
.terrace-side-mottling-canvas,
.terrace-fracture-canvas,
.terrace-side-fracture-canvas,
.terrace-top-highlight-canvas,
.terrace-weathering-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  clip-path: var(--terrace-top-clip);
  -webkit-clip-path: var(--terrace-top-clip);
}

.terrace-side-mottling-canvas[hidden],
.terrace-fracture-canvas[hidden],
.terrace-side-fracture-canvas[hidden],
.terrace-top-highlight-canvas[hidden],
.terrace-weathering-canvas[hidden] {
  display: none !important;
}

.ecology-terrace > :not(.terrace-wall-canvas):not(.terrace-side-mottling-canvas):not(.terrace-fracture-canvas):not(.terrace-side-fracture-canvas):not(.terrace-top-highlight-canvas):not(.terrace-weathering-canvas) {
  position: relative;
  z-index: 1;
}

.ecology-terrace:first-child {
  margin-top: clamp(4.6rem, 7vw, 6.8rem) !important;
}

.ecology-terrace h1,
.ecology-terrace h2,
.ecology-terrace h3 {
  color: #3b281e;
  text-shadow: 0 1px rgba(255, 248, 232, .18);
}

.ecology-terrace p,
.ecology-terrace li,
.ecology-terrace span,
.ecology-terrace small { color: #35281f; }

.ecology-terrace .hero-lede,
.ecology-terrace .intro-summary,
.ecology-terrace .app-principle { color: #392b22; }

.ecology-terrace .section-label,
.ecology-terrace .status-kicker { color: #76503a; }

.ecology-terrace a:not(.button-link) {
  color: #6a3e29;
  border-bottom-color: rgba(106, 62, 41, .45);
}

.ecology-terrace a:not(.button-link):hover,
.ecology-terrace a:not(.button-link):focus {
  color: #42261a;
  border-bottom-color: #42261a;
}

.ecology-terrace .button-link {
  color: #fff5e7;
  background: #5d3829;
  border-color: #7b513e;
  box-shadow: 0 5px 14px rgba(49, 31, 23, .16);
}

.ecology-terrace .button-link:hover,
.ecology-terrace .button-link:focus {
  color: #fffaf2;
  background: #704432;
  border-color: #8f624c;
}

.ecology-terrace .project-status {
  color: #34261e;
  background: rgba(118, 96, 68, .08);
  border-color: rgba(74, 52, 36, .2);
  box-shadow: inset 0 1px rgba(255, 250, 235, .18);
  backdrop-filter: none;
}

.ecology-terrace .project-status strong,
.ecology-terrace .project-status span,
.ecology-terrace .project-status small { color: #3d2a20; }

.ecology-terrace.about-section,
.ecology-terrace.support-section,
.ecology-terrace.story-section,
.ecology-terrace.privacy-section {
  border-top: 0 !important;
}

@media (max-width: 720px) {
  .ecology-terrace {
    --terrace-copy-width: calc(100vw - 3.6rem);
    margin-top: 3.4rem !important;
    padding-top: 2.3rem !important;
    padding-bottom: 2.3rem !important;
  }

  .ecology-terrace:first-child { margin-top: 4.2rem !important; }
}

@media (max-width: 420px) {
  .ecology-terrace {
    --terrace-copy-width: calc(100vw - 2.8rem);
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}