/* ╔══════════════════════════════════════════════════════════╗
   ║  CAMP ROYAL — V2 (Premium Royal — Version A energy)      ║
   ║  Palette: midnight onyx + imperial purple + champagne    ║
   ║           gold + ivory. No spray-paint red.              ║
   ║  Type: Archivo Black (display) + Archivo (UI) +          ║
   ║        Fraunces italic (sacred / Light moments) +        ║
   ║        Inter (body)                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  /* Canvas */
  --onyx:           #0a0e1a;
  --obsidian:       #13182b;
  --ink:            #1a1f33;
  --night:          #06080f;

  /* Royal accents */
  --royal:          #3d1854;
  --royal-deep:     #2a0d3d;
  --royal-soft:     #6b3a85;

  /* Gold (primary accent) */
  --gold:           #d4af37;
  --gold-bright:    #f4d068;
  --gold-deep:      #9a7728;
  --gold-leaf:      #c9a14a;
  --brass:          #b8860b;

  /* Light / Cream */
  --ivory:          #f7f3eb;
  --ivory-soft:     #ece4d4;
  --bone:           #d4cab8;
  --muted-gold:     #8a7a55;

  /* Burgundy (used sparingly for "send" accent) */
  --burgundy:       #5e1a1f;

  /* System */
  --maxw:           1280px;
  --r:              4px;        /* Brutalist edges, not rounded */
  --r-soft:         12px;
  --shadow-gold:    6px 6px 0 var(--gold-deep);
  --shadow-gold-hover: 8px 8px 0 var(--gold-deep);
  --transition:     .35s cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--onyx);
  color: var(--ivory-soft);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--ivory);
}
a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-bright); }
img { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; background: 0; border: 0; color: inherit; }

/* ────────────────────────────────────────────────────────────
   Utilities
   ──────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 36px; height: 2px;
  background: var(--gold);
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: ""; width: 36px; height: 2px; background: var(--gold);
}

/* Shared grain overlay — apply to .grain element */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .28;
  mix-blend-mode: overlay;
}
.grain.subtle { opacity: .15; }

/* Buttons (brutalist offset shadows in gold) */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: var(--r);
  transition: transform .18s, box-shadow .18s, background .18s, color .18s;
  position: relative;
  border: 0;
  cursor: pointer;
}
.btn-primary {
  background: var(--gold);
  color: var(--onyx);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-gold-hover);
  background: var(--gold-bright);
  color: var(--onyx);
}
.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border: 2px solid var(--gold);
  box-shadow: 6px 6px 0 rgba(212,175,55,.25);
}
.btn-ghost:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(212,175,55,.4);
  background: rgba(212,175,55,.08);
  color: var(--gold);
}
.btn-arrow::after { content: "→"; transition: transform .2s; }
.btn:hover .btn-arrow::after { transform: translateX(6px); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  NAV                                                     ║
   ╚══════════════════════════════════════════════════════════╝ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: .35s;
}
.nav.scrolled {
  background: rgba(10,14,26,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(212,175,55,.15);
  padding: 10px 0;
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ivory);
}
.brand-crown {
  width: 36px; height: 25px;
  color: var(--gold);
  flex: none;
  transform: translateY(-2px);
}
.brand-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px;
  letter-spacing: .005em;
  line-height: .78;
  color: var(--ivory);
}
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link, .nav-trigger {
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(247,243,235,.78);
  text-transform: uppercase;
  padding: 10px 11px;
  border-radius: var(--r);
  transition: .2s;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.nav-link:hover, .nav-trigger:hover {
  color: var(--gold);
  background: rgba(212,175,55,.08);
}
.nav-cta {
  background: var(--gold) !important;
  color: var(--onyx) !important;
  padding: 12px 22px !important;
  margin-left: 8px;
  letter-spacing: .14em !important;
  box-shadow: 4px 4px 0 var(--gold-deep);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.nav-cta:hover {
  background: var(--gold-bright) !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--gold-deep);
}

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--r);
  padding: 8px;
  margin-top: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: .2s;
  box-shadow: 0 18px 50px -10px rgba(0,0,0,.6);
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ivory-soft);
  border-radius: var(--r);
}
.nav-dropdown a:hover { background: rgba(212,175,55,.1); color: var(--gold); }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { width: 24px; height: 2px; background: var(--ivory); transition: .25s; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  HERO                                                    ║
   ╚══════════════════════════════════════════════════════════╝ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 130px 0 100px;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,14,26,.30) 0%,
      rgba(10,14,26,.55) 50%,
      rgba(10,14,26,.95) 100%),
    url('../images/sleepaway-action-sports-camp-in-west-virginia.jpg');
  background-size: cover;
  background-position: center;
  filter: contrast(1.1) saturate(.85);
  z-index: 1;
  transform: scale(1.04);
  animation: heroBgZoom 20s ease-out forwards;
}
@keyframes heroBgZoom {
  to { transform: scale(1); }
}
.hero-bg::after {
  /* royal duotone color grade */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(212,175,55,.18) 0%, transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(61,24,84,.22) 0%, transparent 55%);
  mix-blend-mode: screen;
}

/* Hero stamp — floating "EST 2005 · ONE FAMILY · ONE KING" gold-on-deep-purple seal */
.hero-stamp {
  position: absolute;
  top: 18%; right: 7%;
  z-index: 6;
  width: 200px; height: 200px;
  display: grid; place-items: center;
  transform: rotate(8deg);
  animation: stampPulse 5s ease-in-out infinite;
}
@keyframes stampPulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.035); }
}
.hero-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stamp-text {
  position: relative;
  text-align: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .14em;
  color: var(--gold);
  z-index: 2;
}
.hero-stamp-text strong {
  display: block;
  font-size: 38px;
  line-height: 1;
  margin: 6px 0 4px;
  color: var(--ivory);
}

.hero-in {
  position: relative;
  z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 9px 16px;
  background: var(--gold);
  color: var(--onyx);
  border-radius: var(--r);
  margin-bottom: 30px;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.hero-chip span { display: inline-block; transform: skewX(6deg); }
.hero-chip::before { content: "▶"; font-size: 9px; }

.hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(60px, 11vw, 178px);
  line-height: .88;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 32px;
  transform: skewY(-1deg);
  max-width: 96%;
}
.hero h1 .stack { display: block; }
.hero h1 .created {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  position: relative;
  display: inline-block;
  text-transform: none;
  letter-spacing: -.02em;
  padding: 0 8px;
}
.hero h1 .created::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -8px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'><path d='M5,18 Q60,4 120,14 T240,20 T395,12' stroke='%23d4af37' stroke-width='6' fill='none' stroke-linecap='round' opacity='.9'/><path d='M10,24 Q70,14 130,20 T260,24 T390,18' stroke='%23f4d068' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='.6'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero .lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(247,243,235,.86);
  max-width: 640px;
  margin-bottom: 38px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Marquee strip at hero base */
