/* =========================================================
   DJ Archi: black, gold and silver
   ========================================================= */

:root {
  color-scheme: dark;

  /* Palette */
  --black: #000000;
  --velvet: #0d0a06;          /* warm raised surface */
  --field: #0b0b0b;
  --line: #2b2722;
  --gold: #e2be6a;            /* gold text */
  --gold-deep: #a07a34;       /* rules and borders */
  --gold-pale: #f7e6b4;       /* highlights and focus */
  --silver: #c7cbd1;
  --silver-dim: #8b9198;
  --white: #ffffff;
  --text: rgba(255, 255, 255, 0.86);
  --error: #ff9b8f;

  --gold-foil: linear-gradient(100deg, #8c6a2c 0%, #d9b25f 22%, #fff3cc 42%, #e2be6a 58%, #a07a34 80%, #e2be6a 100%);
  --silver-foil: linear-gradient(100deg, #7d838b 0%, #f4f6f8 45%, #aeb3ba 70%, #6e747b 100%);

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;

  /* Space (8pt) */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: 8rem;

  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.5rem;
  --section-pad: clamp(4.5rem, 11vw, 8rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --fast: 180ms;
  --medium: 320ms;
  --slow: 900ms;

  /* Layers */
  --z-content: 1;
  --z-header: 50;
  --z-dialog: 100;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

strong { color: var(--gold); font-weight: 600; }

h1, h2, h3, p { margin: 0; }

ul[role="list"] { list-style: none; margin: 0; padding: 0; }

[hidden] { display: none !important; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--gold-pale);
  outline-offset: 3px;
}

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

.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;
  top: var(--s1);
  left: var(--s1);
  z-index: calc(var(--z-header) + 1);
  padding: var(--s1) var(--s2);
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type treatments ---------- */

.display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--white);
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}

.gold { color: var(--gold); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gold {
    background: var(--gold-foil);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: clamp(2.4rem, 7vw, 5rem);
}
.section-title .serif { font-size: 0.62em; }

.lead {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--white);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 0.3em;
  transition: color var(--fast) var(--ease-out);
}
.text-link:hover { color: var(--gold); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  font-variation-settings: "wdth" 112;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out), box-shadow var(--medium) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-gold {
  background: var(--gold-foil);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--black);
  transition: background-position var(--slow) var(--ease-out), transform var(--fast) var(--ease-out),
    box-shadow var(--medium) var(--ease-out);
}
.btn-gold:hover {
  background-position: 100% 50%;
  box-shadow: 0 0 2rem rgba(226, 190, 106, 0.28);
}

.btn-outline {
  border-color: rgba(199, 203, 209, 0.55);
  color: var(--white);
  background: transparent;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.875rem; }
.btn-lg { min-height: 3.5rem; padding: 0 2.5rem; font-size: 1rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(199, 203, 209, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn:active { transform: scale(0.94); }

/* Sound-bar motif from the logo banners, used for loading states */
.mini-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 1.25rem;
}
.mini-bars span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(0.4);
  animation: mini-eq 900ms var(--ease-out) infinite alternate;
}
.mini-bars span:nth-child(2) { animation-delay: -300ms; }
.mini-bars span:nth-child(3) { animation-delay: -600ms; }
.mini-bars span:nth-child(4) { animation-delay: -150ms; }
.mini-bars span:nth-child(5) { animation-delay: -450ms; }

@keyframes mini-eq {
  to { transform: scaleY(1); }
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color var(--medium) var(--ease-out), border-color var(--medium) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.82);
  border-bottom-color: rgba(160, 122, 52, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: var(--header-h);
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  transition: color var(--fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  margin-right: auto;
}
.brand-mark { width: 3.25rem; height: auto; }

.nav { display: flex; align-items: center; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--medium) var(--ease-out), opacity var(--fast);
}
.nav-toggle-lines { position: relative; }
.nav-toggle-lines::before,
.nav-toggle-lines::after { content: ""; position: absolute; left: 0; }
.nav-toggle-lines::before { top: -6px; }
.nav-toggle-lines::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

.nav-list {
  position: fixed;
  inset: var(--header-h) 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--s2) var(--gutter) var(--s4);
  list-style: none;
  background: rgba(0, 0, 0, 0.96);
  border-bottom: 1px solid rgba(160, 122, 52, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--medium) var(--ease-out), transform var(--medium) var(--ease-out), visibility 0s linear var(--medium);
}
.nav-list.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--medium) var(--ease-out), transform var(--medium) var(--ease-out), visibility 0s;
}
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav-list a:hover { color: var(--gold); }

