/* ==========================================================================
   GRIST BREWHOUSE · site.css
   The shared foundation for every page. README.md documents every class.
   Order: fonts > tokens > base > type > grounds > chrome (nav, menu, utility
   bar, footer) > buttons and chips > reveals > colour run and gauge >
   components (page hero, video hero, tap board, pinned centre, ink panel,
   night accordion, zig-zag, split panel) > reduced motion.
   Performance floor: anything scroll-linked moves transform and opacity only.
   ========================================================================== */

/* ---------- fonts (self-hosted; Tanker and General Sans 400 are preloaded) ---------- */
@font-face { font-family: "Tanker"; src: url("/fonts/tanker-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root{
  /* the beer ladder is the palette */
  --malt:#15110D;      /* video hero, scrims, utility bar */
  --straw:#F2E08C;     /* Grist Lager */
  --gold:#E3B448;      /* Marrickville Pale */
  --amber:#B96A22;     /* Haze Kettle IPA: carries no body text (ink on it is 4.46) */
  --ipa-card:#C8792F;  /* IPA tint for small cards that carry text (ink on it is 5.3) */
  --ruby:#7A2320;      /* Railside Red */
  --ruby-deep:#4A1C18; /* ruby-to-stout midpoint */
  --plum:#E48AA6;      /* Davidson Plum Sour: its tap card and band only */
  --stout:#1B1411;     /* Coal Stout */
  --bone:#FBF1DE;      /* light text on dark */
  --ink:#1B1411;       /* dark text on light */
  --tap:#EF4A32;       /* tap red: display text and marks on DARK only (5.10 malt, 4.93 stout). Never on ruby */
  --brick:#B3261A;     /* brick red: CTA fills with bone text (5.84), red text on straw (4.93). Never on ruby or gold */
  --brick-deep:#8F1D13;
  --stone:#B8AC98;     /* muted mono on malt */
  --bone-80:rgba(251,241,222,.8);
  --bone-72:rgba(251,241,222,.72);
  --line-dark:rgba(251,241,222,.22);
  --line-light:rgba(27,20,17,.22);
  --live:var(--tap);                 /* live dot and status marks: tap red on dark; ground classes switch it to brick on light */
  --live-ring:rgba(239,74,50,.22);

  /* type */
  --display:"Tanker", Impact, "Arial Narrow", sans-serif;
  --sans:"General Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"Martian Mono", ui-monospace, Menlo, monospace;

  /* layout (bank section 1) */
  --gutter:50px;
  --gutter-end:var(--gutter); /* right-hand gutter: widens to clear the gauge on desktop (html.has-gauge). Use it for right padding */
  --measure:68ch;
  --section:120px;
  --nav-h:76px;
  --bar:64px;
  --r-card:16px;
  --r-small:8px;
  --r-pill:999px;

  /* motion (bank section 1 and 7) */
  --ease-enter:cubic-bezier(0.16,1,0.3,1);
  --dur-enter:800ms;
  --rise:40px;
  --rise-display:80px;
  --stagger:200ms;
  --ease-hover:cubic-bezier(0.44,0,0.56,1);
  --dur-hover:300ms;
  --ease-settle:cubic-bezier(0.22,1,0.36,1);
  --dur-settle:1400ms;
  --ease-land:cubic-bezier(0.4,0,0,1);
  --ease-wipe:cubic-bezier(0.76,0,0.24,1);
  --edge-fade:linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
@media (max-width:1100px){ :root{ --gutter:32px; --section:96px; } }
@media (max-width:640px){ :root{ --gutter:18px; --section:72px; --nav-h:64px; --bar:60px; } }
@media (min-width:901px){ html.has-gauge{ --gutter-end:max(var(--gutter), 76px); } }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{ margin:0; background:var(--malt); color:var(--bone); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
main{ display:block; overflow-x:clip; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-80px; z-index:100; background:var(--bone); color:var(--ink); padding:12px 16px; border-radius:var(--r-small); font-weight:500; text-decoration:none; }
.skip:focus{ top:12px; }
.wrap{ padding-left:var(--gutter); padding-right:var(--gutter-end); }
.section{ padding-block:var(--section); }
.pt-half{ padding-top:calc(var(--section) * .5); }  /* tighten a handover between two sections */
.pb-half{ padding-bottom:calc(var(--section) * .5); }

/* ---------- type ---------- */
/* Tanker has one weight and is condensed: set it in caps, tight leading, near-zero tracking */
.display{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.004em; line-height:.86; }
.d-xxl{ font-size:clamp(96px, 15vw, 250px); line-height:.82; }
.d-xl{ font-size:clamp(72px, 10vw, 168px); }
.d-l{ font-size:clamp(56px, 7vw, 116px); }
.d-m{ font-size:clamp(36px, 3.6vw, 56px); line-height:.9; }
.d-s{ font-size:30px; line-height:.95; }
.lede{ font-size:clamp(18px, 1.45vw, 21px); line-height:1.45; max-width:36ch; }
.t{ max-width:var(--measure); }
.mono, .kick{ font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; }
.kick{ display:inline-flex; align-items:center; gap:10px; }
.kick::before{ content:""; width:18px; height:1.5px; background:currentColor; }
.kick.no-rule::before{ display:none; }
/* a kicker never sits flush on its heading; containers that already space it with a gap or margin are left alone */
.kick + :is(h1, h2, h3){ margin-top:16px; }
:is(.pinned-centre, .ink-text, .up-head, .enq-side-c, .faq-side, .book-l, .hours-side, .dform-done, .page-hero, .g2g-intro, .tp-close, .there-panel) .kick + :is(h1, h2, h3){ margin-top:0; }
/* inline mixed-face headline: General Sans 400 set against Tanker at the same size */
.lt{ font-family:var(--sans); font-weight:400; text-transform:none; letter-spacing:-.045em; }

/* ---------- grounds: every ground brings its text colour, accent and line colour ----------
   .g-* is a solid ground. [data-run="*"] is the same ground, but joins the colour run
   (it goes transparent and the fixed pour layers show through). */
.g-straw, [data-run="straw"]{ --live:var(--brick); --live-ring:rgba(179,38,26,.2); --ground:var(--straw); --fg:var(--ink); --muted:rgba(27,20,17,.78); --accent:var(--brick); --line:var(--line-light); --run-c:var(--straw); }
.g-gold,  [data-run="gold"] { --live:var(--brick); --live-ring:rgba(179,38,26,.2); --ground:var(--gold);  --fg:var(--ink); --muted:rgba(27,20,17,.8);  --accent:var(--ink);   --line:var(--line-light); --run-c:var(--gold); }
.g-amber, [data-run="amber"]{ --live:var(--ink); --live-ring:rgba(27,20,17,.2); --ground:var(--amber); --fg:var(--ink); --muted:var(--ink);          --accent:var(--ink);   --line:rgba(27,20,17,.3); --run-c:var(--amber); }
.g-plum,  [data-run="plum"] { --live:var(--brick); --live-ring:rgba(179,38,26,.2); --ground:var(--plum);  --fg:var(--ink); --muted:rgba(27,20,17,.8);  --accent:var(--ink);   --line:var(--line-light); --run-c:var(--plum); }
.g-ruby,  [data-run="ruby"] { --live:var(--straw); --live-ring:rgba(242,224,140,.25); --ground:var(--ruby);  --fg:var(--bone); --muted:var(--bone-80);    --accent:var(--straw); --line:var(--line-dark); --run-c:var(--ruby); }
.g-bone{ --live:var(--brick); --live-ring:rgba(179,38,26,.2); --ground:var(--bone); --fg:var(--ink); --muted:rgba(27,20,17,.74); --accent:var(--brick); --line:var(--line-light); }
.g-stout, [data-run="stout"]{ --live:var(--tap); --live-ring:rgba(239,74,50,.22); --ground:var(--stout); --fg:var(--bone); --muted:var(--bone-72);    --accent:var(--tap);   --line:var(--line-dark); --run-c:var(--stout); }
.g-malt,  [data-run="malt"] { --live:var(--tap); --live-ring:rgba(239,74,50,.22); --ground:var(--malt);  --fg:var(--bone); --muted:var(--bone-72);    --accent:var(--tap);   --line:var(--line-dark); --run-c:var(--malt); }
.g-straw, .g-gold, .g-amber, .g-plum, .g-ruby, .g-stout, .g-malt, .g-bone, [data-run]{ background-color:var(--ground); color:var(--fg); }
[data-run-end="straw"]{ --run-e:var(--straw); } [data-run-end="gold"]{ --run-e:var(--gold); } [data-run-end="amber"]{ --run-e:var(--amber); }
[data-run-end="ruby"]{ --run-e:var(--ruby); } [data-run-end="plum"]{ --run-e:var(--plum); } [data-run-end="stout"]{ --run-e:var(--stout); }
[data-run][data-run-end]{ background-image:linear-gradient(var(--run-c) 0%, var(--run-e) 100%); }
[data-run="ruby"][data-run-end="stout"]{ background-image:linear-gradient(var(--ruby) 0%, var(--ruby-deep) 55%, var(--stout) 100%); }
.accent{ color:var(--accent); }
.muted{ color:var(--muted); }
/* with the run on, run sections go clear and the fixed pour shows through */
.run [data-run]{ background:transparent; }

/* grain: a plain low-opacity PNG overlay, never blended */
.grain{ position:relative; isolation:isolate; }
.grain::before{ content:""; position:absolute; inset:0; z-index:-1; background:url("/img/grain.png") repeat; background-size:160px 160px; opacity:.05; pointer-events:none; border-radius:inherit; }
.grain-dark::before{ opacity:.07; }

/* ==========================================================================
   CHROME
   ========================================================================== */

/* ---------- wordmark: GRIST plus the five-glass ladder ---------- */
.wordmark{ font-family:var(--display); font-size:34px; line-height:1; letter-spacing:.02em; text-decoration:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; }
.ladder{ display:inline-flex; gap:2px; }
.ladder i{ width:5px; height:19px; border-radius:2px; box-shadow:0 0 0 1px currentColor; }
.ladder i:nth-child(1){ background:var(--straw); } .ladder i:nth-child(2){ background:var(--gold); } .ladder i:nth-child(3){ background:var(--amber); }
.ladder i:nth-child(4){ background:var(--ruby); } .ladder i:nth-child(5){ background:var(--stout); }

/* ---------- nav: fixed, tinted to the ground beneath it (site.js sets data-tone) ---------- */
.nav{ position:fixed; z-index:60; inset:0 0 auto 0; height:var(--nav-h); display:flex; align-items:center; gap:40px; padding:0 var(--gutter);
  color:var(--nav-fg, var(--bone)); --nav-bg:rgba(21,17,13,.82); transition:color .45s var(--ease-hover); }
.nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--nav-bg); opacity:0; box-shadow:0 1px 0 var(--nav-line, rgba(251,241,222,.12)); transition:opacity .45s var(--ease-hover), background-color .45s var(--ease-hover); pointer-events:none; }
.nav.is-scrolled{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.nav.is-scrolled::before{ opacity:1; }
.nav[data-tone="straw"]{ --nav-fg:var(--ink); --nav-bg:rgba(242,224,140,.86); --nav-line:rgba(27,20,17,.12); }
.nav[data-tone="gold"] { --nav-fg:var(--ink); --nav-bg:rgba(227,180,72,.88); --nav-line:rgba(27,20,17,.12); }
.nav[data-tone="amber"]{ --nav-fg:var(--ink); --nav-bg:rgba(204,127,53,.94); --nav-line:rgba(27,20,17,.14); } /* lighter amber: ink 5.76 */
.nav[data-tone="plum"] { --nav-fg:var(--ink); --nav-bg:rgba(228,138,166,.9); --nav-line:rgba(27,20,17,.12); }
.nav[data-tone="ruby"] { --nav-fg:var(--bone); --nav-bg:rgba(122,35,32,.9); }
.nav[data-tone="stout"]{ --nav-fg:var(--bone); --nav-bg:rgba(27,20,17,.88); }
.nav[data-tone="malt"] { --nav-fg:var(--bone); --nav-bg:rgba(21,17,13,.82); }
/* over a split hero the tint goes fully opaque, so the photo never shows through the bar */
.nav.is-over-split[data-tone="straw"]{ --nav-bg:var(--straw); } .nav.is-over-split[data-tone="gold"]{ --nav-bg:var(--gold); }
.nav.is-over-split[data-tone="plum"]{ --nav-bg:var(--plum); } .nav.is-over-split[data-tone="amber"]{ --nav-bg:#CC7F35; }
.nav .wordmark{ margin-right:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500; }
.nav-links a{ text-decoration:none; position:relative; padding:12px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--dur-hover) var(--ease-hover); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-book{ display:inline-flex; align-items:center; min-height:46px; padding:0 22px; border-radius:var(--r-pill); background:var(--brick); color:var(--bone); text-decoration:none; font-weight:500; font-size:15px; transition:background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.nav-book:hover{ background:var(--brick-deep); }
.nav[data-tone="ruby"] .nav-book{ background:var(--bone); color:var(--ink); } /* no red on ruby */
.nav-toggle{ display:none; }
@media (max-width:900px){
  .nav{ gap:12px; }
  .nav-links, .nav-book{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 16px 0 18px; border-radius:var(--r-pill); border:1.5px solid currentColor; background:transparent; font:500 14px/1 var(--sans); cursor:pointer; }
  .nav-toggle i{ display:block; width:18px; height:10px; position:relative; }
  .nav-toggle i::before, .nav-toggle i::after{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; }
  .nav-toggle i::before{ top:0; } .nav-toggle i::after{ bottom:0; }
}

/* ---------- mobile menu: a sibling of the header, so the header's blur cannot trap it ---------- */
.menu{ position:fixed; inset:0; z-index:80; background:var(--stout); color:var(--bone); padding:calc(var(--nav-h) + 20px) var(--gutter) 32px; display:flex; flex-direction:column; gap:26px; overflow-y:auto; }
.menu-top{ position:absolute; top:0; left:0; right:0; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); }
.menu-close{ display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-radius:var(--r-pill); border:1.5px solid currentColor; background:transparent; cursor:pointer; font:500 14px/1 var(--sans); color:var(--bone); }
.menu-links{ display:grid; gap:2px; }
.menu-links a{ display:flex; align-items:baseline; gap:14px; font-family:var(--display); text-transform:uppercase; font-size:clamp(52px, 15vw, 92px); line-height:.92; text-decoration:none; padding:4px 0; }
.menu-links a span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--stone); }
.menu-links a[aria-current="page"], .menu-links a:hover{ color:var(--tap); }
.menu .ladder-bar{ display:flex; height:10px; border-radius:6px; overflow:hidden; }
.ladder-bar i{ flex:1; }
.menu-foot{ display:grid; gap:6px; font-size:15px; color:var(--bone-80); margin-top:auto; }
.menu-foot a{ text-decoration:none; }
.js .menu:not([hidden]){ animation:menu-in 350ms var(--ease-land) both; }
@keyframes menu-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- utility bar: pinned site-wide, hides over [data-ubar-hide] and the footer ---------- */
.ubar{ position:fixed; inset:auto 0 0 0; height:var(--bar); z-index:45; display:flex; align-items:stretch; background:var(--malt); color:var(--bone); border-top:1px solid var(--line-dark); transition:transform 500ms var(--ease-enter); }
/* enters with the hero sequence, then slides away over [data-ubar-hide] and the footer */
.js:not(.hero-go) .ubar{ transform:translateY(110%); }
.hero-go:not(.ub-ready) .ubar{ transition-delay:900ms; }
html.ub-hidden .ubar{ transform:translateY(110%); }
.ub-cell{ display:flex; align-items:center; gap:12px; padding:0 26px; border-right:1px solid var(--line-dark); white-space:nowrap; }
.ub-cell:first-child{ padding-left:var(--gutter); }
.ub-cell .mono{ color:var(--stone); }
.ub-strong{ font-weight:500; font-size:15px; }
.ub-stack{ display:grid; gap:1px; }
.ub-dot{ width:9px; height:9px; border-radius:50%; background:var(--stone); flex:none; box-shadow:0 0 0 4px rgba(184,172,152,.16); }
.ubar{ --live:var(--tap); --live-ring:rgba(239,74,50,.22); }
[data-open="1"] .ub-dot, [data-open="1"] .live-dot, .status[data-open="1"] .live-dot{ background:var(--live); box-shadow:0 0 0 4px var(--live-ring); }
.ub-num{ font-family:var(--display); font-size:30px; line-height:1; color:var(--tap); }
.ub-addr{ flex:1; min-width:0; overflow:hidden; border-right:0; }
.ub-addr span{ overflow:hidden; text-overflow:ellipsis; }
.ub-book{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; white-space:nowrap; padding:0 var(--gutter) 0 30px; background:var(--brick); color:var(--bone); text-decoration:none; font-family:var(--display); font-size:28px; text-transform:uppercase; letter-spacing:.01em; transition:background-color var(--dur-hover) var(--ease-hover); }
.ub-book:hover{ background:var(--brick-deep); }
.ub-book svg{ width:22px; height:22px; transition:transform var(--dur-hover) var(--ease-hover); }
.ub-book:hover svg{ transform:translateX(4px); }
.ub-k{ display:none; }
@media (max-width:1340px){ .ub-addr span{ display:none; } }
@media (max-width:380px){ .ub-k{ display:none !important; } }
@media (max-width:1024px){ .ub-clock{ display:none; } }
@media (max-width:767px){
  .ub-cell{ padding:0 12px; }
  .ub-cell:first-child{ padding-left:var(--gutter); border-right:0; flex:1; min-width:0; overflow:hidden; }
  .ub-taps, .ub-kitchen, .ub-addr, .ub-clock{ display:none; }
  .ub-k{ display:block; }
  .ub-strong{ font-size:14px; }
  .ub-book{ font-size:22px; padding:0 var(--gutter) 0 18px; gap:8px; }
  .ub-book svg{ width:18px; height:18px; }
}

/* ---------- strip footer: a band that echoes the gauge, one row, a thin base ---------- */
.foot{ padding:0 var(--gutter-end) 22px var(--gutter); }
.foot-band{ display:flex; gap:3px; padding-top:40px; }
.foot-band div{ flex:1; min-width:0; }
.foot-band i{ display:block; height:12px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(251,241,222,.35); transform-origin:left center; }
.foot-band span{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foot-row{ display:flex; align-items:center; gap:18px 40px; flex-wrap:wrap; padding:28px 0; }
.foot-tag{ display:flex; align-items:center; gap:14px; font-size:15px; }
.foot-tag b{ font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.02em; }
.foot-links{ display:flex; gap:22px; font-size:15px; font-weight:500; }
.foot-links a, .foot-contact a{ text-decoration:none; }
.foot-links a:hover, .foot-contact a:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot-contact{ display:flex; gap:8px 22px; flex-wrap:wrap; font-size:15px; margin-left:auto; }
.foot-contact .ig{ font-weight:500; text-decoration:underline; text-decoration-color:var(--tap); text-decoration-thickness:2px; text-underline-offset:5px; }
.foot-base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line-dark); padding-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-72); }
.js .foot-band[data-rv] i{ transform:scaleX(0); transition:transform 1100ms var(--ease-enter); }
.js .foot-band[data-rv] div:nth-child(2) i{ transition-delay:90ms; } .js .foot-band[data-rv] div:nth-child(3) i{ transition-delay:180ms; }
.js .foot-band[data-rv] div:nth-child(4) i{ transition-delay:270ms; } .js .foot-band[data-rv] div:nth-child(5) i{ transition-delay:360ms; } .js .foot-band[data-rv] div:nth-child(6) i{ transition-delay:450ms; }
.js .foot-band[data-rv].is-in i{ transform:none; }
@media (max-width:900px){ .foot-contact{ margin-left:0; } .foot-links{ flex-wrap:wrap; gap:4px 18px; } .foot-links a{ padding:10px 0; } .foot-band span{ font-size:9px; } }

