/* ==========================================================================
   MiniMasters Chess — Design System
   Palette pulled from the crest logo (black / gold / cream / checkerboard).
   Fraunces (display serif, warm + confident) + Manrope (clean, friendly sans)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Core palette */
  --ink:            #15161C;   /* near-black, primary text on light */
  --ink-soft:       #4A4A54;   /* secondary text on light */
  --charcoal:       #14151D;   /* deep navy-charcoal, dark section bg */
  --charcoal-2:     #1C1E29;   /* slightly lifted dark surface */
  --cream:          #FBF7ED;   /* warm off-white, light section bg */
  --cream-2:        #F3ECDA;   /* deeper cream surface / borders */
  --paper:          #FFFFFF;

  --gold-300:       #E7C97A;
  --gold-400:       #D8AF48;
  --gold-500:       #C6992C;   /* primary gold */
  --gold-600:       #A67A1E;
  --gold-glow:      rgba(198,153,44,0.35);

  --on-dark:        #F6F1E3;
  --on-dark-soft:   rgba(246,241,227,0.72);
  --border-light:   #E7DEC7;
  --border-dark:    rgba(246,241,227,0.14);

  --success:        #3F7A54;
  --danger:         #B3402A;

  /* Type */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Spacing scale (4/8 rhythm) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1180px;
  /* Elevation scale — rest (flat-ish) -> soft (default card) -> lift (CTA
     bands, featured cards) -> float (hover state: the card feels like it's
     genuinely lifted off the page, layered near+far shadow for depth). */
  --shadow-rest: 0 2px 10px -6px rgba(21,22,28,0.14);
  --shadow-soft: 0 12px 32px -12px rgba(21,22,28,0.18);
  --shadow-lift: 0 20px 48px -16px rgba(21,22,28,0.28);
  --shadow-float: 0 40px 80px -24px rgba(21,22,28,0.38), 0 14px 28px -14px rgba(21,22,28,0.22);
  --shadow-gold: 0 20px 44px -14px rgba(198,153,44,0.5);

  /* Motion system: one shared vocabulary so every animation feels related.
     fast = hovers/presses, med = reveals, slow = hero/section entrances. */
  --ease-out: cubic-bezier(.16,.8,.28,1);
  --ease-draw: cubic-bezier(.65,0,.35,1);
  --ease-iris: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
a, button, input[type="submit"], select{ touch-action: manipulation; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: inherit;
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
  font-weight: 600;
}

h1{ font-size: clamp(2.4rem, 4.6vw + 1rem, 4.6rem); font-weight: 600; }
.word-pop{
  display: inline-block; transform-origin: center bottom;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.word-pop:hover, .word-pop.is-active{ color: var(--gold-400); transform: scale(1.1); }
h2{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.9rem); }
h3{ font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); }
p{ margin: 0 0 var(--sp-4); max-width: 62ch; }
.lede{ font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem); color: var(--ink-soft); }
.on-dark .lede{ color: var(--on-dark-soft); }

.eyebrow{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-600);
}
.on-dark .eyebrow{ color: var(--gold-300); }
.eyebrow::before{
  content: ''; width: 18px; height: 2px; background: currentColor; display: inline-block;
}

/* ---------- Layout ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px){ .container{ padding-inline: var(--sp-7); } }

section{ padding-block: var(--sp-9); position: relative; }
@media (max-width: 640px){ section{ padding-block: var(--sp-7); } }

.section-light{ background: var(--cream); color: var(--ink); }
.section-paper{ background: var(--paper); color: var(--ink); }
.section-dark{ background: var(--charcoal); color: var(--on-dark); }
.section-dark.on-dark{}

.stack{ display: flex; flex-direction: column; }
.grid{ display: grid; gap: var(--sp-6); }
/* minmax(0, 1fr), not plain 1fr, even at one column -- a bare 1fr track
   keeps an implicit auto (max-content) minimum, so a single long unbroken
   string (an email address, a URL) inside it can force the whole grid --
   and the page -- wider than the viewport instead of wrapping/clipping. */
