/* ==========================================================================
   EVENTS MUSIC MAX
   Black canvas, white type. No colour anywhere — that is the whole design.
   ========================================================================== */

/* ---------- typefaces ----------------------------------------------------
   LUXENA is a paid font (expressivefonts.com). Buy it, export a web version,
   and drop the file in as  fonts/luxena.woff2  — it then takes over the whole
   site automatically, no code change needed.

   Until then the display face falls through to Bodoni Moda: a true high
   contrast didone, self-hosted, SIL Open Font Licence. Same family of shapes
   as Luxena — tall caps, hairline thins, sharp flat serifs.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Luxena";
  src:url("/fonts/luxena.woff2") format("woff2"),
      url("/fonts/luxena.woff")  format("woff");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("/fonts/bodoni-moda-latin-var.woff2") format("woff2");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("/fonts/bodoni-moda-italic-latin-var.woff2") format("woff2");
  font-weight:400 900;
  font-style:italic;
  font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --black:#000;
  --white:#fff;

  --ink-1: rgba(255,255,255,1);
  --ink-2: rgba(255,255,255,.72);
  --ink-3: rgba(255,255,255,.50);
  --ink-4: rgba(255,255,255,.32);
  --line:  rgba(255,255,255,.13);

  /* the accent is white — the design is black and white, nothing else */
  --accent:      #ffffff;
  --accent-soft: rgba(255,255,255,.78);
  --accent-line: rgba(255,255,255,.40);

  /* display — the logo, and only the logo. The serif is a display cut: it looks
     expensive at 30px+ and gets spindly and hard to read at menu sizes. */
  --ff-display: "Luxena", "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  /* everything else — menus, titles, body copy */
  --ff: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  --edge: clamp(18px, 3.4vw, 52px);
  --navh: clamp(62px, 7.2vh, 88px);
  --toph: clamp(64px, 11vh, 116px);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--ff);
  font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  overscroll-behavior:none;
}
img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1px solid var(--accent-soft); outline-offset:4px; }
::selection{ background:var(--accent); color:#000; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:fixed; inset:0; z-index:0; background:#000; overflow:hidden; }

.hero__layer{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1s var(--ease);
  will-change:opacity;
}
.hero__layer.is-active{ opacity:1; }

.hero__layer img,
.hero__layer video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos, 50% 42%);
}
/* slow drift so a still frame never feels dead */
.hero__layer img{
  animation:kenburns 34s ease-in-out infinite alternate;
  transform-origin:var(--pos, 50% 42%);
}
@keyframes kenburns{
  from{ transform:scale(1.005); }
  to{   transform:scale(1.06); }
}

/* legibility scrim: dark at top and bottom, open in the middle */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.50) 15%,
      rgba(0,0,0,.14) 33%,
      rgba(0,0,0,.30) 54%,
      rgba(0,0,0,.74) 76%,
      rgba(0,0,0,.95) 100%),
    radial-gradient(122% 80% at 50% 44%, rgba(0,0,0,0) 34%, rgba(0,0,0,.52) 100%),
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20));
}
/* barely-there film grain */
.hero__grain{
  position:absolute; inset:-50%;
  pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}    20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)}  100%{transform:translate(0,0)}
}

/* ==========================================================================
   WORDMARK  —  italic lowercase "eventsmusic" against roman caps "MAX".
   No glow. The contrast of the two cuts is the whole idea.
   ========================================================================== */
