/* ============================================================
   AURA SPORTS GROUP — Site styles
   Generated from Figma design system (01 · Design System)
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display face in Figma is "Dharma Gothic E ExBold Italic" (commercial).
   Licensed woff2 files live in assets/fonts. Fallback: Anton (Google Fonts)
   with synthesized oblique, used if these fail to load. */
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_ExLight_R.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_ExLight_I.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Light_R.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Light_I.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Regular_R.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Regular_I.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Bold_R.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_ExBold_R.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_ExBold_I.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Heavy_R.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dharma Gothic E";
  src: url("../assets/fonts/DharmaGothicE_Heavy_I.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ink */
  --ink-950: #08080a;
  --ink-900: #0e0e11;
  --ink-850: #0b0b0d;
  --ink-800: #17171b;
  --ink-750: #111114;
  --ink-700: #222228;
  --ink-650: #1d1d22;
  --ink-600: #2e2e36;
  --warm-900: #141210;

  /* neutrals */
  --white-off: #f4f2ed;
  --white-pure: #ffffff;
  --grey-300: #c2c2c8;
  --grey-250: #cfd0d4; /* slightly lighter than grey-300, for legal-page paragraph text */
  --grey-400: #9c9ca4;
  --grey-350: #a8a8b0; /* slightly lighter than grey-400, for body paragraph text */
  --grey-500: #6e6e77;

  /* gold */
  --gold-300: #e9d8ac;
  --gold-400: #d9be85;
  --gold-500: #c6a567;
  --gold-600: #9c7e45;
  --gold-700: #6e5730;

  /* silver */
  --silver-300: #e4e6ea;
  --silver-400: #c4c7ce;
  --silver-500: #9da1aa;

  /* accents */
  --amber: #e3a94f;
  --blue: #7c93c4;
  --violet: #9186c9;

  /* metallic gold gradient (from Figma "Metal/Gold") */
  --metal-gold: linear-gradient(
    168deg,
    #aa812f 0%,
    #f7f2ec 19%,
    #e7c576 33%,
    #b2862a 47%,
    #e7c576 60.5%,
    #f0efeb 70.7%
  );

  --font-display: "Dharma Gothic E", "Anton", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", sans-serif;

  --container: 1200px;
  --pad-x: clamp(24px, 8.33vw, 120px);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ink-950);
  color: var(--white-off);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ---------- Type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.display--hero { font-size: clamp(44px, 6.5vw, 94px); line-height: 1; }
.display--xl   { font-size: clamp(40px, 5vw, 72px); }
.display--l    { font-size: clamp(34px, 3.9vw, 56px); }
.display--m    { font-size: clamp(26px, 2.9vw, 42px); }
.display--s    { font-size: clamp(20px, 2.2vw, 31px); }
.display--stat { font-size: clamp(56px, 5.8vw, 84px); line-height: 1; }

.gold-text {
  display: inline-block;
  padding-right: 0.06em;
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-500);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3.12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-500);
  flex: none;
}

.body-l { font-size: 18px; line-height: 1.65; color: var(--grey-350); }
.body-m { font-size: 16px; line-height: 1.65; color: var(--grey-350); }
.body-s { font-size: 14px; line-height: 1.5; color: var(--grey-350); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--metal-gold);
  color: var(--ink-950);
}

.btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 24px rgba(198, 165, 103, 0.45);
}

.btn--ghost {
  background: transparent;
  border: 1px solid #aa812f;
  color: var(--white-off);
}

.btn--ghost:hover {
  box-shadow: 0 0 18px rgba(198, 165, 103, 0.3);
  background: rgba(198, 165, 103, 0.08);
}

/* ---------- Layout helpers ---------- */
.section {
  padding: 65px var(--pad-x);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
}

