/* ============================================================
   Siren Heels — sirenheels.com
   Dark ocean luxury + electric siren blue. Mobile-first.
   ============================================================ */

:root {
  --black: #050508;
  --navy: #07111F;
  --blue: #00BFFF;
  --deep-blue: #0077FF;
  --gold: #D8B76A;
  --pearl: #F5F1E8;
  --mist: #BFC7D5;
  --aqua: #4DEBFF;

  --font-title: "Playfair Display", Georgia, serif;
  /* Italianno, matching about-kamryn.html. Great Vibes kept as a fallback name
     only; it is no longer requested. Italianno renders smaller per font-size
     unit, so the script sizes below were scaled up to compensate. */
  --font-script: "Italianno", "Great Vibes", cursive;
  --font-body: "Montserrat", -apple-system, sans-serif;

  --nav-h: 64px;
  --radius-pill: 999px;

  /* Sea-foam pink. One source of truth so every foam-edged element matches. */
  --foam: rgba(255, 172, 206, 0.42);
  --foam-strong: rgba(255, 172, 206, 0.6);
  --foam-glow: 0 0 16px rgba(255, 148, 194, 0.26);
  --foam-glow-lg: 0 0 28px rgba(255, 148, 194, 0.3);

  /* Sea glass (James, 2026-07-31): THE surface treatment for everything
     translucent — cards, inputs, date pills, menus. Green shallows falling
     into dark, so whatever is behind glows through. Pair with a backdrop
     blur on larger panels. */
  --seaglass: linear-gradient(165deg, rgba(28, 178, 160, 0.13), rgba(3, 22, 28, 0.72));
  --seaglass-deep: linear-gradient(165deg, rgba(28, 178, 160, 0.14), rgba(3, 14, 18, 0.96));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--black);
  color: var(--pearl);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--aqua); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.9rem 2rem;
  min-height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  /* Gradients must span the BORDER box: with the default padding-box origin
     plus background-repeat, the 1px transparent border strip at the bottom
     wraps around to the gradient's FIRST stop — which painted a white line
     under every foam pill. */
  background-origin: border-box;
  background-repeat: no-repeat;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }

/* Ocean-graded pills (James, 2026-07-31): every fill is a gradient drawn
   from the water — foam crest, sea glass, night depth — not a flat color. */
