*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-core);font-weight:var(--weight-regular);font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-weight:var(--weight-bold);text-wrap:balance}
h1{font-size:var(--text-2xl);line-height:var(--leading-tight)}
h2{font-size:var(--text-xl);line-height:var(--leading-snug)}
h3{font-size:var(--text-lg);line-height:var(--leading-heading)}
h4{font-size:var(--text-md);line-height:var(--leading-heading)}
p{margin:0 0 var(--space-4)}
strong,b{font-weight:var(--weight-bold)}
em,i{font-style:normal;font-weight:var(--weight-bold)} /* Museo Sans italics are too weak — bold carries emphasis */
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
/* The dual white/petrol ring is the default focus state everywhere — nothing falls back
   to the browser's own outline colour, which is unbranded and can render as an off-brand
   hue depending on OS/browser. Components with their own focus/hover JS (Button, SideNav,
   Accordion…) draw the same ring inline; this covers everything else. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;border-radius:2px;box-shadow:var(--focus-ring)}