.grid-2{ grid-template-columns: minmax(0, 1fr); }
.grid-3{ grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px){
  .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.center{ text-align: center; }
.header-block{ max-width: 720px; margin: 0 auto var(--sp-8); }
.header-block.left{ margin-inline: 0; }

/* ---------- Checkerboard motif (from the crest) ---------- */
.checker-strip{
  height: 10px;
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%);
  background-size: 20px 20px;
  opacity: 0.9;
  position: relative; overflow: hidden;
}
.checker-strip.gold{
  background-image: repeating-conic-gradient(var(--gold-500) 0% 25%, transparent 0% 50%);
}
/* One-shot light sweep the first time a divider crosses into view (JS adds
   .is-swept via ScrollTrigger) -- a small "the crest is alive" beat at every
   section boundary, not just a static rule between sections. */
.checker-strip::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
  transform: translateX(-140%);
}
@media (prefers-reduced-motion: no-preference){
  .checker-strip.is-swept::after{ animation: checkerSheen 1.1s var(--ease-out) forwards; }
}
@keyframes checkerSheen{
  0%{ transform: translateX(-140%); }
  100%{ transform: translateX(140%); }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.98rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  min-height: 48px;
  touch-action: manipulation;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-gold{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #201703;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 24px -10px var(--gold-glow);
}
.btn-gold::after{
  content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  transition: left 650ms var(--ease-out);
  pointer-events: none;
}
.btn-gold:hover{ box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow-gold); transform: translateY(-2px); }
.btn-gold:hover::after{ left: 130%; }
@media (prefers-reduced-motion: reduce){ .btn-gold::after{ display: none; } }
.btn-outline{
  background: transparent; border-color: currentColor; color: var(--ink);
}
.on-dark .btn-outline{ color: var(--on-dark); }
.btn-outline:hover{ background: rgba(21,22,28,0.06); }
.on-dark .btn-outline:hover{ background: rgba(246,241,227,0.08); }
.btn-ghost{ background: transparent; color: inherit; padding: 10px 16px; }
.btn-sm{ padding: 10px 20px; min-height: 40px; font-size: 0.9rem; }
.btn-block{ width: 100%; white-space: normal; }
.btn[disabled]{ opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card{
  background: var(--paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  /* Belt-and-suspenders alongside the grid-track fix above: a long
     unbroken string (the email address) wraps inside its own card
     instead of overflowing it. */
  overflow-wrap: break-word;
}
.card:hover{ box-shadow: var(--shadow-float); border-color: var(--gold-300); }
.on-dark .card{
  background: var(--charcoal-2);
  border-color: var(--border-dark);
  box-shadow: none;
}

.badge-icon{
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  color: #201703; flex-shrink: 0;
}
.badge-icon svg{ width: 26px; height: 26px; }

/* ---------- Nav ---------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(18,19,26,0.42), rgba(18,19,26,0.18));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-header.scrolled{
  background: rgba(17,18,25,0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--border-dark);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5);
}
.nav-row{
  display: flex; align-items: center; justify-content: space-between;
  height: 112px;
}
.brand{ display: flex; align-items: center; gap: var(--sp-3); color: var(--on-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.brand img{ height: 68px; width: auto; }
/* Header logo specifically, bigger than the shared .brand size the footer
   still uses -- nav-row grew to match so it doesn't crowd the crest. */
.site-header .brand img{ height: 88px; }

.nav-links{ display: none; align-items: center; gap: var(--sp-6); }
.nav-links a{
  color: var(--on-dark-soft); font-weight: 600; font-size: 0.95rem;
  position: relative; padding-block: 4px;
}
.nav-links a:hover, .nav-links a.active{ color: var(--on-dark); }
.nav-links a::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold-400); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-links a.active::after{ transform: scaleX(1); transform-origin: left center; }
@media (min-width: 900px){ .nav-links{ display: flex; } }

/* ---------- Nav dropdown (Find a Club) ---------- */
.nav-item-dropdown{ position: relative; display: inline-flex; }
.nav-dropdown-trigger{ display: inline-flex; align-items: center; gap: 6px; }
.nav-dropdown-trigger .chev{ transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; }
.nav-item-dropdown:hover .chev,
.nav-item-dropdown:focus-within .chev{ transform: rotate(180deg); }

.nav-dropdown-panel{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px;
  width: max-content;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
  z-index: 60;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel{
  opacity: 1; visibility: visible;
}
.nav-dropdown-inner{
  width: min(600px, 88vw);
  background: rgba(17,18,25,0.97);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: var(--sp-5);
}
.dropdown-heading{
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-300); margin: 0 0 var(--sp-3);
}
.dropdown-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px var(--sp-5);
  /* Safety cap for genuinely short windows, not a normal scroll area -- the
     16-club list is only ~310px tall regardless of viewport, so a flat 70vh
     cap could dip just under that on a shorter browser window and trigger a
     near-useless scrollbar even though nothing is actually clipped. A
     generous fixed ceiling means real content never scrolls; 92vh is purely
     a fallback for windows too short for even that (80vh was cutting it too
     close and triggering a scrollbar on shorter/zoomed-in windows where the
     list still fully fit). */
  max-height: min(520px, 92vh); overflow-y: auto;
}
.dropdown-grid a{
  color: var(--on-dark-soft); font-size: 0.92rem; font-weight: 600;
  padding: 9px 8px; border-radius: 7px; line-height: 1.3;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dropdown-grid a:hover, .dropdown-grid a:focus-visible{ color: var(--on-dark); background: rgba(255,255,255,0.06); }
.dropdown-viewall{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-dark);
  font-weight: 700; font-size: 0.92rem; color: var(--gold-400);
}
.dropdown-viewall:hover{ color: var(--gold-300); }

