/* ============================================================
   02 — BASE : reset, typography, utilities
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}

body{
  margin:0;background:var(--void);color:var(--text);
  font:400 14px/1.6 var(--ui);
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:20px}
li{margin-bottom:6px}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

h1,h2,h3,h4{margin:0 0 14px;font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.035em}
h1{font-size:clamp(34px,6.4vw,74px)}
h2{font-size:clamp(24px,3.6vw,42px);letter-spacing:-.03em}
h3{font-size:17px;letter-spacing:-.02em;font-weight:600}
h4{font-size:14px;font-weight:600}

.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
code{overflow-wrap:anywhere;
  font-size:.86em;padding:2px 6px;border-radius:5px;
  background:rgba(46,107,255,.12);border:1px solid rgba(46,107,255,.28);color:var(--cyan);
}
html[data-theme="day"] code{color:var(--blue)}
strong,b{font-weight:600}

::selection{background:rgba(46,107,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* micro label ------------------------------------------------ */
.lbl{
  display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.lbl.grad{
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* utilities -------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
p,li,dd,dt,h1,h2,h3,h4{overflow-wrap:break-word}
.sec{padding:88px 0;position:relative}

/*  content-visibility:auto used to live here. It is a real performance win on
    a long page, and it is also exactly what makes a site feel like it "loads
    as you scroll": the browser genuinely defers rendering until a section is
    near the viewport. Removed on purpose. Smoothness now comes from the eight
    per-frame fixes in the other layers, not from deferring work the visitor
    can notice. */

.sec-hd{max-width:720px;margin-bottom:34px}
.sec-hd .lbl{margin-bottom:14px}
.sec-hd p{color:var(--dim);margin:0;font-size:15.5px}
.lead{font-size:18px;line-height:1.55;color:var(--dim);max-width:640px}
.small{font-size:12.5px}
.dim{color:var(--dim)}.faint{color:var(--faint)}
.mint,.jade,.up{color:var(--mint)}
.rose,.rust,.down{color:var(--rose)}
.gold,.amber,.hold{color:var(--gold)}
.blue,.brass,.volt{color:var(--blue)}
.cyan,.lit{color:var(--cyan)}
.ash{color:var(--dim)}
.right{text-align:right}
.hide{display:none !important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.center{text-align:center}
.stack{display:grid;gap:var(--gap)}

.cols{display:grid;gap:var(--gap)}
.cols > *{min-width:0}
.c-2{grid-template-columns:1fr 1fr}
.c-3{grid-template-columns:repeat(3,1fr)}
.c-4{grid-template-columns:repeat(4,1fr)}
.c-32{grid-template-columns:1.55fr 1fr}
.c-23{grid-template-columns:1fr 1.55fr}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

@media(max-width:1000px){
  .c-2,.c-3,.c-4,.c-32,.c-23{grid-template-columns:1fr}
  .sec{padding:64px 0}
}
@media(max-width:720px){
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .sec{padding:52px 0}
}
@media(max-width:380px){body{font-size:13px}}