/* ============================================================================
   BOUZOUKI GREEKTOWN — Design System
   Art direction: "Greektown Noir" — marble, brass, smoke and spotlight.
   Derived from the club's own mark: a fluted Greek column, two silhouettes,
   an arched wordmark and a signature script.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Surfaces */
  --ink:        #07060a;
  --ink-2:      #0c0a11;
  --ink-3:      #13101a;
  --ink-4:      #1b1724;

  /* Marble (light) */
  --marble:     #f4eee5;
  --marble-2:   #ded5c8;
  --marble-dim: rgba(244, 238, 229, 0.62);
  --marble-faint: rgba(244, 238, 229, 0.30);
  --hairline:   rgba(244, 238, 229, 0.12);
  --hairline-2: rgba(244, 238, 229, 0.06);

  /* Brass */
  --brass:      #c8a04a;
  --brass-lit:  #ecd18b;
  --brass-deep: #8a6a24;

  /* Warm ramp — this is the light in the room, not just an accent.
     The brass stays the luxury note; the wine and rose do the seducing. */
  --wine:       #5e1526;
  --wine-lit:   #8e2438;
  --rose:       #c2637a;
  --flesh:      #e8bda9;

  /* Neon — one hot colour, spent in very few places. */
  --neon:       #ff2f56;
  --neon-ink:   #fff1f4;

  --blood:      #7e1220;

  /* Type */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --ui:      "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:  "Yellowtail", cursive;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw:   84rem;
  --section: clamp(5.5rem, 12vh, 11rem);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --slow: 1.1s;

  /* Height of the dancer pair on the preloader (shared by .stage and .boot). */
  /* The set is ~1.07x as wide as tall, so a phone's width caps it too. */
  --stage-h: min(clamp(13rem, 46vh, 28rem), 76vw);

  --logo: url("../img/logo-bouzouki.jpg");

  /* The room is dark and so is the site — there is no light theme. Declaring
     it makes the browser render scrollbars, form controls and native date and
     time pickers to match instead of flashing white. */
  color-scheme: dark;
}

/* ---------- THE DANCERS ------------------------------------------------- */
/* Vectorised from the club's own mark (see the #i-fig-* symbols in the sprite).
   Being real geometry, these need none of the tricks the bitmap crop required:
   no vignette mask to hide clipped neighbours, no screen blend to drop a black
   field, and no blur at any size. Colour comes from `color`, so they tint. */
.fig {
  display: block;
  width: auto;
  color: var(--marble);
  pointer-events: none;
  flex: none;
}
/* An <svg> with only `height` set resolves `width: auto` to 100% of its
   container, so the figure ends up letterboxed inside an over-wide box and
   every left/right offset lands short. Pinning each symbol's own ratio makes
   the box the same shape as the art. */
.fig--l { aspect-ratio: 100 / 237.44; }
.fig--r { aspect-ratio: 100 / 229.82; }

/* Hero: a pair framing the wordmark, exactly the composition of the mark.
   Two motions share each figure and must not fight, so they live on separate
   properties: the entrance on `translate`/`scale` (transitioned), the scroll
   on `transform` (untransitioned, so it tracks the finger 1:1). --sp is the
   hero's scroll progress 0..1, written by heroFigs() in site.js: the pair
   separates outward and recedes into the room, inner edges falling away like
   the walls of a corridor. The wider translate is deliberate — perspective
   pulls a receding figure toward the centre, so it has to travel further out
   than it looks to read as separating at all. */
.hero__figs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1000px;
  perspective-origin: 50% 58%;
  opacity: calc(1 - var(--sp, 0) * 0.7);
}
.hero__fig {
  --fig-o: 0.26;
  --dir: -1;
  position: absolute;
  bottom: 0;
  height: clamp(19rem, 64vh, 42rem);
  opacity: 0;
  translate: 0 12%;
  scale: 0.97;
  transform:
    translate3d(calc(var(--dir) * var(--sp, 0) * 40vw), 0, calc(var(--sp, 0) * -420px))
    rotateY(calc(var(--dir) * var(--sp, 0) * -28deg));
  transition: opacity 1.6s var(--ease) 0.5s, translate 1.8s var(--ease) 0.5s, scale 1.8s var(--ease) 0.5s;
}
.hero__fig--l { left: clamp(-1rem, 2vw, 4rem); }
.hero__fig--r { right: clamp(-1rem, 2vw, 4rem); --dir: 1; }
.is-lit .hero__fig { opacity: var(--fig-o); translate: none; scale: none; }
@media (max-width: 47.99rem) {
  .hero__fig { height: 44vh; --fig-o: 0.14; }
}
/* When the preloader's dancers fly in to take these places, the entrance is
   theirs: these wait invisible in their final spot and appear under them. */
.has-stage .hero__fig { opacity: 0; translate: none; scale: none; transition: opacity 0.5s linear; }
.has-stage.stage-landed .hero__fig { opacity: var(--fig-o); }

/* Divider: figure, column, figure — the mark, unpacked across the page. */
.col-divider__fig {
  height: clamp(4.5rem, 8vw, 7rem);
  opacity: 0.4;
}
.col-divider__set {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.4vw, 1.1rem);
}

/* The mark is white-on-black, so `screen` drops the black cleanly on any
   dark surface — no alpha channel required, and the original stays untouched. */
.mark {
  background-image: var(--logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  flex: none;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* No sideways travel, ever. iOS Safari lets a hard swipe pan the page
     into anything a few pixels wider than the screen (a tilted banner was
     enough), so the root clips horizontally and refuses sideways bounce.
     `hidden` first for Safari before 16, which does not know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
/* `clip`, not `hidden`: it trims the tilted marquee's corners without making
   <main> a scroll container, which would break the sticky week rail. */
main { overflow-x: clip; }
html.is-locked, body.is-locked { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--marble);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--brass); color: var(--ink); }

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

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

.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -110%);
  z-index: 300; background: var(--brass); color: var(--ink);
  padding: 0.75rem 1.5rem; font-size: 0.75rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. TYPE SCALE ------------------------------------------------ */
