/* ============================================================
   02 · TYPOGRAPHY  (flat-section text — the hero has its own
   scale in css/hero/scenes.css so the two never collide)
   ============================================================ */

/* native section shell */
.sec.html{line-height:1.5;position:relative;z-index:1}

.sec.html h2{
  font-family:Archivo;font-weight:700;
  font-size:clamp(30px,3.7vw,52px);letter-spacing:-.028em;line-height:1.03;
  color:#050916;margin:22px 0 20px;
}
.sec.html h3{font-family:Archivo;font-weight:600;letter-spacing:-.01em;color:var(--ink900)}
.sec.html p{font-size:15.5px;line-height:1.62;color:var(--ink500);max-width:520px}

/* dark sections must never inherit the light body theme */
.sec.html.dark h2,.sec.html.dark h3,.sec.html.dark .tn{color:#fff}
.sec.html.dark p,.sec.html.dark .lead{color:var(--dim)}

/* ---- kicker label ----
   Size and colour live on the BASE rule, not on `.sec.html .kick`. Body text
   is white (the homepage is dark), so a kicker used outside .sec.html would
   otherwise inherit white and vanish on a light background.
   Overridden by `.kick.dark` and by `.scene .kick` in hero/scenes.css. */
.kick{
  font-family:'Geist Mono',monospace;text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:12px;
  font-size:clamp(11px,1.25vw,13px);letter-spacing:.11em;color:var(--ink700);
}
.kick b{color:var(--navy);font-weight:500}
.kick i{width:32px;height:1px;background:#C7D0EC;display:block;flex:0 0 auto}

.kick.dark{color:#AEBCF5}
.kick.dark b{color:var(--b300)}
.kick.dark i{background:var(--onblue)}

/* ---- mono eyebrow text ---- */
.mono{
  font-family:'Geist Mono',monospace;font-size:clamp(10px,1.1vw,12px);letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink500);
}
.mono.dim{color:var(--ink300)}
.mono.light{color:var(--b100)}