/* wordmark + gig count share one fixed, centred stack */
.brand{
  position:fixed; z-index:38;   /* stays above the menu overlay — always a way home */
  top:clamp(20px, 3.6vh, 44px);
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* the number of events played — quiet, directly under the name */
.stat{
  margin:.75em 0 0;
  font-size:clamp(9px, .78vw, 11px);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
  white-space:nowrap;
  transition:opacity .45s ease;
}
.stat:empty{ display:none; }
.stat b{ color:var(--white); font-weight:500; }
/* section pages get the name only — the count belongs to the home screen */
body.is-page .stat{ opacity:0; }

.wordmark{
  display:flex; align-items:baseline;
  gap:.15em;                    /* ~4px on a phone, scales up gently */
  white-space:nowrap;
  font-family:var(--ff-display);
  font-size:clamp(26px, 3.9vw, 54px);
  line-height:1;
  color:var(--white);
  text-shadow:0 1px 26px rgba(0,0,0,.6);
}

/* lowercase, italic — sized up relative to MAX so it holds its own
   while the capitals came down */
.wordmark__lower{
  font-style:italic;
  font-weight:400;
  font-size:.60em;
  letter-spacing:.015em;
  text-transform:lowercase;
  color:rgba(255,255,255,.9);
}

/* the name — roman caps, lightly tracked */
.wordmark__max{
  font-style:normal;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.10em;
  /* tracking adds space after the last letter; pull it back so the
     lockup stays optically centred */
  margin-right:-.10em;
}

/* ==========================================================================
   LANGUAGE SWITCH — top left, mirrors the menu control opposite it
   ========================================================================== */
.langs{
  position:fixed; z-index:40;
  top:clamp(20px, 3.6vh, 44px);
  left:var(--edge);
  display:flex; align-items:center; gap:.55em;
  height:26px;
  font-size:clamp(10px, .84vw, 12px);
  font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}
.langs a{
  color:var(--ink-4);
  transition:color .3s ease;
}
.langs a:hover{ color:var(--ink-2); }
.langs a[aria-current="true"]{ color:var(--white); }
.langs span{ color:rgba(255,255,255,.22); }

/* ==========================================================================
   TOP-RIGHT CONTROL
   ========================================================================== */
.topctl{
  position:fixed; z-index:40;
  top:clamp(20px, 3.6vh, 44px);
  right:var(--edge);
  display:flex; align-items:center; gap:12px;
  height:26px;
  color:var(--ink-3);
  transition:color .3s ease, opacity .35s ease;
}
.topctl:hover{ color:var(--white); }
.topctl__label{
  text-transform:uppercase; letter-spacing:.22em;
  font-size:clamp(9px,.82vw,11px); font-weight:500;
}
.topctl__bars{ position:relative; width:22px; height:12px; flex:none; }
.topctl__bars i{
  position:absolute; left:0; width:100%; height:1px;
  background:currentColor;
  transition:transform .42s var(--ease), opacity .2s ease;
}
.topctl__bars i:nth-child(1){ top:2px; }
.topctl__bars i:nth-child(2){ top:9px; }
body.is-x .topctl__bars i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.is-x .topctl__bars i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* desktop has the bottom nav, so the control only appears to close a page */
@media (min-width:861px){
  .topctl{ opacity:0; pointer-events:none; }
  body.is-x .topctl{ opacity:1; pointer-events:auto; }
  .topctl__bars{ width:16px; }
}

/* ==========================================================================
   ACT SWITCH
   ========================================================================== */
.acts{
  position:fixed; z-index:20;
  left:0; right:0;
  bottom:calc(var(--navh) + clamp(20px, 4.4vh, 60px));
  display:flex; justify-content:center; align-items:baseline;
  gap:clamp(30px, 7vw, 130px);
  padding:0 var(--edge);
  transition:opacity .45s ease, transform .55s var(--ease);
}
body.is-page .acts{ opacity:0; pointer-events:none; transform:translateY(14px); }

.act{
  position:relative;
  color:var(--ink-3);
  text-shadow:0 1px 18px rgba(0,0,0,.75);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(13px, 1.55vw, 22px);
  font-weight:500;
  padding:8px 2px 12px;
  white-space:nowrap;
  transition:color .5s ease, text-shadow .5s ease;
}
.act:hover{ color:var(--ink-2); }
.act__plus{ color:inherit; opacity:.7; padding:0 .1em; }
.act[aria-pressed="true"]{
  color:var(--white);
  text-shadow:0 1px 20px rgba(0,0,0,.8);
}
.act::after{
  content:""; position:absolute; left:0; right:0; bottom:2px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .6s var(--ease);
}
.act[aria-pressed="true"]::after{ transform:scaleX(1); }

/* ==========================================================================
   BOTTOM NAV (desktop)
   ========================================================================== */
.bottomnav{
  position:fixed; z-index:30;
  left:0; right:0; bottom:0;
  height:var(--navh);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--edge);
}
.navlink{
  color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:clamp(12px, 1.1vw, 17px);
  font-weight:500;
  padding:10px 0;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
  transition:color .3s ease;
}
.navlink:hover{ color:var(--white); }
.navlink[aria-current="page"]{ color:var(--white); }

