/*
Theme Name: Mustache Blackout
Theme URI: https://mustachebangkok.com
Author: Built for Mustache Bangkok
Description: A cold, blue-black room and one acid-green strobe. Hand-built theme for Mustache Bangkok — house & techno on Decho Road, Silom. No page builder: the whole design is this stylesheet plus one small script. Ticketing stays on WooCommerce, table booking stays on the seating plugin; the theme only changes the skin and shortens the road to checkout.
Version: 1.8.3
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mustache-blackout
Tags: dark, one-column, custom-colors, custom-menu, full-width-template, e-commerce
*/

/* ==========================================================================
   0. TOKENS
   Change a colour here and it changes everywhere, including the checkout.
   ========================================================================== */
/* Nothing here comes from the old site. That site was dark-and-gold; warm
   amber is that palette's close cousin, so it is gone too. This is cold
   light: a blue-black room, a hard white-blue strobe, and a blacklight
   violet behind it. */
:root{
  --mb-void:#06080C;          /* blue-black, not warm black */
  --mb-room:#0A0E14;
  --mb-panel:#101720;
  --mb-panel-2:#17202B;
  --mb-bone:#E8EEF4;          /* cool white — never cream */
  --mb-dim:#7A8998;
  --mb-dimmer:#4A5866;
  --mb-strobe:#C8FF2E;        /* acid — the house colour, the only accent */
  --mb-uv:#6E4BFF;            /* blacklight, used sparingly */
  --mb-alarm:#FF2E63;
  --mb-live:#35F0B0;
  --mb-line:rgba(232,238,244,.16);
  --mb-line-soft:rgba(232,238,244,.07);
  --mb-on-strobe:#141A00;     /* text sitting on the accent */
  --mb-glow:0 0 22px rgba(200,255,46,.36), 0 0 70px rgba(200,255,46,.13);
  --mb-grain:.055;
  --mb-scan:.055;
  --mb-torch:.62;

  --mb-bpm:128;
  --mb-beat:.469s;
  --mb-bar:1.875s;
  --mb-mx:50%;
  --mb-my:30%;

  --mb-wrap:1340px;
  --mb-display-font:"Unbounded","Archivo Black",Impact,sans-serif;
  --mb-sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mb-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* House lights up — 4am, everybody out. Toggled by the theme's light switch,
   and used automatically for the print stylesheet. */
:root[data-lights="on"]{
  --mb-void:#E9EDF1;
  --mb-room:#F1F4F7;
  --mb-panel:#E2E8EE;
  --mb-panel-2:#D6DEE6;
  --mb-bone:#0B1016;
  --mb-dim:#596775;
  --mb-dimmer:#8C99A6;
  --mb-strobe:#4E6B00;        /* acid, dropped dark to stay legible on white */
  --mb-uv:#4B22C7;
  --mb-alarm:#C81E4A;
  --mb-live:#067A57;
  --mb-line:rgba(11,16,22,.20);
  --mb-line-soft:rgba(11,16,22,.10);
  --mb-on-strobe:#F7FCE9;
  --mb-glow:none;
  --mb-grain:.02;
  --mb-scan:0;
  --mb-torch:0;
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* html body, not body — Elementor's global "kit" stylesheet loads after the
   theme and sets a plain black body background. Equal specificity, later in the
   cascade, so it won. The ground is meant to be #06080C: a cold blue-black, not
   pure black, and the difference is most of the room's character. */
html body{background:var(--mb-void)}

body{
  margin:0;
  background:var(--mb-void);
  color:var(--mb-bone);
  font-family:var(--mb-sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--mb-strobe)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mb-strobe);outline-offset:3px}

/* Nothing on this site is rounded and nothing casts a shadow. This one rule
   keeps plugin markup in line without hunting it down piece by piece. */
body,body *{border-radius:0 !important}

.mb-wrap{max-width:var(--mb-wrap);margin:0 auto;padding:0 20px}
.mb-skip{position:absolute;left:-9999px}
.mb-skip:focus{left:12px;top:12px;z-index:999;background:var(--mb-strobe);color:var(--mb-on-strobe);padding:10px 14px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ==========================================================================
   2. TYPE
   Display = Unbounded 800. Body = Instrument Sans. Utility = DM Mono.
   None of these were on the old site — that is the point.
   ========================================================================== */
.mb-display,
h1,h2,h3.mb-display{
  font-family:var(--mb-display-font);
  font-weight:800;
  text-transform:uppercase;
  line-height:.85;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.mb-m{
  font-family:var(--mb-mono);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.1em;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.mb-lede{max-width:56ch;color:var(--mb-bone);opacity:.8;font-size:17px;margin:0 0 26px}
.mb-prose{max-width:68ch}
.mb-prose p{color:var(--mb-bone);opacity:.84}
.mb-prose a{color:var(--mb-strobe);border-bottom:1px solid currentColor}

/* ==========================================================================
   3. ATMOSPHERE — grain, scanlines, vignette, torch
   Four fixed overlays. No images, no plugin, ~1 KB.
   ========================================================================== */
.mb-grain,.mb-scan,.mb-vig{position:fixed;inset:0;pointer-events:none;z-index:60}
.mb-grain{
  opacity:var(--mb-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mb-scan{opacity:var(--mb-scan);background:repeating-linear-gradient(to bottom,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
.mb-vig{box-shadow:inset 0 0 240px 40px rgba(0,0,0,.75)}
:root[data-lights="on"] .mb-vig{box-shadow:none}
:root[data-motion="off"] .mb-scan{display:none}

/* the torch only covers feature blocks, never body copy */
.mb-torch{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle 340px at var(--mb-mx) var(--mb-my),
    transparent 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,var(--mb-torch)) 100%);
}
:root[data-lights="on"] .mb-torch,
:root[data-torch="off"] .mb-torch{display:none}

/* ==========================================================================
   4. PHOTOGRAPHY — cold duotone, applied in the browser
   Upload full-colour photos. The site does the treatment. Change the two
   stops in the SVG filter (inc/atmosphere.php) to restyle every image at once.
   ========================================================================== */
.mb-shot{position:relative;overflow:hidden;background:var(--mb-panel);display:block;margin:0}
.mb-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mb-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:2;
  background:linear-gradient(to top,rgba(6,8,12,.88),transparent);
}
.mb-shot:hover img{transform:scale(1.03)}
:root[data-motion="off"] .mb-shot:hover img{transform:none}

/* one rule, every picture on the site */
.mb-shot img,
.mb-gallery img,
.mb-hero-shot img,
.mb-event-thumb img,
.wp-block-post-featured-image img,
figure.wp-block-image img,
.woocommerce-product-gallery img{
  filter:url(#mb-duo) contrast(1.04);
}
/* never treat the logo or an icon */
.mb-logo img,.custom-logo,.mb-no-duo img{filter:none !important}

.mb-gallery{
  display:grid;gap:1px;background:var(--mb-line-soft);border:1px solid var(--mb-line-soft);
  grid-template-columns:repeat(2,1fr);margin:0 0 20px;
}
@media(min-width:900px){.mb-gallery{grid-template-columns:repeat(4,1fr)}}
.mb-gallery .mb-shot{aspect-ratio:4/5}
.mb-gallery .mb-shot.is-tall img{object-position:50% 34%}
.mb-shot--wide{aspect-ratio:21/9;border:1px solid var(--mb-line-soft);margin-bottom:46px}

/* hero photograph — sits behind the type, never fights it */
.mb-hero-shot{position:absolute;inset:0;z-index:0;overflow:hidden}
.mb-hero-shot img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;opacity:.62;
  filter:url(#mb-duo) brightness(1.14)}
:root[data-lights="on"] .mb-hero-shot img{opacity:.18;filter:grayscale(1) contrast(1.1)}
.mb-hero-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--mb-void) 2%,rgba(6,8,12,.72) 36%,rgba(6,8,12,.22) 100%);
}
@media(max-width:760px){
  .mb-hero-shot img{opacity:.34}
  .mb-hero-shot::after{background:linear-gradient(to top,var(--mb-void) 10%,rgba(6,8,12,.72) 68%)}
}

/* ==========================================================================
   5. RAIL — live clock, door state, BPM, switches
   ========================================================================== */
.mb-rail{position:relative;z-index:40;background:var(--mb-void);border-bottom:1px solid var(--mb-line)}
.mb-rail .mb-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:38px;padding-top:6px;padding-bottom:6px}
.mb-rail .mb-m{color:var(--mb-dim)}
.mb-rail__spacer{flex:1 1 auto}
.mb-state{display:flex;align-items:center;gap:8px}
.mb-led{width:8px;height:8px;background:var(--mb-dimmer);display:block;flex:0 0 auto}
.mb-state.is-open .mb-led{background:var(--mb-live);box-shadow:0 0 12px var(--mb-live)}
.mb-state.is-open b{color:var(--mb-live)}
.mb-state b{font-weight:600}
.mb-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mb-kbtn{
  background:none;border:1px solid var(--mb-line);color:var(--mb-bone);cursor:pointer;
  font-family:var(--mb-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;line-height:1;
}
.mb-kbtn:hover{border-color:var(--mb-strobe);color:var(--mb-strobe)}
.mb-kbtn[aria-pressed="true"]{background:var(--mb-strobe);border-color:var(--mb-strobe);color:var(--mb-on-strobe)}
.mb-bpm{display:flex;align-items:center;border:1px solid var(--mb-line)}
.mb-bpm button{background:none;border:0;color:var(--mb-bone);cursor:pointer;padding:5px 9px;font-family:var(--mb-mono);font-size:12px;line-height:1}
.mb-bpm button:hover{color:var(--mb-strobe)}
.mb-bpm__val{padding:5px 4px;min-width:74px;text-align:center;color:var(--mb-strobe)}
.mb-beats{display:flex;gap:3px;align-items:center}
.mb-beats i{width:13px;height:13px;border:1px solid var(--mb-line);display:block}
.mb-beats i.is-hit{background:var(--mb-strobe);border-color:var(--mb-strobe);box-shadow:var(--mb-glow)}

/* ==========================================================================
   6. HEADER / NAV
   ========================================================================== */
.mb-header{position:sticky;top:0;z-index:35;background:var(--mb-void);border-bottom:1px solid var(--mb-line)}
/* three posts: badge · wordmark · actions. The middle column is centred on the
   page, not on the space left over, so it does not drift when the buttons on
   the right change width. */
.mb-header .mb-wrap{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:18px;min-height:62px;
}
.mb-logo{justify-self:start;display:flex;align-items:center}
.mb-logo__mark,.custom-logo{max-height:36px;width:auto;height:auto}
.mb-logo__word{
  justify-self:center;
  font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;
  font-size:18px;letter-spacing:.01em;line-height:1;white-space:nowrap;
}
.mb-logo__dot{color:var(--mb-strobe);text-shadow:var(--mb-glow);padding:0 .04em}
.mb-header__actions{justify-self:end;display:flex;align-items:center;gap:10px}
/* on a phone the badge holds the corner alone and the middle post collapses */
@media(max-width:860px){
  .mb-header .mb-wrap{grid-template-columns:auto 1fr}
  .mb-logo__word{display:none}
}
.mb-logo-foot{max-height:52px;width:auto;height:auto;margin-bottom:4px}
/* The badge is white artwork. When the house lights come up the page goes
   pale, so invert it rather than let it disappear into the background. */
:root[data-lights="on"] .mb-logo img,
:root[data-lights="on"] .custom-logo,
:root[data-lights="on"] .mb-logo-foot{filter:invert(1)}
.mb-nav{display:none;gap:0}
@media(min-width:1080px){.mb-nav{display:flex}}
.mb-nav ul{list-style:none;display:flex;margin:0;padding:0}
.mb-nav a{
  display:block;color:var(--mb-dim);padding:8px 12px;position:relative;
  font-family:var(--mb-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
}
.mb-nav a:hover{color:var(--mb-bone)}
.mb-nav .current-menu-item > a{color:var(--mb-strobe);text-shadow:var(--mb-glow)}
.mb-nav .current-menu-item > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--mb-strobe);box-shadow:var(--mb-glow);
}
.mb-menu-btn{display:block}
@media(min-width:1080px){.mb-menu-btn{display:none}}
.mb-drawer{display:none;background:var(--mb-panel);border-bottom:1px solid var(--mb-line);position:relative;z-index:34}
.mb-drawer.is-open{display:block}
.mb-drawer ul{list-style:none;margin:0;padding:6px 0 12px;display:flex;flex-direction:column}
.mb-drawer a{
  display:block;padding:12px 0;border-bottom:1px solid var(--mb-line-soft);
  font-family:var(--mb-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.mb-cta,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order{
  display:inline-block;border:1px solid var(--mb-strobe);background:var(--mb-strobe);color:var(--mb-on-strobe);
  padding:10px 15px;cursor:pointer;font-family:var(--mb-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--mb-glow);text-align:center;
  transition:background .12s,color .12s;
}
.mb-cta:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover{background:transparent;color:var(--mb-strobe)}
.mb-cta--ghost{background:transparent;color:var(--mb-bone);border-color:var(--mb-line);box-shadow:none}
.mb-cta--ghost:hover{border-color:var(--mb-bone);color:var(--mb-bone)}
.mb-cta--sm{padding:7px 11px;font-size:10px}
.mb-cta--big{padding:20px 26px;font-size:13px;font-weight:700;letter-spacing:.12em;width:100%}

/* ==========================================================================
   8. HERO
   ========================================================================== */
.mb-hero{position:relative;border-bottom:1px solid var(--mb-line);background:var(--mb-void);overflow:hidden}
.mb-hero::before{
  content:"";position:absolute;left:50%;top:-30%;width:120%;height:90%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(200,255,46,.13),transparent 62%);pointer-events:none;
}
:root[data-lights="on"] .mb-hero::before{display:none}
.mb-hero .mb-wrap{position:relative;z-index:3;padding-top:48px;padding-bottom:42px}
.mb-hero h1{font-size:clamp(58px,15vw,208px)}
.mb-hero h1 .mb-w{display:block;position:relative}
.mb-hero h1 .is-lit{color:var(--mb-strobe);text-shadow:var(--mb-glow)}
/* When a night is on, the night is the headline. It is set slightly smaller
   than the club's own line because event names are long and must not wrap
   into a wall. */
.mb-hero__eyebrow{display:block;color:var(--mb-strobe);text-shadow:var(--mb-glow);margin-bottom:14px}
.mb-hero__when{color:var(--mb-bone);opacity:.8;margin:0 0 10px;font-size:13px}
/* Was clamp(38px,7.4vw,104px). Too big: at 104px a two-line billing pushed the
   GET TICKETS button below the fold on a laptop, and the button is the point of
   the page. This still dominates without swallowing everything under it. */
.mb-hero__event{font-size:clamp(32px,5.2vw,72px);line-height:.94;letter-spacing:-.015em}
.mb-hero__event--date{font-size:clamp(34px,6vw,84px)}
.mb-hero__event--date em{color:var(--mb-strobe);font-style:normal;text-shadow:var(--mb-glow)}
.mb-cta--big-inline{padding:16px 22px;font-size:12px;letter-spacing:.12em}
.mb-hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:24px 0 0;color:var(--mb-dim)}
.mb-hero__sub{max-width:50ch;color:var(--mb-bone);opacity:.82;margin:20px 0 26px;font-size:17px}
.mb-hero__btns{display:flex;flex-wrap:wrap;gap:10px}

/* the tube flicker — runs once on load, never a strobe */
@keyframes mb-strobe{
  0%{opacity:.06;text-shadow:none}4%{opacity:.9}6%{opacity:.12;text-shadow:none}
  9%{opacity:1}12%{opacity:.2;text-shadow:none}14%{opacity:.95}
  17%{opacity:.35;text-shadow:none}20%,100%{opacity:1}
}
.mb-flick{animation:mb-strobe 2.6s steps(60,end) 1 both}
.mb-flick.d1{animation-delay:.15s}
.mb-flick.d2{animation-delay:.42s}
.mb-flick.d3{animation-delay:.7s}
.mb-buzz{animation:mb-strobe 1.1s steps(40,end) 1 both}
:root[data-motion="off"] .mb-flick,
:root[data-motion="off"] .mb-buzz{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.mb-flick,.mb-buzz{animation:none;opacity:1}}

/* doors countdown */
.mb-doors{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:12px;border:1px solid var(--mb-line);
  padding:12px 16px;margin:26px 0 0;background:var(--mb-panel);
}
.mb-doors__k{color:var(--mb-dim)}
.mb-doors__t{
  font-weight:900;font-size:clamp(24px,4vw,40px);line-height:1;
  color:var(--mb-strobe);text-shadow:var(--mb-glow);font-variant-numeric:tabular-nums;
}

/* VU meter + beat pulse */
.mb-vu{display:flex;align-items:flex-end;gap:3px;height:52px;margin-top:28px;position:relative;z-index:3}
.mb-vu i{width:7px;background:var(--mb-strobe);opacity:.85;height:6px;display:block;transition:height .09s linear}
.mb-vu i.is-uv{background:var(--mb-uv)}
.mb-pulse{display:inline-block;transition:transform .09s ease-out,opacity .09s ease-out}
body.is-beat .mb-pulse{transform:scale(1.035)}
body.is-beat .mb-logo__dot{opacity:.86}
:root[data-motion="off"] .mb-pulse{transform:none !important}

/* ==========================================================================
   9. TICKER
   ========================================================================== */
.mb-ticker{background:var(--mb-strobe);color:var(--mb-on-strobe);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--mb-line)}
.mb-ticker__in{display:inline-flex;animation:mb-roll linear infinite;animation-duration:calc(var(--mb-beat) * 64)}
.mb-ticker b{
  padding:8px 20px;display:inline-block;font-family:var(--mb-mono);font-size:11px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
@keyframes mb-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
:root[data-motion="off"] .mb-ticker__in{animation:none}
@media (prefers-reduced-motion:reduce){.mb-ticker__in{animation:none}}

/* ==========================================================================
   10. SECTIONS
   ========================================================================== */
.mb-block{border-bottom:1px solid var(--mb-line);background:var(--mb-room)}
.mb-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--mb-line-soft);
}
.mb-head .mb-m{color:var(--mb-dim)}
.mb-sec{font-size:clamp(30px,6vw,68px);padding:34px 0 24px}
.mb-sec em{font-style:normal;color:var(--mb-strobe);text-shadow:var(--mb-glow)}
.mb-eyebrow{display:block;color:var(--mb-dim);padding-top:34px}

.mb-grid{display:grid;gap:1px;background:var(--mb-line-soft);border:1px solid var(--mb-line-soft);margin-bottom:46px}
.mb-grid--2{grid-template-columns:1fr}
.mb-grid--3,.mb-grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){
  .mb-grid--2{grid-template-columns:repeat(2,1fr)}
  .mb-grid--3{grid-template-columns:repeat(3,1fr)}
  .mb-grid--4{grid-template-columns:repeat(4,1fr)}
}
.mb-cell{background:var(--mb-room);padding:24px 20px;min-height:150px;display:flex;flex-direction:column;gap:9px}
.mb-cell .mb-m{color:var(--mb-dim)}
.mb-cell h3{margin:0;font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:21px;line-height:1.02;letter-spacing:0}
.mb-cell p{margin:0;color:var(--mb-dim);font-size:14.5px}
.mb-cell:hover{background:var(--mb-panel)}
.mb-cell:hover h3{color:var(--mb-strobe)}