/* ==========================================================================
   BUTTONS, LINKS, CHIPS
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:14px; min-height:54px; padding:0 26px; border-radius:var(--r-pill); border:0; background:var(--brick); color:var(--bone); font:500 17px/1 var(--sans); text-decoration:none; cursor:pointer; transition:background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.btn:hover{ background:var(--brick-deep); }
.btn .arr, .link-arrow .arr{ display:inline-block; transition:transform var(--dur-hover) var(--ease-hover); }
.btn:hover .arr, .link-arrow:hover .arr{ transform:translateX(5px); }
.btn--bone{ background:var(--bone); color:var(--ink); }
.btn--bone:hover{ background:var(--straw); }
.btn--line{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn--line:hover{ background:var(--fg, var(--bone)); color:var(--ground, var(--ink)); }
.link-line{ text-decoration:none; background:linear-gradient(currentColor,currentColor) left bottom / 100% 1.5px no-repeat; padding:6px 0 4px; transition:background-size var(--dur-hover) var(--ease-hover); }
.link-line:hover{ background-size:0 1.5px; background-position:right bottom; }
.link-arrow{ display:inline-flex; align-items:center; gap:12px; min-height:44px; font-weight:500; text-decoration:none; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; min-height:30px; padding:0 13px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1.5px currentColor; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.chip--fill{ background:var(--bone); color:var(--ink); box-shadow:none; }
.live-dot{ width:10px; height:10px; border-radius:50%; background:var(--stone); flex:none; }

/* ==========================================================================
   REVEALS. Every start state sits under .js (set in <head>); site.js reveals with an
   IntersectionObserver, a scroll sweep and a timed backstop. The <head> script drops
   .js after 2.5s if site.js never ran, so nothing is ever stranded at opacity 0.
   ========================================================================== */
