/* Hatch Sanitary — base element styles & typographic primitives.
   Kept lean: resets, sensible defaults, and a few reusable type classes. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-text);
  font-weight:var(--weight-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--white)}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--text-primary);
  margin:0;
  text-wrap:balance;
}

a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--black)}

p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- Reusable type utilities ---- */
.t-display{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-transform:uppercase}
.t-h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.t-h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.t-h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);line-height:var(--lh-heading)}
.t-h4{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h4);line-height:var(--lh-snug)}
.t-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-title);line-height:var(--lh-snug)}
.t-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.t-body-sm{font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.t-caption{font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-snug)}
.t-overline{font-family:var(--font-display);font-weight:800;font-size:var(--fs-overline);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-secondary)}

.t-muted{color:var(--text-muted)}
.t-secondary{color:var(--text-secondary)}

/* Screen-reader-only, for labels the design shows as icons alone. */
.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;
}