/* ==========================================================================
   5-6-5678 Dance — Swing Dance · San Diego
   Vintage swing-era design system: cream parchment, espresso, brass & burgundy
   Fonts: Limelight (display) · Yellowtail (script) · Jost (body)
   ========================================================================== */

:root {
  --cream:        #f7edda;
  --cream-light:  #fdf6e9;
  --cream-dark:   #efe0c4;
  --espresso:     #2b1d12;
  --espresso-soft:#43301f;
  --brown-mid:    #6b4f33;
  --gold:         #c9992e;
  --gold-bright:  #e3b94e;
  --gold-deep:    #a67c1f;
  --burgundy:     #8c2f2f;
  --burgundy-hot: #a63a3a;
  --ink:          #322213;

  --font-display: "Limelight", "Georgia", serif;
  --font-script:  "Yellowtail", cursive;
  --font-body:    "Jost", "Segoe UI", sans-serif;

  --shadow-soft:  0 10px 30px rgba(43, 29, 18, 0.18);
  --shadow-lift:  0 16px 40px rgba(43, 29, 18, 0.28);
  --radius: 14px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

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

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.6em; }

p { margin: 0 0 1em; }

a { color: var(--burgundy); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* ---------- Type helpers ---------- */
.script { font-family: var(--font-script); font-weight: 400; }

.kicker {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--burgundy);
  margin-bottom: 0.1em;
  text-align: center;
}

.kicker.light { color: var(--gold-bright); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--espresso);
  text-align: center;
  margin-bottom: 1.4em;
}

.section-title.light { color: var(--cream-light); }

.section-title::after {
  content: "✦ ✦ ✦";
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.9em;
  padding-left: 0.9em; /* balance letter-spacing trailing gap */
  color: var(--gold);
  margin-top: 0.55em;
}

.spark { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 999px;
  padding: 0.8em 1.9em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--espresso);
  box-shadow: 0 6px 18px rgba(201, 153, 46, 0.45);
}