.header-cta { display: none; }

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav-list {
    position: static;
    flex-direction: row;
    gap: var(--s4);
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-list a {
    position: relative;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 500;
    font-variation-settings: "wdth" 100;
    text-transform: none;
    color: var(--silver);
    border: 0;
    transition: color var(--fast) var(--ease-out);
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.55rem;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--medium) var(--ease-out);
  }
  .nav-list a:hover,
  .nav-list a[aria-current="true"] { color: var(--white); }
  .nav-list a:hover::after,
  .nav-list a[aria-current="true"]::after { transform: scaleX(1); }
  .header-cta { display: inline-flex; margin-left: var(--s2); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s4)) var(--gutter) var(--s6);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.hero-glow,
.stage-rays {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Hero + record share one backdrop: a warm band behind the record, and one dust layer across both
   that fades out just above the divider into About */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 28% at 50% 76%, rgba(226, 190, 106, 0.06), transparent 70%),
    linear-gradient(180deg, var(--black) 45%, var(--velvet) 68%, var(--velvet) 88%, var(--black));
}
.stage > section { position: relative; z-index: 1; }
.stage-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}

.hero-glow {
  background:
    radial-gradient(ellipse 50% 34% at 50% 34%, rgba(226, 190, 106, 0.09), transparent 70%);
}

/* Five light rays that start at the logo and spread down through the headline onto the
   record, as if the logo were the light source. main.js sets --logo-y to the logo's position.
   They start faint at the logo and grow stronger as they travel down; the wrapper fades
   everything out above the divider. */
.stage-rays {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}
.stage-rays::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 90deg at 50% var(--logo-y, 14rem),
    transparent 0deg,
    transparent 44deg, rgba(226, 190, 106, 0.1) 50deg, transparent 56deg,
    transparent 62deg, rgba(247, 230, 180, 0.13) 70deg, transparent 78deg,
    transparent 81deg, rgba(247, 230, 180, 0.16) 90deg, transparent 99deg,
    transparent 102deg, rgba(247, 230, 180, 0.13) 110deg, transparent 118deg,
    transparent 124deg, rgba(226, 190, 106, 0.1) 130deg, transparent 136deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle 150vmax at 50% var(--logo-y, 14rem), transparent 0, rgba(0, 0, 0, 0.15) 6%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0.85) 38%, #000 50%);
  mask-image: radial-gradient(circle 150vmax at 50% var(--logo-y, 14rem), transparent 0, rgba(0, 0, 0, 0.15) 6%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0.85) 38%, #000 50%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 64rem;
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  width: 100%;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hero-mark {
  flex: 0 0 auto;
  width: clamp(9.5rem, 30vw, 17rem);
  height: auto;
  color: var(--white);
  filter: drop-shadow(0 0 1.5rem rgba(226, 190, 106, 0.18));
}

.bars {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.6vw, 7px);
  height: clamp(3.5rem, 9vw, 6.5rem);
}
.bars-left { flex-direction: row; }
.bars-right { flex-direction: row-reverse; }
.bars span {
  scale: 1 var(--boost, 1);
  transition: scale 450ms var(--ease-out);
  width: clamp(2px, 0.35vw, 4px);
  height: var(--h, 50%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-pale), var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 0 0.6rem rgba(226, 190, 106, 0.35);
  opacity: var(--o, 1);
  transform-origin: center;
  animation-name: bar-rise, bar-idle;
  animation-duration: 0.7s, 2.2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: backwards, none;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
}
.hero-line.display { font-size: clamp(2rem, 10.6vw, 7.5rem); }
.hero-line.serif {
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  color: var(--silver);
  margin-block: -0.1em;
}

.hero-sub {
  max-width: 34rem;
  margin-top: var(--s4);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text);
}
.hero-sub strong { display: block; margin-top: 0.25rem; }

