/* ═══════════════════════════════════════════════════════════════════════
   birthday-teen-glow-card-glow-note — styles.css
   "Glow Note" — a neon invitation card for a teen birthday party.

   Palette (deep-space violet-black + hot neon — shared with the flyer):
     space    #07030F · #0D0720 · panel #120A26 · raised #1A0F33
     neon pink #FF2E88 · neon cyan #2BE4FF · neon purple #A45CFF
     neon lime #C6FF3D · neon yellow #FFE14D
     ink #F3EFFF (near-white) · muted lavender #A99BCB

   Layout: one 100dvh shell — masthead / tabs / active panel / foot.
   Only the active panel scrolls (html.js gates this; without JS the page
   reads as a normal scrolling document).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --space-0: #07030F;
  --space-1: #0D0720;
  --panel: #120A26;
  --panel-2: #1A0F33;
  --line: rgba(169, 155, 203, 0.18);
  --line-strong: rgba(169, 155, 203, 0.34);

  --neon-pink: #FF2E88;
  --neon-pink-soft: #FF7FB8;
  --neon-cyan: #2BE4FF;
  --neon-purple: #A45CFF;
  --neon-lime: #C6FF3D;
  --neon-yellow: #FFE14D;

  --ink: #F3EFFF;
  --muted: #A99BCB;
  --error: #FF6B6B;

  /* type */
  --font-display: "Bungee", "Arial Black", sans-serif;
  --font-label: "Chakra Petch", "Arial", sans-serif;
  --font-ui: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* shape */
  --radius: 16px;
  --shadow-glow-pink: 0 0 22px rgba(255, 46, 136, 0.55), 0 0 60px rgba(255, 46, 136, 0.28);
  --shadow-glow-cyan: 0 0 22px rgba(43, 228, 255, 0.5), 0 0 60px rgba(43, 228, 255, 0.25);
  --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, #150B2E 0%, var(--space-1) 48%, var(--space-0) 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── the shell ─────────────────────────────────────────────────────────── */
/* JS mode: one 100dvh app with a fixed chrome and a single scrolling
   panel. Without JS this collapses to a normal scrolling document and
   every panel reads in order (progressive enhancement). */
html.js .app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

html:not(.js) .app { height: auto; overflow: visible; display: block; }
html:not(.js) .panels { height: auto; overflow: visible; }
html:not(.js) .panel { display: block; position: static; overflow: visible; }
html:not(.js) .tabs { display: none; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(14px, 3vw, 28px);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(13, 7, 32, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.masthead__brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.masthead__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.6), var(--shadow-glow-pink);
}
.masthead__mark svg { display: block; }

.masthead__text { min-width: 0; line-height: 1.25; }
.masthead__top {
  display: block;
  font: 600 9.5px var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}
.masthead__name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--neon-pink);
  text-shadow: 0 0 10px rgba(255, 46, 136, 0.7), 0 0 26px rgba(255, 46, 136, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__name i { font-style: normal; color: var(--neon-yellow); padding: 0 2px; }

.masthead__actions { display: flex; gap: 8px; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(18, 10, 38, 0.85);
  color: var(--muted);
  font: 500 13px var(--font-ui);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.chip-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 16px rgba(43, 228, 255, 0.25); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn.is-done { border-color: var(--neon-lime); color: var(--neon-lime); box-shadow: 0 0 16px rgba(198, 255, 61, 0.3); }

/* ── tabs ──────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  padding: 6px clamp(10px, 2.5vw, 24px) 8px;
  background: rgba(13, 7, 32, 0.78);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font: 600 12px var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.tab:hover { color: var(--neon-cyan); }
.tab[aria-selected="true"] {
  color: var(--space-0);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
  box-shadow: 0 0 20px rgba(255, 46, 136, 0.55);
}

/* ── panels ────────────────────────────────────────────────────────────── */
.panels {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

html.js .panel {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
html.js .panel.is-active { display: block; }
.panel > * { scroll-margin-top: 18px; }

/* content column for tab panels (the invitation uses the full panel) */
.panel-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 28px) clamp(40px, 6vw, 64px);
}

/* ── hero card scene ───────────────────────────────────────────────────── */
.hero-panel {
  position: relative;
  background:
    radial-gradient(80% 55% at 18% 8%, rgba(164, 92, 255, 0.22) 0%, transparent 70%),
    radial-gradient(70% 45% at 85% 22%, rgba(255, 46, 136, 0.2) 0%, transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(43, 228, 255, 0.14) 0%, transparent 70%),
    linear-gradient(180deg, #0D0720 0%, #090419 60%, #07030F 100%);
}

.card-scene {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(48px, 8vh, 76px) clamp(16px, 5vw, 40px) clamp(56px, 8vh, 84px);
}

/* optional photo background — dimmed below the rays/stars so the neon
   ticket stays the star. Delete the div in index.html to hide it.
   Clickable: tap the scene around the card to view the full-size photo. */
.card-scene__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.card-scene__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
/* The render engine swaps an image morph's <img> for a <picture> element
   (webp + jpg sources). Keep the wrapper filling the scene exactly like
   the plain <img> did. */
.card-scene__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.card-scene__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 3, 15, 0.78) 0%, rgba(7, 3, 15, 0.32) 45%, rgba(7, 3, 15, 0.85) 100%);
}

