/* ===========================================================
   BO Musik — DJ Bernard Ollivier
   Dark re-key of the v3 handoff. Geometry, type and copy are
   the approved design; only the colour ground is inverted so
   the four film pieces sit native instead of as bright holes.
   Radius is 0 everywhere. No exceptions.
   =========================================================== */

:root {
  /* Ground */
  --ground:      #0c0d14;   /* page — matches the Archive film bed */
  --ground-2:    #12131c;   /* raised band, chips */
  --ground-3:    #1a1b26;   /* input wells */

  /* Ink is now light */
  --ink:         #f2efe6;
  --ink-70:      rgba(242, 239, 230, .70);
  --ink-55:      rgba(242, 239, 230, .55);
  --ink-40:      rgba(242, 239, 230, .40);

  /* Rules do the organising — same 2px geometry, inverted */
  --rule:        rgba(242, 239, 230, .62);
  --rule-soft:   rgba(242, 239, 230, .18);

  /* --- Brand: sampled from his own BO Musik logo (see films/shush/bo-lockup.js).
     These are the colours in the films. The handoff's teal #0f9ba3 was a duller
     stand-in for the cyan and appeared nowhere in his branding — replaced, and
     it reads far harder on the dark ground (11.7:1 against 5.76:1). --- */
  --cyan:        #3bdde6;   /* the logo's own blue-green — live/now signals */
  --lime:        #c9f27a;   /* the equaliser bars — "on air" */
  --pale:        #dfffb4;

  /* --- Era coding, kept from the handoff: these say "1980s poster" and
     they earn their place --- */
  --pink:        #e5245e;   /* display type + swatches — large, so AA-fine */
  --pink-lit:    #f0396e;   /* small pink text — AA on ground */
  --pink-deep:   #a80d40;   /* pink SURFACES that carry text. On #e5245e the
                               handoff's own cream is 3.97:1 and its gold stars
                               2.74:1 — both fail. Deepened: 6.73 and 4.64. */
  --tangerine:   #f4801f;
  --gold:        #ffc21a;
  --plum:        #35194c;
  --teal-deep:   #0a5158;   /* booking field — AA with cream */
  --action:      #ec3013;
  --action-hover:#ff4a2a;

  --container:   1180px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the archive film's own typeface — the site's "record" voice: dates,
     times, stamps, phone numbers. Archivo stays the poster voice. */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 66px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; border-radius: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 44px touch targets ----------
   Drawn as a centred pseudo-element rather than real padding: the design's
   geometry (chip and button padding) stays exactly as specified, and the
   header does not reflow. */
.nav a, .brand, .chip--tel, .type-chip, .drawer__x, .event__poster,
.lightbox__bar button, .toast__bar a, .toast__bar button { position: relative; }
.nav a::after, .brand::after, .chip--tel::after, .type-chip::after,
.drawer__x::after, .lightbox__bar button::after,
.toast__bar a::after, .toast__bar button::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 44px; min-height: 44px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #0c0d14;
  padding: 12px 16px; font-weight: 800; text-decoration: none;
}
.skip:focus { left: 0; }

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

/* ---------- shared type ---------- */

.kicker {
  font-weight: 800; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; margin: 0 0 10px;
}

.h1 {
  font-weight: 900; font-size: clamp(38px, 6vw, 84px);
  line-height: .86; letter-spacing: -.045em; text-transform: uppercase;
  margin: 0;
}
.h2 {
  font-weight: 900; font-size: clamp(34px, 5.5vw, 60px);
  line-height: .9; letter-spacing: -.04em; text-transform: uppercase;
  margin: 0;
}
.h3 {
  font-weight: 900; font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase;
  margin: 0 0 8px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 14px; border: 2px solid transparent; text-decoration: none;
  font-weight: 800; text-transform: uppercase;
  transition: background .17s ease, color .17s ease, border-color .17s ease;
}
.btn svg { flex: none; }

