/* ─── Brick & Smoke — Laugh Lounge design prototype ───────────────────────
   Metaphor: the back wall of the room after close — an empty stage under one
   work light, this week's bills pasted up beside it.
   Single committed dark theme; a comedy cellar has no light mode.
   Two controls only: a filled gold button (the one action) and an underlined link. */
:root{
  --wall:#100c0a;--wall-lit:#171210;--paper:#efe6d3;
  --cream:#f4eada;--cream-2:#d9cdb9;--dim:#a39482;
  --gold:#f0b542;--on-gold:#241a05;--red:#c22b33;
  --line:rgba(244,234,218,.14);--line-gold:rgba(240,181,66,.35);
  --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --slab:'Alfa Slab One','Rockwell Extra Bold',Georgia,serif;
  --body:Archivo,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.625,.05,0,1);
  --gutter:clamp(16px,4vw,48px);--max:1200px;--navh:68px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:#f7cd7d}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* type: slab for the one statement, condensed caps for names and dates, body sans for sentences */
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
h3{font-size:1.5rem;font-weight:600}
.lede{font-size:1.05rem;line-height:1.55;color:var(--cream-2);max-width:54ch;margin:0}
p{margin:0}

/* the two controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:50px;padding:0 1.5rem;border-radius:2px;background:var(--gold);color:var(--on-gold);font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1;transition:background .2s var(--ease)}
.btn:hover{background:#f7cd7d;color:var(--on-gold)}
.link{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);border-bottom:1px solid rgba(244,234,218,.4);padding-bottom:2px;transition:border-color .2s}
.link:hover{color:var(--cream);border-color:var(--cream)}
.link.gold{color:var(--gold);border-color:var(--line-gold)}
.link.gold:hover{color:#f7cd7d;border-color:var(--gold)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}

/* ─── nav ─── */
.nav{position:fixed;inset-inline:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav.solid,.nav.open{background:rgba(16,12,10,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--navh)}
.brand{color:var(--cream);font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase}
.brand:hover{color:var(--cream)}
.nav-links{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}
.nav-links a{color:var(--cream-2);font-family:var(--disp);font-weight:500;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem 0}
.nav-links a:hover{color:var(--cream)}
.nav-links .btn{height:40px;padding:0 1.1rem;font-size:.95rem;color:var(--on-gold)}
.menu-btn{display:none;width:44px;height:44px;place-items:center;color:var(--cream)}
.menu-btn svg{width:22px;height:22px}
.sheet{display:none}
@media(max-width:860px){
  .nav-links a:not(.btn){display:none}
  .menu-btn{display:grid}
  .sheet{display:block;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .nav.open .sheet{max-height:320px}
  .sheet-in{display:flex;flex-direction:column;padding:.4rem 0 1rem}
  .sheet-in a{display:block;padding:.85rem 0;color:var(--cream);font-family:var(--disp);font-weight:600;font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)}
}

/* ─── hero: the empty stage ─── */
section.hero{position:relative;isolation:isolate;min-height:min(84svh,740px);display:grid;overflow:hidden;background:var(--wall);padding:calc(var(--navh) + env(safe-area-inset-top,0px)) 0 0}
/* a short laptop window: pull the display sizes in so the wall still breathes */
@media(min-width:861px) and (max-height:880px){
  .slide-copy h2{font-size:clamp(2.8rem,5.2vw,4.4rem)}
  .slide-club h1{font-size:clamp(2.8rem,4.6vw,4.4rem)}
  .wallbills{max-width:430px}
  .slide .wrap{padding-block:clamp(1rem,2vw,1.6rem) 6rem}
}
.wall{position:absolute;inset:-10% 0;z-index:-3;background:url(../img/room.jpg) 0% 40%/107% auto no-repeat;filter:grayscale(.62) sepia(.15) brightness(.82) contrast(1.06);will-change:transform;transform:translate3d(0,0,0)}
.rake{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(16,12,10,.9) 0%,rgba(16,12,10,.76) 34%,rgba(16,12,10,.22) 52%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.2) 100%),
    linear-gradient(to bottom,rgba(16,12,10,.6) 0%,rgba(16,12,10,.05) 20%,rgba(16,12,10,.1) 58%,var(--wall) 100%)}