.btn-gold:hover { background: linear-gradient(180deg, #f0c75c, var(--gold-bright)); }

.btn-burgundy {
  background: var(--burgundy);
  color: var(--cream-light);
  box-shadow: 0 6px 18px rgba(140, 47, 47, 0.35);
}

.btn-burgundy:hover { background: var(--burgundy-hot); }

.btn-ghost {
  background: transparent;
  color: var(--cream-light);
  border: 2px solid rgba(253, 246, 233, 0.75);
}

.btn-ghost:hover { background: rgba(253, 246, 233, 0.12); }

.btn-big { font-size: 1.05rem; padding: 1em 2.4em; }
.btn-small { font-size: 0.85rem; padding: 0.55em 1.4em; }

/* ---------- Announcement ribbon ---------- */
.ribbon {
  background: var(--burgundy);
  color: var(--cream-light);
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ribbon p { margin: 0; padding: 0.5em 1em; }

.ribbon .spark { color: var(--gold-bright); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(43, 29, 18, 0.97);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.brand { text-decoration: none; line-height: 1.1; }

/* The name leads with digits, and Yellowtail's cursive numerals render
   "5-6-5678" almost unreadably — the art-deco display face sets figures
   cleanly and still reads as period-correct signage. */
.brand-script {
  display: block;
  font-family: var(--font-display);
  font-size: 1.34rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.brand-tag {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  margin-top: 0.15rem;
}

.site-nav { display: flex; align-items: center; gap: 1.4rem; }

.site-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a:not(.btn) {
  color: var(--cream-light);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 0.98rem;
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav a:not(.btn):hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-bright);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Height is kept near the artwork's own 21:9 so object-fit: cover crops
   only a few percent horizontally — a taller box would eat the edges. */
.hero {
  position: relative;
  min-height: clamp(560px, 70vh, 660px);
  display: flex;
  align-items: center;
  color: var(--cream-light);
  overflow: hidden;
}

/* The artwork already places the couple in its right half (~53%–97% of
   its width), so no pan is needed. Bias the cover-crop right so the man's
   kicked-up foot at the far right is never clipped. */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 55%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(43, 29, 18, 0.86) 0%, rgba(43, 29, 18, 0.62) 34%, rgba(43, 29, 18, 0.12) 60%, rgba(43, 29, 18, 0.30) 100%),
    radial-gradient(ellipse at 72% 25%, rgba(255, 214, 130, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(43, 29, 18, 0.42) 0%, rgba(43, 29, 18, 0.05) 35%, rgba(43, 29, 18, 0.78) 100%);
}

/* Keep the text block compact: every pixel of hero height makes the box
   taller than the 21:9 artwork and forces cover to crop more width off it. */
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 3.2rem 0 2.6rem;
}

.hero-inner .kicker { text-align: left; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7.4vw, 5.2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0.05em 0 0.2em;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.55);
}

.hero-title span {
  color: var(--gold-bright);
}

.hero-sub {
  max-width: 560px;
  margin: 0 0 1.6rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 300;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero-sub strong { font-weight: 600; color: var(--gold-bright); }

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0;
  margin: 0 0 1.8rem;
  max-width: 660px;
}

.hero-facts li {
  background: rgba(43, 29, 18, 0.72);
  border: 1px solid rgba(227, 185, 78, 0.55);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  font-size: 0.95rem;
  backdrop-filter: blur(3px);
}

.fact-icon { margin-right: 0.35em; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.hero-scarcity {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Narrow desktops: normal width with a left-of-center pan keeps both
   dancers on screen; headline and text column trimmed so they clear the couple.
   (Must come after the base hero rules to win the cascade.) */
@media (min-width: 861px) and (max-width: 1150px) {
  .hero-img { width: 100%; object-position: 25% 50%; }
  .hero-title { font-size: clamp(2.9rem, 8vw, 5rem); }
  .hero-sub { max-width: 480px; }
  .hero-facts { max-width: 500px; }
}

/* Below ~1250px the hero box is far taller than the 21:9 artwork, so cover
   crops away so much width that the couple can't both fit AND clear a
   left-aligned headline. Centre the text and show the calm open floor
   instead of half a dancer. */
@media (max-width: 1250px) {
  .hero-inner { text-align: center; }
  .hero-inner .kicker { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-facts { justify-content: center; max-width: none; }
  .hero-cta { justify-content: center; }
  /* These viewports see only a slice of the 21:9 artwork, and the slice gets
     narrower the smaller the screen. 25% keeps the centre of that slice on
     open floor at 1250px, 1024px, 800px and 375px alike — so the centred
     text never lands on a dancer's face. */
  .hero-img { width: 100%; object-position: 25% 50%; }
  .hero-overlay {
    background:
      radial-gradient(ellipse at 50% 20%, rgba(255, 214, 130, 0.12), transparent 55%),
      linear-gradient(180deg, rgba(43, 29, 18, 0.60) 0%, rgba(43, 29, 18, 0.45) 40%, rgba(43, 29, 18, 0.85) 100%);
  }
}

/* ---------- Quick facts bar ---------- */
.factbar {
  background: var(--espresso);
  color: var(--cream-light);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}

.factbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 1.8rem 0;
}

.fact h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.4em;
}

.fact p { margin: 0; font-weight: 500; }

.fact-note {
  display: block;
  font-size: 0.85rem;
  font-weight: 300;
  opacity: 0.8;
  margin-top: 0.2em;
}

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }

/* ---------- Classes ---------- */
.classes {
  background:
    radial-gradient(circle at 8% 12%, rgba(201, 153, 46, 0.10), transparent 30%),
    radial-gradient(circle at 94% 80%, rgba(140, 47, 47, 0.08), transparent 32%),
    var(--cream);
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 2.2rem;
  margin-bottom: 3rem;
}

.class-card {
  background: var(--cream-light);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.class-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.class-art { position: relative; }

.class-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.level-chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.level-beg { background: var(--gold-bright); color: var(--espresso); }
.level-int { background: var(--burgundy); color: var(--cream-light); }

.class-body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }

.class-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--espresso);
}

