/* base.css: reset, fonts, type roles, focus, utilities. Every value comes from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:72px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:var(--t-body);line-height:1.6}
main{display:block}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky-high);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:.005em;line-height:1}
.script{font-family:var(--font-script);font-weight:400}

/* Motion contract. Two ways to reach the still state, one set of rules:
   html.reduce : set by arrival.js when prefers-reduced-motion matches
   html:not(.js): the script never ran
   Component files select on both. The media query below is the belt to that pair of braces. */
html.reduce *,html.reduce *::before,html.reduce *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}