.btn--blue {
  /* white foam at the crest sinking into deep water — the tail holds dark
     navy for the last stretch so the pill visibly FADES TO DARK BLUE */
  background: linear-gradient(180deg, #EAF9FF 0%, #8FE0FF 20%, #00A5E8 52%, #063A5E 86%, #041F33 100%);
  /* dark text: the top of this pill is nearly white, white type drowned */
  color: #04121F;
  box-shadow: 0 0 24px rgba(0, 191, 255, 0.35);
}
.btn--blue:hover {
  color: #04121F;
  box-shadow: 0 0 40px rgba(77, 235, 255, 0.55);
}

/* The nav's "Join on Instagram" pill in gold, matching how about-kamryn.html
   treats it. Scoped to .nav__links so the hero's own .btn--blue
   ("Message @siren_heels") keeps its blue fill. */
.nav__links .btn--blue {
  background: transparent;
  color: var(--gold);
  border-color: rgba(216, 183, 106, 0.55);
  box-shadow: none;
}
.nav__links .btn--blue:hover {
  color: #F0D79A;
  border-color: #F0D79A;
  box-shadow: 0 0 22px rgba(216, 183, 106, 0.28);
}

.btn--ghost {
  /* green ocean shallows falling into dark — translucent so what's behind
     still breathes through, same sea-glass idea as the calendar cards */
  background: linear-gradient(165deg, rgba(28, 178, 160, 0.28), rgba(3, 22, 28, 0.75));
  color: var(--pearl);
  border-color: rgba(216, 183, 106, 0.6);
}
.btn--ghost:hover { color: var(--gold); border-color: var(--gold); }

.btn--dark {
  /* night water: dark blue sinking to black */
  background: linear-gradient(180deg, #0A2B4E 0%, #03070C 100%);
  /* Flat gold, not the gradient: at 0.95rem uppercase the gradient's dark end
     goes muddy. Solid gold on near-black clears 8:1. */
  color: var(--gold);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.btn--dark:hover { color: #F0D79A; }

.btn--small { padding: 0.55rem 1.4rem; min-height: 40px; font-size: 0.8rem; }
.btn--wide { width: 100%; max-width: 420px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 183, 106, 0.15);
}

.nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.nav__name {
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--pearl);
}
.nav__name-accent { color: var(--gold); }

.nav__links {
  display: none;
  align-items: center;
  gap: 1.6rem;
}
.nav__links a {
  color: var(--mist);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--aqua); }
/* Current page: gold with an underline so you always know where you are */
.nav__links a[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

/* Always-visible booking button: returning dancers never scroll or open the menu */
.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__cta {
  /* Fixed width = the widest label ("Book an Event", 160px on the events
     page). Without this the header links shift left when swapping pages,
     because the shorter "Sign Up" pill changes the right-side block width. */
  min-width: 160px;
  justify-content: center;
  text-align: center;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  min-height: 40px;
  border-radius: var(--radius-pill);
  /* same foam-crest family as .btn--blue, scaled for the nav */
  background: linear-gradient(180deg, #EAF9FF 0%, #8FE0FF 30%, #00A5E8 100%);
  color: var(--black);
  box-shadow: 0 0 22px rgba(77, 235, 255, 0.45);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.nav__cta:hover { color: var(--black); box-shadow: 0 0 34px rgba(77, 235, 255, 0.75); }
.nav__cta:active { transform: scale(0.97); }
/* Narrow phones: keep brand + button + burger on one comfortable line */
@media (max-width: 430px) {
  .nav { padding: 0 0.75rem; }
  .nav__brand { gap: 0.45rem; }
  .nav__logo { width: 32px; height: 32px; }
  .nav__name { font-size: 0.95rem; letter-spacing: 0.05em; }
  .nav__cta { font-size: 0.7rem; letter-spacing: 0.03em; padding: 0.5rem 0.78rem; }
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.nav__toggle span {
  width: 22px; height: 2px;
  background: var(--pearl);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu open state */
.nav__links.is-open {
  display: flex;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  flex-direction: column;
  gap: 0;
  /* Near-opaque: the old gradient started at 14% alpha, unreadable over the
     hero video (James, 2026-08-19). */
  background: linear-gradient(165deg, rgba(16, 48, 46, 0.78), rgba(3, 12, 16, 0.80));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 191, 255, 0.25);
  padding: 0.5rem 0 1.25rem;
}
.nav__links.is-open a {
  padding: 0.9rem 1.5rem;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}
.nav__links.is-open .btn { width: auto; margin: 0.75rem auto 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Container values IDENTICAL to .k-hero in about-kamryn.css (the reference).
     No offset hack. The alignment works because the hero content below is
     trimmed to fit inside 88svh — once it fits, this hero CENTRES exactly like
     the About page's and tracks it at every width. While the content
     overflowed, centring was disabled and no padding value could ever match.
     Only the homepage moves; about-kamryn.css is not changed to suit this. */
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 3rem) 1.25rem 2rem;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 70%, #0a2a4a 0%, var(--navy) 45%, var(--black) 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 45% at 50% 62%, rgba(0, 191, 255, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.72) 0%, rgba(5, 5, 8, 0.45) 45%, rgba(5, 5, 8, 0.9) 100%);
}

/* 760px matches .k-hero__inner on about-kamryn.html so the wordmark and
   Kamryn's name have the same room to breathe. */
.hero__content { position: relative; z-index: 2; max-width: 760px; }

/* ---------- Hero eyebrow + lead-in ----------
   These duplicate .k-eyebrow and .k-hero__meet from about-kamryn.css value for
   value (font, size, weight, tracking, margins, the 46px rule). That is
   deliberate: identical stacks above each name is what makes "Siren's Heels"
   and "Kamryn Cruise" land at the same y at EVERY width. If you change a
   number here, change it there too. */
.hero__eyebrow {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.hero__eyebrow::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0.85rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero__introducing {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: clamp(0.95rem, 3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Blue here mirrors the pink "MEET" on the About page. */
  color: var(--blue);
  margin-bottom: 0.1rem;
}

/* The wordmark. Same face and same clamp() as .k-hero__name on
   about-kamryn.html, so both heroes occupy the same visual space; only the
   gradient differs (blue here, gold there). */
.hero__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(4.1rem, 19vw, 10rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: none;
  background: linear-gradient(168deg, #E4FBFF 4%, var(--aqua) 28%, var(--blue) 56%, #0059CC 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A text-shadow would paint over clipped text, so the glow is a filter. */
  text-shadow: none;
  filter: drop-shadow(0 3px 20px rgba(0, 191, 255, 0.4));
  padding: 0 0.08em 0.06em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title { color: var(--aqua); -webkit-text-fill-color: var(--aqua); }
}

.hero__with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  color: var(--mist);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.hero__with span { display: block; width: 42px; height: 1px; background: rgba(216, 183, 106, 0.6); }

.hero__instructor {
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 10.4vw, 3.65rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 0.4rem;
  /* Gold gradient comes from the shared rule above; the old gold text-shadow
     is replaced by a drop-shadow, which survives background-clip: text. */
  filter: drop-shadow(0 0 14px rgba(216, 183, 106, 0.45));
}

.hero__tag {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 6.6vw, 2.2rem);
  color: var(--pearl);
  /* Tightened from 1.6rem. The space reclaimed here is spent above the
     wordmark (.hero__textmark padding-top) to push the whole stack down so the
     wordmark aligns with Kamryn's name on about-kamryn.html, without making
     the hero any taller. */
  margin-top: 0.3rem;
}

.hero__sub {
  color: var(--mist);
  font-size: 0.98rem;
  max-width: 480px;
  margin: 0.55rem auto 0;
}
/* ---------- Bold = the page's accent colour ----------
   Mirrors the pink emphasis on about-kamryn.html, in blue here. Scoped with
   :not(.page-kamryn) because this stylesheet is shared and the About page's
   15 bold spans must stay pink. */
body:not(.page-kamryn) strong { color: var(--blue); font-weight: 700; }
.hero__sub strong { color: var(--blue); font-weight: 700; }

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.hero__ctas .btn { width: 100%; max-width: 320px; }

.hero__info {
  margin-top: 0.8rem;
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__scroll {
  position: absolute;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--mist);
  font-size: 1.3rem;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid rgba(0, 191, 255, 0.25);
  border-bottom: 1px solid rgba(0, 191, 255, 0.25);
  padding: 0.75rem 0;
}
.ticker__track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 28s linear infinite;
  color: var(--blue);
  /* Courier Prime, matching the ticker on about-kamryn.html. Mono is already
     wide, so the tracking comes down from 0.28em to 0.2em. */
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 1.25rem; }
.section--black { background: var(--black); }
.section--navy {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 119, 255, 0.07) 0%, transparent 55%),
    var(--navy);
}
.section--band {
  /* Deepened from the old #0077FF/#0091d8 band. The bright saturated blue read
     flat and left gold at a 2.1:1 contrast ratio (unreadable). These stops keep
     it clearly blue while giving gold 4.1-9.2:1 to sit on. */
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(77, 235, 255, 0.16) 0%, transparent 62%),
    linear-gradient(135deg, #03192f 0%, #083c6e 55%, #0a5488 100%);
  text-align: center;
}
.section--band .section__lead { color: rgba(245, 241, 232, 0.92); }
/* Aqua rather than --blue inside the band: blue-on-blue passes luminance
   contrast but reads muddy because the hues are so close. */
.section--band .section__lead strong {
  color: var(--aqua);
  font-weight: 700;
}

.container { max-width: 1080px; margin: 0 auto; }
.container--narrow { max-width: 720px; }

.eyebrow {
  /* Mono, same as .k-eyebrow. Mono is already wide, so less tracking than the
     sans version needed. */
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.eyebrow--light { color: rgba(245, 241, 232, 0.85); }

/* ---------- Gold gradient text ----------
   The same treatment used on about-kamryn.html, applied to the largest text in
   every section so both pages share one headline language.
   Deliberately NOT used on small meta text (.eyebrow, .hero__info, .detail
   kickers): at 0.7-0.8rem the gradient's dark end drops below readable contrast
   and the letters go muddy. Those stay flat gold. */
.section__title,
.hero__instructor,
.script-line,
.final__sub,
.signup-confirm__title {
  background: linear-gradient(120deg, #FBEFCF 2%, #F0D79A 26%, var(--gold) 60%, #8C6D33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A text-shadow would paint over clipped text; depth comes from a filter. */
  text-shadow: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section__title,
  .hero__instructor,
  .script-line,
  .final__sub,
  .signup-confirm__title { color: var(--gold); -webkit-text-fill-color: var(--gold); }
}

/* ---------- Headers in Courier Prime, matching about-kamryn.html ----------
   Headers only. Body copy stays Montserrat, exactly as on the About page:
   mono is comfortable for a heading and tiring for a paragraph. Mono is much
   wider than Playfair, so these sizes are reined in to match the About page's
   .k-title and to keep long headings off a second line on a phone. */
.section__title,
.card__title,
.detail h3,
.faq summary,
.final__title {
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  letter-spacing: -0.02em;
}

.section__title {
  font-weight: 700;
  font-size: clamp(1.4rem, 5.2vw, 2.15rem);
  line-height: 1.32;
  margin-bottom: 1.1rem;
}
/* Emphasis lifts to the pale end of the same gold rather than switching hue,
   so the two-tone stays inside one palette. */
.section__title em {
  font-style: italic;
  background: linear-gradient(120deg, #FFFDF5 0%, #FBEFCF 45%, #F0D79A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}
/* Gold headline on the band. Only readable because the band was deepened above;
   on the old bright blue this sat at 2.1:1. */
.section--band .section__title {
  background: linear-gradient(120deg, #FBEFCF 2%, #F0D79A 26%, var(--gold) 60%, #A8802F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* text-shadow would paint over clipped text, so depth comes from a filter. */
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section--band .section__title { color: var(--gold); -webkit-text-fill-color: var(--gold); }
}
.section--band .section__title em { -webkit-text-fill-color: transparent; text-shadow: none; }

.section__lead { color: var(--mist); max-width: 680px; }
.section--band .section__lead { margin-left: auto; margin-right: auto; }

.section__closer {
  margin-top: 2.4rem;
  color: var(--mist);
  text-align: center;
}
.script-line {
  font-family: var(--font-script);
  font-size: clamp(1.95rem, 7.8vw, 2.6rem);
  color: var(--gold);
}

/* ---------- Cards ---------- */
.cards { display: grid; gap: 1.1rem; margin-top: 2.2rem; }

.card {
  border: 1px solid rgba(0, 191, 255, 0.25);
  border-top: 1px solid rgba(216, 183, 106, 0.5);
  border-radius: 14px;
  padding: 1.8rem 1.5rem;
  background: var(--seaglass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
  border-color: rgba(77, 235, 255, 0.6);
  box-shadow: 0 0 32px rgba(0, 191, 255, 0.12);
  transform: translateY(-3px);
}
.card__numeral {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.card__title {
  /* No font-family here: it would override the Courier Prime header rule above.
     Mono is wider than Playfair, so the size comes down to match .k-card__title. */
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--aqua);
  margin-bottom: 0.6rem;
}
.card p:last-child { color: var(--mist); font-size: 0.95rem; }

/* ---------- Pill list (accent band) ---------- */
.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem 0 2.2rem;
}
/* Sea-foam pills: a soft pink glow rather than a hard outline, so they read as
   foam catching light on dark water instead of outlined boxes. Replaces the old
   rgba(245,241,232,0.5) white border, which was the flattest thing on the page. */
.pill-list li {
  border: 1px solid var(--foam);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pearl);
  /* Sea glass, same as every translucent surface (James, 2026-07-31) */
  background: var(--seaglass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    /* the glow spilling outward */
    var(--foam-glow),
    /* light catching the top edge, like the crest of foam */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    /* soft haze inside */
    inset 0 0 14px rgba(255, 192, 218, 0.1);
  /* (audit 2026-07-31: a stray blur(2px) here was silently overriding the
     6px above — removed so the pills match the sea-glass family) */
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  /* Mobile: one tile per row, full width, stacked vertically */
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  /* overflow stays hidden to clip the video, so the glow has to sit OUTSIDE
     the box — hence box-shadow rather than an inner effect. */
  overflow: hidden;
  border: 1px solid var(--foam);
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 119, 255, 0.35) 0%, transparent 65%),
    linear-gradient(160deg, #0a1828 0%, var(--navy) 60%, var(--black) 100%);
  background-size: cover;
  background-position: center;
  box-shadow: var(--foam-glow-lg);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.gallery__item:hover {
  border-color: var(--foam-strong);
  box-shadow: 0 0 40px rgba(255, 148, 194, 0.42);
  transform: translateY(-2px);
}
.gallery__item::after {
  content: attr(data-caption);
  position: absolute;
  left: 0.9rem; bottom: 0.7rem;
  color: var(--mist);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Video tiles: class footage playing muted inside the box */
.gallery__item--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__item--video::after { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); z-index: 2; }

/* ---------- Colour-matching a warm clip to its purple-lit neighbours ----------
   hue-rotate is useless here: the footage is mostly neutral white wall and
   skin, which has no hue to rotate. A blended tint layer is what actually
   shifts neutrals, so the grade is an overlay rather than a filter. */
.gallery__item--cool video {
  filter: saturate(0.8) brightness(0.82) contrast(1.06);
}
.gallery__item--cool::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Must not swallow the tile's Instagram link. */
  pointer-events: none;
  background: linear-gradient(165deg, rgba(126, 82, 198, 0.42) 0%, rgba(74, 96, 214, 0.34) 55%, rgba(52, 62, 150, 0.3) 100%);
  /* `color` takes the hue/saturation of this layer and keeps the clip's own
     luminance, so the dancers stay readable instead of being washed flat. */
  mix-blend-mode: color;
}

/* Whole tile is a silent link to the reel on Instagram; the themed
   card below the gallery carries the visible invitation */
.gallery__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- Instagram card ---------- */
.ig-card {
  margin: 2.4rem auto 0;
  max-width: 460px;
  text-align: center;
  border: 1px solid rgba(0, 191, 255, 0.3);
  border-radius: 16px;
  padding: 1.8rem 1.4rem;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.9), rgba(5, 5, 8, 0.9));
  box-shadow: 0 0 44px rgba(0, 119, 255, 0.1);
}
.ig-card__handle {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--aqua);
  margin-bottom: 0.4rem;
}
.ig-card__copy { color: var(--mist); font-size: 0.92rem; margin-bottom: 1.1rem; }

/* ---------- Split (Kamryn) ---------- */
.split { display: grid; gap: 2rem; align-items: center; }
.split__media {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid rgba(216, 183, 106, 0.4);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 191, 255, 0.3) 0%, transparent 60%),
    linear-gradient(160deg, #0d1f33 0%, var(--navy) 55%, var(--black) 100%);
  background-size: cover;
  background-position: center top;
}
.split__media.has-photo {
  background-size: cover, cover, cover, cover;
  background-position: center top;
  border: none;
  box-shadow: 0 0 48px rgba(0, 119, 255, 0.18);
}
.split__body p { color: var(--mist); margin-bottom: 1rem; }

.cred-list { list-style: none; margin-top: 1.2rem; }
.cred-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(216, 183, 106, 0.2);
  color: var(--pearl);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.cred-list li:first-child { border-top: 1px solid rgba(216, 183, 106, 0.2); }

/* ---------- Details ---------- */
.details { display: grid; gap: 1rem; margin: 2.2rem 0; }
.detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid rgba(0, 191, 255, 0.2);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  background: var(--seaglass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 1.15rem;
}
.detail h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.detail p, .detail a { color: var(--pearl); font-size: 0.98rem; }
.detail a:hover { color: var(--aqua); }

/* ---------- Sign up ---------- */
.signup { margin-top: 2rem; text-align: left; }

.signup__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.85);
  margin-bottom: 0.7rem;
}

.signup__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.signup__dates label {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6rem 1.2rem;
  /* Was rgba(245,241,232,0.5) — the white border that made these read flat. */
  border: 1px solid rgba(216, 183, 106, 0.45);
  border-radius: var(--radius-pill);
  background: var(--seaglass);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Hover has to be visible: these are the primary thing to click in the form. */
.signup__dates label:hover:not(.is-blocked) {
  border-color: var(--gold);
  color: #F0D79A;
  box-shadow: 0 0 14px rgba(216, 183, 106, 0.28);
}
.signup__dates input { position: absolute; opacity: 0; pointer-events: none; }
/* Selected reads as a filled gold pill, so chosen dates are unmistakable
   against the unselected gold-on-dark ones. */
.signup__dates label:has(input:checked) {
  background: linear-gradient(135deg, #8C6D33, var(--gold) 45%, #F0D79A);
  border-color: #F0D79A;
  color: #14100A;
  box-shadow: 0 0 20px rgba(216, 183, 106, 0.45);
}
.signup__dates label.is-blocked {
  position: relative;
  opacity: 0.8;
  cursor: not-allowed;
  border-color: rgba(255, 82, 99, 0.55);
  color: rgba(245, 241, 232, 0.7);
}
/* Red X drawn across the whole pill */
.signup__dates label.is-blocked::before,
.signup__dates label.is-blocked::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: rgba(255, 82, 99, 0.9);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 82, 99, 0.45);
  pointer-events: none;
}
.signup__dates label.is-blocked::before { transform: rotate(16deg); }
.signup__dates label.is-blocked::after { transform: rotate(-16deg); }
.signup__dates label.is-blocked small {
  margin-left: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff5263;
}

.signup__grid { display: grid; gap: 0.9rem; }

.signup__field span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 241, 232, 0.92);
  margin-bottom: 0.35rem;
}
.signup__field em { font-style: normal; font-weight: 400; color: rgba(245, 241, 232, 0.6); }
.signup__field input {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px+ prevents iOS zoom-on-focus */
  color: var(--pearl);
  background: var(--seaglass);
  border: 1px solid rgba(245, 241, 232, 0.35);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.signup__field input:focus {
  outline: none;
  border-color: var(--aqua);
  box-shadow: 0 0 14px rgba(77, 235, 255, 0.25);
}

/* Returning-dancer bar. Appears only when this device has saved details, so
   most visitors never see it. */
.signup__back {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--foam);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 190, 216, 0.04));
  box-shadow: var(--foam-glow);
}
.signup__back p { flex: 1; font-size: 0.9rem; margin: 0; }
.signup__back strong { color: var(--gold); }
.signup__back button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(216, 183, 106, 0.45);
  background: none;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.signup__back button:hover { color: #F0D79A; border-color: #F0D79A; }

.signup__check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.2rem 0 1.5rem;
  color: var(--pearl);
  font-size: 0.95rem;
  cursor: pointer;
}
/* Two checkboxes now sit together; tighten the gap between them. */
.signup__check + .signup__check { margin-top: -0.9rem; }
.signup__check input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--blue);
  cursor: pointer;
}
.signup__check em { font-style: normal; color: rgba(245, 241, 232, 0.6); }