/* hero load sequence: [data-rise] with --i (0-4); html.hero-go starts it */
.js [data-rise]{ opacity:0; transform:translateY(var(--rise-by, var(--rise))); }
.hero-go [data-rise]{ opacity:1; transform:none; transition:opacity 900ms var(--ease-land) calc(var(--i, 0) * var(--stagger) + 100ms), transform 1100ms var(--ease-enter) calc(var(--i, 0) * var(--stagger) + 100ms); }
/* scroll reveals */
.js [data-rv]{ transition:opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay:calc(var(--i, 0) * var(--stagger)); }
.js [data-rv="rise"]:not(.is-in){ opacity:0; transform:translateY(var(--rise)); }
.js [data-rv="arrive"]{ transition-duration:1000ms; }
.js [data-rv="arrive"]:not(.is-in){ opacity:0; transform:translateY(var(--rise-display)); }
.js [data-rv="fade"]{ transition:opacity 1100ms var(--ease-land); }
.js [data-rv="fade"]:not(.is-in){ opacity:0; }
.js [data-rv="group"] > *{ transition:opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay:calc(var(--i, 0) * var(--stagger)); }
.js [data-rv="group"]:not(.is-in) > *{ opacity:0; transform:translateY(var(--rise)); }
/* mask lift: each .ln line rises out of its own mask */
.ln{ display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.ln > span{ display:block; }
.js [data-rv="lines"]{ transition:none; }
.js [data-rv="lines"] .ln > span{ transition:transform 1100ms var(--ease-enter); transition-delay:calc(var(--l, 0) * 120ms); }
.js [data-rv="lines"]:not(.is-in) .ln > span{ transform:translateY(105%); }
/* split wipe: brick then stout panels peel off the photo to the right */
[data-rv="wipe"]{ position:relative; overflow:hidden; }
.js [data-rv="wipe"]{ transition:none; }
.js [data-rv="wipe"]::before, .js [data-rv="wipe"]::after{ content:""; position:absolute; inset:0; z-index:2; transform-origin:100% 50%; transition:transform 1200ms var(--ease-wipe); pointer-events:none; }
.js [data-rv="wipe"]::before{ background:var(--brick); transition-delay:280ms; }
.js [data-rv="wipe"]::after{ background:var(--stout); }
.js [data-rv="wipe"].is-in::before, .js [data-rv="wipe"].is-in::after{ transform:scaleX(0); }
/* the image settle: never invisible, it arrives. Any frame with .settle, image as direct child */
.settle{ overflow:hidden; }
.js .settle > img{ transform:scale(1.06); transition:transform var(--dur-settle) var(--ease-settle); }
.js .settle.is-in > img{ transform:none; }

/* ==========================================================================
   COLOUR RUN AND GAUGE (built by site.js from the page's [data-run] sections)
   ========================================================================== */
.pour{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.pour i{ position:absolute; inset:0; opacity:0; }
.pour i:first-child{ opacity:1; }
.pour::after{ content:""; position:absolute; inset:0; background:url("/img/grain.png") repeat; background-size:160px 160px; opacity:.05; transition:opacity .6s linear; }
.pour.is-dark::after{ opacity:.07; }

.gauge{ position:fixed; z-index:40; pointer-events:none; opacity:0; transition:opacity .5s var(--ease-land), transform 500ms var(--ease-enter); }
.gauge.is-on{ opacity:1; }
.g-track{ display:flex; overflow:hidden; }
.g-track i{ flex:1; }
.g-mark{ position:absolute; border-radius:50%; background:var(--bone); will-change:transform; }
.g-label{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.g-label b{ font-weight:400; color:var(--g-hi, var(--straw)); }
@media (min-width:901px){
  .gauge{ right:14px; top:50%; height:46vh; margin-top:-23vh; width:44px; }
  .g-wrap{ position:absolute; right:0; top:0; bottom:0; width:8px; }
  .g-track{ position:absolute; inset:0; flex-direction:column; border-radius:8px; box-shadow:0 0 0 1.5px var(--ink), 0 0 0 3px rgba(251,241,222,.5); }
  .g-mark{ right:-5px; top:-9px; width:18px; height:18px; box-shadow:0 0 0 2px var(--ink), 0 4px 10px rgba(27,20,17,.35); }
  .g-label{ position:absolute; right:18px; top:0; bottom:0; margin:auto 0; height:max-content; writing-mode:vertical-rl; transform:rotate(180deg); background:var(--ink); color:var(--bone); border-radius:var(--r-pill); padding:14px 6px; }
}
@media (max-width:900px){
  .gauge{ left:0; right:0; bottom:var(--bar); height:28px; background:var(--ink); color:var(--bone); display:flex; align-items:center; gap:12px; padding:0 var(--gutter); border-top:1px solid var(--line-dark); }
  .ub-hidden .gauge{ transform:translateY(var(--bar)); }
  .run body{ padding-bottom:28px; }
  .g-label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
  .g-wrap{ position:relative; width:110px; height:6px; flex:none; }
  .g-track{ position:absolute; inset:0; border-radius:6px; box-shadow:0 0 0 1px rgba(251,241,222,.45); }
  .g-mark{ left:-6px; top:-4px; width:14px; height:14px; box-shadow:0 0 0 2px var(--ink); }
}

/* ==========================================================================
   PAGE HERO (inner pages): full-bleed photo, bank section 6 scrim, staggered load
   ========================================================================== */
.page-hero{ position:relative; min-height:max(560px, min(92svh, 860px)); display:flex; align-items:flex-end; background:var(--malt); color:var(--bone); overflow:clip; isolation:isolate; }
.page-hero-media{ position:absolute; inset:0; z-index:-2; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
.js .page-hero-media img{ animation:hero-settle var(--dur-settle) var(--ease-settle) both; }
@keyframes hero-settle{ from{ transform:scale(1.06); } to{ transform:none; } }
/* scrim: "bottom, light mid-tones" (bank section 6), plus a left hold so the headline always reads */
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,9,6,.55) 0%, rgba(12,9,6,.12) 34%, rgba(12,9,6,.5) 62%, rgba(12,9,6,.9) 100%),
             linear-gradient(90deg, rgba(12,9,6,.6) 0%, rgba(12,9,6,.2) 55%, rgba(12,9,6,0) 100%); }
.page-hero-body{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px, 340px); align-items:end; gap:24px 48px; padding:calc(var(--nav-h) + 40px) var(--gutter) calc(var(--bar) + 48px); }
.page-hero-h{ font-size:clamp(72px, min(12.5vw, 24svh), 210px); line-height:.84; }
.page-hero-h .l2{ display:block; color:var(--tap); }
.page-hero-side{ display:grid; gap:18px; padding-bottom:10px; justify-items:start; }
.page-hero-side .lede{ font-size:clamp(17px, 1.35vw, 20px); }
.page-hero .kick{ color:var(--stone); margin-bottom:18px; }
/* the pour tag: which beer this page is poured in, top right */
.pour-tag{ position:absolute; top:calc(var(--nav-h) + 22px); right:var(--gutter); display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:12px; background:rgba(21,17,13,.86); color:var(--stone); }
.pour-tag i{ width:16px; height:28px; border-radius:3px 3px 7px 7px; background:var(--c, var(--straw)); box-shadow:inset 0 5px 0 var(--bone), 0 0 0 1px rgba(251,241,222,.45); }
.pour-tag b{ display:block; color:var(--bone); font-weight:400; }
/* split variant (Visit): ground on the left, photo on the right, hard edge */
.page-hero--split{ display:grid; grid-template-columns:55fr 45fr; align-items:stretch; background:var(--ground, var(--straw)); color:var(--fg, var(--ink)); }
.page-hero--split::before{ display:none; }
/* the nav turns solid over a split hero (site.js), so ink links never sit on the dark photo; without JS the nav stays solid malt */
html:not(.js) body:has(.page-hero--split) .nav::before{ opacity:1; }
.page-hero--split .page-hero-media{ position:relative; z-index:0; grid-column:2; grid-row:1; border-left:1.5px solid var(--ink); min-height:100%; }
.page-hero--split .page-hero-media img{ position:absolute; inset:0; }
.page-hero--split .page-hero-body{ grid-column:1; grid-row:1; grid-template-columns:1fr; align-content:end; }
.page-hero--split .kick{ color:var(--muted); }
.page-hero--split .page-hero-h .l2{ color:var(--brick); }
.page-hero--split .page-hero-h{ font-size:clamp(72px, min(10.5vw, 22svh), 190px); }
/* short laptops: keep every hero action above the utility bar */
@media (min-width:901px) and (max-height:760px){
  .page-hero-body{ padding-top:calc(var(--nav-h) + 24px); padding-bottom:calc(var(--bar) + 28px); }
  .page-hero--split .page-hero-h{ font-size:clamp(72px, 19svh, 171px); }
  .page-hero-side{ gap:14px; }
}
@media (max-width:900px){
  .page-hero{ min-height:max(540px, 88svh); }
  .page-hero-body{ grid-template-columns:1fr; padding-bottom:calc(var(--bar) + 32px); }
  .page-hero-h{ font-size:clamp(76px, 23vw, 140px); }
  .pour-tag{ display:none; }
  .page-hero--split{ grid-template-columns:1fr; min-height:0; }
  .page-hero--split .page-hero-media{ grid-column:1; grid-row:1; aspect-ratio:4/3; border-left:0; border-bottom:1.5px solid var(--ink); }
  .page-hero--split .page-hero-body{ grid-row:2; padding:40px var(--gutter) var(--section); }
}