/* ==========================================================================
   SECTION PAGE
   ========================================================================== */
.page{
  position:fixed; inset:0; z-index:10;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--toph) var(--edge) calc(var(--navh) + 112px);
  background:rgba(0,0,0,.94);
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .page{
    background:rgba(0,0,0,.84);
    -webkit-backdrop-filter:blur(34px) saturate(.7);
    backdrop-filter:blur(34px) saturate(.7);
  }
}
.page.is-open{ opacity:1; visibility:visible; }

/* The wordmark and the bottom nav float above the scrolling page, so content
   would otherwise slide underneath them and collide. These fade it out. */
.pagefade{
  position:fixed; left:0; right:0; z-index:25;
  pointer-events:none;
  opacity:0; transition:opacity .45s ease;
}
body.is-page .pagefade{ opacity:1; }
/* solid across the band the title / nav actually occupy, then a soft fade —
   so nothing ever reads through behind them */
/* Solid black behind the logo, then clears completely by the time page
   content starts — otherwise it sits over the section titles and greys them.
   --brandh and --toph are measured in app.js. */
.pagefade--top{
  top:0; height:var(--toph);
  background:linear-gradient(to bottom,
    rgba(0,0,0,.98) 0,
    rgba(0,0,0,.98) var(--brandh),
    rgba(0,0,0,0) 100%);
}
.pagefade--bottom{
  bottom:0; height:calc(var(--navh) + 92px);
  background:linear-gradient(to top,
    rgba(0,0,0,.98) 0,
    rgba(0,0,0,.98) calc(var(--navh) + 14px),
    rgba(0,0,0,.50) calc(var(--navh) + 48px),
    rgba(0,0,0,0) 100%);
}

.wrap{ max-width:1180px; margin:0 auto; }

.ptitle{
  margin:0 0 clamp(26px, 4.4vh, 52px);
  text-align:center;
  text-transform:uppercase;
  font-size:clamp(28px, 5.6vw, 70px);
  font-weight:600;
  letter-spacing:.07em;
  line-height:1;
}

.lede{
  max-width:62ch; margin:0 auto clamp(30px,5vh,56px);
  text-align:center;
  color:var(--ink-2);
  font-size:clamp(14px, 1.5vw, 18px);
  line-height:1.75;
  letter-spacing:.01em;
}

/* tab row — "Videos / Photos / DJ Sets" */
.tabs{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:.5em;
  margin:0 0 clamp(28px,4.6vh,54px);
  font-size:clamp(14px, 1.55vw, 20px);
  font-weight:500;
  letter-spacing:.05em;
}
.tabs a{ color:var(--ink-4); transition:color .3s ease; }
.tabs a:hover{ color:var(--ink-2); }
.tabs a[aria-current="page"]{ color:var(--white); }
.tabs span{ color:var(--ink-4); user-select:none; }

