/* Anchor targets sit under a sticky header. Without this, an anchored link
   like /booking#availability scrolls its heading underneath the header
   instead of to the top of the viewport. legal.css already does this for
   policy sections. */
main [id]{scroll-margin-top:calc(var(--header) + 20px)}

/* ==========================================================================
   Shared page furniture — the patterns that repeat across every page.
   Tokens, type, buttons, header, and footer live in brand.css.
   Anything used by exactly one page stays in that page's <style> block.
   ========================================================================== */

/* --- Section scaffolding -------------------------------------------------- */

.section{
  position:relative;
  max-width:var(--max);
  margin:auto;
  padding:var(--space-section) var(--gutter);
  border-top:1px solid var(--line);
}
.section:first-of-type{border-top:0}
/* A half-step, for a block that reads as a continuation of the one above it
   rather than a new subject. */
.section.tight{padding-block:var(--space-tight)}
/* A section that leads straight into the next with no rule between them keeps
   its own floor off the following block's ceiling. */
.section.flush{border-top:0;padding-top:0}
.section.recessed{background:var(--surface)}

/* Section heading + supporting column. Collapses to one column early because
   the display face needs its own line length to stay readable. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);
  align-items:end;
  margin-bottom:var(--space-block);
}
.split>p,.split>div:last-child{max-width:60ch;margin:0;color:var(--muted);line-height:1.75}
/* A split that ends its section has nothing to space itself from, and the
   leftover margin reads as an unfinished page. */
.section>.split:last-child{margin-bottom:0}
.split>div:last-child p{margin:0 0 12px}
.split>div:last-child p:last-child{margin-bottom:0}

h1{font-size:clamp(38px,5.6vw,78px)}
.section h2{font-size:clamp(28px,3.4vw,50px)}
.lede{max-width:62ch;margin:0;color:var(--text);font-size:clamp(17px,1.7vw,20px);line-height:1.65}
.body{max-width:62ch;color:var(--muted);line-height:1.75}
.body p{margin:0 0 16px}
.body p:last-child{margin-bottom:0}
.note{color:var(--dim);font-size:12px;line-height:1.6}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:var(--space-stack)}

/* --- Page hero ------------------------------------------------------------ */
/* Used by every page except the landing page, which has its own full-bleed
   treatment. Keeps interior pages on one rhythm. */

.page-hero{
  position:relative;
  max-width:var(--max);
  margin:auto;
  padding:var(--space-hero) var(--gutter) var(--space-tight);
}
.page-hero .lede{margin-top:var(--space-stack)}

/* --- Where-we-play list --------------------------------------------------- */
/* Bars and restaurants lead, always. The first item is emphasised because it
   is the core business, not because it is first in a loop. */

.venues{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.venues li{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--head);
  font-size:clamp(17px,2vw,26px);
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .18s;
}
.venues li:first-child{color:var(--bone)}
.venues li:hover{color:var(--text)}
.venues li span{
  flex:0 0 auto;
  min-width:2.4em;
  color:var(--dim);
  font-size:11px;
  letter-spacing:.14em;
}

/* --- Shows list ----------------------------------------------------------- */

.show-list{border-top:1px solid var(--line)}
.show{
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:70px 1fr auto;
  align-items:center;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-align:left;
  transition:background-color .18s;
}
.show:hover{background:rgba(245,242,234,.045)}
.date{font-family:var(--head);color:var(--bone);text-transform:uppercase}
.date small{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted)}
.date b{display:block;font-size:27px;font-weight:400;line-height:1.05}
.show-info{padding:12px 16px;border-left:1px solid var(--line)}
.show-info b{display:block;font-weight:400;font-family:var(--head);font-size:15px;text-transform:uppercase;letter-spacing:-.005em}
.show-info small,.time{color:var(--muted);font-size:11.5px}
.time{padding-left:10px}
.empty-shows{padding:28px 0;color:var(--muted);line-height:1.7}

/* --- Teaser card ---------------------------------------------------------- */
/* A photo block with copy sitting in its shadow. Used for the Rocket teaser
   and anywhere else an image needs to be a link. */

.teaser{
  position:relative;
  display:flex;
  min-height:380px;
  overflow:hidden;
  background:var(--ink-deep);
  border:1px solid var(--line);
}
.teaser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.teaser::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 6%,rgba(0,0,0,.5) 46%,transparent 80%);
}
.teaser:hover img{transform:scale(1.03)}
.teaser figcaption,.teaser .teaser-body{position:relative;z-index:2;margin-top:auto;padding:clamp(24px,3vw,36px)}
.teaser h2,.teaser h3{margin:10px 0 14px;font-size:clamp(21px,2.2vw,30px)}
.teaser p{margin:0 0 16px;max-width:44ch;color:var(--muted);font-size:14px;line-height:1.65}

/* --- Forms ---------------------------------------------------------------- */

.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.wide{grid-column:1/-1}
.field span{color:var(--muted);font:400 10px var(--head);letter-spacing:.16em;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;
  min-height:48px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  outline:0;
  background:transparent;
  appearance:none;
  transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bone)}
.field select{background:var(--surface)}
.field textarea{min-height:112px;resize:vertical}
.field small,.form-status{min-height:15px;color:var(--alert);font-size:11.5px;line-height:1.5}

/* --- Utility -------------------------------------------------------------- */

.cta-band{
  max-width:var(--max);
  margin:auto;
  padding:var(--space-section) var(--gutter);
  border-top:1px solid var(--line);
  text-align:center;
}
.cta-band h2{margin:0 0 16px;font-size:clamp(28px,3.6vw,52px)}
/* text-wrap:balance so a centred closing line never orphans its last word on
   a line of its own — the failure mode of a centred measure. */
.cta-band p{max-width:52ch;margin:0 auto;color:var(--muted);line-height:1.75;text-wrap:balance}
.cta-band .actions{justify-content:center}

/* --- Reveal-on-scroll ------------------------------------------------------ */
/* Sections rise a step and fade in the first time they enter the viewport.
   Every hiding rule is scoped to html.js-motion, a class only motion.js adds —
   and it bails before adding it when JS is off, IntersectionObserver is
   missing, or prefers-reduced-motion matches, so content is visible by
   default and this whole block simply never applies. */
html.js-motion :is(.section,.cta-band,.page-hero){
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1);
}
html.js-motion :is(.section,.cta-band,.page-hero).is-in{opacity:1;transform:none}

@media(max-width:860px){
  .split{grid-template-columns:1fr;align-items:start}
  .fields{grid-template-columns:1fr}
  .wide{grid-column:auto}
}
@media(max-width:700px){
  .actions{flex-direction:column;align-items:stretch}
  .actions .button,.actions .textlink{justify-content:center}
  .cta-band .actions{align-items:stretch}
  .teaser{min-height:320px}
}