/* =========================================================================
   The Fried Hangover 1.2 — PREMIUM TYPOGRAPHY layer
   Loaded ONLY on the sub-pages (artist, downloads, impact, loyalty, recipes,
   reviews) AFTER site.css + premium.css. index.html is intentionally untouched.

   Fixes the root defect: the Google-Fonts @import in brand.css sits AFTER other
   rules, so it is invalid per spec and every page fell back to system sans.
   This layer self-hosts Bungee (display) + Inter Variable (body) via Fontsource,
   preloads them, kills CLS with metric-matched fallbacks, and lays down a fluid
   modular scale + tuned heading rhythm.
   ========================================================================= */

/* ------------------------------------------------------ self-hosted fonts -- */
/* Display — Bungee (brand signature). Single weight, display use only. */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bungee-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* Body — Inter Variable (weight axis 100–900). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var-italic.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-var-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --- metric-matched fallbacks so swap causes ~zero layout shift (CLS) --- */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: 'Bungee Fallback';
  src: local('Arial Black'), local('Impact');
  ascent-override: 100%;
  descent-override: 29%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* --------------------------------------------------------------- tokens --- */
:root {
  /* Font stacks (Fontsource self-host → metric fallback → system). */
  --font-display: 'Bungee', 'Bungee Fallback', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Fluid modular scale — minor-third on mobile → perfect-fourth on desktop.
     Every step is one clamp() so the whole system breathes with the viewport. */
  --fs--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem);   /* micro / eyebrow  */
  --fs--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);   /* small / meta     */
  --fs-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.125rem);  /* body             */
  --fs-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);   /* lead / h5        */
  --fs-2:  clamp(1.44rem, 1.28rem + 0.80vw, 2.00rem);   /* h4 / card title  */
  --fs-3:  clamp(1.73rem, 1.45rem + 1.30vw, 2.66rem);   /* h3 / sub-section */
  --fs-4:  clamp(2.07rem, 1.60rem + 2.20vw, 3.55rem);   /* h2 / section     */
  --fs-5:  clamp(2.50rem, 1.85rem + 3.10vw, 4.70rem);   /* h1 / hero        */
  --fs-6:  clamp(2.80rem, 1.95rem + 4.10vw, 5.60rem);   /* display / name   */

  /* Rhythm */
  --lh-display: 0.95;
  --lh-tight:   1.08;
  --lh-heading: 1.16;
  --lh-snug:    1.4;
  --lh-body:    1.65;

  /* Tracking — tighten big display, open small labels (optical correction). */
  --tr-display: -0.015em;
  --tr-heading: 0;
  --tr-label:   0.16em;
  --tr-eyebrow: 0.24em;

  --measure: 68ch;
}

/* --------------------------------------------------------- base rhythm --- */
.fh-page {
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Inter looks best a touch heavier for premium body copy. */
.fh-page p,
.fh-page li,
.fh-page dd { line-height: var(--lh-body); }

/* Long-form body copy gets a comfortable measure. */
.fh-page .ar-bio__body p,
.fh-page .fh-hero__lead,
.fh-page .px-head__sub,
.fh-page .ar-hero__role { max-width: var(--measure); }

/* --------------------------------------------------- display / headings -- */
.fh-page h1, .fh-page h2, .fh-page h3, .fh-page h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

/* Big display moments — hero titles & names: tighten tracking, snug leading. */
.ar-hero__name,
.px-hero__title,
.fh-hero__title,
.px-head__title {
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
}
.ar-hero__name { line-height: var(--lh-display); }

/* Eyebrows / kickers / marquee labels — Bungee as a wide-tracked label. */
.px-hero__eyebrow,
.px-head__eyebrow,
.fh-hero__eyebrow,
.apex__eyebrow {
  font-family: var(--font-display);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  line-height: 1.3;
}

/* Nav / footer labels — keep the wide-tracked Bungee treatment consistent. */
.fh-nav__link,
.fh-mobile__link,
.fh-footer,
.fh-site-footer__h { letter-spacing: var(--tr-label); }

/* Body-weighted UI text should NOT inherit display; keep Inter for readability. */
.fh-page .ar-ph small,
.fh-page .fh-note,
.fh-page .brutalist-card p { font-family: var(--font-body); }

/* Small Bungee card titles were rendering cramped/undersized — give them a
   legibility floor and consistent rhythm without breaking the brand texture. */
.ar-cards h3,
.im-bento .im-cell__title,
.dl-premium .dl-card h3,
.ar-fill h3 {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Gradient/clipped display text needs a hair more weight-illusion: nudge the
   optical size of adjacent Inter subheads up for a crisper hierarchy. */
.fh-page .px-head__sub,
.fh-page .fh-section__sub { font-weight: 450; }

/* Respect reduced motion — kill the shimmer sweep on headline gradient text. */
@media (prefers-reduced-motion: reduce) {
  .shine { animation: none !important; }
}