/* =====================================================================
   PELICAN SITE — the website's sections and the SHELL every public page
   shares (announcement bar, header, footer). Loaded by the website, by the
   store and the event pages (for the shell), and by the editor's canvas.

   The design system is the approved store redesign's (Oct 2026): every
   colour, typeface, radius and shadow comes from tokens.css; nothing here
   names a colour of its own except white and rgba() tints of a token.

   The section rules began as the approved prototype's `.site` CSS
   (pelican-site-editor-prototype/build/src/style.css), class for class, so
   the editor's canvas and the public page draw the same; restyled Oct 7
   2026 to the store's system. Accessibility as before:
     - text links use --link; text over photos sits on the shade (tokens.css
       has every ratio); FAQ items are <details>;
     - visible focus on everything that takes it, one ring everywhere
       (2px --focus, 2px off the edge, --focus-on-dark on dark grounds);
       a skip link; reduced motion respected;
     - responsive sizes answer to the `site` container: the public page sets
       it on <body>, the editor on its canvas frame, and each shell part
       (header, footer) is its own `site` container, so the shell responds
       the same on a store page, where <body> is the store's; browsers
       without container queries get the same layout from the media-query
       fallback at the end.
   The page frame is the store's: 1520px wide at most, 32px gutters (24px
   from 1099px down, 16px on phones), shared by the header, the footer, the
   website's sections and the store, so nothing moves sideways between them.
   Editor-only chrome (.edit-mode, .sx-tag, .sx-add ...) stays in the editor.
   ===================================================================== */

/* ------------------------------------------------------------- the page */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* every public page reserves the scrollbar's gutter (the store always did),
   so the frame doesn't shift sideways between a short page and a long one */
html.pl-root { scrollbar-gutter: stable; }
body.site-page { margin: 0; background: var(--paper); color: var(--ink); container: site / inline-size; }
.s-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--deep); color: #fff;
  padding: 8px 14px; border-radius: var(--r-sm); font: 600 15px/1.4 var(--font-ui); text-decoration: none; }
.skip:focus, .skip:focus-visible { top: 12px; outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.site main:focus, .site main:focus-visible { outline: none; }   /* the skip target; the next Tab shows the ring */
.s-preview { display: block; background: var(--note-ground); color: var(--note-ink); border-bottom: 2px solid var(--note-line); padding: 10px 16px;
  font: 15px/1.4 var(--font-ui); text-align: center; }
.s-preview p { margin: 0; }

/* ------------------------------------------------------------- the site */
.site {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  min-height: 100%;
}
/* a shell part on a store page: the .site scope (tokens, type, links)
   without a box of its own, so the header's sticky parent is <body> */
.site.s-shell { display: contents; }
.site * { box-sizing: border-box; }
.site a { color: var(--link); text-underline-offset: 3px; }
.site img { max-width: 100%; display: block; }
.site h1, .site h2, .site h3 { text-wrap: balance; }
.site p { margin: 0; }
.site .wrap { max-width: var(--frame); margin: 0 auto; padding-left: var(--g, 32px); padding-right: var(--g, 32px); }
.site :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site .tone-light :focus-visible, .site .s-hero :focus-visible, .site .s-ann :focus-visible { outline-color: var(--focus-on-dark); }

/* =======================================================================
   THE SHELL: announcement bar, header, footer. One markup
   (templates/site2/_shell_*.html) on every public page.
   ======================================================================= */

/* ---- announcement bar (site settings: on, words, link, dates) */
.s-ann { display: block; background: var(--deep); color: var(--cream); font: 500 14px/1.35 var(--font-ui); text-align: center;
  padding: 10px var(--g, 32px); min-height: 40px; text-wrap: balance; }
.s-ann a { color: #fff; font-weight: 600; margin-left: 6px; white-space: nowrap; text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.s-ann a:hover { text-decoration-color: #fff; }

/* ---- header: brand, the site's menu, Shop, the cart */
.s-head { position: sticky; top: 0; z-index: 30; container: site / inline-size;
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.s-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.s-brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; margin-right: auto;
  flex: none; padding: 2px 0; border-radius: 4px; }
.site .s-brand { color: var(--ink); }
.s-brand b { font-family: var(--font-display); font-weight: 400; font-size: 31px; letter-spacing: -.01em; line-height: .95; }
.s-brand small { font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 5px; white-space: nowrap; }
.s-brand img { display: block; height: 46px; width: auto; max-width: 240px; }
/* the real logo (3.35 : 1): taller than a picture from the library, never cropped */
.s-brand--logo img { height: 54px; max-width: none; }
.s-nav { display: flex; align-items: center; gap: 2px; }
.s-nav > div { position: relative; }
.s-nav a.s-nl { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 11px; border-radius: var(--r-sm); white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); }
.s-nav a.s-nl:hover { background: var(--mist); }
.s-nav a.s-nl[aria-current="page"] { background: var(--sea-tint); color: var(--deep); }
.s-nav a.s-nl svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.s-nav .s-dd { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 6px; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-dd); z-index: 5; }
.s-nav .s-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* keeps :hover across the gap */
.s-nav > div:hover .s-dd, .s-nav > div:focus-within .s-dd { display: grid; }
.s-nav > div.dd-closed .s-dd { display: none; }
.s-nav .s-dd a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.35; }
.s-nav .s-dd a:hover { background: var(--mist); }
.s-nav .s-dd a[aria-current="page"] { background: var(--sea-tint); color: var(--deep); }
.s-order { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: var(--r-md); flex: none;
  background: var(--deep); color: var(--on-accent) !important; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.s-order:hover { background: var(--deep-2); }
.s-order[aria-current="page"] { background: var(--sea-tint); color: var(--deep) !important; }
/* the cart: the store's pill, quiet while empty, deep once it holds something */
.s-cart { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: var(--r-pill); flex: none;
  background: var(--paper); color: var(--ink) !important; border: 1px solid var(--hairline-2); font: 600 14px/1 var(--font-ui);
  white-space: nowrap; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .2s var(--ease); }
.s-cart:hover { border-color: var(--ink-3); }
.s-cart.has-items { background: var(--deep); border-color: var(--deep); color: #fff !important; }
.s-cart.has-items:hover { background: var(--deep-2); border-color: var(--deep-2); }
.s-cart svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-cart-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .28); }
.s-cart.is-bump { animation: s-bump .45s var(--ease); }
@keyframes s-bump { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.s-burger { display: none; align-items: center; gap: 6px; height: 44px; padding: 0 14px; flex: none; border: 1px solid var(--hairline-2);
  background: var(--paper); color: var(--ink); border-radius: var(--r-md); font: 600 15px var(--font-ui); cursor: pointer; }
.s-burger:hover { border-color: var(--ink-3); }
.s-burger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.s-head.open .s-burger { background: var(--mist); }
/* the phone menu: a panel under the header, scrolling on its own */
.s-mnav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-top: 1px solid var(--hairline);
  box-shadow: 0 24px 40px rgba(16, 28, 29, .16); padding: 4px var(--g, 32px) 24px; }
