:root{
  --primary--color:#f54a3a;
  --secondary--color:#10202f;
  --accent--color:#f54a3a;

  --primary--color-80:#f54a3acc;--primary--color-60:#f54a3a99;
  --primary--color-40:#f54a3a66;--primary--color-20:#f54a3a33;
  --secondary--color-80:#10202fcc;--secondary--color-60:#10202f99;
  --secondary--color-40:#10202f66;--secondary--color-20:#10202f33;

  --utility--white:#fff;--utility--white-80:#fffc;--utility--white-60:#fff9;
  --utility--white-40:#fff6;--utility--white-20:#fff3;
  --utility--black:#000;--utility--black-80:#000c;--utility--black-60:#0009;
  --utility--transparent:transparent;

  --size--null:0px;--size--xs:.5rem;--size--small:1rem;--size--medium:2rem;--size--size:4rem;

  --display-font:'dharma-gothic-e','Big Shoulders Display',sans-serif;
}

h1,h2,h3,h4,.display{font-family:var(--display-font);text-transform:uppercase;font-weight:800;line-height:.92}
a{color:var(--primary--color)}
a:hover{color:#c9341f}
a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--primary--color);outline-offset:3px}
body{overflow-x:hidden}

/* Hero */
.section-hero{position:relative;background-color:var(--secondary--color);overflow:hidden}
.section-hero.is-image{background-image:url("../images/hero-bg.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
@supports (background-image:image-set(url("../images/hero-bg.webp") type("image/webp"))){
  .section-hero.is-image{background-image:image-set(url("../images/hero-bg.webp") type("image/webp"),url("../images/hero-bg.jpg") type("image/jpeg"))}
}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,#10202fee 0%,#10202fe6 46%,#10202f80 100%)}
.hero-shell{position:relative}
.hero-grid{padding-top:4.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2rem;align-items:end;min-height:640px}
.hero-copy{padding-bottom:5rem;animation:vg-rise .7s ease-out both}
.hero-pre-lede{font-family:var(--display-font);font-weight:600;font-size:1.5rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--primary--color);max-width:26rem;margin-bottom:1.1rem}
.hero-h1{font-size:clamp(3.6rem,8.2vw,7.6rem);line-height:.88;letter-spacing:-.01em;color:var(--utility--white);text-wrap:balance}
.hero-h1-emphasis{color:var(--primary--color)}
.hero-rule{width:96px;height:6px;background:var(--primary--color);margin:1.75rem 0}
.hero-lede{font-size:1.375rem;line-height:1.45;color:var(--utility--white-80);max-width:32rem;margin-bottom:2rem}
.hero-vote{font-family:var(--display-font);font-weight:600;font-size:1.4rem;letter-spacing:.12em;text-transform:uppercase;color:var(--utility--white-60)}
.hero-figure{align-self:end;justify-self:center;width:100%;max-width:520px}
.hero-figure img{width:100%;height:auto;filter:drop-shadow(0 24px 48px #00000059)}

@media (max-width:991px){
  .hero-grid{min-height:0;padding-top:3.25rem}
  .hero-copy{padding-bottom:2.5rem}
  .hero-h1{font-size:clamp(3rem,11vw,4.75rem)}
  .hero-pre-lede{font-size:1.25rem}
  .hero-lede{font-size:1.2rem}
}

/* Flair strip */
.section-flair{position:relative;background:var(--primary--color);display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:.9rem;overflow:hidden;padding:.85rem 0}
.flair-word{font-family:var(--display-font);font-weight:800;font-size:1.35rem;letter-spacing:.32em;text-transform:uppercase;color:var(--utility--white-80);white-space:nowrap}
.flair-dot{color:var(--utility--white-40);font-size:1.1rem}
.flair-fade{position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:1}
.flair-fade.is-left{left:0;background:linear-gradient(90deg,var(--primary--color),#f54a3a00)}
.flair-fade.is-right{right:0;background:linear-gradient(270deg,var(--primary--color),#f54a3a00)}

/* About */
.section-about{background:var(--utility--white)}
.about-h2{font-size:clamp(2.6rem,5vw,4.25rem);color:var(--secondary--color);margin-bottom:2rem}
.body-p{font-size:1.3rem;line-height:1.62;color:#10202fe0;text-wrap:pretty}

/* Record grid */
.section-record{background:var(--secondary--color)}
.issue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem}
.grid-card{border-top:6px solid var(--primary--color);padding-top:1.5rem}
.grid-card__num{font-family:var(--display-font);font-weight:600;font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary--color);margin-bottom:.5rem}
.grid-card__h3{font-size:2.75rem;line-height:.95;color:var(--utility--white)}

/* CTA band */
.section-cta{background:var(--primary--color);text-align:center}
.cta__p{font-size:clamp(2.4rem,5.5vw,4.5rem);line-height:.94;color:var(--utility--white)}

/* Error pages */
.section-error{background:var(--secondary--color)}
.section-error .hero-h1{font-size:clamp(2.75rem,7vw,5rem)}
.source-link{color:var(--primary--color);text-decoration:underline}

/* Footer */
.footer{background:var(--secondary--color);color:var(--utility--white);padding-top:40px;padding-bottom:40px}
.footer-inner{display:flex;flex-direction:column;gap:1.5rem;align-items:center;text-align:center}
.paid-for{border:1px solid #ffffff59;padding:1rem 1.25rem;font-size:.95rem;line-height:1.5;color:var(--utility--white-80);max-width:44rem}
.footer-link{color:var(--utility--white-60);font-size:.95rem}

@keyframes vg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
