/* ============================================================
   Base — reset, typography, layout primitives
   Paper ground, Ink type, Archivo with real weight contrast.
   Brand book build, 2026-08-19.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  /* Anchors must not land under the sticky header. */
  scroll-padding-top: calc(var(--masthead-h) + 1rem);
  /* Native scroll only. The previous build lerped window.scrollTo on
     wheel events, which fought the user and felt laggy. Removed. */
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* The UA sheet's `[hidden] { display: none }` is a single attribute
   selector, so any component rule that sets `display` beats it. The scrub
   controller hides the timeline's pause button with `.hidden = true` and
   `.reel__toggle { display: inline-flex }` quietly won, leaving a dead
   Play button sitting on a video that is driven by scroll. */
[hidden] { display: none !important; }
a { color: inherit; }

/* Kills the 300ms double-tap zoom delay, and replaces the default blue
   tap flash with something that belongs to this palette. */
a, button, label, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(20, 17, 12, 0.12);
}

h1, h2, h3, h4 { scroll-margin-top: calc(var(--masthead-h) + 1rem); }

/* Headings carry weight. The previous build set 400 on everything and
   let size do the work; the brand book reverses that, because this is a
   builder and the type is meant to have heft. H1 700, H2 800. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: var(--w-h2);
  color: var(--ink);
}
h1 { font-weight: var(--w-h1); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- focus ----------
   Brand book: 3px Sunset outline at 3px offset, on everything
   interactive. Sunset rather than Sunset Button because a focus ring is
   a graphic, not a fill, and it has to stay visible on dark grounds. */
:focus-visible { outline: 3px solid var(--sunset); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--gutter); top: -100%;
  z-index: 200;
  padding: var(--s-12) var(--s-24);
  background: var(--night);
  color: var(--paper);
  border-radius: var(--r-btn);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-16); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

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

.measure { max-width: var(--measure); }
.measure-wide { max-width: 52rem; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }

.stack > * + * { margin-top: var(--s-24); }
.stack-sm > * + * { margin-top: var(--s-12); }
.stack-lg > * + * { margin-top: var(--s-36); }

/* ---------- type roles ---------- */

.display {
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
  text-wrap: balance;
}

.h-lg {
  font-size: var(--fs-h-lg);
  font-weight: var(--w-h2);
  line-height: var(--lh-h-lg);
  letter-spacing: var(--track-h-lg);
  color: var(--ink);
  text-wrap: balance;
}

.h {
  font-size: var(--fs-h);
  font-weight: var(--w-h2);
  line-height: var(--lh-h);
  letter-spacing: var(--track-h);
  color: var(--ink);
  text-wrap: balance;
}

.h-sm {
  font-size: var(--fs-h-sm);
  font-weight: var(--w-h1);
  line-height: var(--lh-h-sm);
  letter-spacing: var(--track-h-sm);
  color: var(--ink);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.006em;
  color: var(--ink);
}

.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--cedar); }
.dim { color: var(--cedar); }
.ink { color: var(--ink); }

/* Eyebrow. Sits above a section opener, and the brand book caps it at
   one per three sections so it stays a signal rather than a texture. */
.eyebrow {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cedar);
  margin: 0;
}
.eyebrow--slate { color: var(--cedar); }

/* ---------- links ---------- */
/* A run of links inside a lead paragraph IS the services list, and five
   full-weight orange underlines in a row read as link soup rather than as
   a sentence. Hairline until hover. */
.lead .link { border-bottom-color: rgba(174, 71, 24, 0.32); }
.lead .link:hover { border-bottom-color: currentColor; opacity: 1; }

.prose a:not(.btn),
.link {
  color: var(--sunset-hi);          /* 5.11:1 on Paper */
  font-weight: var(--w-med);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease);
}
.prose a:not(.btn):hover,
.link:hover { opacity: 0.66; }

/* ---------- surfaces ----------
   `.on-night` is the name in the brand system. `.on-walnut` is kept as an
   alias because the nine pages this run does not touch still use it, and
   a half-renamed class is worse than a legacy one. */
.on-night, .on-walnut {
  background: var(--night);
  color: var(--paper);
}
.on-night h1, .on-night h2, .on-night h3,
.on-night .display, .on-night .h-lg, .on-night .h, .on-night .h-sm,
.on-walnut h1, .on-walnut h2, .on-walnut h3,
.on-walnut .display, .on-walnut .h-lg, .on-walnut .h, .on-walnut .h-sm { color: var(--paper); }
.on-night .lead, .on-walnut .lead { color: var(--paper); }
.on-night .eyebrow, .on-walnut .eyebrow { color: var(--gold); }
.on-night .dim, .on-night .caption,
.on-walnut .dim, .on-walnut .caption { color: var(--on-dark-soft); }
.on-night .link, .on-walnut .link { color: var(--gold); }

/* ---------- motion: quiet ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}