/* rotating sunburst behind the card */
.rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vmin, 780px);
  height: min(120vmin, 780px);
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 46, 136, 0.12) 0deg 6deg,
    transparent 6deg 16deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  pointer-events: none;
  animation: rays-spin 60s linear infinite;
}
@keyframes rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* star field (inline SVG, slice-fitted to the panel) */
.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* CRT scanlines + edge vignette */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.028) 0px,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 4px
  );
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(4, 1, 12, 0.55) 100%);
}

.card-holder {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card__greeting {
  margin: 0 0 16px;
  font: 500 13.5px var(--font-ui);
  letter-spacing: 0.03em;
  color: var(--neon-lime);
  background: rgba(18, 10, 38, 0.8);
  border: 1px solid rgba(198, 255, 61, 0.45);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 0 18px rgba(198, 255, 61, 0.25);
}
.card__greeting b { font-weight: 700; }

/* ── the ticket ────────────────────────────────────────────────────────── */
.ticket {
  position: relative;
  width: 100%;
  border-radius: 22px;
  padding: 22px 26px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255, 46, 136, 0.55);
  box-shadow:
    var(--shadow-card),
    0 0 34px rgba(255, 46, 136, 0.35),
    inset 0 0 0 1px rgba(164, 92, 255, 0.12);
  text-align: center;
}

/* inner hairline frame */
.ticket::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 15px;
  border: 1px dashed rgba(43, 228, 255, 0.35);
  pointer-events: none;
}

/* perforation + notches at the ticket waist */
.ticket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  border-top: 2px dashed rgba(169, 155, 203, 0.4);
}
.ticket .ticket__waist {
  position: absolute;
  top: calc(52% - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #090419;
  border: 2px solid rgba(169, 155, 203, 0.4);
  z-index: 2;
}
.ticket .ticket__waist--l { left: -13px; }
.ticket .ticket__waist--r { right: -13px; }

.ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.ticket__tag {
  font: 700 11px var(--font-label);
  letter-spacing: 0.3em;
  color: var(--neon-yellow);
  text-shadow: 0 0 10px rgba(255, 225, 77, 0.6);
}
.ticket__barcode {
  display: block;
  width: 74px;
  height: 20px;
  opacity: 0.9;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 4px,
    var(--ink) 4px 5px,
    transparent 5px 8px,
    var(--ink) 8px 11px,
    transparent 11px 13px,
    var(--ink) 13px 14px,
    transparent 14px 18px
  );
}

.ticket__kicker {
  position: relative;
  z-index: 1;
  margin: 26px 0 6px;
  font: 600 12px var(--font-label);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(43, 228, 255, 0.6);
}