.mb-cities{display:flex;flex-wrap:wrap;border:1px solid var(--mb-line-soft);margin-bottom:46px}
.mb-city{
  flex:1 1 140px;padding:18px 14px;border-right:1px solid var(--mb-line-soft);border-bottom:1px solid var(--mb-line-soft);
  font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:15px;
}
.mb-city span{display:block;color:var(--mb-dim);margin-top:5px}
.mb-city:hover{background:var(--mb-panel);color:var(--mb-strobe)}

/* The one upcoming card in a wall of past guests. Injected by front-page.php. */
.mb-city--next{background:var(--mb-panel);box-shadow:inset 3px 0 0 var(--mb-strobe)}
.mb-city--next .mb-next__kicker{color:var(--mb-strobe);margin-top:0}
.mb-city--next .mb-next__cta{color:var(--mb-strobe)}
.mb-city--next .mb-next__what{
  font-family:var(--mb-sans);font-weight:400;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.45;
}
.mb-city--next:focus-visible{
  outline:2px solid var(--mb-strobe);outline-offset:-2px;background:var(--mb-panel);color:var(--mb-strobe);
}

/* ==========================================================================
   11. PROGRAMME BOARD
   ========================================================================== */
.mb-board{border-top:1px solid var(--mb-line-soft)}
.mb-row{
  display:grid;grid-template-columns:1fr;gap:4px 18px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--mb-line-soft);position:relative;
}
@media(min-width:860px){.mb-row{grid-template-columns:120px minmax(0,1fr) 176px 96px 150px;padding:18px 0}}
.mb-row::before{content:"";position:absolute;left:-20px;top:0;bottom:0;width:2px;background:transparent}
.mb-row:hover::before{background:var(--mb-strobe);box-shadow:var(--mb-glow)}
.mb-row:hover .mb-row__name{color:var(--mb-strobe);text-shadow:var(--mb-glow)}
.mb-row__date,.mb-row__price{color:var(--mb-dim)}
.mb-row__name{
  font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,3.4vw,32px);line-height:1;transition:color .12s;
}
.mb-row__line{color:var(--mb-dim);font-size:13.5px}
.mb-row__cta{justify-self:start}
@media(min-width:860px){.mb-row__cta{justify-self:end}}
.mb-pill{border:1px solid currentColor;padding:2px 6px;margin-left:9px;white-space:nowrap;font-size:10px}
.mb-pill--hot{color:var(--mb-alarm);border-color:var(--mb-alarm)}
.mb-pill--uv{color:var(--mb-uv);border-color:var(--mb-uv)}