.t-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 15.5vw, 16rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.t-xl {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.t-lg {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.t-md {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.2;
}
.t-script {
  font-family: var(--script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brass-lit);
}
.t-eyebrow {
  font-family: var(--ui);
  font-size: clamp(0.625rem, 0.78vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--marble-dim);
}
.t-label {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.t-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--marble-dim);
}
.t-body { color: var(--marble-dim); }
.t-brass { color: var(--brass-lit); }

/* Neon. Glass tube, not a glow filter: a near-white core with layered
   coloured haloes at widening radii, which is what makes real neon read.
   Spent in exactly one place per page — the club's name. */
.t-neon {
  color: var(--neon-ink);
  text-shadow:
    0 0 2px rgba(255, 241, 244, 0.9),
    0 0 8px rgba(255, 47, 86, 0.85),
    0 0 20px rgba(255, 47, 86, 0.6),
    0 0 44px rgba(255, 47, 86, 0.4),
    0 0 90px rgba(255, 47, 86, 0.22);
}
/* Tubes settle when they warm up — a couple of stutters, then steady. */
.t-neon--live { animation: warmup 4.2s var(--ease) 1 both; }
@keyframes warmup {
  0%   { opacity: 0.25; }
  6%   { opacity: 1; }
  9%   { opacity: 0.3; }
  13%  { opacity: 1; }
  17%  { opacity: 0.55; }
  22%  { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .t-neon--live { animation: none; }
}
.t-marble { color: var(--marble); }
.t-italic { font-style: italic; }

.t-index {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--brass);
  font-weight: 500;
}

/* ---------- 4. FILM TEXTURE --------------------------------------------- */
/* Grain + vignette live above everything, below the UI. Pointer-transparent. */
.film {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
}
.film::before {
  content: "";
  position: absolute;
  inset: -18%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.16;
  animation: grain 900ms steps(4) infinite;
}
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 95% at 50% 40%, transparent 42%, rgba(4,3,6,0.55) 100%);
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 5. LAYOUT --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 104rem; }
.wrap--narrow { max-width: 60rem; }

.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }
.section--flush-top { padding-top: 0; }

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
}

/* Section index label — sits in the left margin, editorial style */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 62rem) {
  .sec-head { grid-template-columns: 9rem minmax(0, 1fr); gap: 3rem; }
}
.sec-head__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.75rem;
}
.sec-head__meta::before {
  content: "";
  width: 2.5rem; height: 1px;
  background: var(--brass);
}

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---------- 7. BUTTONS -------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  color: var(--brass-lit);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--brass-lit), var(--brass));
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--brass-lit); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn--solid { color: var(--ink); border-color: var(--brass-lit); }
.btn--solid::before { transform: translateY(0); }
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: translateY(-101%); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--brass-lit); }

.btn--ghost { border-color: var(--hairline); color: var(--marble); }
.btn--ghost::before { background: var(--marble); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--marble); }

.btn--sm { padding: 0.8rem 1.5rem; font-size: 0.6875rem; letter-spacing: 0.22em; }
.btn__ico { width: 0.9em; height: 0.9em; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

/* Text link with a wipe underline */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-lit);
  padding-bottom: 0.4rem;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.55s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }
.tlink__arrow { transition: transform 0.45s var(--ease); }
.tlink:hover .tlink__arrow { transform: translateX(6px); }

/* ---------- 8. PRELOADER ------------------------------------------------ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.boot[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; }
.boot.is-done .boot__inner { opacity: 0; transition: opacity 0.4s linear; }
/* The dancers (.stage, below) stand over the middle of the screen; the bar and
   count sit just under their feet, so the pair and the counter read as one
   centred block. */
.boot__inner {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--stage-h) * 0.4 + 2.25rem);
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.boot__bar {
  width: clamp(9rem, 22vw, 15rem);
  height: 1px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.boot__bar i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass-lit));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s linear;
}
.boot__pct {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ---------- 8b. THE STAGE (preloader dancers -> hero hand-off) ----------- */
/* Above the preloader so the dancers survive its fade. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 401;
  pointer-events: none;
  transition: opacity 0.5s linear;
}
.stage.is-gone { opacity: 0; }
.stage__set {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--stage-h) * 0.6);
  width: max-content;   /* else it shrink-wraps to the half-screen right of left:50% */
  height: var(--stage-h);
  display: flex;
  align-items: flex-end;
  translate: -50% 0;
  perspective: 1100px;
  animation: stageRise 1.4s var(--ease) both;
}
@keyframes stageRise {
  from { opacity: 0; transform: translateY(7%); }
}
/* Outer span carries the flight (Web Animations), the inner svg the idle
   turn — one transform each, so neither ever has to be read back mid-motion
   from the other. Brass while it waits; it lands in the hero's marble. */
.stage__fig {
  display: block;
  flex: none;
  height: 100%;
  color: var(--brass-lit);
  perspective: 900px;
  filter: drop-shadow(0 0 22px rgba(236, 209, 139, 0.28));
}
.stage__fig .fig {
  height: 100%;
  transform-origin: 50% 100%;
  animation: stageTurnL 3.4s var(--ease-in-out) infinite alternate;
}
.stage__fig--r .fig { animation-name: stageTurnR; }
@keyframes stageTurnL { from { transform: rotateY(22deg); } to { transform: rotateY(-10deg); } }
@keyframes stageTurnR { from { transform: rotateY(-22deg); } to { transform: rotateY(10deg); } }
.stage__col {
  flex: none;
  height: 96%;
  width: auto;
  aspect-ratio: 100 / 400;
  margin: 0 calc(var(--stage-h) * -0.02);
  color: var(--brass);
}
/* A pool of light on the boards under them. */
.stage__floor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--stage-h) * 0.4);
  width: calc(var(--stage-h) * 1.5);
  height: calc(var(--stage-h) * 0.16);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(200, 160, 74, 0.22), transparent);
  animation: stageRise 1.4s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .stage__set, .stage__floor, .stage__fig .fig { animation: none; }
}