.marquee {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  background: var(--gold);
  border-top: 3px solid var(--onyx);
  border-bottom: 3px solid var(--onyx);
  overflow: hidden;
  padding: 16px 0;
  transform: rotate(-1deg) translateY(10px);
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--royal-deep);
  text-transform: uppercase;
}
.marquee-track span { padding: 0; display: inline-flex; align-items: center; }
.marquee-track > span { margin: 0 18px; }
.marquee-track .dot { color: var(--onyx); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  STAT BAR — credibility band below hero                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.stat-bar {
  background: var(--night);
  border-top: 1px solid rgba(212,175,55,.18);
  border-bottom: 1px solid rgba(212,175,55,.18);
  position: relative;
  z-index: 5;
}
.stat-bar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.stat {
  display: flex; flex-direction: column;
  text-align: left;
  position: relative;
  padding-left: 22px;
}
.stat::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--gold);
}
.stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.stat-lbl {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247,243,235,.6);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  FOUR SPORTS                                             ║
   ╚══════════════════════════════════════════════════════════╝ */
.sports {
  background: var(--onyx);
  padding: 140px 0 110px;
  position: relative;
  overflow: hidden;
}
.sports::before {
  /* halftone dot pattern */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(212,175,55,.07) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  z-index: 1;
}
.sports-in {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}
.sports-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 70px;
}
.sports-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ivory);
}
.sports-head h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.sports-head .meta {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: rgba(247,243,235,.6);
  text-align: right;
  max-width: 320px;
  line-height: 1.55;
}
.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sport-card {
  position: relative;
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.12);
  overflow: hidden;
  aspect-ratio: 3 / 4.2;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
  display: block;
}
.sport-card:nth-child(1) { transform: rotate(-1.5deg); }
.sport-card:nth-child(2) { transform: rotate(1deg);   }
.sport-card:nth-child(3) { transform: rotate(-.8deg); }
.sport-card:nth-child(4) { transform: rotate(1.6deg); }
.sport-card:hover {
  transform: rotate(0deg) translateY(-10px);
  z-index: 5;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--gold);
}
.sport-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.15) saturate(.85) brightness(.82);
}
.sport-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,.1) 0%, rgba(10,14,26,.5) 60%, rgba(10,14,26,.95) 100%);
}
.sport-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
  z-index: 2;
}
.sport-name {
  font-family: 'Archivo Black', sans-serif;
  /* Capped at 72px so 5-char labels (SCOOT, SKATE) fit inside ~265px content
     area at desktop 4-column grid. BMX/MTB (3 chars) still feel oversized. */
  font-size: clamp(42px, 4.5vw, 72px);
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-left: -4px;
  text-shadow: 3px 3px 0 var(--gold-deep);
}
.sport-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(247,243,235,.7);
  margin-top: 12px;
  line-height: 1.5;
}
.sport-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 16px;
  border-top: 1px solid rgba(212,175,55,.25);
  padding-top: 14px;
}
.sport-cta::after { content: "→"; transition: transform .2s; }
.sport-card:hover .sport-cta::after { transform: translateX(6px); }
.sport-number {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: -.02em;
  border: 1.5px solid var(--gold);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  MANIFESTO — What sets us apart                          ║
   ╚══════════════════════════════════════════════════════════╝ */
.manifesto {
  background: var(--obsidian);
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  /* oversized "2005" backdrop */
  content: "2005";
  position: absolute;
  top: -40px; right: -60px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 480px;
  font-weight: 900;
  color: rgba(212,175,55,.04);
  line-height: 1;
  letter-spacing: -.05em;
  z-index: 1;
  pointer-events: none;
}
.manifesto-in {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.manifesto-img {
  position: relative;
}
.manifesto-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.15);
  filter: contrast(1.05) saturate(.9);
  transform: rotate(-1.5deg);
  transition: transform .5s ease;
}
.manifesto-img:hover img { transform: rotate(0deg); }
.manifesto-img-badge {
  position: absolute;
  bottom: -18px; left: -18px;
  background: var(--gold);
  color: var(--onyx);
  padding: 14px 22px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--royal-deep);
  z-index: 3;
}
.manifesto-copy h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: .98;
  letter-spacing: -.025em;
  margin-bottom: 26px;
  color: var(--ivory);
}
.manifesto-copy h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.manifesto-copy p {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(247,243,235,.75);
  margin-bottom: 18px;
}
.manifesto-since {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(212,175,55,.18);
  display: flex; align-items: center; gap: 22px;
}
.manifesto-since-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 80px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -.04em;
}
.manifesto-since-lbl {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,243,235,.65);
  max-width: 260px;
  line-height: 1.5;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  CAMP LIFE — Asymmetric bento gallery                    ║
   ╚══════════════════════════════════════════════════════════╝ */
.camp-life {
  background: var(--onyx);
  padding: 140px 0;
  position: relative;
}
.camp-life-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
}
.camp-life-head {
  text-align: center;
  margin-bottom: 60px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}