.cone{display:none;position:absolute;left:70%;top:-8%;width:0;height:0;z-index:-2;pointer-events:none;border-left:15vw solid transparent;border-right:15vw solid transparent;border-top:120vh solid rgba(255,246,228,.05);transform:translateX(-50%)}
@media(max-width:860px){
  .rake{background:linear-gradient(to bottom,rgba(16,12,10,.5) 0%,rgba(16,12,10,.08) 18%,rgba(16,12,10,.4) 44%,rgba(16,12,10,.92) 60%,var(--wall) 100%)}
  .cone{display:none}
}
.crowd{display:none;position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-2;object-fit:cover;object-position:50% 38%;filter:grayscale(1) sepia(.25) contrast(1.05);opacity:.32;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%)}
.slides{grid-area:1/1;position:relative;z-index:1;display:grid;align-items:center}
.slide{grid-area:1/1;display:grid;align-content:center;min-width:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s linear .7s}
.slide.on{opacity:1;visibility:visible;transition-delay:0s}
.slide .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;padding-block:clamp(1.5rem,4vw,3rem) 6.5rem}
.slide-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;transform:translateY(14px);transition:transform .7s var(--ease)}
.slide.on .slide-copy{transform:none}
.slide-copy h2{font-size:clamp(3.2rem,8.2vw,6.8rem);letter-spacing:-.005em;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.slide-copy .when{font-family:var(--disp);font-weight:600;font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.slide-copy .blurb{color:var(--cream-2);max-width:44ch}
.slide-club .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.slide-club h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;font-size:clamp(3.2rem,7vw,5.9rem);max-width:9ch}
.slide-club .kick{font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.slide-club .addr{font-family:var(--disp);font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2)}
/* the bill — ONE fixed 4:5 frame on paper; art contained, never cropped */
.bill{display:block;position:relative;width:min(100%,380px);aspect-ratio:4/5;justify-self:end;padding:6px;background:var(--paper);border-radius:1px;box-shadow:2px 3px 0 rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.bill-frame{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:#0d0a08}
.bill-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bill-frame .bg{object-fit:cover;transform:scale(1.25);filter:blur(22px) brightness(.55) saturate(1.1)}
.tape{display:block;position:absolute;top:-9px;left:50%;width:74px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(236,226,204,.5);clip-path:polygon(0 12%,3% 0,97% 4%,100% 14%,99% 88%,96% 100%,4% 96%,1% 84%);box-shadow:0 1px 2px rgba(0,0,0,.3);backdrop-filter:blur(1px)}
/* slide 1: three bills pasted on the wall, in the light */
.wallbills{position:relative;width:100%;aspect-ratio:1;max-width:540px;justify-self:end}
.wallbills .bill{position:absolute;width:46%;box-shadow:2px 3px 0 rgba(0,0,0,.35),0 26px 50px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .5s var(--ease)}
.wallbills .b1{left:0;top:3%;transform:rotate(-5deg);z-index:1}
.wallbills .b2{right:0;top:0;transform:rotate(3.5deg);z-index:2}
.wallbills .b3{left:27%;top:42%;transform:rotate(-1.5deg);z-index:3}
.wallbills a.bill:hover{transform:rotate(0) translateY(-4px);z-index:4}
.wallbills .b3 .tape{left:30%}
.wallbills .b2 .tape{left:60%;transform:translateX(-50%) rotate(4deg)}
/* hero rail: up next */
.hctl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:max(1.1rem,env(safe-area-inset-bottom,0px))}
.hctl .wrap{display:flex;align-items:center;justify-content:flex-start;gap:.6rem}
.dots{display:flex;gap:.5rem;align-items:stretch;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.dots::-webkit-scrollbar{display:none}
.dots .lbl{align-self:center;font-family:var(--disp);font-weight:500;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-right:.6rem;white-space:nowrap}
.dots button{position:relative;display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem .45rem .45rem;border-radius:2px;text-align:left;color:var(--cream-2);background:rgba(16,12,10,.55);box-shadow:inset 0 0 0 1px rgba(244,234,218,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:box-shadow .3s,color .3s;flex:0 0 auto;min-height:48px;overflow:hidden}
.dots button.on{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(240,181,66,.6)}
.dots button:hover{color:var(--cream)}
.dots .dt{width:30px;aspect-ratio:4/5;padding:2px;background:var(--paper);border-radius:1px;flex:0 0 auto;display:block}
.dots .dn{display:block;font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;white-space:nowrap}
.dots .dd{display:block;font-family:var(--disp);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dots button.on .dd{color:var(--gold)}
.dots .fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold)}
.dots button.on .fill{animation:fill var(--dur,6.5s) linear forwards}
.hero.paused .dots button.on .fill{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.arrows{display:flex;gap:.2rem}
.arrows button{width:44px;height:44px;display:grid;place-items:center;color:var(--cream-2);transition:color .2s}
.arrows button:hover{color:var(--cream)}
.arrows svg{width:20px;height:20px}
@media(pointer:coarse){.arrows{display:none}}
@media(max-width:860px){
  section.hero{min-height:auto}
  .slide{display:none}
  .slide.on{display:grid}
  .slide .wrap{grid-template-columns:1fr;gap:1.2rem;padding-block:.6rem 5.6rem}
  .wallbills{justify-self:center;max-width:100%;aspect-ratio:1.55;order:-1;margin-bottom:.4rem}
  .wall{background-position:84% 74%;background-size:cover}
  .wallbills .bill{width:40%}
  .wallbills .b1{left:0;top:6%}
  .wallbills .b2{right:0;top:0}
  .wallbills .b3{left:30%;top:22%}

  .bill{justify-self:center;width:min(64vw,280px);order:-1}
  .slide-copy h2{font-size:clamp(2.6rem,12vw,4rem)}
  .slide-club h1{font-size:clamp(2.9rem,12.5vw,4.2rem);max-width:9ch}
  .slide-club .addr{font-size:.82rem;letter-spacing:.12em}
  .slide-club .lede{font-size:.92rem;line-height:1.5;max-width:34ch}
  .lede{font-size:.95rem}
  .hctl .wrap{padding-inline:0 var(--gutter)}
  .dots{padding-left:var(--gutter);padding-right:2.5rem;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .dots .lbl{display:none}
}


/* ─── sections ─── */
section{padding-block:clamp(3rem,6vw,5rem)}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin-bottom:clamp(1.4rem,3vw,2.4rem)}

/* the ledger: whole row tappable; weekends carry a tonal band; this week's rows carry the bill */
.row.wknd{background:linear-gradient(90deg,rgba(244,234,218,.035),rgba(244,234,218,0) 70%)}
.row.soon{grid-template-columns:72px 84px minmax(0,1fr) auto}
.row.soon .r-date b{color:var(--gold)}
.row .thumb{display:block;width:56px;aspect-ratio:4/5;padding:3px;background:var(--paper);border-radius:1px;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.row.soon .thumb{width:84px;aspect-ratio:4/5;padding:4px;background:var(--paper);border-radius:1px;box-shadow:0 10px 22px rgba(0,0,0,.55)}
.row.soon .r-name{font-size:1.9rem}
.soon-h{font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.month{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;margin:2.2rem 0 0;padding:.6rem 0}
.month:first-child{margin-top:0}
.month span{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-2)}
.month::after{content:"";height:1px;background:var(--line)}
.row{display:grid;grid-template-columns:72px 56px minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.05rem 0;border-bottom:1px solid var(--line);color:var(--cream)}
.row{transition:background .35s var(--ease)}
.row:hover{color:var(--cream);background:linear-gradient(90deg,rgba(240,181,66,.07),rgba(240,181,66,.02) 60%,transparent)}
.row:hover .r-name{color:#f7cd7d}
.row:hover .thumb{box-shadow:0 10px 24px rgba(0,0,0,.6),0 0 0 1px rgba(240,181,66,.35)}
.r-date{display:flex;flex-direction:column;line-height:1;font-family:var(--disp);text-transform:uppercase}
.r-date b{font-weight:700;font-size:3rem;letter-spacing:-.02em;color:var(--cream);font-variant-numeric:tabular-nums}
.r-date span{font-weight:500;font-size:.8rem;letter-spacing:.14em;color:var(--dim);margin-top:.3rem}
.r-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.r-name{font-family:var(--disp);font-weight:700;font-size:1.6rem;text-transform:uppercase;line-height:1;letter-spacing:.005em;color:var(--cream);transition:color .2s}
.r-when{font-family:var(--disp);font-weight:500;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2)}
.r-times{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.3rem}
.r-times a{font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-gold);padding-bottom:1px}
.r-times a:hover{color:#f7cd7d;border-color:var(--gold)}
.r-times .dead{font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.r-cta{display:flex;justify-content:flex-end;min-width:150px}
.r-cta .pill{display:inline-flex;align-items:center;justify-content:space-between;gap:.6rem;height:44px;padding:0 1rem;width:160px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line-gold);font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap;transition:box-shadow .2s,background .2s}
.r-cta .pill .price{color:var(--cream)}
.row:hover .pill{box-shadow:inset 0 0 0 1px var(--gold);background:rgba(240,181,66,.08)}
.r-cta .dead{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
@media(max-width:600px){.row,.row.soon{grid-template-columns:44px 52px minmax(0,1fr);gap:.7rem;padding:.7rem 0}.row .thumb,.row.soon .thumb{width:52px}.row.soon .r-name{font-size:1.3rem}.r-cta{grid-column:3;justify-content:flex-start;min-width:0;margin-top:.15rem}.r-cta .pill{height:38px;width:auto;padding:0 .8rem;font-size:.9rem}.r-times a{height:36px;font-size:.85rem}}
.r-times a{display:inline-flex;align-items:center;height:40px;padding:0 .8rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line-gold);border:0}
.r-times a:hover{box-shadow:inset 0 0 0 1px var(--gold)}
@media(max-width:600px){
  .r-date b{font-size:2rem}.r-date span{font-size:.7rem;letter-spacing:.14em}
  .r-name{font-size:1.25rem}.r-when{font-size:.85rem}
  .r-cta{justify-content:flex-start;margin-top:.25rem;min-width:0}
  .r-name{display:inline-flex;align-items:center;min-height:40px}
  .r-main{gap:0}
}
.lineup-foot{margin-top:1.6rem;color:var(--dim);font-size:.9rem;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.lineup-foot span{max-width:60ch}

/* ─── the room: one full-bleed photo, lit; the group offer lives here too ─── */
.room{position:relative;isolation:isolate;overflow:hidden;background:var(--wall-lit);display:grid;align-items:center;padding-block:clamp(4rem,8vw,7rem)}
.room .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}
.room-copy,.groups{grid-column:1}
.room-photo{position:absolute;inset:0;left:auto;width:58%;height:100%;object-fit:cover;object-position:60% 30%;z-index:-2;filter:grayscale(1) sepia(.22) contrast(1.08) brightness(.9);transition:filter 1.2s var(--ease)}
.room-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--wall-lit) 0%,var(--wall-lit) 42%,rgba(23,18,16,.55) 52%,rgba(23,18,16,0) 66%,rgba(23,18,16,0) 90%,rgba(23,18,16,.5) 100%),linear-gradient(to bottom,rgba(23,18,16,.5),rgba(23,18,16,0) 30%,rgba(23,18,16,0) 60%,var(--wall-lit) 100%),radial-gradient(40% 46% at 72% 32%,rgba(255,250,240,.12) 0%,transparent 70%);transition:background 1.2s var(--ease)}
.room.lit .room-photo{filter:grayscale(.45) sepia(.4) contrast(1.02) brightness(.98)}
.room.lit .room-scrim{background:linear-gradient(90deg,var(--wall-lit) 0%,var(--wall-lit) 42%,rgba(23,18,16,.5) 52%,rgba(23,18,16,0) 66%,rgba(23,18,16,0) 90%,rgba(23,18,16,.4) 100%),linear-gradient(to bottom,rgba(23,18,16,.5),rgba(23,18,16,0) 30%,rgba(23,18,16,0) 60%,var(--wall-lit) 100%),radial-gradient(48% 54% at 72% 32%,rgba(240,181,66,.26) 0%,transparent 70%)}
.room-copy{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;max-width:540px}
.lamp{display:inline-flex;align-items:center;gap:.8rem;color:var(--cream-2);font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.lamp .dot{width:22px;height:22px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 40%,#5a4a3c,#2a221c 70%);box-shadow:inset 0 0 0 1px rgba(240,181,66,.35);transition:background .4s,box-shadow .4s;flex:0 0 auto}
.lamp.on .dot{background:radial-gradient(circle at 50% 40%,#fff3cc,var(--gold) 60%);box-shadow:0 0 0 1px rgba(240,181,66,.6),0 0 30px 10px rgba(240,181,66,.45)}
.lamp:hover{color:var(--cream)}
.lamp .lbl{border-bottom:1px solid rgba(244,234,218,.4);padding-bottom:2px}
.lamp.on{color:var(--cream)}
.groups{margin-top:clamp(1.6rem,3vw,2.2rem);padding-top:clamp(1.4rem,2.5vw,2rem);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;max-width:540px}
.groups h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.4rem}
.groups p{color:var(--cream-2);max-width:48ch}
.groups .aside{margin-top:.6rem;font-size:.9rem;color:var(--dim)}
@media(max-width:860px){
  .room{padding-top:0}
  .room .wrap{grid-template-columns:1fr;padding-top:0}
  .room-photo{position:relative;width:100%;height:58vw;max-height:420px;object-position:64% 22%;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);margin-bottom:-1.5rem}
  .room-scrim{display:none}
  .room .wrap{padding-top:1rem}
}

/* ─── one voice from the room ─── */
.review{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wall);padding-block:clamp(2.4rem,4.5vw,3.6rem)}
.review .wrap{display:block}
.rev-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.score{display:flex;flex-direction:column;gap:.3rem}
.score .num{font-family:var(--disp);font-weight:700;font-size:clamp(4rem,7vw,5.6rem);line-height:.85;color:var(--cream);letter-spacing:-.02em}
.score .lbl{font-family:var(--disp);font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:.85rem;color:var(--dim)}
.quote{margin:0;display:flex;flex-direction:column;gap:.8rem}
.quote blockquote{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;letter-spacing:.005em;color:var(--cream);max-width:34ch}
.quote figcaption{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline;font-family:var(--disp);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
@media(max-width:700px){.rev-head{grid-template-columns:1fr;gap:1.2rem}}

/* ─── the printed menu card ─── */
.card-paper{background:var(--paper);color:#1a1410;padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,4vw,3.2rem);border-radius:1px;box-shadow:0 30px 60px rgba(0,0,0,.6);position:relative}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:2px solid #1a1410;padding-bottom:.7rem;margin-bottom:1.4rem}
.card-head h2,.card-head h3{font-family:var(--slab);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;text-transform:none;letter-spacing:-.01em;color:#1a1410}
.card-head span{font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:#5b4c3c}
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3.5vw,3rem)}
.mcol h4{margin:0 0 .5rem;font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:#1a1410}
.item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.15rem .5rem;align-items:baseline;padding:.45rem 0}
.item b{font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;color:#1a1410}
.item .ld{border-bottom:1px dotted rgba(26,20,16,.45);transform:translateY(-.3em)}
.item i{font-style:normal;font-family:var(--disp);font-weight:600;font-size:1.05rem;color:#1a1410;font-variant-numeric:tabular-nums}
.item span{grid-column:1/-1;font-size:.86rem;color:#5b4c3c;line-height:1.4}
.menu-foot{margin-top:1.6rem;display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;color:#5b4c3c;font-size:.9rem;padding-top:1rem;border-top:1px solid rgba(26,20,16,.25)}
.menu-foot .link{color:#1a1410;border-color:rgba(26,20,16,.5)}
.menu-foot .link:hover{color:#1a1410;border-color:#1a1410}
@media(max-width:860px){.menu-grid{grid-template-columns:1fr;gap:1.6rem}}
dialog.lb{border:0;padding:0;background:rgba(10,8,7,.94);max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
dialog.lb::backdrop{background:rgba(10,8,7,.8)}
dialog.lb .in{width:100%;height:100%;overflow:auto;display:grid;place-items:center;padding:1rem}
dialog.lb img{max-width:min(96vw,1200px);max-height:none}
dialog.lb .x{position:fixed;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;width:46px;height:46px;display:grid;place-items:center;color:var(--cream);background:rgba(16,12,10,.7);border-radius:2px}

/* ─── footer with the sign-up in it ─── */
footer{padding-block:clamp(2.6rem,5vw,3.6rem) 2.2rem;border-top:1px solid var(--line);background:var(--wall-lit);color:var(--dim);font-size:.9rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-bottom:2rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.foot-top h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--cream)}
.nlf{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.field{display:flex;gap:.6rem;width:100%}
.field input{flex:1 1 auto;min-width:0;height:50px;font-size:1rem;padding:0 .9rem;background:var(--wall);color:var(--cream);border:1px solid rgba(244,234,218,.32);border-radius:2px;font:inherit}
.field input:focus{border-color:var(--gold);outline:0}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--dim)}
.consent input{flex:0 0 auto;margin-top:.15rem;width:20px;height:20px;accent-color:var(--gold)}
.msg{min-height:1.2em;font-size:.9rem;color:var(--gold)}
.hp{position:absolute;left:-9999px}
.foot-in{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem}
.foot-links a{color:var(--cream-2);font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.foot-links a:hover{color:var(--cream)}
@media(max-width:860px){
  .foot-top{grid-template-columns:1fr}
  .nlf{width:100%}
  .field{flex-direction:column;gap:.8rem;width:100%}
  /* flex:none, or flex-basis:0% along the column eats the height */
  .field input{flex:0 0 auto;width:100%;height:56px;font-size:1.05rem;padding:0 1.1rem}
  .field .btn{flex:0 0 auto;width:100%;height:56px}
  .consent{font-size:.9rem;align-items:flex-start}
  .consent input{width:22px;height:22px;margin-top:.1rem}
}

/* reveal */
.rise{transition:transform .8s var(--ease),opacity .8s var(--ease)}
html.js .rise.pre{transform:translateY(18px);opacity:.001}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .rise.pre{transform:none;opacity:1}
}

/* ═══ inner pages ═══ */
.pg{position:relative;isolation:isolate;overflow:hidden;background:var(--wall);padding:calc(var(--navh) + env(safe-area-inset-top,0px) + clamp(2.5rem,6vw,5rem)) 0 clamp(2.5rem,5vw,4rem)}
.pg .wall{background-position:60% 40%;background-size:cover;filter:grayscale(.42) sepia(.16) brightness(.84) contrast(1.04)}
.pg .rake{background:linear-gradient(90deg,rgba(16,12,10,.86) 0%,rgba(16,12,10,.66) 42%,rgba(16,12,10,.18) 72%,rgba(16,12,10,.08) 100%),linear-gradient(to bottom,rgba(16,12,10,.5) 0%,rgba(16,12,10,.04) 28%,rgba(16,12,10,.12) 62%,var(--wall) 100%),radial-gradient(46% 52% at 72% 26%,rgba(255,244,222,.10) 0%,transparent 70%)}
.pg-copy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:660px;position:relative;z-index:1}
.pg-copy .kick{font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.pg-copy h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;font-size:clamp(2.9rem,6.2vw,5.2rem);max-width:none}
.pg-copy .actions{margin-top:.4rem}
.pg-copy .meta{font-family:var(--disp);font-weight:500;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pg.has-bill .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.pg.has-bill .bill{width:min(100%,360px);transform:rotate(-1.4deg);box-shadow:2px 3px 0 rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
@media(max-width:860px){.pg.has-bill .wrap{grid-template-columns:1fr}.pg.has-bill .bill{justify-self:center;width:min(66vw,300px);order:-1}}
.crumb{font-family:var(--disp);font-weight:500;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--cream-2)}
.crumb a:hover{color:var(--cream)}
/* facts row (what you get) */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.facts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{display:flex;flex-direction:column;gap:.5rem;padding-left:1rem;border-left:1px solid var(--line-gold)}
.fact b{font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);line-height:1}
.fact span{font-size:.95rem;line-height:1.5;color:var(--cream-2)}
@media(max-width:860px){.facts,.facts.four{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}}
@media(max-width:520px){.facts,.facts.four{grid-template-columns:1fr}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem);counter-reset:step}
.step{display:flex;flex-direction:column;gap:.5rem}
.step::before{counter-increment:step;content:counter(step);font-family:var(--disp);font-weight:700;font-size:3rem;line-height:.85;color:var(--gold);letter-spacing:-.02em}
.step b{font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream)}
.step span{font-size:.95rem;line-height:1.5;color:var(--cream-2)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:1.6rem}}
/* the two-column split (copy + list) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.list{display:flex;flex-direction:column}
.list > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--line)}
.list b{font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);min-width:12ch}
.list span{color:var(--cream-2);font-size:.95rem}
/* the paper sheet (forms live on paper, like the menu) */
.sheet-paper{background:var(--paper);color:#1a1410;padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,4vw,3.2rem);border-radius:1px;box-shadow:2px 3px 0 rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.6);position:relative}
.sheet-paper .card-head{margin-bottom:1.2rem}
.sheet-paper p{color:#5b4c3c;font-size:.95rem;max-width:60ch}
.sheet-paper a{color:#1a1410;border-bottom:1px solid rgba(26,20,16,.4)}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;margin-top:1.4rem}
.frm .full{grid-column:1/-1}
.frm label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#1a1410}
.frm label small{font-family:var(--body);font-weight:400;font-size:.8rem;letter-spacing:0;text-transform:none;color:#5b4c3c}
.frm input,.frm select,.frm textarea{width:100%;min-height:48px;padding:.6rem .8rem;background:#fbf7ee;color:#1a1410;border:1px solid rgba(26,20,16,.35);border-radius:2px;font:inherit;font-size:1rem}
.frm textarea{min-height:120px;resize:vertical}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:0;border-color:#1a1410;box-shadow:0 0 0 2px rgba(240,181,66,.5)}
.frm .btn{grid-column:1/-1;justify-self:start}
.frm .fine{grid-column:1/-1;font-size:.82rem;color:#5b4c3c}
.frm .msg{grid-column:1/-1;min-height:1.2em;font-family:var(--disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7a5a12}
@media(max-width:600px){.frm{grid-template-columns:1fr}}
.sent{display:none;padding:1rem 0 .4rem}
.sent h2,.sent h3{font-family:var(--slab);font-weight:400;text-transform:none;font-size:1.8rem;line-height:1.15;color:#1a1410;margin-bottom:.4rem}
form.done .frm{display:none}
form.done .sent{display:block}
/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:400;font-size:1.4rem;color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.1rem;color:var(--cream-2);max-width:60ch}
/* quotes on inner pages */
.quotes2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.quotes2 .quote blockquote{font-size:clamp(1.15rem,1.6vw,1.35rem);max-width:none}
@media(max-width:860px){.quotes2{grid-template-columns:1fr}}
/* show page */
.show-hero .bill{width:min(100%,380px)}
.times{display:flex;flex-wrap:wrap;gap:.6rem}
.times .btn{height:48px}
.show-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem)}
.show-body .lede{max-width:62ch}
.aside-box{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem;border:1px solid var(--line)}
.aside-box b{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.aside-box span{font-size:.95rem;color:var(--cream-2)}
@media(max-width:860px){.show-body{grid-template-columns:1fr}}
/* long-form */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:1rem}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.4rem}
.prose p,.prose li{color:var(--cream-2);line-height:1.6}
.prose ul{margin:0;padding-left:1.2rem}
.prose .date{font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:var(--dim)}
/* icons from the kit */
.ico{width:48px;height:48px;object-fit:contain;grid-row:span 2;align-self:center}
.linkrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.linkrow a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.2rem 1rem;padding:1rem 1.1rem;border:1px solid var(--line);color:var(--cream);font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s}
.linkrow a:hover{border-color:var(--line-gold);color:var(--cream)}
.linkrow small{display:block;grid-column:2;font-family:var(--body);font-weight:400;font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--dim)}
@media(max-width:700px){.linkrow{grid-template-columns:1fr}}
.dates{display:flex;flex-direction:column}
.dates button{display:grid;grid-template-columns:64px 56px minmax(0,1fr) auto;gap:1.2rem;align-items:center;text-align:left;padding:.9rem 0;border-bottom:1px solid var(--line);color:var(--cream);transition:color .2s}
.dates button:hover .r-name{color:#f7cd7d}
.dates button.picked .r-name{color:var(--gold)}
.dates .pick{font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media(max-width:600px){.dates button{grid-template-columns:44px 52px minmax(0,1fr)}.dates .pick{grid-column:3}}

/* ── Photo prints pinned to the wall. Graded to the room; the light comes up on hover, like the lamp. */
.prints{display:grid;align-items:start;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3.5vw,2.6rem);margin-block:0;padding-top:.6rem}
.prints.two{grid-template-columns:repeat(2,1fr);max-width:760px}
.print{position:relative;display:block;margin:0;padding:8px 8px 12px;background:var(--paper);border-radius:1px;box-shadow:0 16px 34px rgba(0,0,0,.5);transform:rotate(-1.4deg);transition:transform .6s var(--ease)}
.print:nth-child(2n){transform:rotate(1.1deg)}
.print:nth-child(3n){transform:rotate(-.6deg)}
.print img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.72) sepia(.22) contrast(1.06) brightness(.94);transition:filter .9s var(--ease)}
.print.wide img{aspect-ratio:3/2}
.print:hover{transform:rotate(0) translateY(-4px)}
.print:hover img{filter:grayscale(.12) sepia(.12) contrast(1.02) brightness(1)}
.print figcaption{padding:.55rem .1rem 0;font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#6d5f4e}
@media(max-width:700px){.prints{grid-template-columns:1fr 1fr;gap:1rem;padding-inline:6px}.prints .print:nth-child(3){display:none}.print{padding:5px 5px 8px}.print figcaption{font-size:.7rem;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.print,.print img,.row{transition:none}}
/* review band: the front row, behind the quote */
.review{position:relative;isolation:isolate;overflow:hidden}
.review-photo{position:absolute;inset:0;left:auto;width:52%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-1;filter:grayscale(.8) sepia(.2) contrast(1.05) brightness(.6);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%)}
.review::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(16,12,10,.35),transparent 30%,transparent 70%,rgba(16,12,10,.45))}
.review .quote{position:relative;max-width:640px}
@media(max-width:900px){.review-photo{width:100%;height:46%;top:auto;bottom:0;object-position:50% 40%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 60%);mask-image:linear-gradient(to bottom,transparent 0%,#000 60%);opacity:.7}.review .wrap{padding-bottom:9rem}}

/* mobile: menu card head stacks, definition lists stack, prints sit right under the copy */
@media(max-width:600px){.card-head{flex-direction:column;align-items:flex-start;gap:.25rem}.list > div{grid-template-columns:1fr;gap:.15rem}.list b{min-width:0}}
section.tight{padding-top:0}

/* ══════════════════════════════════════════════════════════════════════
   Live-site additions (Brick & Smoke port, Sept 19 2026)
   Everything below exists because the real site has it and the prototype
   didn't: skip link, announce strip, anniversary band, the fuller Google
   reviews block, the menu photo lightbox, the mobile jump bar and the
   Ticket Tailor section. Same tokens, same two controls, no new colours.
   ══════════════════════════════════════════════════════════════════════ */

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--on-gold);padding:.7rem 1rem;font-family:var(--disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:0 0 2px 0}
.skip:focus{left:0}


/* ── anniversary band: pasted under the hero, only while a matching show is live */
.anniv{display:block;background:var(--wall-lit);border-block:1px solid var(--line-gold);padding:1rem 0;color:var(--cream)}
.anniv:hover{color:var(--cream)}
.anniv .wrap{display:flex;align-items:center;justify-content:center;gap:.8rem 1.6rem;flex-wrap:wrap;text-align:center}
.anniv .kicker{font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.anniv .kicker small{display:block;font-weight:500;font-size:.7rem;letter-spacing:.24em;color:var(--dim)}
.anniv .names{color:var(--cream-2);font-size:.95rem;max-width:62ch}
.anniv .names b{color:var(--cream);font-weight:600}
.anniv .btn{height:44px;font-size:.95rem}
.anniv:hover .btn{background:#f7cd7d}
@media(max-width:680px){.anniv .wrap{flex-direction:column;gap:.7rem}.anniv .btn{width:100%;max-width:22rem}}

/* ── reviews: the score, the pull quote, then the two verbatim ones.
      All real Google reviews — verbatim, never paraphrased. */
.rev-more{margin-top:1.6rem}
.pull{margin:clamp(1.6rem,3vw,2.4rem) 0 0;position:relative;max-width:46ch}
.pull blockquote{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.16;color:var(--cream)}
.pull figcaption{margin-top:.7rem;font-family:var(--disp);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.qstars{font-size:.85rem;letter-spacing:.24em;color:var(--gold)}
.review .quotes2{margin-top:clamp(1.6rem,3vw,2.4rem);position:relative}
.review .quotes2 blockquote{font-family:var(--body);font-weight:400;text-transform:none;font-size:1rem;line-height:1.55;color:var(--cream-2);letter-spacing:0}
.review .quotes2 figcaption{letter-spacing:.16em;font-size:.78rem}


/* ── Ticket Tailor section: the club's own box office, in the wall's palette */
.ttbox{background:var(--wall-lit);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;padding:clamp(.8rem,2vw,1.2rem);overflow:visible}
.tt-widget{width:100%}
.tt-widget iframe{width:100%!important;min-height:820px!important}
.tt-widget-fallback a{font-family:var(--disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* ── mobile jump bar (v7.1): appears once you're into the line-up.
      Sits above the next-up bar; both are safe-area aware. */
.jump{position:fixed;left:0;right:0;bottom:0;z-index:36;background:rgba(16,12,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--line);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);transition:transform .35s var(--ease)}
.jump.on{transform:none}
.jump-in{display:flex;align-items:stretch;gap:.4rem;height:52px;padding-inline:var(--gutter)}
.jump a{display:inline-flex;align-items:center;gap:.35rem;padding:0 .7rem;font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);white-space:nowrap}
.jump a:hover,.jump a:focus-visible{color:var(--cream)}
.jump-top{color:var(--gold)!important;box-shadow:inset 0 0 0 1px var(--line-gold);border-radius:2px;flex:0 0 auto}
.jump-top svg{width:12px;height:12px}
.jump-sc{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.jump-sc::-webkit-scrollbar{display:none}
@media(min-width:1000px){.jump{display:none}}

/* ── posters: full artwork, edge to edge.
      Art that is already 4:5-ish fills its frame (cover) — no bars, no blurred
      padding. Anything off-ratio still gets the blurred self-fill so the poster
      is never cropped into nonsense. `LL.fit()` adds .fill once the art loads. */
.bill-frame.fill img{object-fit:cover}
/* a thumbnail has no blurred backdrop, so the art is centred on the frame itself */
.bill-frame.solo img{object-fit:contain}
.bill-frame.solo.fill img{object-fit:cover}
/* a poster that failed to load reads as an empty slot, never as blank paper */
.bill-frame.empty{background:linear-gradient(160deg,#1c1512,#0d0a08)}
.bill-frame.empty img{display:none}
.bill-frame.fill .bg{display:none}

/* ── Cookie consent bar (Sept 21, 2026) ─────────────────────────────────────
   Shown once, only when there is a GA4 id to consent to. Sits above the fold
   line on mobile without covering a ticket button: it is a bar at the bottom,
   and the page keeps scrolling behind it. */
.ll-consent{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  background:rgba(16,12,10,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-gold);box-shadow:0 -8px 24px rgba(0,0,0,.45)}
.ll-consent p{margin:0;flex:1 1 20rem;font-size:.86rem;line-height:1.45;color:var(--cream-2)}
.ll-consent a{color:var(--gold);border-bottom:1px solid var(--line-gold)}
.ll-consent-b{display:flex;gap:.6rem;flex:0 0 auto;margin-left:auto}
.ll-consent button{font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.13em;
  text-transform:uppercase;border-radius:2px;height:40px;padding:0 1.05rem;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--cream);
  transition:border-color .2s,background .2s,color .2s}
.ll-consent .ll-c-no:hover{border-color:var(--cream)}
.ll-consent .ll-c-yes{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.ll-consent .ll-c-yes:hover{background:#f7cd7d}
.ll-consent button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:560px){
  .ll-consent{padding:.85rem .9rem calc(.85rem + env(safe-area-inset-bottom))}
  .ll-consent p{flex:1 1 100%;font-size:.82rem}
  .ll-consent-b{margin-left:0;width:100%}
  .ll-consent button{flex:1 1 0}
}
@media (prefers-reduced-motion:no-preference){
  .ll-consent{animation:ll-consent-in .28s var(--ease) both}
  @keyframes ll-consent-in{from{transform:translateY(100%)}to{transform:none}}
}