/* ==========================================================================
   DJ idrop  |  site.css
   One stylesheet for every page. Sections:
     1. Tokens (colors, type, spacing)  <- edit these to restyle the site
     2. Base and typography
     3. Header and nav
     4. Buttons and links
     5. Hero (Home)
     6. Next party ticket (Home)
     7. Sections and page layout
     8. Footer
     9. Motion and reduced-motion
   ========================================================================== */


/* 1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Color */
  --black:        #000000;   /* page background, true black (looks best on phone OLED) */
  --surface:      #161616;   /* cards, inputs, menu panel */
  --line:         #2A2A2A;   /* hairlines */
  --orange:       #FF6A00;   /* the one accent. 7.3:1 on black, passes AA for normal text */
  --orange-hot:   #FF8A2B;   /* hover state */
  --orange-glow:  rgba(255, 106, 0, 0.45);
  --orange-dim:   rgba(255, 106, 0, 0.14);
  --white:        #FFFFFF;
  --bone:         #EDE9E3;   /* body text, warm off-white */
  --mute:         #A39E97;   /* secondary text. 6.8:1 on black */

  /* Type
     System stack by default. To switch to a self-hosted font later:
       1. drop the .woff2 files into /assets/fonts/
       2. add @font-face rules at the top of this file
       3. change --font-display and/or --font-body below
     Nothing else in the site needs to change. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (mobile first, fluid) */
  --fs-hero: clamp(2.75rem, 9vw, 5.5rem);
  --fs-1:    clamp(2rem, 6vw, 3.25rem);
  --fs-2:    clamp(1.5rem, 4vw, 2rem);
  --fs-3:    1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --lh-tight: 1.05;
  --lh-body:  1.6;

  /* Spacing (8px rhythm) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 6rem;

  /* Layout */
  --max-w: 64rem;
  --max-prose: 40rem;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --radius: 0.75rem;
  --radius-pill: 999px;
  --nav-h: 4rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
}


/* 2. BASE AND TYPOGRAPHY
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body);
}

main { flex: 1 0 auto; }

img, video, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: lowercase;   /* headings echo the lowercase wordmark */
  color: var(--white);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-3); letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--orange-hot); }

/* Visible focus everywhere. Orange ring on dark, white ring on orange. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-orange :focus-visible,
.btn-primary:focus-visible { outline-color: var(--white); }

::selection { background: var(--orange); color: var(--black); }

html:not(.js) .js-only { display: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-3); top: -3rem;
  background: var(--orange); color: var(--black);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; z-index: 100;
}
.skip-link:focus { top: var(--s-3); }

.text-mute  { color: var(--mute); }
.text-small { font-size: var(--fs-small); }
.text-center { text-align: center; }
.prose { max-width: var(--max-prose); }


/* 3. HEADER AND NAV
   Works with JavaScript off: the mobile menu is a native <details> element.
   ------------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}

.nav-brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--white);
}
.nav-brand img.mascot { width: 2rem; height: auto; }
.nav-brand img.wordmark { height: 2rem; width: auto; }

/* The one mascot micro-interaction: a little bounce and drip on hover/focus */
.nav-brand .mascot { transform-origin: 50% 90%; transition: transform var(--t-med) var(--ease); }
.nav-brand:hover .mascot,
.nav-brand:focus-visible .mascot { animation: mascot-drop 640ms var(--ease); }

@keyframes mascot-drop {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-4px) scale(0.94, 1.08); }
  60%  { transform: translateY(1px) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}

.nav-menu { position: relative; }
/* JS off on a phone: brand on its own row, links wrap underneath */
html:not(.js) .nav { flex-wrap: wrap; padding-bottom: var(--s-2); }
html:not(.js) .nav-menu { flex-basis: 100%; }
.nav-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-weight: 700; color: var(--white); font-size: var(--fs-small);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary .burger { width: 18px; height: 12px; position: relative; }
.nav-menu summary .burger::before,
.nav-menu summary .burger::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--orange); border-radius: 2px;
  transition: transform var(--t-fast) var(--ease);
}
.nav-menu summary .burger::before { top: 0; }
.nav-menu summary .burger::after { bottom: 0; }
.nav-menu[open] summary .burger::before { transform: translateY(5px) rotate(45deg); }
.nav-menu[open] summary .burger::after  { transform: translateY(-5px) rotate(-45deg); }

