/* Beat 06 — Contrast. The hard cut. No transition into this — that is the point of it. */
.beat-contrast { background: var(--c-ground); }

.beat-contrast__stage {
  position: relative;
  min-height: 100vh;
  padding: 12vh var(--gutter);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 3rem var(--gutter);
  align-content: start;
  color: var(--c-ink);
}

/* Their own depth diagram, redrawn — three overlapping planes, guidelines p.06. */
.contrast__diagram {
  grid-column: 1;
  width: 120px;
  height: auto;
  fill: none;
  stroke: var(--c-portalith);
  stroke-width: 2;
}

.beat-contrast .principle {
  position: static;
  grid-column: 1;
  max-width: none;
}

.contrast__title {
  grid-column: 1;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.contrast__planes {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  border-top: 1px solid currentColor;
  padding-top: 1.5rem;
}

.contrast__plane h3 {
  margin-bottom: 0.9rem;
  font-family: var(--f-display);
  font-weight: 400;
}
.contrast__plane p { margin-bottom: 0.9rem; }

/* The grammar, as type. Foreground is full black at full size; the other two recede
   exactly as the film planes do elsewhere on the page. */
.contrast__plane[data-tier="foreground"]  { color: var(--c-ink); font-size: 1rem; }
.contrast__plane[data-tier="middleground"]{ color: color-mix(in srgb, var(--c-ink) 72%, var(--c-ground)); font-size: 0.94rem; }
.contrast__plane[data-tier="background"]  { color: color-mix(in srgb, var(--c-ink) 48%, var(--c-ground)); font-size: 0.88rem; }

.contrast__plane[data-tier="foreground"] h3  { font-size: 1.65rem; }
.contrast__plane[data-tier="middleground"] h3{ font-size: 1.45rem; }
.contrast__plane[data-tier="background"] h3  { font-size: 1.3rem; }

/* The index to what was just scrolled through. */
.contrast__index {
  grid-column: 2;
  margin: 4rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid currentColor;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem var(--gutter);
}
/* The gold rule under each principle fills the row on hover — the name moving forward
   onto its own ground, which is the page's grammar applied to a link. */
.contrast__index a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-size: var(--t-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-portalith);
  padding: 0.35rem 0.6rem;
  margin: 0 -0.6rem;
  display: block;
  transition: color 0.28s var(--ease-out);
  /* Without this the ::before below, at z-index -1, paints behind the SECTION's ivory
     background rather than behind the link's own text — so the fill was there the whole
     time and never visible. isolate gives the link its own stacking context to sit in. */
  isolation: isolate;
}

.contrast__index a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-portalith);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s var(--ease-out);
}

.contrast__index a:hover::before,
.contrast__index a:focus-visible::before { transform: scaleY(1); }

.contrast__index a:hover,
.contrast__index a:focus-visible { color: var(--c-ink); }


/* ------------------------------------------------------------------
   The plane artwork, exploded.

   background.jpg, middleground.webp, foreground.webp and arm.webp are registered layers of
   a single photograph. Composited flat they are just the photo again; the value is in
   pulling them apart, so the section demonstrates Background / Middleground / Foreground
   rather than asserting it in three paragraphs.

   Separation is done with scale from a shared centre plus the depth channels — never with
   translation, which would break the registration and read as a printing error. Each layer
   takes exactly the treatment plane.js would give it at that depth, by hand, because this
   composition is static: adding scroll parallax here would break the guarantee that
   Contrast is identical in both motion modes, which is the strongest thing the section has
   to say about not depending on movement.
   ------------------------------------------------------------------ */
.contrast__art {
  /* Full width, not the copy column. Held to column 2 it left a screen-high block of empty
     ivory under the title, and this is the one image on the page that earns the room. */
  grid-column: 1 / -1;
  margin-top: 2vh;
  /* Smaller. Full-bleed it competed with the copy for the section instead of supporting
     it, and this beat's argument is the words. */
  width: min(100%, 980px);
  margin-inline: auto;
  position: relative;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--portalith-radius);
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;
}

.contrast__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 50% 62%;
  /* Each layer keeps its own scale AND its own parallax offset. Both live in one transform
     because a second one would replace the first, not compose with it. */
  will-change: transform;
}

.contrast__layer--bg {
  background-image: url("../assets/brand/background.jpg");
  transform: translateY(var(--bg-y, 0)) scale(1.34);
  filter: saturate(0.15) blur(6px);
  opacity: 0.7;
}

.contrast__layer--mid {
  background-image: url("../assets/brand/middleground.webp");
  transform: translateY(var(--mid-y, 0)) scale(1.30);
  filter: saturate(0.5) blur(1.5px);
  opacity: 0.9;
}

.contrast__layer--fg {
  background-image: url("../assets/brand/foreground.webp");
  transform: translateY(var(--arm-y, 0)) scale(1.30);
}

/* The mark, held. Sharpest thing in the frame, and the only colour in it. */
.contrast__layer--arm {
  background-image: url("../assets/brand/arm.webp");
  transform: translateY(var(--fg-y, 0)) scale(1.34);
}

.contrast__artcap {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--c-ground);
  opacity: 0.72;
}
.contrast__artcap b { font-weight: 500; }

@media (max-width: 900px) {
  .contrast__art { grid-column: 1; aspect-ratio: 16 / 9; }
}