/* ==========================================================================
   GRIST BREWHOUSE · taps.css  (Taps page only; loads after site.css)
   Sections: hero tap index · six beer bands · priced tasting block ·
   grain to glass (split scroll with a day counter) · closing band.
   Contrast: ink on straw 13.7, gold 9.43, plum 7.35, IPA tint 5.40; bone on ruby 8.97,
   straw on ruby 7.57; tap red on stout 4.93; brick on straw and bone 4.93 / 5.84.
   Amber carries display type only (ink 4.46): the IPA band's copy sits in an IPA-tint panel.
   ========================================================================== */

/* ---------- 1. hero: tap index ---------- */
.tp-index{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 18px; width:100%; border-top:1px solid rgba(251,241,222,.28); }
.tp-index a{ display:flex; align-items:center; gap:10px; min-height:46px; border-bottom:1px solid rgba(251,241,222,.28); text-decoration:none; font-size:15px; font-weight:500; }
.tp-index i{ flex:none; width:11px; height:19px; border-radius:2px 2px 5px 5px; background:var(--c); box-shadow:inset 0 3px 0 var(--bone), 0 0 0 1px rgba(251,241,222,.55); }
.tp-index b{ margin-left:auto; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--stone); }
.tp-index a:hover span{ color:var(--tap); }
.tp-hero .pour-tag i{ background:var(--c); }

/* ==========================================================================
   2. BEER BANDS
   ========================================================================== */
