/* ulrick.tech · base: fonts, reset, type, ledger rules, focus. Depends on tokens.css */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/InterTight-Medium.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/InterTight-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/InterTight-Bold.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/InterTight-ExtraBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-SemiBold.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}

body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--bone);color:var(--ink);
  font-family:var(--font-display);font-weight:500;font-size:1.0625rem;line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
main{flex:1}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--tezontle)}

/* Type */
h1,.h1{font-weight:800;letter-spacing:-.04em;line-height:.96;font-size:clamp(2.75rem,8vw + .5rem,6.5rem)}
h2,.h2{font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(2rem,4vw + .5rem,3.5rem)}
h3,.h3{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.5rem,2vw + .75rem,2rem)}
.accent{color:var(--tezontle);font-style:normal}
.lede{font-size:clamp(1.125rem,1vw + .8rem,1.375rem);max-width:40rem}
.muted{color:var(--slate)}
.mono{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.8125rem;color:var(--slate)}

/* Ledger rules: single rule above the total, double rule below */
.rule{border:0;border-top:1px solid var(--hairline);margin:0}
.rule--ink{border-top-color:var(--ink)}
.rule-total{border:0;border-top:3px double var(--ink);margin:0}

/* Accessibility */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--ink);color:var(--bone);padding:12px 18px;
  font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px;color:var(--bone)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--tezontle);outline-offset:3px}
.on-ink :focus-visible,.site-footer :focus-visible{outline-color:var(--tezontle-on-ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
main:focus{outline:none}  /* skip-link target (tabindex=-1); no ring on the whole page */
