/* ============================================================
   hdw site kit · BASE
   Reset, type defaults, links, media, the focus ring, disabled,
   reduced motion. No number of its own: everything is a token.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}

html{
  background:var(--bg);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
  scroll-padding-top:var(--top-h);
}
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-small);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:var(--track);
  font-synthesis:none;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--ink);color:var(--bg);}

h1,h2,h3,h4{font-size:inherit;font-weight:400;line-height:var(--lh-tight);text-wrap:balance;}
p{text-wrap:pretty;}
b,strong{font-weight:400;}
ul,ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}

a{color:inherit;text-decoration:none;transition:color var(--dur-s) ease;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}

button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;}
button{background:none;border:0;cursor:pointer;text-align:inherit;}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* Client work is not for saving. A deterrent only: a screenshot
   always works. */
img,video{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;}

/* ---- focus: one ring, everywhere ---- */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px;}

/* ---- disabled ---- */
[disabled],[aria-disabled="true"]{opacity:.4;cursor:not-allowed;}

/* ---- grey that stands alone ---- */
.muted{color:var(--ink-3);}
.label{color:var(--ink-2);}

/* ---- moving between pages ----
   Leaving: what is on the page fades out and lifts a little, the header stays.
   Arriving: the page starts hidden, then every piece floats up from below, a
   beat apart. ui.js sets both classes. No script, none of this happens. */
.is-entering main,.is-entering .cta-band,.is-entering .foot{opacity:0;}
.is-leaving main,.is-leaving .cta-band,.is-leaving .foot{
  opacity:0;transform:translate3d(0,-10px,0);
  transition:opacity .22s ease, transform .22s ease;
}
.is-leaving .menu{opacity:0;transition:opacity .22s ease;}
.rise{opacity:0;transform:translate3d(0,32px,0);}
.rise.is-in{opacity:1;transform:none;transition:opacity .7s ease, transform 1s var(--ease);}
.img-wait{opacity:0;}

/* ---- reduced motion: nothing slides, nothing fades ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}