/* ---------- 9. AGE GATE ------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 380;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(4, 3, 6, 0.94);
  backdrop-filter: blur(14px);
  text-align: center;
}
.gate[hidden] { display: none; }
.gate__panel {
  position: relative;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--hairline);
  background: linear-gradient(170deg, rgba(27,23,36,0.7), rgba(7,6,10,0.7));
  animation: gateIn 0.9s var(--ease) both;
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
}
/* Brass corner brackets */
.gate__panel::before, .gate__panel::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--brass);
}
.gate__panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.gate__panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.gate__mark { width: 96px; height: 96px; }
.gate__age {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--brass-lit);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gate__age {
    background: linear-gradient(180deg, var(--brass-lit), var(--brass-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.gate__deny {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marble-faint);
  text-decoration: underline;
  text-underline-offset: 5px;
  background: none;
}
.gate__deny:hover { color: var(--marble-dim); }
.gate__fine { font-size: 0.75rem; color: var(--marble-faint); line-height: 1.7; }

/* ---------- 10. PAGE CURTAIN (multi-page transition) -------------------- */
/* Driven by `transform`, not clip-path: transform is GPU-composited so it stays
   smooth on weak hardware, and its rest position is parked off-screen — if a
   transition is ever dropped the curtain cannot strand the page behind it. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 340;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  transform: translate3d(0, -100%, 0);
  transition: transform 0.7s var(--ease-in-out);
  will-change: transform;
}
.curtain__mark {
  width: 88px; height: 88px;
  opacity: 0;
  transition: opacity 0.35s var(--ease) 0.12s;
}
/* Leaving: sweep down to cover. */
.curtain.is-out { transform: translate3d(0, 0, 0); }
.curtain.is-out .curtain__mark { opacity: 1; }
/* Arriving: pinned over the page, then swept off the bottom. */
.curtain.is-held {
  transform: translate3d(0, 0, 0);
  transition: none;
}
.curtain.is-held .curtain__mark { opacity: 1; transition: none; }
.curtain.is-in {
  transform: translate3d(0, 100%, 0);
  transition: transform 0.8s var(--ease-in-out);
}
.curtain.is-in .curtain__mark { opacity: 0; }

/* ---------- 11. NAV ----------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: clamp(1rem, 2vw, 1.6rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: transform 0.6s var(--ease), background-color 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 6, 10, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--hairline-2);
}
.nav.is-hidden { transform: translateY(-104%); }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
}
.nav__brand-mark { width: 46px; height: 46px; }
.nav__brand-txt { display: none; line-height: 1.05; }
@media (min-width: 30rem) { .nav__brand-txt { display: block; } }
.nav__brand-name {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__brand-sub {
  font-family: var(--script);
  font-size: 0.875rem;
  color: var(--brass);
  margin-top: -2px;
}

.nav__links { display: none; }
@media (min-width: 70rem) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.1vw, 2rem);
  }
}
.nav__link {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marble-dim);
  padding-block: 0.35rem;
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover { color: var(--marble); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--brass-lit); }
.nav__link.is-current::after { transform: scaleX(1); }

.nav__side { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.nav__cta { display: none; }
@media (min-width: 48rem) { .nav__cta { display: inline-flex; } }

/* Status pill — live open/closed, computed against America/Detroit */
.status {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--hairline);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marble-dim);
  white-space: nowrap;
}
@media (min-width: 56rem) { .status { display: inline-flex; } }
.status__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--marble-faint);
  flex: none;
}
.status.is-open { color: var(--marble); border-color: rgba(120, 220, 150, 0.3); }
.status.is-open .status__dot {
  background: #6ee7a0;
  box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(110, 231, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); }
}

/* Burger */
/* Positioned absolutely rather than laid out on a grid, so the geometry is
   explicit. The previous version used `place-items: center` on a grid, which
   only centres each bar inside its own 1px row — it does not set
   `align-content`, so the three tracks packed to the top of the box and the
   icon sat high. It also moved the bars half the distance they needed to meet
   (3px, where their centres are 6px apart), so the "X" never actually closed. */
.burger {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 70rem) { .burger { display: none; } }

.burger i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 1.5px;
  margin: -0.75px 0 0 -11px;   /* true centre, allowing for the bar's own size */
  background: var(--marble);
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease),
              background-color 0.4s var(--ease);
}
.burger i:nth-child(1) { transform: translateY(-7px); }
.burger i:nth-child(3) { transform: translateY(7px); }

.burger:hover i, .burger:focus-visible i { background: var(--brass-lit); }

/* Both strokes return to dead centre before rotating, so they cross exactly
   on the button's midpoint — a real X, not two offset diagonals. */
.burger.is-open i:nth-child(1) { transform: translateY(0) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.burger.is-open i:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ---------- 12. MENU OVERLAY -------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 195;
  background: var(--ink);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(5.5rem, 12vh, 8rem) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-in-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__list { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.menu__item { overflow: hidden; }
.menu__a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 7.5vw, 4.75rem);
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--marble);
  transform: translateY(105%);
  transition: transform 0.85s var(--ease), color 0.4s;
}
.menu.is-open .menu__a { transform: translateY(0); }
.menu__a:hover { color: var(--brass-lit); }
.menu__a:hover .menu__n { color: var(--brass); }
.menu__n {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--marble-faint);
  transition: color 0.4s;
  flex: none;
}
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--hairline-2);
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.5s;
}
.menu.is-open .menu__foot { opacity: 1; }