/* Visually hidden but accessible / crawlable — for SEO-required headings
   that shouldn't add a visible line to a design that doesn't call for one. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad-x);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s ease;
  background: rgba(8, 8, 10, 0);
}

.site-nav.scrolled,
.site-nav.solid {
  background: rgba(8, 8, 10, 0.82);
}

/* The frosted-glass blur lives on its own layer behind the nav's real
   content instead of directly on .site-nav. backdrop-filter (like transform
   and filter) makes the element carrying it a new containing block for any
   position:fixed descendant — and #navLinks, the full-screen mobile menu, is
   exactly that: a fixed element nested inside <nav>. With the blur on
   .site-nav itself, opening the mobile menu on any page/scroll state where
   the bar is already blurred (.scrolled, or .nav-solid pages' permanent
   .solid) made #navLinks size itself against the ~64px nav bar instead of
   the viewport. Toggling backdrop-filter off while the menu was open (an
   earlier attempt at this fix) helped on paper, but real devices don't
   necessarily recompute the containing block in the same frame as the style
   change, so the collapse still flashed before snapping right. Keeping
   backdrop-filter off of .site-nav entirely, at all times, removes the bug
   at its source rather than racing it. */
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: backdrop-filter 0.3s ease;
}

.site-nav.scrolled::before,
.site-nav.solid::before {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* hidden while scrolling down past the top of the page; slides back
   in as soon as the user scrolls up (see initNav in site.js) */
.site-nav.nav-hidden {
  transform: translateY(-100%);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  /* centered independent of the logo's width — with .site-nav's
     space-between now only balancing the logo against the (desktop-hidden)
     burger button, the links would otherwise hug the right edge */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-links > li {
  position: relative;
}

/* invisible bridge so the pointer stays "inside" the li while crossing
   the gap between the nav link and the dropdown below it */
.nav-links > li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.nav-links a.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 8px 0;
  color: var(--white-off);
  /* gradient fill sits ready off to the right; revealed by sweeping
     background-position + fading text-fill-color on hover */
  background: var(--metal-gold);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--white-off);
  text-shadow:
    0 0 0 rgba(198, 165, 103, 0),
    0 0 0 rgba(198, 165, 103, 0),
    0 0 0 rgba(198, 165, 103, 0),
    0 0 0 rgba(198, 165, 103, 0);
  /* slow, unhurried fade back to the resting state */
  transition:
    -webkit-text-fill-color 1s ease,
    color 1s ease,
    background-position 0.9s ease,
    text-shadow 0.9s ease;
}

.nav-links li.active > a.nav-link {
  color: var(--gold-400);
  -webkit-text-fill-color: var(--gold-400);
}

/* glow hugs each glyph's own outline (text-shadow is cast per-character)
   rather than a generic shape behind the whole word; fill wipes across with
   the same metallic gold gradient as the hero's "Built for the Long Game." text */
.nav-links a.nav-link:hover {
  color: var(--gold-400);
  -webkit-text-fill-color: transparent;
  background-position: 0% 0;
  text-shadow:
    0 0 2px rgba(198, 165, 103, 0.9),
    0 0 6px rgba(198, 165, 103, 0.75),
    0 0 12px rgba(198, 165, 103, 0.55),
    0 0 22px rgba(198, 165, 103, 0.35);
  /* quick wipe-in on hover */
  transition:
    -webkit-text-fill-color 0.25s ease,
    color 0.25s ease,
    background-position 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 0.3s ease;
}

/* dropdown — a single horizontal row of links rather than a stacked list.
   The panel scales/fades in with a springy ease, then each link cascades
   in behind it left-to-right rather than appearing all at once. Closing
   skips the stagger (see the no-delay transition on the base ".nav-drop a"
   rule below) so the panel dismisses as one quick fade instead of
   reversing the cascade. */
.nav-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  transform-origin: top center;
  background: rgba(14, 14, 17, 0.97);
  /* fully rounded — pairs with the pill-shaped panel's fixed vertical
     padding below to keep the ends a true semicircle regardless of the
     row's total width */
  border-radius: 999px;
  padding: 6px 10px;
  /* shrink-wraps to the row's total content width rather than a fixed width */
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  /* lays links out side by side; align-items centers them vertically
     since they're no longer stacked in a column */
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-links li:hover .nav-drop,
.nav-links li:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear;
}

.nav-drop a {
  /* base size is shrink-wrapped to the label itself (plus a small
     click-comfort margin); site.js then widens every link in a given
     dropdown to match its widest sibling, so e.g. "NFL" gets as much
     clickable width as "Recruits" instead of a visibly tighter hit box.
     text-align centers the (usually shorter) label within that widened
     box once JS sets an explicit width. */
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--grey-250);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* thin divider between links now that they sit side by side, so
   adjacent labels don't visually run together */