.band{ position:relative; padding:var(--section) var(--gutter-end) var(--section) var(--gutter); }
.b-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:start; }
/* the band edge made visible: a full-width rule with the tap number; glasses cross it */
.b-num{ grid-column:1 / -1; grid-row:1; display:flex; justify-content:space-between; gap:18px; padding-top:14px; border-top:1.5px solid currentColor; margin-bottom:34px; }
.b-name{ font-size:clamp(118px, 15.5vw, 268px); line-height:.8; }
.b-name > span{ display:block; }
.b-sm{ font-size:.42em; line-height:.9; }
.b-info{ display:grid; gap:18px; align-content:start; }
.b-abv{ display:flex; align-items:baseline; gap:10px; }
.b-abv b{ font-family:var(--display); font-weight:400; font-size:clamp(72px, 6.4vw, 110px); line-height:.8; }
.b-abv span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.b-note{ font-size:clamp(22px, 2vw, 30px); line-height:1.15; font-weight:500; letter-spacing:-.01em; max-width:22ch; }
.b-brew{ font-size:16px; line-height:1.55; max-width:44ch; color:var(--muted); }
.b-price{ display:flex; margin:0; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; max-width:420px; }
.b-price div{ flex:1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 16px 10px 0; }
.b-price div + div{ border-left:1.5px solid currentColor; padding-left:16px; }
.b-price dt{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.b-price dd{ margin:0; font-family:var(--display); font-size:44px; line-height:.9; }
.b-spec{ display:flex; flex-wrap:wrap; gap:6px 12px; }
.b-spec span + span::before{ content:"/"; margin-right:12px; opacity:.55; }
.b-pair{ display:block; justify-self:start; padding:4px 0 8px; font-weight:500; font-size:16px; line-height:1.5; text-decoration:none; }
.b-pair .mono{ display:block; margin-bottom:4px; opacity:.8; }
.b-pt{ background:linear-gradient(currentColor, currentColor) left 100% / 100% 1.5px no-repeat; padding-bottom:3px; }
.b-pair .arr{ display:inline-block; transition:transform var(--dur-hover) var(--ease-hover); }
.b-pair:hover .arr{ transform:translateX(5px); }
.b-row{ display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; }
.b-glass{ position:relative; z-index:3; margin:0; border-radius:var(--r-card); overflow:hidden; box-shadow:0 44px 70px -34px rgba(12,9,6,.6); }
.b-glass img{ width:100%; height:100%; object-fit:cover; }

/* ---- 1 LAGER: name stacked left, tall glass right, hangs out the bottom into the Pale ---- */
.b-lager .b-head{ grid-column:1 / 8; grid-row:2; }
/* the glass still hangs through the band edge into the Pale, but by a fixed --hang measured from the Pale's top,
   so it always stops above the Pale name (which starts about 330px down). Rule: no image ever sits over a beer name. */
.b-lager{ --hang:clamp(96px, 9vw, 170px); }
.b-lager .b-glass{ grid-column:8 / 13; grid-row:2 / 4; align-self:end; aspect-ratio:2 / 3; margin-top:60px; margin-bottom:calc(var(--section) * -1 - var(--hang)); }
.b-lager .b-glass img{ object-position:50% 40%; }
.b-lager .b-info{ grid-column:1 / 8; grid-row:3; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:40px; margin-top:44px; }
.b-lager .b-abv, .b-lager .b-note, .b-lager .b-brew{ grid-column:1; }
.b-lager .b-price, .b-lager .b-spec, .b-lager .b-pair{ grid-column:2; }
.b-lager .b-abv{ grid-row:1; } .b-lager .b-note{ grid-row:2; } .b-lager .b-brew{ grid-row:3 / 5; }
.b-lager .b-price{ grid-row:1; align-self:end; } .b-lager .b-spec{ grid-row:2; } .b-lager .b-pair{ grid-row:3; }
.b-lager .b-name .ln:nth-child(2) > span{ padding-left:.55em; }

/* ---- 2 PALE: wide glass bleeds off the left edge and climbs out the top; name right, set low ---- */
/* Pale and Sour: glasses cross the band rule at both ends, so the label sits in the clear middle */
.b-pale .b-num{ padding-left:calc(50% + 12px); position:relative; z-index:5; }
.b-pale .b-num span{ background:var(--ink); color:var(--gold); padding:5px 10px; border-radius:var(--r-pill); margin-top:-4px; }  /* sits over the lager glass hanging in from above: ink pill, gold text 9.43 */
.b-sour .b-num{ padding-left:calc(41.667% + 12px); }
.b-pale .b-glass{ grid-column:1 / 7; grid-row:2 / 4; aspect-ratio:4 / 5; margin-left:calc(var(--gutter) * -1); margin-top:-150px; border-radius:0 var(--r-card) var(--r-card) 0; }
.b-pale .b-glass img{ object-position:47% 50%; }
.b-pale .b-head{ grid-column:7 / 13; grid-row:2; padding-top:150px; padding-left:24px; }
.b-pale .b-info{ grid-column:7 / 13; grid-row:3; padding-left:24px; margin-top:34px; }
.b-pale .b-name .b-sm{ font-size:.405em; }

/* ---- 3 IPA: centred poster. "IPA" at full size, a framed print tilted over it (out the top); copy in an IPA-tint panel ---- */
.b-ipa .b-num span{ background:var(--ink); color:var(--bone); padding:5px 10px; border-radius:var(--r-pill); }  /* small text never sits on amber */
.b-ipa .b-head{ grid-column:4 / 13; grid-row:2; text-align:right; }
.b-ipa .b-name .b-sm{ font-size:.3em; }
.b-ipa .b-xl{ font-size:1.9em; line-height:.76; letter-spacing:-.01em; padding-bottom:.26em; }  /* room for the glyph box below the tight line, so the panel never touches IPA */
.b-ipa .b-print{ grid-column:1 / 6; grid-row:2 / 4; z-index:4; margin-top:-120px; overflow:visible; box-shadow:none; border-radius:0; }
.b-crop{ display:block; position:relative; aspect-ratio:1 / 1; overflow:hidden; border:14px solid var(--bone); border-bottom-width:60px; rotate:-4deg; box-shadow:0 44px 70px -30px rgba(12,9,6,.6); background:var(--bone); }
/* the photo is scaled inside the frame so the bar's fridge and tap list crop out */
.b-crop img{ position:absolute; width:250%; height:auto; max-width:none; left:-85%; top:-60%; }
.b-print figcaption{ position:absolute; left:26px; bottom:22px; z-index:2; color:var(--ink); rotate:-4deg; transform-origin:0 100%; }
.b-ipa .b-panel{ grid-column:7 / 13; grid-row:3; margin-top:12px; position:relative; z-index:5; background:var(--ipa-card); color:var(--ink); --muted:rgba(27,20,17,.84); border-radius:var(--r-card); padding:32px 34px 30px; box-shadow:0 40px 70px -34px rgba(12,9,6,.6); }

/* ---- 4 RED: giant ABV numeral left, glass bleeds off the right edge, hangs out the bottom into the Sour ---- */
.b-red .b-head{ grid-column:1 / 7; grid-row:2; }
.b-giant{ font-family:var(--display); font-size:clamp(210px, 27vw, 470px); line-height:.74; color:var(--straw); letter-spacing:-.01em; }
.b-giant small{ font-size:.34em; vertical-align:top; margin-left:.05em; }
.b-red .b-name{ font-size:clamp(66px, 7.2vw, 126px); margin-top:18px; }
.b-red .b-info{ grid-column:1 / 6; grid-row:3; margin-top:36px; }
.b-red .b-glass{ grid-column:7 / 13; grid-row:2 / 4; align-self:end; aspect-ratio:1 / 1; margin-right:calc(var(--gutter-end) * -1); margin-bottom:calc(var(--section) * -1 - 80px); border-radius:var(--r-card) 0 0 var(--r-card); }
.b-red .b-glass img{ object-position:80% 50%; }

/* ---- 5 SOUR: no photo. A drawn glass pours plum (out the top); name right; spec strip across the foot ---- */
.b-sour .b-swatch{ grid-column:1 / 6; grid-row:2 / 4; position:relative; z-index:3; margin-top:-110px; display:flex; justify-content:flex-end; padding-right:40px; }
.b-sglass{ position:relative; display:block; width:min(100%, 330px); aspect-ratio:3 / 5; border-radius:14px 14px 58px 58px; background:rgba(251,241,222,.42); box-shadow:inset 0 0 0 3px var(--ink), 0 44px 70px -34px rgba(12,9,6,.5); overflow:hidden; }
.b-sglass i{ position:absolute; inset:14% 0 0; background:linear-gradient(180deg, #C85A7E, #9C3558); transform-origin:50% 100%; }
.b-sglass i::before{ content:""; position:absolute; left:0; right:0; top:0; height:13%; background:#FCE6EC; box-shadow:inset 0 -3px 0 var(--ink); }
.b-sglass::before{ content:""; position:absolute; z-index:2; left:13%; top:22%; width:8%; height:52%; border-radius:6px; background:rgba(255,255,255,.4); }
.b-sglass::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 3px var(--ink); pointer-events:none; }
.b-sglass b{ position:absolute; z-index:2; left:0; right:0; bottom:9%; text-align:center; font-family:var(--display); font-weight:400; font-size:clamp(84px, 8vw, 140px); line-height:.8; color:var(--bone); }
.b-sglass b small{ font-size:.4em; vertical-align:top; }
.b-stamp{ position:absolute; z-index:4; right:-16px; top:48px; width:132px; height:132px; border-radius:50%; background:var(--ink); color:var(--bone); display:grid; place-content:center; text-align:center; gap:4px; transform:rotate(12deg); }
.b-stamp span:first-child{ font-size:13px; color:var(--plum); }
.js [data-rv="pour"].b-swatch{ transition:none; }
.js [data-rv="pour"] .b-sglass i{ transition:transform 1600ms var(--ease-enter) 250ms; }
.js [data-rv="pour"]:not(.is-in) .b-sglass i{ transform:scaleY(0); }
.b-sour .b-head{ grid-column:6 / 13; grid-row:2; padding-left:24px; padding-top:150px; }
.b-sour .b-info{ grid-column:6 / 13; grid-row:3; padding-left:24px; margin-top:34px; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:32px; }
.b-sour .b-note, .b-sour .b-brew{ grid-column:1; }
.b-sour .b-row, .b-sour .b-spec, .b-sour .b-pair{ grid-column:2; }
.b-sour .b-note{ grid-row:1; } .b-sour .b-brew{ grid-row:2 / 5; }
.b-sour .b-row{ grid-row:1 / 3; } .b-sour .b-spec{ grid-row:3; } .b-sour .b-pair{ grid-row:4; }

/* ---- 6 STOUT: full-bleed photo right, climbs out the top; the name sits just clear of its faded edge ---- */
.b-stout{ padding-bottom:calc(var(--section) * .5); }
.b-stout .b-glass{ grid-column:7 / 13; grid-row:2 / 4; margin-right:calc(var(--gutter-end) * -1); margin-top:-110px; aspect-ratio:5 / 4; border-radius:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%); }
.b-stout .b-glass img{ object-position:66% 50%; }
.b-stout .b-head{ grid-column:1 / 9; grid-row:2; position:relative; z-index:4; padding-top:40px; }
.b-stout .b-name{ font-size:clamp(130px, 17vw, 300px); }
.b-stout .b-name span:last-child{ color:var(--tap); padding-left:.4em; }
.b-stout .b-info{ grid-column:1 / 6; grid-row:3; margin-top:40px; position:relative; z-index:4; }

/* ---- bands on tablet and phone: stacked, the break-outs shrink to a nudge ---- */
@media (max-width:900px){
  .b-grid{ grid-template-columns:minmax(0, 1fr); }
  .b-grid > *{ grid-column:1 !important; grid-row:auto !important; }
  .b-num{ margin-bottom:22px; padding-left:0 !important; }
  .b-head, .b-info{ padding:0 !important; margin-top:0 !important; }
  .b-info, .b-lager .b-info, .b-sour .b-info{ display:grid; grid-template-columns:1fr; }
  .b-info > *{ grid-column:1 !important; grid-row:auto !important; }
  .b-name{ font-size:clamp(88px, 27vw, 170px); }
  .b-glass{ margin:28px 0 30px !important; }
  .b-lager .b-glass{ width:78%; margin:28px 0 calc(var(--section) * -1 - 40px) auto !important; aspect-ratio:3 / 4; order:5; }
  .b-lager .b-info{ order:4; margin-top:24px !important; }
  .b-pale .b-glass{ margin:0 0 28px calc(var(--gutter) * -1) !important; width:calc(100% + var(--gutter)); border-radius:0 var(--r-card) var(--r-card) 0; }
  .b-red .b-glass{ width:calc(100% + var(--gutter-end)); margin:28px calc(var(--gutter-end) * -1) calc(var(--section) * -1 - 40px) 0 !important; order:5; }
  .b-red .b-info{ order:4; }
  .b-stout .b-glass{ width:calc(100% + var(--gutter-end)); margin:-40px calc(var(--gutter-end) * -1) 0 0 !important; order:-1; }
  .b-stout .b-num{ order:-2; }
  .b-stout .b-head{ margin-top:44px !important; }
  .b-ipa .b-head{ text-align:left; }
  .b-ipa .b-print{ width:84%; margin:40px auto 34px !important; }
  .b-ipa .b-panel{ margin-top:0 !important; padding:26px 22px !important; }
  .b-sour .b-swatch{ margin:40px 0 30px !important; }
  .b-sglass{ width:min(64%, 260px); }
  .b-stamp{ right:4%; top:10px; width:104px; height:104px; }
  .b-giant{ font-size:clamp(170px, 50vw, 280px); }
  .b-red .b-name{ font-size:clamp(56px, 16vw, 100px); }
  .b-stout .b-name{ font-size:clamp(100px, 30vw, 180px); }
  .b-pale .b-name .b-sm{ font-size:.34em; }
  .b-lager .b-name .ln:nth-child(2) > span{ padding-left:0; }
}

/* ==========================================================================
   3. PRICED TASTING BLOCK: photo bleeds left, bone tasting card overlaps it
   ========================================================================== */
.paddle-sec{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:center; padding:calc(var(--section) * .6) var(--gutter-end) var(--section) var(--gutter); }
.pd-photo{ grid-column:1 / 8; grid-row:1; margin:0 0 0 calc(var(--gutter) * -1); aspect-ratio:4 / 3; border-radius:0 var(--r-card) var(--r-card) 0; position:relative; }
.pd-photo img{ width:100%; height:100%; object-fit:cover; object-position:40% 55%; }
.pd-photo figcaption{ position:absolute; left:calc(var(--gutter) + 6px); bottom:20px; background:var(--malt); color:var(--bone); padding:9px 14px; border-radius:var(--r-pill); }
.pd-card{ grid-column:7 / 13; grid-row:1; position:relative; z-index:2; background:var(--bone); color:var(--ink); border-radius:var(--r-card); padding:34px 38px 32px; box-shadow:0 50px 90px -40px rgba(0,0,0,.8); display:grid; gap:22px; }
.pd-kick{ display:flex; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1.5px solid var(--ink); }
.pd-price{ display:flex; align-items:flex-end; gap:22px; font-weight:400; }
.pd-num{ font-family:var(--display); font-size:clamp(130px, 13vw, 220px); line-height:.76; color:var(--brick); letter-spacing:-.01em; }
.pd-name{ display:grid; gap:6px; padding-bottom:6px; font-size:17px; line-height:1.3; }
.pd-name b{ font-family:var(--display); font-weight:400; font-size:clamp(44px, 4vw, 64px); line-height:.86; text-transform:uppercase; }
.pd-pick{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
.pd-pick legend{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; padding:0; }
.pd-pick label{ position:relative; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 12px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1.5px var(--ink); cursor:pointer; font-weight:500; font-size:15px; transition:background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.pd-pick input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pd-pick i{ width:11px; height:19px; border-radius:2px 2px 5px 5px; background:var(--c); box-shadow:inset 0 3px 0 var(--bone), 0 0 0 1.5px var(--ink); }
.pd-pick label:hover{ background:rgba(27,20,17,.08); }
.pd-pick label:has(input:checked){ background:var(--ink); color:var(--bone); }
.pd-pick label:has(input:checked) i{ box-shadow:inset 0 3px 0 var(--bone), 0 0 0 1.5px var(--bone); }
.pd-pick label:has(input:focus-visible){ outline:2px solid var(--brick); outline-offset:3px; }
.pd-board{ display:flex; gap:14px; align-items:flex-end; padding:18px 20px 0; border-radius:12px 12px 0 0; background:linear-gradient(180deg, #E7D3AE, #D7BE92); box-shadow:inset 0 -10px 0 #C7AB7C; height:122px; }
.pd-slot{ position:relative; flex:1; height:92px; margin-bottom:10px; border-radius:6px 6px 14px 14px; background:rgba(251,241,222,.6); box-shadow:inset 0 0 0 1.5px var(--ink); overflow:hidden; }
.pd-slot i{ position:absolute; inset:18% 0 0; background:var(--c); transform-origin:50% 100%; transition:transform 700ms var(--ease-enter), background-color 300ms var(--ease-land); }
.pd-slot i::before{ content:""; position:absolute; left:0; right:0; top:0; height:14%; background:var(--bone); box-shadow:inset 0 -1.5px 0 var(--ink); }
.pd-slot.is-empty i{ transform:scaleY(0); }
.pd-out{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:16px; border-top:1.5px solid var(--ink); padding-top:14px; }
.pd-out b{ font-family:var(--mono); font-weight:400; }
@media (max-width:900px){
  .paddle-sec{ grid-template-columns:1fr; padding-top:var(--section); }
  .pd-photo{ grid-column:1; margin-right:calc(var(--gutter-end) * -1); border-radius:0; aspect-ratio:3 / 2; }
  .pd-card{ grid-column:1; grid-row:2; margin-top:-60px; padding:26px 22px; }
  .pd-price{ gap:14px; }
  .pd-board{ height:100px; padding:14px 14px 0; gap:10px; } .pd-slot{ height:74px; }
}

/* ==========================================================================
   4. GRAIN TO GLASS: split scroll with a day counter (bank 7 sticky family: alternating split, Pactum)
      Default (phones, reduced motion, no JS): photo, stage, photo, stage; the days are static labels.
      .is-split (taps.js, desktop): the photo stage pins on the left for the whole section, its three photos
      cross-fade and settle (opacity and scale) as each stage becomes current, and a giant day numeral ticks
      01 to 28 over a 28-segment tick rail (segments move by opacity and transform only). No fill bar.
   ========================================================================== */
.g2g{ position:relative; padding-top:var(--section); padding-bottom:var(--section); }
.g2g-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vw, 72px); }
.g2g-intro .kick{ color:var(--stone); margin-bottom:18px; }
.g2g-h{ font-size:clamp(84px, 9.6vw, 164px); line-height:.82; }
.g2g-h .ln:last-child span{ color:var(--tap); }
.g2g-lede{ max-width:30ch; font-size:18px; color:var(--bone-80); padding-bottom:8px; }
.g2g-stage{ display:none; }
.g2g-split{ display:grid; gap:clamp(56px, 8vw, 96px); }
.g2g-step{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); align-items:center; gap:24px clamp(32px, 4vw, 64px); }
.g2g-shot{ margin:0; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4 / 3; background:#2A201B; }
.g2g-shot img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
.g2g-n{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; color:var(--stone); }
.g2g-n b{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px currentColor; font-weight:400; color:var(--bone); }
.g2g-days{ padding:4px 10px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px rgba(251,241,222,.4); color:var(--bone); }
.g2g-word{ font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.8; font-size:clamp(96px, min(11vw, 20svh), 220px); letter-spacing:-.005em; margin:clamp(14px, 2.4svh, 24px) 0 clamp(12px, 2svh, 20px); }
.g2g-step:last-child .g2g-word{ color:var(--tap); }
.g2g-fact{ font-size:18px; line-height:1.5; max-width:36ch; color:var(--bone-80); }
.g2g-tanks{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:22px; max-width:560px; }
.g2g-tanks li{ border:1px solid var(--line-dark); border-radius:10px; padding:10px 12px; display:grid; gap:8px; }
.g2g-tanks .mono{ font-size:10px; color:var(--stone); }
.g2g-tanks strong{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:15px; }
.g2g-tanks i{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1px rgba(251,241,222,.5); flex:none; }
.g2g-cta{ margin-top:26px; }
@media (max-width:900px){
  .g2g-step{ grid-template-columns:minmax(0, 1fr); }
  .g2g-shot{ aspect-ratio:4 / 3; }
  .g2g-word{ font-size:clamp(88px, 28vw, 150px); }
  .g2g-fact{ font-size:16px; }
  .g2g-tanks{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---- enhanced: the pinned split ---- */
.g2g.is-split .g2g-split{ grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); gap:0 clamp(40px, 5vw, 80px); }
.g2g.is-split .g2g-stage{ display:block; grid-column:1; grid-row:1 / span 3; align-self:start; position:sticky; top:0; height:100vh; height:100svh;
  padding:calc(var(--nav-h) + clamp(12px, 2.2svh, 22px)) 0 calc(var(--bar) + clamp(12px, 2.2svh, 22px)); }
.g2g.is-split .g2g-step{ grid-column:2; display:flex; align-items:center; min-height:100vh; min-height:100svh; padding:calc(var(--nav-h) + 12px) 0 calc(var(--bar) + 12px); }
.g2g.is-split .g2g-step:nth-of-type(1){ grid-row:1; } .g2g.is-split .g2g-step:nth-of-type(2){ grid-row:2; } .g2g.is-split .g2g-step:nth-of-type(3){ grid-row:3; }
.g2g.is-split .g2g-shot{ display:none; }
.g2g.is-split .g2g-text{ opacity:.32; transform:translate3d(0, 24px, 0); transition:opacity 700ms var(--ease-land), transform 900ms var(--ease-enter); }
.g2g.is-split .g2g-step.is-on .g2g-text{ opacity:1; transform:none; }
.g2g.is-split .g2g-word{ font-size:clamp(84px, min(9vw, 17svh), 190px); }
.g2g-frame{ position:relative; height:100%; border-radius:var(--r-card); overflow:hidden; background:#2A201B; isolation:isolate; }
.g2g-fig{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.08); transition:opacity 900ms var(--ease-land), transform var(--dur-settle) var(--ease-settle); }
.g2g-fig.is-on{ opacity:1; transform:none; }
.g2g-fig img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
/* a floor scrim only where the counter sits; the photo stays clear above it */
.g2g-frame::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(12,9,6,.84) 0%, rgba(12,9,6,.5) 30%, rgba(12,9,6,0) 58%); }
.g2g-count{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:0 clamp(22px, 2.6vw, 40px) clamp(20px, 3.4svh, 34px); color:var(--bone); }
.g2g-count-top{ display:flex; gap:14px; font-size:11px; letter-spacing:.08em; color:var(--stone); }
.g2g-count-top span + span{ color:var(--straw); }
.g2g-num{ display:flex; align-items:flex-end; gap:16px; margin-top:6px; }
.g2g-num b{ display:inline-block; min-width:1.02em; font-family:var(--display); font-weight:400; font-size:clamp(120px, min(15vw, 27svh), 260px); line-height:.76; letter-spacing:-.01em; }
.g2g-num .mono{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); padding-bottom:6px; }
/* 28 ticks: each lights in turn (opacity and scaleY); today's tick stands taller in tap red */
.g2g-rail{ display:grid; grid-template-columns:repeat(28, minmax(0, 1fr)); gap:4px; margin-top:clamp(12px, 2svh, 18px); height:18px; align-items:end; }
.g2g-rail li{ height:100%; display:flex; align-items:flex-end; }
.g2g-rail i{ display:block; width:100%; height:100%; border-radius:2px; background:var(--bone); opacity:.22; transform:scaleY(.4); transform-origin:50% 100%; transition:opacity 260ms var(--ease-land), transform 360ms var(--ease-enter); }
.g2g-rail li.is-lit i{ opacity:.95; transform:scaleY(.62); }
.g2g-rail li.is-now i, .g2g-rail li.is-now:nth-child(7n) i{ opacity:1; transform:none; background:var(--tap); }
.g2g-rail li:nth-child(7n) i{ transform:scaleY(.55); }
.g2g-rail li.is-lit:nth-child(7n) i{ transform:scaleY(.8); }
@media (min-width:901px) and (max-height:700px){
  .g2g.is-split .g2g-tanks{ margin-top:12px; }
  .g2g.is-split .g2g-tanks li{ padding:7px 10px; gap:4px; }
  .g2g.is-split .g2g-fact{ font-size:16px; }
}

/* ==========================================================================
   5. CLOSING BAND: tank hall photo, horizontal scrim, malt card with the tap board
   ========================================================================== */
.tp-close{ position:relative; min-height:max(640px, 96svh); display:flex; align-items:flex-end; color:var(--bone); isolation:isolate; overflow:hidden; }
.tp-close-media{ position:absolute; inset:0; z-index:-2; margin:0; }
.tp-close-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.tp-close::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,9,6,.9) 0%, rgba(12,9,6,.62) 38%, rgba(12,9,6,.2) 70%, rgba(12,9,6,.35) 100%),
             linear-gradient(0deg, rgba(12,9,6,.9) 0%, rgba(12,9,6,0) 50%); }