.mb-empty{padding:52px 0 56px;max-width:60ch}
.mb-empty h3{font-size:clamp(26px,4.6vw,46px);margin:0 0 14px}
.mb-empty h3 em{font-style:normal;color:var(--mb-strobe);text-shadow:var(--mb-glow)}
.mb-empty p{color:var(--mb-dim);margin:0 0 14px}

/* ==========================================================================
   12. TICKET SHEET — three taps to paid
   ========================================================================== */
.mb-scrim{position:fixed;inset:0;background:rgba(4,6,10,.84);z-index:70;display:none}
.mb-scrim.is-open{display:block}
.mb-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--mb-room);
  border-top:2px solid var(--mb-strobe);box-shadow:0 -20px 60px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .22s ease-out;max-height:92vh;overflow-y:auto;
}
.mb-sheet.is-open{transform:translateY(0)}
@media(min-width:820px){
  .mb-sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:520px;border:2px solid var(--mb-strobe);
    transform:translate(-50%,-46%) scale(.97);opacity:0;transition:transform .18s ease-out,opacity .18s;
  }
  .mb-sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
}
:root[data-motion="off"] .mb-sheet{transition:none}
.mb-sheet__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 20px 14px;border-bottom:1px solid var(--mb-line-soft)}
.mb-sheet__hd h3{margin:0 0 4px;font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:-.01em}
.mb-sheet__hd .mb-m{color:var(--mb-dim)}
.mb-x{background:none;border:1px solid var(--mb-line);color:var(--mb-bone);cursor:pointer;width:34px;height:34px;flex:0 0 auto;font-size:16px;line-height:1}
.mb-x:hover{border-color:var(--mb-strobe);color:var(--mb-strobe)}
.mb-sheet__bd{padding:18px 20px 22px;display:grid;gap:16px}