.nav-drop a:not(:first-child) {
  border-left: 1px solid rgba(198, 165, 103, 0.25);
}

.nav-links li:hover .nav-drop a,
.nav-links li:focus-within .nav-drop a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links li:hover .nav-drop a:nth-child(1),
.nav-links li:focus-within .nav-drop a:nth-child(1) { transition-delay: 0.05s; }
.nav-links li:hover .nav-drop a:nth-child(2),
.nav-links li:focus-within .nav-drop a:nth-child(2) { transition-delay: 0.1s; }
.nav-links li:hover .nav-drop a:nth-child(3),
.nav-links li:focus-within .nav-drop a:nth-child(3) { transition-delay: 0.15s; }
.nav-links li:hover .nav-drop a:nth-child(4),
.nav-links li:focus-within .nav-drop a:nth-child(4) { transition-delay: 0.2s; }

.nav-drop a span {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* glow trigger matches the clickable box exactly (the <a> is already
   shrink-wrapped to the label + its click-comfort padding above), so
   hovering anywhere in that box lights up the text */
.nav-drop a:hover span {
  color: var(--gold-400);
  text-shadow: 0 0 8px rgba(198, 165, 103, 0.75), 0 0 18px rgba(198, 165, 103, 0.45);
}

/* burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-burger span {
  width: 24px;
  height: 2px;
  background: var(--white-off);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* burger → close (X), driven by the button's own aria-expanded state so
   there's a clear visual confirmation the menu actually opened */
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Logo lockup ---------- */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo-lockup .logo-mark {
  display: block;
  height: 40px;
  width: auto;
}

.logo-lockup--footer .logo-mark { height: 64px; }

@media (max-width: 900px) {
  .logo-lockup .logo-mark { height: 32px; }
}

/* ---------- Barcode motif ---------- */
.barcode {
  display: inline-flex;
  gap: 0;
  align-items: center;
  opacity: 0.6;
}

.barcode i {
  display: block;
  height: 19.6px;
  background: var(--silver-400);
}

.barcode--white i { background: var(--white-off); }
.barcode--dim { opacity: 0.35; }
.barcode--bright { opacity: 0.85; }

/* bar widths + gaps measured from updated reference (2026-08), scaled to 70% */
.barcode i:nth-child(1)  { width: 1.4px;  margin-right: 9.8px; }
.barcode i:nth-child(2)  { width: 1.4px;  margin-right: 8.9px; }
.barcode i:nth-child(3)  { width: 3.2px;  margin-right: 1.7px; }
.barcode i:nth-child(4)  { width: 3.2px;  margin-right: 9.8px; }
.barcode i:nth-child(5)  { width: 5.8px;  margin-right: 3.9px; }
.barcode i:nth-child(6)  { width: 5.8px;  margin-right: 10.2px; }
.barcode i:nth-child(7)  { width: 8.1px;  margin-right: 6.2px; }
.barcode i:nth-child(8)  { width: 8.1px;  margin-right: 9px; }
.barcode i:nth-child(9)  { width: 13.5px; margin-right: 10.5px; }
.barcode i:nth-child(10) { width: 13.4px; margin-right: 0; }

/* ---------- Section header ---------- */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.section-header.center {
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/* ---------- Media placeholder ---------- */
.media-ph {
  position: relative;
  background:
    linear-gradient(145deg, rgba(198, 165, 103, 0.07), rgba(8, 8, 10, 0) 55%),
    linear-gradient(315deg, rgba(198, 165, 103, 0.05), rgba(8, 8, 10, 0) 50%),
    var(--ink-650);
  border: 1px solid var(--ink-700);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-ph::after {
  content: attr(data-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  color: var(--grey-500);
  text-transform: uppercase;
}

.media-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Opaque the moment the box exists (not just once the photo has fully
     decoded), so the data-label placeholder text underneath never shows
     through a photo that's still downloading/rendering. */
  background-color: var(--ink-650);
}

.media-ph img[hidden] { display: none; }

/* ---------- Cards ---------- */
/* Pathway card */
.card-pathway {
  position: relative;
  flex: 1 1 0;
  height: 440px;
  border-radius: 0;
  overflow: hidden;
  background: var(--ink-650);
  display: block;
}

.card-pathway .media {
  position: absolute;
  inset: 0;
  border: none;
}

.card-pathway .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated by default; color returns only on hover of this card. */
  filter: grayscale(1);
  transition: filter 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: filter;
}

.card-pathway:hover .media img {
  filter: grayscale(0);
}

.card-pathway::after {
  /* scrim */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 10, 0.05) 0%,
    rgba(8, 8, 10, 0.35) 55%,
    rgba(8, 8, 10, 0.92) 100%
  );
}

