/* ===========================================================================
   site.css - the public look: header, hero, page heads, brand bands, client
   logo wall, reviews, team, footer. Modelled on the FEEL of thelovetap.com
   (see-through bar over a black-and-white hero, heavy sans display type,
   curved band edges, a single-colour logo wall on a loud brand band).
   Colours come only from foundation.css tokens.
   =========================================================================== */

/* --- header ----------------------------------------------------------------
   Not sticky (Havok, 2026-10-30): it scrolls away with the page. On
   .has-hero pages it lies see-through over the dark band (light logo, light
   links); elsewhere it is a plain bar at the top. main.js adds .is-solid only
   while the phone menu is open. No rule or shadow under it.
   -------------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 100;
  background: var(--surface);
  transition: background var(--transition);
}
.has-hero .site-header { position: absolute; inset-block-start: 0; inset-inline: 0; }
/* WordPress pushes the page down for its admin bar (signed-in only); an
   absolute header has to follow. */
.admin-bar.has-hero .site-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar.has-hero .site-header { inset-block-start: 46px; } }

.site-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.site-brand {
  flex: none; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  letter-spacing: var(--tracking-tight); text-decoration: none; color: var(--ink);
}
.site-brand:hover { color: var(--ink); }
.site-brand img { height: 40px; width: auto; max-width: none; }
.site-brand picture { display: block; }
.site-brand__clear { display: none; }

.site-nav { margin-inline-start: auto; }
.site-nav ul, .site-footer ul { list-style: none; padding: 0; }
.site-nav ul { display: flex; gap: var(--s5); align-items: center; margin: 0; }
.site-nav a {
  position: relative; display: inline-block; padding-block: var(--s2);
  text-decoration: none; color: var(--ink-2); font-size: var(--step-0); font-weight: 500;
}
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.site-nav a:hover::after, .site-nav .current-menu-item > a::after { transform: scaleX(1); }
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--ink); }

.site-header__end { display: flex; align-items: center; gap: var(--s2); }
.site-header__account { margin: 0; }

/* Sign-in as an icon button. The plugin's text label stays in the link,
   visually hidden, as its accessible name. */
.site-header .portal-link {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%; color: var(--ink);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.site-header .portal-link:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.site-header .portal-link span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.site-header .portal-link__icon { width: 20px; height: 20px; }

/* see-through state */
.has-hero .site-header:not(.is-solid) {
  background: linear-gradient(to bottom, var(--scrim), transparent);
  backdrop-filter: none; border-color: transparent;
}
.has-hero .site-header:not(.is-solid) .site-brand__solid { display: none; }
.has-hero .site-header:not(.is-solid) .site-brand__clear { display: block; }
.has-hero .site-header:not(.is-solid) .site-brand { color: var(--on-night); }
.has-hero .site-header:not(.is-solid) .site-nav a { color: var(--on-night-2); }
.has-hero .site-header:not(.is-solid) .site-nav a:hover,
.has-hero .site-header:not(.is-solid) .site-nav .current-menu-item > a { color: var(--on-night); }
.has-hero .site-header:not(.is-solid) .portal-link { color: var(--on-night); border-color: var(--on-night-rule); }
.has-hero .site-header:not(.is-solid) .nav-toggle__bars,
.has-hero .site-header:not(.is-solid) .nav-toggle__bars::before,
.has-hero .site-header:not(.is-solid) .nav-toggle__bars::after { background: var(--on-night); }
.has-hero .site-header:not(.is-solid) { background: transparent; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: relative; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent !important; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 47.99em) {
  .site-header__end { margin-inline-start: auto; }
  .site-nav {
    display: none; position: absolute; inset-inline: 0; top: 100%; margin: 0;
    background: var(--surface); border-block-end: var(--border);
    padding: var(--s3) var(--s5) var(--s5); box-shadow: var(--shadow);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-block-start: var(--border); }
  .site-nav a, .has-hero .site-header:not(.is-solid) .site-nav a { display: block; padding: var(--s4) 0; font-size: var(--step-1); color: var(--ink); }
  .site-nav a::after { display: none; }
}
@media (min-width: 48em) { .nav-toggle { display: none; } }

/* --- hero ------------------------------------------------------------------
   Full-bleed, full-height. A photo goes black-and-white under a dark wash;
   without one, a brand-tinted gradient on night. Heavy sans headline at the
   top of the scale, one loud button.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; display: grid; align-items: center;
  min-height: clamp(34rem, 100svh, 60rem);
  background:
    radial-gradient(60rem 40rem at 85% 20%, color-mix(in oklab, var(--primary) 45%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at 0% 100%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
    var(--night);
  color: var(--on-night); overflow: clip;
  --wave-fill: var(--primary);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.hero__media:has(img)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--scrim), transparent 75%), linear-gradient(to top, var(--scrim), transparent 50%);
}
.hero__body {
  position: relative; z-index: 1; display: grid; gap: var(--s5); justify-items: start;
  padding-block: calc(var(--header-h) + var(--s7)) var(--s9);
}
/* Home hero carries only the brand name and one button. */
.hero__body h1 {
  font-family: var(--font-heavy); font-weight: 800; font-size: clamp(2.9rem, 1.6rem + 6.4vw, 7rem);
  line-height: 0.98; letter-spacing: -0.025em; color: var(--on-night); max-width: 13ch;
}
.hero__body .hero__title { max-width: 7.6em; overflow-wrap: normal; font-size: clamp(2rem, 0.6rem + 7vw, 7rem); } /* two lines: "Entertainment" is 7.3em wide; fits at 400px */
.hero__body .lede { color: var(--on-night-2); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s2); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--on-night-2); }