/* ---------- 13. MARQUEE ------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  border-block: 1px solid var(--hairline-2);
  padding-block: clamp(0.7rem, 1.4vw, 1.1rem);
  background: var(--ink-2);
}
.marquee--bare { border: 0; background: none; }
.marquee--brass {
  background: linear-gradient(90deg, var(--wine-lit), var(--brass) 28%, var(--brass-lit) 50%, var(--brass) 72%, var(--wine-lit));
  border-color: transparent;
}
.marquee--brass .marquee__track { color: var(--ink); }
.marquee--skew { transform: rotate(-1.6deg) scale(1.04); }
.marquee__track {
  display: flex;
  flex: none;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-right: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  animation: slide 38s linear infinite;
  font-family: var(--ui);
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track--rev { animation-direction: reverse; }
.marquee__track--fast { animation-duration: 24s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee__dot { color: var(--brass); font-size: 0.7em; }
.marquee--brass .marquee__dot { color: var(--ink); opacity: 0.55; }
.marquee__big {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ---------- 14. REVEAL CHOREOGRAPHY ------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* A wipe via a sliding curtain, NOT clip-path: an element clipped to zero
   width has an empty intersection rect, so IntersectionObserver would never
   fire on it and the reveal could never be triggered. */
[data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  position: relative;
}
[data-reveal="wipe"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 10;
  background: var(--ink);
  transform-origin: right center;
  transition: transform 1.15s var(--ease-in-out);
  transition-delay: var(--d, 0ms);
  pointer-events: none;
}
[data-reveal="wipe"].is-in::before { transform: scaleX(0); }

[data-reveal="rise"] { transform: translateY(70px); }
[data-reveal="scale"] { transform: scale(1.06); opacity: 0; }
[data-reveal="scale"].is-in { transform: scale(1); }

/* Per-line masked type reveal */
.lines { display: block; }
.lines__l { display: block; overflow: hidden; }
.lines__i {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.lines.is-in .lines__i { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], .lines__i { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="wipe"]::before { display: none; }
  .film::before { animation: none; }
}

/* ---------- 15. ATMOSPHERE: smoke, spotlight, column -------------------- */
.atmo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Two slow-drifting volumetric blooms — reads as haze in a dark room. */
.atmo__smoke {
  position: absolute;
  width: 78vmax; height: 78vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  will-change: transform;
}
.atmo__smoke--a {
  top: -32vmax; left: 50%;
  background: radial-gradient(circle, rgba(232,189,169,0.26), transparent 62%);
  animation: drift 26s var(--ease) infinite alternate;
}
.atmo__smoke--b {
  bottom: -40vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(142,36,56,0.46), transparent 64%);
  animation: drift 34s var(--ease) infinite alternate-reverse;
}
/* Was a cold violet, which fought everything else and made the room feel like
   an office at night. Rose keeps the whole space one temperature. */
.atmo__smoke--c {
  top: 18vmax; right: -28vmax;
  background: radial-gradient(circle, rgba(194,99,122,0.32), transparent 64%);
  animation: drift 30s var(--ease) infinite alternate;
}

/* A soft vertical wash that crosses the room, like a lamp on a slow track. */
.atmo__sweep {
  position: absolute;
  top: -10%;
  left: 0;
  width: 52vmax;
  height: 120%;
  /* Softness is baked into the stops rather than applied with filter: blur().
     Blurring an animated, screen-blended layer this large forces the compositor
     to re-rasterise the whole surface every frame — the gradient costs nothing
     and is visually indistinguishable at this radius. */
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(232, 189, 169, 0.02) 18%,
    rgba(232, 189, 169, 0.07) 36%,
    rgba(255, 47, 86, 0.06) 50%,
    rgba(232, 189, 169, 0.05) 64%,
    rgba(232, 189, 169, 0.015) 82%,
    transparent 100%
  );
  mix-blend-mode: screen;
  will-change: transform;
  animation: sweep 24s var(--ease) infinite alternate;
}
@keyframes sweep {
  from { transform: translateX(-35vmax) skewX(-6deg); }
  to   { transform: translateX(78vmax) skewX(6deg); }
}
@keyframes drift {
  from { transform: translate3d(-8%, -4%, 0) scale(1); }
  to   { transform: translate3d(10%, 7%, 0) scale(1.18); }
}
/* Hard-edged beam from above, like a stage wash */
.atmo__beam {
  position: absolute;
  top: -12%; left: 50%;
  width: 62vmax; height: 120%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(232,189,169,0.20), rgba(255,47,86,0.05) 34%, transparent 62%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
}
.atmo__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}

/* Cursor-tracked spotlight — brightens whatever it passes over */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 50%),
    rgba(232, 189, 169, 0.13),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.spot:hover::after { opacity: 1; }

/* The column — their mark's centrepiece, reused as structure */
.col-svg { color: var(--marble); }
.col-divider {
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 5vw, 4rem);
  position: relative;
}
.col-divider::before, .col-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(34%, 22rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline));
}
.col-divider::before { left: 0; }
.col-divider::after { right: 0; transform: scaleX(-1); }
.col-divider svg { height: clamp(5rem, 9vw, 8rem); width: auto; opacity: 0.45; }

/* Giant faint badge watermark */
.watermark {
  position: absolute;
  width: min(120vmin, 70rem);
  aspect-ratio: 1;
  opacity: 0.055;
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 16. HERO ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(7rem, 16vh, 11rem);
  overflow: clip;
}
.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.hero__eyebrow { margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }

/* A photograph of the actual room behind the lockup. Heavily scrimmed: it is
   there to say "this is a real place", not to compete with the type. Degrades
   to the pure-vector hero if the file is absent. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 38%;
  filter: saturate(0.7) contrast(1.05) brightness(0.55);
  opacity: 0;
  transition: opacity 2.4s var(--ease) 0.3s;
}
.is-lit .hero__photo { opacity: 0.5; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 70% at 50% 45%, rgba(7,6,10,0.62), rgba(7,6,10,0.9) 78%),
    linear-gradient(to top, var(--ink) 2%, rgba(7,6,10,0.35) 42%, rgba(7,6,10,0.6) 100%);
}
@media (max-width: 47.99rem) {
  .is-lit .hero__photo { opacity: 0.38; }
}

/* The lockup: arched-feel wordmark + column + script, per the real mark */
.lockup { position: relative; display: inline-block; }
.lockup__word {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
/* Solid fill, deliberately. This used a metallic gradient via
   `background-clip: text` on each animated letter, and WebKit intermittently
   fails to repaint clipped text on an element being composited mid-animation:
   on an iPhone in Low Power Mode, where frames are throttled, the headline
   rendered as "BOU" with the rest of the word blank. It could not be forced on
   a fast simulator, which is the nature of a race — so the fragile combination
   is gone rather than tuned. Do not put background-clip back on these. */
.lockup__word { font-kerning: none; }   /* spans and the collapsed text node then set identically */
/* The word rises as ONE piece. It used to stagger letter by letter, and on a
   phone (worse in Low Power Mode, where frames are throttled) that read as
   "BO..." with the rest of the name arriving late, which looks broken rather
   than designed. A single element cannot be half-revealed. */
.lockup__in {
  display: inline-block;
  transform: translateY(102%);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity 0.7s var(--ease);
}
.lockup__word, .lockup__in {
  color: #f3ede3;
  text-shadow: 0 1px 0 rgba(255, 253, 248, 0.08), 0 14px 40px rgba(4, 3, 6, 0.55);
}
.is-lit .lockup__in { transform: none; opacity: 1; }
.lockup__script {
  position: absolute;
  right: clamp(-0.5rem, 2vw, 3rem);
  bottom: clamp(-1.6rem, -1vw, -0.5rem);
  font-size: clamp(1.75rem, 6vw, 5rem);
  line-height: 1;
  transform: rotate(-6deg);
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.75s, transform 0.9s var(--ease) 0.75s;
}
.is-lit .lockup__script { opacity: 1; transform: rotate(-6deg) translateY(0); }

/* Once the reveal has played, drop the transitions so the eight animated
   characters stop occupying their own compositor layers. Their final transform
   is the identity, so clearing it changes nothing visually — it just lets the
   text rasterise back into the page, which is cheaper and sharper. */
.lockup.is-settled .lockup__in { transition: none; transform: none; opacity: 1; }
.lockup.is-settled .lockup__script { transition: none; }

@media (max-width: 47.99rem) {
  .lockup__script {
    position: static;
    display: block;
    margin-top: 0.15em;
    text-align: center;
    transform: rotate(-3deg);
    font-size: clamp(1.6rem, 11vw, 2.75rem);
  }
  .is-lit .lockup__script { transform: rotate(-3deg); }
  .lockup__col { opacity: 0.04; }
}
.lockup__col {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleY(1.25);
  height: 150%;
  width: auto;
  opacity: 0.055;
  z-index: -1;
  color: var(--brass-lit);
}

.hero__sub {
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
  max-width: 42rem;
}
.hero__cta { margin-top: clamp(2rem, 4vh, 3rem); justify-content: center; }

.hero__foot {
  position: relative;
  z-index: 2;
  height: clamp(3.5rem, 9vh, 7rem);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(7rem, 14vh, 10rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--marble-faint);
}
.scroll-cue i {
  width: 1px; height: 3.5rem;
  background: linear-gradient(180deg, var(--brass), transparent);
  transform-origin: top;
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}
/* A scroll hint is a pointer affordance — on touch it just crowds the hero. */
@media (max-width: 47.99rem) { .scroll-cue { display: none; } }

/* Page hero (interior pages) */
.phero {
  position: relative;
  padding-top: clamp(9rem, 22vh, 15rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: clip;
}
.phero__inner { position: relative; z-index: 2; }
.phero__crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.phero__title { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.phero__lede { max-width: 46rem; }

/* ---------- 17. PLATES (art-directed image slots) ----------------------- */
/* Each plate is a self-contained composition: framed, spotlit, hazed.
   To drop in real photography, add a background-image to .plate__img. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--hairline-2);
  isolation: isolate;
}
.plate--3x4 { aspect-ratio: 3 / 4; }
.plate--4x3 { aspect-ratio: 4 / 3; }
.plate--1x1 { aspect-ratio: 1; }
.plate--16x9 { aspect-ratio: 16 / 9; }
.plate--tall { aspect-ratio: 2 / 3; }

/* Real photography. Sits LAST among the plate's background layers, so it
   simply covers the vector composition when it loads — and if a file is
   missing or misnamed, the bokeh-and-silhouette fallback shows through instead
   of an empty box. Never hide the fallback behind a class. */
.plate__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
  /* The room is already magenta-and-blue lit; pulling saturation down and
     warming slightly stops the plates fighting the brass. */
  filter: saturate(0.82) contrast(1.06) brightness(0.92);
}
.plate:hover .plate__img {
  transform: scale(1);
  filter: saturate(1) contrast(1.02) brightness(1);
}
/* Crop hints, since a club shot is rarely centred on its subject. */
.plate__img--top { background-position: center 18%; }
.plate__img--upper { background-position: center 32%; }
.plate__img--lower { background-position: center 70%; }
.plate__img--left { background-position: 28% center; }
.plate__img--right { background-position: 74% center; }

/* Vector fallback composition, visible when no photo is set */
.plate__art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(232,189,169,0.26), transparent 56%),
    radial-gradient(90% 65% at 18% 112%, rgba(142,36,56,0.48), transparent 62%),
    radial-gradient(70% 50% at 82% 88%, rgba(255,47,86,0.14), transparent 62%),
    linear-gradient(165deg, var(--ink-4), var(--ink));
}
.plate__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg, rgba(244,238,229,0.05) 0 1px, transparent 1px 14px
  );
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.plate__col {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  height: 86%;
  width: auto;
  opacity: 0.22;
  color: var(--marble);
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
}
.plate:hover .plate__col { transform: translateX(-50%) translateY(-3%) scale(1.04); opacity: 0.3; }

/* Out-of-focus warm lights. This is what the background of any photograph
   taken in this room actually looks like, and it costs nothing to draw. */
