/* Strato Communications — main stylesheet
   Palette lives in :root, printed by inc/customizer.php so the colours
   stay editable under Appearance > Customize > Strato: Colours. */

/* ============================================================
   STRATO COMMUNICATIONS — one-page site
   Design: Atomic Age / Googie, State of California
   Build for HOLY SH*FT! Creative Studio
   ============================================================ */


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}

/* ---------- type ---------- */
.display{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase; line-height:.94; letter-spacing:-.005em; margin:0;
}
h2.display{font-size:clamp(2rem,4.4vw,3.35rem)}
h3.display{font-size:clamp(1.1rem,1.9vw,1.35rem); font-variation-settings:"wdth" 112,"wght" 750; line-height:1.08}
.script{font-family:Yellowtail,cursive; text-transform:none; letter-spacing:0}
.mono{font-family:"Space Mono",monospace}

.eyebrow{
  font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin:0 0 14px;
}
.eyebrow::before{content:"\2726\00a0\00a0"; color:var(--red)}
.eyebrow--onnavy::before{color:var(--red)}
.eyebrow--onnavy{color:#fff; font-weight:700}
.eyebrow--onnavy::before{color:var(--red)}
.lede{font-size:1.08rem; color:var(--ink-soft); max-width:62ch}

/* chrome-badge headline treatment (the logo's own lettering) */
.chrome{
  background:var(--chrome); background-repeat:repeat-y; background-size:100% .92em;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 7px 16px rgba(0,0,0,.4));
}