.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.signup__note {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(245, 241, 232, 0.7);
}
.signup__error {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  color: #ffdede;
  background: rgba(120, 0, 25, 0.35);
  border: 1px solid rgba(255, 130, 130, 0.5);
  border-radius: 12px;
}
.signup__error a { color: #fff; text-decoration: underline; }

.signup-confirm {
  margin-top: 2rem;
  padding: 1.6rem 1.4rem;
  text-align: left;
  background: var(--seaglass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 0 36px rgba(216, 183, 106, 0.18);
}
.signup-confirm__title {
  font-family: var(--font-title);
  font-size: 1.45rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.signup-confirm p { color: rgba(245, 241, 232, 0.95); margin-bottom: 0.7rem; }
.signup-confirm .btn { margin-top: 0.4rem; }

.venmo {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.3rem;
  text-align: left;
  background: var(--seaglass);
  border: 1px solid rgba(245, 241, 232, 0.3);
  border-radius: 16px;
}
.venmo__qr {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
}
.venmo__body { flex: 1 1 220px; }
.venmo__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.85);
  margin-bottom: 0.4rem;
}
.venmo__body p { color: rgba(245, 241, 232, 0.92); margin-bottom: 0.8rem; font-size: 0.95rem; }

/* ---------- What to bring ---------- */
.bring-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}
.bring-grid li {
  border: 1px solid rgba(0, 191, 255, 0.25);
  border-radius: 12px;
  padding: 1.1rem 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--seaglass);
}
.bring-grid li span { display: block; color: var(--mist); font-size: 0.75rem; font-weight: 400; }