/* Section separators (inc/dividers.php). Each sits on the bottom edge of its
   section, filled with the NEXT section's colour (--wave-fill). The section
   names the style it ends in (topnotch_divider( 'trace' ) and the class
   .has-divider--trace) so it keeps its content clear of that one's height.
   Detail lines are the fill colour pushed toward night, or set per section
   via --divider-line. */
.divider {
  --divider-h: clamp(56px, 8vw, 120px);
  position: absolute; inset-inline: 0; inset-block-end: -2px; z-index: 1;
  height: var(--divider-h); pointer-events: none;
}
.divider svg { display: block; width: 100%; height: 100%; }
/* the rig is taller than the waveforms so the art reads */
.divider--rig { --divider-h: clamp(100px, 14vw, 200px); }
/* Havok's drawn set keeps its 1440 x 260 shape at every width */
.divider--tide, .divider--chevron, .divider--skyline { --divider-h: calc(100vw * 260 / 1440); }

.divider__wave { fill: var(--accent); } /* both waveforms: one solid teal shape (Havok) */
.divider__fill { fill: var(--wave-fill, var(--surface)); }
.divider__line { fill: none; stroke: var(--divider-line, color-mix(in oklab, var(--wave-fill, var(--surface)) 74%, var(--night))); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.divider__dots { fill: var(--divider-line, color-mix(in oklab, var(--wave-fill, var(--surface)) 74%, var(--night))); }

/* waveforms: the half below the edge is a darker cut of the same colour; the
   Amen one also dims its played half and draws an accent playhead. */


/* Sections that end in a separator keep their content clear of it. */
.has-divider { position: relative; padding-block-end: calc(var(--s8) + clamp(56px, 8vw, 120px)); }
.has-divider--rig { padding-block-end: calc(var(--s8) + clamp(100px, 14vw, 200px)); }
.has-divider--tide, .has-divider--chevron, .has-divider--skyline { padding-block-end: calc(var(--s8) + 100vw * 260 / 1440); }
.has-divider + * { position: relative; margin-block-start: -2px; }

/* inner-page head band */
.page-hero {
  position: relative; color: var(--on-night); overflow: clip;
  background:
    radial-gradient(50rem 26rem at 90% 0%, color-mix(in oklab, var(--primary) 40%, transparent), transparent 70%),
    var(--night);
  --wave-fill: var(--surface);
}
.page-hero__body { display: grid; gap: var(--s4); padding-block: calc(var(--header-h) + var(--s8)) calc(var(--s9) + var(--s4)); }
.page-hero h1 {
  font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-5);
  line-height: 1; letter-spacing: -0.022em; color: var(--on-night); max-width: 18ch;
}
.page-hero .lede { color: var(--on-night-2); max-width: 46ch; }
/* with a photo: same B&W + dark wash as the home hero, a little heavier
   because the band is shorter and the headline sits over the busy middle */
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(1.05); }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--scrim) 15%, transparent 85%), linear-gradient(to top, var(--scrim), transparent 60%), color-mix(in oklab, var(--night) 25%, transparent);
}
.page-hero--photo .page-hero__body { position: relative; z-index: 1; }
.page-hero--photo .lede, .page-hero--photo .eyebrow { color: var(--on-night); }