.btn--primary {
  background: var(--action); color: #0c0d14;
  padding: 16px 20px; font-size: 14px; letter-spacing: .06em;
}
.btn--primary:hover { background: var(--action-hover); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule);
  padding: 16px 20px; font-size: 14px; letter-spacing: .06em;
}
.btn--ghost:hover { background: var(--gold); color: #0c0d14; border-color: var(--gold); }

.btn--ink {
  background: var(--ink); color: #0c0d14;
  padding: 13px 16px; font-size: 12px; letter-spacing: .08em;
}
.btn--ink:hover { background: var(--action); color: #0c0d14; }

/* ---------- header ---------- */

.header {
  position: sticky; top: 0; z-index: 50;
  height: 66px; background: var(--ground);
  border-bottom: 2px solid var(--rule);
}
.header__in {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; background: var(--pink-deep); color: #f7f2e8;
  display: grid; place-items: center;
  font-weight: 900; font-size: 13px; letter-spacing: .02em;
}
.brand__name {
  font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: -.01em;
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font-weight: 700; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  transition: color .16s ease;
}
.nav a:hover { color: var(--pink-lit); }
.nav__cta {
  background: var(--action); color: #0c0d14;
  padding: 11px 15px; font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background .16s ease;
}
.nav__cta:hover { background: var(--action-hover); }
@media (max-width: 860px) { .nav { gap: 18px; } .nav__agenda { display: none; } }
/* Below 640 the three text links no longer fit beside the wordmark and the
   CTA. Brand + Réserver only — the sections are a scroll away. */
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nav a:not(.nav__cta) { display: none; }
  .brand__name { font-size: 13.5px; }
  .brand { gap: 10px; }
  .nav__cta { padding: 11px 13px; letter-spacing: .08em; }
}

/* ---------- hero ----------
   Title block, then the film full width at 16:9, then the offer. */

.hero { border-bottom: 2px solid var(--rule); }

.hero__title { padding: 30px 20px 26px; }
/* two lines, each its own block — "Tic Tic" must never break */
.hero__title .h1 span { display: block; white-space: nowrap; }

.hero__stage {
  position: relative; overflow: hidden;
  /* width:100% is load-bearing. With aspect-ratio and only a max-height, the
     box shrinks its WIDTH to keep the ratio and leaves a black gap beside it. */
  width: 100%; aspect-ratio: 16 / 9;
  background: #05060a;                 /* the film's own bed — never a colour
                                          that could flash before it paints */
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  display: flex; align-items: flex-end; justify-content: flex-start;
}
/* must match the aspect js hands the film — see data-film-narrow */
@media (max-width: 760px) {
  .hero__stage { width: 100%; aspect-ratio: 9 / 16; justify-content: center; }
  .hero__portrait { max-width: 88%; margin-left: 0; }
}

.hero__offer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px 34px; align-items: center;
  padding-top: 28px; padding-bottom: 34px;
}

.live {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--rule); padding: 7px 11px; margin-bottom: 18px;
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.live__dot { width: 8px; height: 8px; background: var(--lime); flex: none; }
@media (max-width: 520px) {
  .live { font-size: 9px; letter-spacing: .09em; padding: 7px 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .live__dot { animation: livePulse 1.6s ease-in-out infinite; }
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(.6); }
}

.hero .kicker { color: var(--cyan); font-size: 12px; }
.hero__h1--pink { color: var(--pink); }
.hero__lead {
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 500; line-height: 1.3;
  max-width: 26ch; margin: 0 0 10px;
}
.hero__sub { font-size: 14px; color: var(--ink-55); max-width: 40ch; margin: 0; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 761px) { .hero__btns { justify-content: flex-end; } }

/* The still under the hero is the film's OWN first frame — same photograph,
   same black, roughly the same place in the frame. Whatever the loading state,
   nothing appears that is not part of the film. The mock's sunburst panel,
   mirror ball and "BO Musik" tag used to live here; they flashed orange on
   every load and are gone. */
.hero__portrait {
  position: relative; height: 100%; width: auto; max-width: 42%;
  object-fit: contain; object-position: left bottom;
  margin-left: 3%;                     /* matches the film's 16:9 frame x-offset */
}

/* film layer, shared by the hero and the archive stage */
.film {
  position: absolute; inset: 0; z-index: 2;
  /* short dissolve: the film layer is opaque, so a long fade reads as a
     double exposure against the designed panel behind it */
  opacity: 0; transition: opacity .4s ease;
  background: #05060a; pointer-events: none;
}
.film iframe { width: 100%; height: 100%; border: 0; display: block; }
.film.is-ready { opacity: 1; }