.tp-close-in{ width:100%; display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 470px); align-items:end; gap:32px 56px; padding:var(--section) var(--gutter-end) calc(var(--section) * .7) var(--gutter); }
.tp-close .kick{ color:var(--stone); margin-bottom:20px; }
.tp-close-h{ font-size:clamp(100px, 14vw, 240px); line-height:.82; }
.tp-close-h .l2{ color:var(--tap); padding-left:.5em; }
.tp-close-card{ background:rgba(21,17,13,.92); border-radius:var(--r-card); padding:24px 26px 26px; display:grid; gap:20px; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.tp-close-top{ white-space:nowrap; display:flex; justify-content:space-between; gap:12px; color:var(--stone); padding-bottom:12px; border-bottom:1px solid var(--line-dark); }
.tp-board{ margin:0; max-width:none; gap:10px; }
.tp-board b{ color:var(--bone-80); }
.tp-close .glass{ height:88px; background:rgba(251,241,222,.08); box-shadow:inset 0 0 0 1.5px var(--bone); }
.tp-close .glass::before{ box-shadow:inset 0 0 0 1.5px var(--bone); }
.tp-close .glass i::before{ box-shadow:inset 0 -1.5px 0 var(--bone); }
.tp-close-p{ font-size:16px; color:var(--bone-80); max-width:38ch; }
.tp-close .link-arrow{ color:var(--bone); }
@media (max-width:900px){
  .tp-close{ min-height:0; }
  .tp-close::before{ background:linear-gradient(0deg, rgba(12,9,6,.96) 0%, rgba(12,9,6,.85) 55%, rgba(12,9,6,.3) 85%); }
  .tp-close-in{ grid-template-columns:1fr; padding-top:calc(var(--section) * 2.2); }
  .tp-close-h{ font-size:clamp(84px, 25vw, 150px); }
  .tp-close-h .l2{ padding-left:0; }
  .tp-close .glass{ height:64px; }
}

/* ---------- reduced motion: the finished layout ---------- */
@media (prefers-reduced-motion: reduce){
  .js [data-rv="pour"] .b-sglass i{ transform:none !important; }
  .g2g-fig, .g2g-rail i{ transition:none; }
}