/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: editorial · macrostructure: Marquee Hero
 * H6 Photographic-fold knobs: image=portrait plate centred, caption=lower-right,
 *   text=none in fold (the masthead names the salon), underlay=hairline index strip
 * nav: N6-leaning masthead on N9 bones (mark + name left, single CTA right)
 * footer: Ft1 Mast-headed
 * features: F3 Tabular spec sheet · proof: T1 Pull-quote w/ marginalia · CTA: C3 Typographic link
 * theme: custom (tuned) · vibe: "espresso, bone, gallery light, whisper of rose"
 * paper: oklch(97.7% 0.006 75) · accent: oklch(64% 0.12 18)
 * display: Cabinet Grotesk 200 · body: EB Garamond
 * axes: light / geometric-sans / chromatic-other (dusty-rose ~18°)
 * enrichment: real photography (client-supplied, flat-field graded to paper)
 * studied: no · context: user-provided · motion: 1 primitive (one orchestrated load reveal)
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, p, dl, dd, figure, blockquote, table { margin: 0; }
a { color: inherit; }

/* ── Base ──────────────────────────────────────────────────────── */
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tnum { font-variant-numeric: tabular-nums lining-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--space-md); top: calc(var(--space-2xl) * -1);
  z-index: var(--z-sticky);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: var(--track-nav); text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: var(--space-md); }

:where(a, button):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.statement :where(a, button):focus-visible,
.foot :where(a, button):focus-visible { outline-color: var(--color-focus-inv); }

/* ── Shared type roles ─────────────────────────────────────────── */
.label,
.head__title,
.strip,
.foot__word,
.visit__label,
.chair__label,
.sheet th,
.facts dt,
.quote__src {
  font-family: var(--font-display);
  font-style: normal;
}

/* ── N9 · Edge-aligned minimal nav ─────────────────────────────── */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-lg) var(--page-gutter) var(--space-sm);
}
.nav__brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__mark { width: clamp(3.25rem, 6vw, 4.25rem); height: auto; }

/* The salon's full name sits beside the mark. Below 46rem there isn't room for
   it on the same row as the mark and the CTA, so it drops to its own line —
   a two-row masthead, not a wrapped link. */
.nav__line {
  order: 3;
  flex: 1 0 100%;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.nav__line .dot { color: var(--color-accent); }

.nav__actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
/* Set to match .nav__line exactly — the masthead reads as one typographic
   register across the name and both actions. */
.nav__cta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-ink-2);
  white-space: nowrap;
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { color: var(--color-accent); }
}
.nav__cta:active,
.nav__brand:active { opacity: 0.66; }

/* Above 46rem the name sits inline beside the mark, CTA hard-right. */
@media (min-width: 46rem) {
  .nav { flex-wrap: nowrap; }
  .nav__line {
    order: 2;
    flex: 0 1 auto;
    margin-inline-end: auto;
    white-space: nowrap;
  }
  .nav__line,
  .nav__cta { letter-spacing: var(--track-label); }
  .nav__actions { order: 3; }
}

/* ── Hero — the plate IS the fold ──────────────────────────────── */
.hero {
  padding-inline: var(--page-gutter);
  padding-block: var(--space-sm) var(--space-xl);
  background: var(--color-paper);
}

/* No display type over the photograph — the masthead names the salon and the
   fold belongs entirely to the seven of them. */
.hero__frame {
  width: min(100%, var(--plate-w));
  margin-inline: auto;
}
.hero__plate { margin: 0; }

/* Caption, then the one way into the page from the fold — stacked and set in
   the same register, so the pair reads as a single margin note. */
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}
.hero__caption,
.hero__jump {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero__jump {
  text-decoration: none;
  padding-bottom: var(--space-3xs);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% var(--rule-hair);
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero__jump:hover { color: var(--color-accent); }
}
.hero__jump:active { opacity: 0.66; }

/* No edge fade: the stylists and the poufs run to the frame edge, so any mask
   would clip them. The plate's studio wall is graded onto --color-paper
   instead, which makes the boundary disappear without touching the subjects. */
.hero__plate img { width: 100%; }
@media (min-width: 60rem) {
  /* Tight above, generous below — the padding pulls the fold into the strip
     that follows rather than floating the photograph in the middle. */
  .hero { padding-block: var(--space-sm) var(--space-2xl); }
}

/* ── Index strip — hairline row, no cards ──────────────────────── */
.strip {
  display: grid;
  border-block: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.strip__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 3.75rem;
  padding: var(--space-md) var(--page-gutter);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.strip__item:last-child { border-block-end: 0; }
.strip__arrow {
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .strip__item:hover { background: var(--color-paper-3); }
  .strip__item:hover .strip__arrow { color: var(--color-accent); }
}
.strip__item:active { opacity: 0.66; }
/* Two-up first: "Cuts, Styling & Extensions" is long enough that a four-up row
   only has the room for it past 90rem. */
@media (min-width: 48rem) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__item {
    padding-inline: var(--space-lg);
    border-inline-end: var(--rule-hair) solid var(--color-rule);
  }
  .strip__item:nth-child(even) { border-inline-end: 0; }
  .strip__item:nth-child(odd)  { padding-inline-start: var(--page-gutter); }
  .strip__item:nth-last-child(-n + 2) { border-block-end: 0; }
}

@media (min-width: 90rem) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip__item {
    padding-inline: var(--space-lg);
    border-block-end: 0;
    border-inline-end: var(--rule-hair) solid var(--color-rule);
  }
  .strip__item:first-child { padding-inline-start: var(--page-gutter); }
  .strip__item:last-child  { border-inline-end: 0; }
}