/* --- photo band: three full-bleed shots in a row (stack on phones) -------- */
.photo-band { display: grid; gap: 2px; background: var(--night); }
@media (min-width: 48em) { .photo-band { grid-template-columns: repeat(3, 1fr); } }
.photo-band img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* --- the rig (team page): booth render beside a short note ---------------- */
.rig__split { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 56em) { .rig__split { grid-template-columns: 5fr 7fr; } }
.rig__text { display: grid; gap: var(--s4); }
.rig__text h2 { font-family: var(--font-heavy); font-weight: 800; letter-spacing: -0.03em; }
.rig__media { margin: 0; }
.rig__media img { width: 100%; height: auto; display: block; border-radius: var(--radius, 0); }

/* --- loud buttons: square, uppercase, like the reference ------------------- */
.btn--loud { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.btn--loud:hover { --btn-bg: var(--accent-dark); --btn-bd: var(--accent-dark); color: var(--accent-ink); }
.btn--night { --btn-bg: var(--night); --btn-fg: var(--on-night); --btn-bd: var(--night); text-transform: uppercase; letter-spacing: 0.06em; }
.btn--night:hover { --btn-bg: var(--night-2); --btn-bd: var(--night-2); color: var(--on-night); }

/* --- brand band + heavy display headings ------------------------------------ */
.band--brand { background: var(--primary); color: var(--primary-ink); --logo-filter: var(--primary-ink-filter); }
.band--brand h2, .band--brand h3, .band--brand p { color: var(--primary-ink); }
.band__split { display: grid; gap: var(--s7); }
@media (min-width: 56em) { .band__split { grid-template-columns: 5fr 7fr; align-items: start; } }
.band__lead { display: grid; gap: var(--s6); justify-items: start; }
.display {
  font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-4);
  line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase;
}
.display__mark { text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
.band__intro { font-size: var(--step-1); line-height: var(--leading-snug); margin-block-end: var(--s6); }
.band__label { font-family: var(--font-heavy); font-size: var(--step-1); font-weight: 800; margin-block-end: var(--s5); }
.band__cta { display: grid; gap: var(--s5); justify-items: center; text-align: center; }
.band__cta .display { max-width: 18ch; }
.band__cta p { margin-inline: auto; }

/* --- client logo wall --------------------------------------------------------
   Static centred grid of single-colour marks, as on the reference: one height,
   width follows each file, coloured to the band's ink via a filter token.
   -------------------------------------------------------------------------- */
.logo-wall {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s6) var(--s7); margin: 0;
}
.logo-wall__item { display: grid; place-items: center; height: 56px; }
.logo-wall__item img {
  height: 48px; width: auto; max-width: 160px; object-fit: contain;
  filter: var(--logo-filter, var(--ink-filter)); opacity: 0.88;
  transition: opacity var(--transition);
}
.logo-wall__item img:hover { opacity: 1; }
.logo-wall__item--text span {
  display: inline-block; padding: 0.35em 0.8em; border: 2px solid currentColor;
  font-family: var(--font-heavy); font-weight: 800; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; text-align: center; max-width: 14ch;
}
/* upright crests (see topnotch_logo_wall()) */
.logo-wall__item--tall, .logo-wall__item--tall img { height: 64px; }
@media (max-width: 30em) {
  .logo-wall { gap: var(--s5) var(--s6); }
  .logo-wall__item, .logo-wall__item img { height: 36px; }
  .logo-wall__item img { max-width: 120px; }
  .logo-wall__item--tall, .logo-wall__item--tall img { height: 48px; }
}