.mb-tiers{display:grid;gap:8px}
.mb-tier{
  display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  background:var(--mb-panel);border:1px solid var(--mb-line);color:var(--mb-bone);
  cursor:pointer;padding:15px 16px;text-align:left;
}
.mb-tier:hover{border-color:var(--mb-strobe)}
.mb-tier[aria-pressed="true"]{border-color:var(--mb-strobe);background:var(--mb-panel-2);box-shadow:inset 3px 0 0 var(--mb-strobe)}
.mb-tier__n{font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.1}
.mb-tier__s{color:var(--mb-dim);display:block;margin-top:4px}
.mb-tier__p{font-weight:800;font-size:21px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mb-tier[aria-pressed="true"] .mb-tier__p{color:var(--mb-strobe)}
.mb-tier[disabled]{opacity:.45;cursor:not-allowed}

.mb-qty-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--mb-line);padding:10px 14px;background:var(--mb-panel)}
.mb-qty-row .mb-m{color:var(--mb-dim)}
.mb-qty{display:flex;align-items:center;border:1px solid var(--mb-line)}
.mb-qty button{background:none;border:0;color:var(--mb-bone);cursor:pointer;width:44px;height:44px;font-size:20px;line-height:1}
.mb-qty button:hover{background:var(--mb-strobe);color:var(--mb-on-strobe)}
.mb-qty span{min-width:46px;text-align:center;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}

.mb-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 2px 0}
.mb-total .mb-m{color:var(--mb-dim)}
.mb-total__v{font-weight:900;font-size:36px;line-height:1;color:var(--mb-strobe);text-shadow:var(--mb-glow);font-variant-numeric:tabular-nums}
.mb-fine{color:var(--mb-dim);font-size:13px;margin:0}
.mb-taps{display:flex;gap:6px;align-items:center;color:var(--mb-live)}
.mb-taps i{width:8px;height:8px;background:var(--mb-live);display:block}

/* ==========================================================================
   13. TABLES — the booking plugin, restyled
   The plugin keeps the plan, the availability and the booking. We only skin it.
   ========================================================================== */
.mb-plan{border:1px solid var(--mb-line);background:var(--mb-panel);padding:0;margin-bottom:22px}
.mb-plan__note{color:var(--mb-dim);line-height:1.8;padding-bottom:12px}

/* ---- Mustache Reservations plugin (`mr-` prefix), restyled in place ----
   These are the plugin's own class names, read off the live page. We change
   nothing about how it works — no markup override, no JS — only how it looks,
   so a plugin update cannot break the booking, only the paint.              */
#mustache-reserve{background:var(--mb-panel);color:var(--mb-bone);font-family:var(--mb-sans)}
#mustache-reserve *{font-family:inherit}

/* header — we already have a logo two inches above this, so quieten it */
#mustache-reserve .mr-header{border-bottom:1px solid var(--mb-line);padding:14px 16px;background:var(--mb-room)}
#mustache-reserve .mr-brand-logo{max-height:28px;width:auto;filter:none}
#mustache-reserve .mr-brand-meta{color:var(--mb-dim);font-family:var(--mb-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase}

/* layout */
#mustache-reserve .mr-grid{gap:1px;background:var(--mb-line-soft)}
#mustache-reserve .mr-map-wrap,
#mustache-reserve .mr-panel{background:var(--mb-panel)}

/* the strip above the map */
#mustache-reserve .mr-tap-banner,
#mustache-reserve .mr-map-toolbar{
  background:var(--mb-room);border-bottom:1px solid var(--mb-line-soft);
  font-family:var(--mb-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-dim);
}
#mustache-reserve .mr-toolbar-eyebrow{color:var(--mb-strobe);text-shadow:var(--mb-glow)}
#mustache-reserve .mr-toolbar-divider{opacity:.4}

