/* Figma 359:3803: two editorial spreads with reversed columns. */
.nature {
  position: relative;
  z-index: 2;
  isolation: isolate;
  container-type: inline-size;
  background: #fff;
  color: #111;
  color-scheme: light;
  font: 12px/1.17 "VEYL Louize", Georgia, serif;
  scroll-margin-top: 76px;
}
.nature__spread, .nature__mirror {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0;
  align-items: start;
}
.nature__mirror { gap: 8px; }
.nature__features, .nature__studies {
  display: grid;
  gap: 8px;
  min-width: 0;
  grid-template-rows: 22.22cqw minmax(16cqw, auto) auto;
  align-content: start;
}
.nature__studies { grid-template-rows: 22.22cqw minmax(22.22cqw, max-content) minmax(15.56cqw, auto); }
.nature__opening { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nature__thumbs { grid-column: 5; display: grid; gap: 8px; align-content: start; }
.nature__thumbs .nature__media { aspect-ratio: 1.67; }
.nature__feature, .nature__lead, .nature__plates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.nature__feature > .nature__notes, .nature__forest { grid-column: span 2; }
.nature__notes { display: grid; gap: 24px; align-content: start; min-width: 0; }
.nature__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nature__offset { display: flex; align-items: end; }
.nature__offset .nature__media { width: min(100%, 148px); aspect-ratio: 148/200; }
.nature__closing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nature__circles { grid-area: 1 / 2 / 2 / 4; }
.nature__archive { grid-area: 1 / 4 / 2 / 5; }
.nature__forest > .nature__media, .nature__circles > .nature__media { height: 100%; }
.nature__heading, .nature__label { font: 12px/1 "VEYL Fraktion", monospace; }
.nature__heading { padding: 7px 6px; background: #f1f1f1; letter-spacing: .25em; }
.nature__copy, .nature__label { padding: 8px 6px 0; }
.nature__copy { letter-spacing: -.03em; }
.nature p { margin: 0; }
.nature__media { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
/* Frames participate in the grid; only their oversized inner layers move. */
.nature__layer { position: absolute; inset: -12% 0; transform: translate3d(0, var(--nature-shift, 0px), 0); }
/* Extra image area covers the frame throughout its full parallax travel. */
.nature__layer img, .nature__layer video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fill the frame even for legacy contain panels: no exposed edge during travel. */
.nature__media--contain img, .nature__media--contain video { object-fit: cover; }
.nature__media.film::after { content: none; }
.nature__media .film__video { transition: opacity .45s ease; }
.nature__media .film__toggle { right: 8px; bottom: 8px; }

@media (max-width: 850px) {
  .nature { scroll-margin-top: 90px; }
  .nature__spread, .nature__mirror { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px 12px 16px; }
  .nature__features, .nature__studies { grid-template-rows: auto; }
  .nature__opening { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .nature__thumbs { grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nature__membrane { aspect-ratio: 2.8; }
  .nature__feature { grid-template-columns: minmax(0, 1fr); }
  .nature__feature > .nature__notes { grid-column: 1; }
  .nature__feature > .nature__media { width: 45%; aspect-ratio: 4/5; }
  .nature__lead { min-height: 44cqw; }
  .nature__plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nature__plates > .nature__notes { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nature__plates > .nature__media { aspect-ratio: 3/4; }
  .nature__closing { min-height: 31cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .nature__layer { transform: none; }
  .nature__media .film__video { transition: none; }
}


/* Keep cards in document flow while the collage slides over them. */
.press-gallery { position: relative; background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .press-gallery > .press-observations {
    position: sticky;
    top: min(0px, calc(100svh - var(--press-height, 100svh)));
  }
}