/* The Green Door redesign ("D · Shop-first").
   Tokens are the design system's (Brand Kit colour & type), so values here
   should only ever reference them. One stylesheet for every page. */

:root{
  --gd-green:#8EC63F; --gd-black:#000; --gd-white:#fff; --gd-forest:#476E1D;
  --gd-lime:#BFD630; --gd-smoke:#F3F5EF; --gd-ash:#2A2D27; --gd-stone:#6B7064;
  --gd-ash-line:#3E4239; --gd-rule:#E1E4DB; --gd-muted-dark:#B9BDB3; --gd-on-green-2:#1C2A0D;
  --radius-card:18px; --radius-tile:14px; --pill:999px;
  --wrap:1240px; --gutter:20px;
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tab-h:0px;
  /* Chrome above <main>: ticker 42 + header 64 + status bar 46 (header 86 on
     desktop). Changes with the media queries in "First screen" below. */
  --above:152px;
  /* The first screen under the chrome: every hero fits inside it. svh is the
     viewport with mobile browser toolbars showing, so nothing hides under them. */
  --fold:calc(100vh - var(--above) - var(--tab-h));
}
@supports (height:100svh){:root{--fold:calc(100svh - var(--above) - var(--tab-h))}}
*,*::before,*::after{box-sizing:border-box}
/* Scrolling is the browser's own: no JS scroller, no scroll-linked work.
   Anchors glide (reduced motion turns that off below) and land clear of the
   sticky header, whose height rd.js keeps in --hdr. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr,62px) + 24px)}
body{margin:0;background:#000;color:#000;font:500 16px/1.55 var(--font);padding-bottom:var(--tab-h)}
img{max-width:100%;height:auto}
a{color:var(--gd-forest)}
a:hover{color:#000}
/* Two-tone focus ring: black inside, green outside, so it reads on every
   ground the site uses (black, white, smoke and green). */
:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 8px var(--gd-green)}
h1,h2,h3,h4{margin:0}
p{margin:0}
.sr-only{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:12px;top:-60px;z-index:100;background:#000;color:#fff;border:3px solid #fff;padding:10px 16px;border-radius:var(--pill);font-weight:800}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.sec{padding:56px 0}
.sec--tight{padding:36px 0}
.sec--flush-top{padding-top:0}
.on-black{background:#000;color:#fff}
.on-white{background:#fff;color:#000}
.on-smoke{background:var(--gd-smoke);color:#000}
.on-black :is(p,li,dd) a:not(.btn){color:var(--gd-green)}
.on-black :is(p,li,dd) a:not(.btn):hover{color:var(--gd-lime)}
[hidden]{display:none!important}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.grid-auto{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,260px)),1fr))}
.grid-fit{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,300px)),1fr))}

/* The signature ground: rays from the door. CSS rather than the 3840px SVG,
   so it costs no request and scales to any section height. */