.class-time {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--burgundy);
  margin-bottom: 0.7em;
}

.class-time span { font-size: 0.9rem; font-weight: 400; color: var(--brown-mid); }

.class-blurb { color: var(--espresso-soft); }

.emphasis {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.emphasis li {
  display: flex;
  gap: 0.5em;
  padding: 0.42em 0;
  border-bottom: 1px dashed var(--cream-dark);
  font-weight: 500;
}

.emphasis li:last-child { border-bottom: none; }

.emphasis .spark { flex: none; }

.class-body .btn { margin-top: auto; align-self: flex-start; }

/* Dates strip */
.dates {
  text-align: center;
  background: var(--cream-light);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.2rem;
  max-width: 780px;
  margin-inline: auto;
}

.dates-label {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--burgundy);
  margin-bottom: 0.6em;
}

.date-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding: 0;
  margin: 0 0 1rem;
}

.date-pills li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--espresso);
  color: var(--gold-bright);
  font-weight: 600;
  padding: 0.4em 1em;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1.3;
}

.date-pills li.skip { flex-direction: column; }

.date-pills li.skip {
  background: transparent;
  color: var(--brown-mid);
  border: 1px dashed var(--brown-mid);
  text-decoration: line-through;
  font-weight: 400;
}

.date-pills li.skip small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.dates-note { font-size: 0.95rem; color: var(--brown-mid); margin: 0; }

/* ---------- Instructors ---------- */
/* Deeper cream band + gold rule so this section reads as distinct from
   the cream Classes section directly above it */
.instructors {
  background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 55%);
  border-top: 2px solid var(--gold);
}
.instructor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.2rem;
  margin-bottom: 3rem;
}

.instructor-card {
  background: var(--cream-light);
  border-radius: var(--radius);
  border: 2px solid var(--cream-dark);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.9rem;
  text-align: center;
}

.portrait {
  width: 168px;
  height: 168px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 22px rgba(43, 29, 18, 0.3);
}

.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; }

.instructor-card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--espresso);
  margin-bottom: 0.3em;
}

.instructor-card .quote {
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--burgundy);
  margin-bottom: 0.8em;
}

.instructor-card p:last-of-type { margin: 0; color: var(--espresso-soft); text-align: left; }

.partnership {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.2rem;
  align-items: center;
  background: var(--cream-light);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  max-width: 900px;
  margin-inline: auto;
}

.partnership img { border-radius: 10px; box-shadow: var(--shadow-soft); }

.partnership blockquote { margin: 0; }

.partnership-quotes blockquote + blockquote {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--cream-dark);
}

.partnership blockquote p {
  font-size: 1.12rem;
  font-style: italic;
  color: var(--espresso-soft);
}

.partnership cite {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.4rem;
  color: var(--burgundy);
}

/* ---------- Pricing ---------- */
.pricing {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(227, 185, 78, 0.14), transparent 60%),
    var(--espresso);
  color: var(--cream-light);
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.2rem;
  max-width: 860px;
  margin: 0 auto 2.2rem;
}

.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream-light);
  color: var(--ink);
  border-radius: var(--radius);
  /* Both cards reserve the badge's height up top so their headings, prices
     and dashed rules line up across the grid. The transparent border matches
     the featured card's gold one so box-sizing doesn't shift content 3px. */
  padding: 3.6rem 2rem 2.3rem;
  border: 3px solid transparent;
  box-shadow: var(--shadow-lift);
  /* ticket notches */
  -webkit-mask:
    radial-gradient(circle 13px at 0 52%, transparent 98%, #000) left,
    radial-gradient(circle 13px at 100% 52%, transparent 98%, #000) right;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 13px at 0 52%, transparent 98%, #000) left,
    radial-gradient(circle 13px at 100% 52%, transparent 98%, #000) right;
  mask-composite: intersect;
}

/* No scale() here — it would render this card's text 3% larger than the
   solo card's and knock every row out of alignment. The gold border and
   badge carry the emphasis instead. */
.ticket-featured {
  border-color: var(--gold);
}

.ticket-ribbon {
  position: absolute;
  top: 1rem;
  left: 50%;
  max-width: calc(100% - 2.5rem);
  transform: translateX(-50%);
  background: var(--burgundy);
  color: var(--cream-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45em 1.3em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ticket-top {
  text-align: center;
  border-bottom: 2px dashed var(--cream-dark);
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
}

.ticket h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--espresso);
  margin-bottom: 0.2em;
}

.price {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--burgundy);
  margin: 0;
  line-height: 1;
}

.price span {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brown-mid);
  margin-left: 0.3em;
}