.s-mnav a { display: block; padding: 13px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline);
  font-size: 17px; font-weight: 500; line-height: 1.3; }
.s-mnav a.sub { padding: 11px 0 11px 16px; font-size: 15px; font-weight: 400; color: var(--ink-2); }
.s-mnav a[aria-current="page"] { color: var(--deep); font-weight: 600; }
.s-mnav a:hover { color: var(--deep); }
.s-head.open .s-mnav { display: block; }
.s-mgrp summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--hairline);
  font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer; list-style: none; }
.s-mgrp summary::-webkit-details-marker { display: none; }
.s-mgrp summary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .15s var(--ease); }
.s-mgrp[open] summary svg { transform: rotate(180deg); }
.s-mgrp[open] summary { color: var(--deep); }
/* a menu longer than the header has room for (site.js measures it): the
   menu button takes over, whatever the width */
.s-head.nav-overflow .s-nav { display: none; }
.s-head.nav-overflow .s-burger { display: inline-flex; }
.s-head--logo { background: var(--deep); border-bottom-color: var(--deep); }
.s-head--logo .s-nav a.s-nl { color: #fff; }
.s-head--logo .s-nav a.s-nl:hover { background: rgba(255, 255, 255, .1); }
.s-head--logo .s-nav a.s-nl[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.s-head--logo .s-order { background: var(--cream); color: var(--deep) !important; }
.s-head--logo .s-order:hover { background: #fff; }
.s-head--logo .s-order[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff !important; }
.s-head--logo .s-cart { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.s-head--logo .s-cart.has-items { background: var(--cream); border-color: var(--cream); color: var(--deep) !important; }
.s-head--logo .s-cart-sep { background: rgba(11, 70, 81, .3); }
.s-head--logo .s-burger { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.s-head--logo.open .s-burger { background: rgba(255, 255, 255, .12); }
.s-head--logo :focus-visible { outline-color: var(--focus-on-dark); }
.s-head--logo .s-mnav :focus-visible { outline-color: var(--focus); }

/* ---- footer: sign-up, address, hours, explore, policies, social */
.s-foot { container: site / inline-size; background: var(--mist); border-top: 1px solid var(--hairline); color: var(--ink-2);
  padding: 44px 0 calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.5; }
.s-foot .cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: 32px; }
.s-foot h2, .s-foot h4 { font: 600 12px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.s-foot p, .s-foot li { color: var(--ink-2); font-size: 14px; margin: 0 0 4px; line-height: 1.5; }
.s-foot ul { list-style: none; margin: 0; padding: 0; }
.site .s-foot a { color: var(--ink-2); text-decoration: none; }
.site .s-foot a:hover { color: var(--ink); text-decoration: underline; }
.s-foot li a { display: inline-block; padding: 3px 0; }
.s-foot .brand .s-mark { display: inline-flex; flex-direction: column; line-height: 1; margin-bottom: 12px; color: var(--ink); }
.s-foot .brand .s-mark b { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -.01em; line-height: .95; }
.s-foot .brand .s-mark small { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-top: 5px; }
.s-foot .brand .s-mark--logo { display: block; margin-bottom: 14px; }
.s-foot .s-foot-logo { display: block; height: 72px; width: auto; }
.s-foot .brand .s-foot-tagline { margin-bottom: 12px; max-width: 30ch; }
.s-foot .hours h3 { font: 600 14px/1.4 var(--font-ui); margin: 12px 0 2px; color: var(--ink); }
.s-foot .hours h2 + h3 { margin-top: 0; }
.s-foot .s-policy { font: inherit; color: var(--ink-2); padding: 3px 0; background: none; border: 0; cursor: pointer; text-align: left;
  text-decoration: none; border-radius: 4px; }
.s-foot .s-policy:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.s-foot .note { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.s-foot .allergens { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline-2); }
.s-foot .allergens p { max-width: 100ch; color: var(--ink-3); font-size: 13px; }
.s-foot .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hairline-2); font-size: 13px; color: var(--ink-3);
  display: flex; gap: 6px 20px; flex-wrap: wrap; justify-content: space-between; }
.s-foot-signup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
  padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--hairline-2); }
.s-foot-signup .s-foot-signup-t h2 { font: 400 28px/1.1 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0 0 4px; }
.s-foot-signup .s-foot-signup-t { flex: 1 1 340px; max-width: 560px; }
.s-foot-signup .s-foot-signup-t p { font-size: 16px; margin: 0; }
.s-foot-signup .s-signup { margin-top: 0; flex: 1 1 380px; max-width: 520px; }
.s-foot-signup .s-signup-row { margin: 0; max-width: none; }

/* =======================================================================
   SECTIONS
   ======================================================================= */
.sx { position: relative; }
.sx.tight { padding-top: 6px; }   /* not 0: a heading flush with the edge lets its ascenders cross into the section above */
.sx-pad { padding: 76px 0; }
.sx.bg-white { background: var(--paper); }
.sx.bg-tint { background: var(--mist); }
.sx.bg-cream { background: var(--cream); }
.sx.bg-deep { background: var(--deep); }
.sx.tone-dark { color: var(--ink); }
.sx.tone-light { color: var(--cream); }
.sx.tone-light a:not(.s-btn) { color: var(--cream); }
.s-eyebrow { font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px; }
.sx.tone-light .s-eyebrow { color: var(--on-dark-accent); }
.s-h { font-family: var(--font-display); font-weight: 400; color: var(--ink); line-height: 1.06; letter-spacing: -.012em; margin: 0; }
.s-h em, .s-h i { font-style: italic; color: var(--deep); }
.sx.tone-light .s-h { color: var(--cream); }
.sx.tone-light .s-h em, .sx.tone-light .s-h i { color: #fff; }
h1.s-h { font-size: 54px; }
h2.s-h { font-size: 42px; }
.s-lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; margin-top: 14px; }
.s-lede:empty { display: none; }
.sx.tone-light .s-lede { color: rgba(var(--cream-rgb), .88); }
.s-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; flex-wrap: wrap; }
.s-head-row > div { max-width: 760px; }
.s-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md);
  background: var(--deep); color: var(--on-accent) !important; text-decoration: none; font: 600 16px/1.25 var(--font-ui); letter-spacing: .005em;
  border: 1px solid var(--deep); text-align: center;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.s-btn:hover { background: var(--deep-2); border-color: var(--deep-2); }