.sb-black{background:#000 repeating-conic-gradient(from 0deg at 50% 45%,var(--gd-ash) 0deg 2.5deg,#000 2.5deg 5deg)}
.sb-green{background:var(--gd-green) repeating-conic-gradient(from 0deg at 50% 45%,#9DD04F 0deg 2.5deg,var(--gd-green) 2.5deg 5deg);color:#000}
.sb-forest{background:var(--gd-forest) repeating-conic-gradient(from 0deg at 50% 45%,#527C24 0deg 2.5deg,var(--gd-forest) 2.5deg 5deg);color:#fff}

/* ---------- type ---------- */
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-forest)}
.on-black .eyebrow,.sb-black .eyebrow,.eyebrow--green{color:var(--gd-green)}
.sb-green .eyebrow,.eyebrow--ink{color:var(--gd-on-green-2)}
.display{font-size:clamp(38px,6vw,64px);line-height:.95;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.h2{font-size:28px;line-height:1.1;font-weight:800;text-transform:uppercase}
.h3{font-size:17px;line-height:1.15;font-weight:800;text-transform:uppercase}
.lede{font-size:16px;line-height:1.55;font-weight:500;max-width:560px}
.on-black .lede,.sb-black .lede,.muted-dark{color:var(--gd-muted-dark)}
.muted{color:var(--gd-stone)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.see-all{min-height:44px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--gd-forest)}
.on-black .see-all{color:var(--gd-green)}
.page-head{padding:48px 0 36px}
.page-head .wrap{display:flex;flex-direction:column;gap:12px}
.back{min-height:44px;display:inline-flex;align-items:center;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--gd-green)}
.back:hover{color:var(--gd-lime)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--pill);
     font:800 14px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
     border:3px solid transparent;transition:background-color .15s,border-color .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:56px;padding:16px 26px;font-size:15px}
.btn--sm{min-height:44px;padding:10px 18px;font-size:13px}
.btn--sticker{background:var(--gd-green);color:#000;border-color:#fff}
.btn--primary{background:var(--gd-green);color:#000;border-color:#000}
.btn--sticker:hover,.btn--primary:hover{background:var(--gd-lime);color:#000}
.btn--dark{background:#000;color:#fff;border-color:#000}
.btn--dark.edge,.on-black .btn--dark,.sb-black .btn--dark{border-color:#fff}
.btn--dark:hover{background:var(--gd-ash);color:#fff}
.btn--block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.pill-tag{display:inline-flex;align-self:flex-start;align-items:center;border-radius:var(--pill);padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:#000;color:var(--gd-green)}
.pill-tag--green{background:var(--gd-green);color:#000;font-weight:800}
/* A button drawn inside a card that is itself the link. */
.fake-btn{transition:background-color .15s;white-space:nowrap;display:inline-flex;align-self:flex-start;background:#000;color:#fff;border-radius:var(--pill);padding:14px 22px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:8px;margin:-6px -8px -2px;scrollbar-width:none}
/* Phones: the row scrolls, and the fade at its right edge says so. */
@media (max-width:899px){.chips.at-end{-webkit-mask-image:none;mask-image:none}.chips{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}}
/* Wider screens: every chip shows, wrapping to a second row if it must. */
@media (min-width:900px){.chips{flex-wrap:wrap;overflow:visible}}
.chips::-webkit-scrollbar{display:none}
.chip{min-height:44px;display:inline-flex;align-items:center;flex:none;padding:9px 14px;border-radius:var(--pill);border:2px solid #000;background:#fff;color:#000;
      font:700 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.chip:hover{color:#000;background:var(--gd-smoke)}
.chip[aria-current],.chip[aria-pressed="true"]{background:#000;color:#fff}
.chip--dark{background:var(--gd-ash);color:#fff;border-color:var(--gd-ash-line);font-weight:800;font-size:13px;letter-spacing:.04em}
.on-black .chip--dark{color:#fff}
.chip--dark:hover{background:var(--gd-ash);color:#fff;border-color:var(--gd-green)}
.chip--dark[aria-current]{background:var(--gd-green);color:#000;border-color:#fff}
.chip--static{cursor:default;border-color:var(--gd-ash-line);color:#fff;background:transparent}

/* ---------- cards ---------- */
.card{display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;text-decoration:none;transition:border-color .15s}
.card--ash{background:var(--gd-ash);border:2px solid var(--gd-ash-line);color:#fff}
.card--ash:hover{border-color:var(--gd-green);color:#fff}
.card--smoke{background:var(--gd-smoke);border:2px solid var(--gd-smoke);color:#000}
.card--smoke:hover{border-color:#000;color:#000}
.card--line{background:#fff;border:2px solid var(--gd-rule);color:#000}
.card--line:hover{border-color:#000;color:#000}
.card__media{position:relative;background:#000;overflow:hidden}
.card--smoke .card__media,.card--line .card__media{background:var(--gd-smoke)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.card__kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gd-green)}
.card--smoke .card__kicker,.card--line .card__kicker{color:var(--gd-forest)}
.card__title{font-size:17px;line-height:1.2;font-weight:800;margin:0}
.card__sub{font-size:14px;line-height:1.45;font-weight:500;color:var(--gd-muted-dark)}
.card--smoke .card__sub,.card--line .card__sub{color:var(--gd-stone)}
.card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}
.card--line .card__foot{border-top:2px solid var(--gd-rule)}
.ar-1{aspect-ratio:1}.ar-15{aspect-ratio:1.5}.ar-26{aspect-ratio:2.6}.ar-16{aspect-ratio:1.6}
.no-img{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-weight:900;text-transform:uppercase;line-height:1.05;font-size:20px}

/* logo tiles: brand logos are a mix of transparent PNGs and white JPEGs.
   multiply drops the white boxes into the smoke ground. */
.logo-tile{aspect-ratio:1.25;background:var(--gd-smoke);border-radius:var(--radius-tile);border:2px solid var(--gd-smoke);display:flex;align-items:center;justify-content:center;padding:16px;text-decoration:none;color:#000}
.logo-tile:hover{border-color:#000;color:#000}
.logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.logo-tile .no-img{font-size:15px;padding:0}
.brand-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#000}
.brand-item:hover{color:#000}
.brand-item:hover .logo-tile{border-color:#000}
.brand-item__name{font-size:13px;font-weight:700;text-align:center;line-height:1.3}

/* horizontal scroller (mobile carousels; becomes a row on desktop) */
.scroller{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.scroller>*{scroll-snap-align:start;flex:0 0 var(--item,min(80%,300px))}

/* ---------- header ---------- */
.ticker{background:var(--gd-green);border-bottom:2px solid #000}
/* Centred by auto margins rather than justify-content, so when the links
   are wider than the bar the first one stays reachable instead of hanging
   off the left edge. */
.ticker .wrap{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.ticker a:first-child{margin-left:auto}
.ticker a:last-child{margin-right:auto}
.ticker .wrap::-webkit-scrollbar{display:none}
.ticker a{min-height:40px;display:inline-flex;align-items:center;flex:none;color:#000;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker a:hover{color:#000;text-decoration:underline}
.site-header{position:sticky;top:0;z-index:50;background:#000;border-bottom:2px solid var(--gd-ash)}
.bar{display:flex;align-items:center;gap:20px;padding-top:6px;padding-bottom:6px}
.brand-link{display:flex;align-items:center;flex:none}
.brand-link img{width:72px;height:auto;display:block}
.nav{display:flex;gap:20px;align-items:center}
.nav>a,.nav summary{min-height:44px;display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:12px 2px;white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav>a:hover,.nav summary:hover,.nav [open] summary{color:var(--gd-green)}
.nav>a[aria-current]{color:var(--gd-green);border-bottom-color:var(--gd-green)}
.search{flex:1;max-width:340px;margin-left:auto;display:flex}
.search input{flex:1;min-width:0;height:42px;border-radius:var(--pill);border:2px solid var(--gd-ash-line);background:var(--gd-ash);color:#fff;padding:0 18px;font:500 14px var(--font)}
.search input::placeholder{color:var(--gd-muted-dark)}
.search input:focus{border-color:var(--gd-green);outline:none}
.bar-end{margin-left:auto;display:flex;gap:10px;align-items:center;flex:none}
.search+.bar-end{margin-left:0}
.menu-toggle{display:none;width:44px;height:44px;border-radius:var(--pill);background:var(--gd-ash);border:2px solid var(--gd-ash-line);color:#fff;font:500 20px/1 var(--font);cursor:pointer;align-items:center;justify-content:center}
.menu-toggle .x{display:none}
.menu-toggle[aria-expanded="true"] .x{display:inline}
.menu-toggle[aria-expanded="true"] .burger{display:none}
.mega{position:absolute;left:0;right:0;top:100%;background:#000;border-top:2px solid var(--gd-ash);border-bottom:2px solid var(--gd-ash)}
.mega .wrap{padding-top:28px;padding-bottom:32px;display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:40px}
.mega-cats{display:flex;flex-direction:column;gap:2px}
.mega-cats a{color:#fff;text-decoration:none;font-size:15px;font-weight:700;padding:6px 0}
.mega-cats a:hover{color:var(--gd-green)}
.mega-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mega-brands a{background:#fff;border-radius:var(--radius-tile);aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;padding:10px;border:2px solid #fff}
.mega-brands a:hover{border-color:var(--gd-green)}
.mega-brands img{max-width:100%;max-height:100%;object-fit:contain}
.deal-panel{border-radius:var(--radius-card);border:3px solid #fff;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;text-decoration:none;min-height:200px;color:#000}
.deal-panel:hover{color:#000}
.deal-panel__big{font-size:26px;line-height:1;font-weight:900;text-transform:uppercase}
/* The drawer lies over the page, from the header's bottom edge (rd.js sets
   --drawer-top when it opens) down to the tab bar. It is never part of the
   header's height: when it was, opening it grew the header, the fold code
   re-measured and shrank it, and it flickered open and shut every frame. */
.drawer{display:none;position:fixed;left:0;right:0;top:var(--drawer-top,64px);bottom:var(--tab-h);max-width:none;margin:0;
  padding-left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#000;overflow-y:auto;overscroll-behavior:contain}
.drawer.open{display:flex;flex-direction:column;gap:12px}
.drawer .search{max-width:none;margin:0}
.drawer .search input{height:46px;font-size:16px}
.drawer-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-cats a{min-height:44px;display:flex;align-items:center;color:#fff;text-decoration:none;font-weight:800;font-size:13px;text-transform:uppercase;padding:14px;border-radius:var(--radius-tile);background:var(--gd-ash);border:2px solid var(--gd-ash-line)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{color:#fff;text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:14px 2px;border-bottom:1px solid var(--gd-ash)}
.drawer-nav a[aria-current]{color:var(--gd-green)}
.status-bar{background:#000;border-bottom:2px solid var(--gd-ash);color:#fff}
.status-bar .wrap{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;font-size:13px;font-weight:700}
.status{display:flex;align-items:center;gap:8px;min-height:44px}
.status strong{font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.dot{position:relative;width:9px;height:9px;border-radius:99px;background:var(--gd-stone);flex:none}
.is-open .dot{background:var(--gd-green)}
.status-bar a{min-height:44px;display:inline-flex;align-items:center;color:var(--gd-green);text-decoration:none;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.tabbar{display:none}

/* ---------- footer ---------- */
.site-footer{background:#000;color:#fff;border-top:2px solid var(--gd-ash)}
.foot-grid{padding-top:48px;padding-bottom:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
@media (max-width:719px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px 16px}.foot-grid>:first-child{grid-column:1/-1}}
.foot-grid p{font-size:15px;line-height:1.55}
.foot-grid .foot-title{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-green);margin:0 0 12px}
.foot-grid a{color:#fff;text-decoration:none;font-size:15px;display:flex;align-items:center;min-height:44px}
.foot-grid a:hover{color:var(--gd-green)}
.foot-legal{padding-top:18px;padding-bottom:32px;border-top:1px solid var(--gd-ash);font-size:12px;color:var(--gd-muted-dark)}

/* ---------- home ---------- */
.arrow{color:var(--gd-green);font-weight:900;font-size:22px}
.hours-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--gd-ash-line);font-size:15px}
.hours-row.today{font-weight:800;color:var(--gd-green)}
.faq{border-top:2px solid #000}
.faq details{border-bottom:1px solid var(--gd-rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:17px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover::after{background:var(--gd-green)}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:var(--pill);background:var(--gd-smoke);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.faq details[open] summary::after{content:"\2212";background:var(--gd-green)}
.faq details p{margin:0 0 20px;max-width:680px}

/* ---------- join (newsletter) ---------- */
.join{padding:64px 0;text-align:center}
.join .wrap{max-width:600px;display:flex;flex-direction:column;gap:14px;align-items:center}
.join h2{font-size:clamp(32px,5vw,44px);line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.join .w-form{width:100%;margin-top:6px}
.join form{display:flex;flex-direction:column;gap:12px;text-align:left}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.field input{width:100%;height:54px;border-radius:var(--pill);border:3px solid #000;background:#fff;color:#000;padding:0 22px;font:700 17px var(--font)}
.field input:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px #fff,0 0 0 6px #000}
.join input[type=submit]{-webkit-appearance:none;appearance:none}
.form-note{font-size:13px;line-height:1.5;color:var(--gd-on-green-2);text-align:center}
.w-form-done,.w-form-fail{display:none}
.w-form-done{font-size:28px;font-weight:900;text-transform:uppercase;margin-top:10px}
.w-form-done:focus{outline:none}
.w-form-fail{margin-top:10px;font-weight:700;background:#000;color:#fff;border:2px solid #fff;border-radius:var(--radius-tile);padding:12px 16px}
.w-form-fail::before{content:"! ";color:var(--gd-green);font-weight:900}
.btn:disabled,input.btn:disabled{opacity:.6;cursor:progress}
.w-form .cf-turnstile{margin-top:10px}

/* ---------- deals ---------- */
.today-card{border-radius:var(--radius-card);border:3px solid #fff;padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;align-items:center;text-decoration:none;color:#000}
.today-card:hover{color:#000}
.today-card:hover .fake-btn,.shop-callout:hover .fake-btn,.aside-cta:hover .fake-btn{background:var(--gd-forest)}
.today-card__text{display:flex;flex-direction:column;gap:14px}
.today-card__big{font-size:clamp(36px,5vw,64px);line-height:.92;font-weight:900;text-transform:uppercase;text-wrap:balance}
.today-card__desc{font-size:16px;line-height:1.5;font-weight:700;color:var(--gd-on-green-2)}
.today-card__photo{width:100%;max-width:360px;justify-self:center;background:#fff;border-radius:var(--radius-tile);border:3px solid #000;aspect-ratio:1.3;display:flex;align-items:center;justify-content:center;padding:16px}
.today-card__photo img{max-width:100%;max-height:100%;object-fit:contain}
.day-card{border-radius:var(--radius-card);background:var(--gd-ash);border:2px solid var(--gd-ash-line);padding:20px;display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:#fff}
.day-card:hover{border-color:var(--gd-green);color:#fff}
.day-card__text{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.day-card__big{font-size:22px;line-height:1;font-weight:900;text-transform:uppercase}
.day-card__desc{font-size:14px;line-height:1.45;color:var(--gd-muted-dark)}
.day-card__photo{align-self:center;flex:none;width:92px;height:92px;border-radius:var(--radius-tile);background:#fff;display:flex;align-items:center;justify-content:center;padding:8px}
.day-card__photo img{max-width:100%;max-height:100%;object-fit:contain}
.fine{font-size:13px;line-height:1.5;color:var(--gd-stone)}

/* ---------- brands index ---------- */
.big-search{height:54px;border-radius:var(--pill);border:3px solid #000;padding:0 22px;font:700 17px var(--font);width:100%;max-width:560px;background:#fff;color:#000}
.big-search::placeholder{color:var(--gd-stone)}
.letters{display:flex;flex-wrap:wrap;gap:2px}
.letter{width:44px;height:44px;border-radius:var(--pill);border:0;cursor:pointer;font:800 13px/1 var(--font);background:transparent;color:#000}
.letter:hover{background:var(--gd-smoke)}
.letter[aria-pressed="true"]{background:var(--gd-green)}
.letter:disabled{color:#C9CDC3;cursor:default;background:transparent}
.brand-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.brand-grid.is-limited>.brand-item:nth-child(n+49){display:none}

/* ---------- brand detail ---------- */
.banner{border-radius:var(--radius-card);overflow:hidden;border:2px solid var(--gd-ash-line);aspect-ratio:3.6;background:var(--gd-ash)}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
/* No banner: the sunburst, not a grey box (it has to come after .banner). */
.banner--empty{aspect-ratio:auto;height:120px;background:#000 repeating-conic-gradient(from 0deg at 50% 45%,var(--gd-ash) 0deg 2.5deg,#000 2.5deg 5deg)}
/* rd.js hides a banner the fold would squeeze to a strip. */
.banner.is-gone{display:none}
.fold-media:has(.banner.is-gone)+section .brand-hero{margin-top:12px}
.brand-hero{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-top:-44px;padding:0 clamp(0px,2vw,24px)}
.brand-id{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.brand-logo{width:120px;height:120px;border-radius:var(--radius-card);background:#fff;border:3px solid #000;display:flex;align-items:center;justify-content:center;padding:14px;flex:none;position:relative}
.brand-logo img{max-width:100%;max-height:100%;object-fit:contain}
.brand-id__text{display:flex;flex-direction:column;gap:10px;padding-top:56px}
@media (max-width:719px){.brand-id__text{padding-top:0;width:100%}}
.brand-id h1{font-size:clamp(36px,5vw,56px);line-height:.95;font-weight:900;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.brand-logo .no-img{color:#000;font-size:34px;padding:0}
@media (min-width:720px){.brand-id{flex-wrap:nowrap}.brand-id__text{min-width:0}}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;min-height:44px;border:2px solid var(--gd-ash-line);color:#fff;border-radius:var(--pill);padding:5px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
a.tag:hover{border-color:var(--gd-green);color:#fff}
.shop-callout{border-radius:var(--radius-card);padding:28px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;border:3px solid #000;color:#000;text-decoration:none}
.shop-callout:hover{color:#000}
.shop-callout__text{display:flex;flex-direction:column;gap:8px;max-width:640px}
.shop-callout__big{font-size:clamp(24px,3vw,32px);line-height:1;font-weight:900;text-transform:uppercase}
.two-col{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
@media (max-width:899px){.two-col{grid-template-columns:minmax(0,1fr)}}

/* ---------- prose (all CMS rich text) ---------- */
/* 620px holds lines near 75 characters at 17px. */
.prose{font-size:17px;line-height:1.65;font-weight:500;color:#000;max-width:620px;min-width:0;overflow-wrap:break-word}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose h2{font-size:clamp(22px,3vw,28px);line-height:1.1;font-weight:800;text-transform:uppercase;margin:40px 0 14px}
.prose h3{font-size:21px;line-height:1.25;font-weight:800;margin:36px 0 10px}
.prose h4{font-size:14px;line-height:1.3;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gd-forest);margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose strong{font-weight:800}
.prose a{color:var(--gd-forest);font-weight:700}
.prose a:hover{color:#000}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--gd-green);font-weight:700}
.prose figure{margin:24px 0}
.prose figure>div{max-width:100%!important;width:auto!important}
.prose img{display:block;max-width:100%;height:auto;border-radius:var(--radius-tile)}
.prose figcaption{font-size:13px;color:var(--gd-stone);margin-top:8px}
.prose iframe{max-width:100%}
.prose iframe[src*="youtube"],.prose iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}
/* Wide tables scroll inside themselves rather than widening the page. */
.prose table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px;display:block;overflow-x:auto}
.prose td,.prose th{border-bottom:1px solid var(--gd-rule);padding:8px;text-align:left}

/* ---------- article ---------- */
.article-head{padding:40px 0 0}
.article-head .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px;align-items:end}
.article-head__text{display:flex;flex-direction:column;gap:14px;padding-bottom:36px}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a{min-height:44px;display:inline-flex;align-items:center;color:var(--gd-green);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.crumbs .sep{color:var(--gd-muted-dark)}
a.pill-tag--green:hover{color:#000;background:var(--gd-lime)}
.article-head h1{font-size:clamp(36px,5.5vw,60px);line-height:.95;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.article-head__img{border-radius:var(--radius-card) var(--radius-card) 0 0;overflow:hidden;aspect-ratio:1.6;background:var(--gd-ash)}
.article-head__img img{width:100%;height:100%;object-fit:cover;display:block}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px}
.aside-cta{border-radius:var(--radius-card);border:3px solid #000;padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#000}
.aside-cta:hover{color:#000}
.aside-cta__big{font-size:24px;line-height:1;font-weight:900;text-transform:uppercase}
.topics{border-radius:var(--radius-card);background:var(--gd-smoke);padding:20px;display:flex;flex-direction:column}
.topics .eyebrow{margin-bottom:8px}
.topics a:not(.btn){display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--gd-rule);text-decoration:none;color:#000;font-size:14px}
.topics a:not(.btn):last-child{border-bottom:0}
.topics a:not(.btn):hover{color:var(--gd-forest)}
.topics a[aria-current]{font-weight:800}
.topics a span:last-child{color:var(--gd-stone)}

/* ---------- events ---------- */
.next-event{border-radius:var(--radius-card);overflow:hidden;border:3px solid #fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));text-decoration:none;background:var(--gd-ash);color:#fff}
.next-event:hover{color:#fff}
.next-event__img{aspect-ratio:1;background:#000;position:relative}
.next-event__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.next-event__text{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.next-event__big{font-size:clamp(30px,4vw,48px);line-height:.95;font-weight:900;text-transform:uppercase}
.event-facts{display:flex;flex-direction:column;gap:10px;background:var(--gd-ash);border:2px solid var(--gd-ash-line);border-radius:var(--radius-card);padding:24px;color:#fff}
.event-facts dt{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-green)}
.event-facts dd{margin:0 0 8px;font-weight:700}
.rsvp .w-form{width:100%}
.rsvp form{display:flex;flex-direction:column;gap:12px}
.rsvp .field input{border-color:#000}

/* ---------- menu shell ---------- */
.menu-cats{position:sticky;top:var(--hdr,62px);z-index:20;background:#000;border-bottom:2px solid var(--gd-ash)}
.menu-cats .chips{padding:12px 40px 12px 8px;margin:0 -8px}
@media (min-width:900px){.menu-cats .chips{padding-right:8px}}
.menu-frame{position:relative;flex:1 1 auto;min-height:0;width:100%;display:block;border:0;background:transparent}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .nav,.bar>.search{display:none}
  .search+.bar-end{margin-left:auto}
  .menu-toggle{display:inline-flex}
  .brand-link img{width:50px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#000;border-top:2px solid var(--gd-ash);padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex;gap:2px;align-items:center}
  .tabbar a:not(.btn){flex:1;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .tabbar .btn{padding:10px 14px;font-size:12px}
  .tabbar a[aria-current]{color:var(--gd-green)}
  :root{--tab-h:calc(66px + env(safe-area-inset-bottom,0px))}
  .status-bar .hide-m{display:none}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media (max-width:719px){
  :root{--gutter:16px}
  .ticker .wrap{justify-content:flex-start}
  .sec{padding:44px 0}
  .banner{aspect-ratio:1.8}
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* home H1: the store name stays the page's one H1, as it is today */
.crumbs a.pill-tag{color:#000;min-height:0;padding:7px 14px}
.crumbs a.pill-tag:hover{color:#000}

/* Category and house-line art is product photography on white, as the shop
   shows it — contain, never crop, so packaging is always legible. */
.house-card{display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;border:2px solid var(--gd-ash-line);background:var(--gd-ash);text-decoration:none;color:#fff}
.house-card:hover{border-color:var(--gd-green);color:#fff}
.house-card__img{aspect-ratio:1;position:relative}
.house-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.house-card__label{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.house-card__name{font-size:16px;font-weight:900;text-transform:uppercase;line-height:1.1}

/* ---------- home (Home Redesign D, Oct 4 update) ---------- */
.stack-xs{display:flex;flex-direction:column;gap:8px}
.stack-lg{display:flex;flex-direction:column;gap:24px}
.home-sec{padding:64px 0}
.h-display{font-size:clamp(32px,4.2vw,52px);line-height:.95;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home-head--center{justify-content:center;text-align:center;margin-bottom:28px}
.home-head--center .stack-xs{align-items:center}
.on-black .see-all{color:var(--gd-green)}
.on-black .see-all:hover{color:var(--gd-lime)}
.pill-tag--green{background:var(--gd-green);color:#000;border:2px solid #000;min-height:36px}
.arrow-dot{flex:none;width:40px;height:40px;border-radius:var(--pill);background:var(--gd-green);border:2px solid #fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.arrow-dot--sm{width:36px;height:36px;font-size:18px;border-color:#000}
.center-row{display:flex;justify-content:center;padding:32px var(--gutter) 0}
.lift{transition:transform .3s,border-color .3s}
.lift:hover{transform:translateY(-6px)}

/* hero */
.hero{position:relative;min-height:var(--fold);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:#fff}
.hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:gd-ken 2.6s cubic-bezier(.2,.7,.2,1) both}
.hero__burst{position:absolute;left:50%;top:60%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;will-change:transform;mix-blend-mode:screen;opacity:.5;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--gd-ash) 0deg 2.5deg,#000 2.5deg 5deg);animation:gd-spin 180s linear infinite}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 62%,#000 94%)}
.hero__inner{position:relative;width:100%;padding-top:clamp(120px,22vh,220px);padding-bottom:48px;display:flex;flex-direction:column;gap:22px}
.hero__tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero__h1{font-size:clamp(52px,11.5vw,156px);line-height:.88;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;text-wrap:balance}
.hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.hero__lede{max-width:520px;font-size:clamp(17px,1.6vw,21px);line-height:1.45;font-weight:700;text-wrap:pretty}
.status--glass{min-height:36px;background:rgba(0,0,0,.8);border:2px solid var(--gd-ash-line);border-radius:var(--pill);padding:0 14px 0 12px;font-size:12px}
.status--glass strong{letter-spacing:.08em}
.status__detail{color:var(--gd-muted-dark);font-weight:700}
/* The pulse is a ring that scales and fades: transform and opacity only, so
   it runs on the compositor instead of repainting every frame. */
.is-open .dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gd-green);animation:gd-pulse 2.4s ease-out infinite}

/* deals rail */
.rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:24px max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter))) 16px;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.day-deal{flex:0 0 clamp(220px,20vw,280px);scroll-snap-align:start;border-radius:var(--radius-card);background:var(--gd-ash);border:2px solid var(--gd-ash-line);padding:16px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:#fff;transition:transform .3s,border-color .3s,opacity .8s cubic-bezier(.2,.7,.2,1)}
.day-deal:hover{transform:translateY(-6px);border-color:var(--gd-green);color:#fff}
.day-deal--today{background:var(--gd-green) repeating-conic-gradient(from 0deg at 50% 45%,#9DD04F 0deg 2.5deg,var(--gd-green) 2.5deg 5deg);border:3px solid #fff;color:#000}
.day-deal--today:hover{color:#000;border-color:#fff}
.day-deal__top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:26px}
.day-deal__label{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-green)}
.day-deal--today .day-deal__label{color:var(--gd-on-green-2)}
.live{background:#000;color:var(--gd-green);border-radius:var(--pill);padding:5px 10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.day-deal__photo{aspect-ratio:1;background:#fff;border-radius:var(--radius-tile);border:3px solid var(--gd-ash-line);display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.day-deal--today .day-deal__photo{border-color:#000}
.day-deal__photo img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.day-deal:hover .day-deal__photo img{transform:scale(1.05)}
.day-deal__big{font-size:clamp(20px,1.7vw,24px);line-height:1;font-weight:900;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.cat-tile{display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;background:#fff;border:3px solid #000;text-decoration:none;color:#fff;transition:transform .3s,border-color .3s,opacity .8s cubic-bezier(.2,.7,.2,1)}
.cat-tile:hover{transform:translateY(-6px);border-color:var(--gd-green);color:#fff}
.cat-tile__img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff}
.cat-tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cat-tile:hover .cat-tile__img img{transform:scale(1.04)}
.cat-tile__label{background:#000;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cat-tile__name{font-size:clamp(24px,2.4vw,32px);line-height:.95;font-weight:900;text-transform:uppercase}
.cat-tile__note{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-green)}
.cat-tile:hover .arrow-dot,.learn-card:hover .arrow-dot{transform:translateX(4px)}

/* house line */
.house-card{display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;border:3px solid #000;background:#000;text-decoration:none;color:#fff;transition:transform .3s,border-color .3s,opacity .8s cubic-bezier(.2,.7,.2,1)}
.house-card:hover{transform:translateY(-6px);border-color:var(--gd-green);color:#fff}
.house-card .card__kicker{color:var(--gd-green)}
.scroller.house{--item:min(64%,260px);padding:6px 0 10px;scrollbar-width:none}
.scroller.house::-webkit-scrollbar{display:none}
@media (min-width:900px){.scroller.house{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible}}

/* marquees */
.marquee{overflow:hidden;display:flex;width:100%}
.marquee__track{display:flex;gap:12px;padding-right:12px;width:max-content;will-change:transform;animation:gd-marquee 55s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee--b .marquee__track{animation-duration:65s;animation-direction:reverse}
.marquee--press .marquee__track{gap:56px;padding-right:56px;align-items:center;animation-duration:40s}
.marquee--press img{flex:none;height:40px;width:auto;object-fit:contain}
.brand-banner{flex:none;width:clamp(280px,34vw,460px);aspect-ratio:2.4;position:relative;background:#000;border-radius:var(--radius-card);border:3px solid #000;overflow:hidden;display:flex;align-items:flex-end;padding:14px;text-decoration:none;transition:border-color .3s,transform .3s}
.brand-banner:hover{border-color:var(--gd-green);transform:translateY(-4px)}
.brand-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.brand-banner span{position:relative;background:#fff;color:#000;border-radius:var(--pill);padding:7px 14px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.brand-logo-tile{flex:none;width:clamp(150px,16vw,200px);aspect-ratio:1.6;background:var(--gd-smoke);border-radius:var(--radius-tile);border:2px solid var(--gd-smoke);display:flex;align-items:center;justify-content:center;padding:18px;transition:border-color .3s,transform .3s}
.brand-logo-tile:hover{border-color:#000;transform:translateY(-4px)}
.brand-logo-tile img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.press-sec{padding:40px 0;overflow:hidden}

/* visit */
.visit{border-top:3px solid #000;border-bottom:3px solid #000;padding:64px 0}
.visit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:28px;align-items:center}
.visit-photo{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;border:3px solid #000;background:#000}
.visit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit__text{display:flex;flex-direction:column;gap:22px}
.visit__big{font-size:clamp(38px,5vw,68px);line-height:.92;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.visit__addr{font-size:17px;line-height:1.5;font-weight:700;max-width:520px}
.status--pill{align-self:flex-start;background:#000;color:#fff;border-radius:var(--pill);padding:0 18px 0 14px;font-size:14px}
.hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:6px 20px;max-width:560px}
.hours-row span:last-child{white-space:nowrap}
.visit .hours-row{border-bottom:2px solid rgba(0,0,0,.18);padding:8px 0;font-size:14px;font-weight:700}
.visit .hours-row.today{border-color:#000;font-weight:900;color:#000}
button.text-link{background:none;border:0;cursor:pointer;font-family:inherit}
.text-link:hover{color:#000;text-decoration-thickness:3px}
.text-link{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#000;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* learn */
.learn-card{background:var(--gd-smoke);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;gap:40px;justify-content:space-between;min-height:220px;text-decoration:none;border:2px solid var(--gd-smoke);color:#000;transition:transform .3s,border-color .3s,opacity .8s cubic-bezier(.2,.7,.2,1)}
.learn-card:hover{border-color:#000;color:#000;transform:translateY(-6px)}
.learn-card__top{display:flex;justify-content:space-between;align-items:center}
.learn-card h3{font-size:clamp(26px,2.6vw,34px);line-height:.95;font-weight:900;text-transform:uppercase}

/* join on black */
.join.sb-black{padding:80px 0}
.join.sb-black h2{font-size:clamp(30px,9vw,60px);line-height:.92;letter-spacing:-.02em;text-wrap:balance}
.join.sb-black>.wrap>p{color:var(--gd-muted-dark);font-size:17px;max-width:460px}
.join.sb-black .field label{color:#fff}
.join.sb-black .field input{border-color:#fff}
.join.sb-black .form-note{color:var(--gd-muted-dark)}
.join.sb-black .w-form-done{color:var(--gd-green);font-size:24px}

/* motion: entrance + scroll reveal. Content is visible without JS; rd.js
   adds .anim to <html> before reveals apply, and never with reduced motion. */
@keyframes gd-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes gd-ken{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes gd-spin{to{transform:rotate(1turn)}}
@keyframes gd-marquee{to{transform:translateX(-50%)}}
@keyframes gd-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}
.rise{animation:gd-rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.anim [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-color .3s;transition-delay:var(--d,0s)}
.anim [data-reveal].in{opacity:1;transform:none}
.anim [data-reveal].in:hover{transition-delay:0s}
/* rd.js sets .is-off on looping scenes (hero, marquees, menu loader) while
   they are off screen, so nothing animates where nobody can see it. */
.is-off,.is-off *{animation-play-state:paused!important}
.anim .cat-tile[data-reveal].in:hover,.anim .day-deal[data-reveal].in:hover,.anim .house-card[data-reveal].in:hover,.anim .learn-card[data-reveal].in:hover,.anim .lift[data-reveal].in:hover{transform:translateY(-6px)}

@media (max-width:719px){
  .home-sec{padding:48px 0}
  .visit{padding:48px 0}
  .day-deal{flex-basis:72vw}
  .hero__foot .btn-row{width:100%}
  .hero__foot .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .anim [data-reveal]{opacity:1;transform:none}
}

/* ---------- accessory pages (Accessory Pages D, Oct 5) ---------- */
/* 404, 500, maintenance: one idea per page, centred in the viewport. */
.state{min-height:min(78vh,760px);display:flex;align-items:center;padding:56px 0}
.state--full{min-height:100vh;min-height:100svh}
.state__center{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.state__split{width:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.state__text{display:flex;flex-direction:column;gap:22px}
.state__big{font-size:clamp(64px,10vw,128px);line-height:.88;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.state__big--md{font-size:clamp(56px,8vw,104px);line-height:.9}
.state__lede{max-width:540px;font-size:clamp(16px,1.6vw,19px);line-height:1.45;font-weight:700;color:#fff;text-wrap:pretty}
.state__btns{justify-content:center}
.state__logo{width:120px;height:auto}
.state__legal{font-size:12px;line-height:1.5;color:var(--gd-muted-dark)}
.sb-forest .state__legal{color:#fff}
/* The maintenance page has no tab bar to leave room for. */
body:has(.state--full){padding-bottom:0;background:var(--gd-forest)}
.state-search{width:100%;max-width:460px;display:flex;margin-top:6px}
.state-search input{flex:1;min-width:0;height:48px;border-radius:var(--pill);border:2px solid var(--gd-ash-line);background:var(--gd-ash);color:#fff;padding:0 20px;font:500 16px var(--font)}
.state-search input::placeholder{color:var(--gd-muted-dark)}
.state-search input:focus{outline:none;border-color:var(--gd-green)}
.state-links{display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:center}
.state-links a{min-height:44px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-green);text-decoration:none}
.state-links a:hover{color:var(--gd-lime)}
.btn--dark.edge:hover{border-color:var(--gd-green)}
.store-fine{border-radius:var(--radius-card);border:3px solid #fff;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:300px;justify-content:flex-end;color:#000}
.store-fine__big{font-size:clamp(28px,3.4vw,44px);line-height:.95;font-weight:900;text-transform:uppercase}
.store-fine__addr{font-size:16px;font-weight:700}
.store-fine a{min-height:44px;display:inline-flex;align-items:center;align-self:flex-start;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#000;text-decoration:none}
@media (max-width:719px){
  .state{padding:40px 0;align-items:flex-start}
  .state__split{grid-template-columns:minmax(0,1fr);gap:24px}
  .state__btns,.state__text .btn-row{flex-direction:column;width:100%}
  .state__btns .btn,.state__text .btn-row .btn{width:100%}
  .store-fine{min-height:0;padding:18px;gap:8px}
}

/* Age gate, after the design system's AgeGate: the storefront dimmed behind a
   black-sunburst card. Homepage overlay and the /menu gate share it. */
.gate,.age-overlay{position:relative;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:#000;overflow:hidden}
.gate{min-height:min(84vh,820px)}
.age-overlay{position:fixed;inset:0;z-index:200;display:none}
.age-overlay.show{display:flex}
.age-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.35}
.age-card{position:relative;width:100%;max-width:440px;border-radius:var(--radius-card);border:2px solid var(--gd-ash-line);padding:32px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;color:#fff}
.age-card img{width:150px;height:auto}
.age-card h1,.age-card h2{font-size:28px;line-height:1.1;font-weight:900;text-transform:uppercase}
.age-card>p{font-size:16px}
.age-card .fine{font-size:12px;color:var(--gd-muted-dark)}
.age-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}
.age-btns .btn{flex:1 1 150px}
.age-error{background:var(--gd-ash);border:2px solid var(--gd-green);border-radius:var(--radius-tile);padding:10px 14px;font-size:14px;font-weight:700}

/* /menu while the live menu loads: a skeleton of the shelf. The iframe's
   onload adds .is-loaded, which retires it. */
/* The embed runs the full width of the screen on every device: the shop
   inside it lays itself out, so the page column would only narrow it. */
.menu-sec{padding:0 0 32px}
.menu-sec .fine{margin-top:16px}
.menu-stage{position:relative;overflow:hidden;background:#000;border-bottom:2px solid var(--gd-ash-line);transition:background .3s,border-color .3s}
.menu-stage.is-loaded{background:#fff;border-color:var(--gd-rule)}
.menu-stage.is-loaded .menu-loading{display:none}
.menu-loading{position:absolute;inset:0;max-width:var(--wrap);margin:0 auto;padding:28px var(--gutter);display:flex;flex-direction:column;gap:22px;overflow:hidden;color:#fff}
.menu-loading__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.menu-loading__big{font-size:clamp(34px,4.2vw,52px);line-height:.95;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.menu-loading__note{display:flex;align-items:center;gap:12px;color:var(--gd-muted-dark);font-size:13px;font-weight:700}
.spinner{flex:none;width:22px;height:22px;border-radius:var(--pill);border:3px solid var(--gd-ash-line);border-top-color:var(--gd-green);animation:gd-spin .9s linear infinite}
.skel{background:var(--gd-ash);border:2px solid var(--gd-ash-line);animation:gd-skel 1.6s ease-in-out var(--d,0s) infinite}
.skel-tabs{display:flex;gap:8px;overflow:hidden}
.skel-tabs .skel{flex:none;height:40px;border-radius:var(--pill)}
.skel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.skel-card{border-radius:var(--radius-card);padding:12px;display:flex;flex-direction:column;gap:12px}
.skel-card i{display:block;aspect-ratio:1;border-radius:var(--radius-tile);background:var(--gd-ash-line)}
.skel-card b,.skel-card u{display:block;height:12px;border-radius:var(--pill);background:var(--gd-ash-line)}
.skel-card div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.skel-card u{width:36px;height:36px}
@keyframes gd-skel{0%,100%{opacity:1}50%{opacity:.4}}
@media (max-width:719px){.skel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skel-card{padding:10px;gap:10px}}

/* Brands search with no results */
.empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:760px;padding:24px 0 8px}
.empty-state__big{font-size:clamp(38px,6vw,64px);line-height:.95;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.empty-state__lede{font-size:clamp(16px,1.6vw,18px);line-height:1.5;color:var(--gd-stone);margin-bottom:10px}
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
a.chip--link{text-decoration:none}
a.chip--link:hover{background:var(--gd-green);color:#000}

/* ---------- First screen (Oct 5) ----------
   Every page's hero — everything from the top of <main> to its last button —
   fits inside var(--fold), the screen under the header and above the mobile
   tab bar, on every screen size; the rest of the page starts below it. Type
   and spacing in heroes shrink with the screen's height as well as its width
   (min(width rule, height rule)), so tall screens keep the original sizes. */
@media (min-width:1100px){:root{--above:174px}}
/* Short phones (SE, mini) and phones on their side: the promo ticker only
   repeats links the page already has, so it goes first. */
@media (max-height:719px) and (max-width:1099px){
  :root{--above:110px}
  .ticker{display:none}
}
/* Phones on their side: the header alone, no status bar or tab bar (the
   header keeps "Order online" and the menu). */
@media (max-height:520px){
  :root{--above:64px;--tab-h:0px}
  .ticker,.status-bar,.tabbar{display:none!important}
}
@media (max-height:520px) and (min-width:1100px){:root{--above:86px}}
/* The home hero carries its own open/closed pill, so on a short phone the
   status bar above it is the next thing to go. */
@media (max-height:719px) and (max-width:1099px){
  :root:has(.hero){--above:64px}
  body:has(.hero) .status-bar{display:none}
}
/* The status line stays one line (rd.js writes "opens 9am tomorrow" into it
   after load, which used to wrap and push every hero down). */
@media (max-width:719px){
  .status-bar .wrap{flex-wrap:nowrap}
  .status{min-width:0}
  .status strong{flex:none}
  .status [data-status-detail]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .status-bar a{flex:none;margin-left:auto}
}

/* home */
.hero__inner{padding-top:clamp(16px,4svh,48px);padding-bottom:clamp(16px,4.5svh,48px);gap:clamp(10px,2.4svh,22px)}
.hero__h1{font-size:min(clamp(52px,11.5vw,156px),max(34px,14svh))}
.hero__lede{font-size:clamp(14px,min(4.4vw,2.4svh),21px)}
.hero__foot{gap:clamp(12px,2.4svh,20px) 40px}

/* page heads (deals, brands, learn, glossary, events, menu) */
.page-head{padding:clamp(20px,6svh,48px) 0 clamp(18px,4.5svh,36px)}
.page-head .wrap{gap:clamp(8px,1.5svh,12px)}
.page-head .display{font-size:min(clamp(38px,6vw,64px),max(28px,8svh))}

/* articles and glossary terms: the photo gives up height before the title does */
.article-head{padding-top:clamp(16px,5svh,40px)}
.article-head .wrap{gap:clamp(12px,3svh,28px)}
.article-head__text{gap:clamp(8px,1.8svh,14px);padding-bottom:clamp(12px,4svh,36px)}
.article-head h1{font-size:min(clamp(36px,5.5vw,60px),max(26px,6.5svh))}
.article-head__img{max-height:calc(var(--fold) - 2 * clamp(16px,5svh,40px))}
/* One column until the head's grid can fit two (908px). */
@media (max-width:907px){.article-head__img{aspect-ratio:auto;height:clamp(96px,calc(var(--fold) - var(--fold-text,330px)),60vw)}}

/* brand and event detail: the banner shrinks so the name and buttons fit */
.fold-media{padding-top:clamp(8px,2.5svh,20px)!important}
.fold-media .stack{gap:clamp(4px,1.5svh,16px)!important}
.fold-media .banner{max-height:max(64px,calc(var(--fold) - var(--fold-text)))}
.fold-media--brand{--fold-text:260px}
.fold-media--event{--fold-text:300px}
.fold-media--event+.sec{padding-top:clamp(14px,3.5svh,28px)!important}
.fold-media--event+.sec .stack{gap:clamp(10px,2svh,20px)}
.fold-media--event+.sec .display{font-size:min(clamp(38px,6vw,64px),max(26px,6.5svh))}
.brand-hero{gap:clamp(12px,2.4svh,20px)}
.brand-id h1{font-size:min(clamp(36px,5vw,56px),max(26px,6.5svh))}
@media (max-width:719px){
  .fold-media--brand{--fold-text:280px}
  .fold-media--event{--fold-text:320px}
  .brand-hero{margin-top:-32px}
  .brand-logo{width:84px;height:84px;padding:10px}
  .brand-hero .btn-row .btn{min-height:44px;padding:10px 18px;font-size:13px}
}

/* 404, 500 and the /menu age gate fill the first screen, centred in it */
.state{min-height:var(--fold);padding:clamp(16px,4svh,56px) 0}
.state--full{min-height:100vh;min-height:100svh}
.state__center,.state__text{gap:clamp(10px,2.2svh,22px)}
.state__big{font-size:min(clamp(64px,10vw,128px),max(38px,10svh))}
.state__big--md{font-size:min(clamp(56px,8vw,104px),max(34px,9svh))}
.state__lede{font-size:min(clamp(16px,1.6vw,19px),max(15px,2.4svh))}
.gate{min-height:var(--fold);padding:clamp(12px,3svh,32px) 16px}
.age-overlay{overflow-y:auto}
.age-card{padding:clamp(16px,3.5svh,32px) 28px;gap:clamp(8px,1.8svh,16px)}
.age-card img{width:clamp(56px,16svh,150px)}
@media (max-width:719px){.state{align-items:center}}
/* Short screens: smaller buttons and fields, side by side where they fit */
@media (max-height:760px) and (max-width:1099px){
  .hero .btn--lg,.state .btn--lg,.age-card .btn--lg{min-height:48px;padding:12px 20px;font-size:14px}
  .state-search input{height:44px}
  .store-fine{min-height:0;padding:18px;gap:8px}
}
@media (max-height:860px) and (max-width:719px){
  .state__btns,.state__text .btn-row{flex-direction:row}
  .state__btns .btn,.state__text .btn-row .btn{width:auto;flex:1 1 auto}
  .state-links{gap:0 18px}
  .state-links a{letter-spacing:.12em}
}
/* Phones. Long titles (over 40 characters, flagged by the server) step down
   a size so a 60-character event name doesn't take the whole screen. */
@media (max-width:719px){
  .article-head h1.title--long,.fold-media--event+.sec .display.title--long{font-size:clamp(24px,7vw,30px);line-height:1}
  .state__btns .btn,.state__text .btn-row .btn{padding-left:14px;padding-right:14px}
}
@media (max-height:860px) and (max-width:719px){
  .state__btns .btn,.state__text .btn-row .btn{font-size:13px}
  .state-links{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;width:100%}
  .state-links a{min-height:36px;justify-content:center}
  .state__big{font-size:max(34px,8svh)}
  .state__big--md{font-size:max(32px,7.5svh)}
  .state__lede{font-size:15px}
  .store-fine{padding:14px 16px;gap:4px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .store-fine .eyebrow{width:100%}
  .store-fine__big{font-size:22px;width:100%}
  .store-fine__big br{display:none}
  .store-fine__addr{font-size:14px}
  .store-fine a{min-height:36px}
}
/* The shortest phones (an SE with Safari's bars showing): the home hero's
   pills, lede and buttons step down once more. */
@media (max-height:620px) and (max-width:719px){
  .hero__tags{gap:6px}
  .hero__tags .pill-tag,.hero__tags .status--glass{min-height:30px;padding-top:4px;padding-bottom:4px;font-size:11px}
  .hero__lede{font-size:14px;line-height:1.4}
  .hero .btn--lg{min-height:44px;padding:10px 18px}
  .hero__foot .btn-row{gap:8px}
}
@media (max-width:359px){.hero__h1{font-size:42px}}
@media (max-height:620px) and (max-width:719px){
  .article-head .lede{font-size:14px;line-height:1.45}
  .age-card h1,.age-card h2{font-size:22px}
  .state{padding:12px 0}
  .state__lede{font-size:14px}
  .store-fine__addr{font-size:13px}
}
/* Short phones: the age gate card and the brand/event header tighten up. */
@media (max-height:640px) and (max-width:1099px){
  .age-card img{width:clamp(48px,11svh,150px)}
  .age-card>p{font-size:15px}
  .fold-media .back{min-height:36px}
  .brand-hero{margin-top:-24px}
  .brand-logo{width:68px;height:68px;padding:8px}
}
@media (max-height:520px){.state-links{display:flex;width:auto}}

/* ---------- Home: the film (Oct 5) ----------
   Poster first; rd.js swaps the native controls for one big play button
   until the film starts. Without JS the native controls stay. */
/* Left-aligned with its heading, and never taller than the screen under the
   header, so the whole picture is in view at once. */
.film{position:relative;max-width:1100px;width:min(100%,calc((100vh - var(--hdr,64px) - 48px) * 952 / 540));margin:0;aspect-ratio:952/540;border-radius:var(--radius-card);overflow:hidden;border:2px solid var(--gd-ash-line);background:#000}
.film__video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.film__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;border:0;cursor:pointer;color:#fff;font:800 14px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  background:radial-gradient(circle at center,rgba(0,0,0,.15) 0,rgba(0,0,0,.55) 70%)}
.film__icon{width:clamp(64px,10vw,96px);height:clamp(64px,10vw,96px);border-radius:var(--pill);background:var(--gd-green);border:3px solid #fff;display:flex;align-items:center;justify-content:center;transition:transform .2s,background-color .2s}
.film__icon::after{content:"";margin-left:8%;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #000}
.film__play:hover .film__icon,.film__play:focus-visible .film__icon{transform:scale(1.06);background:var(--gd-lime)}
.film__play:focus-visible{outline:3px solid var(--gd-green);outline-offset:-6px}
.film__time{font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.75);border-radius:var(--pill);padding:5px 10px}
.film__lede{margin:0}

/* ---------- Smallest phones (Oct 6) ----------
   On 4-inch phones (and short ones with browser bars showing) a few heroes
   still ran past the fold, so these screens drop their least-needed piece:
   the 404's quick links, the 500's "store is fine" card (the status bar and
   the Call button say the same), and the subtitle under a long article
   title. */
@media (max-height:620px) and (max-width:719px){
  .state-links,.state__split .store-fine{display:none}
  .article-head h1.title--long+.lede{display:none}
}
@media (max-width:359px){
  .tabbar{padding-left:6px;padding-right:6px;gap:0}
  .tabbar a:not(.btn){font-size:10px;letter-spacing:0}
  .tabbar .btn{padding:10px;font-size:11px;letter-spacing:.02em}
  .age-card{padding-left:16px;padding-right:16px}
  .age-btns{flex-wrap:nowrap;gap:8px}
  .age-btns .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px;font-size:12px;white-space:normal}
}
@media (max-width:359px) and (max-height:620px){.hero__h1{font-size:36px}.hero__lede{line-height:1.3}.hero__inner{gap:8px}}

/* ---------- UI audit fixes (Oct 6) ---------- */
/* Home hero: phones get a sharper source; the H1 stays on one line on
   tablets and desktops (about 9.6 characters wide per em of the wrap). */
@media (min-width:720px){.hero__h1{font-size:min(clamp(52px,11.5vw,156px),max(34px,14svh),calc((min(100vw,var(--wrap)) - 2 * var(--gutter)) / 9.6))}}

/* Home deals: the rail follows straight on from the hero, with no black gap
   before the film; on desktop all seven days sit in one row. */
.home-sec.on-black+.film-sec{padding-top:8px}
@media (max-width:719px){.day-deal{flex-basis:min(72vw,300px)}}
@media (min-width:1100px){
  .rail{overflow:visible;padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)))}
  .rail .day-deal{flex:1 1 0;min-width:0}
  .rail .day-deal__big{font-size:clamp(14px,1.2vw,18px);overflow-wrap:normal}
}

/* Home categories, learn and events: shorter on phones. */
@media (max-width:719px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cat-tile__img{padding:10px}
  .cat-tile__label{padding:12px}
  .cat-tile__name{font-size:18px}
  .cat-tile__note{letter-spacing:.08em}
  .cat-tile .arrow-dot{display:none}
  .learn-card{min-height:0;gap:20px;padding:22px}
  .home-events{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter)}
  .home-events::-webkit-scrollbar{display:none}
  .home-events>*{flex:0 0 min(72vw,300px);scroll-snap-align:start}
}

/* House line on phones bleeds to the screen edge, like the deals rail. */
@media (max-width:899px){.scroller.house{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}

/* Visit card: the hours are seven identical rows, so phones keep the one
   line in the address instead; the actions line up two to a row. */
@media (max-width:719px){
  .visit .hours{display:none}
  .visit .btn-row>*{flex:1 1 0;justify-content:center}
  .visit .btn-row>:first-child{flex-basis:100%}
}

/* Marquees: a pause button for anyone who needs the motion to stop, and
   with reduced motion they become rails you can swipe. */
.marquee-wrap{position:relative}
.motion-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--pill);border:2px solid currentColor;background:transparent;color:inherit;
  font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.is-paused .marquee__track{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;scroll-snap-type:x proximity;padding-inline:var(--gutter);scrollbar-width:none}
  .marquee__track>[aria-hidden="true"]{display:none}
  .motion-toggle{display:none}
}

/* Hover lifts only where there is a pointer that hovers; on touch screens a
   tapped card would otherwise stay lifted. */
@media (hover:none){
  .day-deal:hover,.cat-tile:hover,.house-card:hover,.learn-card:hover,.lift:hover,.brand-banner:hover,.brand-logo-tile:hover,
  .anim .cat-tile[data-reveal].in:hover,.anim .day-deal[data-reveal].in:hover,.anim .house-card[data-reveal].in:hover,.anim .learn-card[data-reveal].in:hover,.anim .lift[data-reveal].in:hover{transform:none}
  .day-deal:hover .day-deal__photo img,.cat-tile:hover .cat-tile__img img{transform:none}
}

/* /menu is an app: a one-line head, the categories, then the shop, which
   fills the screen. The site's tab bar steps aside on phones because the
   shop brings its own (Menu, Carts, Orders, Log in). */
.page-head--compact{padding:clamp(14px,3svh,28px) 0 clamp(10px,2svh,18px)}
.page-head--compact .wrap{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.page-head--compact .display{font-size:min(clamp(30px,4.4vw,48px),max(26px,6svh))}
@media (min-width:1100px){.menu-cats .chip{padding:9px 12px;font-size:12px}.menu-cats .chips{gap:6px}}
@media (max-width:1099px){
  body:has(.menu-stage){--tab-h:0px}
  body:has(.menu-stage) .tabbar{display:none}
}
@media (max-width:719px){body:has(.menu-stage) .status-bar{display:none}}
/* The page itself never scrolls on /menu: the body is exactly the screen,
   a column of header, head, categories, then the shop filling what is left.
   The shop is the only thing that scrolls, wherever you touch, so the page
   and the embed never fight over a swipe or a wheel. The ticker, footer and
   the small print under the shop step aside for the room (still in the HTML). */
html:has(.menu-stage){height:100%;overflow:hidden;overscroll-behavior:none}
body:has(.menu-stage){height:100vh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;padding-bottom:0}
@supports (height:100dvh){body:has(.menu-stage){height:100dvh}}
body:has(.menu-stage)>*{flex:none}
body:has(.menu-stage) .ticker,body:has(.menu-stage) .site-footer,.menu-sec>.wrap{display:none}
body:has(.menu-stage)>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.menu-cats{position:relative;top:auto}
.menu-sec{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0}
.menu-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-bottom:0}
/* The heading stays as one line; the intro line goes to screen readers only. */
.menu-intro{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body:has(.menu-stage) .page-head--compact{padding:clamp(10px,2svh,18px) 0}
body:has(.menu-stage) .page-head--compact .display{font-size:min(clamp(24px,3.2vw,38px),max(22px,5svh))}
/* Phones on their side: only the header and categories sit above the shop. */
@media (max-height:520px){body:has(.menu-stage) .page-head--compact{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.menu-slow{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:#fff;font-weight:700}
.menu-stage.is-loaded .menu-slow{display:none}

/* Event pages: on phones the facts and RSVP come before the long write-up. */
@media (max-width:1099px){.aside--event{order:-1}}
.fold-media--event .banner img{object-fit:contain;background:#000}
.fold-media--event+.sec .btn-row{margin-top:4px}
@media (max-width:719px){
  .next-event__img{aspect-ratio:16/9}
  .past-grid{grid-template-columns:minmax(0,1fr)}
  .past-grid .card{flex-direction:row;align-items:center}
  .past-grid .card__media{flex:none;width:96px;aspect-ratio:1}
  .past-grid .card__body{padding:12px 14px}
}

/* Brands: the count sits under the search box; letters step aside while a
   search is typed so the results stay above the phone keyboard. */
.brand-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
[data-brand-filter].is-searching .letters{display:none}
[data-brand-filter]{scroll-margin-top:calc(var(--hdr,62px) + 8px)}
@media (min-width:1100px){.letters{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:0}.letter{width:100%}}
.logo-tile{overflow:hidden;min-width:0}
.logo-tile .no-img{font-size:22px;letter-spacing:.04em}

/* Articles and terms: on desktop the photo is a square tile beside the
   title (the CMS sources are 300–500px squares), long titles step down,
   and a missing photo leaves the title the whole head. */
@media (min-width:908px){
  .article-head__img{aspect-ratio:1;width:100%;max-width:440px;justify-self:end}
  .article-head h1.title--long{font-size:min(clamp(30px,3.2vw,44px),max(26px,6.5svh))}
}
@media (max-width:359px){.article-head h1,.brand-id h1,.fold-media--event+.sec .display{font-size:30px}}
@media (max-height:760px) and (min-width:1100px){.aside{top:96px}.topics a:not(.btn){min-height:36px}}
/* Desktop rails of articles and terms are a four-up grid: the "See all"
   link carries the rest. */
@media (min-width:900px){
  .scroller--grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  .scroller--grid4>:nth-child(n+5){display:none}
}

/* Glossary lists on phones: names only, two to a row. */
@media (max-width:719px){
  .term-list{grid-template-columns:1fr 1fr;gap:8px}
  .term-list .card__body{padding:12px 14px}
  .term-list .card__title{font-size:15px}
  .term-list .card__sub{display:none}
}