/* ==========================================================================
   Homepage — cinematic layer (loads on top of site.css, home page only)
   Depth, hierarchy, motion. Respects prefers-reduced-motion throughout.
   ========================================================================== */

body.home-page {
  --serif: "Fraunces", Georgia, "Iowan Old Style", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

/* ------------------------------- header ---------------------------------- */
body.home-page .site-header {
  transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
body.home-page .site-header.at-top {
  background: transparent;
  box-shadow: none;
}
body.home-page .site-header.scrolled {
  background: rgba(10, 29, 48, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* -------------------------------- hero ----------------------------------- */
.hero2 {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  margin-top: -75px;               /* slide under the transparent header */
  padding: 130px 0 150px;
  background:
    radial-gradient(1100px 640px at 82% -12%, rgba(62, 118, 168, 0.42), transparent 62%),
    radial-gradient(800px 500px at -8% 110%, rgba(201, 162, 39, 0.14), transparent 60%),
    linear-gradient(166deg, var(--navy-dark) 0%, var(--navy) 44%, var(--navy-bright) 100%);
}
.hero2::after {                     /* film grain for depth */
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* minmax(0, …) on both tracks, not plain fr. A grid item's default min-width is
   min-content, and .hero-title .ln is white-space: nowrap — so without this the
   longest unbreakable headline line becomes a hard floor on the column, and the
   lead copy and both CTAs get dragged off-screen with it on a narrow phone. */
.hero2 .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: 26px;
}
.hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.hero2 h1 {
  color: #fff;
  font-size: clamp(24px, 3.5vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
  font-weight: 600;
}
/* The headline is written as two whole phrases: "Where the Mountains Meet" and
   "the Carolina Shore". Each is nowrap, so a line break can only ever land
   between the two — never inside one. That is what guarantees "Carolina Shore"
   stays on a single line and no word is ever stranded on its own. The type is
   sized so the longer phrase fits the hero column at every width; it is the
   font that yields, not the phrasing. */
/* .ln WAS how this headline broke: one nowrap span per line, which works
   perfectly for a headline written into the markup and not at all for one a
   club types. A long tagline in a nowrap span does not wrap, it overflows.
   The headline is the club's own words now (see {{heroTitle}}), so it breaks
   where the browser judges best and `balance` keeps the lines even. The rule
   stays for any markup that still carries .ln. */
.hero-title { text-wrap: balance; }
.hero-title .ln { display: inline-block; white-space: nowrap; }
.hero2 h1 .gold-i {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 60%, var(--gold-pale));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero2 .lead {
  font-size: 20px;
  line-height: 1.65;
  color: #C4D2E2;
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 42px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17.5px; font-weight: 700;
  padding: 16px 28px; border-radius: 34px;
  background: linear-gradient(120deg, #DDB93E, var(--gold));
  color: var(--navy-deep);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(201, 162, 39, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero .arr { transition: transform 0.2s; }
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(201, 162, 39, 0.45); color: var(--navy-deep); }
.btn-hero:hover .arr { transform: translateX(5px); }
.btn-hero.ghost {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1.6px solid rgba(255,255,255,0.4);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn-hero.ghost:hover { border-color: #fff; background: rgba(255,255,255,0.13); }
.hero-proof { display: flex; gap: 30px; flex-wrap: wrap; }
.hero-proof .p { font-size: 14.5px; color: #8FA5BC; }
.hero-proof .p b { display: block; font-family: var(--serif); font-size: 23px; color: #fff; font-weight: 600; }

.hero-seal { position: relative; text-align: center; }
.hero-seal::before {               /* halo behind the seal */
  content: "";
  position: absolute; inset: -12%;
  background: radial-gradient(circle, rgba(201,162,39,0.22), transparent 62%);
  z-index: 0;
}
.hero-seal img {
  position: relative; z-index: 1;
  width: min(380px, 36vw);
  height: auto;                    /* the width/height attrs are only a hint — don't let them stretch it */
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.42));
}

/* drifting musical notes */
.note {
  position: absolute;
  font-size: 30px;
  color: rgba(201, 162, 39, 0.4);
  text-shadow: 0 0 18px rgba(201,162,39,0.35);
  animation: noteFloat 11s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes noteFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.35; }
  50% { transform: translateY(-38px) rotate(8deg); opacity: 0.75; }
}

/* marquee ribbon */
.marquee {
  overflow: hidden;
  padding: 52px 0 6px;
}
.marquee .track {
  display: flex;
  gap: 54px;
  width: max-content;
  animation: marq 36s linear infinite;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(15, 42, 67, 0.3);
}
.marquee .track .star { color: var(--gold); -webkit-text-stroke: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* 3D tilt on event tiles */
.event-tile { transform-style: preserve-3d; will-change: transform; }

/* layered animated surf */
.surf { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; pointer-events: none; }
.surf svg { display: block; width: 200%; }
.surf-1 { opacity: 0.35; animation: drift 26s linear infinite alternate; }
.surf-2 { opacity: 0.55; animation: drift 18s linear infinite alternate-reverse; margin-top: -60px; }
.surf-3 { animation: drift 32s linear infinite alternate; margin-top: -46px; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------- ticket countdown strip ------------------------ */
.ticket-strip {
  position: relative;
  z-index: 3;
  max-width: 1060px;
  margin: 44px auto 0;
  padding: 0 24px;
}
.ticket-strip .inner {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px;
  border: 2px dashed rgba(201, 162, 39, 0.55);
  outline: 6px solid var(--navy);
  box-shadow: 0 28px 60px rgba(10, 29, 48, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 34px;
  flex-wrap: wrap;
}
.ticket-strip .admit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--gold);
  border-left: 1px solid rgba(255,255,255,0.18);
  padding-left: 14px;
  align-self: stretch;
  display: flex; align-items: center;
}
.ticket-strip .what { flex: 1; min-width: 250px; }
.ticket-strip .k { font-size: 12.5px; font-weight: 800; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 6px; }
.ticket-strip h3 { color: #fff; font-size: 25px; font-weight: 600; }
.ticket-strip .meta { color: #A9BBCE; font-size: 15.5px; margin-top: 4px; }
.countdown { display: flex; gap: 14px; }
.count-cell { text-align: center; min-width: 64px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px 8px 8px; }
.count-cell b { display: block; font-family: var(--serif); font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.count-cell span { font-size: 10.5px; letter-spacing: 0.18em; color: #93A8BE; text-transform: uppercase; }

/* ------------------------------ sections --------------------------------- */
/* Reveal-on-scroll is a progressive enhancement, never a gate on content.
   Elements are only hidden once JS has confirmed IntersectionObserver support
   (html.can-reveal), and a safety timer un-hides anything still waiting. */
.reveal { opacity: 1; transform: none; }
html.can-reveal .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.25,1), transform 0.7s cubic-bezier(.2,.7,.25,1);
}
html.can-reveal .reveal.in { opacity: 1; transform: none; }

.sec-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 14px;
}
.sec-label::before { content: ""; width: 44px; height: 2.5px; background: var(--gold); border-radius: 2px; }

.event-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .event-row { grid-template-columns: 1fr; } }
.event-tile {
  position: relative;
  /* `var(--surface)`, never `#fff`. A hard-coded fill is a component that
     opted out of the theme, and nothing says so — it is simply still a sheet
     of white paper at night. Fixed at source so it never needs a line in the
     dark block's override list. The hairline goes with it: a rule mixed from
     the navy at 8% is invisible against a dark card. */
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 26px 22px;
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 22px rgba(15, 42, 67, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.event-tile:hover { transform: translateY(-7px); box-shadow: 0 22px 44px rgba(15, 42, 67, 0.16); }
.event-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--gold), var(--gold-deep)); }
.event-tile .when {
  font-family: var(--serif); font-size: 15px; color: var(--gold-deep); font-weight: 600; margin-bottom: 10px;
}
.event-tile h3 { font-size: 22px; margin-bottom: 8px; line-height: 1.25; }
.event-tile .where { font-size: 15.5px; color: var(--muted); margin-bottom: 14px; }
.event-tile .go { font-weight: 700; font-size: 15.5px; color: var(--harbor); text-decoration: none; }
.event-tile .go:hover { color: var(--navy); }

/* stats band */
.stats-band {
  position: relative;
  background: #08192A;
  color: #fff;
  padding: 124px 0 104px;      /* taller band = gentler crop on a 2.17:1 photo */
  overflow: hidden;
}
.stats-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
  z-index: 0;
}
/* Scrim: the marquee bulbs stay readable behind gold numerals, but the type
   keeps well clear of AA contrast. Warm at the base so the gym floor glows. */
.stats-band::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,17,28,.86) 0%, rgba(6,17,28,.62) 44%, rgba(8,25,42,.84) 100%),
    radial-gradient(900px 420px at 50% 78%, rgba(201,162,39,.16), transparent 68%);
}
.stats-band .wrap { position: relative; z-index: 2; }
/* Band heading — a real section header rather than an eyebrow label. No rule
   sits beside it (that is what .sec-label::before draws); the type carries the
   hierarchy on its own. Shared with the "Who We Are" band so the two read as
   the same level of the page. */
.band-head {
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #fff;
  text-align: center;
  margin-bottom: 46px;
}
.band-head.on-light { color: var(--navy); text-align: left; margin-bottom: 20px; }

.stats-credit {
  text-align: center; margin-top: 34px;
  font-size: 12.5px; letter-spacing: .05em; color: #8FA5BC;
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr; gap: 24px; } }
.stat-big b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(44px, 4.6vw, 62px);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.stat-big span { font-size: 15.5px; color: #AFC1D4; }

/* ------------------- who we are: scannable proof points -----------------
   Four claims a first-time visitor can read in a glance, instead of one
   paragraph they have to work through. */
.proof-points { list-style: none; display: grid; gap: 18px; margin-top: 26px; }
.proof-points li { display: flex; gap: 16px; align-items: flex-start; }
.proof-points .pp-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--harbor-tint); display: grid; place-items: center; font-size: 21px;
}
.proof-points .pp-tx b {
  display: block; font-family: var(--serif); font-weight: 600;
  color: var(--navy); font-size: 19px; line-height: 1.25;
}
.proof-points .pp-tx b b { color: var(--gold-deep); font-family: inherit; display: inline; }
.proof-points .pp-tx > span { display: block; font-size: 16px; color: var(--muted); margin-top: 2px; }

/* "your first night" — the practical questions, answered before they're asked */
.firstnight {
  background: linear-gradient(140deg, var(--navy), var(--navy-lift)); color: #fff;
  border-radius: 20px; padding: 32px 34px 30px;
  box-shadow: 0 24px 54px rgba(15, 42, 67, 0.28);
}
.firstnight .fn-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.firstnight h3 { color: #fff; font-size: 25px; line-height: 1.2; margin-bottom: 20px; }
.firstnight dl { display: grid; }
.firstnight dt {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8FA5BC; padding-top: 14px;
}
.firstnight dd {
  font-size: 17px; color: #E4ECF4; padding-bottom: 14px; margin-top: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.firstnight dd:last-of-type { border-bottom: none; }
@media (max-width: 620px) { .firstnight { padding: 26px 22px 24px; } }

/* ---------------------------- our story --------------------------------
   The club's founding, told once and told properly. The prose sits left,
   a dated rail of milestones sits right; on narrow screens the rail simply
   stacks underneath. Every word comes from site.history, so the board can
   revise it without anyone touching this file. */
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 38px; } }

.story-copy p {
  font-family: var(--serif); font-size: 19.5px; line-height: 1.72;
  color: var(--ink); margin-bottom: 18px;
}
/* the opening line carries the whole story — give it a little more weight */
.story-copy p:first-of-type { font-size: 21px; }
.story-copy p:last-of-type { margin-bottom: 0; }
.story-copy em { color: var(--gold-deep); font-style: italic; }

/* affiliation badge — a plaque, not a logo we don't have the artwork for */
.story-badge {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: 12px;
  padding: 14px 20px 14px 18px; box-shadow: var(--shadow);
}
.story-badge .sb-mark { flex: none; width: 46px; height: 46px; }
.story-badge .sb-tx { line-height: 1.35; }
.story-badge .sb-tx small {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep);
}
.story-badge .sb-tx b { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--navy); }