.s-btn.alt { background: var(--paper); color: var(--ink) !important; border-color: var(--hairline-2); }
.s-btn.alt:hover { background: var(--paper); border-color: var(--ink-3); }
/* on dark grounds and photos: the store's cream button */
.sx.tone-light .s-btn:not(.alt), .s-hero .s-btn:not(.alt) { background: var(--cream); color: var(--deep) !important; border-color: var(--cream); }
.sx.tone-light .s-btn:not(.alt):hover, .s-hero .s-btn:not(.alt):hover { background: #fff; border-color: #fff; }
.sx.tone-light .s-btn.alt, .s-hero .s-btn.alt { background: transparent; color: var(--cream) !important; border-color: rgba(var(--cream-rgb), .7); }
.sx.tone-light .s-btn.alt:hover, .s-hero .s-btn.alt:hover { background: rgba(var(--cream-rgb), .12); border-color: var(--cream); }
.s-btn.sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.s-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.s-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--link); text-decoration: none; white-space: nowrap; min-height: 44px; }
.s-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.s-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.sx.tone-light .s-link { color: var(--cream); }

/* hero: text always sits on >= 0.72 of the shade (WCAG AA on any photo) */
.s-hero { position: relative; color: var(--cream); background: var(--deep-2); }
.s-hero .ph { position: absolute; inset: 0; overflow: hidden; }
.s-hero .ph img { width: 100%; height: 100%; object-fit: cover; }
.s-hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--shade-rgb), .86) 0%, rgba(var(--shade-rgb), .76) 55%, rgba(var(--shade-rgb), .22) 100%); }
.s-hero.shade-strong .shade { background: linear-gradient(90deg, rgba(var(--shade-rgb), .92) 0%, rgba(var(--shade-rgb), .82) 60%, rgba(var(--shade-rgb), .45) 100%); }
.s-hero.align-center .shade { background: rgba(var(--shade-rgb), .74); }
.s-hero.align-center.shade-strong .shade { background: rgba(var(--shade-rgb), .82); }
.s-hero .inner { position: relative; padding: 112px 0 120px; max-width: 640px; }
.s-hero.size-short .inner { padding: 72px 0 78px; }
.s-hero.align-center .inner { max-width: 780px; margin: 0 auto; text-align: center; }
.s-hero.align-center .s-btns { justify-content: center; }
.s-hero.align-center .s-lede { margin-left: auto; margin-right: auto; }
.s-hero .s-h { color: var(--on-photo); font-size: 64px; line-height: 1; letter-spacing: -.015em; }
.s-hero h2.s-h { font-size: 50px; }
.s-hero .s-h em, .s-hero .s-h i { color: var(--cream); }
.s-hero .s-lede { color: var(--cream); font-size: 19px; max-width: 46ch; margin-top: 18px; }
.s-hero .s-eyebrow { color: var(--on-dark-accent); }
.s-hero.split { background: var(--deep); }
.s-hero.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.s-hero.split .inner { padding: 72px 0; max-width: none; }
.s-hero.split .ph { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; }
.s-hero.split .shade { display: none; }
/* A background video (site review, Oct 2026): over the photo, which is its poster, under the
   same shade; it fades in once it plays (site.js). The pause button: WCAG 2.2.2. */
.s-hero .ph .s-bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.s-hero.bgv-on .ph .s-bgv { opacity: 1; }
.s-bgv-btn { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid rgba(var(--cream-rgb), .85); background: rgba(var(--shade-rgb), .74); color: var(--cream); cursor: pointer; }
.s-bgv-btn:hover { background: rgba(var(--shade-rgb), .92); }
.s-bgv-btn[hidden] { display: none; }
.s-bgv-btn svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; stroke: none; }
.s-bgv-btn svg + svg { margin-left: 3px; }
.s-bgv-btn[aria-pressed="false"] svg + svg, .s-bgv-btn[aria-pressed="true"] svg:first-child { display: none; }

/* text */
.s-text .col { max-width: 760px; }
.s-text.align-center .col { margin: 0 auto; text-align: center; }
.s-text.align-center .s-btns { justify-content: center; }
.s-text.width-wide .col { max-width: 980px; }
.s-body { font-size: 17px; line-height: 1.65; margin-top: 18px; }
.s-body:first-child { margin-top: 0; }
.s-body p + p { margin-top: 14px; }
.s-body b, .s-body strong { font-weight: 600; }
.sx.tone-light .s-body { color: rgba(var(--cream-rgb), .92); }

/* photo + text */
.s-pt .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.s-pt.img-right .wrap { grid-template-columns: 1fr 1.05fr; }
.s-pt.img-right .ph { order: 2; }
.s-pt .ph { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--mist); }
.s-pt .ph img { width: 100%; height: 100%; object-fit: cover; }
.s-pt.fit-whole .ph { aspect-ratio: auto; background: none; }
.s-pt.fit-whole .ph img { height: auto; }

