/* Base: fonts, reset, focus, and the type roles every page uses (.shead, .para, the heading resolve).
   Tokens come from tokens.css. */
@font-face{font-family:"Ronzino";src:url("../fonts/Ronzino-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
/* Serial B Blur, Dum Dum Studio, TRIAL file: needs a Web licence before any public launch */
@font-face{font-family:"Serial Blur";src:url("../fonts/SerialBlurTRIAL-Blur.woff2") format("woff2");font-weight:400;font-display:block;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:400;
  font-size:var(--t-body);line-height:var(--lh-body);
  font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;font-weight:400;}
button,input,textarea,select{font:inherit;color:inherit;}
[hidden]{display:none !important;}   /* hidden always wins over a component's display */
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;}

/* text that only screen readers hear */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* section and step titles: the one display cut */
.shead{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  max-width:16ch;text-wrap:balance;color:var(--ink);font-feature-settings:"kern","liga";
  margin-bottom:var(--shead-mb,0px);   /* set --shead-mb rather than margin-bottom, so the resolve can add to it */
}
.shead:focus{outline:none;}

/* body paragraphs, first line indented */
.para{margin-top:20px;max-width:44ch;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink);
  text-indent:4em;text-wrap:pretty;}

/* heading resolve: a metal ramp (the HeatMark light ramp, metal to ink) and a blur that clears.
   js/lib/chrome.js adds .in to start it and .done once it has settled */
.js .resolve{
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(180deg,#141210 0%,#141210 40%,#3A3835 52%,#9A9893 64%,#C0C3C8 78%,#E4E5E8 100%);
  background-size:100% 260%;background-position:50% 100%;
  -webkit-background-clip:text;background-clip:text;
  filter:blur(var(--rs-blur));opacity:0;transform:translateY(.12em) scale(1.04);transform-origin:left bottom;
  letter-spacing:.04em;
}
.js .resolve.in{
  background-position:50% 0%;filter:blur(0);opacity:1;transform:none;letter-spacing:var(--tr-display);
  transition:filter var(--rs-t) cubic-bezier(.25,.6,.15,1), opacity var(--rs-fade) ease-out, transform var(--rs-t) cubic-bezier(.25,.6,.15,1),
    letter-spacing var(--rs-t) cubic-bezier(.25,.6,.15,1), background-position var(--rs-ramp) cubic-bezier(.3,.6,.2,1) var(--rs-delay);
}
.js .resolve.done{color:var(--ink);-webkit-text-fill-color:currentColor;background:none;}
/* the ramp only paints inside the heading's box, and Serial Blur's descenders (g, p, y) hang about
   0.11em below a 1em line (7px at the 64px size), so they'd be cut off and then snap in when the
   resolve ends. While it plays, the box grows 10px down to cover them and a negative margin gives the
   space back. Whole pixels, so nothing after it shifts by a rounding pixel */
.js .resolve:not(.done){padding-bottom:10px;margin-bottom:calc(var(--shead-mb,0px) - 10px);}
@media (prefers-reduced-motion:reduce){
  .js .resolve,.js .resolve.in{filter:none;opacity:1;transform:none;transition:none;color:var(--ink);-webkit-text-fill-color:currentColor;background:none;letter-spacing:var(--tr-display);}
}