.hero-actions .btn { min-width: 13.5rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Hero intro: one orchestrated load sequence (only when JS runs) */
.js .stage-rays,
.js .hero-glow { opacity: 0; }
.js .hero-mark {
  -webkit-clip-path: polygon(-30% 0, -30% 0, -60% 100%, -60% 100%);
  clip-path: polygon(-30% 0, -30% 0, -60% 100%, -60% 100%);
}

.is-loaded .stage-rays,
.is-loaded .hero-glow { opacity: 1; transition: opacity 1.6s var(--ease-out); }
.is-loaded .hero-mark {
  -webkit-clip-path: polygon(-30% 0, 160% 0, 130% 100%, -60% 100%);
  clip-path: polygon(-30% 0, 160% 0, 130% 100%, -60% 100%);
  transition: clip-path 1.2s var(--ease-out) 0.15s, -webkit-clip-path 1.2s var(--ease-out) 0.15s;
}
.is-loaded .hero-line.gold { animation: foil-sweep 2.4s var(--ease-out) 0.8s both; }


@keyframes bar-rise {
  from { transform: scaleY(0); }
}
@keyframes bar-idle {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.5); }
}
@keyframes foil-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

/* ---------- Statement ---------- */

.statement {
  --disc-size: min(92vw, 44rem);
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--disc-size) + 8rem);
  padding: clamp(4rem, 10vw, 6rem) var(--gutter);
  isolation: isolate;
  text-align: center;
}

/* The light from above lands on the record */
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle closest-side at 50% 50%, rgba(226, 190, 106, 0.1), transparent);
  pointer-events: none;
}

/* Vinyl record behind the statement; main.js turns it as the page scrolls */
.statement-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--disc-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  pointer-events: none;
}
.disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(var(--spin, 0deg));
  will-change: transform;
  background:
    conic-gradient(from 30deg, transparent 0 6%, rgba(247, 230, 180, 0.2) 11%, transparent 17% 50%, rgba(247, 230, 180, 0.14) 57%, transparent 63%),
    repeating-radial-gradient(circle, rgba(226, 190, 106, 0.16) 0 1px, transparent 1px 4px),
    radial-gradient(circle, #15110b 0 35%, #0a0806 72%, #050403 100%);
  box-shadow: 0 0 0 1px rgba(160, 122, 52, 0.45), 0 0 2.5rem rgba(226, 190, 106, 0.08);
}
.disc-label {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #1b160d, #000 75%);
  box-shadow: 0 0 0 1px rgba(226, 190, 106, 0.5), 0 0 0 0.5rem rgba(0, 0, 0, 0.6);
}
.disc-label svg { width: 58%; height: auto; color: rgba(199, 203, 209, 0.3); }
.disc-label::after {
  content: "";
  position: absolute;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-deep);
}
.statement-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  max-width: 72rem;
  margin-inline: auto;
}
.statement-title .serif { font-size: clamp(1.9rem, 7vw, 5rem); }
.statement-title .display { font-size: clamp(2.6rem, 13vw, 9rem); }

/* ---------- Divider into About ---------- */

.divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s3) var(--gutter) 0;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 55%, var(--gold-pale));
}
.divider-line:last-child { background: linear-gradient(270deg, transparent, var(--gold-deep) 55%, var(--gold-pale)); }
.divider-mark {
  height: 1.75rem;
  gap: 4px;
  color: var(--gold);
  filter: drop-shadow(0 0 0.4rem rgba(226, 190, 106, 0.5));
}
.divider-mark span { width: 3px; }

/* ---------- Sections ---------- */

.section { padding-block: var(--section-pad); }

/* Menu and button links land on the heading, skipping the section's top padding */
#about,
#gallery,
#book { scroll-margin-top: calc(var(--s3) - var(--section-pad)); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  gap: var(--s6);
  align-items: start;
}

.about-photo {
  position: relative;
  max-width: 26rem;
  width: calc(100% - 1.5rem);
  margin-inline: auto;
}
.about-photo::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: var(--gold-foil);
  opacity: 0.9;
}
.about-photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(226, 190, 106, 0.14), transparent 60%),
    linear-gradient(160deg, #15110b, #000 70%);
  border: 1px solid rgba(160, 122, 52, 0.5);
}
.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-photo-mark {
  width: 62%;
  height: auto;
  color: var(--silver);
  opacity: 0.85;
}

.about-copy { display: flex; flex-direction: column; gap: var(--s3); max-width: 38rem; }
.about-copy .section-title { margin-bottom: var(--s1); }
.about-copy p { max-width: 62ch; }

.about-subtitle {
  margin-top: var(--s3);
  font-size: 1.15rem;
  font-weight: 700;
  font-variation-settings: "wdth" 115;
  color: var(--white);
}

.inline-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--fast) var(--ease-out);
}
.inline-link:hover { text-decoration-color: var(--gold); }