/* ==========================================================================
   HOME COMPONENTS (reusable on inner pages where noted in README.md)
   ========================================================================== */

/* ---------- video hero ---------- */
.vhero{ position:relative; height:100vh; height:100svh; min-height:620px; overflow:clip; background:var(--malt); color:var(--bone); isolation:isolate; }
.vhero-media{ position:absolute; inset:0; z-index:-2; }
.vhero-media img, .vhero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
@media (max-width:760px){ .vhero-media img, .vhero-media video{ object-position:84% 50%; } }
.vhero-video{ opacity:0; transition:opacity 900ms var(--ease-land); }
.vhero-video.is-playing{ opacity:1; }
.vhero-grade{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,9,6,.62) 0%, rgba(12,9,6,.18) 20%, rgba(12,9,6,.3) 42%, rgba(12,9,6,.8) 66%, rgba(12,9,6,.94) 100%),
             linear-gradient(90deg, rgba(12,9,6,.55) 0%, rgba(12,9,6,.18) 55%, rgba(12,9,6,0) 100%),
             linear-gradient(0deg, rgba(92,58,20,.22), rgba(92,58,20,.22)); }
.vhero-grade::before{ opacity:.06; }
.vhero-body{ position:absolute; inset:auto 0 0 0; padding:0 var(--gutter) calc(var(--bar) + 44px); display:grid; grid-template-columns:1fr minmax(260px, 360px); align-items:end; gap:40px; }
.vhero h1{ font-size:clamp(92px, 13.4vw, 228px); line-height:.84; }
.vhero h1 .l{ display:block; }
.vhero h1 .l2{ color:var(--tap); }
.vhero-side{ display:grid; gap:22px; padding-bottom:12px; }
.vhero-side .lede{ font-size:clamp(17px, 1.35vw, 20px); max-width:34ch; }
.vhero-side .lede b{ font-weight:500; }
.vid-btn{ justify-self:start; display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:0 18px 0 6px; border-radius:var(--r-pill); border:1px solid rgba(251,241,222,.3); background:rgba(21,17,13,.55); color:var(--bone); cursor:pointer; font:400 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; transition:background-color var(--dur-hover) var(--ease-hover); }
.vid-btn:hover{ background:rgba(21,17,13,.85); }
.vid-btn .ic{ width:34px; height:34px; border-radius:50%; background:var(--bone); color:var(--ink); display:grid; place-items:center; }
.vid-btn svg{ width:12px; height:12px; }
.vid-btn .i-play{ display:none; }
.vid-btn[data-state="paused"] .i-play{ display:block; }
.vid-btn[data-state="paused"] .i-pause{ display:none; }
.vhero-meta{ position:absolute; top:calc(var(--nav-h) + 22px); right:var(--gutter); text-align:right; color:var(--stone); background:rgba(21,17,13,.86); padding:12px 14px; border-radius:12px; }
.vhero-meta b{ color:var(--bone); font-weight:400; }
@media (max-width:767px){
  .vhero{ min-height:600px; }
  .vhero-body{ grid-template-columns:1fr; gap:22px; padding-bottom:calc(var(--bar) + 30px); }
  .vhero h1{ font-size:clamp(88px, 28vw, 136px); }
  .vhero-meta{ display:none; }
  .vhero-side{ grid-template-columns:1fr auto; align-items:end; gap:16px; padding:0; }
  .vid-btn{ padding:0 6px; } .vid-btn .lbl{ display:none; }
}