.ticket__title {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 12vw, 72px);
  line-height: 1.04;
  color: #FFE9F4;
  text-shadow:
    0 0 6px #fff,
    0 0 16px var(--neon-pink),
    0 0 34px var(--neon-pink),
    0 0 70px rgba(255, 46, 136, 0.85);
  animation: neon-flicker 6s infinite;
}
.ticket__title-num {
  color: var(--neon-yellow);
  text-shadow:
    0 0 6px #fff,
    0 0 16px var(--neon-yellow),
    0 0 34px var(--neon-yellow),
    0 0 70px rgba(255, 225, 77, 0.85);
}
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.82; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

.ticket__line {
  position: relative;
  z-index: 1;
  margin: 12px auto 0;
  max-width: 30em;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* optional birthday portrait — neon-ringed round avatar on the ticket.
   Delete the figure in index.html to hide it. Sits above the perforation
   (z-index 1) so the dashed stub line passes behind it. Clickable: tap it
   to view the portrait full size (zoom badge shows on hover / touch). */
.ticket__photo {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  width: clamp(84px, 22vw, 96px);
  cursor: zoom-in;
}
.ticket__photo:focus-visible { outline: none; }
.ticket__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 46, 136, 0.65);
  box-shadow:
    0 0 0 3px rgba(7, 3, 15, 0.9),
    0 0 22px rgba(255, 46, 136, 0.45);
  transition: box-shadow 0.2s, transform 0.2s;
}
.ticket__photo:hover img,
.ticket__photo:focus-visible img {
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px rgba(7, 3, 15, 0.9),
    0 0 0 4px rgba(43, 228, 255, 0.6),
    0 0 28px rgba(255, 46, 136, 0.6);
}
.ticket__photo-zoom {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(7, 3, 15, 0.88);
  border: 1px solid rgba(43, 228, 255, 0.65);
  color: var(--neon-cyan);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
}
.ticket__photo:hover .ticket__photo-zoom,
.ticket__photo:focus-visible .ticket__photo-zoom {
  opacity: 1;
  transform: scale(1);
}
/* touch: no hover — keep the affordance visible */
@media (hover: none) {
  .ticket__photo-zoom { opacity: 1; transform: scale(1); }
}

.ticket__rows {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  display: grid;
  gap: 9px;
  text-align: left;
  padding-top: 18px;
  border-top: 1px dashed rgba(43, 228, 255, 0.3);
}
.ticket__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
}
.ticket__row dt {
  flex: none;
  font: 600 10.5px var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-purple);
}
.ticket__row dd { margin: 0; color: var(--ink); text-align: right; }

.ticket__hashtag {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  font: 600 12.5px var(--font-label);
  letter-spacing: 0.14em;
  color: var(--neon-purple);
  text-shadow: 0 0 12px rgba(164, 92, 255, 0.7);
}

.ticket__foot {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(169, 155, 203, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 11px var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticket__dots { color: var(--neon-pink-soft); letter-spacing: 0.35em; }

.card-scene__cta { margin-top: 22px; }

/* ── section head ──────────────────────────────────────────────────────── */
.section-head { text-align: center; margin-bottom: 30px; }
.section-head .kicker {
  margin: 0 0 8px;
  font: 600 11.5px var(--font-label);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(43, 228, 255, 0.5);
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.12;
  color: var(--neon-pink);
  text-shadow: 0 0 14px rgba(255, 46, 136, 0.5), 0 0 40px rgba(255, 46, 136, 0.25);
  text-wrap: balance;
}
.section-head .lede {
  margin: 12px auto 0;
  max-width: 46em;
  font-size: 16.5px;
  color: var(--muted);
  line-height: 1.6;
}
.section-head .lede strong { color: var(--neon-yellow); font-weight: 600; }

/* ── countdown tiles (self-driven; never .count-*) ────────────────────── */
.countdown-tiles { text-align: center; margin-bottom: 34px; }
.countdown-tiles__label {
  margin: 0 0 12px;
  font: 600 11px var(--font-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.tiles {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
}
.tile {
  min-width: clamp(58px, 15vw, 78px);
  padding: 13px 6px 11px;
  border-radius: 14px;
  border: 1px solid rgba(43, 228, 255, 0.4);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 20px rgba(43, 228, 255, 0.18), inset 0 0 24px rgba(43, 228, 255, 0.06);
}
.tile-num {
  display: block;
  font: 600 clamp(22px, 4.6vw, 30px) var(--font-label);
  font-variant-numeric: tabular-nums;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(43, 228, 255, 0.8);
}
.tile-cap {
  display: block;
  font: 600 9.5px var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.countdown-tiles__here {
  margin: 14px 0 0;
  font: 600 17px var(--font-ui);
  color: var(--neon-lime);
}

/* ── block titles / timeline ───────────────────────────────────────────── */
.block-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font: 600 12px var(--font-label);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--neon-purple);
}
.block-title::before,
.block-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 92, 255, 0.6), transparent);
}