.nav-actions{ display: flex; align-items: center; gap: var(--sp-3); }
.nav-cta{ display: none; }
@media (min-width: 900px){ .nav-cta{ display: inline-flex; } }

.nav-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-dark); color: var(--on-dark);
  cursor: pointer;
}
@media (min-width: 900px){ .nav-toggle{ display: none; } }

.mobile-menu{
  display: none; flex-direction: column; gap: var(--sp-1);
  background: var(--charcoal); border-top: 1px solid var(--border-dark);
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}
.mobile-menu.open{ display: flex; animation: menuIn var(--dur-med) var(--ease-out); }
@keyframes menuIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.mobile-menu.open > *{ animation: menuItemIn 380ms var(--ease-out) backwards; }
.mobile-menu.open > *:nth-child(2){ animation-delay: 40ms; }
.mobile-menu.open > *:nth-child(3){ animation-delay: 80ms; }
.mobile-menu.open > *:nth-child(4){ animation-delay: 120ms; }
.mobile-menu.open > *:nth-child(5){ animation-delay: 160ms; }
.mobile-menu.open > *:nth-child(6){ animation-delay: 200ms; }
@keyframes menuItemIn{
  from{ opacity: 0; transform: translateX(-10px); }
  to{ opacity: 1; transform: translateX(0); }
}
.mobile-menu a{
  color: var(--on-dark-soft); font-weight: 600; padding: 14px 4px; font-size: 1.05rem;
  border-bottom: 1px solid var(--border-dark);
  min-height: 44px; display: flex; align-items: center;
}
.mobile-menu a.active{ color: var(--gold-300); }
.mobile-menu .btn{ margin-top: var(--sp-4); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: radial-gradient(120% 140% at 15% -10%, #262a3a 0%, var(--charcoal) 55%), var(--charcoal);
  color: var(--on-dark);
  overflow: clip;
  padding-block: var(--sp-10) var(--sp-9);
  /* 148px clears the fixed header (112px) with real room to spare -- most
     pages override this inline for their own bottom spacing, but the
     top needs to stay safe even for a page that doesn't. */
  padding-top: 148px;
}
.hero::before{
  content:'';
  position: absolute; inset: 0;
  background-image: repeating-conic-gradient(rgba(255,255,255,0.035) 0% 25%, transparent 0% 50%);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black, transparent 75%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .hero::before{ animation: checkerDrift 34s linear infinite; }
}
@keyframes checkerDrift{
  from{ background-position: 0 0; }
  to{ background-position: 128px 128px; }
}
.hero-grid{
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-8); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px){ .hero-grid{ grid-template-columns: 1.1fr 0.9fr; } }