/* Mobile, JS off: the menu is open and the links sit in a plain row under the summary.
   Mobile, JS on (html.js): the links become a dropdown panel. */
.nav-links {
  list-style: none; margin: 0; padding: var(--s-2) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1);
}
.js .nav-links {
  display: block; padding: var(--s-2);
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  min-width: 13rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.nav-links li { margin: 0; }
.nav-links a {
  display: block; padding: var(--s-2) var(--s-3);
  color: var(--white); text-decoration: none; font-weight: 700; text-transform: lowercase;
  border-radius: calc(var(--radius) - 4px);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-links a:hover { background: var(--orange-dim); color: var(--orange-hot); }
.nav-links a[aria-current="page"] { color: var(--orange); }
.nav-links a.nav-rsvp {
  margin-top: var(--s-2);
  background: var(--orange); color: var(--black); text-align: center;
  border-radius: var(--radius-pill);
}
.nav-links a.nav-rsvp:hover { background: var(--orange-hot); color: var(--black); }

@media (min-width: 46rem) {
  .nav-menu summary { display: none; }
  .nav-links, .js .nav-links {
    position: static; display: flex; align-items: center; gap: var(--s-1);
    min-width: 0; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .nav-links a { padding: var(--s-2) 0.85rem; }
  .nav-links a.nav-rsvp { margin: 0 0 0 var(--s-2); padding: var(--s-2) var(--s-4); }
}


/* 4. BUTTONS AND LINKS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--orange); color: var(--black); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-hot); border-color: var(--orange-hot); color: var(--black);
  box-shadow: 0 0 0 4px var(--orange-dim), 0 0 28px var(--orange-glow); }

.btn-ghost { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn-ghost:hover { color: var(--orange-hot); border-color: var(--orange-hot); box-shadow: 0 0 20px var(--orange-glow); }

/* Black button for use on the orange ticket */
.btn-ink { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-ink:hover { background: #1c1c1c; color: var(--white); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

.btn-lg { min-height: 3.5rem; padding: 1rem 2rem; font-size: 1.15rem; }
.btn-block { width: 100%; }

/* Social links: text pills. Swap in the platforms' official SVG marks later if you want icons. */
.social { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; justify-content: center; }
.social a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--bone); text-decoration: none;
  font-weight: 600; font-size: var(--fs-small);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.social-icon { width: 1.125rem; height: 1.125rem; object-fit: contain; }
/* Monochrome SVG logos are tinted to match the text: white normally, orange on hover */
.social-icon { filter: brightness(0) invert(1); opacity: 0.92; }
.social a:hover .social-icon { filter: brightness(0) saturate(100%) invert(52%) sepia(88%) saturate(2800%) hue-rotate(2deg) brightness(102%) contrast(103%); opacity: 1; }
.social a:hover { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 18px var(--orange-glow); }
.site-footer .social { justify-content: flex-start; }


/* 5. HERO (Home)
   ------------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid; place-items: center;
  padding: var(--s-7) var(--gutter) var(--s-8);
  text-align: center;
  isolation: isolate;
}
.hero-video, .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero-video { opacity: 0; transition: opacity 900ms ease; }
.hero-video.is-playing { opacity: 1; }
.hero::after {
  /* dark overlay for legibility, heavier at the bottom where the ticket sits */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.92) 100%);
}
.hero-inner { max-width: 36rem; display: grid; justify-items: center; gap: var(--s-4); }
@media (max-width: 45.99rem) {
  .hero { min-height: calc(84vh - var(--nav-h)); min-height: calc(84svh - var(--nav-h)); padding-top: var(--s-6); }
}
.hero-logo {
  width: min(62vw, 300px);
  filter: drop-shadow(0 0 14px var(--orange-glow)) drop-shadow(0 0 40px rgba(255,106,0,0.2));
}
.hero-tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem); line-height: 1.3;
  color: var(--bone); text-wrap: balance; margin: 0;
}
.hero-tagline strong { color: var(--orange); font-weight: 800; }


