/* ===========================================================================
   New Heights Consumer Advocates
   Built to concept 1 - Clear Path.
   Mockup: design/mockup/home-1024.png (1024px native, built at 1440px).

   Every value below traces to a measurement in design/SPEC.md. If a number
   here is not in SPEC.md, it is a bug - not a preference.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults"). Sizes
   are written in 1440px design pixels as `N * var(--u)`; --u renders
   them at 1200/1440 at 1200 and above and shrinks below it, and the
   header, page and footer are one 1200 column. Floor a size for legibility
   with max() on the same line: max(16px, calc(17 * var(--u))).
   =========================================================================== */

:root {
  --u: min(calc(1200px / 1440), 100vw / 1440);

  /* --- Colour ------------------------------------------------------------
     Sampled off the mockup with `measure.py --probe X Y`, never named by eye.
     Rename these to their ROLE (--ink, --paper, --accent) as the design
     becomes clear; the hex values are already correct. */
  --c1: #183830;
  --c2: #F8F8F8;
  --c3: #F8F8F0;

  /* --- Layout ------------------------------------------------------------
     TODO Phase 1: measure and fill in. */
  --wrap: __px;            /* content max-width */
  --gut: __px;             /* left/right gutter at full width */

  /* --- Type --------------------------------------------------------------
     TODO Phase 1: one line per distinct size in the mockup. Line-height is
     measured baseline to baseline across two lines, never guessed. */
  --f-h1: __px;
  --f-h2: __px;
  --f-body: __px;

  /* --- Rhythm ------------------------------------------------------------
     The values most often inflated. Section top and bottom padding are
     frequently DIFFERENT - measure both. */
  --sec-pt: __px;
  --sec-pb: __px;
  --gap-head-body: __px;
}

/* No bleed: one 1200 column, bands and photographs included. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }

/* A minimal reset. Everything else belongs to the design. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; }

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