/* Once a film is up it carries its own titles and lockup, so the still
   fallback's furniture gets out of the way. */
.archive__scrim, .archive__label { transition: opacity .7s ease; }
.archive__stage:has(.film.is-ready) .archive__scrim,
.archive__stage:has(.film.is-ready) .archive__label {
  opacity: 0; pointer-events: none;
}

/* ---------- marquee ---------- */

.marquee {
  background: var(--pink-deep); border-bottom: 2px solid var(--rule); overflow: hidden;
}
.marquee__row {
  display: flex; width: max-content; gap: 34px; padding: 11px 34px 11px 0;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__row { animation: marquee 26s linear infinite; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__row span {
  font-weight: 900; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: #f7f2e8; white-space: nowrap;
}
.marquee__row .star { color: var(--gold); }

/* ---------- the line: 1985 → now ----------
   Replaces the handoff's four-cell stat row. Same facts, hung on the spine
   instead of boxed. The rule is the label's own border-top rather than an
   absolutely-placed bar, so it stays put under fluid numerals at any size. */

.line {
  list-style: none; margin: 0; padding: 30px 0 34px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr);
  border-bottom: 2px solid var(--rule);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.line::-webkit-scrollbar { display: none; }

.line__stop { position: relative; }
.line__n {
  display: block; font-weight: 900; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1; letter-spacing: -.04em;
  padding: 0 20px 20px 0;
}
.line__l {
  display: block; position: relative;
  /* the rule is a background, not a border: backgrounds paint across the
     padding box, so it spans the whole column and the segments join into one
     continuous line while the padding still holds the text off its neighbour */
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 0;
  padding: 18px 20px 0 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-55);
}
.line__l::before {                         /* the tick, sitting on the rule */
  content: ""; position: absolute; left: 0; top: -2px;
  width: 2px; height: 11px; background: var(--ink-70);
}

/* the two ends carry the story: where it started, and that it has not stopped */
.line__stop--start .line__n { color: var(--gold); }
.line__stop--start .line__l,
.line__stop--now   .line__l { color: var(--ink-70); }
.line__stop--now .line__n { color: var(--lime); }
.line__stop--now .line__l { background-image: linear-gradient(var(--lime), var(--lime)); }
.line__stop--now .line__l::before { background: var(--lime); height: 14px; }
.line__stop--now .line__l::after {         /* live dot on the rule */
  content: ""; position: absolute; left: 0; top: -5px;
  width: 8px; height: 8px; background: var(--lime);
}
@media (prefers-reduced-motion: no-preference) {
  .line__stop--now .line__l::after { animation: livePulse 1.6s ease-in-out infinite; }
}

/* On a phone the row would need a sideways scroll, which buries 2026 — and
   2026 is the whole point. Turn the spine upright and read it downwards. */
@media (max-width: 760px) {
  .line {
    grid-auto-flow: row; grid-auto-columns: auto;
    overflow-x: visible; padding: 26px 0 28px;
  }
  .line__stop { padding: 0 0 22px 22px; }
  .line__stop:last-child { padding-bottom: 4px; }
  .line__n { padding: 0 0 6px; font-size: 34px; }
  .line__l {
    /* spine runs down the left edge instead of across the top */
    background-size: 2px 100%; background-position: -22px 0;
    padding: 0; max-width: 30ch;
  }
  .line__l::before { left: -22px; top: 0; width: 11px; height: 2px; }
  .line__stop--now .line__l::before { width: 14px; }
  .line__stop--now .line__l::after { left: -25px; top: -3px; }
  /* the spine has to carry on past each numeral, not just beside the label */
  .line__stop::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--rule);
  }
  .line__stop--now::after { background: var(--lime); bottom: auto; height: 26px; }
}

/* ---------- section frame ---------- */

.section { padding: 44px 0; border-bottom: 2px solid var(--rule); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px;
  margin-bottom: 26px;
}
.section__note { font-size: 13px; color: var(--ink-55); max-width: 42ch; }

/* ---------- agenda ---------- */

