/* TERNE. Minimal reset. Structure lifted from the demo-5 architecture,
   values are TERNE's. Load order: fonts.css, tokens.css, reset.css, main.css. */

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

/* Form and button elements do not inherit the family by default; keep every text
   node computing to the intended family and nothing else. Chrome's UA sheet also
   forces letter-spacing:normal on form controls, which silently dropped every
   button off the tracking ramp, so that is inherited back explicitly. */
button,input,select,textarea,fieldset,legend{font-family:inherit;letter-spacing:inherit}

/* anchor jumps (nav, hero CTAs, the phone menu) land below the fixed header */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 8px)}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  /* 16 / 24 is exactly the measured body pair: leading 1.5, and 24 is on the 4px
     grid. It was 17 / 1.65, which computes to 28.05px and lands off the grid at
     every inherited size below it. Body tracking rides the ramp from here, so
     every span, anchor and label inherits -0.02em unless its band overrides. */
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--track-body);
  font-variant-numeric:tabular-nums; /* every number tabular, BRAND lock */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the one designed ::selection. Almost nobody ships this; it is the cheapest
   signal on the list. Amber wash over the dark ground, warm ink kept readable. */
::selection{background:rgba(232,161,61,.32);color:var(--ink)}

h1,h2,h3{margin:0;font-weight:400;color:var(--ink);font-family:var(--font-display)}
p{margin:0}
/* the UA default is 1em 40px. Left unreset it inset the full-bleed coastal band
   40px from each edge with 17px above and below, and a letterboxed video floating
   inside a dark page reads as an embedded player dropped into the layout rather
   than as the page's own footage. */
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}

/* visually hidden, still read by assistive tech */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);color:var(--on-accent);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r);text-decoration:none}
.skip:focus{left:var(--sp-3);top:var(--sp-3)}

a{color:var(--accent)}

/* amber focus ring, the one accent doing accessibility duty. Selection is never
   drawn this way (see .opt in main.css): a ring means focus, and only focus. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r)}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
}