.camp-life-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 5.5vw, 78px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.camp-life-head h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.camp-life-head p {
  font-size: 17px;
  color: rgba(247,243,235,.65);
  line-height: 1.6;
}
.bento {
  display: grid;
  /* 4-col × 3-row grid. grid-auto-flow: dense lets cells backfill earlier
     gaps so different cell orderings still fill cleanly (prevents the
     "wide-after-default" gap that caused the Camps page bento to break). */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 220px;
  grid-auto-flow: dense;
  gap: 16px;
}
.bento-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid rgba(212,175,55,.1);
}
.bento-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  filter: contrast(1.08) saturate(.9);
}
.bento-cell:hover img { transform: scale(1.06); }
.bento-cell::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,14,26,.7) 100%);
  z-index: 1;
}
.bento-cell .bento-lbl {
  position: absolute;
  bottom: 14px; left: 16px;
  z-index: 2;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
/* Bento layout */
.bento-cell.tall    { grid-row: span 2; }
.bento-cell.wide    { grid-column: span 2; }
.bento-cell.big     { grid-column: span 2; grid-row: span 2; }
.bento-cell.span-3  { grid-column: span 3; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  THE ROYAL DECLARATION (Scripture — LIGHT moment)        ║
   ╚══════════════════════════════════════════════════════════╝ */
.declaration {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 140px 0;
  overflow: hidden;
  color: var(--ivory);
  text-align: center;
}
.declaration-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,14,26,.6) 0%,
      rgba(10,14,26,.85) 60%,
      rgba(10,14,26,.95) 100%),
    url('../images/west-virginia-sunset-farewell-mountains-pass.jpg');
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: contrast(1.05) saturate(1.05);
}
.declaration-bg::after {
  /* golden glow centered above */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 25%, rgba(244,208,104,.22), transparent 60%);
  mix-blend-mode: screen;
}
.declaration-rays {
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 1000px;
  z-index: 2;
  pointer-events: none;
  opacity: .35;
  animation: declRays 120s linear infinite;
}
@keyframes declRays {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
.declaration-in {
  position: relative;
  z-index: 5;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
}
.declaration .eyebrow {
  justify-content: center;
  margin-bottom: 32px;
  color: var(--gold);
}
.declaration .eyebrow::after {
  content: ""; width: 36px; height: 2px; background: var(--gold);
}
.declaration h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 7vw, 110px);
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--ivory);
}
.declaration h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.declaration-vision {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ivory-soft);
  max-width: 800px;
  margin: 0 auto 50px;
}
.declaration-vision strong {
  color: var(--gold);
  font-weight: 500;
  font-style: italic;
}
.declaration-scripture {
  background: rgba(10,14,26,.5);
  border: 1px solid rgba(212,175,55,.25);
  border-top-width: 3px;
  border-top-color: var(--gold);
  padding: 50px 60px;
  margin: 0 auto;
  max-width: 800px;
  position: relative;
  backdrop-filter: blur(8px);
}
.declaration-scripture::before {
  content: '"';
  position: absolute;
  top: -28px; left: 30px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  opacity: .7;
}
.declaration-scripture p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ivory);
  font-weight: 300;
  margin-bottom: 20px;
}
.declaration-scripture .attribution {
  font-family: 'Archivo Black', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  padding-top: 6px;
  border-top: 1px solid rgba(212,175,55,.3);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  MEET THE PROS                                           ║
   ╚══════════════════════════════════════════════════════════╝ */
.pros {
  background: var(--onyx);
  padding: 140px 0 120px;
  position: relative;
  overflow: hidden;
}
.pros-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
.pros-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 65px;
}
.pros-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.pros-head h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.pros-head .meta {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: rgba(247,243,235,.6);
  max-width: 360px;
  line-height: 1.55;
  text-align: right;
}
.pros-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pro-card {
  position: relative;
  display: block;
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--gold);
}
.pro-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center top;
  filter: contrast(1.05) saturate(.9) brightness(.95);
}
.pro-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,14,26,.85) 100%);
}
.pro-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px;
  z-index: 2;
}
.pro-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ivory);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.pro-sport {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.pro-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: var(--gold);
  color: var(--onyx);
  font-family: 'Archivo Black', sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 5px 9px;
  text-transform: uppercase;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  TESTIMONIAL — Chris Farris pull quote                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.testimonial {
  background: var(--royal-deep);
  background-image:
    radial-gradient(circle at 20% 40%, rgba(212,175,55,.12), transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(107,58,133,.4), transparent 55%);
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -40px; left: -10px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 480px;
  line-height: 1;
  color: rgba(212,175,55,.08);
  font-weight: 300;
}
.testimonial-in {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.testimonial blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.35;
  color: var(--ivory);
  margin-bottom: 36px;
  letter-spacing: -.005em;
}
.testimonial cite {
  font-style: normal;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.testimonial-photo {
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  margin-bottom: 14px;
  object-position: center top;
}
.testimonial-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ivory);
}
.testimonial-role {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  ROYAL ON TOUR — Mobile camp                             ║
   ╚══════════════════════════════════════════════════════════╝ */
.on-tour {
  background: var(--onyx);
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.on-tour-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.on-tour-copy h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 5.5vw, 78px);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.on-tour-copy h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.on-tour-copy p {
  font-size: 17px;
  color: rgba(247,243,235,.75);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 520px;
}
.on-tour-stats {
  display: flex; gap: 32px;
  margin: 32px 0 36px;
  padding: 22px 0;
  border-top: 1px solid rgba(212,175,55,.18);
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.on-tour-stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -.02em;
}
.on-tour-stat-lbl {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247,243,235,.6);
  margin-top: 6px;
}
.on-tour-photo {
  position: relative;
}
.on-tour-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.2);
  filter: contrast(1.05) saturate(.9);
  transform: rotate(1.5deg);
}
.on-tour-photo-badge {
  position: absolute;
  top: -14px; right: -14px;
  background: var(--gold);
  color: var(--onyx);
  padding: 14px 22px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--royal-deep);
  z-index: 3;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  CTA BANNER — final push                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.cta-banner {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-banner::before {
  /* deep onyx pattern overlay */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(10,14,26,.12) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
.cta-banner-in {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}
.cta-banner .eyebrow {
  justify-content: center;
  color: var(--onyx);
  margin-bottom: 24px;
}
.cta-banner .eyebrow::before,
.cta-banner .eyebrow::after {
  background: var(--onyx);
}
.cta-banner h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--onyx);
}
.cta-banner h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--royal-deep);
  text-transform: none;
}
.cta-banner p {
  font-size: 18px;
  color: rgba(10,14,26,.78);
  line-height: 1.55;
  margin-bottom: 38px;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}