/* 6. NEXT PARTY TICKET (Home)
   The one loud element on the site: solid orange, black type, notched like a ticket.
   ------------------------------------------------------------------------ */
.next {
  position: relative; z-index: 2;
  max-width: 34rem; margin: calc(-1 * var(--s-7)) auto 0;
  padding: 0 var(--gutter);
}
.ticket {
  background: var(--orange); color: var(--black);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem 1.5rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 60px rgba(0,0,0,0.6), 0 0 60px var(--orange-glow);
  /* ticket notches */
  --notch: 14px;
  -webkit-mask:
    radial-gradient(circle at 0 var(--notch-y), transparent var(--notch), #000 calc(var(--notch) + 1px)),
    radial-gradient(circle at 100% var(--notch-y), transparent var(--notch), #000 calc(var(--notch) + 1px));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 var(--notch-y), transparent var(--notch), #000 calc(var(--notch) + 1px)),
    radial-gradient(circle at 100% var(--notch-y), transparent var(--notch), #000 calc(var(--notch) + 1px));
  mask-composite: intersect;
  --notch-y: calc(100% - 4.9rem);
}
.ticket-kicker {
  margin: 0 0 var(--s-1);
  font-size: 1.1rem; font-weight: 700; color: var(--black);
}
.ticket h2 {
  text-transform: none;   /* the party name is a proper name */
  color: var(--black); font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: var(--s-2);
}
.ticket-meta { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: 0.1rem; }
.ticket-meta li { font-weight: 600; font-size: 1.1rem; line-height: 1.4; }
/* Venue line doubles as a map link: black on orange, underlined so it reads as tappable */
.ticket-map {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--black); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.2em; text-decoration-color: rgba(0,0,0,0.35);
}
.ticket-map:hover { color: var(--black); text-decoration-color: var(--black); }
.ticket-map:focus-visible { outline-color: var(--white); }
.ticket-map .pin { flex: none; fill: currentColor; }
.ticket-map.is-plain { text-decoration: none; pointer-events: none; }
.ticket-map.is-plain .pin { display: none; }
.ticket-meta .occasion { font-weight: 500; color: rgba(0,0,0,0.72); font-size: 1rem; }
.ticket-tear {
  border: 0; border-top: 2px dashed rgba(0,0,0,0.35);
  margin: var(--s-3) -1.5rem var(--s-3);
}
.ticket .btn-block { font-size: 1.15rem; }

.next-tba {
  text-align: center; margin: 0; padding: var(--s-4);
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--mute);
}


/* 7. SECTIONS AND PAGE LAYOUT
   ------------------------------------------------------------------------ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-7) 0; }
.section + .section { border-top: 1px solid var(--line); }
.page-head { padding: var(--s-6) 0 var(--s-4); }
.page-head p { color: var(--mute); max-width: 56rem; }

/* Home: three big routes. Text, not cards. */
.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.routes a {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--white);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.1;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-med) var(--ease);
}
.routes li:last-child a { border-bottom: 1px solid var(--line); }
.routes a small {
  font-family: var(--font-body); font-weight: 700; font-size: 1.15rem;
  color: var(--bone); letter-spacing: 0;
}
@media (min-width: 46rem) {
  .routes a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
  .routes a small { text-align: right; max-width: 26rem; font-size: 1.6rem; }
}
.routes a:hover { color: var(--orange); padding-left: var(--s-2); }
.routes a:hover small { color: var(--orange-hot); }

/* Generic card (used on Mixes, Events, Book later) */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-4);
}
.note {
  color: var(--mute); font-size: var(--fs-small);
  border-left: 2px solid var(--orange); padding-left: var(--s-3);
}