.ticket ul { list-style: none; padding: 0; margin: 0 0 1.6rem; }

/* flex row keeps a wrapped second line indented under the text
   instead of sliding back beneath the ✦ */
.ticket li {
  display: flex;
  gap: 0.5em;
  padding: 0.4em 0;
}

.ticket li .spark { flex: none; }

/* auto margin pins both buttons to the bottom edge so they line up
   even when the lists wrap to different heights */
.ticket .btn { width: 100%; margin-top: auto; }

.capacity-note {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.capacity-note strong { color: var(--gold-bright); }

/* ---------- Location ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2.2rem;
  align-items: stretch;
}

.location-card {
  background: var(--cream-light);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
}

.location-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--espresso);
}

.address {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--burgundy);
}

.location-card .btn { margin-top: auto; align-self: flex-start; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-soft);
  min-height: 320px;
}

.map-wrap iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(227, 185, 78, 0.25), transparent 60%),
    repeating-conic-gradient(from -90deg at 50% 130%, rgba(227, 185, 78, 0.06) 0deg 6deg, transparent 6deg 12deg),
    var(--espresso);
  color: var(--cream-light);
  text-align: center;
  padding: 5rem 0;
  border-top: 3px solid var(--gold);
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin-bottom: 0.4em;
}

.final-sub { font-size: 1.15rem; font-weight: 300; margin-bottom: 2rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: #1d130b;
  color: var(--cream);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding: 3.2rem 0 2.4rem;
}

.footer-badge { width: 92px; border-radius: 50%; margin-bottom: 0.8rem; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }

.footer-brand .brand-script { font-size: 1.5rem; color: var(--gold-bright); margin: 0 0 0.3rem; }

.footer-brand p:last-child { font-weight: 300; opacity: 0.85; }

.site-footer h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.9em;
}

.footer-nav ul { list-style: none; padding: 0; margin: 0; }

.footer-nav li { margin-bottom: 0.5em; }

.footer-nav a {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav a:hover { color: var(--gold-bright); }

.footer-visit p { font-weight: 300; opacity: 0.9; }

.footer-when { color: var(--gold-bright); font-weight: 500; opacity: 1; }

.footer-bottom {
  border-top: 1px solid rgba(247, 237, 218, 0.15);
  text-align: center;
  font-size: 0.88rem;
  padding: 1.2rem 0;
  opacity: 0.8;
}

.footer-bottom p { margin: 0; }

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .class-card { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .factbar-grid { grid-template-columns: repeat(2, 1fr); }
  .partnership { grid-template-columns: 1fr; text-align: center; }
  .partnership img { max-width: 320px; margin-inline: auto; }
  .location-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    background: rgba(43, 29, 18, 0.98);
    border-bottom: 2px solid var(--gold);
    padding: 1.5rem 0 1.8rem;
    display: none;
  }

  .site-nav.open { display: flex; }

  .site-nav ul { flex-direction: column; align-items: center; gap: 1rem; }

  .nav-toggle { display: flex; }

  .hero { min-height: 92vh; }

  .hero-inner { padding-top: 3.2rem; }

  .factbar-grid { grid-template-columns: 1fr; text-align: center; gap: 1.2rem; }

  .footer-grid { grid-template-columns: 1fr; text-align: center; }

  .footer-badge { margin-inline: auto; }

  .class-body .btn, .location-card .btn { align-self: stretch; }
}