/* When the procedural habitat loads successfully it becomes the visual world.
   The older botanical photograph remains in site.css as the progressive-enhancement
   fallback, but it should not visually fight the live stone/plant renderer. */
html::before {
  background-color: #7e715c !important;
  background-image:
    radial-gradient(circle at 28% 18%, rgba(228, 210, 177, .12), transparent 34%),
    linear-gradient(165deg, rgba(164, 145, 113, .22), rgba(76, 68, 57, .18)) !important;
  background-position: center !important;
  background-size: cover !important;
}

.site-ecology,
.site-ecology-foreground {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

/* The v5 iPad audit showed a 680px reading shell inside an 834px camera: only
   77px of habitat on either side. At the scale where leaf veins and rock relief
   can actually read, that is still too close to a decorative stripe. A 620px
   shell gives the habitat about 107px per side while #content's own padding keeps
   the prose measure around 540px — still comfortably readable. */
@media (min-width: 721px) {
  body {
    width: min(620px, calc(100% - 4rem));
  }
}

/* The base site stacks these layouts only when the whole viewport is <=720px.
   Once the living-wall camera intentionally narrows the reading shell, an iPad
   can have an 834px viewport but only ~540px of usable content inside #content.
   Stack the project/status columns in that tablet band so the wider habitat does
   not make prose and headings unnaturally narrow. */
@media (min-width: 721px) and (max-width: 900px) {
  .featured-project,
  .product-topline {
    grid-template-columns: 1fr;
  }

  .project-status,
  .status-card {
    min-height: 0;
    text-align: left;
  }
}

.site-environment-controls {
  position: absolute;
  z-index: 4;
  top: .8rem;
  right: .9rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.environment-icon-button {
  display: inline-grid;
  width: 3.2rem;
  min-width: 3.2rem;
  height: 3.2rem;
  min-height: 3.2rem;
  padding: .55rem;
  place-items: center;
  color: var(--paper-muted);
  background: rgba(255, 242, 220, .045);
  border: 1px solid rgba(255, 243, 222, .18);
  border-radius: 50%;
  cursor: pointer;
  transition: color 140ms ease-out, background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}

.environment-icon-button svg {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.environment-icon-button:hover,
.environment-icon-button:focus-visible {
  color: var(--paper);
  background: rgba(255, 242, 220, .11);
  border-color: var(--copper);
}

.environment-icon-button:hover {
  transform: translateY(-1px);
}

.environment-icon-button:active {
  transform: translateY(0);
}

.environment-icon-button[aria-pressed="true"] {
  color: var(--cream);
  background: rgba(231, 179, 152, .12);
  border-color: rgba(231, 179, 152, .58);
}

.environment-icon-button:disabled {
  cursor: wait;
  opacity: .6;
  transform: none;
}

.environment-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.environment-source {
  align-self: center;
  color: var(--paper-muted);
  font-size: 1.05rem;
  white-space: nowrap;
}

.environment-footer-audio {
  flex: 0 0 auto;
  margin: -.45rem 0;
}

.site-footer nav {
  align-items: center;
}

.ecology-responsive-surface {
  translate: var(--ecology-surface-x, 0) 0;
  rotate: var(--ecology-surface-rotate, 0deg);
}

@media (prefers-reduced-motion: reduce) {
  .environment-icon-button {
    transition: none;
  }

  .environment-icon-button:hover,
  .environment-icon-button:active {
    transform: none;
  }

  .ecology-responsive-surface {
    translate: 0 0 !important;
    rotate: 0deg !important;
  }
}

@media (max-width: 420px) {
  .site-environment-controls {
    top: .65rem;
    right: .65rem;
    gap: .25rem;
  }

  .environment-icon-button {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: .5rem;
  }

  .environment-icon-button svg {
    width: 1.65rem;
    height: 1.65rem;
  }
}