.agenda { border-top: 2px solid var(--rule); }
.event {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px; padding: 16px 0;
  border-bottom: 2px solid var(--rule-soft);
  align-items: start;
}
@media (max-width: 720px) {
  .event { grid-template-columns: 76px minmax(0, 1fr); }
  .event__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .event { opacity: 0; }
  .event.is-in { animation: fadeUp .45s ease both; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.event__poster {
  padding: 0; background: none; border: 2px solid var(--rule);
  height: 118px; overflow: hidden; transition: border-color .16s ease;
}
.event__poster:hover { border-color: var(--pink-lit); }
.event__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

.event__kind {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-weight: 800; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-70);
}
.event__swatch { width: 11px; height: 11px; flex: none; }
.event__when { font-family: var(--mono); font-size: 13px; letter-spacing: -.01em; }
.event__where { font-size: 13.5px; color: var(--ink-55); }
.event__detail {
  font-size: 13px; color: var(--ink-70); max-width: 62ch;
  border-left: 2px solid var(--gold); padding-left: 10px; margin: 10px 0 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  background: var(--ground-2); color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 8px 11px;
}
.chip--tel {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 2px solid var(--rule);
  text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chip--tel:hover { background: var(--gold); color: #0c0d14; border-color: var(--gold); }

/* ---------- archive film — 1985 ---------- */

.archive { background: var(--ground); }
.archive__stage {
  position: relative; aspect-ratio: 16 / 9;
  border: 2px solid var(--rule); overflow: hidden;
  background: #0a0b11;
}
.archive__stage img.archive__poster {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  filter: saturate(.86) contrast(1.04);
}
.archive__scrim {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(0deg, rgba(6,7,12,.92), rgba(6,7,12,.25) 55%, rgba(6,7,12,.55));
  pointer-events: none;
}
.archive__label {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  padding: 20px; max-width: 46ch;
}
.archive__stamp {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; color: var(--gold); margin-bottom: 8px;
}
.archive__year {
  font-weight: 900; font-size: clamp(44px, 9vw, 108px); line-height: .82;
  letter-spacing: -.05em; margin: 0;
}
.archive__cap { font-size: 13.5px; color: var(--ink-70); margin: 10px 0 0; }

.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr);
  gap: 2px; margin-top: 2px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* Tall enough that a portrait frame is not sliced through the face. The few
   that still need help carry their own object-position in the markup. */
.strip button {
  padding: 0; background: none; border: 2px solid var(--rule-soft);
  height: 150px; overflow: hidden; transition: border-color .16s ease;
}
.strip button:hover { border-color: var(--gold); }
.strip img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) contrast(1.05) brightness(.92);
  transition: filter .2s ease;
}
.strip button:hover img { filter: none; }

/* ---------- radio + mixes ---------- */

.radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.radio__copy { padding: 44px 24px 44px 0; }
@media (max-width: 900px) { .radio__copy { padding: 40px 0; } }
.radio .kicker { color: var(--cyan); }
.radio__p { font-size: 15.5px; color: var(--ink-70); max-width: 40ch; }