/* legend */
#mustache-reserve .mr-legend{font-family:var(--mb-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mb-dim);list-style:none}
#mustache-reserve .mr-dot-available{background:var(--mb-bone)}
#mustache-reserve .mr-dot-booked{background:var(--mb-dimmer)}

/* the plan itself — an SVG on a 720×1000 stage */
#mustache-reserve .mr-svg-host{background:var(--mb-void);padding:10px}
#mustache-reserve .mr-svg-host svg{width:100%;height:auto;display:block}
#mustache-reserve .mr-spot{transition:fill .12s ease,stroke .12s ease}
#mustache-reserve .mr-hit{cursor:pointer}
#mustache-reserve .mr-hit:hover + .mr-spot,
#mustache-reserve .mr-hit:focus-visible + .mr-spot{stroke:var(--mb-strobe);stroke-width:2}
#mustache-reserve .mr-table-label,
#mustache-reserve .mr-sofa-label{font-family:var(--mb-mono);font-size:11px;letter-spacing:.06em;fill:var(--mb-bone)}
#mustache-reserve .mr-amenity-label{font-family:var(--mb-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--mb-dim)}

/* the side panel */
#mustache-reserve .mr-panel{border-left:1px solid var(--mb-line-soft)}
#mustache-reserve .mr-panel-eyebrow,
#mustache-reserve .mr-panel-empty-eyebrow{color:var(--mb-strobe);font-family:var(--mb-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;text-shadow:var(--mb-glow)}
#mustache-reserve .mr-panel-title,
#mustache-reserve .mr-panel-empty-title{font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;color:var(--mb-bone)}
#mustache-reserve .mr-panel-body,
#mustache-reserve .mr-panel-empty-body,
#mustache-reserve .mr-panel-empty-list{color:var(--mb-dim)}
#mustache-reserve .mr-meta-row{border-bottom:1px solid var(--mb-line-soft);color:var(--mb-dim);
  font-family:var(--mb-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* the hold timer — this is a good idea and deserves to look urgent */
#mustache-reserve .mr-hold{border:1px solid var(--mb-strobe);background:var(--mb-room)}
#mustache-reserve .mr-hold-dot{background:var(--mb-live);box-shadow:0 0 10px var(--mb-live)}
#mustache-reserve .mr-hold-label{color:var(--mb-dim);font-family:var(--mb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
#mustache-reserve .mr-hold-time{color:var(--mb-strobe);text-shadow:var(--mb-glow);
  font-weight:900;font-variant-numeric:tabular-nums}

/* buttons — same language as every other button on the site */
#mustache-reserve .mr-btn-primary,
#mustache-reserve .mr-btn-secondary,
#mustache-reserve .mr-step-btn,
#mustache-reserve .mr-back-to-map,
#mustache-reserve .mr-panel-close{
  font-family:var(--mb-mono);text-transform:uppercase;letter-spacing:.1em;font-weight:600;
}
#mustache-reserve .mr-btn-primary{background:var(--mb-strobe);color:var(--mb-on-strobe);
  border:1px solid var(--mb-strobe);box-shadow:var(--mb-glow)}
#mustache-reserve .mr-btn-primary:hover{background:transparent;color:var(--mb-strobe)}
#mustache-reserve .mr-btn-secondary,
#mustache-reserve .mr-step-btn,
#mustache-reserve .mr-back-to-map{background:transparent;color:var(--mb-bone);border:1px solid var(--mb-line)}
#mustache-reserve .mr-btn-secondary:hover,
#mustache-reserve .mr-step-btn:hover,
#mustache-reserve .mr-back-to-map:hover{border-color:var(--mb-strobe);color:var(--mb-strobe)}
/* WhatsApp and LINE use the house colour, not their own brand greens. With
   an acid-green accent those two greens fight it and the page stops looking
   like one thing. The icon still says which app it opens. */
#mustache-reserve .mr-btn-whatsapp{background:transparent;border:1px solid var(--mb-strobe);color:var(--mb-strobe);box-shadow:none}
#mustache-reserve .mr-btn-whatsapp:hover{background:var(--mb-strobe);color:var(--mb-on-strobe)}
#mustache-reserve .mr-panel-close{background:none;border:1px solid var(--mb-line);color:var(--mb-bone)}
#mustache-reserve .mr-scrim{background:rgba(4,6,10,.84)}
#mustache-reserve .mr-spinner{border-top-color:var(--mb-strobe)}

/* ---- talk to us: one tap to a human ---- */
.mb-contact{margin:0 0 46px}
.mb-contact__head{display:block;color:var(--mb-dim);margin-bottom:10px}
.mb-contact__row{display:grid;gap:1px;background:var(--mb-line-soft);
  border:1px solid var(--mb-line-soft);grid-template-columns:1fr}
