/* home.css — everything below the shared shell. Loads after site.css. */

html{scroll-behavior:smooth}
/* The anchor is on the <h2>, but the eyebrow sits ~35px ABOVE it, so the margin
   has to clear the 72px fixed nav + that eyebrow + the 18px the .rev reveal
   reclaims (the block is still translateY(18px) when the scroll target is
   computed, then settles to 0 and drags the landing up). Too little and the
   "What's On" label lands behind the nav. */
#whats-on{scroll-margin-top:145px}
.sec{position:relative;z-index:2;padding:104px 0}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:#B0308A;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:block}
.h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(38px,5.1vw,62px);line-height:1.03;letter-spacing:-.5px;margin:16px 0 0;color:#F3EBDD}
.lead{font-size:17px;line-height:1.7;color:#B7A98F;max-width:560px}

/* ── Scroll reveal (JS-gated so no-JS still shows everything) ──
   NOTE: .rev is home's alone. space uses .block.rev to mean "reversed
   column order" — hoisting these rules into site.css would make that block
   invisible. Keep them here. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none;transition:none}}

/* ── Placeholders ── */
.ph{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#241c16,#161109);border:1px solid rgba(198,144,42,.18);border-radius:14px;overflow:hidden;color:#8a7d68}
.ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:5px 5px;opacity:.5;pointer-events:none}
.ph-chip{position:absolute;top:12px;left:12px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:1.5px;padding:4px 9px;border-radius:5px;background:rgba(0,0,0,.45);color:#C6902A;border:1px solid rgba(198,144,42,.3);z-index:2}
.ph-body{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px;max-width:88%}
.ph-ic{width:32px;height:32px;opacity:.5}
.ph-cap{font-family:'Bebas Neue',sans-serif;font-size:13.5px;letter-spacing:1.1px;line-height:1.55;color:#9a8c74}
/* Gig poster from Supabase Storage. Sits ON TOP of the .ph placeholder (which stays in
   the DOM as the onerror fallback — same pattern as the hero photo) but UNDER .ph-chip
   at z-index 2, so the day label stays legible over the artwork. */
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#161109}

/* ── Hero ── */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
/* The hero opts OUT of the site-wide 85% and renders at full size — it's the
   one panel whose job is to be big, and shrinking its logo and CTAs by 15%
   drained it. zoom compounds down the tree, so .85 × 1/.85 = 1: the hero and
   everything inside it (logo, eyebrow, CTAs, closure banner) land exactly on
   their pre-zoom rendering, while What's On and below stay at 85%.
   Because the effective zoom here is 1, min-height:88vh above needs NO vh
   compensation — the divide-by-.85 that the rest of the page would require
   would actively break this panel. */
@media(min-width:901px){.hero{zoom:calc(1 / .85)}}
/* Drift lives on the photo only — never on the placeholder, whose chip and
   caption are positioned labels that must stay put. */
/* Gentle zoom only — object-fit:cover already fills the frame, so heavy scale
   just throws away the photo's composition (and its resolution). Pure scale,
   no translate, so no edge can ever creep into view. */
/* transform-origin pinned to the right edge: scaling up pushes the left of the
   frame (window post, corkboard) off-screen while holding the right steady.
   Pure scale, no translate, so no edge can creep in at any point of the drift. */
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;z-index:0;transform-origin:100% 50%;animation:drift 44s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.30)}to{transform:scale(1.36)}}
@media(prefers-reduced-motion:reduce){.heroimg{animation:none;transform:scale(1.30)}}
.herofade{position:absolute;inset:0;z-index:2;background:linear-gradient(to left,rgba(0,0,0,.72),rgba(0,0,0,0))}
.heroplace{position:absolute;inset:0;z-index:0;border:0;border-radius:0}
.heroplace::after{opacity:.3}
.heroplace .ph-chip{top:88px}
/* Hero copy is right-aligned, so park the placeholder caption low-left where
   it can't collide with the headline. */
