/* ===========================================================================
   AOS Land Management
   Built to concept 3 - The Estimate Machine.
   Mockup: design/mockup/home-1200.png (1200px 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: #F8F8F0;
  --c2: #F0F0E8;
  --c3: #002010;
  --c4: #001010;

  /* --- 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);
}

/* The skip link (partials/header.html): off-canvas until a keyboard focuses
   it, then pinned top-left above everything. Restyle the colours to the
   design; keep it off-canvas, not display:none, or it cannot be focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 16px; outline: 3px solid #fff; outline-offset: 2px; }