/* Black Coffee · Ushuaïa Dubai Harbour Experience (Tim, 11 Oct 2026): night page, dark, with the flyer's coral */
:root{--bc-coral:#ff6a5c;--bc-gold:#e2bb6c;--bc-ink:#f4efe8;--bc-mute:rgba(244,239,232,.68)}

/* nav: the flyer's own wordmark */
html body>nav .brand img.bc-nav-logo{filter:none!important;display:block;width:auto!important;height:34px!important;max-height:34px!important;max-width:none!important}
@media(max-width:820px){html body>nav .brand img.bc-nav-logo{height:28px!important;max-height:28px!important}}

/* hero: phones see the whole flyer; desktop splits flyer | details */
html body section.chero.bc-hero{position:relative;display:block;min-height:0!important;height:auto!important;padding:var(--navh,62px) 0 0!important;background:#0b0a0a}
.bc-hero .bc-flyer{display:block;width:100%;margin:0 auto}
.bc-hero .bc-flyer img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.bc-hero .in{position:relative;z-index:2;padding:26px 20px 40px!important;text-align:center}
.bc-hero .in .pk{margin:0 0 10px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bc-coral);font-weight:600;text-indent:.24em}
.bc-hero .in h1{margin:0;font-size:clamp(40px,11vw,64px);font-weight:800;letter-spacing:-.01em;line-height:.95;color:var(--bc-ink);font-style:normal;text-transform:uppercase}
.bc-hero .in #dheroS{margin:12px auto 0;font-size:14px;color:var(--bc-mute);max-width:none}
.bc-hero-prices{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 24px;padding:0}
.bc-hero-prices li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid rgba(244,239,232,.18);border-radius:99px;font-size:13px;line-height:1;color:var(--bc-ink)}
.bc-hero-prices b{font-weight:700}
.bc-hero-prices i,.plan .legend .bk i,.plan .legend .gd i{display:inline-block;width:11px;height:11px;border-radius:3px!important;border:0!important}
.bc-hero-prices .bk,.plan .legend .bk i{background:var(--bc-coral)!important}
.bc-hero-prices .gd,.plan .legend .gd i{background:var(--bc-gold)!important}
.bc-hero .cta{display:block;width:fit-content;margin:0 auto}
.bc-hero .scroll{display:none}
@media(min-width:821px){
 html body section.chero.bc-hero{display:grid;grid-template-columns:auto minmax(320px,460px);justify-content:center;align-items:center;column-gap:clamp(48px,7vw,110px);min-height:100vh!important;padding:calc(var(--navh,74px) + 28px) 40px 40px!important;box-sizing:border-box}
 .bc-hero .bc-flyer{width:auto;height:calc(100vh - var(--navh,74px) - 68px);max-height:980px;aspect-ratio:9/16;margin:0;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
 .bc-hero .bc-flyer img{height:100%;width:100%}
 .bc-hero .in{text-align:left;padding:0!important}
 .bc-hero .in .pk{text-indent:0}
 .bc-hero .in h1{font-size:clamp(54px,5.4vw,84px)}
 .bc-hero .in #dheroS{margin-left:0;font-size:16px}
 .bc-hero-prices{justify-content:flex-start}
 .bc-hero .cta{margin:0}
 .bc-hero .scroll{display:block;position:absolute;left:50%;bottom:22px}
}

/* plan: portrait, fits the screen width */
.plan .plan-scroll{overflow:visible!important;max-width:560px;margin:0 auto}
#plan{display:block;width:100%!important;min-width:0!important;height:auto!important;max-width:560px;margin:0 auto;touch-action:manipulation}
.pk-plan-hint{display:none}
#plan .bc-l{font-family:var(--sans);fill:rgba(244,239,232,.55);font-weight:700;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
#plan .bc-l-zone{font-size:13px}
#plan .bc-l-off{fill:rgba(244,239,232,.22)}
#plan .bc-l-bk{fill:var(--bc-coral);font-size:12px}
#plan .bc-l-gd{fill:var(--bc-gold)}
#plan .bc-l-floor{font-size:22px;fill:rgba(244,239,232,.10);letter-spacing:.3em}
#plan .bc-l-s{font-size:10px;fill:rgba(244,239,232,.35)}
#plan .bc-dj{font-size:15px;fill:#1a0d0b;letter-spacing:.12em}
#plan .bc-off{fill:#2a2325;stroke:#3a3133;stroke-width:1}
#plan .bc-seat{cursor:pointer;outline:none}
#plan .bc-seat .ring{opacity:0;transition:opacity .15s}
#plan .bc-seat .m{transition:filter .15s,transform .15s;transform-box:fill-box;transform-origin:center}
#plan .bc-seat:hover .m,#plan .bc-seat:focus-visible .m,#plan .bc-seat.hov .m{filter:brightness(1.18)}
#plan .bc-seat.sel .ring,#plan .bc-seat:focus-visible .ring{opacity:1}
#plan .bc-seat.sel .m{transform:scale(1.12)}
#plan .bc-seat .lb{font:800 8.5px/1 var(--sans);fill:#2a0f0b;pointer-events:none}
#plan .bc-seat.pk-out{opacity:.22}
.plan .legend{gap:8px 18px!important}
.plan .legend span{letter-spacing:.08em!important}

/* desktop: plan left, "Pick your table" card or the table panel right */
.bc-side{display:none}
@media(min-width:1000px){
 html body .panel{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;column-gap:40px!important;align-items:start!important}
 html body .panel>h2,html body .panel>.zones{grid-column:1/-1}
 html body .panel>#planSection{grid-column:1!important;margin:0!important}
 html body .panel>.bc-side,html body .panel>#summary{grid-column:2!important;grid-row:3!important;position:sticky!important;top:calc(var(--navh,74px) + 18px)!important;align-self:start!important;margin:0!important}
 .bc-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:38px 28px;border:1px solid rgba(244,239,232,.14);border-radius:16px;background:rgba(255,255,255,.02)}
 .bc-side[hidden]{display:none}
 .bc-side img{width:62%;height:auto}
 .bc-side h3{margin:8px 0 0;font-size:22px;font-weight:700;color:var(--bc-ink);font-style:normal}
 .bc-side p{margin:0;font-size:14px;line-height:1.6;color:var(--bc-mute)}
 html body .panel>#summary .s-row{flex-direction:column!important;align-items:stretch!important;gap:18px!important}
 html body .panel>#summary .s-row button{width:100%!important}
 html body .panel>#list,html body .panel>#listMore,html body .panel>.rm-cta{grid-column:1/-1}
}

/* closing + FAQ use the flyer art */
html body section.closing{display:flex!important;position:relative;overflow:hidden;align-items:center;justify-content:center;text-align:center;min-height:80vh!important}
html body section.closing>img{object-fit:cover;object-position:center 62%}
@media(min-width:821px){html body section.closing{min-height:100vh!important}}
.faq-img img{object-position:center 58%}

/* fixes after the first live look (11 Oct 2026) */
html body .plan .plan-scroll{width:100%!important;align-self:center}
html body section.chero.bc-hero .cta{display:block!important;width:fit-content;margin:0 auto}
@media(min-width:821px){html body section.chero.bc-hero .cta{margin:0!important}}
#plan .bc-l-zone{font-size:15px}

/* tidy-up after Tim's phone check (11 Oct 2026) */
/* header: solid, nothing shows through it */
html body>nav,html body>nav.solid{background:rgba(11,10,10,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* phones: the flyer already says Black Coffee · Sat 24 Oct · Ushuaïa — under it only the two prices */
@media(max-width:820px){
 .bc-hero .in{padding:20px 16px 22px!important}
 .bc-hero .in .pk,.bc-hero .in h1,.bc-hero .in #dheroS{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
 .bc-hero-prices{margin:0!important;gap:8px}
 .bc-hero-prices li{padding:10px 14px;font-size:12.5px}
 html body header.hero{padding-top:14px!important}
}
/* closing + FAQ: the portrait without the flyer's lettering, dimmed so the copy reads */
html body section.closing>img{object-position:center 30%!important;filter:brightness(.42) saturate(.9)}
html body section.closing .shade{background:linear-gradient(180deg,rgba(11,10,10,.55),rgba(11,10,10,.80))!important}
.faq-img img{object-position:center 35%!important}