/* Base — reset, page frame, type scale. Minimal: hairline borders, generous
   whitespace, no shadows (modal excepted, later), no gradients but the strip. */
*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 24px 100px;
}
.wrap{max-width:1080px;margin:0 auto}
.mono{font-family:var(--font-mono)}

/* Type scale (§6) */
.page-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px,5vw,52px);letter-spacing:-.02em;line-height:1.05;
}
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:25px;letter-spacing:-.02em;
}
.eyebrow{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.small{font-size:13.5px}

a{color:var(--ink)}

/* Full keyboard operation — visible focus rings everywhere */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  border-radius:2px;
}
#app:focus{outline:none}

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

@media (max-width:780px){
  body{padding:0 16px 80px}
}