/* Reset, type scale, layout utilities. All type goes through the --font-* / --display-* variables. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;letter-spacing:var(--body-tracking);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer}

:root{--hero-size:calc(74px*var(--display-scale));--h1-size:calc(64px*var(--display-scale));--h2-size:calc(44px*var(--display-scale));--h3-size:calc(22px*var(--display-scale))}
@media (max-width:600px){:root{--hero-size:calc(44px*var(--display-scale));--h1-size:calc(40px*var(--display-scale));--h2-size:calc(32px*var(--display-scale));--h3-size:calc(20px*var(--display-scale))}}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-tracking);line-height:var(--display-lh)}
h1{font-size:var(--h1-size)} h2{font-size:var(--h2-size)} h3{font-size:var(--h3-size);line-height:1.15}
.display-hero{font-size:var(--hero-size)}
.small{font-size:13px}
.mono,.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:var(--mono-weight);letter-spacing:var(--mono-tracking);text-transform:var(--mono-transform);line-height:1.5}
.eyebrow{display:block;color:var(--ink-2);margin-bottom:20px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.band{background:var(--paper-2)}

/* Placeholder: visible but discreet; every .ph is something the client must supply. */
.ph{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:var(--mono-weight);letter-spacing:var(--mono-tracking);text-transform:var(--mono-transform);line-height:1.4;padding:2px 10px;border:1px dotted var(--accent);border-radius:var(--radius-pill);color:#8A6A2C;background:rgba(201,161,92,.12);vertical-align:middle}
.on-dark .ph{color:#F0CF90;background:rgba(23,22,20,.45)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}}