/* ---------- pale to dark: split screen, hard edge, tap board of six glasses ---------- */
.pale{ display:grid; grid-template-columns:66fr 34fr; min-height:max(100svh, 780px); }
.pale-l{ display:grid; grid-template-rows:auto auto 1fr auto auto; padding:calc(var(--nav-h) + 44px) 32px 0 var(--gutter); min-width:0; }
.pale-eyebrow{ display:flex; align-items:center; gap:18px; }
.pale-eyebrow .n{ font-family:var(--display); font-size:120px; line-height:.78; }
.pale-eyebrow .l{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; line-height:1.5; }
.pale-eyebrow .l small{ display:block; font-family:var(--sans); font-size:15px; letter-spacing:0; text-transform:none; color:var(--muted); }
/* tap board: six glasses; each fills with its beer when the board is revealed */
.board{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin-top:34px; max-width:740px; }
.board li{ display:grid; gap:9px; font-size:14px; line-height:1.25; }
.glass{ position:relative; display:block; aspect-ratio:1/1; max-height:120px; border-radius:5px 5px 16px 16px; background:rgba(251,241,222,.5); box-shadow:inset 0 0 0 1.5px var(--ink); overflow:hidden; }
.glass i{ position:absolute; inset:0; background:var(--c); transform-origin:50% 100%; }
.glass i::before{ content:""; position:absolute; left:0; right:0; top:0; height:15%; background:var(--bone); box-shadow:inset 0 -1.5px 0 var(--ink); }
.glass::after{ content:""; position:absolute; left:18%; top:26%; width:9%; height:50%; border-radius:4px; background:rgba(255,255,255,.35); }
.glass::before{ content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; box-shadow:inset 0 0 0 1.5px var(--ink); pointer-events:none; }
.board b{ display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.js [data-rv="pour"]{ transition:none; }
.js [data-rv="pour"] .glass i{ transition:transform 1300ms var(--ease-enter); transition-delay:calc(var(--i, 0) * 130ms + 150ms); }
.js [data-rv="pour"]:not(.is-in) .glass i{ transform:scaleY(0); }
.pale-h{ align-self:end; font-size:var(--pale-size, clamp(64px, calc((66vw - 82px) / 4.8), 240px)); white-space:nowrap; line-height:.84; padding-bottom:.04em; }
.pale-cta{ display:flex; align-items:center; gap:22px; margin:26px 0 38px; font-size:20px; font-weight:500; }
.pale-cta .rule{ width:1.5px; height:30px; background:currentColor; }
.pale-strip{ display:flex; align-items:flex-end; gap:24px; border-top:1.5px solid var(--ink); padding:18px 0 30px; }
.pale-strip .num{ font-family:var(--display); font-size:clamp(100px, 12vw, 200px); line-height:.76; }
.pale-strip .num sup{ font-size:.42em; vertical-align:top; position:relative; top:.06em; }
.pale-strip .tiny{ font-size:15px; line-height:1.4; max-width:24ch; padding-bottom:4px; }
.pale-strip .tiny b{ display:block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.pale-strip .cue{ margin-left:auto; display:flex; align-items:center; gap:10px; padding-bottom:4px; }
.pale-strip .cue span{ display:block; width:10px; height:36px; border-radius:6px; background:linear-gradient(var(--straw), var(--gold), var(--amber), var(--ruby), var(--stout)); box-shadow:0 0 0 1.5px var(--ink); }
.pale-r{ position:relative; overflow:hidden; min-height:100%; border-left:1.5px solid var(--ink); }
.pale-r img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
@media (max-width:900px){
  .pale{ grid-template-columns:1fr; min-height:0; }
  .pale-l{ padding:var(--section) var(--gutter) 0; grid-template-rows:auto; }
  .pale-eyebrow .n{ font-size:88px; }
  .pale-h{ font-size:clamp(56px, calc((100vw - 2 * var(--gutter)) / 4.8), 180px); margin-top:44px; }
  .pale-cta{ margin:18px 0 28px; font-size:18px; }
  .pale-strip .cue{ display:none; }
  .pale-r{ height:78svh; border-left:0; border-top:1.5px solid var(--ink); }
}
@media (max-width:640px){ .board{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 10px; margin-top:26px; } }

/* ---------- pinned centre: heading held in the middle, tap cards pass both sides ---------- */
.pinned{ padding-bottom:12vh; }
.pinned-stage{ position:sticky; top:0; height:100vh; height:100svh; padding:var(--nav-h) 0 var(--bar); display:grid; place-items:center; text-align:center; pointer-events:none; } /* centred in the band between nav and utility bar */
.pinned-centre{ display:grid; justify-items:center; gap:clamp(10px, 2.4svh, 22px); pointer-events:auto; }
.pinned-h{ font-size:clamp(150px, min(22vw, 28svh), 360px); line-height:.78; }
.pinned-h span{ display:block; }
.paddle{ display:grid; justify-items:center; gap:4px; }
.paddle strong{ font-family:var(--display); font-weight:400; font-size:40px; line-height:1; text-transform:uppercase; }
.paddle span{ font-size:16px; }
.pinned-cols{ position:relative; margin-top:-100vh; margin-top:-100svh; display:grid; grid-template-columns:minmax(0,350px) 1fr minmax(0,350px); padding:0 var(--gutter-end) 0 var(--gutter); }
.pcol{ display:grid; gap:18vh; align-content:start; }
.pcol-a{ grid-column:1; padding-top:62vh; }
.pcol-b{ grid-column:3; padding-top:96vh; }
/* tap card: bone frame, beer-coloured card, photo, price row, mono spec row */
.tap{ background:var(--bone); padding:8px; border-radius:var(--r-card); box-shadow:0 34px 60px -24px rgba(27,20,17,.45); transform:rotate(var(--tilt, 0deg)); }
.tap-in{ border-radius:10px; overflow:hidden; background:var(--beer); color:var(--on); display:flex; flex-direction:column; }
.tap-img{ aspect-ratio:4/3; overflow:hidden; }
.tap-img img{ width:100%; height:100%; object-fit:cover; }
.tap-swatch{ aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px; background:radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.3), transparent 60%), var(--beer); border-bottom:1.5px solid rgba(27,20,17,.25); }
.tap-swatch .sw-top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.tap-swatch .sw-big{ font-family:var(--display); font-size:120px; line-height:.78; text-transform:uppercase; }
.tap-body{ padding:16px 20px 18px; display:grid; gap:10px; }
.tap-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tap-name, .tap-abv{ font-family:var(--display); font-weight:400; font-size:34px; line-height:.9; text-transform:uppercase; }
.tap-note{ font-size:16px; line-height:1.35; }
.tap-price{ display:flex; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
.tap-price span{ flex:1; padding:8px 0; font-size:14px; }
.tap-price span + span{ border-left:1.5px solid currentColor; padding-left:12px; }
.tap-price b{ font-family:var(--mono); font-weight:400; font-size:14px; margin-left:4px; }
.tap-spec{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; display:flex; gap:10px; flex-wrap:wrap; }
.tap-spec span + span::before{ content:"/"; margin-right:10px; opacity:.6; }
.pinned-centre .btn{ margin-top:6px; }
@media (max-width:900px){
  .pinned{ padding:var(--section) 0; }
  .pinned-stage{ position:static; height:auto; padding:0 var(--gutter) 36px; text-align:left; place-items:start; }
  .pinned-centre{ justify-items:start; gap:14px; }
  .pinned-h{ font-size:clamp(110px, 36vw, 200px); }
  .pinned-h span{ display:inline; }
  .paddle{ justify-items:start; }
  .pinned-cols{ margin-top:0; display:block; padding:0 var(--gutter); }
  .pcol{ display:grid; gap:12px; padding-top:0 !important; transform:none !important; }
  .pcol-b{ margin-top:12px; }
  .tap{ transform:none; box-shadow:none; padding:6px; }
  /* stacked, so the whole glass shows: the photos are 3:2 and a side column only ever showed a sliver */
  .tap-img, .tap-swatch{ aspect-ratio:3/2; }
  .tap-swatch{ padding:14px 16px; } .tap-swatch .sw-big{ font-size:clamp(72px, 24vw, 104px); }
  .tap-body{ padding:12px 14px; gap:7px; }
  .tap-name, .tap-abv{ font-size:26px; }
  .tap-note{ font-size:15px; }
  .tap-price span{ font-size:13px; } .tap-price b{ font-size:12px; }
}

/* ---------- inset ink panel: tabs, crossfading photo, two-column dish list ---------- */
.ink-sec{ padding:var(--section) 0; }
.ink-panel{ margin:0 max(var(--gutter-end), 6.5vw) 0 max(var(--gutter), 6.5vw); background:var(--stout); color:var(--bone); border-radius:var(--r-card); overflow:hidden; box-shadow:0 50px 90px -40px rgba(27,20,17,.6); }
.ink-top{ display:grid; grid-template-columns:36fr 64fr; min-height:620px; }
.ink-text{ padding:52px 48px 44px; display:flex; flex-direction:column; gap:22px; }
.ink-text .kick{ color:var(--stone); }
.ink-lede{ font-size:16px; max-width:34ch; color:var(--bone-80); }
.tabs{ display:grid; margin-top:auto; border-top:1px solid rgba(251,241,222,.2); }
.tab{ display:flex; align-items:center; gap:16px; width:100%; min-height:60px; padding:8px 0; background:none; border:0; border-bottom:1px solid rgba(251,241,222,.2); text-align:left; cursor:pointer; color:var(--bone-72); transition:color var(--dur-hover) var(--ease-hover); }
.tab .tn{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; width:24px; }
.tab .tl{ font-family:var(--display); font-size:32px; line-height:1; text-transform:uppercase; }
.tab .ta{ margin-left:auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--tap); color:var(--ink); transform:scale(0); transition:transform var(--dur-hover) var(--ease-enter); font-size:15px; }
.tab:hover{ color:var(--bone); }
.tab[aria-selected="true"]{ color:var(--tap); }
.tab[aria-selected="true"] .ta{ transform:scale(1); }
.ink-img{ position:relative; overflow:hidden; background:#2a201b; }
.ink-img figure{ position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ease-land); }
.ink-img figure.on{ opacity:1; }
.ink-img img{ width:100%; height:100%; object-fit:cover; }
.ink-img figcaption{ position:absolute; left:20px; bottom:20px; background:var(--stout); color:var(--bone-80); border-radius:var(--r-pill); padding:10px 16px; font-size:14px; }
.ink-img figcaption b{ font-weight:500; color:var(--bone); }
.ink-list{ border-top:1px solid rgba(251,241,222,.16); background:#231B17; padding:30px 48px 34px; }
.dishes{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; }
.dish{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid rgba(251,241,222,.16); }
.dish .dn{ font-size:18px; font-weight:500; }
.dish .dp{ margin-left:auto; font-family:var(--mono); font-size:14px; }
.pair{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--bone-72); white-space:nowrap; }
.pair i{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1px rgba(251,241,222,.5); }
.dish.full{ justify-content:space-between; text-decoration:none; color:var(--tap); }
.dish.full .dn{ font-family:var(--display); font-weight:400; font-size:30px; line-height:1; text-transform:uppercase; }
.dish.full .arrow{ width:42px; height:42px; border-radius:50%; background:var(--tap); color:var(--ink); display:grid; place-items:center; font-size:18px; transition:transform var(--dur-hover) var(--ease-hover); }
.dish.full:hover .arrow{ transform:translateX(6px); }
@media (max-width:900px){
  .ink-panel{ margin:0 var(--gutter); }
  .ink-top{ grid-template-columns:1fr; min-height:0; }
  .ink-img{ order:-1; aspect-ratio:4/3; }
  .ink-text{ padding:28px 22px 24px; gap:16px; }
  .tabs{ grid-template-columns:1fr 1fr; gap:0 14px; margin-top:6px; }
  .tab{ min-height:52px; } .tab .tl{ font-size:24px; } .tab .ta{ display:none; }
  .ink-list{ padding:10px 22px 22px; }
  .dishes{ grid-template-columns:1fr; }
  .dish{ flex-wrap:wrap; row-gap:2px; }
  .dish .pair{ order:3; width:100%; }
}