/* --- night band (reviews on the homepage) --------------------------------- */
.night { background: var(--night); color: var(--on-night-2); }
.night h2, .night h3 { color: var(--on-night); }
.night .eyebrow { color: var(--accent); }
.night--glow { background: radial-gradient(40rem 26rem at 50% 45%, var(--night-2), var(--night) 70%); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.night__more { margin-block-start: var(--s7); text-align: center; max-width: none; }

.quote { display: grid; gap: var(--s4); align-content: start; padding-block-start: var(--s5); border-block-start: 2px solid var(--accent); }
.quote blockquote {
  font-family: var(--font-heavy); font-weight: 700; font-size: var(--step-2);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--on-night);
}
.quote figcaption { font-size: var(--step--1); color: var(--on-night-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* --- reviews page ---------------------------------------------------------- */
.reviews { display: grid; gap: var(--s8); }
.review { display: grid; gap: var(--s4); }
.review__stars { color: var(--accent); font-size: var(--step-1); letter-spacing: 0.2em; }
.review blockquote { font-family: var(--font-heavy); font-weight: 700; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.02em; }
.review figcaption { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); }
.review figcaption strong { color: var(--ink); margin-inline-end: var(--s2); }

/* --- about: promises -------------------------------------------------------- */
.vows { display: grid; gap: var(--s6); counter-reset: vow; }
.vows li { position: relative; display: grid; gap: var(--s2); padding-inline-start: 3.5rem; counter-increment: vow; }
.vows li::before {
  content: counter(vow, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 0.1em;
  font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-1); color: var(--primary);
}
.vows h3 { font-family: var(--font-heavy); font-weight: 700; font-size: var(--step-1); }
.vows p { color: var(--ink-2); }

/* --- DJ team (placeholder portraits until Staff photos exist) --------------- */
.team { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* each DJ is a card (Havok): B&W photo, softer corners, a light teal tint
   that reads against the white page, and a Read bio button to /{name} */
.team__card { display: grid; gap: var(--s2); align-content: start; justify-items: center; text-align: center; padding: var(--s4) var(--s4) var(--s5); background: color-mix(in oklab, var(--primary) 11%, var(--surface)); border-radius: 18px; }
.team__photo {
  display: grid; place-items: center; aspect-ratio: 4 / 5; margin-block-end: var(--s3);
  background: radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--primary) 55%, transparent), transparent 65%), var(--night);
  border-radius: 12px; overflow: hidden;
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.team__bio { margin-block-start: var(--s3); }
.team__card .team__photo { justify-self: stretch; }
/* DJ bio page (/jeff, /daniel, /matt), after thelovetap.com/nem: brand
   title band, photos + Book on the left of the bio, pull quote, genres. */
.dj-title { position: relative; background: var(--primary); color: var(--primary-ink); padding-block-start: calc(var(--header-h) + var(--s7)); }
.dj-title__name { font-family: var(--font-heavy); font-weight: 800; font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem); line-height: 1; letter-spacing: -0.025em; }
.dj-title__slash { color: var(--accent); }
.dj-bio__grid { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 56em) { .dj-bio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); } }
.dj-bio__side { display: grid; gap: var(--s5); justify-items: center; }
.dj-bio__side .team__photo { justify-self: stretch; margin: 0; border-radius: 18px; }
.dj-bio__shot { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; justify-self: stretch; }
.dj-bio__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.dj-bio__body { display: grid; gap: var(--s4); justify-items: start; color: var(--ink-2); }
.dj-bio__body p { max-width: 68ch; }
.dj-bio__quote { justify-self: center; margin-block: var(--s5); padding: var(--s6); max-width: 30rem; background: color-mix(in oklab, var(--primary) 11%, var(--surface)); border-radius: 18px; font-size: var(--step-1); color: var(--ink); }
.dj-bio__quote cite { display: block; margin-block-start: var(--s3); font-style: normal; font-size: var(--step-0); color: var(--ink-3); }
.dj-bio__label { font-size: var(--step-0); font-weight: 700; color: var(--ink); margin-block-start: var(--s3); }
.dj-bio__genres { display: grid; gap: var(--s2); padding-inline-start: 1.2em; list-style: disc; }
.dj-bio__genres li::marker { color: var(--accent); }
.dj-bio__book { justify-self: center; margin-block-start: var(--s5); }
.dj-cta__body { display: grid; gap: var(--s6); justify-items: center; text-align: center; }
.dj-cta__body .display { color: var(--on-night); max-width: 18ch; }
.team__card:hover .team__photo img { transform: scale(1.04); }
.team__photo span { font-family: var(--font-heavy); font-weight: 800; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; color: var(--on-night-rule); }
.team__name { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-2); text-transform: uppercase; letter-spacing: -0.01em; }
.team__role { color: var(--ink-3); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* --- contact ----------------------------------------------------------------- */
.contact-aside { display: grid; gap: var(--s3); justify-items: start; padding: var(--s6); background: var(--surface-2); border-radius: var(--radius-lg); }
.contact-aside .band__label { margin: 0; }

/* --- footer ------------------------------------------------------------------
   Logo + area + CTA, hours, contact + socials, links; a chevron edge drops
   into a --primary bar with the copyright line. ------------------------- */
.site-footer { position: relative; background: var(--night); color: var(--on-night-2); padding-block-start: var(--s8); }
.band + .site-footer, .section--tinted + .site-footer { margin: 0; }
.site-footer a:not(.btn) { color: var(--on-night); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--accent); }
.site-footer__logo { height: 48px; width: auto; margin-block-end: var(--s4); }
.site-footer__grid { display: grid; gap: var(--s7) var(--s6); }
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer__brand { display: grid; gap: var(--s4); justify-items: start; align-content: start; }
.site-footer__area { font-weight: 600; color: var(--on-night); }
.site-footer__cta { font-weight: 800; }
.site-footer h4 { color: var(--on-night); font-family: var(--font-heavy); font-size: var(--step-0); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-block-end: var(--s3); }
.site-footer__sub { margin-block-start: var(--s5); }
.site-footer ul { display: grid; gap: var(--s2); font-size: var(--step--1); }
.site-footer__social { display: flex; gap: var(--s3); margin-block-start: var(--s4); }
.site-footer__social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--on-night-rule); border-radius: 999px;
}
.site-footer__social svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__social a:hover { border-color: var(--accent); }
.site-footer__bar { background: var(--primary); color: var(--primary-ink); font-size: var(--step--1); padding-block: var(--s2) var(--s5); }
.site-footer__bar .wrap { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; }