/* the milestone rail */
.timeline { list-style: none; position: relative; padding-left: 30px; }
.timeline li { position: relative; padding-bottom: 30px; }
.timeline li:last-child { padding-bottom: 0; }
/* Each item draws its own length of rail, from its dot to the next one, so the
   line stops dead at the final milestone instead of trailing off past it. */
.timeline li::after {
  content: ""; position: absolute; left: -24px; top: 20px; bottom: -6px; width: 2px;
  background: rgba(201, 162, 39, 0.55); border-radius: 2px;
}
.timeline li:last-child::after { display: none; }
.timeline li::before {              /* the dot */
  content: ""; position: absolute; left: -30px; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  /* the ring is punched out of the band's own tint, so the dot reads as a
     bead threaded onto the rail rather than a disc sitting on top of it */
  background: var(--gold); border: 3px solid var(--harbor-tint);
  box-shadow: 0 0 0 2px var(--gold);
}
/* the closing milestone is where the club is now — mark it in navy */
.timeline li:last-child::before { background: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.timeline .yr {
  font-size: 13px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 3px;
}
.timeline h3 { font-size: 20px; margin-bottom: 4px; }
.timeline p { font-size: 16.5px; color: var(--muted); line-height: 1.6; }

/* the basic step widget — retained, but no longer placed on the page */
.step-card {
  background: linear-gradient(140deg, var(--navy), var(--navy-lift));
  border-radius: 20px;
  color: #fff;
  padding: 34px 34px 30px;
  box-shadow: 0 24px 54px rgba(15, 42, 67, 0.28);
}
.step-card h3 { color: #fff; font-size: 26px; margin-bottom: 6px; }
.step-card .sub { color: #A9BBCE; font-size: 15.5px; margin-bottom: 26px; }
.beats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; margin-bottom: 26px; }
.beat {
  text-align: center;
  padding: 14px 4px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.12s, background 0.12s, box-shadow 0.12s;
}
.beat b { display: block; font-family: var(--serif); font-size: 26px; color: #E7EDF4; line-height: 1; }
.beat span { font-size: 11px; letter-spacing: 0.1em; color: #8FA5BC; text-transform: uppercase; }
.beat.amp b { font-size: 19px; color: #A9BBCE; }
.beat.on {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 10px 26px rgba(201,162,39,0.5);
}
.beat.on b, .beat.on span { color: var(--navy-deep); }
.step-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.step-note { font-size: 14px; color: #8FA5BC; }

/* polaroid gallery strip */
.polaroids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 900px) { .polaroids { grid-template-columns: 1fr; } }
.polaroid {
  background: var(--surface);
  padding: 14px 14px 20px;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(15, 42, 67, 0.16);
  transition: transform 0.3s cubic-bezier(.2,.7,.25,1), box-shadow 0.3s;
  cursor: pointer;
}
.polaroid:nth-child(3n+1) { transform: rotate(-2.4deg); }
.polaroid:nth-child(3n+2) { transform: rotate(1.6deg) translateY(10px); }
.polaroid:nth-child(3n)   { transform: rotate(-1deg); }
.polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.025); box-shadow: 0 26px 54px rgba(15, 42, 67, 0.24); z-index: 2; position: relative; }
.polaroid img { width: 100%; aspect-ratio: 10/7.4; object-fit: cover; border-radius: 3px; }
.polaroid .cap { font-family: "Caveat", var(--serif); font-size: 21px; color: #33414F; text-align: center; margin-top: 12px; line-height: 1.2; }
.polaroid .cap small { display: block; font-family: var(--sans); font-size: 12.5px; color: #8a94a3; margin-top: 2px; }

/* newsletter split */
.news-cta {
  position: relative;
  background: linear-gradient(120deg, var(--navy), var(--navy-bright));
  border-radius: 22px;
  color: #fff;
  padding: 52px 54px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(15, 42, 67, 0.3);
}
@media (max-width: 820px) { .news-cta { grid-template-columns: 1fr; padding: 40px 30px; } }
.news-cta::after {
  content: "";
  position: absolute; right: -70px; bottom: -90px;
  width: 340px; height: 340px;
  background: url("/brand/mark.svg?role=watermark") no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
}
.news-cta h2 { color: #fff; }
.news-cta p { color: #B9C9DA; font-size: 17.5px; margin-top: 12px; max-width: 520px; }

/* wave divider between light sections */
.divider { display: block; width: 100%; height: 54px; }

/* Below the two-column breakpoint the seal moves ABOVE the headline. It used to
   be `display: none` here, which took the club's own badge off the homepage for
   everyone on a phone or a tablet in portrait — which is most of the people who
   ever open it — and left the hero as words on a gradient. "Beside the
   headline" is a two-column idea; in one column the same intention is "above
   it", not "gone". If this ever needs to shrink again, shrink it. */
@media (max-width: 880px) {
  .hero2 .wrap { grid-template-columns: 1fr; text-align: left; gap: 30px; }
  /* The width lives on the wrapper, not the image, so the gold halo drawn by
     ::before stays a circle around the seal instead of a wide flat wash across
     the whole column. */
  .hero-seal { order: -1; width: min(200px, 46vw); margin: 0 auto; }
  .hero-seal img { width: 100%; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.42)); }
  .ticket-strip .admit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .surf-1, .surf-2, .surf-3, .note, .marquee .track { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .event-tile, .polaroid, .btn-hero { transition: none; }
}

/* ---------------------------- featured video ----------------------------- */
.video-band {
  position: relative;
  background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 52%, var(--navy-lift) 100%);
  padding: 80px 0 86px;
  overflow: hidden;
}
.video-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 78% 12%, rgba(62,118,168,.34), transparent 62%);
  pointer-events: none;
}
.video-band .wrap { position: relative; }
.video-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 46px; align-items: center; }
@media (max-width: 940px) { .video-grid { grid-template-columns: 1fr; gap: 30px; } }
.video-copy h2 { color: #fff; }
.video-copy p { color: #C4D2E2; font-size: 18px; margin-top: 14px; }
.video-copy .sec-label { color: var(--gold); }

.video-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14);
  aspect-ratio: 16 / 9;
  background: #06121e;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* (the facade is now the ticket — see the block at the end of this file) */
.video-note { font-size: 13px; color: #8FA5BC; margin-top: 14px; }
.video-note a { color: var(--gold); }

/* ============ the video facade IS the ticket — light face on navy ==========
   The poster doubles as an admission ticket: gold stub, cream face, dashed
   inner rule. Predominantly light so it lifts off the navy band. */
.video-facade {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; cursor: pointer; border: none; width: 100%;
  background:
    radial-gradient(circle at 50% 45%, rgba(201,162,39,.13), transparent 62%),
    linear-gradient(155deg, #0C2540, #14344F 55%, #1B4166);
  font-family: var(--sans);
}
.ticket-face {
  position: relative;
  display: flex; align-items: stretch;
  width: min(590px, 96%);
  background: linear-gradient(168deg, #FDFCF7 0%, #F2EFE4 100%);
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .28s cubic-bezier(.2,.7,.25,1), box-shadow .28s;
  overflow: hidden;
}
.video-facade:hover .ticket-face { transform: translateY(-5px) scale(1.015); box-shadow: 0 30px 64px rgba(0,0,0,.6); }

/* gold stub, separated by a punched perforation */
.ticket-stub {
  flex: none; width: 54px;
  background: linear-gradient(180deg, #DDB93E, var(--gold));
  color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; letter-spacing: .32em; font-weight: 800;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
}
.ticket-perf {
  flex: none; width: 2px;
  background: repeating-linear-gradient(180deg,
    rgba(15,42,67,.34) 0 5px, transparent 5px 11px);
}
.ticket-main {
  flex: 1; min-width: 0;
  margin: 10px; padding: 16px 22px 15px;
  border: 1.6px dashed rgba(154,123,20,.5); border-radius: 9px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ticket-main .tk-seal { width: 44px; margin-bottom: 3px; }
.ticket-main .tk-presents {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 800;
}
.ticket-main .tk-title {
  font-family: var(--serif); font-size: clamp(21px, 2.5vw, 28px);
  color: var(--navy); font-weight: 600; line-height: 1.12; margin-top: 1px;
}
.ticket-main .tk-rule {
  width: 66%; height: 1px; margin: 9px 0 2px;
  background: linear-gradient(90deg, transparent, rgba(154,123,20,.6), transparent);
}
.ticket-main .play {
  width: 66px; height: 66px; border-radius: 50%; margin: 6px 0 5px;
  background: linear-gradient(140deg, #E3C450, var(--gold));
  color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; padding-left: 4px;
  box-shadow: 0 8px 22px rgba(201,162,39,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .22s, box-shadow .22s;
}
.video-facade:hover .play { transform: scale(1.1); box-shadow: 0 12px 30px rgba(201,162,39,.66); }
.ticket-main .tk-note { font-size: 11.5px; color: var(--muted); }
/* On a phone the 16:9 frame is only ~200px tall, so the ticket sheds anything
   that isn't load-bearing: the seal (already in the header) and the long note. */
@media (max-width: 640px) {
  .ticket-face { width: 100%; border-radius: 10px; }
  .ticket-stub { width: 34px; font-size: 8.5px; letter-spacing: .2em; }
  .ticket-main { margin: 7px; padding: 8px 12px; gap: 1px; }
  .ticket-main .tk-seal { display: none; }
  .ticket-main .tk-presents { font-size: 8px; letter-spacing: .16em; }
  .ticket-main .tk-title { font-size: 19px; line-height: 1.1; }
  .ticket-main .tk-rule { margin: 5px 0 1px; width: 54%; }
  .ticket-main .play { width: 50px; height: 50px; font-size: 19px; margin: 3px 0 2px; }
  .ticket-main .tk-note { font-size: 9.5px; }
  .video-facade { padding: 10px; }
}
@media (max-width: 400px) {
  .ticket-main .tk-note::after { content: ""; }
  .ticket-main .tk-note { font-size: 9px; }
  .ticket-main .tk-title { font-size: 17.5px; }
}

/* ===================== PHONE: the homepage, tightened =====================
   One codebase. These rules only alter layout below 760px — the desktop
   design above that breakpoint is untouched. */
@media (max-width: 760px) {
  /* the transparent header can't sit over the hero when it wraps to two rows */
  body.home-page .site-header.at-top {
    background: rgba(10, 29, 48, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(10, 29, 48, .4);
  }
  .hero2 {
    margin-top: 0;
    min-height: 0;
    padding: 34px 0 86px;
  }
  .hero2 .wrap { gap: 26px; }
  .hero-chip { font-size: 11.5px; letter-spacing: .1em; padding: 7px 14px; margin-bottom: 18px; }
  .hero2 h1 { font-size: clamp(19px, 6.1vw, 40px); margin-bottom: 16px; }
  .hero2 .lead { font-size: 17.5px; margin-bottom: 26px; }
  .hero-ctas { gap: 12px; margin-bottom: 30px; }
  .btn-hero { font-size: 16.5px; padding: 15px 26px; width: 100%; justify-content: center; }
  .hero-proof { gap: 20px; }
  .hero-proof .p { font-size: 13px; }
  .hero-proof .p b { font-size: 20px; }
  .note { display: none; }              /* floating notes add clutter on a small screen */
  .surf-1, .surf-2 { display: none; }   /* keep one wave, drop the parallax stack */

  .ticket-strip { margin: 26px auto 0; padding: 0 16px; }
  .ticket-strip .inner { padding: 18px 20px; gap: 14px; }
  .ticket-strip h3 { font-size: 20px; }
  .ticket-strip .meta { font-size: 14.5px; }
  .countdown { gap: 8px; width: 100%; justify-content: space-between; }
  .count-cell { min-width: 0; flex: 1; padding: 8px 4px 6px; }
  .count-cell b { font-size: 23px; }
  .count-cell span { font-size: 9px; letter-spacing: .1em; }
  .ticket-strip .btn { width: 100%; text-align: center; }

  .marquee { padding: 34px 0 2px; }
  .marquee .track { font-size: 26px; gap: 34px; }

  .sec-label { font-size: 11.5px; letter-spacing: .18em; }
  .sec-label::before { width: 28px; }
  .event-tile { padding: 20px 20px 18px; }
  .event-tile h3 { font-size: 20px; }
  .event-tile .go { font-size: 16px; display: inline-block; padding: 6px 0; }

  /* Phone: show the whole word. A narrow viewport crops a wide photo hard, and
     losing the "S" from SHAG reads as a mistake rather than a crop. */
  .stats-band { padding: 54px 0 50px; }
  .stats-photo {
    object-fit: contain; object-position: center top;
    height: auto; width: 100%; top: 0; bottom: auto;
  }
  .stats-band::before {
    background:
      linear-gradient(180deg, rgba(6,17,28,.72) 0%, rgba(6,17,28,.86) 34%, rgba(8,25,42,.96) 62%),
      radial-gradient(600px 300px at 50% 12%, rgba(201,162,39,.18), transparent 70%);
  }
  .stats-band .wrap { padding-top: 78px; }   /* let the letters breathe above the numbers */
  .stats-credit { margin-top: 20px; font-size: 11.5px; }
  .stats-grid { gap: 22px 16px; }
  .stat-big b { font-size: 38px; }
  .stat-big span { font-size: 14px; }

  .step-card { padding: 24px 20px 22px; }
  .beats { gap: 5px; }
  .beat { padding: 9px 2px 8px; border-radius: 10px; }
  .beat b { font-size: 18px; }
  .beat span { font-size: 8.5px; letter-spacing: .04em; }
  .beat.amp b { font-size: 14px; }
  .step-controls .btn { width: 100%; }
  .step-note { font-size: 13px; }

  /* polaroids read as a clean stack on a phone — rotation looks like a glitch */
  .polaroids { gap: 18px; }
  .polaroid, .polaroid:nth-child(3n+1), .polaroid:nth-child(3n+2), .polaroid:nth-child(3n) {
    transform: none;
  }
  .polaroid .cap { font-size: 19px; }

  .video-band { padding: 52px 0 58px; }
  .news-cta { padding: 32px 24px; }
  .news-cta::after { display: none; }
  .news-cta .btn-hero { width: 100%; }
  .divider { height: 34px; }
}

/* very small phones */
@media (max-width: 380px) {
  /* The headline stays on the 6.1vw clamp here on purpose. A fixed size below
     380px sets it LARGER than the clamp gives at 381px, and since .ln can't
     wrap, that overflows the hero. Anything added back must keep the longest
     line under (100vw - 36px) at the narrowest supported width. */
  .beat span { display: none; }
  .beat { padding: 10px 2px; }
}

/* ------------------ weekly dance + what it costs ------------------------ */
.weekly-band { background: var(--harbor-tint); padding: 60px 0 64px; }
/* The two cards are a matched pair: stretch makes their tops AND bottoms line
   up no matter which one has more rows, and each card lays its own contents out
   as a column so the padding stays even instead of pooling at the bottom. */
.weekly-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: stretch; }
@media (max-width: 880px) { .weekly-grid { grid-template-columns: 1fr; gap: 26px; } }
.weekly-when {
  background: linear-gradient(140deg, var(--navy), var(--navy-lift)); color: #fff;
  border-radius: 18px; padding: 30px 32px; box-shadow: 0 18px 44px rgba(15,42,67,.26);
  display: flex; flex-direction: column;
}
.weekly-when .slots { display: flex; flex-direction: column; justify-content: center; flex: 1; margin-top: 18px; }
.weekly-when .day {
  font-size: clamp(30px, 4vw, 40px); font-family: var(--serif); font-weight: 600; line-height: 1.1;
}
.weekly-when .venue { color: var(--gold); font-size: 18.5px; margin-top: 6px; }
.weekly-when .slot {
  display: flex; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.weekly-when .slot:last-of-type { border-bottom: none; }
.weekly-when .slot .t { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: 18px; white-space: nowrap; }
.weekly-when .slot .w { font-size: 19.5px; }
.weekly-when .slot .w small { display: block; color: #A9BBCE; font-size: 15px; margin-top: 2px; }
.price-card {
  background: var(--surface); border-radius: 18px; padding: 26px 28px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
.price-card #price-rows { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.price-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 18.5px;
}
.price-row:last-of-type { border-bottom: none; }
.price-row .lbl { color: var(--ink); }
.price-row .lbl small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.price-row .amt { margin-left: auto; font-family: var(--serif); font-size: 26px; color: var(--navy); font-variant-numeric: tabular-nums; }
.price-row.free .amt { color: var(--good); }
/* `--good-tint`, which the dark block remaps, rather than a mint literal —
   a hard-coded tint is a bright block on a dark card. */
.price-row.free { background: var(--good-tint); margin: 0 -12px; padding: 13px 12px; border-radius: 10px; border-bottom: none; }

/* THE TOP SURF WAVE FOLLOWS THE PAGE IT MEETS.
   It is filled `#F8F7F2` as a presentation attribute — the light paper colour,
   so the hero's surf blends into the section below it. A presentation
   attribute is not a stylesheet: no dark rule can reach it, so at night that
   wave stayed a bright band across the foot of the hero while everything above
   and below it went dark. A CSS `fill` beats the attribute in both themes, and
   reads the same token the page background does, so the two cannot drift.

   The two navy dividers below the hero are deliberately left alone: they are
   `--navy-deep`, which is dark in both themes and is the colour of the section
   they belong to, not of the page. */
.surf-3 svg path { fill: var(--paper); }