/* ---------- gallery categories ---------- */
.cats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px clamp(10px,1.4vw,18px);
  margin:0 0 clamp(26px,4vh,40px);
}
.cat{
  display:inline-flex; align-items:baseline; gap:.5em;
  padding:8px 2px;
  font-size:clamp(11px,1vw,13px); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.cat:hover{ color:var(--ink-2); }
.cat[aria-current="true"]{ color:var(--white); border-bottom-color:var(--white); }
.cat i{ font-style:normal; font-size:.82em; color:var(--ink-4); letter-spacing:.06em; }
.cat[aria-current="true"] i{ color:var(--ink-3); }

/* the catalogue number, so you can say "delete V037" */
.tag{
  position:absolute; top:8px; left:8px; z-index:2;
  padding:3px 7px;
  font-size:10px; font-weight:500; letter-spacing:.1em;
  color:var(--white); background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  pointer-events:none;
}
.pgrid button{ position:relative; }

/* ---------- videos ---------- */
.vgrid{
  display:grid; gap:clamp(10px,1.5vw,18px);
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.vcard{ margin:0; }
.vcard__frame{
  position:relative; width:100%;
  aspect-ratio:4/5;              /* most clips are phone-shot portrait */
  background:#0a0a0a; overflow:hidden;
  border:1px solid var(--line);
}
.vcard__frame[data-orient="portrait"]{ aspect-ratio:9/16; max-height:78vh; }
.vcard__frame img,
.vcard__frame video,
.vcard__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  object-fit:cover;
}
.vcard__frame video{ object-fit:contain; background:#000; }
.vcard__play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.42));
  transition:background .35s ease;
}
.vcard__play:hover{ background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.3)); }
.vcard__play::before{
  content:""; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .45s var(--ease), box-shadow .45s ease, border-color .3s;
}
.vcard__play::after{
  content:""; position:absolute;
  width:0; height:0; margin-left:4px;
  border-left:15px solid rgba(255,255,255,.95);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.vcard__play:hover::before{
  transform:scale(1.1);
  border-color:var(--accent-soft);
  box-shadow:0 0 26px rgba(255,255,255,.28);
}
.vcard figcaption{
  display:flex; align-items:baseline; gap:8px;
  padding:9px 2px 0;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4);
}
/* the catalogue number — stays visible while the clip plays */
.vcard figcaption b{
  font-weight:500; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.vcard figcaption b{ display:block; font-weight:500; color:var(--white); }
.vcard figcaption span{ color:var(--ink-4); }

/* ---------- photos ---------- */
.pgrid{ column-count:3; column-gap:clamp(10px,1.5vw,18px); }
@media (max-width:960px){ .pgrid{ column-count:2; } }
@media (max-width:540px){ .pgrid{ column-count:1; } }
.pgrid figure{ break-inside:avoid; margin:0 0 clamp(10px,1.5vw,18px); }
.pgrid button{
  display:block; width:100%; position:relative;
  overflow:hidden; background:#0a0a0a;
}
.pgrid img{
  width:100%; height:auto;
  transition:transform .8s var(--ease), opacity .5s ease;
  opacity:.9;
}
.pgrid button:hover img{ transform:scale(1.045); opacity:1; }

/* ---------- dj sets ---------- */
.sets{ display:grid; gap:18px; max-width:900px; margin:0 auto; }
.sets iframe{ width:100%; height:166px; border:0; background:#0a0a0a; }
.setcard{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 24px; border:1px solid var(--line);
  transition:border-color .35s ease, background .35s ease;
}
.setcard:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); }
.setcard b{ font-weight:500; letter-spacing:.06em; }
.setcard span{ color:var(--ink-4); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- self-hosted mix player ---------- */
.mix{
  display:flex; align-items:center; gap:clamp(14px,2.2vw,22px);
  padding:clamp(16px,2.4vh,22px) 4px;
  border-top:1px solid var(--line);
}
.sets > .mix:last-child{ border-bottom:1px solid var(--line); }

.mix__play{
  position:relative; flex:none;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  transition:border-color .3s ease, background .3s ease;
}
.mix__play:hover{ border-color:var(--accent); background:rgba(255,255,255,.08); }
/* triangle */
.mix__play::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-42%,-50%);
  border-left:12px solid var(--white);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
/* two bars when it's the one playing */
.mix.is-playing .mix__play::before{
  transform:translate(-50%,-50%);
  border:0; width:4px; height:14px;
  background:var(--white); box-shadow:6px 0 0 var(--white);
  margin-left:-3px;
}
.mix.is-live .mix__play{ border-color:var(--accent); }