/* section headings in the same heavy sans as the bands */
.section-head h2, .section-head h1 { font-family: var(--font-heavy); font-weight: 800; letter-spacing: -0.03em; }

/* Night bands end on a fractional pixel; tuck the next section up over the
   seam so no hairline of night shows under the wave. */
.hero + *, .page-hero + * { position: relative; margin-block-start: -2px; }
.page-hero + .section:not(.band) { background: var(--surface); }

/* --- FAQ page: topic jump list + groups ----------------------------------- */
.faq-jump ul { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s7); padding: 0; list-style: none; }
.faq-jump a {
  display: inline-block; padding: 0.45em 1em; border: 1px solid var(--rule); border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; text-decoration: none; color: var(--ink);
}
.faq-jump a:hover { border-color: var(--accent); color: var(--accent); }
.faq-group { scroll-margin-block-start: var(--s8); }
.faq-group + .faq-group { margin-block-start: var(--s8); }
.faq-group .section-head { margin-block-end: var(--s5); }
.faq details > div ul { margin: var(--s3) 0 0; padding-inline-start: 1.2em; display: grid; gap: var(--s2); }
.faq details > div p + p { margin-block-start: var(--s3); }
.faq__more { margin-block-start: var(--s6); }

/* visually hidden, still read out (the ticker's plain list) */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- home: crowd band - the wide Padres strip in black and white with the
   line and button in the accent colour over it ---------------------------- */
.crowd { position: relative; overflow: clip; background: var(--night); color: var(--on-night); display: grid; align-items: center; min-height: clamp(24rem, 40vw, 38rem); padding-block-start: var(--s8); }
.crowd__media { position: absolute; inset: 0; }
.crowd__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; filter: grayscale(1) contrast(1.08); }
/* the DJ stands left of centre, so the line sits right, over the crowd */
.crowd__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--scrim), transparent 60%); }
.motion .crowd__media img { transform: translate3d(0, calc(var(--parallax, 0px) * -1), 0) scale(1.16); will-change: transform; }
/* Heading and button centred in the left half; the DJ is on the right. */
.crowd__body { display: grid; gap: var(--s5); justify-items: center; text-align: center; }
@media (min-width: 40em) { .crowd__body { width: 50%; margin-inline-start: 0; } }
@media (max-width: 40em) { .crowd__media::after { background: var(--scrim); } }

/* Photo-filled skyline (Havok): the crowd photo reaches up behind the logo
   band's bottom edge and shows only through the outline of the San Diego
   skyline divider there, then fills the band solid below it. The outline is
   the divider file itself (assets/img/dividers/san-diego-skyline.svg). */
