/* ─────────────────────────────────────────────────────────────────────────────
   Elumvia — marketing site
   Palette is lifted from the Elumvia app tokens (app/web/src/index.css) so the
   two surfaces read as one brand: warm sand neutrals, a green accent, and the
   warm gold that carries the lamp/Psalm 119:105 idea.
   Layout follows the reference brief — full-bleed art direction, wide margins,
   one idea per screen, hairline rules, outlined controls, no fills.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Sand — app tokens, light mode */
  --sand-50: #faf8f5;
  --sand-100: #f3efe9;
  --sand-200: #e8e1d7;
  --sand-300: #d8cdbe;
  --sand-600: #8a7f70;
  --sand-900: #2b2723;

  /* Dark warm — the app's dark surfaces, used here as art direction */
  --ink: #1c1a17;
  --ink-raised: #242019;
  --gold: #9c7a3c;
  --gold-light: #c9a768;
  --green: #3d6b63;

  /* Page-level roles, remapped under prefers-color-scheme: dark */
  --page: var(--sand-50);
  --page-alt: var(--sand-100);
  --text: var(--sand-900);
  --text-muted: var(--sand-600);
  --hairline: var(--sand-200);
  --accent: var(--green);
  --shadow-lift: 0 2rem 4rem -1.5rem rgb(43 39 35 / 0.3);

  --measure: 62ch;
  --gutter: clamp(1.5rem, 6vw, 8rem);
  /* Section padding. Two adjacent sections each contribute this, so the gap between
     them is double the value — at 16vh that put ~290px of nothing between the claim
     and the first product shot, which read as a dropout rather than as breathing room. */
  --section-y: clamp(4.5rem, 11vh, 8.5rem);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Dark roles. Applied from the system preference unless the visitor has explicitly
   chosen light, and applied unconditionally when they've explicitly chosen dark.
   The two blocks are identical by necessity — a media query and an attribute
   selector can't share one rule. Keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #24201a;
    --page-alt: #1c1a17;
    --text: var(--sand-100);
    --text-muted: #a89e8e;
    --hairline: #322d25;
    --accent: #82beb3;
    --shadow-lift: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  --page: #24201a;
  --page-alt: #1c1a17;
  --text: var(--sand-100);
  --text-muted: #a89e8e;
  --hairline: #322d25;
  --accent: #82beb3;
  --shadow-lift: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Anchored sections must clear the fixed masthead. */
[id] {
  scroll-margin-top: 5.5rem;
}

a {
  color: inherit;
}

/* Available to screen readers and crawlers, absent from the layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--page);
  color: var(--text);
  border: 1px solid var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Shared type ──────────────────────────────────────────────────────────── */

/* Labels take the voice of book marginalia — a serif italic aside — rather than the
   wide-tracked uppercase caps that read as consumer-electronics minimalism. */