.card-pathway .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 28px 28px;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-pathway .content .kicker {
  color: var(--gold-500);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.42px;
}

.card-pathway .content h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--white-off);
  text-transform: uppercase;
  transform-origin: left bottom;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-pathway .content .explore {
  color: var(--grey-350);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.68px;
  transition: color 0.2s ease;
}

.card-pathway .gold-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal-gold);
  opacity: 0;
  z-index: 3;
  transition: opacity 0.25s ease;
}

.card-pathway:hover .gold-edge { opacity: 1; }
.card-pathway:hover .content h3 { transform: scale(1.08); }
.card-pathway:hover .content .explore { color: var(--gold-400); }

/* College card: enlarged photo, shifted left */
.card-pathway .media img.college-photo {
  transform: scale(1.25) translateY(10%);
  object-position: 55% center;
}

/* Service card */
.card-service {
  background: linear-gradient(to bottom, var(--ink-800), var(--ink-900));
  border: 1px solid var(--ink-700);
  border-radius: 0;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.card-service:hover {
  border-color: var(--gold-600);
  box-shadow: 0 0 24px rgba(198, 165, 103, 0.12);
  transform: translateY(-2px);
}

.card-service .num {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-service h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--white-off);
}

.card-service p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-350);
}

/* Article card */
.card-article {
  background: var(--ink-750);
  border: 1px solid var(--ink-700);
  border-radius: 0;
  overflow: hidden;
  flex: 1 1 0;
  display: block;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-article:hover {
  border-color: var(--gold-600);
}

.card-article .thumb {
  height: 180px;
  background: var(--ink-650);
  position: relative;
  overflow: hidden;
}

.card-article .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-article .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(198, 165, 103, 0.05), transparent 60%);
}

.card-article .body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px 24px;
}

.card-article .pub {
  color: var(--gold-500);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.2px;
}

.card-article h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: var(--white-off);
}

.card-article .date {
  color: var(--grey-500);
  font-size: 12px;
}

/* ---------- Chips / filters / facets ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--grey-250);
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  border-color: var(--gold-600);
  color: var(--gold-400);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter {
  cursor: pointer;
  background: none;
}

.filter.active {
  border-color: var(--gold-500);
  color: var(--gold-400);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-950);
  border-top: 1px solid var(--ink-700);
  padding: 72px 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.site-footer .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col .col-title {
  color: var(--grey-500);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.42px;
  text-transform: uppercase;
}

.footer-col a {
  color: var(--grey-250);
  font-size: 13px;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--gold-400); }

.site-footer .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--grey-500);
}

.site-footer .legal {
  display: flex;
  gap: 24px;
  color: var(--grey-350);
}

.site-footer .legal a:hover { color: var(--gold-400); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: 230px var(--pad-x) 90px;
  position: relative;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--white-off);
  margin-top: 28px;
}

.page-hero .sub {
  margin-top: 28px;
  font-size: 18px;
  color: var(--grey-350);
  max-width: 900px;
}

/* Keep the heading position consistent across page-hero--img pages
   regardless of whether a description paragraph follows it — take .sub
   out of the centered flex flow so it doesn't pull the heading upward. */
.page-hero--img .sub {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 90px;
  margin-top: 0;
}

/* hero w/ image background */
.page-hero--img {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 190px;
  overflow: hidden;
}

.page-hero--img .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink-650);
}

.page-hero--img .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 10, 0.55) 0%,
    rgba(8, 8, 10, 0.65) 60%,
    var(--ink-950) 100%
  );
}