.cta-banner .btn-primary {
  background: var(--onyx);
  color: var(--gold);
  box-shadow: 6px 6px 0 var(--royal-deep);
}
.cta-banner .btn-primary:hover {
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--royal-deep);
  color: var(--gold-bright);
}
.cta-banner .btn-ghost {
  border-color: var(--onyx);
  color: var(--onyx);
  box-shadow: 6px 6px 0 rgba(10,14,26,.2);
}
.cta-banner .btn-ghost:hover {
  background: rgba(10,14,26,.08);
  color: var(--onyx);
}
.cta-banner-ctas { display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  FOOTER                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.site-footer {
  background: var(--night);
  color: var(--ivory-soft);
  padding: 90px 0 30px;
  border-top: 1px solid rgba(212,175,55,.18);
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 70px;
}
.footer-brand .brand-name { color: var(--ivory); }
.footer-brand .brand-crown { color: var(--gold); }
.footer-brand p {
  color: rgba(247,243,235,.55);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 22px 0 26px;
  max-width: 340px;
}
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(212,175,55,.25);
  color: var(--gold);
  border-radius: var(--r);
  transition: .25s;
}
.footer-socials a:hover {
  background: var(--gold);
  color: var(--onyx);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-socials svg { width: 18px; height: 18px; }
.footer-col h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(247,243,235,.7);
  font-size: 14.5px;
  font-weight: 500;
  transition: .2s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 28px 0;
  border-top: 1px solid rgba(212,175,55,.12);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  font-size: 13px;
  color: rgba(247,243,235,.45);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  REVEAL ANIMATIONS                                       ║
   ╚══════════════════════════════════════════════════════════╝ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                              ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 1100px) {
  .sports-grid, .pros-grid { grid-template-columns: repeat(2, 1fr); }
  .manifesto-in, .on-tour-in { grid-template-columns: 1fr; gap: 50px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: 200px 200px 200px 200px; }
  .bento-cell.big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta { display: none; }
  .hero { padding: 110px 0 80px; }
  .hero h1 { font-size: 56px; transform: none; }
  .hero-stamp { width: 130px; height: 130px; top: 13%; right: 4%; }
  .hero-stamp-text strong { font-size: 26px; }
  .stat-bar-in { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .sports-head, .pros-head { grid-template-columns: 1fr; }
  .sports-head .meta, .pros-head .meta { text-align: left; }
  .sports-grid, .pros-grid { grid-template-columns: 1fr; }
  .manifesto::before { font-size: 240px; }
  .declaration-scripture { padding: 36px 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Mobile bento: 2 cols × 6 rows. Keep size variants (big/tall/wide) — they map
     naturally to the portrait vs landscape orientations of the source images:
       Row 1-2: Worship (big 2×2 = full-width hero up top)
       Row 3:   Waterpark (½) · Baptism start (tall ½)
       Row 4:   Campfire (½)  · Baptism continues
       Row 5:   Brotherhood (2×1 full)
       Row 6:   Club Time   (2×1 full) */
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 180px);
    gap: 12px;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  INNER PAGE STYLES — appended for full site coverage     ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Page hero — shorter, simpler variant of .hero for inner pages */
.page-hero {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
}
.page-hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.page-hero .grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .2;
  mix-blend-mode: overlay;
}
.page-hero .hero-in {
  position: relative; z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.page-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(44px, 7vw, 100px);
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 24px;
  max-width: 95%;
}
.page-hero .lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: rgba(247,243,235,.8);
  max-width: 620px;
  margin-bottom: 30px;
}
.page-hero .hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--onyx);
  border-radius: var(--r);
  margin-bottom: 26px;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.page-hero .hero-chip span { display: inline-block; transform: skewX(6deg); }
.page-hero .hero-chip::before { content: "▶"; font-size: 9px; }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Generic content section wrappers */
section.content-section {
  background: var(--obsidian);
  padding: 100px 0;
  position: relative;
}
section.content-section.tint { background: var(--onyx); }
section.content-section .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.sec-head {
  margin-bottom: 50px;
  max-width: 760px;
}
.sec-head h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
}
.sec-head h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.sec-head p.lead {
  font-size: 17px;
  color: rgba(247,243,235,.68);
  line-height: 1.6;
}

/* Long-form content prose (blog, parents pages, etc.) */
.content-prose p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(247,243,235,.78);
  margin-bottom: 18px;
  max-width: 780px;
}
.content-prose p:first-child::first-letter {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 3.4em;
  color: var(--gold);
  float: left;
  line-height: .85;
  padding: 6px 12px 0 0;
}
.content-prose ul, .content-prose ol {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
}
.content-prose li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(247,243,235,.78);
}
.content-prose li::before {
  content: "→";
  position: absolute;
  left: 0; top: 6px;
  color: var(--gold);
  font-weight: 700;
}
.content-prose blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ivory);
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 26px;
  margin: 30px 0;
  max-width: 760px;
}
.content-prose h2, .content-prose h3 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  color: var(--ivory);
  margin: 36px 0 16px;
  letter-spacing: -.025em;
}
.content-prose h2 { font-size: 30px; }
.content-prose h3 { font-size: 22px; }
.content-prose a {
  color: var(--gold);
  border-bottom: 1px solid rgba(212,175,55,.4);
}
.content-prose a:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* Landing tiles for /royal-life, /parents, /about-us */
.landing-tiles {
  background: var(--obsidian);
  padding: 120px 0;
  position: relative;
}
.landing-tiles .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.landing-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.landing-tile {
  position: relative;
  display: block;
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.landing-tile:nth-child(odd)  { transform: rotate(-.6deg); }
.landing-tile:nth-child(even) { transform: rotate(.6deg); }
.landing-tile:hover {
  transform: rotate(0) translateY(-8px);
  z-index: 3;
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--gold);
}
.landing-tile-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: contrast(1.1) saturate(.85) brightness(.85);
}
.landing-tile-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,14,26,.85) 100%);
}
.landing-tile-number {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10,14,26,.6);
  backdrop-filter: blur(6px);
}
.landing-tile-body {
  padding: 22px 24px 26px;
}
.landing-tile-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 10px;
}
.landing-tile-blurb {
  font-size: 14.5px;
  color: rgba(247,243,235,.65);
  line-height: 1.55;
  margin-bottom: 14px;
}
.landing-tile-cta {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.landing-tile-cta::after { content: " →"; }

/* Mobile menu drawer (slides from right) */
.mobile-menu {
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(10,14,26,.98);
  backdrop-filter: blur(20px);
  padding: 30px 28px;
  z-index: 99;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(212,175,55,.1);
}
.mobile-menu a:hover { background: rgba(212,175,55,.1); color: var(--gold); }
.mobile-menu a.indent {
  margin-left: 16px;
  font-size: 13px;
  color: rgba(247,243,235,.6);
  border-left: 2px solid var(--gold);
  border-radius: 0;
  padding-left: 16px;
}
.mobile-menu a.nav-cta {
  background: var(--gold);
  color: var(--onyx);
  text-align: center;
  margin-top: 14px;
  box-shadow: 4px 4px 0 var(--gold-deep);
}

/* Image gallery for content pages */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 40px 0;
}
.image-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.12);
  transition: transform .4s ease, box-shadow .4s ease;
}
.image-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
}

/* FAQ accordion */
.faq-list { max-width: 860px; }
.faq-item {
  border-bottom: 1px solid rgba(212,175,55,.15);
  padding: 22px 0;
}
.faq-q {
  font-family: 'Archivo Black', sans-serif;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ivory);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--gold);
  flex: none;
  transition: transform .3s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-item.open .faq-a { max-height: 500px; }
.faq-a p {
  font-size: 16px;
  color: rgba(247,243,235,.75);
  line-height: 1.7;
  padding: 16px 0 4px;
  max-width: 760px;
}

/* Two-column image + text split */
.split-image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin: 50px 0;
}
.split-image-text img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.15);
}

@media (max-width: 760px) {
  .page-hero { min-height: 50vh; padding: 110px 0 60px; }
  .page-hero h1 { font-size: 42px; }
  .landing-tiles-grid { grid-template-columns: 1fr; }
  .split-image-text { grid-template-columns: 1fr; gap: 30px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PHASE 2 — Tier 1 hero pages                             ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Sport landing hero — with oversized sport-name watermark behind content */
.sport-hero {
  position: relative;
  min-height: 82vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 130px 0 90px;
}
.sport-hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.1) saturate(.88);
  z-index: 1;
}
.sport-hero .grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .28;
  mix-blend-mode: overlay;
}