.timeline { list-style: none; margin: 0 0 34px; padding: 0; }
.timeline-item {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 13px 4px 13px 0;
  border-bottom: 1px dashed rgba(169, 155, 203, 0.28);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item__time {
  flex: none;
  width: 82px;
  font: 600 15.5px var(--font-label);
  font-variant-numeric: tabular-nums;
  color: var(--neon-pink);
  text-shadow: 0 0 10px rgba(255, 46, 136, 0.5);
}
.timeline-item__text { font-size: 16px; color: var(--ink); }

/* ── venue ─────────────────────────────────────────────────────────────── */
.event-list { display: grid; gap: 14px; margin-bottom: 30px; }
.event-item {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.event-item::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan));
}
.event-item__chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(255, 46, 136, 0.16);
  border: 1px solid rgba(255, 46, 136, 0.5);
  color: var(--neon-pink-soft);
  font: 600 10.5px var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.event-item__title { margin: 10px 0 4px; font: 600 22px var(--font-ui); color: var(--ink); }
.event-item__when { margin: 0; font: 600 13px var(--font-label); color: var(--neon-cyan); }
.event-item__addr { margin: 6px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.event-item__note { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); font-style: italic; }
.event-item__actions { margin-top: 12px; }

/* ── free page (optional "A Note From Us" panel, cockpit-filled) ───────
   One repeatable block per entry: title + free text + OPTIONAL photo. The
   render engine clones rows the host adds and removes the whole section
   when there are none (or when the host toggles the Free Page section
   off), so the tab main.js builds disappears with it — no orphaned
   navigation. The .free-media figure collapses via :empty when its photo
   is empty, so a text-only block still reads cleanly. The photo opens in
   the same full-size viewer as every other photo feature (tap to zoom). */
.free-blocks {
  display: grid;
  gap: clamp(26px, 5vh, 40px);
}
.free-block { margin: 0; }
.free-title {
  margin: 0 0 12px;
  text-align: center;
  font: 500 clamp(21px, 4.5vw, 28px) var(--font-ui);
  color: var(--neon-yellow);
  text-shadow: 0 0 14px rgba(255, 225, 77, 0.45);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-media {
  margin: 0 auto clamp(14px, 3vmin, 20px);
  max-width: 460px;
  cursor: zoom-in;
}
.free-media:empty { display: none; }   /* text-only block: no photo, no gap */
.free-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card), 0 0 22px rgba(164, 92, 255, 0.18);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.free-media:hover img,
.free-media:focus-visible img {
  transform: translateY(-2px);
  border-color: var(--neon-pink);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 46, 136, 0.3);
}
.free-content {
  margin: 0 auto;
  max-width: 32em;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ── notes ─────────────────────────────────────────────────────────────── */
.notes {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px dashed rgba(43, 228, 255, 0.5);
  background: rgba(43, 228, 255, 0.06);
}
.note { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.55; }
.note strong { color: var(--neon-cyan); font-weight: 600; }

/* ── moments gallery (optional — delete #panel-moments to hide) ────────── */
/* optional recap film — the video card above the gallery (see README
   "Video"). Delete the .video-block in index.html to hide it, or add
   class="video-off" to <body>. */
.video-block {
  max-width: 520px;
  margin: 0 auto 34px;
  text-align: center;
}
.video-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.video-open:hover,
.video-open:focus-visible {
  border-color: var(--neon-pink);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 46, 136, 0.35);
}
.video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--panel-2);
}
/* play overlay — only once a real URL is set (is-ready); the empty-state
   placeholder SVG already carries its own play glyph + instructions */
