/* Minimal element defaults so consumers inherit the voice without a reset war. */
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--fw-bold);letter-spacing:var(--ls-display);line-height:var(--lh-display-loose);margin:0}
h4,h5,h6{font-family:var(--font-sans);color:var(--text-heading);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin:0}
p{margin:0}
em,i{font-family:var(--font-display);font-style:italic}
a{color:var(--link);text-decoration:none;border-bottom:1px solid currentColor;transition:color var(--dur-fast) var(--ease-editorial),border-color var(--dur-fast) var(--ease-editorial)}
/* :where() so the hover colour weighs nothing and any component that sets its
   own text colour keeps it. Written plainly it outranked every one of them: a
   link dressed as a solid button repainted its label navy on a navy fill, and
   the footer's links went navy on the navy footer. Excluding them one by one
   only made this rule heavier and the problem worse. A base default should sit
   under the components, not on top of them. */
a:where(:hover){color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--blue-light);color:var(--blue-deep)}