/* ============================================================
   Steel City Codes — Base
   Reset, typography, layout primitives, a11y foundation.
   Depends on tokens.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-sans);
  font-weight:500;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the hidden attribute must always win over component display rules
   (e.g. .callout{display:flex} would otherwise reveal a hidden element) */
[hidden]{display:none !important}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus{outline:none}

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring);
  border-radius:6px;
}

/* --- type scale --- */
.slab{font-family:var(--font-slab)}
.mono{font-family:var(--font-mono)}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.01em;font-weight:700}
h2{font-weight:600}
.display{font-size:clamp(40px,6vw,60px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(32px,5vw,48px)}
h2{font-size:clamp(24px,3.2vw,32px)}
h3{font-size:clamp(19px,2.2vw,22px)}
p{max-width:68ch}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow--brand{color:var(--warning)}
.lead{font-size:clamp(17px,2vw,19px);color:var(--ink-muted);max-width:64ch}
.slab-sub{font-family:var(--font-slab);font-size:clamp(18px,2.4vw,22px);font-weight:500;color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* --- layout primitives --- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
/* Uniform vertical rhythm: every section gets the same symmetric padding,
   colored band or not. No "+ .section" zeroing and no per-section overrides —
   that combination is what produced inconsistent, glued-heading spacing. */
.section{padding-block:var(--sp-8)}
.section--sm{padding-block:var(--sp-7)}
.divider{border:0;border-top:1px solid var(--border)}

/* Numbered section head — used only where content is a real sequence/system */
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.sec-head .num{
  font-family:var(--font-mono);font-size:13px;color:var(--warning);font-weight:600;
  background:var(--brand-soft);padding:4px 10px;border-radius:6px;letter-spacing:.02em;
}
.sec-head h2{font-size:clamp(24px,3.2vw,32px)}
.sec-head .lead{width:100%;margin-top:2px}

.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}

/* --- accessibility utilities --- */
.skip-link{
  position:absolute;left:var(--sp-3);top:-60px;z-index:200;
  background:var(--brand);color:var(--on-brand);font-weight:600;
  padding:10px 16px;border-radius:var(--radius);transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-3)}
.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;
}
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}

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

@media (max-width:820px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .section{padding-block:var(--sp-7)}
  .section--sm{padding-block:var(--sp-6)}
}