.plate__bokeh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 14px at 18% 22%, rgba(236,209,139,0.5), transparent 70%),
    radial-gradient(circle 26px at 74% 14%, rgba(255,47,86,0.32), transparent 72%),
    radial-gradient(circle 9px  at 42% 34%, rgba(232,189,169,0.55), transparent 70%),
    radial-gradient(circle 34px at 12% 62%, rgba(142,36,56,0.4), transparent 72%),
    radial-gradient(circle 11px at 88% 44%, rgba(236,209,139,0.42), transparent 70%),
    radial-gradient(circle 18px at 60% 70%, rgba(194,99,122,0.34), transparent 72%),
    radial-gradient(circle 7px  at 30% 8%,  rgba(255,241,244,0.5), transparent 70%),
    radial-gradient(circle 22px at 92% 78%, rgba(200,160,74,0.26), transparent 72%);
  opacity: 1;
  mix-blend-mode: screen;
}
/* Shift the lights per plate so a grid of them never repeats. */
.plate:nth-child(2n) .plate__bokeh { transform: scale(-1, 1) translateY(4%); }
.plate:nth-child(3n) .plate__bokeh { transform: translate(-6%, -5%) scale(1.15); }
.plate:nth-child(5n) .plate__bokeh { transform: scale(-1, 1) translate(8%, 6%); }

/* The figure, as the plate's subject rather than its wallpaper. */
.plate__fig {
  position: absolute;
  bottom: -1%;
  left: 50%;
  height: 86%;
  transform: translateX(-50%);
  opacity: 0.6;
  transition: transform 1.6s var(--ease), opacity 1.6s var(--ease);
}
.plate:hover .plate__fig { transform: translateX(-50%) scale(1.05); opacity: 0.72; }
.plate__fig--off { left: 34%; }
.plate__fig--off2 { left: 68%; }

.plate__veil {
  position: absolute;
  inset: 0;
  /* Now that a figure stands behind it, the caption needs a deeper bed or the
     type competes with her on the short plates. */
  background: linear-gradient(to top, rgba(4,3,6,0.95) 0%, rgba(4,3,6,0.58) 32%, rgba(4,3,6,0.12) 62%, transparent 82%);
}
.plate__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 2;
}
.plate__no {
  position: absolute;
  top: clamp(0.85rem, 1.6vw, 1.4rem);
  right: clamp(0.85rem, 1.6vw, 1.4rem);
  font-family: var(--display);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--brass);
  z-index: 2;
}
.plate__t {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* Brass hairline that draws itself on hover */
.plate__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid var(--brass);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.plate:hover .plate__edge { opacity: 0.8; transform: scale(1); }

/* ---------- 18. FEATURE CARDS ------------------------------------------- */
.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border: 1px solid var(--hairline-2);
  background: linear-gradient(170deg, rgba(27,23,36,0.55), rgba(7,6,10,0.3));
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.fcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,189,169,0.16), rgba(255,47,86,0.05) 46%, transparent 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.fcard:hover { border-color: rgba(200,160,74,0.4); transform: translateY(-4px); }
.fcard:hover::before { opacity: 1; }
.fcard__n {
  font-family: var(--display);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--brass);
}
.fcard__t {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.15;
}
.fcard__p { font-size: 0.9375rem; color: var(--marble-dim); }
.fcard__ico { width: 2rem; height: 2rem; color: var(--brass); opacity: 0.8; }

/* ---------- SHOWCASE (auto-advancing stage reel) ------------------------ */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border-block: 1px solid var(--hairline-2);
}
.showcase__stage {
  position: relative;
  height: clamp(26rem, 80vh, 48rem);
}

.shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.shot.is-on { opacity: 1; pointer-events: auto; }

/* These photographs are portrait and square; the stage is wide. Cropping with
   `cover` threw away more than half of every frame, so the sharp copy is
   CONTAINED and the gutters are filled by a blown-up, blurred copy of the same
   image. Nothing is lost and the band still reads full-bleed. */
.shot__blur {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(42px) saturate(0.7) brightness(0.42);
  transform: scale(1.12);
}
/* The transform lives on an inner layer so the slow push-in never drags the
   caption along with it. */
.shot__img {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(1.04) brightness(0.94);
  transform: scale(1);
  transition: transform 5s linear;
}
.shot.is-on .shot__img { transform: scale(1.035); }

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(4,3,6,0.92) 0%, rgba(4,3,6,0.34) 26%, transparent 58%),
    linear-gradient(to right, rgba(4,3,6,0.55), transparent 38%);
}
.shot__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  max-width: min(34rem, 88%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.9s var(--ease) 0.25s, opacity 0.9s var(--ease) 0.25s;
}
.shot.is-on .shot__cap { transform: none; opacity: 1; }
/* On a phone the arrows share the bottom edge with the caption: stop the
   caption short of them so a long title wraps instead of running under. */