.crowd--skyline { --sky-h: calc(100vw * 260 / 1440); overflow: visible; overflow-x: clip; z-index: 1; }
.crowd--skyline .crowd__media {
  inset-block-start: calc(var(--sky-h) * -1 + 2px);
  -webkit-mask: url("../img/dividers/san-diego-skyline.svg") center top / 100% var(--sky-h) no-repeat,
                linear-gradient(#000 0 0) center bottom / 100% calc(100% - var(--sky-h) + 1px) no-repeat;
          mask: url("../img/dividers/san-diego-skyline.svg") center top / 100% var(--sky-h) no-repeat,
                linear-gradient(#000 0 0) center bottom / 100% calc(100% - var(--sky-h) + 1px) no-repeat;
}
/* The strip is ~3.3:1: keep the band short so cover zooms as little as it
   can, and anchor right so the DJ never leaves the frame. */
.crowd--skyline { min-height: clamp(22rem, 100vw / 3.6, 38rem); padding-block: 0 clamp(100px, 14vw, 200px); } /* the chevron's top is clear, so it may overlap the body */
.crowd--skyline .crowd__media img { object-position: 88% 40%; }
.motion .crowd--skyline .crowd__media img { transform: translate3d(0, calc(var(--parallax, 0px) * -1), 0) scale(1.02); }
.crowd__title { color: var(--accent); max-width: 12ch; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.5rem); text-shadow: 0 2px 24px var(--scrim); }

/* --- home: our promise ---------------------------------------------------- */
.promise__split { display: grid; gap: var(--s7); }
@media (min-width: 56em) {
  .promise__split { grid-template-columns: 4fr 7fr; align-items: start; }
  .promise__title { position: sticky; top: var(--s7); }
}
.promise__title { max-width: 10ch; }
.promise__list { display: grid; gap: var(--s7); margin: 0; padding: 0; list-style: none; }
.promise__list li { display: grid; gap: var(--s3); padding-block-start: var(--s5); border-block-start: 3px solid var(--primary); }
.promise__list h3 { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.015em; }
.promise__list p { color: var(--ink-2); max-width: 56ch; }

/* --- home: reviews carousel (assets/js/carousel.js) ------------------------ */
.carousel { --per: 1; margin-block-start: var(--s7); }
.carousel__viewport { overflow: hidden; touch-action: pan-y; }
.carousel__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.carousel__slide { flex: 0 0 calc(100% / var(--per)); padding-inline: var(--s3); }
/* off-screen cards vanish once the slide finishes, so no sliver of a
   neighbour shows at a fractional edge */
.carousel__slide[aria-hidden="true"] { visibility: hidden; transition: visibility 0s 600ms; }
.review-card {
  display: grid; gap: var(--s4); align-content: start; height: 100%; margin: 0; padding: var(--s6);
  background: var(--night-2); border-radius: var(--radius-lg); border-block-start: 3px solid var(--accent);
}
.review-card blockquote { font-family: var(--font-heavy); font-weight: 700; font-size: var(--step-1); line-height: var(--leading-snug); color: var(--on-night); }
.review-card__rule { border: 0; border-block-start: 2px dashed var(--on-night-rule); margin: 0; }
.review-card figcaption { display: grid; gap: var(--s1); }
.review-card__names { font-weight: 700; color: var(--on-night); }
.review-card__venue { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-night-2); }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-block-start: var(--s6); }
.carousel__arrow {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--on-night-rule); border-radius: 999px; background: none; color: var(--on-night); cursor: pointer;
}
.carousel__arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel__dots { display: flex; gap: var(--s2); }
.carousel__dots button { width: 0.7rem; height: 0.7rem; padding: 0; border: 0; border-radius: 999px; background: var(--on-night-rule); cursor: pointer; transition: background var(--transition), width var(--transition); }
.carousel__dots button[aria-current="true"] { background: var(--accent); width: 1.8rem; }
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }

/* --- home: services accordion ---------------------------------------------
   Opens smoothly where the browser can animate to height:auto
   (::details-content + interpolate-size); elsewhere it just snaps open. */
