/* ═══════════════════════════════════════════════════════════════════
   HGM UNIFY LAYER · 2026-10-01
   Site-wide unification: 4-size type system, full-width layout, pristine
   spacing scale, smooth motion, brand logo integration.
   Loaded LAST on every page so it is the final word on these systems.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ——— 4-size type hierarchy (the ONLY font sizes on the site) ——— */
  --fs-display: clamp(2.75rem, 1.75rem + 4.6vw, 4.5rem);  /* h1 · 44→72px */
  --fs-heading: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);  /* h2 · 28→44px */
  --fs-body: 1.0625rem;                                   /* 17px · h3–h6, p, li, body copy */
  --fs-caption: 0.6875rem;                                /* 11px · labels, nav, buttons, meta */

  /* ——— spacing scale ——— */
  --u-pad: clamp(3.5rem, 7vw, 6.5rem);        /* section vertical rhythm · 56→104px */
  --u-gutter: clamp(1.25rem, 4vw, 3rem);      /* viewport edge gutter */
  --u-wrap: 80rem;                             /* 1280px content measure */
  --u-gap: clamp(1.5rem, 3vw, 3rem);          /* grid/card gaps */
}

/* ═══════════ §1 · 4-size type enforcement ═══════════
   !important is intentional: this layer exists to collapse every
   legacy size onto the 4-step scale, no exceptions. */
body h1 { font-size: var(--fs-display) !important; line-height: 1.04 !important; letter-spacing: -0.015em !important; }
body h2 { font-size: var(--fs-heading) !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; }
body h3, body h4, body h5, body h6 {
  font-size: var(--fs-body) !important; line-height: 1.45 !important; font-weight: 700 !important;
}
body p, body li, body blockquote, body dd, body dt, body td, body th,
body input, body textarea, body select, body summary, body figcaption,
body .lede, body .lux-lede {
  font-size: var(--fs-body) !important; line-height: 1.7 !important;
}
/* caption tier — eyebrows, labels, nav, buttons, meta, fine print */
body .lux-eyebrow, body .eyebrow, body .mono, body .kicker, body .section-kicker,
body .nav a, body .nav-btn, body .btn, body button,
body .fine, body .lux-status, body .status, body .foot-legal, body .legal,
body small, body .art-tag, body .car-count, body .g5-num, body .mono-k,
body .foot-cols h5, body .footer-heading, body .lux-proof__item span,
body .announce, body .a11y-tab, body label {
  font-size: var(--fs-caption) !important;
}
/* display-intent components keep display scale */
body .type-big { font-size: var(--fs-display) !important; line-height: 1.02 !important; }
/* stat numerals keep heading scale */
body .lux-proof__item strong { font-size: var(--fs-heading) !important; }

/* ═══════════ §2 · full-width layout ═══════════ */
html, body { width: 100%; }
body { overflow-x: clip; }
body main { width: 100%; max-width: none; margin: 0; }
body main > section, body .lux-section {
  width: 100%; max-width: none;
  padding-top: var(--u-pad); padding-bottom: var(--u-pad);
  padding-left: 0; padding-right: 0;
}
body .lux-wrap {
  width: min(var(--u-wrap), 100% - var(--u-gutter) * 2);
  margin-inline: auto;
}
/* sections without .lux-wrap still get balanced gutters via their own padding */

/* ═══════════ §3 · pristine spacing ═══════════ */
body h1, body h2, body h3, body h4 { margin: 0 0 0.6em; text-wrap: balance; }
body p { margin: 0 0 1.1em; }
body p:last-child, body li:last-child { margin-bottom: 0; }
body ul, body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
body li + li { margin-top: 0.45em; }
body section { scroll-margin-top: 96px; }
body img { max-width: 100%; height: auto; }

/* ═══════════ §4 · brand logo integration ═══════════ */
body .wordmark--logo { display: inline-flex; align-items: center; gap: 12px; }
body .brand-logo { height: 30px; width: auto; display: block; flex: none; }
body .brand-logo--white { display: none; }
html[data-theme="dark"] body .brand-logo--black { display: none; }
html[data-theme="dark"] body .brand-logo--white { display: block; }
body .foot-brand .brand-logo { height: 34px; }
/* footer sits on --night in every mode: always the white mark */
body .foot-brand .brand-logo--black { display: none; }
body .foot-brand .brand-logo--white { display: block; }

/* ═══════════ §5 · smooth motion ═══════════ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body main { animation: u-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  body a, body button, body .btn {
    transition: color 0.25s ease, background-color 0.25s ease,
      border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s ease, opacity 0.25s ease;
  }
  body .lux-card, body .g5-card, body .art-card, body .quote {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s ease, border-color 0.35s ease;
  }
  body .lux-card:hover, body .g5-card:hover, body .art-card:hover {
    transform: translateY(-4px);
  }
  body img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
}
@keyframes u-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body main { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════ §6 · funnel polish ═══════════ */
body .lux-final { text-align: center; }
body ::selection { background: var(--gold); color: var(--night); }