/* ONE Google Fonts request for direction B (replaces the 4-family line in every page head):
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Spectral:ital,wght@1,500&display=swap" rel="stylesheet">
   Weight: Archivo roman var 87 KB + Spectral italic 500 15 KB = 102 KB latin woff2.  Current shipped set = 296 KB.
   NOTE: the live Archivo request asks for the ITALIC axis (;1,62..125,100..900) and the site
   never renders italic Archivo, so that axis is ~100 KB of dead payload on every page today. */
/* ============================================================
   DIRECTION B · "NO COSTUME"
   Display  Archivo  wdth 125 / wght 900   (attitude from width + weight + case)
   UI/body  Archivo  wdth 100
   Labels   Archivo  wdth 84 / wght 700    (real texture change at 11px)
   Tag      NONE. The tag word is the display face filled with --tag-grad,
            sitting on the same spray-stroke mask. Graffiti = the wall, not the font.
   Verse    Spectral italic (screen serif; keeps hairlines on pure black)
   TWO families total.
============================================================ */
:root{
  --font-disp:"Archivo",system-ui,sans-serif;
  --font-ui:"Archivo",system-ui,sans-serif;
  --font-tag:"Archivo",system-ui,sans-serif;
  --font-verse:"Spectral",Georgia,serif;
  --font-mark:"Archivo",system-ui,sans-serif;
  --tr-disp:-.022em; --tr-lead:-.008em; --tr-body:0; --tr-label:.12em; --tr-micro:.17em;
  --w-disp:"wdth" 125; --w-ui:"wdth" 100; --w-lab:"wdth" 84;
}

/* ---------- DISPLAY TIER: one family, widened and maxed ---------- */
.hd,h2.hd,.poster-h,.pdp-title,.torn-w,.spec-v,.arc-title,.faq-quote,.tag-k,.foot-ghost,
.notify-w .poster-h,.tape-track span,.hw-tag b{
  font-family:var(--font-disp);font-variation-settings:var(--w-disp);font-weight:900;
  text-transform:uppercase;letter-spacing:var(--tr-disp)
}
.hd,h2.hd{line-height:.96}
h2.hd{font-size:clamp(24px,2.9vw,38px)}
.poster-h{font-size:clamp(50px,8vw,116px);line-height:.84}
.notify-w .poster-h{font-size:clamp(46px,5.2vw,78px)}
.pdp-title{font-size:clamp(40px,4.6vw,68px);line-height:.88}
.torn-w{font-size:10.6cqi;line-height:.84}
.spec-v{font-size:clamp(22px,2.2vw,33px);line-height:.98}
.arc-title{font-size:clamp(22px,2.1vw,31px);line-height:1}
.faq-quote{font-size:clamp(32px,3.1vw,50px);line-height:.94}
.tag-k{font-size:clamp(19px,2.1vw,32px);line-height:1;letter-spacing:-.01em}
.yp .tag-k{font-size:clamp(16px,1.5vw,23px)}
.foot-ghost{font-size:clamp(120px,21vw,300px);line-height:.9}
.tape-track span{letter-spacing:.01em}

/* ---------- TAG TIER: same family, gradient + spray stroke carry it ---------- */
.tag-w,.yp .tag-w,.hw-tag .tw,.poster-h .tw,.ct-plat{
  font-family:var(--font-disp);font-variation-settings:var(--w-disp);font-weight:900;
  text-transform:uppercase;letter-spacing:-.024em;line-height:.92
}
.tag-w{font-size:clamp(52px,7.4vw,116px);padding:.04em .04em .08em 0;margin:-.04em 0 -.08em}
.yp .tag-w{font-size:clamp(54px,6.6vw,108px)}
.hw-tag .tw{font-size:1em;padding:.02em .03em .06em 0;margin:-.02em 0 -.06em}
.poster-h .tw{font-size:1em;padding:.02em .03em .06em 0;margin-bottom:-.02em}
.ct-plat{font-size:clamp(52px,6.2vw,100px);padding:.04em .04em .08em 0;margin:-.04em 0 -.08em}
.tag-h{column-gap:.42em}
.tag-h::before{top:14%;height:86%;opacity:.3}
.yp .tag-h::before{opacity:.38}

/* ---------- SCRIPTURE: Spectral italic ---------- */
.verse,.sw blockquote p{font-family:var(--font-verse);font-style:italic;font-weight:500}
.sw blockquote p{font-size:clamp(38px,5.4vw,86px);line-height:1.12;letter-spacing:-.008em}
.verse{font-size:clamp(1.9rem,5.2vw,3.9rem);line-height:1.14}

/* ---------- LABEL TIER: the width axis does the work, not 24 tracking values ---------- */
.eb,.meta,.cite,.sw-cite,.sw-on,.poster-k,.spec-k,.spec .k,.pdp-motif,.pdp-cw,.pdp-seen,.g-lab,
.foot h3,.foot-tag,.mural-line,.arc-pieces,.pc-credit,.yp-link,.foot-bot,.follow-handle span,
.btn,.tlink,.nav-links,.bar-name,.acro .wd,.arc-facts li,.cn-k,.tape-l,.size-pill,.pc-name{
  font-variation-settings:var(--w-lab)
}
.eb{font-size:12.5px;font-weight:800;letter-spacing:var(--tr-micro)}
.meta,.cite,.spec-k,.foot h3,.poster-k,.spec .k,.g-lab,.pdp-cw,.sw-cite{
  font-size:11.5px;font-weight:700;letter-spacing:var(--tr-micro)
}
/* multi-word credits on LABEL tracking so they stay on one line at 390 */
.pc-credit,.arc-pieces,.pdp-seen,.pdp-motif,.sw-on,.foot-tag,.mural-line,.follow-handle span,.foot-bot{
  font-size:11.5px;font-weight:700;letter-spacing:var(--tr-label)
}
.btn,.tlink,.yp-link,.nav-links,.bar-name,.acro .wd,.arc-facts li,.cn-k,.tape-l,.size-pill,.pc-name{
  font-weight:800;letter-spacing:var(--tr-label)
}
.pc-name{font-size:13.5px}
.acro .wd{font-size:clamp(11.5px,.95vw,13.5px)}
.btn{font-size:12.5px;font-variation-settings:"wdth" 90}
/* body tier: back to wdth 100, zero tracking */
body,.story-body p,.poster-sub,.sec-aside p,.yp-line,.pdp-desc,.ph-line,.craft-lede,.arc-sub,
.craft-notes p,.spec-s,.spec .v,.foot-links,.dl-note,.pw-line{
  font-variation-settings:var(--w-ui);letter-spacing:var(--tr-body)
}
.story-lede{font-variation-settings:var(--w-ui);font-weight:600;font-size:clamp(23px,2.3vw,35px);
  line-height:1.32;letter-spacing:var(--tr-lead)}
.story-body p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.72}

@media (max-width:820px){
  .hw-tag{font-size:clamp(28px,8.6vw,40px);gap:2px;line-height:.98}
  .hw-tag .tw{font-size:1em}
}

/* Archivo wdth125 uppercase is far wider than the mixed-case Sedgwick it
   replaces: at 1440 the one-line tagline ran off BOTH gutters. Size it to the
   width it actually needs. */
@media (min-width:821px){
  .hw-tag{font-size:clamp(16px,1.66vw,25px);gap:.18em .46em}
  .hw-tag .tw{font-size:1em}
}

/* .pc-name is a four-word uppercase string at 13px: label tracking pushed
   "ACID CROP TEE [BLACK]" onto a second line at 390 where the live build
   fits it. Long names get their own, tighter step. */
.pc-name,.bar-name{letter-spacing:.07em}