@media(min-width:620px){.mb-contact__row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.mb-contact__row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.mb-contact__btn{display:flex;flex-direction:column;gap:5px;padding:20px 18px;background:var(--mb-room);
  min-height:84px;justify-content:center}
.mb-contact__btn:hover{background:var(--mb-panel);color:var(--mb-bone)}
.mb-contact__label{font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:19px;line-height:1}
.mb-contact__sub{color:var(--mb-dim)}
.mb-contact__btn.is-call:hover .mb-contact__label,
.mb-contact__btn.is-email:hover .mb-contact__label{color:var(--mb-strobe)}
.mb-contact__btn.is-line:hover .mb-contact__label{color:var(--mb-strobe)}
.mb-contact__btn.is-whatsapp:hover .mb-contact__label{color:var(--mb-strobe)}
.mb-guests .mb-guest__name{display:block}

/* ==========================================================================
   14. NEWSLETTER + FORMS
   ========================================================================== */
.mb-list{background:var(--mb-panel);border-bottom:1px solid var(--mb-line)}
.mb-list .mb-wrap{padding:56px 20px}
.mb-list h2{font-size:clamp(30px,7vw,80px);margin:0 0 16px}
.mb-list p{color:var(--mb-dim);max-width:48ch;margin:0 0 26px}
.mb-form{display:flex;flex-wrap:wrap;gap:8px;max-width:580px}
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="password"],textarea,select{
  background:transparent;border:1px solid var(--mb-line);color:var(--mb-bone);padding:14px;
  font-family:var(--mb-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;width:100%;
}
.mb-form input[type="email"]{flex:1 1 250px;width:auto}
input::placeholder,textarea::placeholder{color:var(--mb-dimmer)}
input:focus,textarea:focus,select:focus{border-color:var(--mb-strobe);outline:none}
label{font-family:var(--mb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-dim);display:block;margin-bottom:6px}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.mb-footer .mb-wrap{padding:46px 20px 24px;display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:840px){.mb-footer .mb-wrap{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.mb-footer h4{margin:0 0 14px;color:var(--mb-dim);font-family:var(--mb-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mb-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:var(--mb-dim);font-size:14.5px}
.mb-legal{border-top:1px solid var(--mb-line-soft)}
.mb-legal .mb-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:16px 20px 48px}
.mb-legal .mb-m{color:var(--mb-dimmer)}

/* ==========================================================================
   16. WOOCOMMERCE — the checkout, stripped and restyled
   ========================================================================== */
.woocommerce-page .mb-block,.woocommerce .mb-wrap{background:var(--mb-void)}
.woocommerce .woocommerce-info,.woocommerce .woocommerce-message,.woocommerce .woocommerce-error{
  background:var(--mb-panel);border-top:2px solid var(--mb-strobe);color:var(--mb-bone);
  font-family:var(--mb-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;list-style:none;
}
.woocommerce-checkout h3,.woocommerce-checkout h2{
  font-family:var(--mb-display-font);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:0;
}
.woocommerce-checkout #payment{background:var(--mb-panel);border:1px solid var(--mb-line)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--mb-line-soft)}
.woocommerce table.shop_table{border:1px solid var(--mb-line);color:var(--mb-bone)}
.woocommerce table.shop_table th{font-family:var(--mb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-dim)}
.woocommerce-checkout .form-row{margin-bottom:14px}
.woocommerce .quantity .qty{width:80px;text-align:center}
/* express payment buttons belong above the form, not below it */
.mb-express-top{margin:0 0 22px;padding:18px;border:1px solid var(--mb-strobe);background:var(--mb-panel)}
.mb-express-top__label{color:var(--mb-dim);margin-bottom:12px;display:block}
.mb-or{display:flex;align-items:center;gap:12px;color:var(--mb-dimmer);margin:22px 0}
.mb-or::before,.mb-or::after{content:"";flex:1;height:1px;background:var(--mb-line-soft)}

/* ==========================================================================
   17. UTILITIES / EDITOR
   ========================================================================== */
.mb-hidden{display:none !important}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none}
.mb-tablewrap{overflow-x:auto;border:1px solid var(--mb-line-soft);margin:18px 0}
.mb-tablewrap table{border-collapse:collapse;width:100%;min-width:620px}
.mb-tablewrap th,.mb-tablewrap td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--mb-line-soft);font-size:14px;vertical-align:top}
.mb-tablewrap th{font-family:var(--mb-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mb-dim);background:var(--mb-panel)}

@media print{
  .mb-grain,.mb-scan,.mb-vig,.mb-torch,.mb-ticker,.mb-rail,.mb-vu{display:none !important}
  body{background:#fff;color:#000}
}

/* footer lockup: wordmark over badge */
.mb-logo__word--foot{display:block;border-left:0;padding-left:0;font-size:15px;margin-bottom:12px}

/* ==========================================================================
   18. PICK A LIGHT
   A visitor can change the accent. Deliberately a toy, not a front-door
   feature: it sits with the torch and the house lights, the club's own colour
   is always the default, and the choice is remembered on that phone only —
   it never changes what gets shared, printed or put on a flyer.

   Each light also swaps the duotone filter, so the photographs follow the
   accent instead of fighting it. The sold-out pink stays out of the set on
   purpose: if the accent could be alarm-coloured, SOLD OUT stops meaning
   anything.
   ========================================================================== */
:root[data-accent="uv"]{
  --mb-strobe:#8F6BFF;
  --mb-on-strobe:#0C0518;
  --mb-glow:0 0 22px rgba(143,107,255,.42), 0 0 70px rgba(143,107,255,.16);
}
:root[data-accent="strobe"]{
  --mb-strobe:#00E4FF;
  --mb-on-strobe:#00181D;
  --mb-glow:0 0 22px rgba(0,228,255,.38), 0 0 70px rgba(0,228,255,.14);
}
:root[data-accent="white"]{
  --mb-strobe:#EDF3F8;
  --mb-on-strobe:#06080C;
  --mb-glow:0 0 22px rgba(237,243,248,.34), 0 0 70px rgba(237,243,248,.12);
}
/* light mode needs darker accents or they vanish on white */
:root[data-lights="on"][data-accent="uv"]{--mb-strobe:#4B22C7;--mb-on-strobe:#F4F1FF}
:root[data-lights="on"][data-accent="strobe"]{--mb-strobe:#006C7D;--mb-on-strobe:#F2F7F9}
:root[data-lights="on"][data-accent="white"]{--mb-strobe:#0B1016;--mb-on-strobe:#F2F7F9}

/* the photographs follow the light */
:root[data-accent="uv"] .mb-shot img,
:root[data-accent="uv"] .mb-gallery img,
:root[data-accent="uv"] .mb-hero-shot img,
:root[data-accent="uv"] figure.wp-block-image img{filter:url(#mb-duo-uv) contrast(1.04)}
:root[data-accent="strobe"] .mb-shot img,
:root[data-accent="strobe"] .mb-gallery img,
:root[data-accent="strobe"] .mb-hero-shot img,
:root[data-accent="strobe"] figure.wp-block-image img{filter:url(#mb-duo-strobe) contrast(1.04)}
:root[data-accent="white"] .mb-shot img,
:root[data-accent="white"] .mb-gallery img,
:root[data-accent="white"] .mb-hero-shot img,
:root[data-accent="white"] figure.wp-block-image img{filter:url(#mb-duo-white) contrast(1.04)}

.mb-lights-pick{display:flex;gap:4px;align-items:center}
.mb-lights-pick button{
  width:16px;height:16px;padding:0;border:1px solid var(--mb-line);cursor:pointer;
  background:var(--mb-swatch,#C8FF2E);
}
.mb-lights-pick button[aria-pressed="true"]{outline:1px solid var(--mb-bone);outline-offset:2px}


/* ---------------------------------------------------------------------------
   19. THE PAST WALL
   Nights that already happened. Faded, not blurred: the names are the whole
   asset here, and a blur both costs real repaint on scroll and destroys the
   thing the section exists to show. So we drop opacity, pull the saturation
   out, and let the acid go grey — the row reads as history without becoming
   unreadable. The fade stops at step 5 for the same reason.
--------------------------------------------------------------------------- */
.mb-board--past{margin-top:6px}

.mb-row--past{
  /* NO grid-template-columns here. The base .mb-row is a single-column stack
     and only becomes multi-column above 860px; re-declaring the columns
     unconditionally forced five of them onto a 375px phone and pushed the page
     146px wider than the screen. The whole page then scrolled sideways, which
     reads as a broken layout rather than as one wide row. */
  transition:opacity .35s ease,filter .35s ease;
  filter:saturate(.35)
}
@media(min-width:860px){
  .mb-row--past{grid-template-columns:120px minmax(0,1fr) 176px 96px 150px}
}
.mb-row--past .mb-row__name{color:var(--mb-dim)}
.mb-row--past .mb-row__price{color:var(--mb-dimmer);letter-spacing:.14em}
.mb-row--past .mb-row__year{color:var(--mb-dimmer);font-size:.82em}
.mb-row--past .mb-cta{border-color:var(--mb-dimmer);color:var(--mb-dim)}

.mb-row--past:hover{filter:saturate(1);opacity:1}
.mb-row--past:hover .mb-row__name{color:var(--mb-bone)}

.mb-fade-0{opacity:.92}
.mb-fade-1{opacity:.80}
.mb-fade-2{opacity:.68}
.mb-fade-3{opacity:.56}
.mb-fade-4{opacity:.46}
.mb-fade-5{opacity:.38}

/* Rows behind the button. Rendered, in the DOM, readable by search engines —
   just not shown until asked for. */
.mb-row--stashed{display:none}
.mb-board--past.is-open .mb-row--stashed{display:grid;animation:mb-row-in .3s ease both}

@keyframes mb-row-in{from{opacity:0;transform:translateY(-4px)}to{opacity:var(--mb-row-op,.6);transform:none}}

.mb-more{margin:14px auto 0;display:flex;align-items:center;gap:10px}
.mb-more__n{color:var(--mb-strobe);font-family:var(--mb-mono);font-size:.86em}

@media(prefers-reduced-motion:reduce){
  .mb-row--past,.mb-board--past.is-open .mb-row--stashed{transition:none;animation:none}
}

/* The featured night's TBA label. Sits under the title, not beside it — the
   hero title is display-sized and a pill on the same line would fight it. */
.mb-hero__tba{display:inline-block;margin:2px 0 14px}

/* ---------------------------------------------------------------------------
   20. HOLDING THE LINE AGAINST ELEMENTOR'S GLOBAL KIT
   Measured on the live site, 25 Aug 2026. Elementor's page CSS carries:

       button, input[type="submit"] { background:#00CFFF; border-radius:4px }
       button:hover                 { background:#CCFF00 }

   scoped as .elementor-kit-13 button — one class plus one element, exactly the
   same specificity as .mb-lights-pick button, and loaded AFTER the theme. Equal
   specificity means later wins, so every bare <button> in this theme was
   wearing Elementor's cyan-and-lime: the light switches, the BPM stepper, and
   the accent chips, which rendered at 57×56px instead of 16×16.

   Elementor still owns the two /events/ landing pages, so it is not going away.
   The fix is to out-specify it rather than fight it — every rule below is
   deliberately one class deeper than the equivalent above.
--------------------------------------------------------------------------- */
.mb-rail .mb-lights-pick button{
  width:16px;height:16px;padding:0;border:1px solid var(--mb-line);border-radius:0;
  background:var(--mb-swatch,#C8FF2E);box-shadow:none;min-width:0;min-height:0;
  font-size:0;line-height:0
}
.mb-rail .mb-lights-pick button:hover{background:var(--mb-swatch,#C8FF2E)}
.mb-rail .mb-lights-pick button[aria-pressed="true"]{outline:1px solid var(--mb-bone);outline-offset:2px}

.mb-rail .mb-bpm button{
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--mb-bone);padding:5px 9px;font-family:var(--mb-mono);font-size:12px;
  line-height:1;min-width:0;min-height:0
}
.mb-rail .mb-bpm button:hover{background:none;color:var(--mb-strobe)}

.mb-rail .mb-kbtn,
.mb-header .mb-kbtn{
  border-radius:0;box-shadow:none;min-width:0;min-height:0;
  background:transparent;color:var(--mb-bone)
}
.mb-rail .mb-kbtn:hover,
.mb-header .mb-kbtn:hover{background:transparent;border-color:var(--mb-strobe);color:var(--mb-strobe)}
.mb-rail .mb-kbtn[aria-pressed="true"],
.mb-header .mb-kbtn[aria-pressed="true"]{background:var(--mb-strobe);border-color:var(--mb-strobe);color:var(--mb-on-strobe)}

/* The buy buttons and the sheet, same reasoning. */
.mb-board .mb-cta,
.mb-hero .mb-cta,
.mb-sheet .mb-cta,
.mb-sheet button{border-radius:0;box-shadow:none}
.mb-sheet .mb-x{background:transparent;border-radius:0;box-shadow:none}

/* ---------------------------------------------------------------------------
   21. GUEST PHOTOGRAPHS
   Press shots arrive in fourteen different colour casts, which is exactly what
   the duotone exists to fix — .mb-guest__shot carries .mb-shot so the filter
   applies to these the same as to everything else. Square crop, because
   publicity photos come in every aspect ratio there is.
--------------------------------------------------------------------------- */
.mb-guests .mb-city{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.mb-guest__shot{
  display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  margin:0 0 10px;background:var(--mb-panel)
}
.mb-guest__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease
}
.mb-guests .mb-city:hover .mb-guest__shot img{transform:scale(1.04)}
.mb-guests .mb-guest__name{display:block;margin-top:auto}

@media(max-width:600px){
  .mb-guest__shot{margin-bottom:8px}
}

/* ---------------------------------------------------------------------------
   22. THE LIGHT SWITCHER, SMALLER
   It was competing with the programme. This is a toy — a good one, and worth
   keeping, but it sits above the only thing on the page that earns money and it
   should not be the first thing the eye lands on. Chips down from 16px to 11px,
   the whole rail tightened, and the switches reduced to the same weight as the
   rest of the rail text.
--------------------------------------------------------------------------- */
.mb-rail .mb-wrap{gap:6px 14px;min-height:32px;padding-top:4px;padding-bottom:4px}
.mb-rail .mb-ctl{gap:5px}

.mb-rail .mb-lights-pick{gap:3px}
.mb-rail .mb-lights-pick button{width:11px;height:11px}
.mb-rail .mb-lights-pick button[aria-pressed="true"]{outline-offset:1px}

.mb-rail .mb-kbtn{font-size:9.5px;padding:4px 8px;letter-spacing:.1em}
.mb-rail .mb-bpm button{padding:3px 7px;font-size:11px}
.mb-rail .mb-bpm__val{min-width:62px;font-size:10px;padding:3px}
.mb-rail .mb-beats i{width:9px;height:9px}

/* On a phone the switcher is noise on the smallest screen we have. The
   programme is what someone came for. */
@media(max-width:640px){
  .mb-rail .mb-bpm,
  .mb-rail .mb-beats{display:none}
  .mb-rail .mb-kbtn{font-size:9px;padding:3px 6px}
}

/* ---------------------------------------------------------------------------
   23. THE FLOOR PLAN, IN THE SITE'S COLOURS
   .mr-spot had a transition and no fill, so the plugin's own greens and greys
   came through untouched and the map was the one part of the site wearing
   somebody else's palette.

   Free / taken / picked must stay distinguishable WITHOUT relying on hue alone —
   somebody choosing a table in a dark room on a phone, possibly colour-blind,
   has to be able to tell them apart. So the three states differ in fill AND in
   stroke AND in opacity.
--------------------------------------------------------------------------- */
#mustache-reserve .mr-spot{
  fill:var(--mb-panel-2);
  stroke:var(--mb-line);
  stroke-width:1
}

/* FREE — bone outline on the dark ground. Reads as "you may have this". */
#mustache-reserve .mr-spot.is-available,
#mustache-reserve .mr-spot[data-state="available"],
#mustache-reserve .mr-spot--available,
#mustache-reserve .mr-hit[data-state="available"] + .mr-spot{
  fill:var(--mb-panel-2);
  stroke:var(--mb-bone);
  stroke-width:1.5;
  opacity:1
}

/* TAKEN — sunk into the ground, no outline, clearly not on offer. */
#mustache-reserve .mr-spot.is-booked,
#mustache-reserve .mr-spot.is-unavailable,
#mustache-reserve .mr-spot[data-state="booked"],
#mustache-reserve .mr-spot--booked,
#mustache-reserve .mr-hit[data-state="booked"] + .mr-spot{
  fill:var(--mb-room);
  stroke:var(--mb-dimmer);
  stroke-width:1;
  opacity:.5
}

/* PICKED — the house colour, and the only thing on the map wearing it. */
#mustache-reserve .mr-spot.is-selected,
#mustache-reserve .mr-spot.is-active,
#mustache-reserve .mr-spot[data-state="selected"],
#mustache-reserve .mr-spot--selected,
#mustache-reserve .mr-hit[aria-pressed="true"] + .mr-spot{
  fill:var(--mb-strobe);
  stroke:var(--mb-strobe);
  stroke-width:2;
  opacity:1
}

/* Labels sitting on a picked table need to flip, or they vanish into the acid. */
#mustache-reserve .mr-spot.is-selected + .mr-table-label,
#mustache-reserve .mr-spot.is-selected + .mr-sofa-label{fill:var(--mb-on-strobe)}

/* The legend has to agree with the map, or it teaches people the wrong thing. */
#mustache-reserve .mr-dot-available{background:var(--mb-panel-2);border:1.5px solid var(--mb-bone)}
#mustache-reserve .mr-dot-booked{background:var(--mb-room);border:1px solid var(--mb-dimmer);opacity:.6}
#mustache-reserve .mr-dot-selected{background:var(--mb-strobe);border:0;box-shadow:var(--mb-glow)}

/* ---------------------------------------------------------------------------
   24. THE LOGO, UNDISTORTED
   Elementor and Astra both ship a global img rule, and between them the mark
   was being given a width AND a height and stretched to fill both. max-height
   with width:auto is only enough when nothing else is setting width — here
   something is, so this states every axis explicitly and out-specifies it.
   object-fit:contain is the belt: even if a size is forced, the artwork keeps
   its proportions inside the box instead of squashing to fit it.
--------------------------------------------------------------------------- */
.mb-header .mb-logo img,
.mb-header .custom-logo,
.mb-footer .mb-logo-foot{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:36px;
  object-fit:contain;
  aspect-ratio:auto
}
.mb-footer .mb-logo-foot{max-height:52px}

/* ---------------------------------------------------------------------------
   25. THE FLYER ON A PAST NIGHT
   Small, square, and first in the row — enough to recognise the poster, not so
   much that the wall becomes a gallery and buries the programme above it.
--------------------------------------------------------------------------- */
.mb-row--past{align-items:center}
.mb-row__flyer{
  display:block;width:56px;aspect-ratio:1/1;overflow:hidden;
  background:var(--mb-panel);flex:0 0 auto
}
.mb-row__flyer img{width:100%;height:100%;object-fit:cover;display:block}

@media(min-width:860px){
  /* One more column than the live board: the flyer leads. */
  .mb-row--past{grid-template-columns:56px 120px minmax(0,1fr) 176px 96px 150px}
}
@media(max-width:859px){
  .mb-row__flyer{width:44px;margin-bottom:8px}
}

/* ---------------------------------------------------------------------------
   26. THE RAIL, AFTER THE SWITCHES CAME OUT
   Only the BPM stepper, the beat meter and the colour chooser are left. With
   three fewer items the group no longer needs to fight for room, so the chips
   go back up slightly — 11px was sized for a crowded rail and reads as a
   rounding error on an empty one.
--------------------------------------------------------------------------- */
.mb-rail .mb-lights-pick{gap:4px}
.mb-rail .mb-lights-pick button{width:13px;height:13px}
.mb-rail .mb-ctl{gap:12px}

/* ---------------------------------------------------------------------
   Hero video layer. Added above .mb-hero-shot, below .mb-torch.
     .mb-hero-shot  z 0   still, stays as the fallback
     .mb-hero-vid   z 1   the 7s loop
     .mb-torch      z 2
     .mb-wrap       z 3
   The loop is ungraded on purpose: no filter here, and do not add
   url(#mb-duo) later. It would recolour the footage and cost a filter
   pass on every frame.
   --------------------------------------------------------------------- */
.mb-hero-vid{
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.mb-hero-vid__el{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity .8s ease;
}
.mb-hero-vid__el.is-playing{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
	.mb-hero-vid{ display: none; }
}

/* MB 1.7.0: 7-item primary nav on one line; Tickets anchor clears the sticky header */
.mb-nav a{white-space:nowrap}
.mb-nav ul{gap:18px}
#programme{scroll-margin-top:90px}

/* MB 1.8.0: every upcoming night gets the hero card; the loop video moves into The Room */
.mb-nights{display:grid;gap:44px 40px;margin-top:6px}
.mb-night{min-width:0}
.mb-night+.mb-night{border-top:1px solid var(--mb-line);padding-top:34px}
.mb-hero .mb-night .mb-hero__flyer{aspect-ratio:auto;width:min(240px,52vw)}
.mb-hero .mb-night .mb-hero__flyer img{height:auto}
.mb-night .mb-hero__event{font-size:clamp(32px,4.4vw,60px)}
.mb-nights__all{margin:34px 0 0;padding:0}
@media(min-width:900px){
	.mb-nights{grid-template-columns:1fr 1fr;gap:48px 56px}
	.mb-night{border-top:1px solid var(--mb-line);padding-top:32px}
	.mb-night+.mb-night{border-top:1px solid var(--mb-line);padding-top:32px}
}
.mb-room-vid{position:relative;inset:auto;z-index:auto;pointer-events:none;width:100%;max-width:560px;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--mb-line);margin:0 0 34px;background:#06080c}
.mb-guests .mb-city--next .mb-next__shot{filter:none}
.mb-guests .mb-city--next .mb-next__shot img{filter:none}
/* TBA nights carry the house photo, not a flyer: keep that one square so every card lines up */
.mb-hero .mb-night:has(.mb-hero__tba) .mb-hero__flyer{aspect-ratio:1/1}
.mb-hero .mb-night:has(.mb-hero__tba) .mb-hero__flyer img{height:100%;object-fit:cover}
/* MB 1.8.2: PRE-REGISTER links land on the Daft Funk form, clear of the sticky header */
#pre-register{scroll-margin-top:84px}