/* gallery */
.s-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-gal-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.s-gal-grid figure { margin: 0; }
.s-gal-grid .ph { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.s-gal-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.s-gal-grid figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.s-gal-grid.mosaic { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; }
.s-gal-grid.mosaic figure:first-child { grid-row: span 2; }
.s-gal-grid.mosaic .ph { aspect-ratio: auto; height: 100%; }
.s-gal-grid.mosaic figcaption { display: none; }
/* one photo on its own (the old site's full-width pictures, such as Our
   story's team photos): the whole picture, never cropped */
.s-gal-grid:not(.mosaic) > figure:only-child { grid-column: 1 / -1; max-width: 900px; margin: 0 auto; width: 100%; }
.s-gal-grid:not(.mosaic) > figure:only-child .ph { aspect-ratio: auto; }
.s-gal-grid:not(.mosaic) > figure:only-child .ph img { height: auto; }

/* products: the store's cards (the whole photo in a white square, price
   first, then the name) */
.s-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
.s-pcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--ink); }
.s-pcard .ph { aspect-ratio: 1 / 1; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.s-pcard .ph img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform .45s var(--ease); }
.s-pcard:hover .ph img { transform: scale(1.035); }
.s-pcard .ph.none { display: grid; place-items: center; background: var(--mist); color: var(--placeholder); border-color: transparent; }
.s-pcard .ph.none svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.s-pcard .bd { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s-pcard h1, .s-pcard h2, .s-pcard h3 { font: 500 15px/1.35 var(--font-ui); margin: 1px 0 0; color: var(--ink); text-wrap: pretty; }
.s-pcard h3 a { color: inherit; text-decoration: none; }
.s-pcard h3 a:hover { text-decoration: underline; }
.s-pcard .size { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.s-pcard .price { order: -1; font: 700 16px/1.3 var(--font-ui); color: var(--ink); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.s-pcard .price small { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-right: 2px; }
.s-pcard .dates { display: inline-flex; align-self: flex-start; gap: 5px; align-items: flex-start; font-size: 12px; font-weight: 500; line-height: 1.3;
  color: var(--deep); background: var(--sea-tint); padding: 3px 8px 3px 7px; border-radius: 6px; margin-top: 6px; }
.s-pcard .dates svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.s-pcard .note { font-size: 13px; color: var(--ink-2); }
.s-pcard .s-btn { margin-top: 12px; width: 100%; min-height: 42px; font-size: 14.5px; background: var(--paper); color: var(--ink) !important; border-color: var(--hairline-2); }
.s-pcard .s-btn:hover { background: var(--paper); border-color: var(--ink-3); }
.sx.tone-light .s-pcard .s-btn { background: var(--cream); color: var(--deep) !important; border-color: var(--cream); }
.s-pcard .spacer { flex: 1; min-height: 4px; }
.sx.tone-light .s-pcard, .sx.tone-light .s-pcard h3, .sx.tone-light .s-pcard .price { color: var(--cream); }
.sx.tone-light .s-pcard .size, .sx.tone-light .s-pcard .note { color: rgba(var(--cream-rgb), .86); }
.s-prod-foot { margin-top: 26px; display: flex; justify-content: center; }
.s-empty { padding: 26px; border: 1px dashed var(--hairline-2); border-radius: var(--r-lg); text-align: center; color: var(--ink-2); font-size: 15px; }

/* menu */
.s-menu-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 72px; margin-top: 6px; }
.s-menu-cats.one { grid-template-columns: 1fr; max-width: 780px; }
.s-menu-cat h1, .s-menu-cat h2, .s-menu-cat h3 { font: 400 28px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.s-dish { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.s-dish .top { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.s-dish .nm { font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.s-dish .pr { margin-left: auto; font-weight: 600; font-size: 15.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.s-dish .ds { font-size: 15px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.s-dish .tags { display: inline-flex; gap: 5px; margin-left: 4px; vertical-align: 2px; }
.s-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--hairline-2);
  color: var(--ink-2); line-height: 1.6; white-space: nowrap; }
.s-tag.nut { border-color: var(--nut-line); color: var(--nut-ink); }
.s-menu-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; color: var(--ink-2); font-size: 14px; }
.s-menu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sx.tone-light .s-dish .pr, .sx.tone-light .s-menu-cat h2, .sx.tone-light .s-menu-cat h3 { color: var(--cream); border-color: var(--cream); }
.sx.tone-light .s-dish .ds { color: rgba(var(--cream-rgb), .86); }
.sx.tone-light .s-dish { border-color: rgba(var(--cream-rgb), .2); }
.sx.tone-light .s-tag { color: var(--cream); border-color: rgba(var(--cream-rgb), .5); }

/* classes: the class page's own rows (date tile, title, seats) */
.s-classes { display: grid; gap: 12px; }
/* no class live: one button to where the dates and tickets are, right under the intro */
.s-btns.s-classes-more { margin-top: 0; }
.s-class { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 18px;
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hairline); color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.s-class:hover { border-color: var(--hairline-2); box-shadow: 0 2px 10px rgba(16, 28, 29, .06); }
.s-class .dt { display: grid; justify-items: center; align-content: center; gap: 1px; height: 72px; border-radius: var(--r-md);
  background: var(--sea-tint); color: var(--deep); line-height: 1.1; text-align: center; }
.s-class .dt small, .s-class .dt span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); }
.s-class .dt b { display: block; font-size: 26px; font-weight: 600; color: var(--deep); font-variant-numeric: tabular-nums; }
.s-class h1, .s-class h2, .s-class h3 { margin: 0; font: 600 17.5px/1.3 var(--font-ui); color: var(--ink); }
.s-class p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.s-class .seat { display: inline-flex; font-size: 13px; font-weight: 600; margin-top: 8px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sea-tint); color: var(--deep); }
.s-class .seat.low { background: #fdf3e2; color: #6d4d13; }
.s-class .seat.out { background: var(--mist-2); color: var(--ink-2); }
.s-class .go { display: grid; gap: 6px; justify-items: end; }

/* pickup */
.s-pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s-pick { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px 26px; display: grid; gap: 12px; align-content: start; color: var(--ink); }
.s-pick .k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.s-pick .range { font: 400 38px/1.05 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
.s-days { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.s-day { min-width: 62px; text-align: center; padding: 8px 6px 9px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--hairline-2); line-height: 1.15; }
.s-day small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.s-day b { display: block; font-size: 21px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-day.eve { background: var(--sea-tint); border-color: var(--sea-tint-2); }
.s-pick .by { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.s-pick .by svg, .s-notes svg { width: 18px; height: 18px; stroke: var(--deep); fill: none; stroke-width: 1.8; flex: none; }
.s-notes { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.s-notes li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.s-notes svg { margin-top: 2px; }
.sx.tone-light .s-notes li { color: rgba(var(--cream-rgb), .92); }
.sx.tone-light .s-notes svg { stroke: var(--cream); }

/* faq: <details>/<summary> */
.s-faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.s-faq-list { border-top: 1px solid var(--hairline-2); }
.s-faq-item { border-bottom: 1px solid var(--hairline-2); }
.s-faq-q { display: flex; align-items: flex-start; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; border-radius: 4px; }
.s-faq-q::-webkit-details-marker { display: none; }
.s-faq-q::marker { content: ""; }
.s-faq-q .q { flex: 1; font-weight: 600; font-size: 17.5px; line-height: 1.4; }
.s-faq-q .tg { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline-2); background: var(--paper); color: var(--deep);
  display: grid; place-items: center; padding: 0; transition: border-color .15s var(--ease); }
.s-faq-q:hover .tg { border-color: var(--ink-3); }
.s-faq-q .tg svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .2s; }
.s-faq-item[open] .tg svg, .s-faq-item.open .tg svg { transform: rotate(45deg); }
.s-faq-a { display: none; padding: 0 2px 20px; color: var(--ink-2); font-size: 16.5px; max-width: 66ch; }
.s-faq-item[open] > .s-faq-a, .s-faq-item.open .s-faq-a { display: block; }
.sx.tone-light .s-faq-a { color: rgba(var(--cream-rgb), .86); }
.sx.tone-light .s-faq-q .tg { background: transparent; color: var(--cream); border-color: rgba(var(--cream-rgb), .5); }

/* book + gift */
.s-bg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s-bg-cards:has(> .s-bg-card:only-child) { grid-template-columns: minmax(0, 780px); justify-content: center; }
.s-bg-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 12px; align-content: start; color: var(--ink); }
.s-bg-card h1, .s-bg-card h2, .s-bg-card h3 { margin: 0; font: 400 30px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.s-bg-card p { color: var(--ink-2); font-size: 16px; }
.s-embed { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--mist); padding: 18px; display: grid; gap: 10px; justify-items: start; }
.s-embed small { color: var(--ink-2); font-size: 13.5px; }
.s-embed .loaded { font-size: 14px; color: var(--deep); font-weight: 600; }
.s-embed.is-loaded { padding: 0; background: var(--card); justify-items: stretch; }
.s-embed iframe { width: 100%; border: 0; display: block; border-radius: var(--r-lg); min-height: 760px; }
.s-embed { scroll-margin-top: 90px; }
/* a form that opens with the page (the gift card shop) is as tall as the form
   itself, so nobody has to find a scroll bar inside a box: Loopz measured
   949 px tall at 700 px wide, 1,156 at phone width (Nov 4); the extra room
   covers its later steps */
.s-embed[data-embed-open] iframe { min-height: 1150px; }

/* The booking sheet (phones): a full-screen dialog of our own around the
   widget. The bar is ours, in the site's type; the widget's own row (its Log
   in link and X) stays inside its frame, in its own type, which a page cannot
   style. While it is open the page behind is inert and does not scroll. */
html.s-sheet-open { overflow: hidden; }
html.s-sheet-open body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.s-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; min-height: 0;
  height: 100vh; height: 100dvh; background: var(--mist); overscroll-behavior: contain; }
.s-sheet:focus, .s-sheet:focus-visible { outline: none; }
.s-sheet-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--paper); border-bottom: 1px solid var(--hairline); }
.s-sheet-title { margin: 0; font: 400 28px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.s-sheet-close { flex: none; min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: var(--r-md); cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--hairline-2); font: 600 16px/1.25 var(--font-ui); letter-spacing: .005em; }
.s-sheet-close:hover { border-color: var(--ink-3); }
.s-sheet-body { position: relative; flex: 1 1 auto; min-height: 0; }
.s-sheet-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0;
  background: var(--paper); opacity: 0; }