.video-play {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(7, 3, 15, 0.24);
  transition: background 0.25s;
}
.video-block.is-ready .video-play { display: grid; }
.video-play::before {
  content: "";
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--neon-pink-soft), var(--neon-pink));
  box-shadow: 0 0 0 4px rgba(7, 3, 15, 0.55), 0 0 30px rgba(255, 46, 136, 0.7);
  transition: transform 0.2s, box-shadow 0.2s;
}
.video-play::after {
  content: "";
  position: absolute;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 21px solid #07030F;
  border-top: 12.5px solid transparent;
  border-bottom: 12.5px solid transparent;
}
.video-open:hover .video-play { background: rgba(7, 3, 15, 0.12); }
.video-open:hover .video-play::before {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(7, 3, 15, 0.55), 0 0 44px rgba(255, 46, 136, 0.9);
}
.video-chip {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(7, 3, 15, 0.78);
  border: 1px solid rgba(43, 228, 255, 0.55);
  font: 600 11px var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.video-chip--empty { display: none; }
.video-block.is-empty .video-chip--play { display: none; }
.video-block.is-empty .video-chip--empty { display: inline-block; }
.video-block.is-empty .video-thumb { opacity: 0.9; }
.video-block__label {
  margin: 10px 0 0;
  font: 600 11px var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── flyer / banner (optional — the poster guests may have seen; see
   README "Flyer"). Delete .flyer-block in index.html to hide it, or add
   class="flyer-off" to <body>. Clickable: tap to view full size. ─────── */
.flyer-block {
  margin: 0 auto 8px;
  max-width: 460px;
  border-radius: 18px;
  cursor: zoom-in;
}
.flyer-block__img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card), 0 0 24px rgba(255, 46, 136, 0.18);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.flyer-block:hover .flyer-block__img,
.flyer-block:focus-visible .flyer-block__img {
  transform: translateY(-2px);
  border-color: var(--neon-pink);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 46, 136, 0.3);
}
.flyer-block__note {
  margin: 0 auto 34px;
  max-width: 460px;
  text-align: center;
  font: 600 10.5px var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── off switches: add class="video-off" / "flyer-off" to <body> ──────── */
body.video-off .video-block,
body.flyer-off .flyer-block,
body.flyer-off .flyer-block__note {
  display: none !important;
}

/* ── moments grid (photo tiles) ───────────────────────────────────────── */
.moments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 16px);
}
.photo-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.photo-card:hover {
  transform: translateY(-3px);
  border-color: var(--neon-pink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 46, 136, 0.3);
}
.photo-card:hover img { transform: scale(1.05); }
.photo-card__cap {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(7, 3, 15, 0.74);
  border: 1px solid rgba(43, 228, 255, 0.45);
  font: 600 10px var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 14px var(--font-ui);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s, filter 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.btn--primary {
  background: linear-gradient(90deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 46, 136, 0.45), 0 0 18px rgba(164, 92, 255, 0.35);
}
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 16px rgba(43, 228, 255, 0.25); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* loading node (driven by the platform script) */
.loading { display: none; text-align: center; color: var(--muted); font-size: 13px; padding: 10px 0 0; }

/* ── RSVP deadline countdown (platform-driven .count-*) ────────────────── */
.rsvp-countdown {
  margin: -6px 0 22px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 46, 136, 0.55);
  background: rgba(255, 46, 136, 0.08);
  text-align: center;
  font-size: 13.5px;
}
.rsvp-countdown__label { margin: 0 0 4px; font: 600 10.5px var(--font-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--neon-pink); }
.rsvp-countdown__nums { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.rsvp-countdown__nums span { color: var(--neon-yellow); font-size: 17px; }

/* ── forms (RSVP + injected guestbook) ─────────────────────────────────── */
.rsvp-form { display: grid; gap: 16px; }

.form-group { display: grid; gap: 6px; }
.form-group label {
  font: 600 12px var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}
.form-group label small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink);
  font: 400 15.5px var(--font-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group textarea { resize: vertical; min-height: 76px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6F6492; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232BE4FF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(43, 228, 255, 0.2), 0 0 18px rgba(43, 228, 255, 0.2);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.form-hint:first-child { margin: 0; }

.error { min-height: 16px; font: 500 12.5px var(--font-ui); color: var(--error); }
.error:empty { display: none; }

.rsvp-extras {
  display: grid;
  gap: 16px;
  padding: 16px 16px 2px;
  border-radius: 14px;
  border: 1px dashed rgba(164, 92, 255, 0.5);
  background: rgba(164, 92, 255, 0.07);
  transition: opacity 0.3s, filter 0.3s;
}

/* decline state: dim party-size + snack fields (visual only — fields stay
   enabled and submission is never intercepted; the platform owns the form) */
form.is-declining .rsvp-extras { opacity: 0.4; filter: grayscale(0.6); }

.declined-note {
  display: none;
  margin: -4px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: #FF9B9B;
  font: 500 15px var(--font-ui);
  text-align: center;
}
form.is-declining .declined-note { display: block; }

/* thank-you / closed states injected by the platform scripts */
.thank-you-message { text-align: center; padding: 26px 12px; }
.thank-you-message h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--neon-lime); text-shadow: 0 0 14px rgba(198, 255, 61, 0.5); }
.thank-you-message p { margin: 4px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ── guestbook (Style A: platform injects form + list into .guestbook-body) ── */
.guestbook-section #guestbookForm input,
.guestbook-section #guestbookForm textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink);
  font: 400 15px var(--font-ui);
}
.guestbook-section #guestbookForm input:focus,
.guestbook-section #guestbookForm textarea:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(43, 228, 255, 0.2);
}
.guestbook-section #guestbookForm textarea { resize: vertical; min-height: 84px; }
.guestbook-section #guestbookForm button[type="submit"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px auto 0;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
  color: #fff !important;
  font: 600 14px var(--font-ui);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255, 46, 136, 0.4);
}
.guestbook-section #guestbookForm button[type="submit"]:hover { filter: brightness(1.08); }