.label {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Display type is set as a title page would be: serif, normal weight, generous
   leading. The sans is kept for body and interface text only. */
.display {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.25rem + 3.6vw, 4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.008em;
  max-width: 20ch;
  text-wrap: balance;
}

.display--sm {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
}

.lede {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 1.5rem + 8vw, 8rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.wordmark--sm {
  font-size: 1.75rem;
}

/* A solid, square-shouldered block — deliberately not the outlined pill that reads
   as borrowed minimalism. Filled and warm, so the one action on the page is unambiguous. */
.button {
  display: inline-block;
  padding: 1.0625rem 2.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--text);
  color: var(--page);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.button:hover,
.button:focus-visible {
  opacity: 0.85;
}

/* Hero variant: outlined, so the single solid button on the page stays the access
   CTA and the hero keeps its air. Square-shouldered — still not a pill. */
.button--quiet {
  background: none;
  border-color: rgba(201, 167, 104, 0.5);
  color: var(--gold-light);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.button--quiet:hover,
.button--quiet:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink);
  opacity: 1;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

/* Three tracks: menu left, company centred, theme right. The outer tracks are equal
   width so the company name sits on the true centre of the page, not on the centre
   of whatever space the two controls happen to leave. */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem var(--gutter);
  /* 96%, not 88%. This bar is fixed over a dark hero carrying a bright gold button;
     at 88% that button ghosted through the company name while scrolling. The blur
     keeps the frosted character — the opacity is what stops the bleed-through. */
  background: color-mix(in srgb, var(--page) 96%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

/* Fully transparent with light text — but ONLY at rest at the top of the page. The
   JS drops this attribute the moment anything scrolls, because nothing must ever be
   able to pass behind a see-through fixed bar. */
.masthead[data-over-hero] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--sand-100);
}

/* Sans, light, lightly tracked — deliberately NOT the wordmark's serif. The company
   and the product are different things and must not share a voice: serif is Elumvia's,
   The bar's centre was once the company name in a tracked sans, kept off the serif
   so the two names could not be confused; with one name it takes the product's face
   with the hero. Presence here comes from size and letter-spacing, not from the face. */
/* The centre of the bar. This was the company name in a tracked sans, deliberately
   not the wordmark's serif so the two names couldn't be confused. With Resonate
   Works off the site there is one name, so it takes the product's face. */
.masthead__wordmark {
  grid-column: 2;
  justify-self: center;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  /* Hidden until the hero is actually scrolled past — the hero already shows the
     wordmark at full size, and two Elumvias in one viewport reads as a mistake.
     This keys off `data-past-hero`, NOT `data-over-hero`: the latter clears after
     4px of scroll (it controls the bar's transparency) and would reveal the
     wordmark while the hero still fills the screen. Opacity rather than
     visibility, so the element keeps its grid track and the menu and theme
     controls never shift. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.masthead[data-past-hero] .masthead__wordmark {
  opacity: 1;
  pointer-events: auto;
}

/* Menu button — two bars, not three, with the word beside it. */
.masthead__menu {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 160ms ease;
}
.masthead__menu:hover,
.masthead__menu:focus-visible {
  opacity: 1;
}

.bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.5rem;
}
.bars::before,
.bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 240ms ease, opacity 200ms ease;
}
.bars::before {
  top: 0;
}
.bars::after {
  bottom: 0;
}

/* Open state: the two bars cross. */
.masthead__menu[aria-expanded="true"] .bars::before {
  transform: translateY(3.5px) rotate(45deg);
}
.masthead__menu[aria-expanded="true"] .bars::after {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 30rem) {
  .masthead__menu-label {
    display: none;
  }
}

/* ── Menu panel ───────────────────────────────────────────────────────────── */

/* Drops beneath the masthead rather than covering the page — three links don't
   warrant a full-screen takeover. Links are set large and serif, in keeping with
   the rest of the page's voice. */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 0.25rem;
  padding: 7rem var(--gutter) 2.5rem;
  background: var(--page);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}

.menu[hidden] {
  display: none;
}

.menu a {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.5;
  text-decoration: none;
  color: var(--text);
  width: max-content;
  transition: opacity 160ms ease;
}
.menu a:hover,
.menu a:focus-visible {
  opacity: 0.6;
}

/* Half-filled disc — reads as a light/dark switch without adding a word or a
   chrome-heavy control to a page built on restraint. */
.masthead__theme {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, transform 300ms ease;
}
.masthead__theme:hover,
.masthead__theme:focus-visible {
  opacity: 1;
}
.masthead__theme[aria-pressed="true"] svg {
  transform: rotate(180deg);
}
.masthead__theme svg {
  transition: transform 300ms ease;
}