/* ---------- night accordion (bank 5: horizontal accordion, Stux), pinned and scroll-driven ----------
   .nacc[data-nacc] > .nacc-stage > .nacc-row > .nacc-p(style="--k:n")
     > button.nacc-strip (number, day, live dot, vertical name) + .nacc-body (.nacc-img, .nacc-shade, .nacc-copy)
   Default (no JS, phones, reduced motion, short screens): a plain list of cards, every night readable.
   Enhanced (.is-pin, set by site.js on desktop): the stage pins for about a viewport per night. Every panel is
   one rail plus one body, all the same width; the open one sits left, the rest wait as strips on the right, and
   each hands over by sliding left over the last (translateX only). The covered body is masked by the panel on top,
   so no width, flex-basis or clip-path ever animates. */
.nacc{ --strip:clamp(84px, 8vw, 124px); --n:4; position:relative; }
.nacc-row{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.nacc-strip{ display:none; }
.nacc-body{ position:relative; display:grid; border-radius:var(--r-card); overflow:hidden; background:var(--malt); color:var(--bone); isolation:isolate; }
.nacc-img{ grid-area:1 / 1; margin:0; aspect-ratio:4 / 3; min-height:100%; }
.nacc-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
/* a light scrim: dark only where the type sits (a low floor, a short head for the day line), photo clear above */
.nacc-body::before{ content:""; grid-area:1 / 1; position:relative; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(12,9,6,.82) 0%, rgba(12,9,6,.5) 26%, rgba(12,9,6,0) 52%),
             linear-gradient(180deg, rgba(12,9,6,.5) 0%, rgba(12,9,6,0) 18%); }
