/* Global graffiti typography matched to the supplied reference. */
@font-face{
  font-family:"XELO Graffiti";
  src:url("assets/fonts/urban-heroes.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --display:"XELO Graffiti",Impact,sans-serif;
  --sans:"XELO Graffiti",Impact,sans-serif;
  --mono:"XELO Graffiti",Impact,sans-serif;
}

html,body,button,input,select,textarea{
  font-family:var(--display);
  font-synthesis:none;
  font-kerning:normal;
}

body{
  text-transform:uppercase;
  letter-spacing:.025em;
}

/* The reference face is naturally loose and hand-drawn; neutralize spacing
   tuned for the previous geometric fonts while preserving the existing scale. */
.hero h1,
.section-head h2,
.lineup h2,
.superior h2,
.manifesto-big,
.dialog-copy h2,
.stage-name{
  letter-spacing:.01em;
}

.hero h1{line-height:.78}
.section-head h2,.lineup h2,.superior h2{line-height:.86}
.manifesto-big{line-height:.85}
.dialog-copy h2{line-height:.9}

.hero-copy p,
.section-intro,
.lineup-title-row p:last-child,
.manifesto-copy>p,
.superior-head p:last-child{
  line-height:1.22;
}

/* Small copy stays legible in the irregular face. */
.desktop-nav,
.hero-kicker,
.eyebrow,
.archive-chip,
.mixer-panel-head,
.trait-readout dt,
.mixer-actions button,
.rack-card footer,
.superior-label,
.fact-row,
body>footer,
.dialog-traits span:first-child{
  letter-spacing:.08em;
}

@media(max-width:640px){
  .hero h1{letter-spacing:-.015em}
  .section-head h2,.lineup h2,.superior h2{
    min-width:0;
    font-size:clamp(38px,12.5vw,50px);
    line-height:.9;
  }
  .manifesto-big{
    min-width:0;
    font-size:clamp(44px,14vw,58px);
    line-height:.88;
  }
}