/* Core and Rhythm v6.0.0 (2026-10-20)
   "Moon and rhythm": the crescent and vine from Angélique's logo carry the site.
   Colours come from her own material: logo teal, feather magenta and turquoise,
   the infographic's gold and plum, cream paper. Phone first. */

:root {
  --night: #1c0e25;
  --plum: #2a1536;
  --plum-2: #3a1d4a;
  --violet: #7a3a96;
  --ink: #2b2030;
  --ink-soft: #5a4d5e;
  --paper: #fbf6ef;
  --cream: #f4ece2;
  --sand: #eadfce;
  --teal: #0fa4a5;
  --teal-glow: #2fd0d0;
  --teal-ink: #0a7273;
  --magenta: #e0008a;
  --magenta-ink: #b0006c;
  --gold: #d2a24c;
  --gold-soft: #ecd29a;
  --gold-ink: #8a6418;
  --on-dark: #f6efe6;
  --on-dark-soft: #cdbfcf;
  --display: 'Marcellus', 'Times New Roman', serif;
  --voice: 'Cormorant Garamond', Georgia, serif;
  --body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(18px, 5vw, 56px);
  --nav-h: 52px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 1.125rem; line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; margin: 0; letter-spacing: 0.02em; }
p { margin: 0 0 1em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--night); padding: 8px 14px; border-radius: 4px; }
.skip:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Menu: words in a night band, "Classes" opens along a crescent ---------- */
.topnav {
  position: sticky; top: 0; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.4vw, 38px);
  padding: 0 12px;
  background: rgba(28,14,37,0.96);
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.topnav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,14,37,0.5), rgba(28,14,37,0));
}
.topnav a, .nav-btn, .lang-btn { color: var(--on-dark); text-decoration: none; transition: color .3s ease; }
.topnav a:hover, .nav-btn:hover, .lang-btn:hover, .nav-work.open .nav-btn { color: var(--gold-soft); }
.topnav .is-here { color: var(--gold-soft); }
.nav-home, .nav-res { display: none; }
.nav-brand { display: none; }
.nav-work { position: relative; }
.nav-btn, .lang-btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 10px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55em;
}
/* v6.0.2 (Mat): moons instead of leaves. A moon is a cream disc; an inset shadow in the night colour slides
   off it from the left, so it waxes: dark, crescent, half, full. Same idea as the back-to-top moon. */
