:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--edge);
}

/* the component demo pads the masthead with its own spacing; on the page the
masthead's contents take the page gutter and sit on the wrap's text axis
(padding-only — full-width paint such as a masthead rule is untouched) */
.nav {
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
}

.nav a {
  white-space: nowrap;
}

.nav a[aria-current='location'] {
  color: var(--color-accent);
}

/* in-page anchor, not
a page link — 'location' is the truthful value; carry the component's active ink */
@media (max-width: 480px) {
  .nav a {
    display: none;
  }
}

/* phone width: the nav
keeps brand + the one action (layout-only — the component's look is
untouched); the full link row's min-content crosses narrow-phone widths */

/* — drawn structure: the 2px rule is the section seam (the deck's header
band as page grammar; rules span the content column, solid — this system
does not fade its rules) — */
.rule2 {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--color-divider);
}

/* — kicker (deck grammar: uppercase, tabular, accent; no hanging dash —
modernist marks are squares, and they belong to lists, not labels) — */
.kicker {
  display: block;
  font-size: 13px;
  line-height: var(--half);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  /* accent-colored SMALL text takes a brighter step for dark mode contrast */
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero {
  padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading));
}

.display {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: clamp(44.5px, 6.57vw, 89px);
  /* law #3: ratio-governed ≈1.06 —
 Archivo's 800 sits tight and all-cap-height; the display-block lattice
 exemption (no 14px step is both tighter than the old look and clear) */
  letter-spacing: -0.02em;
  margin: 0;
  margin-left: -0.058em;
  /* optical left alignment — the deck's measured Archivo 800 value */
  text-box: trim-both cap alphabetic;
}

.display .line {
  display: block;
}

/* law #1: one sentence per line */
.hero .sub {
  font-size: 17px;
  line-height: var(--leading);
  max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}

/* 1.5 units: clears the display's descenders with cluster-tight air (law #3) */
.hero .row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--leading);
}

/* — stat row (in-grammar: red stays a MARK on the light ground — the stat
numerals take the accent at display size, ≥3:1 as large text per the
system's own accent rule; the red FIELD is reserved for the close) — */
.stats {
  padding: calc(2.5 * var(--leading)) 0;
}

.stats .grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: calc(1.5 * var(--leading)) var(--leading);
}

.stat-num {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: calc(2 * var(--leading));
  color: var(--color-accent);
  /* display figures stay proportional — the deck's figure policy */
  margin: 0;
  margin-left: -0.045em;
  /* digits lead — the deck's "0"-population value */
  text-box: trim-both cap alphabetic;
}

.stat-label {
  font-size: 13px;
  line-height: var(--half);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  /* small-text ink on the
 light ground: 70% measures 5.8:1 (the deck's 55% furniture mix is a
 24px large-text convention — at 13px the 4.5:1 bar applies, and 55%
 measures only 3.7:1 here) */
  margin: var(--half) 0 0;
}

/* — feature rows (the deck's ruled-toc grammar: 2px rules ON the seams,
red square marks hanging at the numbers — drawn structure, no cards) — */
.features {
  padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading));
}

.feature {
  display: grid;
  grid-template-columns: minmax(64px, 160px) minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px);
  align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
}

.feature+.feature {
  border-top: 2px solid var(--color-divider);
}

/* the ruled seam — solid, the system's weight */
.f-num {
  position: relative;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: var(--leading);
  color: var(--color-text);
  font-feature-settings: "tnum" 1;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

.f-num::before {
  content: "";
  position: absolute;
  left: -24px;
  top: calc(0.5cap - 5px);
  width: 10px;
  height: 10px;
  background: var(--color-accent);
}

/* the deck's 10px red square,
 hanging left of the number's axis — at narrow widths the gutter folds it away */
@media (max-width: 1280px) {
  .f-num::before {
    display: none;
  }
}

.f-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: var(--leading);
  letter-spacing: -0.01em;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

.f-copy {
  font-size: 15.5px;
  line-height: var(--leading);
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch;
  text-box: trim-both cap alphabetic;
}

/* — imagery split (grayscale photograph — the system prints in black and
white; the box pins the bundled asset's 951×665 ratio so swaps
cover-crop into the same frame) — */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px);
  align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}