.about-pull {
  margin: var(--s2) 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--gold);
}
.about-pull p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  color: var(--white);
}
.about-cta { margin-top: var(--s2); font-size: 1.1rem; color: var(--white); }

.includes-grid { display: grid; gap: var(--s3); }
.includes-grid li { padding-top: var(--s2); border-top: 1px solid var(--gold-deep); }
@media (min-width: 40rem) { .includes-grid { grid-template-columns: 1fr 1fr; } }

/* Song titles in the About copy, each with a tiny equaliser that keeps playing */
.track {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
.track .mini-bars { height: 0.75em; gap: 2px; align-self: center; }
.track .mini-bars span { width: 2px; }

/* Phones: a smaller portrait so the About text starts sooner */
@media (max-width: 47.99rem) {
  .about-photo { max-width: 15rem; }
  .about-photo::before { inset: 1rem -1rem -1rem 1rem; }
}

@media (min-width: 60rem) {
  .about-grid { grid-template-columns: 5fr 6fr; gap: var(--s7); }
  .about-photo { margin: 0; position: sticky; top: calc(var(--header-h) + var(--s4)); }
}

/* ---------- Gallery ---------- */

.gallery { background: linear-gradient(180deg, var(--black), var(--velvet)); }

.filter {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.filter-btn {
  min-height: 44px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--silver);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.filter-btn:hover { color: var(--white); }
.filter-btn[aria-pressed="true"] { background: var(--gold); color: var(--black); }
.filter-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: -1;
  width: var(--pill-w, 0);
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(var(--pill-x, 0));
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out);
}
.filter.has-pill .filter-btn[aria-pressed="true"] { background: transparent; }
/* "All" is shown as the DA logo: silver when idle, black on the gold pill when chosen */
.filter-btn--logo { display: inline-flex; align-items: center; justify-content: center; }
.filter-logo { width: 1.7rem; height: auto; color: currentColor; }

/* Two highlights side by side, rotating; "View more" opens the full grid */
.gallery-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  max-width: 52rem;
  margin-inline: auto;
}
.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  width: 100%;
}
.gallery-pair.is-single { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.gallery-pair.is-next { animation: quote-from-right 480ms var(--ease-out); }
.gallery-pair.is-prev { animation: quote-from-left 480ms var(--ease-out); }
@media (min-width: 48rem) { .gallery-pair { gap: var(--s3); } }
.gallery-controls { display: flex; align-items: center; gap: var(--s2); }
.gallery-stage.is-paused .quote-progress span { animation-play-state: paused; }
.gallery-none {
  grid-column: 1 / -1;
  padding: var(--s5) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--silver);
  text-align: center;
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(160, 122, 52, 0.25);
  background: #0a0a0a;
  overflow: hidden;
  transition: border-color var(--medium) var(--ease-out);
}
.gallery-pair .tile { aspect-ratio: 4 / 5; }
.tile img,
.tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), opacity var(--medium);
}
.tile:hover { border-color: var(--gold); }
.tile:hover img,
.tile:hover video { transform: scale(1.04); }

.tile-badge {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
}
.tile-badge svg { width: 0.9rem; height: 0.9rem; fill: var(--gold); }

.gallery-skeleton {
  display: contents;
}
.gallery-skeleton span {
  display: block;
  aspect-ratio: 4 / 5;
  background: linear-gradient(100deg, #0b0b0b 30%, #17130c 50%, #0b0b0b 70%);
  background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }

.gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s3);
  border: 1px solid rgba(160, 122, 52, 0.35);
  text-align: center;
}
.gallery-empty[hidden] { display: none; }
.gallery-empty .mini-bars { color: var(--gold); height: 2rem; }
.gallery-empty-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--white);
}
.gallery-empty .btn { margin-top: var(--s1); }