.hero-badges{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-badge{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.85rem; font-weight: 600; color: var(--on-dark-soft);
  background: rgba(246,241,227,0.06); border: 1px solid var(--border-dark);
  padding: 8px 14px; border-radius: var(--radius-pill);
}
.hero-badge svg{ width: 16px; height: 16px; color: var(--gold-400); flex-shrink: 0; }

.hero-cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

/* ---------- Video hero ---------- */
.hero-video{
  position: relative;
  min-height: 92dvh;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--on-dark);
  padding-block: var(--sp-9);
  /* Top padding needs to clear the fixed header (112px) with real room to
     spare -- .hero-video's flex-centered content can end up butting right
     against the top on tall content/short viewports otherwise, and the
     header would cover the eyebrow. */
  padding-top: 148px;
}
.hero-video-el{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--charcoal);
  /* Scaled up beyond the frame so the parallax drift below always has
     cropped media to reveal, never an empty edge. */
  scale: 1.4;
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference){
  /* The mp4 now plays on every screen size (see setupHeroVideo in main.js),
     so this only matters for the poster-only fallback -- data-saver users,
     mainly -- where there's no real motion to fight with. Once a source is
     attached, main.js adds .has-video and this backs off rather than
     layering a synthetic drift on top of actual video playback. */
  .hero-video-el:not(.has-video){ animation: heroKenBurns 24s ease-in-out infinite alternate; }
}
@keyframes heroKenBurns{
  from{ scale: 1.4; translate: 0 0; }
  to{ scale: 1.5; translate: -1.5% -1%; }
}
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  /* Middle stop raised from .42 -> .58: measured contrast behind the H1 at
     wide desktop widths (1920px+) dipped to ~3.7:1 in the photo's brighter
     patches -- passable for large text but with no real margin. This buys
     headroom without visibly flattening the photo. */
  background:
    linear-gradient(180deg, rgba(15,16,22,.78) 0%, rgba(15,16,22,.58) 42%, rgba(15,16,22,.82) 100%);
}
.hero-video-content{ position: relative; z-index: 2; width: 100%; }
.hero-video-content .lede{ max-width: 56ch; }
/* Extra vertical breathing room in the hero stack, desktop only -- on
   mobile the fold is already tight (badges sit right at the bottom edge
   of a standard phone viewport), so this stays off there. */
@media (min-width: 960px){
  .hero-video-content .eyebrow{ margin-bottom: var(--sp-4); }
  .hero-video-content h1{ margin-bottom: var(--sp-5); }
  .hero-video-content .hero-cta-row{ margin-top: var(--sp-8); }
  .hero-video-content .hero-badges{ margin-top: var(--sp-7); }
}

.hero-visual{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; background: linear-gradient(160deg, #23263353, #14151d);
  border: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
}
.hero-visual .placeholder-note{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center; padding: var(--sp-6);
  color: var(--on-dark-soft);
}
.crest-mark{ width: 96px; height: 96px; opacity: 0.9; }

/* ---------- Pillars / features ---------- */
.pillar-card{ text-align: left; }
.pillar-card h3{ margin-top: var(--sp-4); }

/* ---------- Steps ---------- */
.steps{ counter-reset: step; }
.step{
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: flex-start;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border-light);
}
.on-dark .step{ border-color: var(--border-dark); }
.step:first-child{ border-top: none; }
.step-num{
  counter-increment: step;
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  color: #201703;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--shadow-gold);
}
.step-num svg{ width: 30px; height: 30px; }
.step-num::after{
  content: counter(step);
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-dark);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream);
}

/* ---------- Testimonials ---------- */
.testimonial{
  padding: var(--sp-6); border-radius: var(--radius-md);
  background: var(--charcoal-2); border: 1px solid var(--border-dark); color: var(--on-dark);
  display: flex; flex-direction: column; gap: var(--sp-4); height: 100%;
}
.testimonial .stars{ display: flex; gap: 4px; color: var(--gold-400); }
.testimonial .stars svg{ width: 16px; height: 16px; }
.testimonial p{ color: var(--on-dark-soft); font-size: 1.02rem; max-width: none; }
.testimonial-author{ display: flex; flex-direction: column; margin-top: auto; }
.testimonial-author .name{ font-weight: 700; color: var(--on-dark); }
.testimonial-author .role{ font-size: 0.85rem; color: var(--on-dark-soft); }