.services { interpolate-size: allow-keywords; }
.services__title { margin-block-end: var(--s6); }
.services__item { border-block-end: 2px solid var(--ink); }
.services__item:first-child { border-block-start: 2px solid var(--ink); }
.services__item summary {
  display: flex; align-items: center; gap: var(--s4); padding-block: var(--s5); cursor: pointer; list-style: none;
  font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-2); text-transform: uppercase; letter-spacing: -0.01em;
}
.services__item summary::-webkit-details-marker { display: none; }
.services__item summary::after { content: "+"; margin-inline-start: auto; color: var(--primary); font-size: var(--step-3); line-height: 1; transition: transform var(--transition); }
.services__item[open] summary::after { transform: rotate(45deg); }
.services__icon { width: 2rem; height: 2rem; flex: none; color: var(--primary); }
.services__item::details-content { block-size: 0; overflow: hidden; transition: block-size 450ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 450ms allow-discrete; }
.services__item[open]::details-content { block-size: auto; }
.services__body { padding: 0 0 var(--s5) calc(2rem + var(--s4)); color: var(--ink-2); max-width: 62ch; }
.services__more { margin-block-start: var(--s7); }
@media (prefers-reduced-motion: reduce) { .services__item::details-content { transition: none; } }

/* --- home: destination weddings -------------------------------------------- */
.destination { position: relative; overflow: clip; background: var(--night); color: var(--on-night); display: grid; gap: var(--s6); padding-block-start: var(--s9); }
.destination__media { position: absolute; inset: 0; }
.destination__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.destination__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.motion .destination__media img { transform: translate3d(0, calc(var(--parallax, 0px) * -1), 0) scale(1.4); will-change: transform; }
.destination > *:not(.destination__media):not(.divider) { position: relative; z-index: 1; }
.destination__body { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.destination__body h2 { color: var(--on-night); font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem); }
.destination__body p { color: var(--on-night-2); margin-inline: auto; }
.destination__cta { display: flex; justify-content: center; }
.ticker { overflow: hidden; border-block: 1px solid var(--on-night-rule); padding-block: var(--s4); }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; align-items: center; gap: var(--s5); margin: 0; padding: 0 var(--s5) 0 0; list-style: none; }
.ticker__list li { font-family: var(--font-heavy); font-weight: 800; font-size: var(--step-2); text-transform: uppercase; white-space: nowrap; color: var(--on-night); }
.ticker__glyph { display: block; width: 1.6rem; height: 0.8rem; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .ticker { overflow-x: auto; } }

/* One review per slide, quote set big; arrows sit on the left and right
   edges of the slide, dots stay centred underneath. */
.carousel { position: relative; max-width: 60rem; margin-inline: auto; padding-inline: clamp(3rem, 8vw, 5.5rem); }
.carousel .review-card { text-align: center; justify-items: center; background: none; border: 0; box-shadow: none; }
.carousel .review-card blockquote { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.9rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 26ch; margin-inline: auto; }
.carousel .review-card blockquote::before { content: "\201C"; display: block; font-size: 2.2em; line-height: 0.6; color: var(--accent); }
.carousel .review-card__rule { width: 4rem; }
.carousel__controls { display: contents; }
.carousel__arrow { position: absolute; inset-block-start: 40%; transform: translateY(-50%); z-index: 2; }
.carousel__arrow[data-carousel-prev] { inset-inline-start: 0; }
.carousel__arrow[data-carousel-next] { inset-inline-end: 0; }
.carousel__dots { justify-content: center; margin-block-start: var(--s6); }

/* Phone call scheduler, shown over the page once an inquiry lands. */
.callbox { width: min(100% - 2rem, 34rem); max-height: calc(100dvh - 2rem); margin: auto; padding: var(--s6); overflow-y: auto; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--radius, 12px); }
.callbox::backdrop { background: var(--scrim); }
.callbox h3 { margin-block-end: var(--s2); }
.callbox .notice { margin-block-end: var(--s3); }
.callbox__days { display: grid; gap: var(--s4); margin-block: var(--s5); }
.callbox__day { min-width: 0; margin: 0; padding: 0; border: 0; }
.callbox__day legend { margin-block-end: var(--s2); padding: 0; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.callbox__slot { display: inline-block; margin: 0 var(--s2) var(--s2) 0; cursor: pointer; }
.callbox__slot input { position: absolute; opacity: 0; }
.callbox__slot span { display: block; padding: var(--s2) var(--s3); font-size: var(--step--1); white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; }
.callbox__slot:hover span { background: var(--primary-veil); border-color: var(--primary); }
.callbox__slot input:checked + span { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.callbox__slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.callbox__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }