*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;line-height:1.6;font-family:'Archivo',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);text-transform:uppercase;font-size:13px;letter-spacing:.03em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:3px}

.d6 img,.d6 canvas{mix-blend-mode:multiply}
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* top: small logo (or, on the home page, what's playing) left; menu and opening hours right */
.d6 header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:clamp(20px,3vw,36px)}
.corner-logo{min-height:20px}
.corner-logo img{mix-blend-mode:multiply;display:block;height:clamp(36px,3.4vw,48px);width:auto}
.header-right{display:flex;gap:clamp(24px,4vw,56px);text-align:right}
.d6 nav{display:flex;flex-direction:column;align-items:flex-end}
.d6 nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.hours{display:grid;grid-template-columns:auto auto;gap:0 20px;text-align:left}
.hours span:nth-child(even){text-align:right}

/* bottom right: address and Instagram */
.d6 footer{display:flex;justify-content:flex-end;padding:clamp(20px,3vw,36px)}
.address{display:flex;flex-direction:column;align-items:flex-end;text-align:right}

/* top left on the home page: what's playing, where the small logo sits on other tabs */
.js[data-tab="home"] .header-left:has(.now-playing:not([hidden])) .corner-logo{display:none}
.now-playing{display:flex;flex-direction:column;max-width:min(320px,55vw)}
.now-playing[hidden],.js[data-tab]:not([data-tab="home"]) .header-left .now-playing{display:none}
.np-label{display:flex;align-items:baseline;gap:8px} /* bars stand on the text's baseline */
.np-label-text{opacity:.6}
.np-track{display:flex;flex-direction:column}
.np-artist{opacity:.6}
/* three small bars that bounce while a song is playing, in the logo's red */
.np-bars{display:none;align-items:flex-end;gap:2px;height:9px}
.np-bars i{display:block;width:2px;height:100%;background:#d30000;transform-origin:bottom;animation:np-bar .9s ease-in-out infinite alternate}
.np-bars i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.np-bars i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
.now-playing.playing .np-bars{display:flex}
@keyframes np-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.np-bars i{animation:none;transform:scaleY(.6)}}

.d6 main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px clamp(20px,5vw,56px);text-align:center}
.panel{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%}
.big-logo{mix-blend-mode:multiply;display:block;width:clamp(180px,26vw,340px);height:auto}
/* the animated logo (logo.js) is drawn on a canvas over the image */
.logo-warp{position:relative;display:block}
.logo-warp canvas{mix-blend-mode:multiply;position:absolute;inset:0;width:100%;height:100%}
.logo-warp.live .big-logo{visibility:hidden}
.d6 h1{margin:0;font-weight:500;font-size:13px;letter-spacing:.08em}
.lead{margin:-24px 0 0;font-weight:700;text-align:center}
/* one long list on every tab */
.groups{display:flex;flex-direction:column;gap:36px;width:100%;max-width:520px}
.group{display:flex;flex-direction:column;gap:2px}
.group-title{font-weight:500;margin-bottom:10px}
.item{text-wrap:balance;margin-bottom:6px}
/* menu items with a price: name left, price right */
.group:has(.priced){text-align:left}
.item.priced{margin-bottom:18px;display:grid;grid-template-columns:1fr auto;column-gap:clamp(28px,6vw,56px);align-items:baseline}
.item.priced .sub{grid-column:1}
.price{white-space:nowrap;text-align:right}
.link{text-decoration:underline;text-underline-offset:3px}
.sub{opacity:.6}
/* events: one centred list, like About us and Contact */
.events{width:100%;max-width:520px;display:flex;flex-direction:column;gap:36px}
.event{display:flex;flex-direction:column;gap:2px}
.event-when{opacity:.6}
.event-title{font-weight:500}
.event .sub{text-wrap:pretty}
.body{margin:0;max-width:560px;text-wrap:pretty}
.body a,.item span a{text-decoration:underline;text-underline-offset:3px}
/* a grey line under a group heading (times and guests on Private events) */
.group-note{margin:-6px 0 10px}
/* private events read like the menu: everything left, prices right */
[data-panel="private-events"] .group{text-align:left}
[data-panel="private-events"] .item{margin-bottom:18px}


/* One panel at a time with JS; everything listed without */
.js .d6 .panel{display:none}
.js .d6 .panel.active{display:flex}
.js .corner-logo a{visibility:hidden}
.js[data-tab]:not([data-tab="home"]) .corner-logo a{visibility:visible}
html:not(.js) .d6 main{gap:80px}
.today,.footer-hours{display:none}

/* phones: menu top left, what's playing top right on the landing page (small
   logo there on the other tabs), today's hours over the logo at the bottom,
   the full opening hours and the address below it (scroll) */
@media (max-width:600px){
  .d6 header{flex-direction:row-reverse}
  .header-right{text-align:left}
  .d6 nav{align-items:flex-start}
  .header-hours{display:none}
  .now-playing{align-items:flex-end;text-align:right}
  .today{display:block;font-weight:700}
  .home{gap:12px;position:relative} /* site.js moves it up the screen while scrolling to the footer */
  .big-logo{width:min(72vw,340px)}
  /* landing page: the logo sits at the bottom of the screen */
  /* ...filling the first screen on its own, so the address is only seen on scrolling */
  .js[data-tab="home"] .d6 main{justify-content:flex-end;min-height:100vh;min-height:100svh}
  /* ...and well below it, centred: opening hours, then the address */
  .js[data-tab="home"] .d6 footer{flex-direction:column;align-items:center;gap:36px;padding-top:50vh}
  .js[data-tab="home"] .footer-hours{display:grid}
  .js[data-tab="home"] .address{align-items:center;text-align:center}
  /* the menu floats, so the logo can sit right at the bottom of the screen */
  .page{position:relative}
  .js[data-tab="home"] .d6 header{position:absolute;top:0;left:0;right:0}
  /* thumb-sized tap targets, same row height for menu, hours and address */
  .d6 nav a,.hours span,.address>*{padding:4px 0}
}