/* ---------- FAQ ---------- */
.faq {
  border-bottom: 1px solid rgba(191, 199, 213, 0.18);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  font-family: var(--font-title);
  font-size: 1.08rem;
  color: var(--pearl);
  transition: color 0.25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem; top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 1.4rem;
  font-family: var(--font-body);
  transition: transform 0.25s ease;
}
.faq[open] summary { color: var(--aqua); }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { color: var(--mist); padding: 0 0 1.2rem; font-size: 0.95rem; }

/* ---------- Final CTA ---------- */
.final {
  position: relative;
  text-align: center;
  padding: 6rem 1.25rem 7rem;
  background:
    radial-gradient(ellipse 75% 55% at 50% 80%, rgba(0, 119, 255, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 95%, rgba(77, 235, 255, 0.18) 0%, transparent 70%),
    var(--black);
}
.final__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.12;
  color: var(--pearl);
  margin-bottom: 1rem;
}
.final__title em {
  font-style: italic;
  color: var(--aqua);
  text-shadow: 0 0 28px rgba(0, 191, 255, 0.55);
}
.final__sub {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 7.8vw, 2.5rem);
  color: var(--gold);
  margin-bottom: 2rem;
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 3rem 1.25rem calc(3rem + 74px); /* room for sticky CTA on mobile */
  border-top: 1px solid rgba(216, 183, 106, 0.2);
  background: var(--navy);
  color: var(--mist);
  font-size: 0.88rem;
}
.footer p { margin-bottom: 0.5rem; }
.footer__brand {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--pearl);
}
.footer__brand span { color: var(--gold); font-size: 0.95rem; }

