/* ---------------------------------------------------------------
   Containers, grids, page frame

   One measure (.wrap) governs every band on the page, so the
   header, sections and footer share a single left edge.
   --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header -------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
/* The rule appears only once the page has moved. */
.site-head.is-stuck { border-bottom-color: var(--rule); }

.head-row {
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Sections ------------------------------------------------------ */

.section {
  position: relative;
  padding-block: var(--sec-y);
}

/* The divider is drawn to the content measure, not the viewport, so
   every rule on the page starts on the same left edge as the text. */
.section.has-rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(
    100% - var(--gutter) * 2,
    var(--wrap) - var(--gutter) * 2
  );
  height: 1px;
  background: var(--rule);
}

/* A single tonal band gives the page a middle without adding colour. */
.band { background: var(--paper-alt); }

/* Section skeleton: label and heading left, matter right. */
.split {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
  }
  /* The heading stays level with the top of its matter. */
  .split > .split-head { padding-top: 4px; }
}

/* Hero ---------------------------------------------------------- */

.hero {
  padding-top: clamp(48px, 9vh, 104px);
  padding-bottom: clamp(56px, 11vh, 128px);
}

.hero-grid {
  display: grid;
  gap: clamp(40px, 7vh, 72px);
  align-items: center;
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(40px, 6vw, 88px);
  }
}

/* Footer -------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(40px, 6vh, 72px) clamp(28px, 4vh, 40px);
}

.foot-grid {
  display: grid;
  gap: clamp(28px, 4vh, 44px);
}

@media (min-width: 720px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

/* On a page with nothing above it, the base row needs no divider. */
.foot-base--flush { margin-top: 0; padding-top: 0; border-top: 0; }