/* ============================================================================
   BASE — reset, typography, utilities, accessibility primitives, icons.
   Nothing here knows about a specific page or component.
   ========================================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
     line-height:var(--lh-body);font-size:var(--t-base)}
/* Sticky footer on short pages (/track, /compare). Scoped to the site shell: the standalone
   report page centres its sheet with `margin:0 auto`, which in a flex column collapses the
   sheet to max-content and made the whole page scroll sideways on a phone. */
body.site{min-height:100vh;display:flex;flex-direction:column}
body.site>main{flex:1}

img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- headings ---------------------------------------------------------- */
h1{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--track-display);
   margin:.2em 0;text-wrap:balance}
h2{line-height:var(--lh-snug);letter-spacing:-.014em}
h3{line-height:var(--lh-snug)}
h2.section-title{font-size:var(--t-section);text-align:center;margin:0 0 var(--s-6);
                 letter-spacing:var(--track-display);text-wrap:balance}
.eyebrow{font-weight:700;color:var(--red);letter-spacing:var(--track-caps);
         text-transform:uppercase;font-size:var(--t-xs);margin:0 0 var(--s-2);
         display:inline-flex;align-items:center;gap:var(--s-2)}
.lede{font-size:var(--t-lg);color:#33475b;max-width:60ch}

/* ---- utilities --------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5)}
.narrow{max-width:780px}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:var(--t-sm)}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.stack-sm{display:grid;gap:var(--s-2)}
.stack{display:grid;gap:var(--s-4)}

/* `.muted` is tuned for white cards; on the navy surfaces it fell to ~3:1 and read
   as disabled text. Every dark surface remaps the muted family here, once. */
.hero .muted,.page-head .muted,.delivery .muted,.site-foot .muted,.lead-block .muted,
.hero .section-sub,.page-head .section-sub,.delivery .section-sub,
.page-head .crumbs,.page-head .crumbs a{color:var(--on-dark-dim)}
.page-head .crumbs a:hover{color:#fff}

/* ---- accessibility ----------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Keyboard users need to reach the content past a 10-link header. Visible only on focus. */
.skip-link{position:absolute;left:var(--s-4);top:-60px;z-index:100;background:var(--navy);
           color:#fff;padding:var(--s-3) var(--s-5);border-radius:0 0 var(--r-sm) var(--r-sm);
           font-weight:700;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:0;text-decoration:none}
/* One consistent focus ring everywhere instead of the browser default per control. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* ---- icons -------------------------------------------------------------
   All iconography is inline SVG via the `icon()` macro (templates/_icons.html).
   Emoji are banned: they render differently per platform, cannot inherit colour
   and broke the vertical rhythm wherever they sat next to text. */
.i{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;
   fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
.i-lg{width:1.35em;height:1.35em}
.i-xl{width:2em;height:2em}
/* icon + label pairs keep an optical gap and never let the label wrap under */
.with-i{display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}