/* Kamryn's name set as a wordmark. Reusable so any future display use of her
   name matches the hero and the About page. The 1.5em bump compensates for
   Italianno rendering ~77% the cap height of the surrounding type. */
.script-name {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: 0.01em;
  vertical-align: -0.06em;
}
.footer__fine { margin-top: 1.2rem; font-size: 0.75rem; color: rgba(191, 199, 213, 0.55); }
/* Kamryn's way in. Deliberately quiet — dancers have no reason to tap it,
   and it lands on a gated app, so it costs nothing to have it visible. */
.footer__studio { margin-left: 0.6rem; color: rgba(216, 183, 106, 0.7);
  text-decoration: none; border-bottom: 1px solid rgba(216, 183, 106, 0.3); }
.footer__studio:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 191, 255, 0.3);
  display: flex;
  justify-content: center;
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { max-width: 100%; font-size: 0.85rem; padding: 0.8rem 1rem; }

/* ---------- Live check-in pill ---------- */
/* Instagram-live energy: hot pink, pulsing, and simply absent outside the
   Saturday class window (main.js owns show/hide — see "Live check-in").
   Near-black text on hot pink, not white: white sat around 3:1 contrast. */
.checkin-live {
  position: fixed;
  right: 1rem;
  /* clears the sticky CTA bar on mobile */
  bottom: calc(4.9rem + env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  /* pink into gold (James, 2026-07-31) — sunset on the water */
  background: linear-gradient(135deg, #FF2D8F 0%, #FF71B1 45%, #E8C77E 100%);
  color: #08060B;
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(255, 45, 143, 0.55), 0 8px 26px rgba(255, 45, 143, 0.35);
  animation: checkin-pulse 2.2s ease-out infinite;
}
/* .checkin-live sets display, which would beat the UA's [hidden] rule —
   without this the button never actually hides. */
.checkin-live[hidden] { display: none; }
/* Pages without the sticky signup bar (e.g. About Kamryn) */
.checkin-live--nobar { bottom: calc(1rem + env(safe-area-inset-bottom)); }
.checkin-live__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  animation: checkin-dot 1.1s ease-in-out infinite alternate;
}
@keyframes checkin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 143, 0.55), 0 8px 26px rgba(255, 45, 143, 0.35); }
  70%  { box-shadow: 0 0 0 15px rgba(255, 45, 143, 0), 0 8px 26px rgba(255, 45, 143, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 143, 0), 0 8px 26px rgba(255, 45, 143, 0.35); }
}
@keyframes checkin-dot {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   calendar.html — the public class calendar (extracted from the
   scheduler prototype's public view, 2026-07-31)
   ============================================================ */
.calpage { min-height: 100svh; }
/* the underwater siren, fixed + cover, faded — same treatment as the prototype */
.calpage::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/siren-bg.jpg") center/cover no-repeat; opacity: 0.46;
}
/* double layer: brighter, saturated, masked to a feathered oval on the swimmer */
.calpage::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/siren-bg.jpg") center/cover no-repeat; opacity: 0.85;
  filter: saturate(1.35) brightness(1.2);
  -webkit-mask: radial-gradient(ellipse 42% 32% at 50% 70%, #000 0%, transparent 72%);
  mask: radial-gradient(ellipse 42% 32% at 50% 70%, #000 0%, transparent 72%);
}
@media (max-width: 620px) {
  .calpage::before, .calpage::after { background-size: auto 135%; background-position: center top; }
}
.calpage main { position: relative; z-index: 1; }

.calwrap { max-width: 920px; margin: 0 auto; padding: calc(var(--nav-h) + 2.4rem) 1rem 4rem; text-align: center; }
.cal__eyebrow { font-family: var(--font-mono, "Courier Prime", monospace); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.cal__title { font-family: "Italianno", cursive; font-size: 3.2rem; line-height: 0.95; color: #F0D79A;
  margin: 0.1rem 0 1.4rem; text-shadow: 0 2px 12px rgba(0,0,0,.7); font-weight: 400; }

.carhead { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.carnav { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px;
  border: 1px solid rgba(216,183,106,.3); color: var(--gold); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(216,183,106,.1), rgba(4,11,16,.66));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.carnav:disabled { opacity: 0.25; }
.car__count { flex: 1; font-family: "Courier Prime", monospace; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cards { display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.9rem 1rem 1rem; margin: 0 -1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab; }
.cards.is-drag { cursor: grabbing; scroll-behavior: auto; }
.cards.is-drag * { pointer-events: none; user-select: none; }
.cards::-webkit-scrollbar { display: none; }
.ccard { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: linear-gradient(165deg, rgba(216,183,106,.1), rgba(4,11,16,.66));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(216,183,106,.28); border-radius: 18px; padding: 1.5rem 1rem 1.2rem; }
.ccard--next { border-color: var(--gold); box-shadow: 0 0 26px rgba(216,183,106,.2); }
.ccard__flag { position: absolute; top: -1px; left: 50%; transform: translate(-50%,-50%);
  font-family: "Courier Prime", monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #14100A; background: var(--gold); padding: 0.2rem 0.55rem; border-radius: 999px; }
.ccard__dow { font-family: "Courier Prime", monospace; font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); }
.ccard__day { font-family: "Courier Prime", monospace; font-size: 3.4rem; font-weight: 700; line-height: 1; color: #F0D79A; }
.ccard__mon { font-family: "Courier Prime", monospace; font-size: 0.9rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pearl); }
.ccard__time { font-size: 0.82rem; color: var(--mist); margin-top: 0.35rem; }
/* margin-top:auto pins the button to the card's bottom edge — cards stretch
   to equal height, so a "spots left" line on one card can no longer shift
   its neighbours' buttons out of line */
.ccard__btn { margin-top: auto; width: 100%; min-height: 48px; border-radius: 999px;
  background: linear-gradient(135deg, #8C6D33, var(--gold) 45%, #F0D79A); color: #14100A;
  font-family: "Courier Prime", monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-decoration: none;
  background-origin: border-box; background-repeat: no-repeat; }
.ccard--off { opacity: 0.8; border-color: rgba(255,82,99,.4);
  background: linear-gradient(165deg, rgba(255,82,99,.07), rgba(4,11,16,.66)); }
.ccard__x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9rem; font-weight: 700; line-height: 1; color: rgba(255,82,99,.5); pointer-events: none;
  text-shadow: 0 0 24px rgba(255,82,99,.35); }
.ccard__why { font-family: "Courier Prime", monospace; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red, #FF5263); margin-top: 0.15rem; }
.ccard__note { font-family: "Courier Prime", monospace; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mist); margin: 0.15rem 0 0.9rem; }

/* ---------- calendar.html: Dates/Calendar toggle + month grid ---------- */
.pubtog { display: flex; gap: 0.4rem; margin: 0 auto 1.1rem; max-width: 280px; }
.pubtog button { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid rgba(216,183,106,.3);
  font-family: "Courier Prime", monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mist); cursor: pointer;
  background: linear-gradient(165deg, rgba(216,183,106,.1), rgba(4,11,16,.66));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background-origin: border-box; background-repeat: no-repeat; }
.pubtog button[aria-pressed="true"] {
  background: linear-gradient(135deg, #8C6D33, var(--gold) 50%, #F0D79A);
  color: #14100A; border-color: #F0D79A; }
.mlegend { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 0.6rem; }
.ml { font-family: "Courier Prime", monospace; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; }
.ml--m1 { color: var(--blue); border: 1px solid rgba(0,191,255,.5); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.ml--m2 { color: #FF71B1; border: 1px solid rgba(255,113,177,.5); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calgrid .cal__dow { font-family: "Courier Prime", monospace; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--gold); text-align: center; padding: 0.3rem 0; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.cd { position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(216,183,106,.16); color: var(--pearl); text-decoration: none;
  background: linear-gradient(165deg, rgba(216,183,106,.1), rgba(4,11,16,.66));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background-origin: border-box; background-repeat: no-repeat; }
.cd__n { font-family: "Courier Prime", monospace; font-size: 0.85rem; font-weight: 700; }
.cd--past { opacity: 0.35; }
.cd--on { border-color: var(--gold); box-shadow: 0 0 14px rgba(216,183,106,.18); }
.cd--on.tint-m1 { border-color: rgba(0,191,255,.65); }
.cd--on.tint-m2 { border-color: rgba(255,113,177,.65); }
.cd__go { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold); font-family: "Courier Prime", monospace; }
.cd--x { border-color: rgba(255,82,99,.45); }
.cd--x::before { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--red, #FF5263); font-size: 1.25rem; font-weight: 700;
  text-shadow: 0 0 10px rgba(255,82,99,.45); pointer-events: none; }
.calnote { font-family: "Courier Prime", monospace; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red, #FF5263); margin: 0.5rem 0 0; text-align: left;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.calmore { width: 100%; min-height: 48px; margin-top: 0.8rem; border-radius: 999px;
  border: 1px solid rgba(216,183,106,.3); color: var(--gold); cursor: pointer;
  font-family: "Courier Prime", monospace; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(165deg, rgba(216,183,106,.1), rgba(4,11,16,.66));
  background-origin: border-box; background-repeat: no-repeat; }
.ccard__n { font-family: "Courier Prime", monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pink, #FF71B1); margin: -0.75rem 0 0.9rem; }
.ccard__n--low { color: #F0D79A; font-weight: 700; }
.ccard__n--full { color: #FF5263; }

/* ⚠️ Must come AFTER every pill rule above: their `background:` SHORTHANDS
   reset repeat/origin to repeat/padding-box, which wraps each gradient
   around into the 1px transparent border — painting the gradient's FIRST
   stop (white foam!) as a hairline under the pill. Longhands here win by
   file order and stop the wrap. */
.btn--blue, .btn--ghost, .btn--dark, .btn--gold, .nav__cta, .checkin-live, .pill-list li {
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* ============================================================
   THE CROSSING (2026-08-02 narrative rewrite)
   The page's spine: the difficulty is outside the building and it ends at
   the door. These carry the hero promise, the parking-lot band, her unasked
   questions, and the walking-into block.
   ============================================================ */
.hero__promise {
  font-family: "Courier Prime", monospace;
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-br, #F0D79A);
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
  margin: 0.5rem auto 0.6rem;
  max-width: 30ch;
}

/* Parking lot band */
.lot { max-width: 62ch; margin: 0 auto; font-size: 1.08rem; line-height: 1.75;
  color: rgba(245,241,232,.88); }
.lot p { margin-bottom: 1.1rem; }
.lot--left { text-align: left; }
.lot__payoff { color: var(--gold-br, #F0D79A); font-weight: 600; }
.lotq { font-family: var(--font-title), "Playfair Display", serif; font-style: italic;
  font-size: clamp(1.15rem, 4vw, 1.45rem); color: var(--gold-br, #F0D79A);
  margin: 2.4rem auto 1rem; max-width: 34ch; }
.lot__steps-title { font-family: var(--font-title), "Playfair Display", serif;
  font-size: 1.4rem; color: var(--pearl, #F5F1E8); margin: 2.6rem 0 0; }
.steps { list-style: none; max-width: 46ch; margin: 1.4rem auto 0; text-align: left; }
.steps li { margin-bottom: .9rem; color: rgba(245,241,232,.88); line-height: 1.65; }
.steps b { color: var(--gold-br, #F0D79A); }

/* Her unasked questions */
.qa { max-width: 66ch; margin: 0 auto; text-align: left; }
.qa dt { font-family: var(--font-title), "Playfair Display", serif; font-style: italic;
  font-size: 1.2rem; color: var(--gold-br, #F0D79A); margin-top: 1.9rem; }
.qa dd { margin: .45rem 0 0; color: rgba(245,241,232,.86); line-height: 1.7; }

/* Interim reassurance block above the instructor */
.walking-into { margin-top: 3rem; }

@media (max-width: 560px) {
  .lot { font-size: 1rem; }
  .qa dt { font-size: 1.08rem; }
}

/* Interactive states (2026-08-01 UX pass): the calendar surface had NO hover
   feedback — on a laptop every control read as dead. House rule: anything you
   point at lights up. box-shadow/border/color only (no `background:` shorthand)
   so these don't reintroduce the white-hairline wrap guarded above. */
.carnav, .ccard__btn, .pubtog button, .cd, .calmore, .faq summary {
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.carnav:hover:not(:disabled) { border-color: var(--gold); color: #F0D79A;
  box-shadow: 0 0 14px rgba(216,183,106,.25); }
.ccard__btn:hover { box-shadow: 0 0 22px rgba(216,183,106,.5); }
.pubtog button:hover:not([aria-pressed="true"]) { color: #F0D79A; border-color: rgba(216,183,106,.55); }
.cd--on:hover { border-color: var(--gold); box-shadow: 0 0 18px rgba(216,183,106,.3); }
.calmore:hover { border-color: var(--gold); color: #F0D79A; box-shadow: 0 0 14px rgba(216,183,106,.25); }
.faq summary:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  .hero__scroll { animation: none; }
  .checkin-live { animation: none; }
  .checkin-live__dot { animation: none; }
}

/* ============================================================
   Desktop enhancements (mobile is the default)
   ============================================================ */
/* Nav goes horizontal only at 1200px. Seven links plus the Instagram pill plus
   Sign Up do not fit below that: the brand wrapped to two lines and the links
   spilled onto three rows. The burger holds until there is genuinely room.
   Deliberately its OWN query — the 760px block below carries the grid layouts
   (gallery, cards, details, signup) which must still switch at 760. */
@media (min-width: 1200px) {
  .nav { padding: 0 2rem; }
  .nav__links { display: flex; position: static; flex-direction: row; background: none; border: none; padding: 0; }
  .nav__toggle { display: none; }
}

@media (min-width: 760px) {
  .hero__ctas { flex-direction: row; justify-content: center; }
  .hero__ctas .btn { width: auto; }

  .section { padding: 6.5rem 2rem; }

  .cards--3 { grid-template-columns: repeat(3, 1fr); }

  .gallery { grid-template-columns: repeat(3, 1fr); max-width: none; }

  .split { grid-template-columns: 2fr 3fr; gap: 3.5rem; }

  .details { grid-template-columns: repeat(2, 1fr); }

  .signup__grid { grid-template-columns: 1fr 1fr; }

  .bring-grid { grid-template-columns: repeat(3, 1fr); }

  .footer { padding-bottom: 3rem; }

  /* Desktop: sticky bar stays hidden; header CTA covers it */
  .sticky-cta { display: none; }

  /* No sticky bar to clear, so the check-in pill sits in the corner */
  .checkin-live { right: 1.5rem; bottom: 1.5rem; }
}


/* ============================================================
   BODYTALK BOULEVARD — brand layer (rebrand, 2026-09-26)
   Every color below is SAMPLED from the emblem PNG: coral-rose
   #D66757→#FAA7AA→#FEC7C8, peach-gold #FDD7B8→#FEE6C8, ice blue
   #B8FBFF with azure depth #1977B8. Token overrides re-tint the
   whole site; .btbhome rules are the homepage's vibrancy pass
   (approved in the mockup, v11). Appended so it wins the cascade.
   ============================================================ */
:root {
  --btb-rose: #F79A9B;
  --btb-rose-deep: #D66757;
  --btb-peach: #FEE3C2;
  --btb-ice: #B8F6FF;
  --black: #151527;
  --navy: #182342;
  --blue: #6FC4F5;
  --deep-blue: #2E8FD4;
  --aqua: #FFC9D6;
  --gold: #F6CFA0;
  --pearl: #FDF6F0;
  --mist: #D8D6E4;
  --foam: rgba(250, 167, 170, 0.42);
  --foam-strong: rgba(250, 167, 170, 0.6);
  --seaglass: linear-gradient(165deg, rgba(250, 167, 170, 0.15), rgba(30, 13, 24, 0.72));
  --seaglass-deep: linear-gradient(165deg, rgba(250, 167, 170, 0.17), rgba(26, 11, 20, 0.96));
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero__emblem {
  /* scales with BOTH width and height (emblem is 1.78:1), so it never
     crowds a phone in landscape or a short laptop screen */
  display: block; height: auto; max-width: 100%;
  width: min(640px, 90vw, 89vh); width: min(640px, 90vw, 89svh);
  margin: 0 auto 0.4rem;
  filter: drop-shadow(0 10px 38px rgba(0, 0, 0, 0.6));
}
.hero__emblem--ev { width: min(560px, 88vw, 80vh); width: min(560px, 88vw, 80svh); }
.btb-talk { color: var(--btb-rose); }
.btb-blvd {
  background: linear-gradient(100deg, var(--btb-peach) 0%, var(--btb-rose) 50%, var(--btb-ice) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btb-with {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: 1.25em; letter-spacing: 0; text-transform: none;
  color: var(--btb-peach); margin-left: 0.3em; white-space: nowrap;
}
@media (max-width: 900px) { .btb-with { display: none; } }
.btbhome .btn--blue, .btbhome .nav__cta, .btbhome .btn--dark {
  background: linear-gradient(100deg, #FEE6C8 0%, #FAA7AA 48%, #B8FBFF 100%);
  color: #3A1417;
  box-shadow: 0 0 16px rgba(214, 103, 87, 0.4), 0 0 30px rgba(184, 251, 255, 0.28), 0 4px 18px rgba(253, 215, 184, 0.3);
}
.btbhome .btn--blue:hover, .btbhome .nav__cta:hover, .btbhome .btn--dark:hover {
  color: #3A1417;
  box-shadow: 0 0 22px rgba(214, 103, 87, 0.6), 0 0 42px rgba(184, 251, 255, 0.42), 0 6px 24px rgba(253, 215, 184, 0.45);
}
.btbhome .btn--ghost {
  background: linear-gradient(165deg, rgba(250, 167, 170, 0.26), rgba(30, 13, 24, 0.75));
}
.btbhome .hero__eyebrow { color: var(--btb-rose); }
.btbhome .hero__tag { color: var(--btb-peach); }
.btbhome .section--black {
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(250, 167, 170, 0.16), transparent 52%),
    radial-gradient(120% 90% at 8% 100%, rgba(184, 246, 255, 0.14), transparent 55%),
    #151527;
}
.btbhome .section--navy {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(254, 227, 194, 0.15), transparent 52%),
    radial-gradient(120% 95% at 92% 100%, rgba(111, 196, 245, 0.2), transparent 55%),
    #182342;
}
.btbhome .section--band {
  background:
    radial-gradient(ellipse 85% 100% at 50% 100%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(120deg, #C67A45 0%, #C2557E 45%, #2E77C9 100%);
}
.btbhome .section__title {
  background: linear-gradient(100deg, #FEE6C8 8%, #FAA7AA 48%, #B8FBFF 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btbhome .section--band .section__title {
  background: linear-gradient(100deg, #FFF3DC 10%, #FFD9DB 55%, #DFF7FF 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}