.nacc-shade{ display:none; }
.nacc-copy{ grid-area:1 / 1; position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(8px, 1.6svh, 14px); padding:clamp(18px, 3.4svh, 36px) clamp(20px, 2.6vw, 40px); min-width:0; }
.nacc-when{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone); }
.nacc-when b{ font-weight:400; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px currentColor; }
.nacc-flag{ display:none; align-items:center; gap:8px; min-height:28px; padding:0 12px; border-radius:var(--r-pill); background:var(--straw); color:var(--ink); }
.nacc-flag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ink); }
.nacc-p.is-tonight .nacc-flag, .nacc-p.is-next .nacc-flag{ display:inline-flex; }
.nacc-name{ font-size:clamp(56px, min(6.6vw, 12.5svh), 132px); line-height:.82; margin-top:auto; padding-top:24px; text-wrap:balance; }
.nacc-line{ font-size:clamp(16px, 2.3svh, 18px); line-height:1.45; max-width:34ch; color:var(--bone); }
.nacc-more{ display:flex; justify-content:flex-end; margin-top:40px; }
@media (max-width:900px){
  .nacc-row{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .nacc-img{ aspect-ratio:4 / 5; max-height:640px; }
  .nacc-name{ font-size:clamp(58px, 17vw, 104px); }
  .nacc-line{ font-size:16px; }
  .nacc-more{ justify-content:flex-start; }
}

/* ---- enhanced: pinned horizontal accordion ---- */
.nacc.is-pin .nacc-stage{ 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)); }
.nacc.is-pin .nacc-row{ display:block; position:relative; height:100%; overflow:hidden; border-radius:var(--r-card) 0 0 var(--r-card); }
.nacc.is-pin .nacc-p{ position:absolute; top:0; bottom:0; z-index:var(--k); display:flex; width:calc(100% - (var(--n) - 1) * var(--strip));
  left:calc(100% - (var(--n) - var(--k)) * var(--strip)); will-change:transform; }
.nacc.is-pin .nacc-p:first-child{ left:0; }
.nacc.is-pin .nacc-row::after{ content:""; position:absolute; top:0; bottom:0; right:0; z-index:9; width:1px; background:rgba(251,241,222,.34); pointer-events:none; }
/* the rail: the whole strip is the button. Number top, day, live dot, name set vertically at the foot */
.nacc.is-pin .nacc-strip{ flex:0 0 var(--strip); display:flex; flex-direction:column; align-items:center; gap:18px; padding:clamp(18px, 3svh, 28px) 0 clamp(20px, 3.4svh, 32px);
  background:var(--ruby); color:var(--bone); border:0; box-shadow:inset 1px 0 0 rgba(251,241,222,.34); cursor:pointer; font:inherit; text-align:center; }
.nacc.is-pin .nacc-p.is-open .nacc-strip{ cursor:default; }
.nacc-num{ font-family:var(--display); font-size:clamp(26px, 4svh, 34px); line-height:1; }
.nacc-sday{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.86; }
.nacc-dot{ display:none; width:10px; height:10px; border-radius:50%; background:var(--straw); box-shadow:0 0 0 5px rgba(242,224,140,.22); }
.nacc-p.is-tonight .nacc-dot, .nacc-p.is-next .nacc-dot{ display:block; }
.nacc-sname{ margin-top:auto; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--display); font-size:clamp(30px, min(3.1vw, 5.6svh), 46px); line-height:1; text-transform:uppercase; white-space:nowrap;
  transition:translate var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.nacc-strip:hover .nacc-sname, .nacc-strip:focus-visible .nacc-sname{ translate:0 -8px; }
.nacc-p.is-open .nacc-sname{ color:var(--straw); translate:none; }
.nacc-strip:focus-visible{ outline:2px solid var(--straw); outline-offset:-6px; }
.nacc.is-pin .nacc-body{ flex:1 1 auto; display:block; border-radius:0; min-width:0; }
.nacc.is-pin .nacc-img{ position:absolute; inset:0; aspect-ratio:auto; will-change:auto; }
.nacc.is-pin .nacc-body::before{ position:absolute; inset:0;
  background:linear-gradient(12deg, rgba(12,9,6,.78) 0%, rgba(12,9,6,.46) 30%, rgba(12,9,6,0) 56%),
             linear-gradient(180deg, rgba(12,9,6,.48) 0%, rgba(12,9,6,0) 20%); }
.nacc.is-pin .nacc-shade{ display:block; position:absolute; inset:0; z-index:3; background:var(--malt); opacity:0; pointer-events:none; }
.nacc.is-pin .nacc-copy{ position:absolute; inset:0; width:min(620px, 66%); }
.nacc.is-pin .nacc-when b{ display:none; }  /* the rail carries the number */
.nacc.is-pin .nacc-name{ font-size:clamp(56px, min(6.2vw, 12svh), 132px); }
.nacc.is-pin + .nacc-more{ margin-top:8px; }
@media (min-width:901px) and (max-height:680px){
  .nacc.is-pin .nacc-copy .chips{ display:none; }
  .nacc.is-pin .nacc-name{ padding-top:12px; }
}