@media (max-width: 34rem) {
  .masthead__nav a:not(.masthead__cta) {
    display: none;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* The lockup is centred in the viewport, full stop. The imprint line is taken out
   of flow so it can't pull the centre downward the way a third flex item did. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 7rem var(--gutter);
  text-align: center;
  color: var(--sand-100);
  background: var(--ink);
  /* With the copy cut back, the light has to carry the hero. Two sources: a pool
     behind the wordmark so the name reads as lit rather than placed on black, and
     the warm rise off the floor. This is the lamp — it's the only imagery we have,
     so it does the work a product photograph would. */
  background-image:
    radial-gradient(
      62% 44% at 50% 42%,
      rgba(201, 167, 104, 0.19) 0%,
      rgba(201, 167, 104, 0.06) 46%,
      transparent 78%
    ),
    radial-gradient(
      120% 85% at 50% 118%,
      rgba(201, 167, 104, 0.2) 0%,
      rgba(201, 167, 104, 0.06) 38%,
      transparent 72%
    );
}

/* Optical correction. The bounding box carries slack the eye doesn't see — leading
   above the wordmark's cap-height, descender space below the citation — so centring
   the box leaves the visible ink sitting low. This lifts it so the INK centres on
   the middle of the viewport. Value is measured, not guessed; see the hero notes in
   README before changing it. */
.hero__lockup {
  transform: translateY(var(--hero-optical-shift, -0.25rem));
}

/* "Introducing" — sans, so it reads as an announcement over the name rather than as
   part of the wordmark. Quiet enough not to compete with what it introduces. */
.hero__eyebrow {
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(216, 205, 190, 0.6);
}

.hero__action {
  margin: clamp(2.25rem, 5vh, 3.5rem) 0 0;
}

/* Scroll cue. The hero fills the viewport with nothing peeking below it, so without
   this there's no signal the page continues. Out of flow so it can't pull the lockup
   off centre — the same reason the old imprint line was taken out of flow. */
.hero__more {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: rgba(216, 205, 190, 0.55);
  transition: color 200ms ease;
}

.hero__more:hover,
.hero__more:focus-visible {
  color: var(--gold-light);
}

/* A slow drift, not a bounce — 5px over 2.4s reads as an invitation rather than a
   nag. The global prefers-reduced-motion rule stops it outright. */
.hero__more svg {
  animation: hero-drift 2.4s ease-in-out infinite;
}

@keyframes hero-drift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* margin-inline:auto is load-bearing — the max-width makes this box narrower than the
   lockup, and text-align:center only centres the text *inside* it, not the box itself. */
.hero__verse {
  margin: clamp(1.5rem, 3.5vh, 2.5rem) auto 0;
  max-width: 34ch;
}

.hero__verse p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--sand-300);
}

.hero__verse cite {
  display: block;
  margin-top: 1.125rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

/* ── Claim ────────────────────────────────────────────────────────────────── */

.claim {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.claim .label {
  margin-bottom: 2.5rem;
}

.claim .display {
  max-width: 22ch;
}

/* The accent rule belongs to the block, not to each paragraph — otherwise the
   product statement and the company principle read as two unrelated pull-quotes
   instead of one position stated in two parts. */
.claim__statement {
  margin-top: 2.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
}

.claim .lede {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
}

.claim .lede + .lede {
  margin-top: 1.125rem;
}

/* ── Showcase ─────────────────────────────────────────────────────────────── */

/* The screenshots are wide desktop captures, so each one gets its own band rather
   than a column beside its caption: caption first at reading width, then the shot
   run large underneath. Caption alignment alternates to give the two some rhythm. */
.showcase {
  padding: var(--section-y) var(--gutter);
  display: grid;
  gap: var(--section-y);
}

.shot {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.shot__note {
  max-width: 46ch;
}

/* Side-by-side from 48rem up: the text sits beside the screenshot rather than above
   it, which drops each shot to roughly half width and shortens the section. Equal
   columns keep every screenshot the same size; only the side alternates — default
   shots put the image on the right, .shot--right puts it on the left. Below 48rem the
   shot stays a single stacked column (text above image), the phone-friendly layout. */
@media (min-width: 48rem) {
  .shot {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .shot__note {
    grid-column: 1;
    grid-row: 1;
  }

  .shot__frame {
    grid-column: 2;
    grid-row: 1;
  }

  .shot--right .shot__note {
    grid-column: 2;
  }

  .shot--right .shot__frame {
    grid-column: 1;
  }
}

/* The hairline is load-bearing, not decoration. Both screenshot sets are near the
   page colour in their own theme — warm off-white on the light page, warm dark on
   the dark page — so without an explicit edge the product shot dissolves into the
   background and stops reading as an object. The shadow alone doesn't hold it. */
.shot__frame {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--page-alt);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}

.shot__frame img {
  width: 100%;
}

/* Theme-matched captures. The light pair is the default so a no-JS or
   no-preference visitor gets the light page's screenshots; the dark pair takes
   over under the same two conditions that switch the palette. Keep these
   selectors in step with the palette blocks at the top of the file. */
.shot__img--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot__img--dark {
    display: block;
  }
  :root:not([data-theme="light"]) .shot__img--light {
    display: none;
  }
}

:root[data-theme="dark"] .shot__img--dark {
  display: block;
}
:root[data-theme="dark"] .shot__img--light {
  display: none;
}
.shot__frame[data-missing] img {
  display: none;
}

.shot__note h3 {
  margin: 0.875rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 22ch;
  text-wrap: balance;
}

.shot__note p:last-child {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
}

/* ── Features ─────────────────────────────────────────────────────────────── */

/* A plain list, not a card grid — no boxes, no icons. Hairline per row is the only
   structure, which keeps ten items from reading as ten objects. */
.features {
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hairline);
}

.features .label {
  margin-bottom: 1.5rem;
}

.features__grid {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 4rem);
}