.mix__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px; }
.mix__body b{
  font-size:clamp(15px,1.7vw,19px); font-weight:500; letter-spacing:.02em;
  color:var(--white);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mix__bar{
  position:relative; height:3px; cursor:pointer;
  background:rgba(255,255,255,.14);
}
/* a taller invisible hit area — 3px is impossible to hit with a thumb */
.mix__bar::after{ content:""; position:absolute; inset:-12px 0; }
.mix__fill{
  display:block; height:100%; width:0;
  background:var(--accent-soft);
  transition:width .15s linear;
}
.mix__time{
  flex:none; font-size:12px; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--ink-4);
}
@media (max-width:560px){
  .mix{ gap:14px; }
  .mix__play{ width:40px; height:40px; }
  .mix__time{ display:none; }
}

/* ---------- info ---------- */
.info{ max-width:900px; margin:0 auto; }
.info h2{
  margin:clamp(34px,5vh,60px) 0 16px;
  font-size:clamp(11px,1vw,13px); font-weight:500;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--ink-3);
}
.info p{ margin:0 0 16px; color:var(--ink-2); line-height:1.8; font-size:clamp(14px,1.45vw,17px); }
.info ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.info li{
  padding-bottom:12px; border-bottom:1px solid var(--line);
  color:var(--ink-2); line-height:1.6; font-size:clamp(14px,1.45vw,17px);
}
.info li b{ color:var(--white); font-weight:500; }

/* ---------- upcoming: calendar beside the detail ---------- */
.upco{
  max-width:1080px; margin:0 auto;
  display:grid; align-items:start;
  gap:clamp(28px,4vw,56px);
}
@media (min-width:860px){
  .upco{ grid-template-columns:minmax(300px,400px) minmax(0,1fr); }
}

.cal{ margin:0; }
.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(14px,2.4vh,22px);
}
.cal__month{
  font-size:clamp(13px,1.4vw,17px); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--white);
}
.cal__nav{
  width:38px; height:38px; font-size:22px; line-height:1;
  color:var(--ink-3); transition:color .3s ease;
}
.cal__nav:hover:not(:disabled){ color:var(--white); }
.cal__nav:disabled{ opacity:.18; cursor:default; }

.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal__wd{
  padding-bottom:10px;
  text-align:center; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4);
}
.cal__day{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:clamp(12px,1.2vw,14px); font-variant-numeric:tabular-nums;
  color:var(--ink-4); border:1px solid transparent;
  border-radius:2px;
}
.cal__day--pad{ visibility:hidden; }
/* a day with something on it */
.cal__day--on{
  color:var(--white); font-weight:500;
  border-color:rgba(255,255,255,.20);
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.cal__day--on:hover{ border-color:var(--accent-soft); }
.cal__day--on.is-picked{
  background:var(--accent); border-color:var(--accent);
  color:#000;
}

/* a booked private date — greyed out, no colour, reads as "taken" */
.cal__day--private{
  color:var(--ink-4);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.10);
}
.cal__day--private:hover{ border-color:rgba(255,255,255,.30); }
.cal__day--private.is-picked{
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.34);
  color:var(--ink-2);
}