/* Compact testimonial stack: same author/quote styling as the card above,
   but divider-separated instead of 3 boxed cards -- less visual weight when
   paired with a photo instead of standing alone. */
.testimonial-stack{ display: flex; flex-direction: column; gap: var(--sp-5); }
.testimonial-compact{ padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-dark); }
.testimonial-compact:last-child{ border-bottom: none; padding-bottom: 0; }
.testimonial-compact .stars{ display: flex; gap: 4px; color: var(--gold-400); margin-bottom: var(--sp-2); }
.testimonial-compact .stars svg{ width: 14px; height: 14px; }
.testimonial-compact p{ color: var(--on-dark-soft); font-size: 1.02rem; margin-bottom: var(--sp-2); }

/* ---------- Benefit list (compact icon+label, not full pillar cards) ---------- */
.benefit-list{ list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.benefit-list li{ display: flex; align-items: center; gap: var(--sp-4); font-weight: 700; font-size: 1.08rem; }
.benefit-list svg{ width: 30px; height: 30px; color: var(--gold-600); flex-shrink: 0; padding: 5px; background: rgba(198,153,44,0.1); border-radius: 50%; box-sizing: content-box; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(135deg, var(--charcoal), #1d2030);
  color: var(--on-dark); border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  position: relative; overflow: hidden;
  border: 1px solid var(--border-dark);
}
.cta-band::after{
  content:''; position: absolute; inset: -40% -10% auto auto; width: 380px; height: 380px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .cta-band::after{ animation: ctaBreathe 7s ease-in-out infinite; }
}
@keyframes ctaBreathe{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.18); opacity: 0.65; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--charcoal); color: var(--on-dark-soft); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid{ display: grid; gap: var(--sp-7); grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color: var(--on-dark); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); font-weight: 700; margin-bottom: var(--sp-4); }
.footer-links{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a:hover{ color: var(--on-dark); }
.footer-bottom{
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: 0.85rem;
}

/* ---------- Forms ---------- */
.field{ display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label{ font-weight: 700; font-size: 0.9rem; }
.field input, .field select, .field textarea{
  font-family: inherit; font-size: 1rem; padding: 13px 16px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-light);
  background: var(--paper); color: var(--ink); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea{ min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--gold-300); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 3px solid var(--gold-glow); outline-offset: 1px; border-color: var(--gold-500);
  box-shadow: 0 6px 16px -8px var(--gold-glow);
}
.field .hint{ font-size: 0.82rem; color: var(--ink-soft); }
.required::after{ content: ' *'; color: var(--danger); }

.form-status{
  margin-top: var(--sp-3); padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600; border: 1.5px solid transparent;
}
.form-status[hidden]{ display: none; }
.form-status.is-success{ background: rgba(198,153,44,0.12); border-color: var(--gold-300); color: var(--gold-600); }
.form-status.is-error{ background: rgba(179,64,42,0.1); border-color: var(--danger); color: var(--danger); }

/* ---------- Cursor-tilt cards (premium product-card feel) ---------- */
/* JS (main.js setupTilt) drives rotationX/Y + a lift on mousemove via GSAP
   quickTo, and updates --mx/--my for the spotlight sheen below. Falls back
   to the element's normal static hover state with zero JS dependency. */
[data-tilt]{
  transform-style: preserve-3d;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference){
  [data-tilt]{ position: relative; }
  [data-tilt]::before{
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.32), transparent 62%);
    opacity: 0; transition: opacity var(--dur-med) ease; pointer-events: none; z-index: 5;
  }
  [data-tilt]:hover::before{ opacity: 1; }
}

/* ---------- Page transition overlay ---------- */
/* Crest grows small→legible while leaving a page, and (on the next page,
   painted instantly at full size to avoid any flash) shrinks legible→small
   once the incoming page is actually ready. See js/main.js setupPageTransitions. */
