/* ============================================================
   GROWMARK — reset and typography
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--carbon);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  width:100vw;
}

img,svg,canvas{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4,p,figure,blockquote{margin:0}

ul,ol{margin:0;padding:0;list-style:none}

button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--carbon);color:var(--paper)}

:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
}

.display{
  font-size:clamp(2.7rem,6vw,4.6rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.h2{
  font-size:clamp(1.9rem,3.6vw,2.95rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.h3{
  font-size:1.2rem;
  font-weight:500;
  line-height:1.28;
  letter-spacing:-.014em;
}

.lede{
  font-size:clamp(1.0625rem,1.5vw,1.2rem);
  line-height:1.55;
  color:var(--muted);
  max-width:34em;
}

.body{color:var(--muted);max-width:36em}

.tight{max-width:30em}

/* section header block */
.head{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:44rem;
}
.head .lede{margin-top:2px}

@media (max-width:640px){
  body{font-size:16px}
}

/* ============================================================
   MOTION PREFERENCE
   ============================================================ */

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