.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding-inline: var(--page-pad);
  border-bottom: var(--rule-width) solid rgb(18 22 21 / 24%);
  background: linear-gradient(112deg, rgb(245 247 246 / 92%), rgb(216 221 219 / 88%));
  transition:
    background-color var(--state-fast) var(--ease-physical),
    box-shadow var(--state-fast) var(--ease-physical),
    backdrop-filter var(--state-fast) var(--ease-physical);
}

.site-header[data-scrolled="true"] {
  background: rgb(238 241 239 / 86%);
  box-shadow: 0 12px 32px rgb(18 22 21 / 10%);
  backdrop-filter: blur(20px) saturate(118%);
}

.opening,
.movement--recognise,
.movement--proof > section,
.movement--practice > section,
.section,
footer {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.opening {
  /* One light field, two columns: the proposition and the instrument drawn
     straight onto the drafting grid beside it, both centred in the first
     viewport. */
  --opening-pad: clamp(2.25rem, 4.5vh, 3.75rem);
  --opening-pad-bottom: clamp(4rem, 8vw, 8rem);

  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2.25rem);
  min-height: calc(100svh - var(--header-height));
  padding-top: var(--opening-pad);
  padding-bottom: var(--opening-pad-bottom);
}

/* The light pool sits behind the instrument: the figure is drawn in the
   brightest part of the field. */
.opening::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(44rem 32rem at 74% 50%, rgb(255 255 255 / 72%), transparent 70%);
  content: "";
  pointer-events: none;
}

.hero-copy {
  grid-column: 1 / 7;
  align-self: center;
  min-width: 0;
}

.hero-instrument {
  display: grid;
  grid-column: 7 / 13;
  align-content: center;
  align-self: stretch;
  justify-items: center;
  min-width: 0;
  margin: 0;
}

.movement {
  position: relative;
  border-top: var(--rule-width) solid rgb(18 22 21 / 24%);
}

.movement--recognise {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) clamp(1rem, 2vw, 2.25rem);
  align-items: end;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.movement--recognise > .eyebrow { grid-column: 1 / 13; margin-bottom: 0; }

.movement--recognise > h2 {
  grid-column: 1 / 8;
  margin-bottom: 0;
}

.movement--recognise > .decisions-lede {
  grid-column: 8 / 13;
  padding-bottom: 0.4rem;
}

/* The menu runs the full measure beneath the statement. */
.movement--recognise > .decision-index--menu { grid-column: 1 / 13; }

.movement--proof {
  width: 100%;
  color: var(--on-smoke);
  background:
    radial-gradient(circle at var(--specular-x) var(--specular-y), rgb(238 242 240 / 9%), transparent 38rem),
    radial-gradient(140% 90% at 50% 110%, rgb(0 0 0 / 30%), transparent 56%),
    linear-gradient(rgb(238 242 240 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(238 242 240 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(178deg, #1d2422 0%, #171d1b 44%, #111614 100%);

  /* Grid pinned to the viewport; light and field travel with the passage. */
  background-attachment: scroll, scroll, fixed, fixed, scroll;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 22%),
    inset 0 -1px rgb(255 255 255 / 12%),
    0 24px 60px rgb(18 22 21 / 16%);
}

.movement--proof > section,
.movement--practice > section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5) clamp(1rem, 2vw, 2.25rem);
  padding-top: clamp(6rem, 9vw, 9rem);
  padding-bottom: clamp(6rem, 9vw, 9rem);
}

.movement--proof > section + section,
.movement--practice > section + section {
  border-top: var(--rule-width) solid rgb(183 189 186 / 32%);
}

/* The closing chapters breathe a step tighter than the proof passage, so the
   page's rhythm compresses as it approaches the enquiry. */
.movement--practice > section {
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

#method > h2 {
  grid-column: 1 / 6;
  margin-bottom: 0;
}

#method > ol {
  grid-column: 7 / 13;
}

/* A centred-artifact beat: the specimen is the section, not a column in it. */
#deliverable { justify-items: center; text-align: center; }

#deliverable > h2 {
  grid-column: 2 / 12;
  margin-bottom: 0;
}

#deliverable > .section-lede { grid-column: 3 / 11; }

/* Held to a document measure — a report page, not a banner. */
#deliverable > .report-specimen {
  grid-column: 1 / 13;
  width: min(100%, 50rem);
  margin-top: var(--space-5);
  text-align: left;
}

/* The review owns its own stage rather than sitting on the 12-column grid. */
#sample-analysis { display: block; }