/* ---------- section rhythm ---------- */
section{padding:88px 0}
.band-navy{background:var(--navy); color:#EAF2FA}
.band-navy.deep{background:var(--blue-800)}
.band-navy.deepest{background:var(--blue-900)}
.band-navy .lede{color:#fff}
.band-cream2{background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%230A2240' stroke-opacity='0.05'%3E%3Cellipse cx='48' cy='44' rx='26' ry='10' transform='rotate(-28 48 44)'/%3E%3Cellipse cx='48' cy='44' rx='26' ry='10' transform='rotate(32 48 44)'/%3E%3Cellipse cx='142' cy='134' rx='20' ry='8' transform='rotate(18 142 134)'/%3E%3Cellipse cx='142' cy='134' rx='20' ry='8' transform='rotate(-46 142 134)'/%3E%3C/g%3E%3Cg fill='%230A2240' fill-opacity='0.055'%3E%3Cpath d='M150 30l2.6 8.8L161.4 41.4l-8.8 2.6L150 52.8l-2.6-8.8L138.6 41.4l8.8-2.6z'/%3E%3Cpath d='M34 140l2 6.8L42.8 148.8l-6.8 2L34 157.6l-2-6.8L25.2 148.8l6.8-2z'/%3E%3Ccircle cx='48' cy='44' r='2.6'/%3E%3Ccircle cx='142' cy='134' r='2'/%3E%3C/g%3E%3C/svg%3E") repeat}
.sec-head{max-width:70ch; margin-bottom:44px}

/* atomic hairline divider: thin rule with a 4-point star */
.starrule{display:flex; align-items:center; gap:14px; margin:0 0 34px}
.starrule::before,.starrule::after{content:""; height:1px; background:var(--line); flex:1}
.band-navy .starrule::before,.band-navy .starrule::after{background:rgba(255,255,255,.5)}
.starrule svg{flex:none}

/* ---------- top utility bar ---------- */
.topstack{position:sticky; top:0; z-index:70}
.utility{
  background:var(--navy); color:#fff; font-family:"Space Mono",monospace; font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:2px solid var(--gold);
}
.utility .wrap{display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:space-between; padding-block:9px}
.utility a{color:#fff; text-decoration:none}
.utility a:hover{color:var(--gold)}
.utility .cert{color:#FFE1A8}

/* ---------- nav ---------- */
.nav{
  position:relative; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:20px; padding-block:12px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--navy); margin-right:auto}
.brand img{width:54px; height:auto; object-fit:contain}
.brand b{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 122,"wght" 800;
  text-transform:uppercase; font-size:1.12rem; letter-spacing:.02em; line-height:1; display:block;
}
.brand small{
  font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:4px;
}
.navlinks{display:flex; gap:22px; align-items:center}
.navlinks a{
  font-size:.84rem; font-weight:600; text-decoration:none; color:var(--ink);
  text-transform:uppercase; letter-spacing:.06em; padding:6px 0; border-bottom:2px solid transparent;
}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--red); border-bottom-color:var(--gold)}
.navlinks a.navbtn{
  color:#2B1B03; border-bottom:0; padding:9px 18px; font-size:.78rem;
  box-shadow:0 4px 0 #A86F12;
}
.navlinks a.navbtn:hover{color:#2B1B03; border-bottom:0}
.navtoggle{display:none; background:none; border:1.5px solid var(--navy); color:var(--navy);
  border-radius:2px; padding:8px 12px; font-family:"Space Mono",monospace; font-size:.75rem; cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112,"wght" 700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.88rem;
  padding:13px 24px; border-radius:999px; border:2px solid transparent; transition:transform .16s, box-shadow .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold); color:#2B1B03; box-shadow:0 6px 0 #A86F12}
.btn-gold:hover{box-shadow:0 8px 0 #A86F12}
.btn-ghost{border-color:currentColor; color:var(--navy); background:transparent}
.band-navy .btn-ghost,.hero .btn-ghost{color:#EAF2FA}
.hero .btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-red{background:var(--red); color:#fff; box-shadow:0 6px 0 #7C1E18}
.btn .arw{font-family:"Space Mono",monospace}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:#EAF2FA; padding:92px 0 78px}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg svg{width:100%; height:100%}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 124,"wght" 850;
  text-transform:uppercase; font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:.94;
  letter-spacing:-.012em; margin:0 0 8px; color:#fff;
}
.hero .kicker{
  font-family:Yellowtail,cursive; color:var(--gold); font-size:clamp(1.4rem,2.6vw,2rem);
  margin:0 0 22px; transform:rotate(-1.4deg); transform-origin:left;
}
.hero .lede{font-size:1.1rem; color:#fff; margin:0 0 30px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.hero-note{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sky)}

/* orbiting badge */
.orbit{position:relative; display:grid; place-items:center; aspect-ratio:1; max-width:400px; margin-inline:auto}
.orbit img{width:84%; height:auto; filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}
.orbit .ring{position:absolute; inset:0; animation:spin 34s linear infinite}
.orbit .ring-2{animation-duration:52s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- stat band (the "instrument cluster") ---------- */
.stats{background:var(--navy-2); border-block:2px solid var(--gold); position:relative; z-index:2}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-block:0}
.stat{padding:28px 26px; border-left:1px solid rgba(255,255,255,.3); color:#fff}
.stat:first-child{border-left:0}
.stat .num{display:block; overflow:hidden}
.stat b{
  display:block; font-family:Archivo,sans-serif; font-variation-settings:"wdth" 120,"wght" 800;
  font-size:2.5rem; line-height:1.05; color:var(--gold); font-variant-numeric:tabular-nums;
}
.stats.roll .stat b{animation:rollup .55s cubic-bezier(.22,.8,.3,1) both}
.stats.roll .stat:nth-child(2) b{animation-delay:.1s}
.stats.roll .stat:nth-child(3) b{animation-delay:.2s}
.stats.roll .stat:nth-child(4) b{animation-delay:.3s}
@keyframes rollup{
  0%{transform:translateY(110%); opacity:0}
  100%{transform:translateY(0); opacity:1}
}
}
.stat .label{display:block; font-family:"Space Mono",monospace; font-weight:700; font-size:.69rem;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-top:9px}

/* ---------- generic cards ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:3px;
  padding:24px; position:relative; box-shadow:6px 6px 0 rgba(10,34,64,.09);
}
.card::after{ /* double-rule detail, mid-century print */
  content:""; position:absolute; inset:5px; border:1px solid rgba(201,190,163,.5); border-radius:2px; pointer-events:none;
}
.card > *{position:relative}
.card--mid{grid-column:2}
.display .lc{text-transform:lowercase}
@media (max-width:960px){.card--mid{grid-column:auto}}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--ink-soft); font-size:.95rem}
.card .brands{margin:10px 0 0; font-family:"Space Mono",monospace; font-size:.78rem; color:var(--blue); line-height:1.75}

.icn{width:38px; height:38px; margin-bottom:14px; color:var(--blue)}

/* ---------- SIGNATURE: contract spec plates ---------- */
.slp{display:grid; grid-template-columns:278px 1fr; gap:30px; align-items:start}
.slp-pick{display:flex; flex-direction:column; gap:7px}
.slp-btn{
  font-family:"Space Mono",monospace; font-weight:700; font-size:.78rem; letter-spacing:.03em;
  text-align:left; cursor:pointer; padding:11px 14px; border-radius:3px; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.45);
  transition:background .14s, border-color .14s, transform .14s;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.slp-btn:hover{background:rgba(255,255,255,.22); transform:translateX(3px)}
.slp-btn .tick{opacity:0}
.slp-btn[aria-selected="true"]{
  background:var(--gold); border-color:var(--gold); color:#2B1B03;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}
.slp-btn[aria-selected="true"] .tick{opacity:1}
#slpPlate{animation:platein .3s ease both}
@keyframes platein{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.plates{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.plate{
  background:var(--plate); border-radius:6px; padding:26px 26px 22px; color:#16283C;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 6px rgba(0,0,0,.14), var(--shadow);
  position:relative; border:1px solid #A8B5C2;
}
.plate::before,.plate::after{ /* rivets */
  content:""; position:absolute; width:9px; height:9px; border-radius:50%; top:12px;
  background:radial-gradient(circle at 32% 30%,#fff,#8fa0b0 62%,#5d6d7c);
  box-shadow:0 1px 1px rgba(0,0,0,.35);
}
.plate::before{left:12px} .plate::after{right:12px}
.plate .rivets-b{position:absolute; left:0; right:0; bottom:12px; height:9px}
.plate .rivets-b i{position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,#8fa0b0 62%,#5d6d7c); box-shadow:0 1px 1px rgba(0,0,0,.35)}
.plate .rivets-b i:first-child{left:12px} .plate .rivets-b i:last-child{right:12px}
.plate-head{border-bottom:2px solid #16283C; padding:2px 0 12px; margin:0 0 16px}
.plate-head .abbr{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 122,"wght" 850;
  font-size:2.4rem; line-height:1; text-transform:uppercase; color:#16283C;
}
.plate-head .full{font-family:"Space Mono",monospace; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:#33465A; margin-top:7px}
.spec{width:100%; border-collapse:collapse; font-family:"Space Mono",monospace; font-size:.79rem}
.spec th{
  text-align:left; font-weight:700; color:#3C5064; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 12px 7px 0; white-space:nowrap; vertical-align:top; font-size:.7rem; width:42%;
  border-bottom:1px dotted rgba(22,40,60,.28);
}
.spec td{padding:7px 0; font-weight:700; color:#16283C; border-bottom:1px dotted rgba(22,40,60,.28)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.pending{color:#7A4E0C; font-weight:700; background:rgba(233,162,44,.5); padding:1px 7px; border-radius:2px;
  border:1px dashed rgba(122,78,12,.55)}
.band-navy .infoblock .pending{color:#2B1B03; background:var(--gold); border-color:rgba(43,27,3,.5)}
.plate-foot{margin:16px 0 0; font-size:.84rem; color:#2E4055; line-height:1.55}

.certlink{margin:38px 0 0; display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap}
.certlink a{
  display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112,"wght" 700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.86rem;
  border-bottom:2px solid rgba(255,255,255,.6); padding-bottom:4px;
}
.certlink a:hover{border-bottom-color:#fff; color:#FFE1A8}
.certlink a svg{width:19px; height:19px; flex:none}
.certmeta{font-family:"Space Mono",monospace; font-weight:700; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff}
.slp-brands{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.chip{
  font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.05em;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.7); color:#fff; font-weight:700;
  padding:6px 12px; border-radius:999px;
}
.chip--cream{background:#fff; border-color:var(--line); color:var(--ink)}

/* ---------- process: numbered because it IS a sequence ---------- */
.steps{counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line)}
.step{
  counter-increment:s; display:grid; grid-template-columns:96px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.step-n{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 124,"wght" 850;
  font-size:3.2rem; line-height:.8; color:var(--gold); -webkit-text-stroke:1.5px var(--navy);
}
.step-n::before{content:"0" counter(s)}
.step h3{margin:0 0 6px}
.step p{margin:0; color:var(--ink-soft); font-size:.96rem; max-width:70ch}

/* ---------- agency roster ---------- */
.roster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:14px;
}
.ag{
  background:#fff; border:1px solid rgba(201,190,163,.75); border-radius:3px;
  display:grid; place-items:center; padding:18px 16px; min-height:116px; text-decoration:none;
  box-shadow:4px 4px 0 rgba(10,34,64,.07);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.ag:hover{transform:translate(-2px,-2px); border-color:var(--gold); box-shadow:7px 7px 0 rgba(233,162,44,.5)}
.ag img{max-height:64px; width:auto; object-fit:contain}
.ag[hidden]{display:none}
.roster-tools{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px}
.disclaimer{font-size:.8rem; color:var(--ink-soft); max-width:78ch; margin:18px 0 0}

/* ---------- vendors ---------- */
.vendors{display:flex; flex-wrap:wrap; gap:9px}
.vendor{
  font-family:"Space Mono",monospace; font-size:.78rem; background:var(--cream-2);
  border:1px solid var(--line); border-radius:2px; padding:7px 13px; color:var(--ink);
  box-shadow:3px 3px 0 rgba(10,34,64,.07);
}

/* ---------- team ---------- */
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.person{text-align:center}
.person .pic{
  width:150px; height:150px; margin:0 auto 16px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 4px var(--gold), var(--shadow); background:#fff;
}
.person .pic img{width:100%; height:100%; object-fit:cover}
.person h3{margin:0 0 3px}
.person .role{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin:0 0 10px}
.person .contact{font-family:"Space Mono",monospace; font-size:.76rem; margin:0 0 12px; line-height:1.8}
.person .contact a{color:var(--blue); text-decoration:none; word-break:break-word}
.person .contact a:hover{text-decoration:underline}
.person p.bio{font-size:.9rem; color:var(--ink-soft); margin:0; text-align:left}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start}
.infoblock{margin:0 0 26px}
.infoblock dt{font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:6px}
.infoblock dd{margin:0 0 18px; font-size:.98rem}
.infoblock a{color:#fff; font-weight:500}

form .field{margin-bottom:18px}
form label{display:block; font-family:"Space Mono",monospace; font-weight:700; font-size:.72rem;
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:7px; color:#fff}
form label .req{color:var(--gold)}
form input[type=text],form input[type=email],form textarea,form select{
  width:100%; padding:12px 14px; font:inherit; font-size:.95rem; color:var(--ink);
  background:#ffffff; border:1px solid #9FB3C6; border-radius:2px;
}
form input:focus,form textarea:focus,form select:focus{outline:3px solid var(--gold); outline-offset:1px}
form textarea{min-height:130px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.two small{display:block; font-family:"Space Mono",monospace; font-size:.64rem; color:#fff; margin-top:5px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.radios{display:flex; gap:22px; flex-wrap:wrap}
.radios label{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;
  font-family:"Space Grotesk",sans-serif; font-size:.95rem; margin:0; color:#EAF2FA}
.formnote{font-family:"Space Mono",monospace; font-weight:700; font-size:.72rem; color:#fff; margin-top:14px}
#formstatus{margin-top:18px}
#formstatus:empty{display:none}
.sent{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.5);
  border-left:5px solid var(--gold); border-radius:3px; padding:18px 20px;
}
.sent b{
  display:block; font-family:Archivo,sans-serif; font-variation-settings:"wdth" 115,"wght" 800;
  text-transform:uppercase; font-size:1rem; letter-spacing:.02em; color:var(--gold); margin-bottom:7px;
}
.sent p{margin:0 0 8px; font-size:.94rem; color:#fff}
.sent p:last-child{margin:0}
.sent a{color:#fff; font-weight:700}
.err{color:#FFD9A0; font-size:.92rem; font-weight:600; margin:0}

/* ---------- footer ---------- */
.footer{background:#06182E; color:#CBDFF1; padding:44px 0 34px; font-size:.86rem}
.footer .wrap{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center}
.footer img{width:68px; height:auto; object-fit:contain}
.footer a{color:#BBD6EE}
.footer .legal{margin-top:16px; font-size:.76rem; color:#9FBBD6; line-height:1.6}
.footer .credit{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .orbit{max-width:300px}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat{border-top:1px solid rgba(255,255,255,.3)}
  .stat:nth-child(-n+2){border-top:0}
  .plates,.g3,.g4,.people,.contact-grid,.g2{grid-template-columns:1fr}
  .slp{grid-template-columns:1fr; gap:22px}
  .slp-pick{flex-direction:row; flex-wrap:wrap}
  .slp-btn{flex:0 0 auto}
  .g4{grid-template-columns:repeat(2,1fr)}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--cream-2);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 16px;
    border-bottom:1px solid var(--line);
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:11px 0; width:100%; border-bottom:1px solid var(--line)}
  .navlinks a.navbtn{width:auto; margin:12px 0 4px; padding:11px 20px}
  .navtoggle{display:block}
  .nav .wrap{position:relative}
}
@media (max-width:760px){
  .sparks{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .utility{font-size:.66rem}
  .utility .wrap{justify-content:center; gap:4px 16px; padding-block:7px}
  .utility .rfq-line{display:none}
  .hero{padding-top:60px}
  .hero .kicker{line-height:1.35}
  section{padding:64px 0}
  .g4{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:6px}
  .step-n{font-size:2.4rem}
  .roster{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .two{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--gold); color:#2B1B03; padding:10px 16px; border-radius:2px}
/* ---------- WordPress additions ---------- */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.ag-name{font-family:"Space Mono",monospace; font-size:.72rem; text-align:center; color:var(--ink-soft); line-height:1.4}
.entry{font-size:1.02rem}
.entry h2,.entry h3{font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112,"wght" 750; margin-top:1.6em}
.entry a{color:var(--blue)}
.entry img{height:auto; border-radius:3px}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.pagination{font-family:"Space Mono",monospace; font-size:.85rem}
.pagination .page-numbers{padding:6px 11px; border:1px solid var(--line); margin-right:5px; text-decoration:none; border-radius:2px}
.pagination .current{background:var(--gold); border-color:var(--gold); color:#2B1B03}
button.slp-btn{font-family:"Space Mono",monospace}