/* Reset + typography + layout primitives shared by every component. */
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', 'Century Gothic', Futura, sans-serif;
  font-size:17px;
  line-height:1.6;
  padding-inline:20px;
}
h1,h2,h3{text-wrap:balance; margin:0;}
p{text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%;}

.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;}

.skip-link{
  position:absolute; left:0; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper-raised);
  padding:12px 18px; border-radius:0 0 6px 0;
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:0;}

.display{
  font-family:'Jost', sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.mono{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.wrap{max-width:1120px; margin:0 auto;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--ink-soft);
  font-weight:600;
}

section{padding-block:64px; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
@media (max-width:640px){ section{padding-block:44px;} }

.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.sec-head h2{font-size:clamp(1.7rem,4.6vw,2.5rem); font-weight:600; color:var(--ink); margin-top:6px;}
.sec-head p{max-width:52ch; color:var(--ink-soft); margin-top:6px;}

/* Buttons are used across nearly every component, so they live in base. */
.btn{
  font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.06em;
  font-size:0.8rem; padding:13px 22px; border-radius:3px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{background:var(--ink); color:var(--paper-raised);}
.btn-primary:hover{background:var(--ink-hover);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--paper-raised);}

/* One global focus-visible rule for every interactive element, instead of
   repeating it per component. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-deep); outline-offset:2px;
}

@media (prefers-reduced-motion: no-preference){
  .fade-in{animation: fadeIn 0.6s ease both;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
}