/* Field family v2 — canonical cross-site geometry and role tokens.
   This file is copied into each static site at build time. Do not edit copies. */
:root {
  --ff-shell-max: 1440px;
  --ff-shell-inset: 14px;
  --ff-mast-height: 66px;
  --ff-mast-height-mobile: 60px;
  --ff-footer-height: 96px;
  --ff-footer-height-mobile: 108px;
  --ff-touch: 44px;
  --ff-rule-width: 1px;
  --ff-canvas: #c8c9ba;
  --ff-paper: #eee5d2;
  --ff-paper-light: #f7f0df;
  --ff-ink: #17201d;
  --ff-orange: #d9673f;
  --ff-mustard: #d1a73a;
  --ff-spruce: #285044;
  --ff-lake: #356b76;
  /* THE OFFSET LADDER, ruled 2026-08-27 against a 1960s Alfa Romeo GT 1300 Junior
     interior as the reference idiom: thin section, brightwork spent once as a seam
     rather than a slab. Four roles, one weight each -- never a fifth in between.
     Before this ruling, hard-offset shadows across the family ranged from 1px to
     9px with no system; Trailmark alone had nine distinct weights doing four jobs.
       --ff-offset-pressed : a control at the instant it is pressed
       --ff-offset-control : a button/pill/thumbnail at rest
       --ff-offset-card    : a card or panel at rest -- the loudest resting weight
       --ff-offset-lift    : any of the above on hover/focus, one step up from its
                              resting weight (control -> card, card -> lift)
     Exception: an element under ~90px (a mobile thumbnail, a small badge) may sit
     one step lighter than this ladder specifies -- the same weight reads heavier
     at small size, which is a proportion fact, not a reason to add a fifth token. */
  --ff-offset-pressed: 1px;
  --ff-offset-control: 2px;
  --ff-offset-card: 3px;
  --ff-offset-lift: 4px;
  --ff-shadow-x: 3px;
  --ff-shadow-y: 3px;
  --ff-grain: .055;
  --ff-motion-fast: 120ms;
  --ff-motion-base: 220ms;
  --ff-ease: cubic-bezier(.2,.75,.2,1);
  --ff-display-xl: clamp(42px, 4.6vw, 74px);
  --ff-display-lg: clamp(34px, 3.4vw, 56px);
  --ff-display-md: clamp(28px, 2.4vw, 40px);
  --ff-deck: clamp(18px, 1.35vw, 22px);
  --ff-body-lead: clamp(18px, 1.25vw, 21px);
  --ff-body: clamp(17px, 1.1vw, 19px);
  --ff-meta: 13px;
  --ff-utility: 12px;

  /* ---- Grid and rhythm (added 2026-08-25) ----------------------------------
     The unit is DERIVED, not chosen: 44px is the locked touch target (physical
     fingertip, already law above), and 4px is the coarsest unit that divides it
     without remainder -- 44 = 4 x 11. Everything below is built on that.

     The Unigrid derived its 4 x 8.25in panel from the 25 x 38in press sheet, so
     the grid came out of the material rather than being imposed on it. Same
     move here: the fingertip and the character are the two physical constants a
     screen still has, so they are what the system is cut from.

     Measured before writing: the family carried 96 distinct ad-hoc spacing
     values (Field Matter 44, Trailmark 34, portfolio 18), 12 arbitrary pixel
     text widths, and seven unrelated line-heights. Twelve steps, three measures
     and four rhythms replace all of it. Vignelli's stated purpose applies
     exactly: reduce routine decisions so effort concentrates on quality.

     Named by unit multiple, not t-shirt size: --ff-space-10 is ten units, 40px.
     The derivation stays visible at every call site, and a step can be inserted
     without renaming its neighbours -- which t-shirt naming could not survive.
     It failed on day one: Field Matter's pads, tuned by eye and already good,
     needed 40, 80 and 128, and the nine-step scale would have forced the page
     to shrink to fit a number rather than the number fitting the page. */
  --ff-unit: 4px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;
  --ff-space-24: 96px;
  --ff-space-32: 128px;

  /* Measure is set in ch because the constraint is the character, not the
     pixel: the eye's saccade fixes the comfortable line at roughly 45-75
     characters regardless of medium or type size. Exactly one 46ch existed in
     the whole family before this; every other column was an arbitrary px width
     that broke its own measure the moment the type scale flexed. */
  --ff-measure-prose: 66ch;
  --ff-measure-deck: 50ch;
  --ff-measure-caption: 40ch;

  /* Ruder's sequence is unit, line, rhythm -- the line is the unit of vertical
     rhythm the way the slug was in metal. Four roles, matching the three-role
     type system plus display. */
  --ff-lh-display: 1.05;
  --ff-lh-deck: 1.35;
  --ff-lh-prose: 1.6;
  --ff-lh-utility: 1.2;

  /* surfaces the browser paints for us unless told otherwise */
  --ff-select-bg: var(--ff-mustard);
  --ff-select-ink: var(--ff-ink);
  --ff-scroll-thumb: var(--ff-spruce);
  --ff-scroll-track: rgba(23, 32, 29, .07);
  --ff-scroll-size: 12px;
  --ff-focus: var(--ff-orange);
}