.heroplace{align-items:flex-end;justify-content:flex-start}
.heroplace .ph-body{align-items:flex-start;text-align:left;margin:0 0 116px 34px;max-width:34%}
.heroplace .ph-cap{font-size:13.5px;line-height:1.6}
.heroin{position:relative;z-index:4;width:100%;max-width:1180px;margin:0 auto;padding:0 30px 104px;display:flex;justify-content:flex-end}
.herocol{width:58%;max-width:720px;text-align:right}
.herologo{height:72px;width:auto;display:block;margin:0 0 20px auto;filter:drop-shadow(0 0 4px rgba(243,235,221,.25)) drop-shadow(0 0 10px rgba(243,235,221,.25))}
.heroeye{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:3.5px;color:#E0912F;text-transform:uppercase;display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.heroeye i{width:5px;height:5px;border-radius:50%;display:inline-block}
.hh{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1.06;letter-spacing:-1.2px;margin:20px 0 0 auto;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hh em{font-style:italic;font-weight:500;color:#E0912F}
.hsub{font-size:17.5px;line-height:1.65;color:#cbbda2;max-width:42ch;margin:20px 0 0 auto;text-align:right}
.hcta{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap;margin-top:32px}
.btn-gold{display:inline-block;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;text-decoration:none;color:#0E0B09;background:linear-gradient(#E0912F,#C6902A);padding:15px 34px;border-radius:999px;box-shadow:0 10px 34px -8px rgba(224,145,47,.7);transition:transform .18s,box-shadow .18s}
.btn-gold:hover{transform:translateY(-2px);color:#0E0B09;box-shadow:0 16px 40px -8px rgba(224,145,47,.85)}
.tlink{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.6px;color:#F3EBDD;text-decoration:none;border-bottom:1px solid rgba(198,144,42,.5);padding-bottom:3px;transition:color .18s,border-color .18s}
.tlink:hover{color:#E0912F;border-color:#E0912F}
/* Bigger only in the content sections (open mic, pours). The hero's .tlink
   ("peek at the menu") lives in .hero, not .sec, so it keeps its 18px — the
   hero is excluded from the site-wide text bump. */
.sec .tlink{font-size:20px}

/* ── Closure notice (hero foot) — only rendered when there's something to say ── */
.notice{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:stretch;background:linear-gradient(to right,rgba(14,11,9,.94),rgba(14,11,9,.74));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(198,144,42,.28)}
.noticelab{flex:none;display:flex;align-items:center;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2.4px;color:#0E0B09;background:linear-gradient(#E0912F,#C6902A);padding:0 18px;text-transform:uppercase;white-space:nowrap}
.noticemsg{display:flex;align-items:center;gap:10px;padding:12px 20px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.4px;color:#F3EBDD;line-height:1.4}
.noticemsg::before{content:"";width:5px;height:5px;border-radius:50%;background:#B0308A;flex:none}
/* The whole sentence, one flex item (so it isn't fragmented by the row's gap). */
.noticetext{min-width:0}
/* DOW + date, called out in fuchsia so closure days read at a glance. */
.noticewhen{color:#B0308A}

/* ── What's On ── */
/* ── Two-column selector: poster stage on the left, the week as tiles on the
   right. It's a tablist, not a carousel — every option stays visible and
   directly addressable, so the rundown never hides behind a "slide 2 of 5". ── */
/* Left track is sized to the poster itself, not a fraction — a fr column wider
   than the capped poster leaves dead space that pushes the tiles away from it.
   minmax lets the poster shrink below 470 on narrow desktops instead of
   squeezing the tiles into nothing. */
.wo{display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:26px;align-items:stretch;margin-top:34px;background:linear-gradient(135deg,#1c1310,#140d0a);border:1px solid rgba(224,145,47,.32);border-radius:20px;padding:26px;box-shadow:0 30px 70px -40px rgba(224,145,47,.5)}
.wostage{width:100%}
.woph{aspect-ratio:4/5;border:0;border-radius:12px}
/* One <img>, src swapped on select. The poster travels in the same direction as
   the sliding indicator, on the same curve and duration, so the two read as one
   movement rather than two unrelated effects. --dy is set per-swap in JS. */
.woph .ph-img{border-radius:12px;transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)}
.woph .ph-img.swap{opacity:0;transform:translateY(var(--dy,0))}
/* No transition — used to jump the incoming art to its start position. */
.woph .ph-img.jump{transition:none}
@media(prefers-reduced-motion:reduce){.woph .ph-img{transition:opacity .2s ease}.woph .ph-img.swap{transform:none}}
/* Tiles spread down the full height of the poster rather than bunching at the
   top — otherwise the right side reads as a gap. */
.wotiles{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
/* The selection border is ONE element that slides between tiles rather than a
   per-tile border blinking on and off — the movement is the whole point. It's
   decorative; aria-selected on the tiles carries the real state. */
/* 1px solid border + a 3px outward ring for glow — the same treatment as a
   focused form field (.peinp:focus / .inp:focus). The ring is constant while
   the indicator is shown; it rides along on the transform between tiles and
   fades with the border via the opacity transition. */
.woind{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;border:1px solid #B0308A;border-radius:12px;opacity:0;box-shadow:0 0 0 3px rgba(176,48,138,.2);
  transition:transform .42s cubic-bezier(.4,0,.2,1),height .42s cubic-bezier(.4,0,.2,1),opacity .25s ease}
/* No visible border on the tiles themselves. The transparent border is
   load-bearing: it reserves the 2px so the sliding indicator lines up exactly
   with each tile's outer edge. */
.wotile{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;width:100%;text-align:left;cursor:pointer;font:inherit;background:linear-gradient(180deg,#1a1310,#130d0a);border:2px solid transparent;border-radius:12px;padding:14px 16px;transition:background .3s ease,transform .18s}
.wotile:hover{background:#221812;transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.woind{transition:opacity .25s ease}}
.wotd{display:flex;align-items:center;gap:7px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.6px;color:#B0308A;transition:color .18s}
.wotd i{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none}
/* Live-status pill on the top tile only. Rectangular, not a lozenge. Outline =
   the set hasn't started; shaded = it's playing right now. Status is independent
   of selection, so it stays fuchsia whether or not the tile is selected. */
.wopill{flex:none;margin-left:3px;padding:4px 8px;border:1px solid #B0308A;border-radius:3px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:1.4px;line-height:1;color:#B0308A;background:transparent}
.wopill.on{background:#B0308A;color:#F3EBDD}
.wotn{font-family:'Playfair Display',serif;font-weight:600;font-size:26px;line-height:1.2;margin:4px 0 0;color:#B7A98F;transition:color .18s}
.wotile[aria-selected="true"] .wotn,.wotile:hover .wotn{color:#F3EBDD}
.evfall{margin-top:34px;border:1px dashed rgba(198,144,42,.35);border-radius:18px;padding:44px 30px;text-align:center;background:linear-gradient(135deg,rgba(198,144,42,.05),transparent)}
.evfall p{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;color:#F3EBDD;margin:0 0 8px}
.evfall small{color:#B7A98F;font-size:14px}
.skel{background:linear-gradient(90deg,#1a1310,#241c16,#1a1310);background-size:200% 100%;animation:sh 1.4s linear infinite;border-radius:8px}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* ── Open mic ── */
.mic{margin-top:26px;border:1px solid rgba(224,145,47,.35);border-radius:20px;background:linear-gradient(120deg,rgba(224,145,47,.10),rgba(224,145,47,.02));padding:34px 40px}
.micgrid{display:grid;grid-template-columns:0.9fr 1.5fr 0.9fr;gap:36px;align-items:center}
.micname{font-family:'Playfair Display',serif;font-weight:700;font-style:italic;font-size:clamp(31px,3.8vw,47px);margin:0;color:#F3EBDD}
.micsub{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:2px;color:#E0912F;margin-top:8px}
.micp{font-size:17.5px;line-height:1.7;color:#B7A98F;max-width:44ch;margin:0}
.micC{display:flex;align-items:center;justify-content:center}

/* ── Signature pours ── */
.ckg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.ckc{background:linear-gradient(180deg,#1a1310,#130d0a);border:1px solid rgba(198,144,42,.2);border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.ckc:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(224,145,47,.6)}
.ckph{aspect-ratio:4/5;border:0;border-radius:0}
.ckb{padding:22px 24px 26px}
.ckname{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:29px;color:#F3EBDD}
.ckd{font-size:16px;line-height:1.6;color:#B7A98F;margin:10px 0 0}
/* flex-end, not space-between: the row holds only the menu link now, and a lone
   child under space-between falls to the left. */
.pourfoot{display:flex;justify-content:flex-end;align-items:center;gap:20px;flex-wrap:wrap;margin-top:38px}

/* ── The Room teaser ── */
.paper{position:relative;z-index:2;background:#0E0B09;color:#F3EBDD}
/* Top padding trimmed 96->60 to tighten the gap under the pours "see the full
   menu" link; bottom stays 96 so spacing into the footer is unchanged. */
.roomin{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;padding:60px 30px 96px}
/* 3/2 matches room.jpg natively, so object-fit:cover crops nothing. The old 5/6
   portrait slot was sized for an imagined shot — against this photo it would cut
   the drum kit or the lucky-cat shelf clean out of frame. */
.roomph{aspect-ratio:3/2;background:linear-gradient(135deg,#241c16,#161109);border:1px solid rgba(198,144,42,.18);color:#8a7d68}
.roomph .ph-chip{background:rgba(0,0,0,.45);color:#C6902A;border-color:rgba(198,144,42,.3)}
/* Slight push-in. The slot and the photo are both 3:2, so cover crops nothing on
   its own — this trims ~4% off each edge to tighten the framing. .ph already
   clips (overflow:hidden), so nothing spills. */
.roomph .ph-img{transform:scale(1.08)}
.roomph .ph-cap{color:#9a8c74}
.roomph .ph-ic{opacity:.45}
.reye{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:#B0308A;display:inline-flex;align-items:center;gap:11px}
.reye::before{content:"";width:26px;height:2px;background:currentColor}
.rh{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(36px,4.7vw,58px);line-height:1.04;letter-spacing:-.5px;margin:16px 0 0;color:#F3EBDD}
.rp{font-size:16.5px;line-height:1.75;color:#B7A98F;margin:20px 0 0;max-width:46ch}
/* Same format as .tlink ("see the full menu") — cream, 1px border, colour+
   border hover. Keeps margin-top for spacing under the heading; inline-block
   so that margin still applies now the flex gap is gone. */
.rlink{display:inline-block;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.6px;color:#F3EBDD;text-decoration:none;margin-top:26px;border-bottom:1px solid rgba(198,144,42,.5);padding-bottom:3px;transition:color .18s,border-color .18s}
.rlink:hover{color:#E0912F;border-color:#E0912F}
.rpun{font-family:'Playfair Display',serif;font-style:italic;color:#C6902A;font-size:15px;margin-top:14px}

/* ── Tablet (601–900px) ──────────────────────────────────────────────
   The desktop zoom:.85 is OFF below 901, so these layouts render at full
   scale. Rather than collapse to the phone stack here (which balloons the
   poster and pour cards to ~700px), we KEEP the multi-column desktop
   layouts and cap sizes so nothing overgrows. Only phones (≤600) stack. */
@media(min-width:601px) and (max-width:900px){
  .sec{padding:88px 0}
  /* What's On stays two-column. Shrink the poster track so the week-list
     keeps enough room — a full 470 poster would squeeze the tiles here. */
  .wo{grid-template-columns:minmax(0,340px) 1fr;gap:22px;padding:22px}
  /* Signature pours stay 3-across; tighten the gap and card chrome so three
     cards fit cleanly at this width instead of cramping. */
  .ckg{gap:16px}
  .ckb{padding:16px 16px 20px}
  .ckname{font-size:23px}
  .ckd{font-size:14.5px;margin-top:8px}
  .ckph .ph-cap{font-size:12px}
  /* Room teaser + open mic stay multi-column, just tighter. */
  .roomin{gap:34px;padding:64px 24px}
  .mic{padding:30px 30px}
  .micgrid{gap:26px}
  /* Hero keeps its right-aligned treatment but widens the copy column so it
     doesn't read as a thin ribbon on a portrait tablet. */
  .heroin{padding:0 24px 80px}
  .herocol{width:74%;max-width:none}
}

/* ── Phone (≤600px) ── full single-column stack ── */
@media(max-width:600px){
  .wo,.roomin{grid-template-columns:1fr}
  .wo{gap:28px;padding:20px}
  .wostage{max-width:none}
  /* What's On tiles restructured for a phone: two columns —
       col 1: DOW (line 1) over date (line 2), no status pill, no middot;
       col 2: artist name, vertically centred across col 1's two lines.
     Shorter than the desktop stacked tile. */
  .wotile{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:9px 15px}
  .wotd{flex-direction:column;align-items:flex-start;gap:1px;font-size:13.5px;line-height:1.15}
  .wotd i{display:none}          /* middot separator — not needed once stacked */
  .wopill{display:none}          /* hide "up next" / "now playing" on phones */
  .wotn{font-size:19px;margin:0;line-height:1.15}
  /* The Space: order becomes heading → photo → right-aligned link. display:contents
     lifts the copy wrapper's children into roomin's flex flow, so the photo can
     sit between the heading and the link via `order`. */
  /* align-items:stretch (the desktop rule sets center) so the eyebrow is
     left-justified and the photo grows to full width instead of sitting narrow
     and centred. rlink keeps its own align-self:flex-end. */
  .roomin{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:56px 24px 72px}
  .roomin>div:last-child{display:contents}
  .reye{order:1}
  .rh{order:2;margin-top:14px}
  .roomph{order:3;margin-top:26px}
  .rlink{order:4;align-self:flex-end;margin-top:22px}
  /* Open mic: title + "every wednesday" side by side (were stacked). !important
     beats the inline flex-direction:column on that first cell. */
  .micgrid{grid-template-columns:1fr;gap:22px}
  .micgrid>div:first-child{flex-direction:row!important;justify-content:flex-start!important;align-items:baseline;gap:12px;flex-wrap:wrap}
  .micsub{margin-top:0}
  /* Greatest hits: each card horizontal — photo (col 1) | name over ingredients. */
  .ckg{grid-template-columns:1fr;gap:16px}
  .ckc{display:flex;align-items:stretch}
  .ckph{flex:none;width:128px;aspect-ratio:4/5}    /* bigger, portrait drink photo; sets the card height */
  .ckph .ph-cap{display:none}    /* caption can't fit the narrow photo — a real drink shot covers it anyway */
  .ckb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
  .ckname{font-size:22px}
  .ckd{font-size:14.5px;margin-top:6px}
  .sec{padding:76px 0}
  /* Section headings shrink on a phone so "in the spotlight this week" holds on
     one line (was clamping to 38px and wrapping). Sizing tracks viewport width
     so it stays one line across the iPhone range; "greatest hits" follows suit
     for consistency. */
  .h2{font-size:clamp(22px,7.2vw,30px)}
  /* Hero on a portrait phone: right-aligned cluster, sitting low in the frame
     (bottom-anchored, so less bottom padding drops it further down). */
  .heroin{display:block;padding:0 24px 54px}
  .herocol{width:100%;max-width:none;text-align:right}
  /* Logo −15% (inline is 262×109 → 223×93); !important to beat the inline
     width/height on the <img>. Auto left margin pins it to the right. */
  .herologo{width:223px!important;height:93px!important;margin:0 0 18px auto}
  .heroeye{justify-content:flex-end}
  .hh{font-size:clamp(30px,8vw,44px);letter-spacing:-.6px}
  .hsub{text-align:right;margin-left:auto;margin-right:0;font-size:16px}
  /* Two CTAs on one row, pushed to opposite ends so the pair spans the full
     width of the eyebrow above it (button's left edge ↔ link's right edge match
     the eyebrow's). space-between does the spreading; sizes are as large as fit
     on one line down to ~360px (nowrap holds the row). */
  .hcta{justify-content:space-between;gap:10px;flex-wrap:nowrap}
  .hcta .btn-gold{font-size:20px;padding:14px 30px;letter-spacing:1.8px}
  .hcta .tlink{font-size:17px;letter-spacing:1.2px;white-space:nowrap}
  /* Portrait crop: centre the zoom origin (desktop deliberately pins it to the
     right edge) and frame at 48% so the spotlit performer lands on the LEFT,
     clear of the right-aligned logo/CTAs which sit over the darker side. */
  .heroimg{object-position:48% 50%;transform-origin:50% 50%}
  .mic{padding:26px 22px}
}