/* "View more" pop-up: every photo and clip as a smaller grid */
html.has-modal { overflow: hidden; }
.gallery-modal {
  width: min(64rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: min(90dvh, 56rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(160, 122, 52, 0.45);
  background: var(--velvet);
  color: var(--text);
  overflow: hidden;
}
.gallery-modal[open] { display: flex; flex-direction: column; animation: zoom-in 320ms var(--ease-out); }
.gallery-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gallery-modal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
}
.gallery-modal-title {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin-right: auto;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.gallery-modal-title .serif { font-size: 0.7em; }
.gallery-modal-close { flex: none; }
.gallery-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s1);
  padding: var(--s3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gallery-modal-grid .tile { aspect-ratio: 1; }
.gallery-modal-grid .tile-badge { left: 0.4rem; bottom: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.4rem; font-size: 0.7rem; }
@media (max-width: 30rem) {
  .gallery-modal-head { padding: var(--s2); }
  .gallery-modal-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: var(--s2); }
  .gallery-modal-head .filter { order: 3; }
}

/* Lightbox */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.96);
  color: var(--white);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox[open] { display: grid; place-items: center; animation: fade-in 260ms var(--ease-out); }
.lightbox-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4.5rem 1rem;
}
/* Sized from the screen, not the box, so tall photos and clips always fit whole */
.lightbox-media img,
.lightbox-media video {
  max-width: min(100vw - 2rem, 64rem);
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  animation: zoom-in 320ms var(--ease-out);
}
@media (min-width: 48rem) {
  /* Clear of the side arrows on larger screens */
  .lightbox-media img,
  .lightbox-media video {
    max-width: min(100vw - 10rem, 64rem);
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
  }
}
.lightbox-close { position: absolute; top: 1rem; right: 1rem; }
.lightbox-prev,
.lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-prev:active,
.lightbox-next:active { transform: translateY(-50%) scale(0.94); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Listen ---------- */

.listen { text-align: center; }
/* Listen and Reviews sit closer together than other sections */
.listen { padding-bottom: clamp(2.25rem, 5.5vw, 4rem); }
.listen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}
.listen .section-title { align-items: center; font-size: clamp(2.6rem, 8vw, 6rem); }
.listen .section-title .display { font-size: 0.7em; }
.listen-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: "wdth" 115;
  color: var(--silver);
}
.listen-label .mini-bars { color: var(--gold); height: 1rem; }
.listen-desc { max-width: 38rem; font-size: clamp(1.05rem, 2vw, 1.2rem); }
.listen-btn { gap: 0.9rem; min-width: 16rem; }
.listen-icon { width: 2rem; height: 1rem; fill: currentColor; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

/* ---------- Reviews ---------- */

.reviews { text-align: center; padding-top: clamp(2.25rem, 5.5vw, 4rem); }
.reviews-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}
.reviews .section-title { align-items: center; }

.quote-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  max-width: 52rem;
}
.quote { margin: 0; min-height: 15rem; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: var(--white);
}
.quote blockquote p::before { content: "\201C"; color: var(--gold); }
.quote blockquote p::after { content: "\201D"; color: var(--gold); }
.quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
.quote-name { font-weight: 700; font-variation-settings: "wdth" 115; color: var(--gold); }
.quote-event { font-size: 0.95rem; color: var(--silver); }
.quote.is-next { animation: quote-from-right 480ms var(--ease-out); }
.quote.is-prev { animation: quote-from-left 480ms var(--ease-out); }
@keyframes quote-from-right { from { opacity: 0; transform: translateX(2rem); } }
@keyframes quote-from-left { from { opacity: 0; transform: translateX(-2rem); } }
.quote-stage { touch-action: pan-y; }
@keyframes quote-in { from { opacity: 0; transform: translateY(0.75rem); } }

.quote-controls { display: flex; align-items: center; gap: var(--s3); }