/* 8. FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-5);
  color: var(--mute); font-size: var(--fs-small);
}
.footer-grid { display: grid; gap: var(--s-4); }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer-nav a { color: var(--bone); text-decoration: none; font-weight: 600; text-transform: lowercase; }
.footer-nav a:hover { color: var(--orange); }
.footer-meta { display: grid; gap: var(--s-2); }
.footer-meta a { color: var(--bone); }
@media (min-width: 46rem) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
}


/* 9. MOTION AND REDUCED MOTION
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .hero-video { display: none; }          /* poster only; JS also skips play() */
  .hero-poster { display: block; }
}


/* ==========================================================================
   10. PAGE MODULES (added in step 3)
   ========================================================================== */

/* Mixes ------------------------------------------------------------------ */
.mix-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.mix { display: flex; flex-direction: column; gap: var(--s-3); }
.mix h2 { font-size: var(--fs-3); text-transform: none; margin: 0; }
.mix-note { color: var(--mute); margin: 0; }
.mix-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mix-tags li { font-size: 0.8rem; color: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.1rem 0.6rem; }
.mix-player { border-radius: calc(var(--radius) - 4px); overflow: hidden; background: var(--black); }
.mix-player iframe { display: block; width: 100%; height: 120px; border: 0; }
.mix-empty { color: var(--mute); }

/* Merch -------------------------------------------------------------------- */
.merch-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .merch-grid { grid-template-columns: 1fr 1fr; } }
.merch-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.merch-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--black); }
.merch-photo--brand { display: grid; place-items: center; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, var(--orange-dim), transparent 62%), var(--black); }
.merch-photo--brand img { width: 34%; height: auto; filter: drop-shadow(0 0 14px var(--orange-glow)); }
.merch-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); flex: 1; }
.merch-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.merch-head h2 { font-size: var(--fs-3); text-transform: none; margin: 0; }
.merch-title-link { color: var(--white); text-decoration: none; }
.merch-title-link:hover { color: var(--orange-hot); }
.merch-photo-link { display: block; overflow: hidden; }
.merch-photo-link .merch-photo { transition: transform var(--t-med) var(--ease); }
.merch-photo-link:hover .merch-photo { transform: scale(1.03); }
.merch-price { margin: 0; font-weight: 800; font-size: 1.25rem; color: var(--orange); white-space: nowrap; }
.merch-blurb { color: var(--mute); margin: 0; flex: 1; }
.merch-notes { margin-top: var(--s-5); display: grid; gap: var(--s-2);
  color: var(--mute); font-size: var(--fs-small); border-left: 2px solid var(--orange); padding-left: var(--s-3); }
.merch-notes strong { color: var(--bone); }

/* Events ----------------------------------------------------------------- */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.event { display: grid; gap: var(--s-4); }
.event-head h2 { text-transform: none; margin-bottom: var(--s-2); }
.event-meta { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-1); color: var(--mute); }
.event-meta li:first-child { color: var(--orange); font-weight: 700; }
.event-desc { max-width: var(--max-prose); }
.sponsors h3 { font-size: var(--fs-small); color: var(--mute); font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: var(--s-2); }
.sponsor-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sponsor-row a, .sponsor-row span { display: inline-flex; align-items: center; justify-content: center; background: var(--bone); border-radius: calc(var(--radius) - 4px); padding: var(--s-2) var(--s-3); height: 3.5rem; }
.sponsor-row img { max-height: 2.25rem; width: auto; filter: grayscale(1); opacity: 0.85; transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.sponsor-row a:hover img, .sponsor-row a:focus-visible img { filter: none; opacity: 1; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
@media (min-width: 46rem) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); } }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: pointer; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease); }
.gallery button:hover img { transform: scale(1.04); }
.gallery-empty { color: var(--mute); font-size: var(--fs-small); }