@media (max-width: 47.99rem) {
  .shot__cap { max-width: calc(100% - 8rem); }
}
.shot__t {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* Controls ------------------------------------------------------------- */
.showcase__ui {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.showcase__count {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--marble-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.showcase__nav {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  color: var(--marble);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.showcase__nav:hover { border-color: var(--brass); color: var(--brass-lit); background: rgba(200,160,74,0.08); }
.showcase__nav svg { width: 15px; height: 15px; }
.showcase__nav--prev svg { transform: scaleX(-1); }

/* Tick per slide, doubling as the progress read-out. */
.showcase__ticks {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding-inline: 0;
}
.tick {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(244, 238, 229, 0.14);
  overflow: hidden;
  cursor: pointer;
}
.tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transform-origin: left;
  transform: scaleX(0);
}
.tick.is-done::after { transform: scaleX(1); }
.tick.is-live::after { animation: tickFill var(--shot-dur, 3900ms) linear forwards; }
@keyframes tickFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.showcase.is-held .tick.is-live::after { animation-play-state: paused; }
.showcase.is-held .shot.is-on .shot__img { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .shot.is-on .shot__img { transform: none; }
  .tick.is-live::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 47.99rem) {
  .showcase__stage { height: clamp(22rem, 62vh, 30rem); }
  .showcase__count { display: none; }
}

/* ---------- 19. HORIZONTAL SCROLL RAIL ---------------------------------- */
.rail { position: relative; }
@media (min-width: 62rem) {
  .rail { height: 340vh; }
  .rail__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .rail__track {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    padding-inline: var(--gutter);
    will-change: transform;
  }
  .rail__card { width: clamp(20rem, 27vw, 30rem); flex: none; }
}
/* Mobile: swipeable row */
@media (max-width: 61.99rem) {
  .rail__sticky { overflow: visible; }
  .rail__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__card { width: min(78vw, 22rem); flex: none; scroll-snap-align: center; }
}

/* Post card: one of the club's Instagram posts, shown at its own 4:5. It
   already carries its headline, so the card is just the image and a frame. */
.postcard {
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline-2);
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color 0.6s var(--ease);
}
.postcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.postcard:hover, .postcard:focus-visible { border-color: rgba(200,160,74,0.45); }
.postcard:hover img { transform: scale(1.025); }
@media (min-width: 62rem) {
  /* Keep a 4:5 card inside the pinned viewport on short laptop screens. */
  .rail__card.postcard { width: min(clamp(20rem, 27vw, 30rem), calc((100svh - 22rem) * 0.8)); }
}
@media (prefers-reduced-motion: reduce) { .postcard img { transition: none; } }

/* Night card */
.night {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline-2);
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color 0.6s var(--ease);
}
.night:hover { border-color: rgba(200,160,74,0.45); }
.night__top {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.night__day {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,238,229,0.35);
  z-index: 2;
  transition: -webkit-text-stroke-color 0.6s var(--ease), color 0.6s var(--ease);
}
.night:hover .night__day { color: rgba(236,209,139,0.14); -webkit-text-stroke-color: rgba(236,209,139,0.6); }
.night__body {
  padding: clamp(1.25rem, 2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}
.night__name {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
}
.night__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 0.8rem;
  margin-top: auto;
  border-top: 1px solid var(--hairline-2);
}

/* ---------- 20. VIP TIERS ----------------------------------------------- */
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--hairline);
  background: linear-gradient(175deg, rgba(27,23,36,0.7), rgba(7,6,10,0.5));
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.7s var(--ease), border-color 0.7s var(--ease);
}
.tier:hover { transform: translateY(-6px); border-color: rgba(200,160,74,0.5); }
.tier--feature {
  border-color: var(--brass);
  background: linear-gradient(175deg, rgba(142,36,56,0.34), rgba(90,66,20,0.28) 52%, rgba(7,6,10,0.78));
}
.tier__flag {
  position: absolute;
  top: 0; right: 0;
  padding: 0.4rem 0.9rem;
  background: var(--brass);
  color: var(--ink);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.tier__name {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.05;
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline-2);
}
.tier__amt {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
}
.tier__per { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--marble-faint); }
.tier__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.4rem 0 2rem;
  font-size: 0.9375rem;
  color: var(--marble-dim);
}
.tier__li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.45; }
.tier__li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.6rem;
  background: var(--brass);
  transform: rotate(45deg);
}
.tier__cta { margin-top: auto; }

/* ---------- 21. LISTS / SPECS / MENU ------------------------------------ */
.spec {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-2);
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--hairline-2);
  align-items: baseline;
  transition: background-color 0.5s var(--ease), padding-inline 0.5s var(--ease);
}
@media (min-width: 40rem) {
  .spec__row { grid-template-columns: 11rem minmax(0, 1fr) auto; }
}
.spec__row:hover { background: rgba(244,238,229,0.028); }
.spec__k { font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.spec__v { color: var(--marble); }
.spec__v small { display: block; color: var(--marble-faint); font-size: 0.8125rem; margin-top: 0.2rem; }
.spec__x {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--marble-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spec__row.is-closed .spec__v { color: var(--marble-faint); }
.spec__row.is-today { background: rgba(200,160,74,0.07); }
.spec__row.is-today .spec__k::after {
  content: " · tonight";
  color: var(--brass-lit);
}

/* Menu group */
.mgroup { display: flex; flex-direction: column; gap: 0.25rem; }
.mgroup__h {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.mgroup__h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.mitem {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hairline-2);
}
.mitem__n { color: var(--marble); font-size: 0.9375rem; }
.mitem__n em { display: block; font-style: normal; font-size: 0.8125rem; color: var(--marble-faint); }
.mitem__d {
  flex: 1;
  border-bottom: 1px dotted rgba(244,238,229,0.16);
  transform: translateY(-0.25rem);
}
.mitem__p {
  font-family: var(--display);
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A list of names with no prices (the bar's pour list): two columns of
   labels under a group heading, so a long list stays compact. */
.mnames {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.mnames li {
  break-inside: avoid;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--hairline-2);
  color: var(--marble);
  font-size: 0.9375rem;
}
.mnames li em { font-style: normal; color: var(--marble-faint); font-size: 0.8125rem; }

/* ---------- 22. PULL QUOTE / EDITORIAL ---------------------------------- */
.pull {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--brass);
}
.pull__q {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1.24;
  color: var(--marble);
}
.pull__c { margin-top: 1.25rem; }

.editorial { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 62rem) {
  .editorial { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .editorial--rev > :first-child { order: 2; }
}
.prose { display: flex; flex-direction: column; gap: 1.25rem; max-width: 40rem; }
.prose p { color: var(--marble-dim); }
.prose p strong { color: var(--marble); font-weight: 400; }
.prose h3 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
}
.prose ul { display: flex; flex-direction: column; gap: 0.6rem; }
.prose li { display: flex; gap: 0.8rem; color: var(--marble-dim); line-height: 1.5; }
.prose li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.6rem;
  background: var(--brass);
  transform: rotate(45deg);
}

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  border: 1px solid var(--hairline-2);
}
.stats__c {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border-right: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stats__n {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
}
.stats__l { font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--marble-faint); }

/* ---------- 23. BANDS --------------------------------------------------- */
.band {
  position: relative;
  overflow: clip;
  background: var(--ink-2);
}
.band--brass {
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(200,160,74,0.22), transparent 55%),
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.band--blood {
  background:
    radial-gradient(110% 130% at 85% 10%, rgba(142,36,56,0.52), transparent 58%),
    radial-gradient(80% 100% at 12% 96%, rgba(194,99,122,0.22), transparent 62%),
    linear-gradient(160deg, var(--ink-3), var(--ink));
}

/* Velvet: a deep wine ground with a raking sheen and vertical pile, for the
   one or two places on a page that should feel like fabric rather than paint. */
.band--velvet {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(232,189,169,0.16), transparent 58%),
    radial-gradient(90% 120% at 88% 110%, rgba(255,47,86,0.14), transparent 60%),
    linear-gradient(168deg, var(--wine) 0%, #3a0d18 46%, var(--ink) 100%);
}
.band--velvet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.10) 0 3px,
    rgba(255, 255, 255, 0.014) 3px 9px
  );
  mask-image: radial-gradient(85% 75% at 50% 45%, #000, transparent);
  opacity: 0.5;
}
.band__inner { position: relative; z-index: 2; }

