/* base.css — reset, self-hosted fonts, typography scale (DESIGN.md §3),
   focus-visible ring, reduced motion. No colour literals: tokens only. */

@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/hanken-grotesk-latin.a6b899943e31.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-latin.c008db4e8a97.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;line-height:1.5;
  color:var(--text);background:var(--paper);
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto}
svg{display:block}
.ic{width:1em;height:1em;display:inline-block;flex:0 0 auto;stroke:currentColor;fill:none;vertical-align:middle}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
button{font-family:inherit}

/* typography scale */
h1,h2,h3{color:var(--ink);margin:0;line-height:1.2}
h1{font-size:30px;line-height:1.2;font-weight:600}
h2{font-size:22px;line-height:1.3;font-weight:600;margin:28px 0 12px}
h3{font-size:18px;line-height:1.3;font-weight:600}
.display-xl{font-family:var(--font-display);font-weight:400;font-size:58px;line-height:1.05}
.display-l{font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1.1}
.body-l{font-size:18px;line-height:1.55}
.meta{font-size:13px;line-height:1.4;color:var(--muted)}
.table-text{font-size:15px;line-height:1.4}

p,li,h1,h2,h3,.hint{text-wrap:pretty}

/* focus ring: accent, visible only for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);
}
/* keep a visible ring for older engines that lack :focus-visible */
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}