/* Thin gold line that fills while a review is on screen, so the next change is expected */
.quote-progress {
  width: min(12rem, 60%);
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.quote-progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.quote-progress span.is-running { animation: quote-timer var(--quote-delay, 5s) linear forwards; }
.quote-stage.is-paused .quote-progress span { animation-play-state: paused; }
@keyframes quote-timer { to { transform: scaleX(1); } }

/* ---------- Booking ---------- */

.book { background: linear-gradient(180deg, var(--black), var(--velvet) 40%, var(--black)); }
.book { padding-bottom: clamp(2.25rem, 5.5vw, 4rem); }
.book-intro { max-width: 46rem; margin-top: var(--s3); font-size: 1.15rem; }

/* Focus is moved here by script for screen readers; no ring needed */
.form-summary:focus,
.form-success:focus { outline: none; }

.event-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1em 0.45em;
  max-width: 80rem;
  padding-inline: var(--gutter);
  font-size: clamp(1.35rem, 5.6vw, 4.25rem);
}
/* Fixed line arrangement: one event per line, with Sangeet + Mehndi and Birthday + Party paired */
/* Centre the list on the page (and on the form); the general list reset would otherwise pin it left */
.event-wall[role="list"] { margin-inline: auto; }
@media (max-width: 47.99rem) {
  .event-wall[role="list"] { margin-block: var(--s4) var(--s5); }
}
.event-wall .wall-break { flex-basis: 100%; height: 0; }
/* Without this each list item adds body line-height around its word, padding every row */
.event-wall li { display: flex; }
.event-wall button {
  padding: 0.05em 0.1em;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  font-stretch: 125%;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(199, 203, 209, 0.75);
  background-image: var(--gold-foil);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: -webkit-text-stroke-color var(--slow) var(--ease-out), background-position 1.4s var(--ease-out), opacity var(--slow);
  -webkit-text-fill-color: transparent;
}
/* Gold fill comes in when a word is lit by scroll, hovered, or chosen */
.event-wall button.is-lit,
.event-wall button:hover,
.event-wall button[aria-pressed="true"] {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: transparent;
  background-position: 0% 50%;
}
.event-wall button:not(.is-lit):not(:hover):not([aria-pressed="true"]) { background-image: none; }
.event-wall button[aria-pressed="true"] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* Form */
.quote-form {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(160, 122, 52, 0.4);
  background: rgba(0, 0, 0, 0.6);
}
.form-grid { display: grid; gap: var(--s3); }
@media (min-width: 40rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.95rem; font-weight: 500; color: var(--silver); transition: color var(--fast) var(--ease-out); }
.field:focus-within label { color: var(--gold); }
.req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #6f685d;
  border-radius: 4px;
  background: var(--field);
  color: var(--white);
  font-size: 1rem;
  transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2be6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}
.field input::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) saturate(3) hue-rotate(5deg); cursor: pointer; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #8a8276; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(226, 190, 106, 0.2);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error {
  display: flex;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--error);
}
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; flex: none; border-radius: 50%; background: var(--error); color: var(--black); font-size: 0.75rem; font-weight: 800; margin-top: 0.15rem; }
.field-help { font-size: 0.9rem; color: var(--silver-dim); }

.form-summary {
  margin-bottom: var(--s3);
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--error);
  background: rgba(255, 155, 143, 0.08);
}
.form-summary-title { font-weight: 600; color: var(--white); }
.form-summary ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.form-summary a { color: var(--error); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s4);
}
.form-status { font-size: 0.95rem; color: var(--silver); }
.form-status.is-error { color: var(--error); }
.form-privacy { margin-top: var(--s2); font-size: 0.85rem; color: var(--silver-dim); }

[data-submit] .btn-loading { display: none; color: var(--black); }
[data-submit].is-loading .btn-loading { display: inline-flex; }
[data-submit].is-loading { pointer-events: none; opacity: 0.85; }

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--s6) var(--s3);
  border: 1px solid rgba(160, 122, 52, 0.5);
  text-align: center;
  animation: quote-in 600ms var(--ease-out);
}
.form-success[hidden] { display: none; }
.form-success-title { font-size: clamp(1.6rem, 5vw, 3rem); }
.form-success p { max-width: 34rem; }

/* ---------- Contact ---------- */

.contact { padding-top: clamp(2.25rem, 5.5vw, 4rem); }

.contact-grid {
  display: grid;
  gap: var(--s3);
  align-items: start;
}
.contact-intro { display: flex; flex-direction: column; gap: var(--s3); }
.contact-intro p { max-width: 26rem; color: var(--text); }
@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--s5); }
}

.contact-list li { border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }

.contact-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 5.5rem;
  padding: var(--s2) 0;
  color: inherit;
  text-decoration: none;
}
.contact-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  fill: currentColor;
  color: var(--silver);
  transition: color var(--fast) var(--ease-out);
}
.contact-icon.is-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-label { font-size: 0.9rem; color: var(--silver-dim); }
.contact-value {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 600;
  font-variation-settings: "wdth" 105;
  line-height: 1.3;
  color: var(--white);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: color var(--fast) var(--ease-out), text-decoration-color var(--fast) var(--ease-out);
}
a.contact-row[href]:hover .contact-value { color: var(--gold); text-decoration-color: var(--gold-deep); }
a.contact-row[href]:hover .contact-icon { color: var(--gold); }
.contact-row[aria-disabled="true"] .contact-value { color: var(--silver-dim); font-weight: 500; }
div.contact-row .contact-value { text-decoration: none; }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: var(--s6) var(--s3);
  border-top: 1px solid rgba(160, 122, 52, 0.35);
}
/* Menu on the left, contact on the right; logo above on phones, between them on wider screens */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand brand"
    "menu contact";
  gap: var(--s5) var(--s3);
  align-items: start;
  /* A narrow centred band keeps both columns close to the logo */
  max-width: 30rem;
  padding-inline: clamp(1rem, 6vw, 2rem);
}
.footer-brand { grid-area: brand; justify-self: center; display: inline-flex; color: var(--white); }
.footer-menu { grid-area: menu; text-align: left; }
.footer-contact { grid-area: contact; text-align: right; }
.footer-logo { width: 9rem; height: auto; }
.footer-title {
  margin-bottom: var(--s1);
  font-size: 1.05rem;
  font-weight: 700;
  font-variation-settings: "wdth" 115;
  color: var(--white);
}
.footer-links a,
.footer-links span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--silver);
  text-decoration: none;
}
.footer-links a[href]:hover { color: var(--gold); }
.footer-links a[aria-disabled="true"] { color: var(--silver-dim); }
.footer-legal {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--silver-dim);
  text-align: center;
}
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "menu brand contact";
    max-width: 40rem;
  }
  .footer-brand { align-self: center; }
}

/* ---------- Heading variations ---------- */

.section-title--inline { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; }
.section-title--serif { display: block; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; }
.section-title--plain { display: block; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; }

/* ---------- Micro-interactions ---------- */

.brand:hover { color: var(--gold); }

/* A soft highlight follows the pointer across gold buttons */
.btn-gold { overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.7), transparent 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--medium) var(--ease-out);
}
.btn-gold:hover::after { opacity: 1; }

/* SoundCloud icon bars dance while the button is hovered or focused */
.listen-icon rect { transform-box: fill-box; transform-origin: 50% 100%; }
.listen-btn:hover .listen-icon rect,
.listen-btn:focus-visible .listen-icon rect { animation: icon-eq 520ms var(--ease-out) infinite alternate; }
.listen-icon rect:nth-child(2) { animation-delay: -180ms; }
.listen-icon rect:nth-child(3) { animation-delay: -360ms; }
.listen-icon rect:nth-child(4) { animation-delay: -90ms; }
@keyframes icon-eq { to { transform: scaleY(0.35); } }

/* Contact rows: icon lifts, and email/phone can be copied in one tap */
.contact-icon { transition: color var(--fast) var(--ease-out), transform var(--medium) var(--ease-out); }
a.contact-row[href]:hover .contact-icon { transform: scale(1.12); }
.contact-list li { position: relative; }
.contact-list li.has-copy .contact-row { padding-right: 6rem; }
.copy-btn {
  position: absolute;
  top: 50%;
  right: 0;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid #6f685d;
  border-radius: 999px;
  background: var(--black);
  color: var(--silver);
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-50%);
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.copy-btn:hover { color: var(--gold); border-color: var(--gold); }
.copy-btn.is-copied { background: var(--gold); border-color: var(--gold); color: var(--black); }

/* Choosing an event on the wall makes the form field glow so you see what changed */
.field select.is-flash { animation: field-flash 900ms var(--ease-out); }
@keyframes field-flash {
  from { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(226, 190, 106, 0.55); }
  to { box-shadow: 0 0 0 0.9rem rgba(226, 190, 106, 0); }
}
.field-help.is-set { color: var(--gold); }

/* ---------- Mobile action bar ---------- */

.action-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--z-header) - 1);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.75rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(160, 122, 52, 0.35);
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform 420ms var(--ease-out), visibility 0s linear 420ms;
}
.action-bar.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 420ms var(--ease-out), visibility 0s;
}
.action-bar.is-single { grid-template-columns: 1fr; }
.action-icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
@media (max-width: 47.99rem) {
  .site-footer { padding-bottom: calc(var(--s3) + 5rem); }
}
@media (min-width: 48rem) {
  .action-bar { display: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .bars span { animation: none !important; }
  .js .hero-mark { -webkit-clip-path: none; clip-path: none; }
  .js .stage-rays,
  .js .hero-glow { opacity: 1; transform: none; }
  .mini-bars span { animation: none !important; transform: scaleY(0.7); }
  .event-wall button { -webkit-text-stroke-color: transparent; background-image: var(--gold-foil) !important; background-position: 0% 50%; }
}