.features__grid > div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

.features__grid dt {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--text);
}

.features__grid dd {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Principles ───────────────────────────────────────────────────────────── */

.principles {
  padding: var(--section-y) var(--gutter);
  background: var(--page-alt);
  border-block: 1px solid var(--hairline);
}

.principles__lede {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
}

.principles__grid {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.principles__grid li {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.principles__grid .label {
  margin-bottom: 1rem;
  color: var(--accent);
}

.principles__grid li p:last-child {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── Access ───────────────────────────────────────────────────────────────── */

.access {
  padding: var(--section-y) var(--gutter);
  color: var(--sand-100);
  background: var(--ink);
  background-image: radial-gradient(
    100% 120% at 8% 0%,
    rgba(201, 167, 104, 0.16) 0%,
    transparent 62%
  );
}

.access .label {
  color: var(--gold-light);
  margin-bottom: 2rem;
}

.access .lede {
  margin: 1.5rem 0 0;
  color: var(--sand-300);
}

.access__actions {
  margin: 3rem 0 0;
}

.access .button {
  background: var(--gold-light);
  color: var(--ink);
}

.access .fineprint {
  margin: 2.5rem 0 0;
  max-width: 42ch;
  color: rgba(216, 205, 190, 0.6);
}

/* ── Colophon ─────────────────────────────────────────────────────────────── */

.colophon {
  display: grid;
  gap: 2.5rem;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .colophon {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .colophon__legal {
    grid-column: 1 / -1;
  }
}

.colophon__brand .fineprint {
  margin: 0.5rem 0 0;
}

.colophon__brand .fineprint em {
  font-family: var(--serif);
  color: var(--text);
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.8125rem;
}

/* Full body colour, not the muted ramp: at --text-muted these sat near 3:1 on the
   page, under WCAG AA — and legal links (Privacy, Terms) need to read as real,
   conspicuous links, which also matters for the terms being enforceable. */
.colophon__nav a {
  text-decoration: none;
  color: var(--text);
  transition: opacity 160ms ease;
}
.colophon__nav a:hover,
.colophon__nav a:focus-visible {
  opacity: 0.65;
}

.colophon__legal {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

/* ── Legal / prose pages ──────────────────────────────────────────────────── */

/* Standalone document pages (privacy, terms) reuse the masthead and colophon but
   drop the hero and the menu. The masthead ships solid with its wordmark shown, so
   those pages carry `data-past-hero` and never `data-over-hero`; this block owns the
   document body. Top padding clears the fixed masthead, since there's no hero to. */
.legal {
  max-width: var(--measure);
  margin-inline: auto;
  padding: calc(4.75rem + var(--section-y)) var(--gutter) var(--section-y);
}

.legal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.008em;
}

.legal__updated {
  margin: 0.75rem 0 0;
}

.legal__body {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* Section headings — serif, quiet, in the page's title-page voice rather than as
   loud labels. The lede that opens the document sits in body colour, everything
   under a heading is muted. */
.legal__body h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
}

.legal__body p {
  margin: 0;
  color: var(--text-muted);
}

.legal__lede {
  color: var(--text);
}

.legal__body a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.legal__contact {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}