.s-sheet.is-ready iframe { opacity: 1; }
.s-sheet-wait { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center;
  font: 400 16px/1.5 var(--font-ui); color: var(--ink-2); }
.s-sheet-wait p { margin: 0; }
.s-sheet-wait a { display: inline-block; padding: 12px 0; font-weight: 600; color: var(--link); }
.s-sheet :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The same dialog as a popup, on a wider screen: centred, about 480px wide and
   85% of the window high, over a dimmed page that closes it when pressed. */
.s-sheet-back { position: fixed; inset: 0; min-height: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20, 24, 28, .55); overscroll-behavior: contain; }
.s-sheet.is-modal { position: relative; inset: auto; z-index: auto; flex: none; width: min(480px, 100%);
  height: 85vh; height: 85dvh; max-height: 100%; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }

/* cta */
.s-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.s-cta .s-btns { margin-top: 0; }
.s-cta.align-center .wrap { flex-direction: column; text-align: center; }
.s-cta.align-center .s-lede { margin-left: auto; margin-right: auto; }
.s-cta .txt { max-width: 680px; }

/* video: click-to-load */
.s-video-box { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--video-ground); cursor: pointer; }
.s-video-box img { width: 100%; height: 100%; object-fit: cover; opacity: .94; }
.s-video-box .play { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: var(--play-ground);
  display: grid; place-items: center; box-shadow: var(--shadow-play); border: 0; cursor: pointer; transition: transform .2s var(--ease); }
.s-video-box:hover .play { transform: scale(1.05); }
.s-video-box .play:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 3px; }
.s-video-box .play svg { width: 28px; height: 28px; fill: var(--deep); stroke: none; margin-left: 5px; }
.s-video-box .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px 14px; color: var(--on-photo); font-size: 14.5px; background: var(--caption-band); }
.s-video-box .s-watch { position: absolute; left: 12px; bottom: 12px; background: var(--card); color: var(--deep); padding: 6px 10px; border-radius: var(--r-sm); font-weight: 600; }
.s-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-video-box.is-playing { cursor: auto; }
.s-video .wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: center; }
.s-video.stack .wrap { grid-template-columns: 1fr; max-width: 980px; }

