/* Shared desktop/mobile brand asset. The original is intentionally unmodified. */
.header { height: 82px; }
.brand img { width: 135px; height: auto; aspect-ratio: 1536 / 821; object-fit: contain; }
.footer-brand img { width: 168px; height: auto; aspect-ratio: 1536 / 821; object-fit: contain; }
.mobile-nav { top: 100%; }

@media (max-width: 1050px) {
  .brand img { width: 130px; }
}
@media (max-width: 767px) {
  .header { height: 80px; }
  .brand img { width: 135px; }
  .footer-brand img { width: 168px; height: auto; }
}
@media (max-width: 380px) {
  .brand img { width: 125px; }
}

/* Selected setup #3: bold headings, limited editorial accents, clean reading. */
.desktop-nav > a { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; letter-spacing: .2px; }
.desktop-nav > a:hover, .desktop-nav > a[aria-current] { color: #f99dc9; }
.desktop-nav > a[aria-current] { box-shadow: inset 0 -2px #ed64a3; }
.mobile-nav a[aria-current] { color: #ffafd5; background: #27131f; }
.ranking-hub-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 2px; border-bottom: 1px solid #37202d; }
.ranking-hub-row:last-child { border-bottom: 0; }
.ranking-hub-row > span:first-child { color: #df8fb8; flex-shrink: 0; }
.ranking-hub-row > span:nth-child(2) { min-width: 0; }
.ranking-hub-row .icon { width: 20px; height: 20px; }
.ranking-hub-row strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 500; }
.ranking-hub-row small { display: block; font-size: 12px; line-height: 1.5; color: #bba0b1; }
.ranking-hub-row > span:last-child { margin-left: auto; color: #e990bc; }
.ranking-hub-row:hover strong { color: #ffa0ce; }
@media (max-width: 767px) {
  .mobile-nav a { min-height: 48px; font-size: 16px; }
  .ranking-hub-row { min-height: 58px; gap: 12px; }
  .ranking-hub-row strong { font-size: 16px; }
  .ranking-hub-row small { font-size: 13px; }
}
:root {
  --font-heading: 'Space Grotesk', Arial, sans-serif;
  --font-accent: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', Arial, sans-serif;
}
body { font-family: var(--font-body); }
.hero h1, .pillar h2, .section-heading h2,
.newsletter h2, .footer h2, #dialog-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.4px;
  text-transform: none;
}
.hero h1 span, .footer-brand p {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.3px;
}
.hero { height: auto; min-height: 316px; }
.hero-inner { padding-bottom: 22px; }
.hero h1 { font-size: 43px; line-height: 1.14; letter-spacing: -.9px; white-space: normal; }
.hero h1 span { font-size: 49px; line-height: 1.16; }
.hero-motto { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.4; margin-top: 12px; }
.pillar { height: auto; min-height: 220px; padding-bottom: 15px; }
.pillar h2 { font-size: 24px; line-height: 1.2; }
.section-heading h2, .panel .section-heading h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.4px; white-space: normal; }
.section-heading, .panel > .section-heading { height: auto; min-height: 34px; }
.panel { height: auto; min-height: 202px; }
.newsletter h2 { font-size: 19px; line-height: 1.25; white-space: normal; }
.footer h2 { font-size: 14px; line-height: 1.4; margin-bottom: 7px; }
.footer-brand p { font-size: 19px; line-height: 1.4; }
#dialog-title { font-size: 32px; line-height: 1.25; }

@media (min-width: 768px) and (max-width: 1050px) {
  .hero h1 { font-size: 40px; }
  .hero h1 span { font-size: 46px; }
  .pillar { min-height: 235px; }
}
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero h1 { font-size: clamp(27px, 7.8vw, 40px); line-height: 1.2; letter-spacing: -.7px; }
  .hero h1 span { font-size: clamp(34px, 9vw, 47px); }
  .hero-motto { font-size: 18px; margin-top: 13px; }
  .pillar { min-height: 264px; padding-bottom: 20px; }
  .pillar h2 { font-size: 26px; }
  .category-section .section-heading { flex-wrap: wrap; gap: 0 12px; }
  .category-section .section-heading h2 { font-size: 20px; letter-spacing: -.4px; }
  .panel { min-height: 0; }
  .panel .section-heading h2 { font-size: 21px; letter-spacing: -.4px; }
  .newsletter h2 { font-size: 22px; }
  .footer h2 { font-size: 15px; }
  .footer-brand p { font-size: 19px; }
  #dialog-title { font-size: 28px; }
}