.mixes { border-top: 2px solid var(--rule); margin-top: 22px; }
.mix {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 12px 0;
  border-bottom: 2px solid var(--rule-soft);
}
.mix__btn {
  width: 44px; height: 44px; border: 2px solid var(--rule);
  background: transparent; display: grid; place-items: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mix__btn[aria-pressed="true"] { color: #0c0d14; }
.mix__t {
  font-weight: 800; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mix__m { font-size: 12px; color: var(--ink-55); }
.mix__track { height: 3px; background: rgba(242,239,230,.14); margin-top: 7px; }
.mix__fill { height: 100%; width: 0; transition: width .1s linear; }
.mix__d { font-size: 12px; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.mixes__note { font-size: 11.5px; color: var(--ink-40); margin-top: 12px; }

.radio__panel {
  position: relative; background: var(--plum);
  border-left: 2px solid var(--rule); min-height: 360px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
@media (max-width: 900px) { .radio__panel { border-left: 0; border-top: 2px solid var(--rule); } }
/* the 34px grid rides over the photo, so the plum panel still reads as a
   panel rather than a plain picture */
.radio__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(247,242,232,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(247,242,232,.07) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(53,25,76,.22), rgba(12,13,20,.55));
}
.radio__panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 40%;
}

/* ---------- disco years wall ---------- */

.wall { position: relative; overflow: hidden; background: #07080d; padding: 4px 0 0; }
.wall__row { display: flex; gap: 4px; width: max-content; padding-bottom: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .wall__row { animation: drift var(--dur, 90s) linear infinite; }
  .wall__row--rev { animation-direction: reverse; }
  /* Deliberately NOT paused on hover: stopping the row left photos stranded
     off-screen and made the wall feel broken. Keyboard focus still pauses,
     or a tile could drift away from under the cursor before it is activated. */
  .wall:focus-within .wall__row { animation-play-state: paused; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.wall__row button {
  padding: 0; background: none; border: 0; flex: none;
  width: clamp(150px, 22vw, 280px); height: clamp(124px, 17vw, 210px);
  overflow: hidden; position: relative;
}
.wall__row img {
  width: 100%; height: 100%; object-fit: cover;
  /* these are all photographs of people; faces sit in the upper third, so a
     centre crop takes the tops of heads off. */
  object-position: 50% 30%;
  filter: saturate(.9) brightness(.82); transition: filter .25s ease, transform .5s ease;
}
.wall__row button:hover img,
.wall__row button:focus-visible img { filter: none; transform: scale(1.04); }

.beam {
  height: 2px; margin: 4px 0;
  background: linear-gradient(90deg, transparent, var(--beam, var(--cyan)) 18%, var(--gold) 50%, var(--beam, var(--pink)) 82%, transparent);
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .beam { animation: beat 2.4s ease-in-out infinite; }
  .beam--b { animation-delay: -1.2s; }
}
@keyframes beat { 0%, 100% { opacity: .28; } 50% { opacity: .9; } }

/* ---------- booking ---------- */

.booking {
  background: var(--teal-deep);
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
}
.booking__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px; padding: 46px 0;
}
.booking .kicker { color: rgba(242,239,230,.7); }
.booking__p { font-size: 16px; color: rgba(242,239,230,.82); max-width: 34ch; }
.tel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: #0c0d14; padding: 13px 15px; margin-top: 8px;
  text-decoration: none; transition: background .16s ease;
}
.tel-row:hover { background: var(--gold); }
.tel-row b { font-family: var(--mono); font-size: 14px; }
.tel-row span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

.form { border-left: 2px solid rgba(242,239,230,.25); padding-left: 30px; }
@media (max-width: 720px) { .form { border-left: 0; padding-left: 0; } }
.field { margin-bottom: 14px; }
.field label,
.field .label {
  display: block; margin-bottom: 6px;
  font-weight: 800; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(242,239,230,.8);
}
.field input, .field textarea {
  width: 100%; background: var(--ground-3); color: var(--ink);
  border: 2px solid var(--rule); padding: 13px 14px; font-size: 15px;
  font-family: inherit; border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.type-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chip {
  background: transparent; color: var(--ink); border: 2px solid var(--rule);
  padding: 10px 13px; font-size: 12.5px; font-weight: 700;
  transition: background .16s ease, color .16s ease;
}
.type-chip[aria-pressed="true"] { background: var(--ink); color: #0c0d14; }
.submit {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: #0c0d14; border: 0;
  padding: 17px 19px; font-weight: 800; font-size: 15px;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}
.submit:hover { background: var(--action); color: #0c0d14; }

/* ---------- finale — une nuit ---------- */

.finale { position: relative; background: #05060a; border-bottom: 2px solid var(--rule); }
.finale__stage {
  /* same trap as the hero: without width:100% the max-height narrowed the box */
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #05060a;
}
.finale__stage video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #05060a;
}
.finale__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,6,10,.92), rgba(5,6,10,.15) 52%, rgba(5,6,10,.6));
  transition: opacity .5s ease;
}
.finale.is-playing .finale__scrim,
.finale.is-playing .finale__label { opacity: 0; pointer-events: none; }
.finale__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 0 30px; transition: opacity .5s ease;
}
.finale__title {
  font-weight: 900; font-size: clamp(34px, 7vw, 86px); line-height: .86;
  letter-spacing: -.05em; text-transform: uppercase; margin: 0;
}
.play {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 16px;
  background: var(--gold); color: #0c0d14; border: 0;
  padding: 14px 18px; font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .16s ease;
}
.play:hover { background: var(--ink); }

/* ---------- footer ---------- */

.footer { background: #07080d; color: var(--ink); padding: 34px 20px 40px; }
.footer__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px;
}
.footer__brand { font-weight: 900; font-size: 22px; text-transform: uppercase; }
.footer__blurb { font-size: 13.5px; color: var(--ink-55); max-width: 30ch; margin-top: 8px; }
.footer h2 {
  font-weight: 800; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-40); margin: 0 0 10px;
}
.footer a { color: var(--gold); text-decoration: none; transition: color .16s ease; }
.footer a:hover { color: var(--ink); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { font-size: 14px; }
/* real padding here — the footer has the room, and it keeps the 44px
   targets from overlapping each other the way pseudo-pads would */
.footer li a { display: inline-block; padding: 14px 0; }
.footer__radio { color: var(--ink-70); font-size: 14px; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6,5,10,.94);
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn .2s ease both;
}
.lightbox[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__box { max-width: 860px; width: 100%; }
.lightbox img {
  max-height: 76vh; width: auto; margin: 0 auto;
  object-fit: contain; border: 2px solid var(--ink);
}
.lightbox__cap { font-size: 13px; color: rgba(242,239,230,.8); max-width: 46ch; margin: 14px 0 0; }
.lightbox__bar { display: flex; gap: 8px; margin-top: 14px; }
.lightbox__bar button {
  background: var(--ink); color: #0c0d14; border: 0;
  padding: 11px 15px; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .16s ease;
}
.lightbox__bar button:hover { background: var(--gold); }
.lightbox__bar .ghost { background: transparent; color: var(--ink); border: 2px solid var(--rule); }
.lightbox__bar .ghost:hover { background: var(--ink); color: #0c0d14; }

/* ---------- toast ---------- */

.toast {
  position: fixed; bottom: 108px; left: 50%; z-index: 95;
  width: calc(100% - 36px); max-width: 420px;
  background: var(--ground-2); color: var(--ink);
  border: 2px solid var(--rule); padding: 16px;
  transform: translateX(-50%);
  animation: riseIn .32s cubic-bezier(.2, .9, .25, 1) both;
}
.toast[hidden] { display: none; }
/* the translate must ride along or the centring breaks */
@keyframes riseIn {
  from { transform: translateX(-50%) translateY(120%); }
  to   { transform: translateX(-50%); }
}
.toast__t { font-weight: 900; font-size: 15px; text-transform: uppercase; }
.toast__b { font-size: 13.5px; color: var(--ink-70); margin: 6px 0 12px; }
.toast__bar { display: flex; gap: 8px; }
.toast__bar a, .toast__bar button {
  padding: 10px 14px; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent;
}
.toast__wa { background: var(--cyan); color: #0c0d14; }
.toast__x { background: transparent; color: var(--ink); border-color: var(--rule); }

/* ---------- sticky audio drawer ---------- */

.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #07080d; border-top: 2px solid var(--gold);
}
.drawer[hidden] { display: none; }
.drawer__in {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 12px 20px;
}
.drawer__play {
  width: 46px; height: 46px; background: var(--gold); color: #0c0d14;
  border: 0; display: grid; place-items: center; transition: background .16s ease;
}
.drawer__play:hover { background: var(--ink); }
.drawer__t {
  font-weight: 800; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wave { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-top: 6px; }
.wave i {
  display: block; width: 3px; background: rgba(242,239,230,.35);
  transform-origin: bottom; animation-play-state: paused;
}
@media (prefers-reduced-motion: no-preference) {
  .wave i { animation-name: bar; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .drawer.is-playing .wave i { animation-play-state: running; }
}
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.drawer__x {
  width: 32px; height: 32px; background: transparent; color: var(--ink);
  border: 2px solid var(--rule); display: grid; place-items: center;
  transition: background .16s ease, color .16s ease;
}
.drawer__x:hover { background: var(--ink); color: #0c0d14; }
.drawer__progress { height: 3px; background: rgba(242,239,230,.14); }
.drawer__progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.drawer-spacer { height: 96px; background: #07080d; }
@media (max-width: 520px) { .drawer__in { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; } }