/* injected message list — neutralise the engine's inline scroll box */
.guestbook-section #comments-container {
  margin-top: 28px !important;
  border-top: 1px solid var(--line) !important;
  max-height: none !important;
  overflow: visible !important;
}
.guestbook-section .guestbook-entry {
  padding: 14px 16px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}
.guestbook-section .guestbook-entry h5 { margin: 0 0 4px; font: 600 15px var(--font-ui); color: var(--neon-pink-soft); }
.guestbook-section .guestbook-entry p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.guestbook-section .guestbook-entry small { color: var(--muted); font-size: 12px; }

.guestbook-section .more-guestbook-wrap { text-align: center; margin-top: 18px; }
.guestbook-section #load-more {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 14px var(--font-ui);
  cursor: pointer;
}
.guestbook-section #load-more:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }

/* ── viewer (lightbox — every photo/video feature, zoomable) ──────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(4, 1, 12, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(16px, 4vw, 40px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  margin: 0;
  max-width: min(92vw, 900px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: auto;                 /* zoomed images pan inside here */
  overscroll-behavior: contain;
  cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox__stage { display: block; cursor: zoom-out; }
.lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 14px;
  border: 1px solid rgba(255, 46, 136, 0.5);
  box-shadow: 0 0 40px rgba(255, 46, 136, 0.35);
  object-fit: contain;
  cursor: zoom-in;
  transition: border-radius 0.2s;
}
.lightbox.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  border-radius: 0;
  cursor: zoom-out;
}
.lightbox__caption {
  font: 600 12px var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-align: center;
  flex: 0 0 auto;
}