/* The signature move — oversized sport name watermark, bottom-right, gold ghost */
.sport-watermark {
  position: absolute;
  bottom: -30px; right: -40px;
  z-index: 2;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(180px, 26vw, 480px);
  line-height: .82;
  letter-spacing: -.06em;
  color: rgba(212,175,55,.10);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.sport-hero .hero-in {
  position: relative; z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.sport-hero .hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 9px 16px;
  background: var(--gold);
  color: var(--onyx);
  border-radius: var(--r);
  margin-bottom: 28px;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.sport-hero .hero-chip span { display: inline-block; transform: skewX(6deg); }
.sport-hero .hero-chip::before { content: "▶"; font-size: 9px; }
.sport-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(96px, 18vw, 280px);
  line-height: .85;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 28px;
  transform: skewY(-1deg);
  text-shadow: 6px 6px 0 var(--gold-deep);
}
.sport-hero .lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(247,243,235,.86);
  max-width: 620px;
  margin-bottom: 36px;
}
.sport-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  Sign-up funnel polish                                   ║
   ╚══════════════════════════════════════════════════════════╝ */

.signup-page {
  background: var(--onyx);
}
.signup-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 130px 0 80px;
  overflow: hidden;
  text-align: center;
}
.signup-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,175,55,.15) 0%, transparent 60%),
              linear-gradient(180deg, var(--royal-deep) 0%, var(--onyx) 100%);
  z-index: 1;
}
.signup-hero .grain { z-index: 3; }
.signup-hero-in {
  position: relative; z-index: 5;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px;
}
.signup-hero .eyebrow {
  justify-content: center;
  margin-bottom: 26px;
}
.signup-hero .eyebrow::after {
  content: ""; width: 36px; height: 2px; background: var(--gold);
}
.signup-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(54px, 9vw, 138px);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 28px;
  transform: skewY(-1deg);
}
.signup-hero h1 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.signup-hero p.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  color: rgba(247,243,235,.85);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
}
.signup-hero .btn { font-size: 16px; padding: 22px 36px; }

/* "Have these ready" pre-flight checklist */
.signup-checklist {
  background: var(--obsidian);
  padding: 120px 0;
}
.signup-checklist-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}
.signup-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
}
.signup-checklist-list {
  list-style: none;
}
.signup-checklist-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(212,175,55,.12);
  font-size: 16.5px;
  color: var(--ivory-soft);
  line-height: 1.5;
}
.signup-checklist-list li:last-child { border-bottom: 0; }
.signup-checklist-list li::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  margin-top: 4px;
  border: 2px solid var(--gold);
  border-radius: 4px;
  position: relative;
}
.signup-checklist-list li::after {
  content: "✓";
  position: absolute;
  margin-left: 5px;
  margin-top: 3px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
}
.signup-trust {
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.2);
  border-left: 3px solid var(--gold);
  padding: 28px;
  border-radius: var(--r);
}
.signup-trust h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.signup-trust p {
  font-size: 15px;
  color: rgba(247,243,235,.75);
  line-height: 1.6;
  margin-bottom: 12px;
}
.signup-trust ul { list-style: none; padding: 0; }
.signup-trust li {
  padding: 6px 0 6px 22px;
  position: relative;
  font-size: 14.5px;
  color: var(--ivory-soft);
  line-height: 1.55;
}
.signup-trust li::before {
  content: "→";
  position: absolute; left: 0; top: 6px;
  color: var(--gold); font-weight: 700;
}

/* "How it works" 3-step process */
.signup-steps {
  background: var(--onyx);
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}
.signup-steps-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.signup-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.signup-step {
  position: relative;
  padding: 36px 30px;
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.15);
  border-top: 4px solid var(--gold);
  transition: transform .3s ease;
}
.signup-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.signup-step-num {
  position: absolute;
  top: -32px; left: 24px;
  width: 62px; height: 62px;
  background: var(--gold);
  color: var(--onyx);
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.signup-step h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--ivory);
  margin: 22px 0 12px;
  letter-spacing: -.015em;
}
.signup-step p {
  font-size: 15px;
  color: rgba(247,243,235,.7);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .sport-hero { min-height: 70vh; padding: 110px 0 70px; }
  .sport-hero h1 { font-size: 68px; transform: none; }
  .sport-watermark { font-size: 140px; bottom: -10px; right: -20px; }
  .signup-checklist-grid { grid-template-columns: 1fr; gap: 40px; }
  .signup-steps-grid { grid-template-columns: 1fr; gap: 50px; }
  .signup-hero h1 { font-size: 48px; transform: none; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PHASE 4 — Pro athlete profiles (magazine-style)         ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Magazine hero — oversized first-name watermark, photo right, name breaks grid */
.pro-hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 130px 0 80px;
}
.pro-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 18%;
  filter: contrast(1.08) saturate(.9);
  z-index: 1;
}
.pro-hero .grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  opacity: .25;
  mix-blend-mode: overlay;
}
.pro-watermark {
  position: absolute;
  top: 14%; left: -2%;
  z-index: 2;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(140px, 22vw, 380px);
  line-height: .82;
  letter-spacing: -.05em;
  color: rgba(212,175,55,.085);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.pro-hero-in {
  position: relative; z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.pro-hero .hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 9px 16px;
  background: var(--gold);
  color: var(--onyx);
  border-radius: var(--r);
  margin-bottom: 26px;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.pro-hero .hero-chip span { display: inline-block; transform: skewX(6deg); }
.pro-hero .hero-chip::before { content: "▶"; font-size: 9px; }
.pro-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 11vw, 168px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 20px;
  text-shadow: 5px 5px 0 var(--gold-deep);
  transform: skewY(-1deg);
}
.pro-hero .lead {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  color: rgba(247,243,235,.86);
  max-width: 580px;
}

/* Pull quote section — oversized italic quote with massive open mark */
.pro-pullquote {
  background: var(--royal-deep);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(107,58,133,.35), transparent 55%);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.pro-pullquote::before {
  content: '"';
  position: absolute;
  top: -50px; left: -10px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 480px;
  line-height: 1;
  color: rgba(212,175,55,.10);
  font-weight: 300;
}
.pro-pullquote .wrap {
  max-width: 980px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.pro-pullquote blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.4;
  color: var(--ivory);
}
.pro-pullquote cite {
  display: block;
  font-style: normal;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 32px;
}

/* Sponsor wall — gold-on-onyx chips, grayscale→gold on hover */
.sponsor-wall {
  background: var(--obsidian);
  padding: 130px 0;
}
.sponsor-wall .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.sponsor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
.sponsor-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--ivory-soft);
  border: 1px solid rgba(212,175,55,.18);
  border-radius: var(--r);
  transition: .25s;
}
.sponsor-chip span {
  font-size: 11px;
  color: rgba(212,175,55,.6);
}
.sponsor-chip:hover {
  background: var(--gold);
  color: var(--onyx);
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 var(--royal-deep);
}
.sponsor-chip:hover span { color: var(--onyx); }