.page-veil{
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130% 130% at 50% 50%, #1c1e2b 0%, var(--charcoal) 68%);
  visibility: hidden;
  /* Iris wipe: the scrim is clipped to a circle centered on the crest.
     Growing the radius "opens the aperture"; shrinking it back to 0
     closes it. Percent-free vmax radius guarantees full coverage
     regardless of aspect ratio. */
  clip-path: circle(0% at 50% 50%);
}
.page-veil::before{
  /* A faint fixed grain over the flat gradient -- gives the shroud some
     tactile depth instead of reading as a solid color fill. Static (no
     animation), so it costs nothing and needs no reduced-motion gate. */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.09;
  mix-blend-mode: overlay;
}
.page-veil-logo-wrap{
  /* Fluid size: ~86px on a small phone, ~130px on a tablet, ~180px+ on
     desktop — a fixed size either looked cramped on large screens or
     oversized on small ones. */
  --veil-logo-size: clamp(126px, 90px + 10.5vw, 285px);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.page-veil-logo-wrap::before{
  content: ''; position: absolute; inset: calc(var(--veil-logo-size) * -0.55); border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 72%);
}
.page-veil-logo{
  position: relative; width: var(--veil-logo-size); height: var(--veil-logo-size);
  opacity: 0; transform: scale(0.15); filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference){
  .page-veil{
    transition: clip-path 620ms var(--ease-iris), visibility 620ms;
  }
  .page-veil-logo{
    /* Same duration AND same easing curve as the veil's clip-path — matching
       duration alone wasn't enough, since the crest's old ease-out curve
       raced to invisible early while the circle was still closing evenly.
       Now both move in lockstep the whole way, not just start/end together. */
    transition: transform 620ms var(--ease-iris), opacity 620ms var(--ease-iris), filter 620ms var(--ease-iris);
  }
  .page-veil.active,
  html.mm-veil-boot .page-veil{
    visibility: visible; pointer-events: all;
    /* --iris-radius is set in JS to the exact center-to-corner distance —
       a plain vmax value overshoots badly on wide/short viewports, so the
       circle's edge sits off-screen and it reads as a hard rectangle cut
       instead of a clean iris. Falls back to 100vmax if JS hasn't run yet. */
    clip-path: circle(var(--iris-radius, 100vmax) at 50% 50%);
  }
  .page-veil.active .page-veil-logo,
  html.mm-veil-boot .page-veil-logo{
    opacity: 1; transform: scale(1); filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce){
  /* No veil at all for reduced motion — navigation is instant either way. */
  html.mm-veil-boot .page-veil{ display: none; }
}

/* ---------- Gold line accent (animated draw) ---------- */
.gold-line{
  height: 3px; width: 72px; background: var(--gold-400); border-radius: 2px;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference){
  .js .gold-line[data-line]{ transform: scaleX(0); }
}

/* ---------- Stats band ---------- */
.stats-band{ display: grid; grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
@media (min-width: 700px){ .stats-band{ grid-template-columns: repeat(3, 1fr); } }
.stat .stat-value{
  font-family: var(--font-display); font-size: clamp(2.4rem, 3vw + 1rem, 3.4rem);
  color: var(--gold-400); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .stat-label{ margin-top: var(--sp-2); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
@media (prefers-reduced-motion: no-preference){
  .stat-value span.is-lit{ animation: statFlash 900ms ease-out; }
}
@keyframes statFlash{
  0%{ text-shadow: 0 0 0 transparent; }
  35%{ text-shadow: 0 0 18px var(--gold-glow); }
  100%{ text-shadow: 0 0 0 transparent; }
}

/* ---------- Image slot (labeled placeholder, swap-ready) ---------- */
.img-slot{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1.5px dashed var(--gold-500);
  background:
    repeating-conic-gradient(rgba(198,153,44,0.07) 0% 25%, transparent 0% 50%) 0 0/48px 48px,
    linear-gradient(160deg, #f6efdd, var(--cream));
  display: flex; align-items: center; justify-content: center;
  min-height: 240px;
}
.img-slot .img-slot-inner{
  text-align: center; padding: var(--sp-6); color: var(--ink-soft); max-width: 30ch;
}
.img-slot .img-slot-inner svg{ width: 44px; height: 44px; color: var(--gold-500); margin-inline: auto; margin-bottom: var(--sp-3); }
.img-slot .img-slot-tag{
  display: inline-block; margin-bottom: var(--sp-2);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold-500); color: #201703; padding: 3px 10px; border-radius: var(--radius-pill);
}
.img-slot p{ font-size: 0.9rem; margin: 0; }

/* ---------- Real photo frame ---------- */
.photo-frame{
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.photo-frame img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.photo-frame:hover img{ transform: scale(1.045); }
/* Parallax layer: an oversized, absolutely-positioned wrapper GSAP translates
   as the section scrolls (see main.js). Kept separate from the <img> itself
   so the scroll-driven transform never fights the img's own hover-zoom
   transition above -- two different elements, two different transforms. */
.parallax-layer{ position: absolute; inset: -10% 0; will-change: transform; }
.parallax-layer img{ width: 100%; height: 100%; }

/* ---------- Coach grid ---------- */
.coach-grid{
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-6) var(--sp-4); margin-top: var(--sp-7);
}
/* Same breakpoints as .club-grid, so every card-grid on the site scales the
   same way across devices: 1 column on phones, 2 on tablets, 3 on desktop. */
@media (min-width: 560px){ .coach-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px){ .coach-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.coach-card{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.coach-photo-slot{
  width: 100%; aspect-ratio: 3/4; min-height: 0;
  /* Values well past the box's own half-width/height clamp automatically,
     producing a true semicircle top regardless of the grid's responsive
     column width -- an arched "coach card" silhouette instead of a plain
     rectangle. */
  border-radius: 999px 999px 10px 10px;
}
.coach-photo-slot .img-slot-inner{ padding: var(--sp-3); }
.coach-photo-slot .img-slot-inner svg{ width: 30px; height: 30px; margin-bottom: var(--sp-2); }
.coach-photo-slot .img-slot-tag{ font-size: 0.62rem; padding: 2px 8px; }
.coach-photo-slot p{ font-size: 0.72rem; }
.coach-name{
  margin: var(--sp-3) 0 0; font-weight: 800; font-size: 0.98rem; color: var(--ink);
}
.coach-name span{ font-weight: 500; color: var(--ink-soft); }

/* ---------- Filter chips ---------- */
.chip-row{ display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip{
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-light); background: var(--paper);
  font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  min-height: 40px;
}
.chip:hover{ border-color: var(--gold-500); color: var(--ink); }
.chip:active{ transform: scale(0.96); }
.chip[aria-pressed="true"]{
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}

/* ---------- Clubs page ---------- */
.club-toolbar{
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.club-toolbar-top{ display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.search-input{
  flex: 1 1 280px; position: relative;
}
.search-input input{
  width: 100%; padding: 14px 16px 14px 46px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-light); font-size: 1rem; min-height: 48px;
  background: var(--paper);
}
.search-input input:focus{ outline: 3px solid var(--gold-glow); border-color: var(--gold-500); }
.search-input svg{ position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-soft); }

.club-count{ font-weight: 700; color: var(--ink-soft); font-size: 0.92rem; white-space: nowrap; }

.club-grid{ display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px){ .club-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px){ .club-grid{ grid-template-columns: 1fr 1fr 1fr; } }

.club-card{
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.club-card:hover{ box-shadow: var(--shadow-float); border-color: var(--gold-400); }
.club-card-head{
  position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background:
    repeating-conic-gradient(rgba(246,241,227,0.05) 0% 25%, transparent 0% 50%) 0 0/34px 34px,
    linear-gradient(135deg, #1d2030, var(--charcoal));
  color: var(--on-dark);
  display: flex; align-items: center; gap: var(--sp-4);
}
.club-logo-panel{
  width: 64px; height: 64px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--border-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 14px -8px rgba(0,0,0,0.4);
  padding: 2px;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.club-card:hover .club-logo-panel{ border-color: var(--gold-400); transform: scale(1.04); }
.club-logo-panel img{
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.club-logo-fallback{
  width: 100%; height: 100%; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
  color: #201703; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.club-card-head .club-name{ margin: 0; font-size: 1.08rem; color: var(--on-dark); line-height: 1.25; }
.club-card-head .club-type{ font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-300); display: block; margin-bottom: 3px; }
.club-card-body{ padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.club-card .club-address{ color: var(--ink-soft); font-size: 0.9rem; display: flex; gap: 6px; align-items: flex-start; font-style: normal; margin: 0; }
.club-card .club-address svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--gold-600); }
.club-card .sessions{ display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
.club-actions{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); align-items: flex-end; }
.club-actions .sessions{ flex: 1 1 200px; }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item{
  background: var(--paper); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color var(--dur-fast);
}
.faq-item[open]{ border-color: var(--gold-400); }
.faq-item summary{
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); font-weight: 700; font-size: 1.02rem; min-height: 44px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:focus-visible{ outline: 3px solid var(--gold-500); outline-offset: -3px; }
.faq-item summary .faq-icon{
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold-500); color: var(--gold-600);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast);
}
.faq-item[open] summary .faq-icon{ transform: rotate(45deg); background: var(--gold-500); color: #201703; }
.faq-item .faq-body{ padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-soft); overflow: hidden; }
.faq-item .faq-body p{ margin-bottom: var(--sp-3); }
.faq-item .faq-body p:last-child{ margin-bottom: 0; }

.empty-state{ text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--ink-soft); }

/* ---------- Pricing ---------- */
.price-card{ text-align: center; position: relative; }
.price-card.featured{ border-color: var(--gold-500); box-shadow: var(--shadow-lift); }
.price-card .price{ font-family: var(--font-display); font-size: 3rem; margin: var(--sp-4) 0; color: var(--ink); }
.price-card .price span{ font-size: 1rem; font-weight: 700; color: var(--ink-soft); font-family: var(--font-body); }
.price-card .featured-tag{
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  background: var(--gold-500); color: #201703; font-size: 0.75rem; font-weight: 800;
  padding: 6px 16px; border-radius: var(--radius-pill); letter-spacing: 0.05em;
}
.price-list{ list-style: none; padding: 0; margin: var(--sp-5) 0; text-align: left; display: flex; flex-direction: column; gap: var(--sp-3); }
.price-list li{ display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 0.95rem; }
.price-list svg{ width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* ---------- Ambient cursor glow ---------- */
/* A soft, page-wide extension of the same gold-glow spotlight already used
   on [data-tilt] cards -- one signature touch instead of a scattered pile of
   effects. JS (main.js setupCursorGlow) creates the element and tracks the
   pointer with a lagged GSAP quickTo; fine-pointer + motion-ok only. */
.cursor-glow{
  position: fixed; top: 0; left: 0; width: 640px; height: 640px;
  margin-left: -320px; margin-top: -320px;
  border-radius: 50%; pointer-events: none; z-index: 90;
  background: radial-gradient(circle, var(--gold-glow), transparent 68%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
  will-change: transform;
}
.cursor-glow.is-active{ opacity: 1; }

/* ---------- Utility ---------- */
.mt-0{ margin-top: 0; }
.gap-lg{ gap: var(--sp-7); }
[data-reveal]{ opacity: 1; }
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal],
  .js [data-stagger] > *{ opacity: 0; }

  /* Hero entrance is pure CSS so it never depends on a JS ticker. */
  [data-hero-seq] > *{
    opacity: 0;
    animation: heroIn 0.7s var(--ease-out) forwards;
  }
  [data-hero-seq] > *:nth-child(1){ animation-delay: 0.1s; }
  [data-hero-seq] > *:nth-child(2){ animation-delay: 0.19s; }
  [data-hero-seq] > *:nth-child(3){ animation-delay: 0.28s; }
  [data-hero-seq] > *:nth-child(4){ animation-delay: 0.37s; }
  [data-hero-seq] > *:nth-child(5){ animation-delay: 0.46s; }
}
@keyframes heroIn{
  from{ opacity: 0; transform: translateY(22px); }
  to{ opacity: 1; transform: none; }
}
.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--gold-400); color: #201703;
  padding: 12px 20px; z-index: 200; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible{ outline: 3px solid var(--gold-500); outline-offset: 2px; }