/* video mode: embedded player + "open the original" link */
.lightbox__video {
  width: 100%;
  max-width: min(94vw, 960px);
  display: grid;
  gap: 12px;
  justify-items: center;
}
.lightbox__video-frame {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 70vh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 46, 136, 0.5);
  box-shadow: 0 0 40px rgba(255, 46, 136, 0.35);
  background: #000;
}
.lightbox__video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox__video-link-row { margin: 0; }
.lightbox__video-link {
  font: 600 12.5px var(--font-label);
  letter-spacing: 0.14em;
  color: var(--neon-cyan);
  text-decoration: none;
  transition: text-shadow 0.2s;
}
.lightbox__video-link:hover { text-shadow: 0 0 12px rgba(43, 228, 255, 0.7); }

.lightbox__close, .lightbox__nav {
  position: fixed;
  appearance: none;
  border: 1px solid var(--line-strong);
  background: rgba(18, 10, 38, 0.9);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.lightbox__close:hover, .lightbox__nav:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 16px rgba(43, 228, 255, 0.3);
}
.lightbox__close {
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}
.lightbox__prev { left: clamp(10px, 2vw, 22px); }
.lightbox__next { right: clamp(10px, 2vw, 22px); }
/* hidden states (author display rules would otherwise beat [hidden]) */
.lightbox__stage[hidden],
.lightbox__video[hidden],
.lightbox__nav[hidden] { display: none !important; }
.lightbox__hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(10px + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font: 600 10.5px var(--font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 239, 255, 0.5);
  pointer-events: none;
}
/* stop the panel behind from scrolling while the viewer is open */
html.lightbox-open .panel.is-active { overflow: hidden; }

/* ── powered-by brand strip (full width) ────────────────────────────────
   A slim full-width line between the panels and the foot: "Powered by
   Kundangi". The engine swaps the brand token for the platform name at
   render; the cockpit's Free Powered By field can override the whole
   line. It is a separate grid row (html.js .app), so it always spans the
   full width. */
.powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 7px 16px 9px;
  border-top: 1px solid var(--line);
  background: rgba(13, 7, 32, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 239, 255, 0.55);
}
.powered-by .link-footer { color: var(--neon-purple); }

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(14px, 3vw, 28px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: rgba(13, 7, 32, 0.9);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.foot::-webkit-scrollbar { display: none; }
.foot__dot { opacity: 0.5; }

/* ── focus visibility (global) ────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* ── reveal-on-scroll (JS adds .is-visible; reduced-motion skips it) ──── */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ── small screens: reclaim vertical space ────────────────────────────── */
@media (max-height: 640px) {
  .masthead { padding-top: 6px; padding-bottom: 6px; }
  .masthead__top { display: none; }
  .foot { display: none; }
  .powered-by { display: none; }
  .card-scene { padding-top: 36px; padding-bottom: 40px; }
  .ticket { padding: 18px 20px 14px; }
  .ticket__kicker { margin-top: 18px; }
}
@media (max-width: 520px) {
  .chip-btn { padding: 8px 10px; }
  .chip-btn__label { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .ticket__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ticket__row dd { text-align: left; }
  .tab { padding: 7px 12px; font-size: 11px; }
  .video-chip { bottom: 10px; padding: 5px 12px; font-size: 10px; }
  .lightbox__hint { display: none; }
}

/* ── moments gallery: 2 columns on phones ─────────────────────────────── */
@media (max-width: 720px) {
  .moments-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation: none !important;
  transition: none !important;
}
html.no-motion [data-reveal] { opacity: 1; transform: none; }

/* ── print: flatten to readable pages ─────────────────────────────────── */
@media print {
  html.js .app { height: auto; display: block; overflow: visible; }
  html.js .panel { display: block !important; overflow: visible !important; position: static; }
  .masthead__actions, .tabs, .foot, .powered-by, .no-print { display: none !important; }
  body { background: #0D0720; }
  .panel-inner { max-width: none; padding: 12px; }
  .hero-panel { background: #0D0720; }
  .rays, .scanlines, .vignette, .card-scene__bg { display: none !important; }
  .card-scene { padding: 20px; }
  .ticket { page-break-inside: avoid; }
  .countdown-tiles, .timeline-item, .event-item, .notes, .photo-card, .ticket__photo, .flyer-block, .video-block, .free-block { page-break-inside: avoid; }
  .video-play { display: none !important; }
  .lightbox__hint { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}