/* E — B (primary ground) + 03 Interference.
   Desktop: copy left, interference field right. Below 900px: copy first, field as a band before the footer. */
:root {
  --headline-size: clamp(64px, 7vw, 108px);
  --field-height: clamp(360px, 62vh, 600px);
  --field-feather: 10%;
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: var(--space-4);
  align-items: center;
  min-width: 0;
}
.stage .introduction {
  padding-block: var(--space-4);
  --od-gap: var(--space-4);
}
.field {
  min-width: 0;
  height: var(--field-height);
  /* decorative: edges feather into the ground */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--field-feather), #000 calc(100% - var(--field-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--field-feather), #000 calc(100% - var(--field-feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--field-feather), #000 calc(100% - var(--field-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--field-feather), #000 calc(100% - var(--field-feather)), transparent);
  mask-composite: intersect;
}
.field canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .field { animation: field-in 400ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both; }
}
@keyframes field-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 1023px) {
  :root { --gutter: 48px; }
}
@media (max-width: 899px) {
  :root {
    --headline-size: clamp(56px, 13vw, 88px);
    --field-height: clamp(200px, 56vw, 280px);
    --field-feather: 12%;
  }
  .stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); align-items: start; }
  .stage .introduction { padding-block: var(--space-5) 0; }
  .field { margin-bottom: var(--space-3); }
}
@media (max-width: 767px) {
  :root { --gutter: 24px; }
  .stage .introduction { padding-top: var(--space-4); }
}
@media (max-width: 374px) {
  :root { --headline-size: clamp(40px, 13vw, 56px); }
}