/* ── Statement band — the hard colour change ───────────────────── */
.statement {
  background: var(--color-espresso);
  color: var(--color-on-espresso);
  padding: var(--space-3xl) var(--page-gutter);
}
.statement__line {
  max-width: 22ch;
  font-size: var(--text-display-s);
  font-weight: 400;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}
.statement__meta {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-inv);
}
.statement__note {
  max-width: 46ch;
  color: var(--color-on-espresso-2);
}
.facts { display: grid; gap: var(--space-lg); }
.facts dt {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-on-espresso-2);
}
.facts dd {
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-md);
}
.facts__qual { color: var(--color-on-espresso-2); font-size: var(--text-base); }

@media (min-width: 60rem) {
  .statement { padding-block: var(--space-4xl) var(--space-3xl); }
  .statement__meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3xl);
  }
  .facts { grid-auto-flow: column; gap: var(--space-3xl); }
}

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding: var(--space-3xl) var(--page-gutter); }

/* S2 · Hanging head — stacked single column, never tag-left */
.head { margin-bottom: var(--space-2xl); }
.head--tight { margin-bottom: var(--space-xl); }
.head__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}
.head__lede {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

/* ── F3 · Tabular spec sheet ───────────────────────────────────── */
.sheet {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}
.sheet tr { border-top: var(--rule-hair) solid var(--color-rule); }
.sheet tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet th,
.sheet td {
  display: block;
  padding: 0;
  text-align: start;
  font-weight: 400;
  vertical-align: baseline;
}
.sheet th {
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}
.sheet td {
  padding-top: var(--space-xs);
  color: var(--color-ink-2);
}
.sheet tr td:last-child { padding-bottom: var(--space-lg); }
.sheet__note {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.sheet__footnote {
  max-width: 52ch;
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

@media (min-width: 48rem) {
  .sheet th,
  .sheet td { display: table-cell; padding-block: var(--space-lg); }
  .sheet th { width: 24%; padding-inline-end: var(--space-lg); }
  .sheet td:nth-of-type(1) { width: 56%; padding-inline-end: var(--space-lg); }
  .sheet__note { width: 20%; text-align: end; white-space: nowrap; }
  .sheet tr td:last-child { padding-bottom: var(--space-lg); }
}

/* ── Work — horizontal filmstrip ───────────────────────────────── */
.work {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.work__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.work__count {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-muted);
}
.work__nav { display: flex; gap: var(--space-xs); }

.work__btn {
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-ink);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work__btn:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); }
}
.work__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.work__btn:active:not(:disabled) { opacity: 0.66; }
.work__btn:disabled {
  color: var(--color-muted);
  border-color: var(--color-rule-2);
  opacity: 0.55;
  cursor: not-allowed;
}

/* The strip runs to the page edge so it reads as continuing past the viewport.
   The scroll lives inside this element — the document never scrolls sideways. */
.work__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--page-gutter) * -1);
  padding-inline: var(--page-gutter);
  scroll-padding-inline-start: var(--page-gutter);
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .work__viewport { scroll-behavior: auto; }
}
.work__viewport::-webkit-scrollbar { display: none; }
.work__viewport:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.work__track {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.work__item {
  flex: 0 0 auto;
  inline-size: clamp(14rem, 62vw, 22rem);
  scroll-snap-align: start;
}
.work__item picture { display: block; }
.work__item img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-paper-3);
}

/* ── Stylist roster ────────────────────────────────────────────── */
/* Services and the roster share the paper surface, so a hairline carries the
   section break between them. */
.stylists { border-top: var(--rule-hair) solid var(--color-rule); }

.roster {
  display: grid;
  gap: var(--space-2xl) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) {
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A final card left alone on its row centres under the middle column
     rather than hanging off the left edge. Scoped to a last item that is
     also the start of a row, so adding an eighth stylist won't misplace it. */
  .stylist:nth-child(3n + 1):last-child { grid-column: 2; }
}