/* ---------- upcoming: the picked date ---------- */
.ev{
  display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:minmax(0,1fr);
}
/* a private booking says only that the date is taken */
.ev--private .ev__when{ color:var(--ink-3); }
.ev--private h2{ color:var(--ink-2); }
.ev__pic{ overflow:hidden; background:#0a0a0a; }
.ev__pic img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.ev__txt{ display:flex; flex-direction:column; gap:10px; }
.ev__when{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.ev__txt h2{
  margin:0; font-size:clamp(19px,2.4vw,28px); font-weight:500; letter-spacing:.01em;
  color:var(--white); text-transform:none;
}
.ev__txt p{ margin:0; font-size:14px; letter-spacing:.04em; color:var(--ink-2); }
.ev__note{ color:var(--ink-4) !important; }
.ev__go{
  margin-top:6px; align-self:flex-start;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--line);
  padding-bottom:4px; transition:color .3s ease, border-color .3s ease;
}
.ev__go:hover{ color:var(--accent-soft); border-color:var(--accent-soft); }

/* inline link inside the info copy */
.inlink{
  white-space:nowrap;
  color:var(--accent-soft);
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .3s ease;
}
.inlink:hover{ border-color:var(--accent-soft); }

/* ---------- reviews ---------- */
.reviews{ max-width:820px; margin:0 auto; display:grid; gap:clamp(38px,6vh,72px); }
.review blockquote{
  margin:0 0 18px;
  font-size:clamp(18px,2.3vw,28px);
  line-height:1.5; font-weight:400; letter-spacing:.005em;
  color:var(--white);
}
.review blockquote::before{ content:"\201C"; color:var(--ink-4); }
.review blockquote::after{ content:"\201D"; color:var(--ink-4); }
.review__by{ display:flex; align-items:center; gap:14px; }
.review__face{
  width:40px; height:40px; flex:none;
  border-radius:50%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.review cite{
  display:block; font-style:normal;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2);
}
.review__meta{
  display:inline-flex; align-items:center; gap:.6em;
  margin-left:.9em;
  color:var(--ink-4);
}
.review__meta i{ font-style:normal; color:rgba(255,255,255,.22); }
a.review__at{ color:var(--ink-4); transition:color .3s ease; }
a.review__at:hover{ color:var(--accent-soft); }

/* ---------- book ---------- */
.book{ max-width:760px; margin:0 auto; display:grid; gap:2px; }
.bookrow{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:clamp(22px,3.4vh,34px) 4px;
  border-top:1px solid var(--line);
  transition:padding-left .45s var(--ease), color .3s ease;
}
.book .bookrow:last-child{ border-bottom:1px solid var(--line); }
a.bookrow:hover{ padding-left:14px; }
.bookrow__k{
  font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.14em; text-transform:uppercase;
  font-weight:500;
  color:var(--ink-2); flex:none;
}
.bookrow__v{
  font-size:clamp(17px,2.3vw,29px); font-weight:500; letter-spacing:.005em;
  color:var(--white);
  text-align:right; word-break:break-word;
}
a.bookrow:hover .bookrow__v{ color:var(--accent-soft); }

/* ---------- empty state ---------- */
.empty{
  max-width:56ch; margin:clamp(30px,8vh,90px) auto;
  text-align:center; color:var(--ink-4);
  font-size:clamp(13px,1.4vw,16px); line-height:1.8;
  letter-spacing:.03em;
}
.empty strong{
  display:block; margin-bottom:10px;
  color:var(--ink-2); font-weight:500;
  text-transform:uppercase; letter-spacing:.22em; font-size:12px;
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
.menu{
  position:fixed; inset:0; z-index:35;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:clamp(18px,3.4vh,30px);
  background:rgba(0,0,0,.96);
  opacity:0; visibility:hidden;
  will-change:opacity;
  transition:opacity .45s ease, visibility .45s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .menu{ background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); }
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__item{
  text-transform:uppercase;
  font-size:clamp(22px,6.6vw,35px);
  font-weight:500; letter-spacing:.12em;
  color:rgba(255,255,255,.86);
  opacity:0; transform:translateY(16px);
  transition:color .3s ease, opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open .menu__item{ opacity:1; transform:none; }
.menu.is-open .menu__item{ transition-delay:calc(.06s + var(--i, 0) * .055s); }
.menu__item:hover,
.menu__item[aria-current="page"]{ color:var(--white); }

/* ==========================================================================
   SWIPE — while a finger is down the menu follows it exactly, so transitions
   are switched off and everything is driven by --menu-p (0 shut, 1 open).
   ========================================================================== */
body.is-dragging .menu{
  transition:none;
  visibility:visible;
  opacity:var(--menu-p);
}
/* The items travel, not the whole sheet — a full-screen panel sliding down
   would sweep the list straight through the wordmark, which sits above it.
   They enter from the direction you swiped, one after another. */
body.is-dragging .menu__item{
  transition:none;
  opacity:clamp(0, (var(--menu-p) - var(--i, 0) * .07) * 5, 1);
}
body.is-dragging .menu.axis-v .menu__item{
  transform:translateY(calc((1 - var(--menu-p)) * -22px));
}
body.is-dragging .menu.axis-h .menu__item{
  transform:translateX(calc((1 - var(--menu-p)) * 30px));
}

/* swapping line-up by dragging: the two pictures are cross-faded by hand,
   so their own transitions have to be out of the way */
body.is-swapping .hero__layer{ transition:none; }

/* the picture behind eases back and dims, so the menu reads as a layer above it */
.hero{ transform-origin:50% 50%; transition:transform .6s var(--ease), filter .6s var(--ease); }
body.menu-open .hero{ transform:scale(.94); filter:brightness(.55); }
body.is-dragging .hero{
  transition:none;
  transform:scale(calc(1 - .06 * var(--menu-p)));
  filter:brightness(calc(1 - .45 * var(--menu-p)));
}
/* the name and the two line-up buttons drift with it */
body.menu-open .acts{ opacity:0; transform:translateY(14px); }
body.is-dragging .acts{
  transition:none;
  opacity:calc(1 - var(--menu-p) * 1.6);
  transform:translateY(calc(var(--menu-p) * 14px));
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:rgba(0,0,0,.96);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ margin:0; padding:clamp(16px,5vh,60px); max-width:100%; max-height:100%; }
.lightbox__stage img{
  max-width:min(94vw, 1400px); max-height:86vh;
  width:auto; height:auto; object-fit:contain;
}
.lightbox__close{
  position:absolute; top:clamp(16px,3vh,32px); right:var(--edge);
  font-size:20px; line-height:1; color:var(--ink-3);
  transition:color .3s ease;
}
.lightbox__close:hover{ color:var(--white); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px;
  font-size:38px; line-height:1; color:var(--ink-3);
  transition:color .3s ease;
}
.lightbox__nav:hover{ color:var(--white); }
.lightbox__nav--prev{ left:max(8px, calc(var(--edge) - 18px)); }
.lightbox__nav--next{ right:max(8px, calc(var(--edge) - 18px)); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:860px){
  :root{ --navh:0px; --toph:clamp(76px, 13vh, 120px); }

  .bottomnav{ display:none; }

  /* icon only — the word "Menu" would run into the wordmark */
  .topctl__label{ display:none; }
  .topctl{ color:var(--ink-2); }

  /* the two act names sit low over the picture, so push the darkness further up */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.44) 13%,
        rgba(0,0,0,.10) 30%,
        rgba(0,0,0,.22) 48%,
        rgba(0,0,0,.62) 70%,
        rgba(0,0,0,.93) 88%,
        rgba(0,0,0,.98) 100%),
      radial-gradient(132% 72% at 50% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,.50) 100%),
      linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18));
  }
  .act{ color:var(--ink-2); }

  .acts{
    bottom:calc(clamp(26px,5vh,54px) + env(safe-area-inset-bottom, 0px));
    flex-direction:column; align-items:center;
    gap:clamp(14px,2.4vh,20px);
  }
  .act{
    font-size:clamp(12px,3.5vw,15px);
    letter-spacing:.2em;
    padding:6px 2px 8px;
  }

  .page{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }

  .vcard__frame[data-orient="portrait"]{ max-height:none; }
  .lightbox__nav{ width:44px; height:44px; font-size:30px; }
}

/* very small phones — keep the wordmark clear of the menu icon */
@media (max-width:360px){
  .wordmark{ font-size:23px; }
  .wordmark__max{ letter-spacing:.08em; margin-right:-.08em; }
}

/* ==========================================================================
   MOTION / CONTRAST PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__grain{ display:none; }
}