/* ---------- Grids ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .site-nav { padding: 16px var(--pad-x); }

  .nav-links {
    position: fixed;
    inset: 0;
    /* --nav-h is the bar's real measured height, kept in sync by site.js —
       the old hardcoded 76px didn't match the mobile bar's actual ~64px
       (16px padding + 32px logo), leaving a thin strip of the page visible
       between the bar and the menu's backdrop. */
    top: var(--nav-h, 76px);
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    overflow-y: auto;
    /* solid, not translucent — a video/filtered layer in the hero can be
       promoted to its own compositing layer on iOS Safari and paint through
       a semi-transparent overlay above it, so this menu can't afford to be
       anything but fully opaque */
    background: var(--ink-950);
    padding: 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav-links.open { transform: none; }

  .nav-links a.nav-link { font-size: 18px; padding: 12px 0; }

  /* Matches the specificity of the desktop hover/focus-within reveal rule
     below (.nav-links li:hover .nav-drop, .nav-links li:focus-within
     .nav-drop) — otherwise that rule's translateX(-50%) desktop-dropdown
     offset wins the cascade and survives into mobile whenever iOS gives the
     tapped <li> a sticky :hover or :focus-within state, shoving the
     dropdown roughly half its own width off-screen to the left. */
  .nav-links li:hover .nav-drop,
  .nav-links li:focus-within .nav-drop,
  .nav-drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: none;
    background: none;
    padding: 0 0 0 16px;
    /* always shown — every submenu sits open beneath its parent link so
       reaching a page never takes more than one tap */
    display: block;
  }

  /* links slide in from the left as the full-screen menu opens, cascading
     with the same stagger timing as the desktop hover panel — keyed off
     .nav-links.open (set on burger tap in site.js), since every submenu
     is already expanded rather than gated behind its own tap */
  .nav-drop a {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease, transform 0.25s ease;
  }

  /* the divider between items in the desktop horizontal pill (see
     ".nav-drop a:not(:first-child)" above) doesn't belong in this stacked
     mobile list — it just reads as a stray vertical line running down the
     left edge of the submenu. Matches that rule's selector (rather than
     the plain ".nav-drop a" above) so it wins on specificity, not just
     source order. */
  .nav-drop a:not(:first-child) {
    border-left: none;
  }

  .nav-links.open .nav-drop a {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-links.open .nav-drop a:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.open .nav-drop a:nth-child(2) { transition-delay: 0.1s; }
  .nav-links.open .nav-drop a:nth-child(3) { transition-delay: 0.15s; }
  .nav-links.open .nav-drop a:nth-child(4) { transition-delay: 0.2s; }

  .nav-burger { display: flex; }

  /* Belt-and-suspenders for the iOS Safari video-bleed-through bug: the
     hero's <video> and its filtered/blended logo layers are the pieces
     most likely to composite above a fixed overlay on WebKit, so pull them
     out of the render entirely (not just visually covered) while the
     full-screen mobile menu is open — see .nav-open toggle in site.js. */
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open .hero-media,
  body.nav-open .hero-scrim,
  body.nav-open .hero-logo-wrap,
  body.nav-open .scroll-indicator {
    visibility: hidden;
  }

  /* The bar itself is only solid once .scrolled/.solid is present — at the
     very top of an unscrolled, non-nav-solid page it's still fully
     transparent (rgba(8,8,10,0)), so opening the menu there leaves whatever
     is behind the bar (hero art, a page-hero image) showing through as a
     strip above the menu's opaque backdrop. This forces the same solid +
     blurred look the bar gets from .scrolled/.solid whenever the menu is
     open, regardless of scroll position, so the top edge is never see-
     through — background is safe to set directly on #siteNav (only
     backdrop-filter creates a containing block, and that one lives on the
     ::before layer, not on #siteNav itself, so this can't reintroduce the
     earlier collapsed-menu bug). */
  body.nav-open #siteNav {
    background: rgba(8, 8, 10, 0.82);
  }
  body.nav-open #siteNav::before {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (max-width: 720px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .section { padding: 48px var(--pad-x); }
  .site-footer { padding: 56px 24px 32px; }
  .site-footer .top { gap: 40px; }
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 40px 24px;
  }
}