/* Shared typography system for every NextBias page */
:root {
  --font-body: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--font-body);
  --display: var(--font-display);
}

html {
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3,
h4,
.brand,
.brand-copy strong,
.footer-brand,
.stack-card strong,
.hero-stats dt,
.result-art span,
.finder-winner-copy h3,
.finder-alt-copy strong,
.shop-browser-heading h2,
.shop-letter-heading h3,
.shop-group-name strong,
.route-error-code,
.route-error-copy h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
}

.hero h1,
.page-intro h1,
.profile-title h1,
.idol-title h1,
.not-found h1,
.route-error-copy h1 {
  font-weight: 800;
  letter-spacing: -.055em;
}

.section-heading h2,
.trust-strip h2,
.shop-browser-heading h2,
.finder-winner-copy h3,
.result-copy h3 {
  font-weight: 750;
  letter-spacing: -.045em;
}

.brand,
.brand-copy strong,
.footer-brand {
  font-weight: 750;
  letter-spacing: -.045em;
}

/* Homepage portfolio cards: one clear type role per line. */
.stack-card {
  isolation: isolate;
}

.stack-card .stack-shade {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 7, 20, .02) 12%,
    rgba(10, 7, 20, .16) 44%,
    rgba(10, 7, 20, .78) 78%,
    rgba(10, 7, 20, .94) 100%
  );
}

.stack-card > span:not(.stack-shade),
.stack-card strong,
.stack-card small {
  position: relative;
  z-index: 2;
}

.stack-card > span:not(.stack-shade) {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .28);
  text-transform: uppercase;
}

.stack-card strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .82;
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 rgba(10, 7, 20, .46),
    0 7px 18px rgba(0, 0, 0, .42),
    0 18px 34px rgba(0, 0, 0, .24);
  text-wrap: balance;
  -webkit-text-stroke: 1px rgba(10, 7, 20, .52);
}

.stack-card small {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  padding: 7px 11px 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-inline-start: 3px solid color-mix(in srgb, var(--accent, #ff3ca6) 68%, #fff);
  border-radius: 7px 12px 12px 7px;
  background: linear-gradient(105deg, rgba(12, 9, 22, .88), rgba(28, 20, 48, .72));
  box-shadow:
    0 9px 22px rgba(0, 0, 0, .26),
    inset 0 1px rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .96);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .32);
  text-wrap: balance;
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
}

.pro-header .primary-nav a,
.pro-header .header-cta,
.button,
.shop-listing-button,
.shop-clear-filters,
.footer-cta,
.choice-row label span {
  font-family: var(--font-body);
  letter-spacing: -.012em;
}

.eyebrow,
.kicker,
.pro-header .brand-copy small,
.pro-footer .footer-column h2,
.shop-category-chip,
.shop-letter-heading span {
  font-family: var(--font-body);
  letter-spacing: .11em;
}

p,
li,
dd,
small,
label,
input,
select,
textarea {
  font-family: var(--font-body);
}

@media (max-width: 620px) {
  .hero h1,
  .page-intro h1,
  .profile-title h1,
  .idol-title h1,
  .not-found h1,
  .route-error-copy h1 {
    letter-spacing: -.045em;
  }

  .stack-card small {
    padding: 6px 9px 7px;
    font-size: 11px;
  }
}