/* Lightbox (native <dialog>) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.lightbox::backdrop { background: rgba(0,0,0,0.94); }
.lightbox-inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; touch-action: pan-y; }
.lightbox img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox-btn {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(0,0,0,0.6); color: var(--white); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-btn:hover { border-color: var(--orange); color: var(--orange); }
.lightbox-close { top: var(--s-3); right: var(--s-3); }
.lightbox-prev { left: var(--s-3); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--s-3); top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: absolute; bottom: var(--s-3); left: 0; right: 0; text-align: center; color: var(--mute); font-size: var(--fs-small); padding: 0 4rem; }

/* Forms (Book) ----------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); max-width: 36rem; }
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 600; }
.field .hint { color: var(--mute); font-size: var(--fs-small); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface); color: var(--bone); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 1rem; font: inherit; min-height: 3rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--orange) 50%), linear-gradient(135deg, var(--orange) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 50%, calc(100% - 1rem) 50%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--orange); outline-offset: 2px; border-color: var(--orange); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #FF4D4D; }
.field .error { color: #FF8080; font-size: var(--fs-small); }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }   /* honeypot */
.form-status { border-radius: var(--radius); padding: var(--s-3) var(--s-4); }
.form-status.ok { background: var(--orange-dim); border: 1px solid var(--orange); color: var(--bone); }
.form-status.err { background: rgba(255,77,77,0.12); border: 1px solid #FF4D4D; color: var(--bone); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* About ------------------------------------------------------------------ */
.about-grid { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .about-grid:has(.about-photos:not([hidden])) { grid-template-columns: 3fr 2fr; align-items: start; } }
.about-photos { display: grid; gap: var(--s-3); }
.about-photos figure { margin: 0; }
.about-photos img { width: 100%; border-radius: var(--radius); }
.about-photos figcaption { color: var(--mute); font-size: var(--fs-small); margin-top: var(--s-1); }
.about-bio p { font-size: 1.15rem; }

/* RSVP page: ticket alone, centered, no scrolling needed ------------------- */
.rsvp-stage {
  display: grid; justify-items: center; padding: var(--s-4) var(--gutter) var(--s-7);
}
.rsvp-inner { width: 100%; max-width: 34rem; display: grid; gap: var(--s-3); justify-items: center; }
.rsvp-logo { width: min(34vw, 150px); filter: drop-shadow(0 0 14px var(--orange-glow)) drop-shadow(0 0 40px rgba(255,106,0,0.2)); margin-bottom: var(--s-1); }
.rsvp-inner .ticket { width: 100%; }
.rsvp-inner .ticket h1 { color: var(--black); font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: var(--s-2); text-transform: none; }
.ticket-soon-text { margin: 0 0 var(--s-2); font-weight: 500; color: rgba(0,0,0,0.75); }
.rsvp-listen { margin: 0; text-align: center; }

/* RSVP splash and 404 ----------------------------------------------------- */
.splash { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.splash-inner { display: grid; justify-items: center; gap: var(--s-4); max-width: 30rem; }
.splash-logo { width: min(50vw, 200px); filter: drop-shadow(0 0 14px var(--orange-glow)); }
.splash-mascot { width: min(40vw, 160px); filter: drop-shadow(0 0 14px var(--orange-glow)); }
.splash h1 { text-transform: none; }
.splash p { color: var(--mute); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Compact "next party" strip (Events page): a one-line ticket that links to /rsvp/ ---------- */
.next-strip {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kicker cta" "name cta" "date cta";
  align-items: center; column-gap: var(--s-3); row-gap: 0.1rem;
  background: var(--orange); color: var(--black); text-decoration: none;
  border-radius: var(--radius); padding: 0.9rem 1.25rem; margin: var(--s-2) 0 var(--s-4);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.5), 0 0 30px var(--orange-dim);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.next-strip:hover { color: var(--black); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 14px 34px rgba(0,0,0,0.55), 0 0 44px var(--orange-glow); }
.next-strip-kicker { grid-area: kicker; font-size: var(--fs-small); font-weight: 700; }
.next-strip-name { grid-area: name; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; }
.next-strip-date { grid-area: date; font-weight: 600; font-size: var(--fs-small); }
.next-strip-cta { grid-area: cta; background: var(--black); color: var(--white); border-radius: var(--radius-pill); padding: 0.6rem 1.1rem; font-weight: 800; white-space: nowrap; }
.next-strip:focus-visible { outline-color: var(--white); }