/* Q&A grid — "Get to know them" cards */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 50px;
}
.qa-card {
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.12);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  border-radius: var(--r);
  transition: transform .3s ease, box-shadow .3s ease;
}
.qa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
  border-left-color: var(--gold-bright);
}
.qa-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.qa-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ivory-soft);
}

@media (max-width: 760px) {
  .pro-hero { min-height: 70vh; padding: 110px 0 70px; }
  .pro-hero h1 { font-size: 56px; transform: none; }
  .pro-watermark { font-size: 130px; top: 10%; }
  .pro-pullquote { padding: 70px 0; }
  .pro-pullquote::before { font-size: 240px; top: -20px; }
}

/* Twins split-bio cards (Keffer Twins page) */
.twins-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 40px;
}
.twin-card {
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.15);
  border-top: 4px solid var(--gold);
  padding: 32px 30px;
  position: relative;
  transition: transform .3s ease;
}
.twin-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.6);
}
.twin-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.twin-card p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ivory-soft);
  line-height: 1.6;
  margin-bottom: 12px;
}
@media (max-width: 760px) {
  .twins-grid { grid-template-columns: 1fr; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PHASE 5 — Blog editorial + long-tail polish             ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Blog index grid — featured (wide) + 3-col cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.6), 0 0 0 1px var(--gold);
}
.blog-card-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(.88);
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column;
  flex: 1;
}
.blog-card-date {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.blog-card-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ivory);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.blog-card-excerpt {
  font-size: 14.5px;
  color: rgba(247,243,235,.65);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}
.blog-card-cta {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-card-cta::after { content: " →"; transition: transform .2s; }
.blog-card:hover .blog-card-cta::after { transform: translateX(4px); }

/* Featured blog card — spans 2 cols, larger image, bigger type */
.blog-card-featured {
  grid-column: span 2;
  flex-direction: row;
}
.blog-card-featured .blog-card-img {
  width: 55%;
  aspect-ratio: auto;
  flex: none;
}
.blog-card-featured .blog-card-body {
  padding: 36px 36px 36px 36px;
  justify-content: center;
}
.blog-card-featured .blog-card-title {
  font-size: 30px;
}
.blog-card-featured .blog-card-excerpt {
  font-size: 16px;
}

/* Pagination */
.pagination {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 30px;
}
.pagination .page {
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  color: var(--ivory-soft);
  background: var(--obsidian);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--r);
  text-decoration: none;
  transition: .2s;
}
.pagination .page:hover {
  background: var(--ink);
  border-color: var(--gold);
  color: var(--gold);
}
.pagination .page.active {
  background: var(--gold);
  color: var(--onyx);
  border-color: var(--gold);
  box-shadow: 3px 3px 0 var(--royal-deep);
}

/* Blog post — editorial polish */
.post-figure {
  margin: 36px -10px;
}
.post-figure img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border: 1px solid rgba(212,175,55,.15);
  border-radius: var(--r);
}
.post-pullquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--ivory);
  border-left: 4px solid var(--gold);
  padding: 14px 0 14px 30px;
  margin: 38px 0;
  max-width: 740px;
}
.post-footer {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid rgba(212,175,55,.15);
}
.post-backlink {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.post-backlink:hover { color: var(--gold-bright); }

/* Contact form — V2 dark fields */
.contact-form {
  display: grid;
  gap: 22px;
  margin-top: 40px;
}
.contact-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-form input,
.contact-form textarea {
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--r);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ivory);
  transition: border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--obsidian);
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form button {
  justify-self: start;
  margin-top: 8px;
}