.pa-body--map { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.pa-body--copyleft { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }

.movement--practice {
  /* Clips the assay interlude's viewport-width bleed against the scrollbar
     without creating a scroll container. */
  overflow-x: clip;
  background:
    linear-gradient(rgb(18 22 21 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(18 22 21 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(128deg, rgb(245 247 246 / 86%), rgb(216 221 219 / 70%) 52%, rgb(238 241 239 / 92%));

  /* Grid pinned to the viewport. */
  background-attachment: fixed, fixed, scroll;
}

#engagements > h2 {
  grid-column: 1 / 5;
  margin-bottom: 0;
}

#engagements > [data-engagement-field] { grid-column: 6 / 13; }

#name {
  min-height: clamp(34rem, 55vw, 48rem);
  align-content: center;
}

#name > h2 { grid-column: 1 / 4; }
#name > p { grid-column: 4 / 12; }

/* A wide-band beat: the principles run the full measure as one ruled row. */
#principles > h2 {
  grid-column: 1 / 10;
  margin-bottom: var(--space-4);
}

#principles > ul { grid-column: 1 / 13; }

/* A centred-statement beat: the practice says one thing, in the middle. */
#about { justify-items: center; text-align: center; }

#about > h2 {
  grid-column: 2 / 12;
  margin-bottom: var(--space-4);
}

#about > p { grid-column: 4 / 10; }

#contact {
  width: min(calc(100% - (2 * var(--page-pad))), calc(var(--content-max) - (2 * var(--page-pad))));
  margin-block: clamp(3rem, 7vw, 7rem);
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--titanium);
  border-radius: 0;
  color: var(--graphite);
  background: linear-gradient(118deg, var(--pearl), var(--silver) 58%, var(--mist));
}

.contact-intro { grid-column: 1 / 6; }
#contact > form { grid-column: 7 / 13; }

.section {
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--header-height));
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

footer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-4);
  max-width: none;
  padding-top: clamp(4rem, 9vw, 9rem);
  padding-bottom: var(--space-5);
  border-top: var(--rule-width) solid rgb(238 242 240 / 18%);
  background:
    linear-gradient(rgb(238 242 240 / 3.5%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(238 242 240 / 3.5%) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--graphite);

  /* Grid pinned to the viewport. */
  background-attachment: fixed, fixed, scroll;
  color: var(--on-smoke);
  overflow: hidden;
}

/* The closing moment: the wordmark ghosted into the graphite at page end. */
footer::after {
  position: absolute;
  bottom: -0.26em;
  left: 50%;
  color: rgb(238 242 240 / 4.5%);
  content: "assayed." / "";
  font-size: clamp(7rem, 19vw, 19rem);
  font-stretch: 86%;
  font-weight: 740;
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

footer > * {
  position: relative;
  z-index: 1;
}

footer p { margin: 0; }
footer p:last-child { text-align: right; }

@media (min-width: 80rem) {
  .hero-copy { grid-column: 1 / 8; }
  .hero-instrument { grid-column: 8 / 13; }
}

@media (max-width: 63.999rem) {
  .opening {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-copy,
  .hero-instrument {
    grid-column: 1;
  }

  .hero-copy { max-width: 42rem; }

  .hero-instrument {
    max-width: 40rem;
    margin-top: var(--space-6);
  }

  .decision-index { position: static; }
}

@media (max-width: 48rem) {
  :root { --header-height: 4.125rem; }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    min-height: var(--header-height);
  }

  .opening {
    --opening-pad: var(--space-6);
    --opening-pad-bottom: var(--space-7);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }


  .movement--recognise,
  .movement--proof > section,
  .movement--practice > section,
  #contact {
    display: block;
    min-height: 0;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .movement--recognise > h2,
  #method > h2,
  #deliverable > h2,
  #engagements > h2,
  #principles > h2,
  #about > h2 {
    margin-bottom: var(--space-6);
  }

  #name { min-height: 0; }
  #name > h2 { margin-bottom: var(--space-7); }
  #about > p { margin-bottom: 0; }

  #contact {
    width: calc(100% - (2 * var(--page-pad)));
    margin-block: var(--space-5);
    padding-inline: var(--space-4);
  }

  .contact-intro { margin-bottom: var(--space-7); }

  footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  footer p:last-child { text-align: left; }
}

@media (max-width: 20rem) {
  :root { --page-pad: 0.75rem; }

  .site-header { gap: 0.35rem; }
  .opening { --opening-pad: var(--space-6); }
  #contact { padding-inline: var(--space-3); }
  footer { gap: var(--space-2); }
}