.nav-btn::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fbf3e4;
  box-shadow: inset 6.5px 0 0 0 var(--night), 0 0 0 1px rgba(236,210,154,.55), 0 0 0 0 rgba(251,243,228,0);
  transition: box-shadow .9s var(--ease);
}
.nav-work.open .nav-btn::after { box-shadow: inset 0 0 0 0 var(--night), 0 0 0 1px rgba(236,210,154,.55), 0 0 10px 1px rgba(251,243,228,.55); }
.lang-btn { color: var(--gold-soft); }
.lang-btn .long { display: none; }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 15rem;
  padding: 14px 26px 16px 8px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(15,164,165,0.10), transparent 60%), var(--night);
  box-shadow: 0 0 30px 22px var(--night);
  visibility: hidden; clip-path: inset(-20px -60px 100% -60px);
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
}
.nav-work.open .nav-drop { visibility: visible; clip-path: inset(-20px -60px -60px -60px); transition: clip-path .6s var(--ease), visibility 0s; }
.nav-drop .arc { position: absolute; left: 8px; top: 8px; width: 40px; height: 275px; overflow: visible; }
.nav-drop .arc path {
  fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .8s var(--ease);
}
.nav-work.open .nav-drop .arc path { stroke-dashoffset: 0; }
.nav-drop ul { list-style: none; margin: 0; padding: 0; position: relative; }
.nav-drop li { position: relative; height: 44px; opacity: 0; translate: -6px 0; transition: opacity .4s ease, translate .4s ease; }
.nav-drop a { display: flex; align-items: center; height: 44px; white-space: nowrap; letter-spacing: 0.14em; }
.nav-drop li::before {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: #fbf3e4;
  box-shadow: inset 12px 0 0 0 var(--night), 0 0 0 1px rgba(15,164,165,.9), 0 0 0 0 rgba(251,243,228,0);
  transition: box-shadow 1.1s var(--ease);
}
/* items follow the curve of the crescent (v6.0.8: six items; dot centre = arc x + 17px) */
.nav-drop li:nth-child(1), .nav-drop li:nth-child(6) { padding-left: 70px; }
.nav-drop li:nth-child(2), .nav-drop li:nth-child(5) { padding-left: 60px; }
.nav-drop li:nth-child(3), .nav-drop li:nth-child(4) { padding-left: 56px; }
.nav-drop li:nth-child(1)::before, .nav-drop li:nth-child(6)::before { left: 46px; }
.nav-drop li:nth-child(2)::before, .nav-drop li:nth-child(5)::before { left: 36px; }
.nav-drop li:nth-child(3)::before, .nav-drop li:nth-child(4)::before { left: 32px; }
.nav-work.open .nav-drop li { opacity: 1; translate: 0 0; }
.nav-work.open .nav-drop li::before { box-shadow: inset 0 0 0 0 var(--night), 0 0 0 1px rgba(236,210,154,.6), 0 0 10px 1px rgba(251,243,228,.45); }
.nav-work.open .nav-drop li:nth-child(1) { transition-delay: .10s; }
.nav-work.open .nav-drop li:nth-child(1)::before { transition-delay: 0.25s; }
.nav-work.open .nav-drop li:nth-child(2) { transition-delay: .22s; }
.nav-work.open .nav-drop li:nth-child(2)::before { transition-delay: 0.43s; }
.nav-work.open .nav-drop li:nth-child(3) { transition-delay: .34s; }
.nav-work.open .nav-drop li:nth-child(3)::before { transition-delay: 0.61s; }
.nav-work.open .nav-drop li:nth-child(4) { transition-delay: .46s; }
.nav-work.open .nav-drop li:nth-child(4)::before { transition-delay: 0.79s; }
.nav-work.open .nav-drop li:nth-child(5) { transition-delay: .58s; }
.nav-work.open .nav-drop li:nth-child(5)::before { transition-delay: 0.97s; }
.nav-work.open .nav-drop li:nth-child(6) { transition-delay: .70s; }
.nav-work.open .nav-drop li:nth-child(6)::before { transition-delay: 1.15s; }
.nav-work.open .nav-drop li:hover::before { transition-delay: 0s; box-shadow: inset 0 0 0 0 var(--night), 0 0 0 1px var(--gold-soft), 0 0 16px 3px rgba(251,243,228,.8); }