.split-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 32px;
  line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em;
  margin: 0;
  text-box: trim-both cap alphabetic;
}

.split-copy .note {
  font-size: 15.5px;
  line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0;
  max-width: 48ch;
  text-box: trim-both cap alphabetic;
}

.split-figure {
  margin: 0;
}

.split-figure image-slot {
  width: 100%;
  aspect-ratio: 951 / 665;
}

/* — quote (hanging punctuation, the deck's measured Archivo advances) — */
.quote {
  padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading));
}

.quote blockquote {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em;
  max-width: 32ch;
  margin: 0;
  text-indent: -0.496em;
  /* hang the opening “ (the deck's measured advance in the 800) */
  text-box: trim-both cap alphabetic;
}

.quote figcaption {
  font-size: 15.5px;
  line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  /* 5.8:1 — see .stat-label */
  margin: calc(var(--leading) - 1cap) 0 0;
  text-indent: -1.209em;
  /* hang the leading em-dash + space (measured in the Regular) */
  text-box: trim-both cap alphabetic;
}

@media (max-width: 720px) {

  /* the phone gutter (--edge bottoms out at 20px) is narrower than the hung
 marks' measured advances, so a hung “ or em-dash would press into or past
 the viewport edge — seat the quote flush below this width; the hang
 returns with the wider gutter */
  .quote blockquote,
  .quote figcaption {
    text-indent: 0;
  }
}

/* — the red poster close (the deck's divider logic: the accent's one field
moment, type reversed to the paper token). COPY on the red is
display-grade only — paper display type measures 3.8:1, the deck
dividers' own derivation. The one small element is the ghost button, a
CONTROL: paper-on-red measures the same 3.8:1, which meets the system's
documented interface-chrome bar (the readme tunes the accent pair to at
least 3:1 — "enough for icons, large text and interface chrome, not for
body copy") — the same bar the system's own accent-filled primary button
label rides everywhere. */
.close {
  background: var(--color-accent);
  color: var(--color-bg);
}

.close .wrap {
  padding-top: calc(3 * var(--leading));
  padding-bottom: calc(3 * var(--leading));
}

.close h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: clamp(36px, 4.45vw, 59.4px);
  /* ≈1.06 —
 display-grade, so it carries the display-block lattice exemption (the
 rhythm probe excludes .display and .close h3 alike) */
  letter-spacing: -0.015em;
  margin: 0;
  margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}

.close h3 .line {
  display: block;
}

.close .row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: calc(1.5 * var(--leading));
}

.close .btn-ghost {
  color: var(--color-bg);
  border-color: var(--color-bg);
}

/* paper outline on the red field */
footer {
  padding: calc(2 * var(--leading)) 0;
  font-size: 13px;
  line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  /* 5.8:1 — see .stat-label */
}

/* — responsive collapse — */
/* the feature grid's fixed-max columns (160 + 420 + gaps) crush the copy
column in the tablet band, so it collapses earlier than the page */
@media (max-width: 880px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--half);
  }

  .f-copy {
    max-width: var(--measure);
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: calc(2.5 * var(--leading));
  }

  .stats .grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split-figure {
    order: -1;
  }
}

/* Review aid: the 28px rhythm drawn as hairlines — debug chrome, toggled by
?baselines or the B key, never part of the look. */
body[data-baselines] {
  position: relative;
}

body[data-baselines]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-accent) 35%, transparent) 0 1px,
      transparent 1px var(--leading)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--half),
      color-mix(in srgb, var(--color-accent) 16%, transparent) var(--half) calc(var(--half) + 1px),
      transparent calc(var(--half) + 1px) var(--leading));
}

/* — contact — */
.contact-section {
  max-width: 600px;
  padding-bottom: calc(4 * var(--leading));
}

.contact-field {
  margin-bottom: var(--space-4);
}

.contact-label {
  margin-bottom: 2px;
}

.contact-hint {
  font-size: 9px;
  margin-bottom: 6px;
}

.contact-message {
  display: none;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.contact-message-title {
  margin-bottom: var(--space-2);
}

.contact-message-text {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}