/* Trailmark runs dark; the same thumb on a dark track disappears. */
:root[data-theme="dark"] {
  --ff-select-bg: var(--ff-mustard);
  --ff-select-ink: #14201c;
  --ff-scroll-thumb: var(--ff-mustard);
  --ff-scroll-track: rgba(239, 231, 215, .09);
  --ff-focus: var(--ff-mustard);
}

.ff-shell {
  width: min(var(--ff-shell-max), calc(100% - (2 * var(--ff-shell-inset))));
  margin: var(--ff-shell-inset) auto;
}

.ff-mast { min-height: var(--ff-mast-height); }
.ff-footer { min-height: var(--ff-footer-height); }

.ff-control {
  min-width: var(--ff-touch);
  min-height: var(--ff-touch);
}

@media (max-width: 820px) {
  .ff-shell { width: 100%; margin: 0; }
  .ff-mast { min-height: var(--ff-mast-height-mobile); }
  .ff-footer { min-height: var(--ff-footer-height-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ff-motion-fast: 0ms; --ff-motion-base: 0ms; }
}


/* ─────────────────────────────────────────────────────────────────────────
   NO DEFAULTS.
   Everything below is a surface the browser will style itself if we stay
   quiet: the selection flash, the scrollbar, the tap highlight, the caret,
   list markers, the focus ring. Each one is small, and each one is the
   place a designed page gives itself away as a document in a browser.
   Loaded by all five page types, so this is the single floor for the family.
   ───────────────────────────────────────────────────────────────────────── */

/* iOS inflates text in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The selection flash is the most-seen unstyled surface on any site. */
::selection { background: var(--ff-select-bg); color: var(--ff-select-ink); text-shadow: none; }

/* Square, ruled, no rounded pill -- the same language as the buttons. */
* { scrollbar-width: thin; scrollbar-color: var(--ff-scroll-thumb) var(--ff-scroll-track); }
::-webkit-scrollbar { width: var(--ff-scroll-size); height: var(--ff-scroll-size); }
::-webkit-scrollbar-track { background: var(--ff-scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--ff-scroll-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ff-focus); background-clip: content-box; }
::-webkit-scrollbar-corner { background: var(--ff-scroll-track); }

/* Grey iOS flash on every tap; we do our own press states. */
html { -webkit-tap-highlight-color: transparent; }

/* Typing surfaces: the caret and native control tints. */
input, textarea, select { caret-color: var(--ff-focus); }
:root { accent-color: var(--ff-focus); }
::placeholder { color: currentColor; opacity: .55; }
::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Blue-black default bullets. */
::marker { color: var(--ff-focus); }

/* Scroll-chaining rubber-band past the page edge. */
html, body { overscroll-behavior-y: none; }

/* Anchors landing flush under a fixed masthead. */
:target { scroll-margin-top: calc(var(--ff-mast-height) + 16px); }

/* A visible ring everywhere, so no page relies on the browser's own. */
:focus-visible { outline: 3px solid var(--ff-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}