@media (min-width: 760px) {
  :root { --nav-h: 60px; }
  .topnav { font-size: 0.86rem; }
  .nav-home, .nav-res { display: inline; }
  .lang-btn .long { display: inline; }
  .lang-btn .short { display: none; }
}
@media (min-width: 1100px) {
  .topnav { justify-content: center; }
  .nav-brand { display: flex; position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; align-items: center; gap: 10px; }
  .nav-brand img { width: 30px; height: auto; }
  .nav-brand span { font-size: 0.78rem; letter-spacing: 0.2em; color: var(--on-dark-soft); }
  .lang-btn { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-dark);
  background:
    radial-gradient(60% 55% at 78% 45%, rgba(210,162,76,0.20), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(224,0,138,0.16), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(15,164,165,0.18), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--plum) 100%);
  padding: 34px 0 96px;
}
.hero::before { /* a few quiet stars */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 32% 64%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, #fff, transparent),
    radial-gradient(1px 1px at 86% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 92% 78%, #fff, transparent),
    radial-gradient(1px 1px at 46% 88%, #fff, transparent),
    radial-gradient(1px 1px at 22% 44%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 56%, #fff, transparent);
}
.hero-grid { position: relative; display: grid; gap: 40px; align-items: center; }
.hero-words { text-align: center; }
.hero-mark { width: 92px; margin: 0 auto 14px; filter: drop-shadow(0 0 18px rgba(15,164,165,0.35)); }
.brandname { font-family: var(--display); font-size: clamp(1.5rem, 6.4vw, 2.5rem); letter-spacing: 0.2em; color: var(--teal-glow); margin: 0; line-height: 1.15; }
.tagline { font-family: var(--voice); font-style: italic; font-size: 1.35rem; color: #ff6fbf; margin: 6px 0 0; letter-spacing: 0.04em; }
.tagline .dot { color: var(--gold-soft); padding: 0 .3em; }
.drum { font-family: var(--voice); font-style: italic; font-size: 1.2rem; color: var(--gold-soft); margin: 2px 0 0; }
.hero-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto 22px; color: var(--gold); }
.hero-rule::before, .hero-rule::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-rule::after { transform: scaleX(-1); }
.hero-rule i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: inset 4px 0 0 0 var(--plum); }
.paper .hero-rule i, .reach .hero-rule i { box-shadow: inset 4px 0 0 0 var(--night); }
.hero h1 { font-size: clamp(1.9rem, 7vw, 3.1rem); color: #fff; margin-bottom: 16px; }
.hero-body { color: var(--on-dark-soft); max-width: 36rem; margin: 0 auto 26px; font-size: 1.06rem; }
.hero-body strong { color: var(--on-dark); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px;
  padding: 0 28px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: 0.03em;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease, color .3s ease; cursor: pointer; border: 0; font-family: var(--body);
}
.btn-gold { background: linear-gradient(135deg, #e6bd6a, var(--gold)); color: var(--night); box-shadow: 0 6px 22px rgba(210,162,76,0.35); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(210,162,76,0.5); }
.btn-line { color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(236,210,154,0.6); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--gold-soft); color: var(--gold-soft); }
.btn-ink { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43,32,48,0.35); background: transparent; }
.btn-ink:hover { box-shadow: inset 0 0 0 1px var(--magenta-ink); color: var(--magenta-ink); }

/* the portrait sits inside a crescent, like the dancer in her logo; the painting is shown whole */
.hero-portrait { position: relative; width: min(70vw, 440px); margin: 0 auto; aspect-ratio: 1; }
.hero-portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(236,210,154,0.45); }
.hero-portrait .crescent { position: absolute; inset: -14%; width: 128%; height: 128%; z-index: 0; overflow: visible; pointer-events: none; }
.crescent .moon { fill: var(--teal); opacity: 0; transform-origin: 64px 64px; animation: moonin 1.8s var(--ease) .2s forwards; }
.crescent .vine { fill: none; stroke: var(--teal-glow); stroke-width: .5; opacity: .9; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 2s var(--ease) .8s forwards; }
.crescent .leaf { fill: var(--teal-glow); }
@keyframes moonin { from { opacity: 0; transform: rotate(-24deg); } to { opacity: .95; transform: none; } }
.crescent .leaf { opacity: 0; animation: leafin .8s ease forwards; }
.crescent .leaf:nth-of-type(1) { animation-delay: 1.4s; } .crescent .leaf:nth-of-type(2) { animation-delay: 1.6s; }
.crescent .leaf:nth-of-type(3) { animation-delay: 1.8s; } .crescent .leaf:nth-of-type(4) { animation-delay: 2.0s; }
.crescent .leaf:nth-of-type(5) { animation-delay: 2.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes leafin { to { opacity: .85; } }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; }
.hero-wave path { fill: var(--paper); }
.hero-wave .beat { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .7; }

@media (min-width: 1025px) {
  .hero { min-height: calc(100svh - var(--nav-h)); height: calc(100svh - var(--nav-h)); padding: 0; display: flex; align-items: center; }
  .hero > .wrap { height: 100%; }
  .hero-grid { height: 100%; }
  .hero-body { max-width: 40rem; }
  .hero-words { padding-bottom: 76px; max-width: 46rem; margin: 0 auto; }
  .hero h1 { font-size: clamp(2.2rem, 6.4svh, 3.6rem); }
  .hero-mark { width: clamp(80px, 15svh, 150px); }
  .brandname { font-size: clamp(1.6rem, 3vw, 2.7rem); }
  .hero-rule { margin: clamp(10px, 2.4svh, 22px) auto; }
  .hero h1 { font-size: clamp(2rem, 5.2svh, 3.1rem); }
  .hero-body { font-size: clamp(.98rem, 2.1svh, 1.08rem); }
}

/* v6.0.3 (Mat, on his phone): the first screen ends exactly at the bottom of the window on every device,
   and the wave sits just below it, so it only shows once you scroll. Sizes follow the screen height. */
:root { --wave: 56px; }
.hero { height: auto; min-height: calc(100svh - var(--nav-h) + var(--wave)); padding: clamp(10px, 2.6svh, 34px) 0 calc(var(--wave) + clamp(10px, 2.6svh, 34px)); display: flex; align-items: center; }
.hero > .wrap { height: auto; }
.hero-grid { height: auto; }
.hero-wave { height: var(--wave); }
@media (min-width: 1025px) {
  .hero { height: auto; padding-top: clamp(10px, 2.6svh, 34px); }
  .hero > .wrap, .hero-grid { height: auto; }
  .hero-words { padding-bottom: 0; }
}
@media (max-width: 1024px) {
  .hero-mark { width: clamp(52px, 10.5svh, 96px); margin-bottom: clamp(4px, 1.3svh, 14px); }
  .brandname { font-size: clamp(1.25rem, min(6.4vw, 4svh), 2.5rem); }
  .tagline { font-size: clamp(1rem, 2.6svh, 1.35rem); margin-top: 0.4svh; }
  .drum { font-size: clamp(.95rem, 2.3svh, 1.2rem); }
  .hero-rule { margin: clamp(6px, 2svh, 22px) auto; }
  .hero h1 { font-size: clamp(1.5rem, min(7vw, 4.6svh), 3.1rem); margin-bottom: clamp(6px, 1.6svh, 16px); }
  .hero-body { font-size: clamp(.88rem, 2.2svh, 1.06rem); line-height: 1.6; margin-bottom: clamp(12px, 2.6svh, 26px); }
  .hero .ctas .btn { min-height: clamp(44px, 6.2svh, 52px); }
}

/* very short phone screens (small iPhone with browser bars): a little tighter so the buttons still land on the first screen */
@media (max-width: 1024px) and (max-height: 640px) {
  .hero-mark { width: 46px; margin-bottom: 4px; }
  .hero-rule { margin: 6px auto; }
  .hero-body { line-height: 1.5; font-size: .86rem; margin-bottom: 12px; }
  .hero h1 { font-size: 1.45rem; }
  .tagline { font-size: 1rem; } .drum { font-size: .92rem; }
}

/* ---------- Section frames ---------- */
.section { position: relative; padding: 76px 0; }
.paper { background:
  radial-gradient(80% 50% at 50% 0%, rgba(234,223,206,0.7), transparent 70%),
  var(--paper); }
.kicker { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--display); font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 12px; }
.kicker::before, .kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.on-dark .kicker { color: var(--teal-glow); }
.title { text-align: center; font-size: clamp(1.9rem, 6vw, 2.7rem); color: var(--plum); margin-bottom: 18px; }
.on-dark .title { color: #fff; }
.lede { font-family: var(--voice); font-size: 1.32rem; line-height: 1.55; text-align: center; max-width: 40rem; margin: 0 auto 30px; color: var(--ink-soft); }
.lede strong { color: var(--ink); font-weight: 600; }
.on-dark .lede { color: var(--on-dark-soft); }
.on-dark .lede strong { color: var(--on-dark); }
.center { text-align: center; }
.on-dark { color: var(--on-dark); background: linear-gradient(180deg, var(--plum) 0%, var(--night) 100%); }

/* ---------- Three practices: arched moon windows ---------- */
.practices { display: grid; gap: 30px; margin-top: 46px; }
.practice {
  --c: var(--teal); --c-ink: var(--teal-ink);
  position: relative; text-align: center; padding: 74px 26px 34px;
  border-radius: 999px 999px 14px 14px / 190px 190px 14px 14px;
  background:
    radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 75%),
    linear-gradient(180deg, #fffaf3, var(--cream));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 40px rgba(42,21,54,0.08);
  margin-top: 36px;
}
.practice::after { /* a second hairline inside the arch, like a window frame */
  content: ""; position: absolute; inset: 8px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.practice.dance { --c: var(--magenta); --c-ink: var(--magenta-ink); }
.practice.weights { --c: var(--violet); --c-ink: #5f2a77; }
.medal {
  position: absolute; z-index: 1; left: 50%; top: -36px; translate: -50% 0; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; background: var(--night);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px color-mix(in srgb, var(--gold) 70%, transparent), 0 10px 26px rgba(28,14,37,0.3);
}
.medal svg { width: 46px; height: 46px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.practice.dance .medal svg { stroke: #ff5cb8; }
.practice.weights .medal svg { stroke: #c38be0; }
.practice.pilates .medal svg { stroke: var(--teal-glow); }
.practice h3 { font-size: 1.7rem; color: var(--plum); margin-bottom: 4px; }
.three { font-family: var(--voice); font-style: italic; font-size: 1.25rem; color: var(--c-ink); margin-bottom: 14px; }
.practice p:last-child { margin: 0; color: var(--ink-soft); font-size: 1.04rem; }
.practice .gem { display: block; width: 8px; height: 8px; margin: 18px auto 0; transform: rotate(45deg); background: var(--gold); }
@media (min-width: 900px) {
  .practices { grid-template-columns: repeat(3, 1fr); gap: 34px; }
}

/* ---------- In motion: three stills of Ang teaching, framed like the moon windows ---------- */
.motion { display: grid; gap: 18px; margin-top: 56px; }
.motion figure { margin: 0; position: relative; border-radius: 999px 999px 10px 10px / 150px 150px 10px 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(42,21,54,0.14); }
.motion figure::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(236,210,154,0.85); pointer-events: none; }
.motion img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 70%; }
@media (min-width: 760px) {
  .motion { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .motion img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .motion figure:nth-child(2) { translate: 0 28px; }
}

/* ---------- This week: two class tickets ---------- */
.week-intro { font-family: var(--voice); font-style: italic; font-size: 1.28rem; text-align: center; max-width: 40rem; margin: 0 auto 36px; color: var(--on-dark-soft); }
.tickets { display: grid; gap: 22px; }
.ticket {
  --c: var(--teal-glow);
  position: relative; display: grid; grid-template-columns: 92px 1fr; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(236,210,154,0.28);
}
.ticket.fri { --c: #ff5cb8; }
.stub {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px 6px; text-align: center; background: color-mix(in srgb, var(--c) 16%, transparent);
  border-right: 2px dashed rgba(236,210,154,0.35);
}
.stub::before, .stub::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: #241230; }
.stub::before { top: -10px; } .stub::after { bottom: -10px; }
.stub .day { font-family: var(--display); font-size: 1.7rem; letter-spacing: .1em; color: var(--c); line-height: 1; }
.stub .clock { font-size: .78rem; color: var(--on-dark-soft); line-height: 1.3; }
.ticket-body { padding: 20px 20px 22px; }
.ticket h3 { font-size: 1.45rem; color: #fff; margin-bottom: 4px; }
.when { color: var(--gold-soft); font-size: .98rem; margin-bottom: 10px; }
.when em { color: var(--on-dark-soft); }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; padding: 3px 12px; border-radius: 999px; background: rgba(210,162,76,0.18); color: var(--gold-soft); margin: 0 6px 10px 0; }
.pill.next { background: var(--c); color: var(--night); display: none; }
.ticket.is-next .pill.next { display: inline-block; }
.ticket.is-next { box-shadow: inset 0 0 0 1px var(--c), 0 0 34px color-mix(in srgb, var(--c) 22%, transparent); }
.ticket p { color: var(--on-dark-soft); font-size: 1rem; }
.ticket .where { font-size: .95rem; }
.ticket .where strong, .rsvp-label { color: var(--on-dark); }
.rsvp-label { display: block; font-size: .8rem; letter-spacing: .14em; font-weight: 700; margin: 14px 0 10px; }
.rsvp { display: flex; flex-wrap: wrap; gap: 10px; }
.rsvp .btn { min-height: 48px; padding: 0 20px; font-size: .96rem; }
.rsvp .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.place { margin-top: 34px; display: grid; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(236,210,154,0.28); background: rgba(255,255,255,0.04); }
.place img { width: 100%; aspect-ratio: 1070 / 485; object-fit: cover; }
.place-words { padding: 18px 22px 22px; }
.place-words h3 { font-size: 1.25rem; color: #fff; margin-bottom: 4px; }
.place-words p { color: var(--on-dark-soft); margin: 0 0 12px; font-size: 1rem; }
.place-words a.map { color: var(--gold-soft); font-weight: 700; text-underline-offset: 4px; }
/* phones: the stub sits across the top of the ticket */
@media (max-width: 759px) {
  .ticket { grid-template-columns: 1fr; }
  .stub { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 20px; border-right: 0; border-bottom: 2px dashed rgba(236,210,154,0.35); }
  .stub::before, .stub::after { top: auto; bottom: -11px; right: auto; }
  .stub::before { left: -10px; } .stub::after { right: -10px; }
  .stub .clock { font-size: .95rem; }
}
@media (min-width: 760px) {
  .ticket { grid-template-columns: 130px 1fr; }
  .stub .day { font-size: 2.2rem; }
  .stub .clock { font-size: .86rem; }
  .ticket-body { padding: 24px 28px 26px; }
}
@media (min-width: 1025px) {
  .tickets { grid-template-columns: 1fr 1fr; }
  .place { grid-template-columns: 1.3fr 1fr; align-items: center; }
  .place img { height: 100%; }
}

/* ---------- Meet Angélique ---------- */
.about-grid { display: grid; gap: 38px; align-items: start; margin-top: 10px; }
.years { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ring {
  width: 148px; height: 148px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 35%, #fff8e8, var(--cream));
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 7px var(--paper), inset 0 0 0 8px rgba(210,162,76,0.5), 0 12px 30px rgba(42,21,54,0.1);
}
.ring b { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; color: var(--plum); }
.ring span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); line-height: 1.3; padding: 4px 18px 0; }
.seals { display: grid; gap: 12px; margin-top: 26px; }
.seal { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-left: 3px solid var(--teal); background: linear-gradient(90deg, rgba(15,164,165,0.08), transparent); }
.seal.dance { border-color: var(--magenta); background: linear-gradient(90deg, rgba(214,40,140,0.08), transparent); }
.seal.yoga { border-color: var(--violet); background: linear-gradient(90deg, rgba(122,58,150,0.08), transparent); }
.seal svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--gold-ink); stroke-width: 1.5; }
.seal small { display: block; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.seal b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--plum); }
.about-text p { font-size: 1.08rem; }
.about-text strong { color: var(--plum); font-weight: 700; }
.about-text em { font-family: var(--voice); font-size: 1.18em; color: var(--magenta-ink); }
.ritual {
  position: relative; margin: 34px 0 0; padding: 26px 24px 24px 26px; border-radius: 4px;
  background: linear-gradient(135deg, var(--plum), var(--night)); color: var(--on-dark);
}
.ritual::before { content: "\201C"; position: absolute; top: -26px; left: 16px; font-family: var(--voice); font-size: 5.4rem; line-height: 1; color: var(--gold); }
.ritual p { font-family: var(--voice); font-style: italic; font-size: 1.4rem; line-height: 1.45; margin: 0; }
.ritual b { color: #ff7cc6; font-weight: 600; } .ritual b.breath { color: var(--teal-glow); } .ritual b.all { color: var(--gold-soft); }
@media (min-width: 1025px) {
  .about-grid { grid-template-columns: 340px 1fr; gap: 64px; }
  .about-side .portrait-frame { width: 100%; }
  .years { flex-direction: row !important; }
  .ring { width: 150px !important; height: 150px !important; }
  .years { flex-direction: column; align-items: center; }
  .ring { width: 170px; height: 170px; }
}

/* Meet Angélique: her painted portrait, shown whole, in a gold frame with a teal and magenta glow */
.portrait-frame { position: relative; margin: 0 auto 34px; width: min(80vw, 340px); padding: 10px; background: linear-gradient(135deg, #f3dca6, var(--gold) 45%, #b8862f); border-radius: 6px;
  box-shadow: 16px 18px 0 -2px rgba(15,164,165,0.55), -14px -12px 40px rgba(224,0,138,0.22), 0 26px 50px rgba(42,21,54,0.25); }
.portrait-frame::after { content: ""; position: absolute; inset: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
.portrait-frame img { width: 100%; height: auto; border-radius: 2px; }
.reach .ready { font-family: var(--voice); font-style: italic; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.15; color: var(--gold-soft); margin: 0; }

/* ---------- Benefits and belonging ---------- */
.benefits { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; max-width: 980px; }
.benefits li { text-align: center; font-family: var(--display); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); line-height: 1.45; }
.benefits li:last-child { grid-column: 1 / -1; }
.benefits .bicon { width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--gold), 0 0 24px rgba(210,162,76,0.18); }
.benefits svg { width: 32px; height: 32px; fill: none; stroke: var(--gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefits li > span:last-child { display: block; }
/* phones: one benefit per line, icon beside the words, so no label has to break */
@media (max-width: 759px) {
  .benefits { grid-template-columns: 1fr; max-width: 330px; gap: 14px; }
  .benefits li { display: flex; align-items: center; gap: 16px; text-align: left; }
  .benefits .bicon { flex: none; width: 52px; height: 52px; margin: 0; }
  .benefits svg { width: 26px; height: 26px; }
}
.belong { text-align: center; margin-top: 56px; }
.belong p { font-family: var(--display); font-size: clamp(1.4rem, 5.4vw, 2.3rem); letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; margin: 0; color: #fff; }
.belong .script { font-family: var(--voice); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: clamp(1.7rem, 6vw, 2.5rem); color: #ff7cc6; margin-top: 8px; }
@media (min-width: 760px) {
  .benefits { grid-template-columns: repeat(5, 1fr); }
  .benefits li:last-child { grid-column: auto; }
}

/* ---------- Resources ---------- */
.res-grid { display: grid; gap: 26px; margin-top: 36px; }
.res { position: relative; display: grid; gap: 18px; text-decoration: none; color: inherit; padding: 26px; border-radius: 6px; background: #fffaf3; box-shadow: 0 16px 40px rgba(42,21,54,0.08); transition: transform .35s var(--ease), box-shadow .35s ease; cursor: pointer; text-align: left; font: inherit; border: 0; width: 100%; }
.res:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(42,21,54,0.14); }
.res h3 { font-size: 1.5rem; color: var(--plum); margin-bottom: 6px; }
.res p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 14px; }
.res .go { font-weight: 700; color: var(--magenta-ink); letter-spacing: .02em; }
/* the dictionary as a bound book: a spine down the left and a mono label */
.res.book { padding-left: 40px; box-shadow: inset 14px 0 0 var(--plum), inset 17px 0 0 var(--gold), 0 16px 40px rgba(42,21,54,0.08); }
.res.book .label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); }
.res.poster { grid-template-columns: 1fr; }
.res.poster .thumb { background: var(--night); padding: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(210,162,76,0.5); }
.res.poster .thumb img { width: 100%; max-width: 260px; margin: 0 auto; }
@media (min-width: 900px) {
  .res-grid { grid-template-columns: 1fr 1.2fr; align-items: stretch; }
  .res.poster { grid-template-columns: 200px 1fr; align-items: center; }
}

/* infographic viewer */
.viewer { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96svh; }
.viewer::backdrop { background: rgba(20,9,27,0.88); }
.viewer img { max-height: 92svh; width: auto; max-width: 96vw; border-radius: 4px; }
.viewer .close { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--gold); color: var(--night); font-size: 1.6rem; line-height: 1; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 36px; }
.form-card { position: relative; padding: 28px 22px; border-radius: 16px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(236,210,154,0.28); }
.form-card::before { content: ""; position: absolute; top: -1px; left: 26px; right: 26px; height: 2px; background: linear-gradient(90deg, transparent, var(--teal-glow), var(--gold), #ff5cb8, transparent); }
.field { margin-bottom: 22px; }
.field label { display: block; font-family: var(--display); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--on-dark); background: rgba(255,255,255,0.06);
  border: 0; border-bottom: 1px solid rgba(236,210,154,0.45); border-radius: 6px 6px 0 0; padding: 14px 14px;
  transition: border-color .3s ease, background .3s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; background: rgba(255,255,255,0.1); border-bottom-color: var(--teal-glow); }
.field ::placeholder { color: rgba(205,191,207,0.7); }
.hp { position: absolute; left: -9999px; }
.form-card .btn { width: 100%; }
.reach { text-align: center; }
.reach img { width: 120px; margin: 0 auto 18px; opacity: .95; }
.reach .drum { font-size: 1.4rem; }
.reach .mail { display: inline-block; margin-top: 18px; color: var(--teal-glow); font-weight: 700; text-underline-offset: 5px; word-break: break-all; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 60px; }
  .form-card { padding: 36px 34px; }
}

/* ---------- Footer ---------- */
.foot { background: #140a1b; color: var(--on-dark-soft); padding: 46px 0 40px; text-align: center; font-size: .95rem; }
.foot img { width: 64px; margin: 0 auto 12px; }
.foot .fname { font-family: var(--display); letter-spacing: .24em; color: var(--teal-glow); font-size: 1rem; margin-bottom: 6px; }
.foot .motto { font-family: var(--display); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin: 16px auto 18px; max-width: 34rem; line-height: 1.8; }
.foot a { color: var(--on-dark); text-underline-offset: 4px; }
.foot .legal { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Moon button: fills from new to full as you scroll ---------- */
.moonbtn {
  position: fixed; right: 16px; bottom: 18px; z-index: 25; width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(28,14,37,0.9); box-shadow: 0 0 0 1px rgba(236,210,154,0.5), 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .5s ease, translate .5s ease;
}
.moonbtn.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.moonbtn svg { width: 100%; height: 100%; }
.moonbtn .lit { fill: var(--gold-soft); }
.moonbtn .shade { fill: #1c0e25; }
.moonbtn .rim { fill: none; stroke: rgba(236,210,154,0.6); stroke-width: 1; }
.moonbtn:hover .lit { fill: #fff3d4; }

/* ---------- Reveal on scroll (gentle) ---------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s var(--ease); }
.rise.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- Plain pages (privacy, terms, thank you) ---------- */
.page-head { background: linear-gradient(180deg, var(--night), var(--plum)); color: var(--on-dark); text-align: center; padding: 48px 0 70px; position: relative; overflow: hidden; }
.page-head h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); color: #fff; }
.page-head .dates { font-family: var(--voice); font-style: italic; color: var(--gold-soft); font-size: 1.15rem; margin-top: 8px; }
.prose { max-width: 46rem; margin: 0 auto; padding: 56px var(--gutter) 70px; }
.prose h2 { font-size: 1.45rem; color: var(--plum); margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--magenta-ink); }
.thanks { min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; padding: 40px var(--gutter); text-align: center; }
.thanks .card { max-width: 34rem; }
.thanks img { width: 96px; margin: 0 auto 18px; }
.thanks h1 { font-size: clamp(2rem, 7vw, 2.8rem); color: #fff; margin-bottom: 8px; }
.thanks .lede { color: var(--gold-soft); }
.thanks p { color: var(--on-dark-soft); }
.thanks .mail { color: var(--teal-glow); font-weight: 700; }

/* ---------- v6.0.5: photo shoot strip + gallery ---------- */
.motion img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
.gallery { margin: 8px 0 64px; }
.gal { columns: 2 150px; column-gap: 12px; }
.gal figure { margin: 0 0 12px; break-inside: avoid; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.28); outline: 1px solid rgba(236,210,154,0.35); outline-offset: -6px; }
.gal img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  .motion img { object-position: 50% 50%; }
  .gal { columns: 3; column-gap: 20px; }
  .gal figure { margin-bottom: 20px; }
}

/* v6.0.7 (Oct 24): collaboration card above the footer. Night plum panel, gold line, teal title. */
.collab{box-sizing:border-box;width:calc(100% - 32px);max-width:640px;margin:64px auto 48px;padding:30px clamp(20px,4vw,36px) 26px;text-align:center;color:var(--cream);background:linear-gradient(160deg,var(--plum),var(--night));border:1px solid rgba(210,162,76,.35);border-top:3px solid var(--gold);border-radius:18px;box-shadow:0 18px 40px -26px rgba(28,14,37,.8)}
.collab-kick{margin:0 0 6px;font-size:.8125rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.collab-title{margin:0 0 12px;font-family:var(--display);font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);line-height:1.25;letter-spacing:.04em;color:var(--teal-glow)}
.collab-text{margin:0 auto 16px;max-width:34rem;font-size:1rem;line-height:1.65;color:rgba(244,236,226,.88)}
.collab-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;margin:0;font-size:.95rem}
.collab-links a{color:var(--gold);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(210,162,76,.45)}
.collab-links a::after{content:" \2192"}
.collab-links a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.collab a:focus-visible{outline:2px solid var(--teal-glow);outline-offset:3px;border-radius:3px}