.stylist { display: flex; flex-direction: column; }
.stylist picture { display: block; }
.stylist__portrait {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-paper-3);
}
.stylist__name {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 200;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}
.stylist__role {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.stylist__role .dot { color: var(--color-accent); }
/* Bios sit behind a disclosure so the roster stays scannable. Native
   <details> — it works without JS and is keyboard-operable for free. */
.bio { margin-top: var(--space-md); }
.bio__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}
.bio__toggle::-webkit-details-marker { display: none; }
.bio__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.bio__toggle:active { opacity: 0.66; }
@media (hover: hover) and (pointer: fine) {
  .bio__toggle:hover { color: var(--color-accent); }
}
.bio__less { display: none; }
.bio[open] .bio__more { display: none; }
.bio[open] .bio__less { display: inline; }
.bio__chev {
  display: inline-block;      /* transform is a no-op on inline elements */
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-out);
}
.bio[open] .bio__chev { transform: rotate(180deg); }

.stylist__bio {
  max-width: 46ch;
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
}

/* The column stretches its children; links must not, or their underlines
   would run the full width of the card. */
.stylist__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
}
.stylist__links .link { align-self: start; margin-top: 0; }

/* ── T1 · Pull-quote with marginalia ───────────────────────────── */
.reviews { background: var(--color-blush); }
.quotes { display: grid; gap: var(--space-2xl); }
.quote {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-thick) solid var(--color-accent);
}
.quote blockquote p {
  font-size: var(--text-lg);
  line-height: 1.34;
}
/* Attribution is the source, not the reviewer — the quotes run unnamed. */
.quote__src {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (min-width: 60rem) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  /* break the even rhythm — the middle quote hangs lower */
  .quotes > :nth-child(2) { margin-top: var(--space-2xl); }
}

/* ── Visit ─────────────────────────────────────────────────────── */
.visit__grid { display: grid; gap: var(--space-2xl); }
.visit__col { display: grid; gap: var(--space-sm); align-content: start; }
.visit__label,
.chair__label {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.visit__body { max-width: 46ch; }
.visit__fine {
  max-width: 46ch;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-muted);
}

.hours { display: grid; gap: var(--space-2xs); margin-block: var(--space-2xs); }
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 20rem;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.hours dt { color: var(--color-ink-2); }
.hours dd { margin: 0; white-space: nowrap; }
.hours__closed { color: var(--color-muted); }

/* C3 · Typographic link */
.link {
  justify-self: start;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  padding-bottom: var(--space-3xs);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% var(--rule-hair);
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-short) var(--ease-out);
}
.link--strong { font-size: var(--text-md); letter-spacing: var(--track-nav); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--color-accent); }
}
.link:active { opacity: 0.66; }

.chair {
  margin-top: var(--space-3xl);
  padding: var(--space-xl);
  background: var(--color-paper-3);
}
.chair__body { max-width: 48ch; margin-top: var(--space-xs); color: var(--color-ink-2); }

@media (min-width: 60rem) {
  .visit__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--space-3xl);
  }
  .chair {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-xl);
    padding: var(--space-2xl);
  }
  .chair__body { margin-top: 0; }
}

/* ── Ft1 · Mast-headed footer ──────────────────────────────────── */
.foot {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-2xl) var(--page-gutter);
  background: var(--color-espresso);
  color: var(--color-on-espresso);
}
.foot__mark { width: 4.5rem; height: auto; }
.foot__word {
  font-size: var(--text-md);
  font-weight: 300;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}
.foot__tag,
.foot__links,
.foot__credit {
  font-size: var(--text-sm);
  color: var(--color-on-espresso-2);
}
.foot__tag { margin-top: var(--space-2xs); }
.foot__links { margin-top: var(--space-lg); }
.foot__body a,
.foot__tag a {
  white-space: nowrap;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid currentColor;
  transition: color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot__body a:hover,
  .foot__tag a:hover { color: var(--color-accent-soft); }
}
.foot__body a:active { opacity: 0.66; }
/* Touch targets — extend the hit area to 44px without disturbing the
   typographic rhythm the underlines depend on. */
@media (pointer: coarse), (max-width: 47.99rem) {
  .nav__brand, .nav__cta, .link, .hero__jump,
  .foot__links a, .foot__tag a { position: relative; }
  .nav__brand::after, .nav__cta::after, .link::after, .hero__jump::after,
  .foot__links a::after, .foot__tag a::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--space-2xs) * -1);
    top: 50%;
    height: var(--tap-min);
    transform: translateY(-50%);
  }
}

@media (min-width: 60rem) {
  .foot {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xl);
    padding-block: var(--space-3xl);
  }
  .foot__credit { justify-self: end; align-self: end; }
}

/* ── In-page anchors ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.section, [id] { scroll-margin-block-start: var(--space-xl); }

/* ── Motion — one orchestrated entrance, nothing after ─────────── */
.js .hero__plate {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .js .hero__plate { transform: none; animation-delay: 0ms; }
}