/* ---------- staggered zig-zag with counter-drift ([data-drift] moves on scroll) ---------- */
.zig{ padding:var(--section) var(--gutter-end) var(--section) var(--gutter); }
.zig-grid{ max-width:1340px; margin:0 auto; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; }
.zig-a{ grid-column:1 / 11; grid-row:1; position:relative; z-index:2; }
.zig-h{ font-size:clamp(72px, 9.4vw, 156px); line-height:.84; margin:18px 0 26px; }
.zig-a p.t, .zig-b p.t{ max-width:34ch; font-size:18px; }
.zig-1{ grid-column:6 / 13; grid-row:1; margin-top:clamp(250px, 21vw, 330px); aspect-ratio:3/2; border-radius:var(--r-card); }
.zig-2{ grid-column:1 / 6; grid-row:2; margin-top:-230px; aspect-ratio:4/5; border-radius:var(--r-card); }
.zig-3{ grid-column:5 / 8; grid-row:2; margin-top:180px; aspect-ratio:3/4; border-radius:var(--r-card); z-index:3; box-shadow:0 40px 70px -30px rgba(0,0,0,.7); outline:8px solid var(--bone); outline-offset:-1px; }
.zig-1 img, .zig-2 img, .zig-3 img{ width:100%; height:100%; object-fit:cover; }
.zig-b{ grid-column:8 / 12; grid-row:2; align-self:end; padding-bottom:40px; margin-top:100px; }
.spec{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:30px; border-top:1.5px solid rgba(251,241,222,.5); }
.spec div{ padding:14px 12px 0 0; }
.spec div + div{ border-left:1.5px solid rgba(251,241,222,.5); padding-left:16px; }
.spec dt{ font-family:var(--display); font-size:56px; line-height:.9; text-transform:uppercase; }
.spec dd{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-top:8px; }
@media (max-width:900px){
  .zig-grid{ display:block; }
  .zig-h{ font-size:clamp(60px, 17vw, 120px); }
  .zig-1{ margin-top:36px; margin-right:calc(var(--gutter) * -1); border-radius:var(--r-card) 0 0 var(--r-card); }
  .zig-2{ width:62%; margin-top:-40px; position:relative; z-index:2; outline:6px solid var(--ruby-deep); }
  .zig-3{ width:46%; margin:-150px 0 0 auto; }
  .zig-b{ margin-top:56px; padding:0; }
  .spec dt{ font-size:40px; }

}

/* ---------- split panel: copy on the ground, photo that wipes open ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; min-height:max(100svh, 840px); }
.split-c{ padding:calc(var(--section) - 10px) 56px var(--section) var(--gutter); display:flex; flex-direction:column; gap:26px; }
.split-img{ position:relative; overflow:hidden; min-height:100%; }
.split-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
/* desktop: the whole photo at its own 3:2, pinned mid-screen while the longer text column scrolls past
   (cover-cropping it into a column taller than it is wide showed as little as 41% of the photo) */
@media (min-width:901px){
  .split-img, .split-img.settle, .split-img[data-rv="wipe"]{ overflow:clip; }
  .split-img img{ position:sticky; inset:auto; top:max(var(--nav-h), calc(var(--nav-h) + (100svh - var(--nav-h) - 33.34vw) / 2)); display:block; height:auto; aspect-ratio:3/2; }
}
.status{ display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:500; }
.status .live-dot{ box-shadow:0 0 0 4px rgba(184,172,152,.16); }
.hours{ display:grid; border-top:1px solid var(--line); max-width:560px; }
.hours li{ display:grid; grid-template-columns:1fr auto auto; gap:24px; padding:12px 0; border-bottom:1px solid var(--line); font-size:16px; }
.hours li span:last-child{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); align-self:center; }
.hours li.is-today span:first-child::after{ content:"Today"; margin-left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.find{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:560px; font-size:16px; }
.find b{ display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.find a{ text-decoration:none; background:linear-gradient(currentColor,currentColor) left bottom / 100% 1px no-repeat; }
.btn-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn-row small{ font-size:14px; color:var(--muted); }
.fn-row{ margin-top:auto; border-top:1px solid var(--line); padding-top:20px; max-width:560px; }
.fn-row ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0 10px; }
.fn-row li{ font-size:14px; line-height:1.35; color:var(--muted); }
.fn-row li b{ display:block; font-family:var(--display); font-weight:400; font-size:48px; line-height:.9; color:var(--fg); }
@media (max-width:900px){
  .split{ grid-template-columns:1fr; min-height:0; }
  .split-img{ order:-1; aspect-ratio:4/3; min-height:0; }
  .split-c{ padding:48px var(--gutter) var(--section); }
  .find{ grid-template-columns:1fr; }
  .hours li{ grid-template-columns:1fr auto; gap:2px 16px; }
  .hours li span:last-child{ grid-column:1 / -1; }
  .fn-row li b{ font-size:36px; }
}

/* ---------- section heads used on ruby and elsewhere ---------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:48px; }
.sec-head .aside{ font-size:15px; text-align:right; max-width:360px; flex:none; color:var(--muted); }
.sec-head .aside b{ display:block; font-family:var(--display); font-weight:400; font-size:36px; line-height:1; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
@media (max-width:900px){ .sec-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:28px; } .sec-head .aside{ text-align:left; } }

/* ---------- week strip: seven ruled days, the four nights set in Tanker, today marked ---------- */
.week{ display:grid; grid-template-columns:repeat(3, minmax(0,.7fr)) repeat(4, minmax(0,1.3fr)); border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); margin-bottom:56px; }
.week li{ position:relative; display:grid; align-content:space-between; gap:18px; min-height:132px; padding:16px 18px 16px 0; }
.week li + li{ border-left:1px solid var(--line); padding-left:18px; }
.wk-d{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
.week b{ font-weight:500; font-size:15px; color:var(--muted); }
.week i{ font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.week .is-night b{ font-family:var(--display); font-weight:400; font-size:clamp(28px, 2.5vw, 40px); line-height:.9; text-transform:uppercase; color:var(--fg); }
.week .is-night i{ color:var(--fg); }
.week li.is-today .wk-d{ color:var(--accent); }
.week li.is-today .wk-d::after{ content:"Today"; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent); color:var(--ground, var(--ink)); }
.week li.is-today::before{ content:""; position:absolute; left:0; right:0; top:-1.5px; height:4px; background:var(--accent); }
@media (max-width:900px){
  .week{ grid-template-columns:1fr 1fr; margin-bottom:28px; }
  .week li:not(.is-night){ display:none; }
  .week li{ min-height:0; padding:14px 12px 14px 0; gap:10px; }
  .week li + li{ border-left:0; padding-left:0; }
  .week li:nth-child(5), .week li:nth-child(7){ border-left:1px solid var(--line); padding-left:12px; }
  .week li:nth-child(n+6){ border-top:1px solid var(--line); }
}

/* ---------- 404 ---------- */
.lost{ min-height:100svh; display:grid; align-content:center; gap:28px; padding:calc(var(--nav-h) + 48px) var(--gutter) calc(var(--bar) + 48px); }
.lost .board{ max-width:560px; margin:0; }
.lost-h{ font-size:clamp(88px, 14vw, 230px); line-height:.82; }
.lost-h .l2{ display:block; color:var(--tap); }
.lost .glass{ background:rgba(251,241,222,.08); box-shadow:inset 0 0 0 1.5px var(--bone); }
.lost .glass::before{ box-shadow:inset 0 0 0 1.5px var(--bone); }
.lost .glass i::before{ box-shadow:inset 0 -1.5px 0 var(--bone); }
.lost-contact{ font-size:15px; color:var(--muted); }
.lost-contact a{ color:var(--bone); }

/* ==========================================================================
   REDUCED MOTION: the finished layout, solid grounds, nothing moves
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js [data-rise], .js [data-rv], .js [data-rv] > *, .js [data-rv] .ln > span, .js [data-rv] .glass i{ opacity:1 !important; transform:none !important; }
  .js [data-rv="wipe"]::before, .js [data-rv="wipe"]::after{ display:none; }
  .js .settle > img, .js .page-hero-media img{ transform:none !important; }
  .pour, .gauge{ display:none !important; }
  [data-drift]{ transform:none !important; }
  .vhero-video{ display:none; }
}