/* Contact direct grid (social cards) */
.contact-direct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.contact-card {
  position: relative;
  display: block;
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.18);
  border-left: 3px solid var(--gold);
  padding: 24px 26px;
  border-radius: var(--r);
  text-decoration: none;
  transition: .25s;
}
.contact-card:hover {
  transform: translateY(-4px);
  background: var(--obsidian);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
  border-left-color: var(--gold-bright);
}
.contact-card-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.contact-card-handle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ivory);
}
.contact-card-arrow {
  position: absolute;
  top: 24px; right: 26px;
  color: var(--gold);
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  transition: transform .2s;
}
.contact-card:hover .contact-card-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card-featured { grid-column: span 2; flex-direction: column; }
  .blog-card-featured .blog-card-img { width: 100%; aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-featured { grid-column: span 1; }
  .post-pullquote { font-size: 19px; padding: 10px 0 10px 20px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PHASE 6 — Photo crops, mobile polish, a11y              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Card photo defaults — face-friendly positioning */
.sport-card .sport-img { background-position: center 30%; }
.pro-card .pro-photo  { background-position: center 25%; }
.blog-card .blog-card-img { background-position: center 35%; }
.bento-cell img { object-position: center 35%; }
.landing-tile-img { background-position: center 30%; }

/* Reduced-motion accessibility — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-bg { animation: none !important; transform: none !important; }
  .marquee-track,
  .vb-rays,
  .declaration-rays,
  .hero-stamp { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Focus-visible — keyboard nav rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: var(--r);
}
/* Skip the default outline on mouse clicks */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Tap-target sizing — minimum 44px hit area on mobile */
@media (max-width: 760px) {
  .nav-link, .nav-trigger { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-cta { min-height: 44px; }
  .footer-col a, .footer-bottom a { padding: 6px 0; display: inline-block; }
  .sponsor-chip { min-height: 44px; }
  .pagination .page { min-width: 44px; min-height: 44px; }
}

/* Mobile hero polish — prevent text squish */
@media (max-width: 760px) {
  .hero { padding: 100px 0 80px; min-height: auto; }
  .hero h1 { font-size: clamp(48px, 12vw, 72px); transform: none; margin-bottom: 22px; }
  .hero .lead { font-size: 16px; }
  .hero-chip { font-size: 10.5px; padding: 7px 12px; margin-bottom: 22px; }
  .marquee-track { font-size: 16px; }
  .hero-stamp { width: 110px; height: 110px; top: 90px; right: 4%; transform: rotate(8deg) scale(.85); }
  .hero-stamp-text strong { font-size: 22px; }

  .sport-hero { min-height: auto; padding: 100px 0 60px; }
  .sport-hero h1 { font-size: 60px; transform: none; }
  .sport-watermark { font-size: 110px; bottom: -8px; right: -16px; }

  .pro-hero { min-height: auto; padding: 100px 0 60px; }
  .pro-hero h1 { font-size: 48px; transform: none; text-shadow: 3px 3px 0 var(--gold-deep); }
  .pro-watermark { font-size: 110px; top: 8%; }

  .signup-hero { min-height: auto; padding: 100px 0 70px; }
  .signup-hero h1 { font-size: 44px; transform: none; }

  /* Section padding tightens */
  section.content-section,
  .manifesto,
  .camp-life,
  .sports,
  .pros,
  .on-tour,
  .sponsor-wall,
  .signup-checklist,
  .signup-steps,
  .testimonial,
  .declaration,
  .pro-pullquote { padding: 70px 0; }

  /* Stat bar — single row that wraps */
  .stat-bar-in { grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 28px 22px; }
  .stat-num { font-size: 36px; }

  /* Manifesto stacks naturally — keep oversized 2005 number smaller */
  .manifesto::before { font-size: 200px; top: -10px; right: -20px; }
  .manifesto-since-num { font-size: 64px; }

  /* Bento mobile defined earlier in this stylesheet (2-col × 6-row, preserves
     size variants). Don't override here — was creating a conflicting flat
     layout that broke the visual hierarchy. */

  /* Sports + pros + blog grids */
  .sports-grid, .pros-grid, .blog-grid, .qa-grid, .landing-tiles-grid { grid-template-columns: 1fr; }
  .sport-card { aspect-ratio: 4 / 3; transform: none; }
  .sport-card:nth-child(n) { transform: none; }
  .pro-card { transform: none; }

  /* Declaration scripture card */
  .declaration h2 { font-size: 56px; }
  .declaration-scripture { padding: 32px 24px; }
  .declaration-scripture::before { font-size: 80px; top: -22px; left: 18px; }
  .declaration-rays { width: 600px; height: 600px; top: -100px; }

  /* Pro pullquote */
  .pro-pullquote::before { font-size: 240px; top: -30px; }
  .pro-pullquote blockquote { font-size: 22px; }

  /* Testimonial */
  .testimonial blockquote { font-size: 22px; }
  .testimonial::before { font-size: 240px; top: -20px; }

  /* Sign-up funnel */
  .signup-steps-grid { grid-template-columns: 1fr; gap: 50px; }
  .signup-checklist-grid { grid-template-columns: 1fr; gap: 30px; }

  /* CTA banner */
  .cta-banner { padding: 70px 0; }
  .cta-banner h2 { font-size: 36px; }
  .cta-banner-ctas { flex-direction: column; align-items: stretch; }
  .cta-banner-ctas .btn { justify-content: center; }

  /* Buttons — full-width on mobile keeps tap-target large */
  .hero-ctas .btn,
  .signup-hero .btn { width: 100%; justify-content: center; }
  .hero-ctas, .signup-hero-in > div:last-child { flex-direction: column; align-items: stretch; }

  /* On-tour stats wrap */
  .on-tour-stats { flex-wrap: wrap; gap: 22px; }

  /* Footer — single column, generous tap targets */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* Twins-grid */
  .twins-grid { grid-template-columns: 1fr; }

  /* Sports head meta moves below */
  .sports-head, .pros-head { grid-template-columns: 1fr; gap: 20px; }
  .sports-head .meta, .pros-head .meta { text-align: left; max-width: 100%; }

  /* Blog featured card stacks vertically on mobile */
  .blog-card-featured { grid-column: span 1; flex-direction: column; }
  .blog-card-featured .blog-card-img { width: 100%; aspect-ratio: 16/10; }
  .blog-card-featured .blog-card-body { padding: 22px 24px 26px; }
  .blog-card-featured .blog-card-title { font-size: 22px; }
  .blog-card-featured .blog-card-excerpt { font-size: 14.5px; }
}

/* Small mobile (<400px) — tighten further */
@media (max-width: 400px) {
  .hero h1 { font-size: 42px; }
  .sport-hero h1, .pro-hero h1 { font-size: 42px; }
  .sport-watermark, .pro-watermark { font-size: 80px; }
  .signup-hero h1 { font-size: 38px; }
  .declaration h2 { font-size: 42px; }
  .hero-stamp { width: 90px; height: 90px; top: 88px; }
  .hero-stamp-text strong { font-size: 18px; }
  .nav-in { padding: 0 16px; }
  .brand-name { font-size: 22px; }
  .brand-crown { width: 26px; height: 18px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Per-sport hero H1 sizing — prevent long words overflowing║
   ╚══════════════════════════════════════════════════════════╝ */
/* Default .sport-hero h1 = clamp(96px, 18vw, 280px) works for BMX + MTB (3 chars).
   SCOOTER (7c) and SKATEBOARD (10c) need smaller maxes to fit container. */
.sport-hero--scooter h1     { font-size: clamp(72px, 14vw, 200px); }
.sport-hero--skateboard h1  { font-size: clamp(56px, 11vw, 156px); }

/* Watermark sizing for long-word sports — keep within viewport */
.sport-hero--scooter .sport-watermark    { font-size: clamp(140px, 20vw, 360px); }
.sport-hero--skateboard .sport-watermark { font-size: clamp(120px, 16vw, 280px); }

@media (max-width: 760px) {
  .sport-hero--scooter h1    { font-size: 52px; }
  .sport-hero--skateboard h1 { font-size: 42px; }
}
@media (max-width: 400px) {
  .sport-hero--scooter h1    { font-size: 44px; }
  .sport-hero--skateboard h1 { font-size: 36px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Home launch-post callout (between stat-bar + four sports)║
   ╚══════════════════════════════════════════════════════════╝ */
.launch-callout {
  background: linear-gradient(135deg, var(--royal-deep) 0%, var(--ink) 100%);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid rgba(212,175,55,.2);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.launch-callout::before {
  content: '"';
  position: absolute;
  top: -50px; right: 30px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 320px;
  line-height: 1;
  color: rgba(212,175,55,.10);
  font-weight: 300;
  pointer-events: none;
}
.launch-callout-in {
  position: relative; z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.launch-callout-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.launch-callout-eyebrow::before,
.launch-callout-eyebrow::after {
  content: ""; width: 36px; height: 1.5px; background: var(--gold);
}
.launch-callout-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.0;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 22px;
}
.launch-callout-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
}
.launch-callout-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(247,243,235,.82);
  margin-bottom: 32px;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}

@media (max-width: 760px) {
  .launch-callout { padding: 56px 0; }
  .launch-callout::before { font-size: 200px; top: -30px; right: 10px; }
  .launch-callout-title { font-size: clamp(28px, 7vw, 40px); }
  .launch-callout-excerpt { font-size: 15.5px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Standalone marquee — placed BETWEEN hero and next section ║
   ║  Hero has overflow:hidden which clips the rotated band,    ║
   ║  so the marquee now lives outside the hero and floats up   ║
   ║  via negative margin to overlap the hero's bottom edge.    ║
   ╚══════════════════════════════════════════════════════════╝ */
.marquee-standalone {
  position: relative;
  z-index: 20;
  margin-top: -56px;     /* overlap into hero by ~half the strip height */
  margin-bottom: -10px;  /* slight overlap into the section below */
  /* keep the rotation but no longer absolute/clipped */
  transform: rotate(-1deg);
}

/* Extra crispness on the home hero H1 — text-shadow for readability over busy photo */
.hero h1 {
  text-shadow:
    0 2px 18px rgba(10,14,26,.55),
    0 1px 3px rgba(10,14,26,.4);
}
.hero .lead {
  text-shadow: 0 1px 4px rgba(10,14,26,.6);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Mobile menu rewrite — collapsible <details> groups,      ║
   ║  body-scroll lock, full-viewport drawer                   ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Body scroll lock while drawer open — fixes the "nav glitches behind page" issue */
body.menu-open {
  overflow: hidden;
  /* preserve scrollbar space so the page doesn't shift when locked */
  padding-right: var(--scrollbar-width, 0);
}

/* Drawer covers FULL viewport, not just below the nav — own scrollable area */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(10,14,26,.985);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 84px 22px 28px;  /* top padding clears the nav bar */
  z-index: 90;             /* below the nav (z:100) so burger stays tappable */
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu.open { transform: translateX(0); }

/* Top-level mobile links (single, non-grouped) */
.mobile-menu .mm-link {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid rgba(212,175,55,.12);
  text-decoration: none;
}
.mobile-menu .mm-link:hover,
.mobile-menu .mm-link:active { background: rgba(212,175,55,.08); color: var(--gold); }

/* Collapsible nav group (HTML <details>) */
.mobile-menu .mm-group {
  border: 1px solid rgba(212,175,55,.12);
  border-radius: var(--r);
  overflow: hidden;
}
.mobile-menu .mm-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.mobile-menu .mm-group > summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-group > summary::after {
  content: "+";
  color: var(--gold);
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  line-height: 1;
  flex: none;
  transition: transform .25s;
}
.mobile-menu .mm-group[open] > summary::after { transform: rotate(45deg); }
.mobile-menu .mm-group > summary:hover { background: rgba(212,175,55,.06); }
.mobile-menu .mm-group > a {
  display: block;
  padding: 12px 16px 12px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: rgba(247,243,235,.7);
  border-top: 1px solid rgba(212,175,55,.08);
  text-decoration: none;
}
.mobile-menu .mm-group > a:hover,
.mobile-menu .mm-group > a:active { background: rgba(212,175,55,.08); color: var(--gold); }

/* CTA at bottom of drawer */
.mobile-menu .mm-cta {
  margin-top: 14px;
  padding: 16px 22px;
  background: var(--gold);
  color: var(--onyx);
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--gold-deep);
  text-decoration: none;
}
.mobile-menu .mm-cta:hover { background: var(--gold-bright); }

/* Burger morphs to an X when open */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  Polish: drop gold border on launch-callout (the tilted   ║
   ║  marquee already separates the two sections), speed up    ║
   ║  marquee on mobile, add will-change for iOS Safari        ║
   ╚══════════════════════════════════════════════════════════╝ */
.launch-callout { border-top: none; }

/* Mobile marquee — keep the -1deg tilt (JS-driven animation runs cleanly even
   with a rotated parent since we're not relying on CSS keyframes anymore).
   Tighter overlap since the marquee strip is shorter at mobile font size. */
@media (max-width: 760px) {
  .marquee-standalone { margin-top: -38px; margin-bottom: -6px; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Donate link — gold-outline pill, distinct from Register  ║
   ║  CTA so it reads as a secondary action (501(c)(3) ask).   ║
   ╚══════════════════════════════════════════════════════════╝ */
/* Donate: gold-colored text link, no pill (the pill version was blowing out
   the nav width on standard-laptop viewports). Stays distinct from regular
   nav links via color alone. */
.nav-link.nav-donate {
  color: var(--gold) !important;
}
.nav-link.nav-donate:hover {
  background: rgba(212,175,55,.10);
  color: var(--gold-bright) !important;
}
.nav.scrolled .nav-link.nav-donate { color: var(--gold); }

/* Mobile drawer Donate link — gold outline + heart icon vibe */
.mobile-menu .mm-link-donate {
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 900;
}
.mobile-menu .mm-link-donate:hover {
  background: rgba(212,175,55,.12);
  color: var(--gold-bright);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  Camps page — Weekly highlights card grid                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.weekly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.weekly-card {
  position: relative;
  background: var(--ink);
  border: 1px solid rgba(212,175,55,.15);
  border-top: 3px solid var(--gold);
  padding: 36px 24px 28px;
  border-radius: var(--r);
  transition: transform .25s ease, box-shadow .25s ease;
}
.weekly-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
}
.weekly-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.weekly-text {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  color: var(--ivory-soft);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .weekly-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .weekly-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   Image lightbox — click any gallery image to view full-bleed
   ──────────────────────────────────────────────────────────── */
.bento-cell img,
.image-gallery img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 15, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 64px 24px;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img {
  max-width: min(1500px, 96vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(212, 175, 55, .28);
  box-shadow: 0 30px 80px -18px rgba(0, 0, 0, .9);
  transform: scale(.96);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  cursor: default;
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
  max-width: 84vw;
  text-align: center;
  pointer-events: none;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(10, 14, 26, .85);
  border: 1px solid rgba(212, 175, 55, .35);
  color: var(--ivory);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox-close { top: 20px; right: 20px; font-size: 24px; }
.lightbox-prev  { top: 50%; left: 20px;  transform: translateY(-50%); }
.lightbox-next  { top: 50%; right: 20px; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-prev:hover,
.lightbox-prev:focus-visible,
.lightbox-next:hover,
.lightbox-next:focus-visible {
  background: var(--gold);
  color: var(--onyx);
  border-color: var(--gold);
  outline: none;
}
.lightbox-prev:hover,
.lightbox-prev:focus-visible { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover,
.lightbox-next:focus-visible { transform: translateY(-50%) scale(1.06); }

body.lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox { padding: 56px 10px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; font-size: 22px; }
  .lightbox-prev  { left: 8px;  width: 42px; height: 42px; font-size: 22px; }
  .lightbox-next  { right: 8px; width: 42px; height: 42px; font-size: 22px; }
  .lightbox-caption { bottom: 14px; font-size: 11px; letter-spacing: .18em; }
}