/* press */
.s-press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline-2); border-bottom: 1px solid var(--hairline-2); }
.s-press-item { padding: 26px 24px 26px; display: grid; gap: 10px; align-content: start; }
.s-press-item + .s-press-item { border-left: 1px solid var(--hairline-2); }
.s-press-item .out { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.s-press-item .hl { font: 400 23px/1.2 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.sx.tone-light .s-press-item .out { color: var(--on-dark-accent); }
.sx.tone-light .s-press-item .hl { color: var(--cream); }

/* spacer */
.s-space { height: 56px; display: grid; align-items: center; }
.s-space.size-s { height: 28px; }
.s-space.size-l { height: 104px; }
.s-space .ln { height: 1px; background: var(--hairline-2); }

/* ---------------------------------------------- the site's own blocks */
/* stories index */
.s-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; list-style: none; margin: 0; padding: 0; }
.s-story { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s-story .ph { aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; border-radius: var(--r-lg); }
.s-story .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.s-story:hover .ph img { transform: scale(1.03); }
.s-story .bd { display: grid; gap: 8px; align-content: start; }
.s-story time, .s-story .when { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.s-story h2 { margin: 0; font: 400 25px/1.15 var(--font-display); letter-spacing: -.008em; color: var(--ink); }
.s-story h2 a { color: inherit; text-decoration: none; }
.s-story h2 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.s-story p { font-size: 15.5px; color: var(--ink-2); }

/* contact form */
.s-contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.s-form { display: grid; gap: 6px; max-width: 580px; }
.s-form label { font-weight: 600; font-size: 14px; margin-top: 14px; color: var(--ink); }
.s-form label .opt { font-weight: 500; color: var(--ink-3); }
.s-form input, .s-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--field-line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink); width: 100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.s-form input:focus, .s-form textarea:focus { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(8, 118, 135, .16); outline: none; }
.s-form input:focus-visible, .s-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-form textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.s-form .s-btn { margin-top: 20px; justify-self: start; cursor: pointer; }
.s-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-form .ok { color: var(--ok); font-weight: 600; margin-top: 14px; }
.s-form .err { color: var(--danger); font-weight: 600; margin-top: 14px; }
.s-contact aside h2 { font: 400 24px var(--font-display); color: var(--ink); margin: 22px 0 6px; }
.s-contact aside h2:first-child { margin-top: 0; }
.s-contact aside p { color: var(--ink-2); }

/* catalogue: product page */
.s-crumb { font-size: 15px; margin-bottom: 18px; color: var(--ink-2); }
.s-product { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: start; }
.s-product .ph { aspect-ratio: 1 / 1; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.s-product .ph img { width: 100%; height: 100%; object-fit: contain; }
.s-product .price { font-size: 24px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.s-sizes { border-collapse: collapse; margin: 6px 0 18px; }
.s-sizes th, .s-sizes td { text-align: left; padding: 8px 0; font-weight: 400; border-bottom: 1px solid var(--hairline); }
.s-sizes th { padding-right: 28px; }
.s-sizes td { font-weight: 600; white-space: nowrap; }
.s-product .meta { color: var(--ink-2); margin-top: 12px; }

/* picture cards (not a prototype type: the old site's rows of recipe and
   feature cards — photo, title, a sentence or two, an optional link) */
.s-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.s-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.s-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s-card .ph { aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.s-card .ph a { display: block; height: 100%; }
.s-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.s-cards.shape-tall .s-card .ph { aspect-ratio: 3 / 4; }
.s-cards.shape-whole .s-card .ph { aspect-ratio: auto; background: none; }
.s-cards.shape-whole .s-card .ph img { height: auto; }
.s-card h2, .s-card h3 { font: 400 25px/1.15 var(--font-display); letter-spacing: -.008em; margin: 0 0 6px; color: var(--ink); }
.sx.tone-light .s-card h2, .sx.tone-light .s-card h3 { color: var(--cream); }
.s-card h2 a, .s-card h3 a { color: inherit; text-decoration: none; }
.s-card h2 a:hover, .s-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.s-card p { font-size: 16px; color: var(--ink-2); }
.sx.tone-light .s-card p { color: rgba(var(--cream-rgb), .86); }

/* newsletter sign-up (not a prototype type: the old site's sign-up box, in a
   section and at the top of the footer) */
.s-news-box { max-width: 700px; margin: 0 auto; text-align: center; }
.s-news-box .s-lede { margin-left: auto; margin-right: auto; }
.s-signup { margin-top: 24px; position: relative; }
.s-signup-row { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.s-signup input[type="email"] { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 0 14px; min-height: 48px;
  border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--card); color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.s-signup input[type="email"]:focus { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(8, 118, 135, .16); outline: none; }
.s-signup input[type="email"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-signup input[type="email"]::placeholder { color: var(--ink-3); }
.s-signup .s-btn { cursor: pointer; white-space: nowrap; }
.s-signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-signup .ok { color: var(--ok); font-weight: 600; margin-top: 12px; }
.s-signup .err { color: var(--danger); font-weight: 600; margin-top: 12px; }
.sx.tone-light .s-signup .ok, .sx.tone-light .s-signup .err { color: var(--cream); }

/* ---- hours and directions (site review, Oct 2026) */
.s-visit-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.s-visit-col { background: var(--card, #fff); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px 26px; }
.sx.bg-white .s-visit-col { background: var(--mist); border-color: transparent; }
.s-visit-col h2, .s-visit-col h3 { display: flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px; }
.s-visit-col :is(h2, h3) svg { width: 18px; height: 18px; stroke: var(--deep); fill: none; stroke-width: 1.8; flex: none; }
.s-visit-col p { font-size: 16px; line-height: 1.55; color: var(--ink); }
.s-visit-col p + p { margin-top: 8px; }
.s-visit-col .note { font-size: 14px; color: var(--ink-2); }
.s-visit-col .s-link { margin-top: 6px; }
.s-visit-col dl, .s-visit-week dl { margin: 0; }
.s-visit-col .row, .s-visit-week .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.s-visit-col .row:first-child, .s-visit-week .row:first-child { border-top: 0; padding-top: 0; }
.s-visit-col dt { font-weight: 600; color: var(--ink); }
.s-visit-col dd { margin: 0; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-open { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--hairline-2); white-space: nowrap; }
.s-open.is-open { background: var(--sea-tint); color: var(--deep); border-color: transparent; }
.s-visit-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 28px; }
.s-visit-week :is(h2, h3) { font: 400 24px/1.15 var(--font-display); color: var(--deep); margin: 0 0 10px; }
.s-visit-week dt { color: var(--ink); } .s-visit-week dd { margin: 0; color: var(--ink-2); text-align: right; }
.s-visit .s-btns { margin-top: 28px; }
.sx.tone-light .s-visit-col { background: rgba(255, 255, 255, .06); border-color: rgba(var(--cream-rgb), .2); }
.sx.tone-light .s-visit-col p, .sx.tone-light .s-visit-col dt { color: var(--cream); }
.sx.tone-light .s-visit-col dd, .sx.tone-light .s-visit-col .note { color: rgba(var(--cream-rgb), .86); }

/* ---- header: Book a table beside the store button (site review) */
.s-hbook { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: var(--r-md); flex: none;
  border: 1px solid var(--deep); color: var(--deep) !important; background: transparent; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.s-hbook:hover { background: var(--mist); }
.s-head--logo .s-hbook { border-color: rgba(255, 255, 255, .6); color: #fff !important; }

/* ---- phones: Book / Order / Call, always one tap away on website pages (site review) */
.s-actbar { display: none; }
@media (max-width: 699px) {
  .site-page .s-actbar { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; position: sticky; bottom: 0; z-index: 25;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .s-actbar a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: var(--r-md);
    font: 600 15px/1 var(--font-ui); text-decoration: none; padding: 0 12px; }
  .s-actbar .a-book { background: var(--deep); color: #fff !important; }
  .s-actbar .a-order { border: 1px solid var(--deep); color: var(--deep) !important; background: var(--paper); }
  .s-actbar .a-call { border: 1px solid var(--hairline-2); color: var(--ink) !important; background: var(--paper); width: 50px; padding: 0; }
  .s-actbar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  html.pl-root:has(.s-actbar) { scroll-padding-bottom: 80px; }
  .site-page .s-head .s-hbook { display: none; }
}

/* --------------------------------------- the site responds to its frame */
@container site (max-width: 1399px) {
  .s-nav a.s-nl { padding: 8px 8px; font-size: 14.5px; }
  .s-head .wrap { gap: 14px; }
  /* the menu needs the room: the cart shows its count, the total is in it */
  .s-cart-sep, .s-cart .s-cart-total { display: none; }
  .s-foot .cols { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 24px; }
}
@container site (max-width: 1199px) {
  /* the menu no longer fits: the menu button takes over */
  .s-nav { display: none; }
  .s-burger { display: inline-flex; }
  .no-js .s-mnav { display: block; position: static; box-shadow: none; max-height: none; }
  .no-js .s-burger { display: none; }
}
@container site (max-width: 1099px) {
  .site .wrap, .s-mnav { --g: 24px; }
  .s-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-cards.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-press-grid { grid-template-columns: 1fr 1fr; }
  .s-press-item:nth-child(3) { border-left: 0; }
  .s-press-item:nth-child(n+3) { border-top: 1px solid var(--hairline-2); }
  .s-foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-foot .cols .brand { grid-column: 1 / -1; }
  .s-visit-grid { grid-template-columns: 1fr 1fr; }
  .s-visit-grid .s-visit-today { grid-column: 1 / -1; }
  .s-stories { grid-template-columns: 1fr 1fr; }
  .s-hero .shade { background: linear-gradient(90deg, rgba(var(--shade-rgb), .86) 0%, rgba(var(--shade-rgb), .78) 75%, rgba(var(--shade-rgb), .6) 100%); }
}
@container site (max-width: 899px) {
  .s-video .wrap { grid-template-columns: 1fr; gap: 24px; }
  .s-faq .wrap { grid-template-columns: 1fr; gap: 20px; }
  .s-menu-cats { grid-template-columns: 1fr; }
  .s-contact, .s-product { grid-template-columns: 1fr; gap: 28px; }
  .s-cards, .s-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-foot .cols { grid-template-columns: 1fr 1fr; }
}
@container site (max-width: 699px) {
  .site .wrap, .s-mnav { --g: 16px; }
  .sx-pad { padding: 52px 0; }
  .s-text, .s-body { font-size: 16px; }
  h1.s-h { font-size: 40px; }
  h2.s-h { font-size: 32px; }
  .s-hero .s-h { font-size: 42px; }
  .s-hero h2.s-h { font-size: 34px; }
  .s-lede, .s-hero .s-lede { font-size: 17px; }
  .s-head .wrap { min-height: 60px; gap: 8px; }
  .s-brand b { font-size: 27px; }
  .s-brand small { font-size: 8.5px; letter-spacing: .15em; margin-top: 4px; }
  .s-brand img { height: 38px; max-width: 170px; }
  .s-brand--logo img { height: 42px; max-width: none; }
  /* The Shop button's label is the owner's (the site settings' menu: "Shop",
     "Order online"...), so on a phone it is the one part of the row that gives:
     the brand, cart and menu button keep their size and the label wraps onto a
     second line rather than push the row past the window (a sideways scroll). */
  .s-order { height: 40px; padding: 0 14px; font-size: 14.5px; flex: 0 1 auto; min-width: 0; white-space: normal;
    text-align: center; line-height: 1.1; overflow-wrap: anywhere; text-wrap: balance; }
  .s-cart { height: 40px; padding: 0 12px 0 11px; gap: 6px; }
  .s-cart-sep, .s-cart .s-cart-total { display: none; }
  .s-burger { width: 44px; height: 40px; padding: 0; justify-content: center; }
  .s-burger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s-mnav { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); }
  .s-hero .inner, .s-hero.size-short .inner { padding: 132px 0 44px; }
  .s-bgv-btn { top: 14px; bottom: auto; right: 14px; }      /* the photo's open top, clear of the words */
  .s-hero .shade, .s-hero.align-center .shade { background: linear-gradient(180deg, rgba(var(--shade-rgb), .25) 0, rgba(var(--shade-rgb), .76) 112px, rgba(var(--shade-rgb), .9) 100%); }
  .s-hero.shade-strong .shade, .s-hero.align-center.shade-strong .shade { background: linear-gradient(180deg, rgba(var(--shade-rgb), .4) 0, rgba(var(--shade-rgb), .82) 112px, rgba(var(--shade-rgb), .95) 100%); }
  .s-hero.split .wrap { grid-template-columns: 1fr; gap: 0; }
  .s-hero.split .inner { padding: 36px 0 44px; }
  .s-hero.split .ph { margin: 0 -16px; border-radius: 0; aspect-ratio: 16 / 10; order: -1; }
  .s-btns { margin-top: 22px; }
  .s-btn { width: 100%; }
  .s-pt .wrap, .s-pt.img-right .wrap { grid-template-columns: 1fr; gap: 24px; }
  .s-pt.img-right .ph { order: 0; }
  .s-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .s-pcard { gap: 8px; }
  .s-pcard h3 { font-size: 14px; }
  .s-pcard .size, .s-pcard .note { font-size: 12px; }
  .s-pcard .price { font-size: 15px; }
  .s-pcard .s-btn { min-height: 40px; font-size: 14px; padding: 0 8px; }
  .s-gal-grid, .s-gal-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-cards, .s-cards.cols-2, .s-cards.cols-4 { grid-template-columns: 1fr; gap: 30px; }
  .s-cards:not(.shape-tall):not(.shape-whole) .s-card .ph { aspect-ratio: 4 / 3; }
  .s-signup-row { flex-direction: column; gap: 10px; }
  .s-gal-grid.mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .s-pick-cards, .s-bg-cards { grid-template-columns: 1fr; gap: 14px; }
  .s-pick { padding: 20px; }
  .s-pick .range { font-size: 31px; }
  .s-day { min-width: 0; flex: 1; }
  .s-notes { grid-template-columns: 1fr; }
  .s-visit-grid, .s-visit-week { grid-template-columns: 1fr; gap: 12px; }
  .s-visit-col { padding: 20px; }
  .s-visit-col dt { white-space: nowrap; }
  .s-visit-col dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .s-class { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .s-class .dt { height: 64px; }
  .s-class .dt b { font-size: 22px; }
  .s-class .go { grid-column: 1 / -1; justify-items: stretch; }
  .s-press-grid { grid-template-columns: 1fr; }
  .s-press-item + .s-press-item { border-left: 0; border-top: 1px solid var(--hairline-2); }
  .s-press-item { padding: 18px 2px; }
  /* phones: the short lists side by side, the rest full width */
  .s-foot .cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .s-foot .cols .brand, .s-foot .cols .hours, .s-foot .cols .policies { grid-column: 1 / -1; }
  .s-foot .cols .explore { order: 1; }
  .s-foot .cols .follow { order: 2; }
  .s-foot .cols .policies { order: 3; }
  .s-foot-signup .s-foot-signup-t h2 { font-size: 26px; }
  .s-cta .wrap { gap: 18px; }
  .s-faq-q .q { font-size: 16.5px; }
  .s-head-row { margin-bottom: 22px; }
  .s-stories { grid-template-columns: 1fr; gap: 32px; }
  .s-embed iframe { min-height: 680px; }
  .s-embed[data-embed-open] iframe { min-height: 1400px; }
  .s-menu-cat h1, .s-menu-cat h2, .s-menu-cat h3 { font-size: 25px; }
  .s-bg-card { padding: 22px 20px; }
}
@container site (max-width: 419px) {
  /* the logo, the label "Order online" and the cart all fit from here down */
  .s-brand--logo img { height: 36px; }
  .s-head .wrap { gap: 6px; }
  .s-order { padding: 0 12px; }
}
@container site (max-width: 380px) {
  .s-brand small { display: none; }
}
@container site (max-width: 359px) {
  /* the smallest phones: the row gives a little everywhere so a two-line
     "Order online" still has room beside the cart and the menu button */
  .s-head .wrap { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .s-brand--logo img { height: 32px; }
  .s-order { padding: 0 8px; font-size: 13px; }
  .s-cart { padding: 0 9px 0 8px; gap: 4px; }
  .s-burger { width: 40px; }
}
@container site (min-width: 1200px) {
  /* the menu is in the header: the phone panel never shows, even if it was
     left open on a narrower window */
  .s-head:not(.nav-overflow).open .s-mnav, .no-js .s-mnav { display: none; }
}
/* The announcement bar spans the window on every page, so its gutter
   follows the window (on a store page it has no `site` container above it). */
@media (max-width: 1099px) { .s-ann { --g: 24px; } }
@media (max-width: 699px) { .s-ann { --g: 16px; font-size: 13px; padding-top: 9px; padding-bottom: 9px; } }
/* With scripts off the phone menu is the open list under the header, so the
   header must scroll away rather than stick (a stuck header taller than the
   window would hide the end of its own list). */
.no-js .s-head { position: static; }
/* ...but a browser that runs scripts never shows that open list, not even in the moment
   before site.js swaps no-js for js. On a slow phone the first paint came first: the list
   pushed the page 370 px down, then vanished (a jump), and the hero's photo was measured as
   the largest paint at the size it had while pushed half out of view, so anything drawn later
   at the hero's full size (its background video) took over as the largest paint, seconds
   later (site review, Oct 2026). Browsers that do not know `scripting` keep the rules above. */
@media (scripting: enabled) {
  .no-js .s-mnav { display: none; }
  .no-js .s-head { position: sticky; }
  @container site (max-width: 1199px) { .no-js .s-burger { display: inline-flex; } }
}

/* Browsers without container queries (Safari < 16, Chrome < 105): the
   public page's container is the viewport, so the same breakpoints as
   media queries give the same layout. Only the rules that change the
   layout are repeated. */
@supports not (container-type: inline-size) {
  @media (max-width: 1399px) {
    .s-nav a.s-nl { padding: 8px 8px; font-size: 14.5px; }
    .s-cart-sep, .s-cart .s-cart-total { display: none; }
  }
  @media (max-width: 1199px) {
    .s-nav { display: none; }
    .s-burger { display: inline-flex; }
    .no-js .s-mnav { display: block; position: static; box-shadow: none; max-height: none; }
    .no-js .s-burger { display: none; }
  }
  @media (scripting: enabled) and (max-width: 1199px) {
    .no-js .s-mnav { display: none; }
    .no-js .s-burger { display: inline-flex; }
  }
  @media (max-width: 1099px) {
    .site .wrap, .s-mnav { --g: 24px; }
    .s-prod-grid, .s-cards.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s-press-grid, .s-stories { grid-template-columns: 1fr 1fr; }
    .s-foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s-foot .cols .brand { grid-column: 1 / -1; }
  }
  @media (max-width: 899px) {
    .s-video .wrap, .s-faq .wrap, .s-menu-cats, .s-contact, .s-product { grid-template-columns: 1fr; }
    .s-cards, .s-cards.cols-4, .s-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 699px) {
    .site .wrap, .s-mnav { --g: 16px; }
    .sx-pad { padding: 52px 0; }
    h1.s-h { font-size: 40px; }
    h2.s-h { font-size: 32px; }
    .s-hero .s-h { font-size: 42px; }
    .s-hero h2.s-h { font-size: 34px; }
    .s-head .wrap { min-height: 60px; gap: 8px; }
    .s-brand b { font-size: 27px; }
    .s-brand--logo img { height: 42px; }
    .s-order, .s-cart { height: 40px; }
    .s-order { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
    .s-cart-sep, .s-cart .s-cart-total { display: none; }
    .s-burger { width: 44px; height: 40px; padding: 0; justify-content: center; }
    .s-burger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .s-hero .inner, .s-hero.size-short .inner { padding: 132px 0 44px; }
    .s-bgv-btn { top: 14px; bottom: auto; right: 14px; }
    .s-hero .shade, .s-hero.align-center .shade { background: linear-gradient(180deg, rgba(var(--shade-rgb), .25) 0, rgba(var(--shade-rgb), .76) 112px, rgba(var(--shade-rgb), .9) 100%); }
    .s-hero.split .wrap, .s-pt .wrap, .s-pt.img-right .wrap, .s-pick-cards, .s-bg-cards, .s-notes,
    .s-press-grid, .s-foot .cols, .s-stories { grid-template-columns: 1fr; }
    .s-prod-grid, .s-gal-grid, .s-gal-grid.cols-4, .s-gal-grid.mosaic { grid-template-columns: 1fr 1fr; }
    .s-cards, .s-cards.cols-2, .s-cards.cols-4 { grid-template-columns: 1fr; }
    .s-signup-row { flex-direction: column; gap: 10px; }
    .s-btn { width: 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .s-head, .s-ann, .s-foot .cols > div:not(.brand), .s-foot-signup, .s-video-box .play, .s-bgv-btn, .skip { display: none !important; }
  .sx-pad { padding: 18px 0; }
}

/* headings inside the site's own built-in blocks */
.s-card-h { font: 500 15px/1.35 var(--font-ui); margin: 0; color: var(--ink); }
.s-card-h a { color: inherit; text-decoration: none; }
.s-card-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-aside-h { font: 400 24px/1.15 var(--font-display); letter-spacing: -.008em; color: var(--ink); margin: 24px 0 6px; }
.s-aside-h:first-child { margin-top: 0; }