/* CTA block */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(4.5rem, 12vh, 9rem);
  overflow: clip;
}
.cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

/* ---------- 24. FORMS --------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field__l { font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--marble-faint); }
.field__i,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  background: rgba(244,238,229,0.035);
  border: 1px solid var(--hairline);
  color: var(--marble);
  font-size: 0.9375rem;
  font-weight: 300;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field__i::placeholder, .field textarea::placeholder { color: rgba(244,238,229,0.28); }
.field__i:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(200,160,74,0.06);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c8a04a' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}
.field select option { background: var(--ink-2); color: var(--marble); }
.field textarea { resize: vertical; min-height: 7rem; }
.form__note { font-size: 0.75rem; color: var(--marble-faint); line-height: 1.6; }
.form__ok {
  display: none;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(110,231,160,0.35);
  background: rgba(110,231,160,0.07);
  font-size: 0.875rem;
  color: #a9e9c3;
}
.form.is-sent .form__ok { display: block; }

/* Inline signup */
.signup { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 30rem; }
.signup .field__i { flex: 1; min-width: 12rem; }

/* ---------- 25. FAQ ----------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline-2); }
.faq__item { border-bottom: 1px solid var(--hairline-2); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.4s var(--ease);
}
.faq__q:hover { color: var(--brass-lit); }
.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--brass);
  transition: transform 0.5s var(--ease), opacity 0.4s;
}
.faq__sign::before { top: 50%; left: 0; width: 14px; height: 1px; margin-top: -0.5px; }
.faq__sign::after { left: 50%; top: 0; width: 1px; height: 14px; margin-left: -0.5px; }
.faq__item.is-open .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--marble-dim);
  max-width: 48rem;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: 0.9375rem;
}

/* ---------- 26. MAP ----------------------------------------------------- */
.map {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--hairline-2);
  background: var(--ink-2);
  overflow: hidden;
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -100%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.map__pin-dot {
  width: 12px; height: 12px;
  background: var(--brass-lit);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(236,209,139,0.6);
  animation: pulse 2.6s var(--ease) infinite;
}
.map__pin-lab {
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-lit);
  white-space: nowrap;
  background: rgba(7,6,10,0.85);
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(200,160,74,0.3);
}
.map__legend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: clamp(0.85rem, 1.6vw, 1.25rem);
  background: linear-gradient(to top, rgba(7,6,10,0.95), transparent);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marble-faint);
}

/* Walk-distance list */
.near { display: grid; gap: 0; border-top: 1px solid var(--hairline-2); }
.near__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--hairline-2);
}
.near__n { font-size: 0.9375rem; color: var(--marble); }
.near__d {
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--brass);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 27. GALLERY MASONRY ----------------------------------------- */
.mosaic { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(6, 1fr); } }
.mosaic > * { grid-column: span 1; }
@media (min-width: 48rem) {
  .m-2 { grid-column: span 2; }
  .m-3 { grid-column: span 3; }
  .m-4 { grid-column: span 4; }
  .m-6 { grid-column: span 6; }
}

/* ---------- 28. FOOTER -------------------------------------------------- */
.foot {
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--hairline-2);
  background: var(--ink);
  padding-top: clamp(3.5rem, 8vh, 6rem);
}
.foot__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
@media (min-width: 52rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 72rem) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot__brand { display: flex; flex-direction: column; gap: 1.1rem; }
.foot__mark { width: 110px; height: 110px; }
.foot__h { font-size: 0.625rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.1rem; }
.foot__col { display: flex; flex-direction: column; }
.foot__l {
  font-size: 0.875rem;
  color: var(--marble-dim);
  padding-block: 0.35rem;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
  width: fit-content;
}
.foot__l:hover { color: var(--brass-lit); transform: translateX(4px); }
.foot__addr { font-size: 0.875rem; color: var(--marble-dim); line-height: 1.75; font-style: normal; }
.foot__addr a:hover { color: var(--brass-lit); }

.socials { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  color: var(--marble-dim);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.social:hover { color: var(--brass-lit); border-color: var(--brass); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; }

.foot__bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline-2);
  font-size: 0.75rem;
  color: var(--marble-faint);
}
.foot__bar a:hover { color: var(--marble-dim); }
.foot__wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.5rem, 17vw, 16rem);
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,238,229,0.09);
  margin-bottom: -0.16em;
  pointer-events: none;
  user-select: none;
}

/* ---------- 29. MISC ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marble-dim);
  transition: border-color 0.4s, color 0.4s;
}
.chip:hover { border-color: var(--brass); color: var(--brass-lit); }
.chip--brass { border-color: rgba(200,160,74,0.45); color: var(--brass-lit); }

.callout {
  display: flex;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid rgba(200,160,74,0.28);
  background: rgba(200,160,74,0.055);
  font-size: 0.9375rem;
  color: var(--marble-dim);
  line-height: 1.6;
}
.callout svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--brass); margin-top: 0.2rem; }

.u-center { text-align: center; }
.u-mt1 { margin-top: clamp(1rem, 2vw, 1.5rem); }
.u-mt2 { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.u-mt3 { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.u-mxa { margin-inline: auto; }
.u-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
.u-rel { position: relative; z-index: 2; }