/* Marina Greens — global stylesheet (every page). The design is MG's approved static preview (Oct 2026):
   street-sign plates on a lavender leaf-tile background. Tokens come from theme.json (palette, fonts,
   sizes) and are mirrored here with their dark-mode values; the components the design defines (.band
   + .bg, .plate, .copy / .copy.bd, .btn / .btn.ghost, .eyebrow, .kicker, .dot) are in "MG design
   components" below and as block styles (inc/blocks.php). Area styles load only where needed:
   menu.css, product.css, deals.css, delivery.css, prose.css, blog.css (see inc/assets.php). */

/* Metric-matched fallback for the display face (Archivo), so headings keep their line count while it
   swaps in on a slow first visit (size-adjust = average advance ratio; overrides = Archivo's ascent /
   descent ÷ size-adjust): Arial or a metric twin, one face per weight the site uses. The body face
   (Public Sans) falls back to the system UI face. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Helvetica"),local("Roboto");font-weight:400;size-adjust:98.2%;ascent-override:89.4%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Helvetica"),local("Roboto");font-weight:500;size-adjust:99.8%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600;size-adjust:95.5%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:700;size-adjust:98.5%;ascent-override:89.2%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:800;size-adjust:103%;ascent-override:85.3%;descent-override:20.4%;line-gap-override:0%}

/* Tokens. The palette is theme.json's (--wp--preset--color--*); dark mode (below) redefines those
   presets, so editor colour picks flip with the page. The second group are the fork's older names,
   kept as aliases so components later phases still restyle (deal ticket, menu, forms…) draw in the
   MG palette until they are ported. */
:root{color-scheme:light;
--ink:var(--wp--preset--color--ink,#14121A);--paper:var(--wp--preset--color--paper,#FBFAFC);--plate:var(--wp--preset--color--plate,#FFFFFF);--plate-2:var(--wp--preset--color--plate-2,#F4F1F7);--lav:var(--wp--preset--color--lav,#C6A4CE);--lav-soft:var(--wp--preset--color--lav-soft,#EFE6F2);--blue:var(--wp--preset--color--blue,#0171C1);--blue-deep:var(--wp--preset--color--blue-deep,#0450A8);--cyan:var(--wp--preset--color--cyan,#00B0F1);--amber:var(--wp--preset--color--amber,#FE9023);--grey:var(--wp--preset--color--grey,#5A5560);--line:var(--wp--preset--color--line,#E0DCE6);--line-strong:var(--wp--preset--color--line-strong,#14121A);
--amber-ink:#1A1205;--lav-on-ink:var(--lav);--danger:#B3261E;--ok:#0E6B52;--field:#77707F;
--plate-shadow:0 1px 0 rgba(20,18,26,.06),0 8px 22px -12px rgba(20,18,26,.30);
--tile:url("../img/leaf-tile.svg");--leaf:var(--wp--custom--leaf,510px);--bg-brand:1;--bg-content:.45;--bg-quiet:.25;
--ink-2:color-mix(in srgb,var(--ink) 90%,var(--paper));--ink-hover:color-mix(in srgb,var(--ink) 84%,var(--paper));--ink-line:color-mix(in srgb,var(--paper) 18%,var(--ink));--fog:var(--paper);--concrete:var(--plate-2);--rule:var(--line);--graphite:var(--grey);--mute:var(--grey);--smoke:color-mix(in srgb,var(--paper) 78%,var(--ink));--red:var(--danger);--red-press:color-mix(in srgb,var(--danger) 80%,#000);--flare:#FF8A80;--go:var(--ok);--go-on-ink:#5FD3B0;
--f-display:var(--wp--preset--font-family--display,Archivo,"Archivo Fallback","Helvetica Neue",Helvetica,Arial,sans-serif);--f-body:var(--wp--preset--font-family--body,"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif);--f-sign:var(--wp--preset--font-family--sign,"Highway Gothic",Overpass,Archivo,sans-serif);--f-stamp:var(--wp--preset--font-family--stamp,"Big Shoulders Stencil Display",Archivo,sans-serif);
--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1.0625rem;--fs-md:clamp(1.0625rem,1rem + .3vw,1.1875rem);--fs-lg:clamp(1.0625rem,.98rem + .45vw,1.25rem);--fs-xl:clamp(1.25rem,1.1rem + .7vw,1.625rem);--fs-2xl:clamp(1.4375rem,4.3vw,2rem);--fs-3xl:clamp(1.5625rem,4.8vw,2.5rem);--fs-hero:clamp(1.5rem,4.6vw,2.375rem);
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--section:var(--wp--custom--section,clamp(30px,5.5vw,54px));--gutter:var(--wp--custom--gutter,16px);--max:var(--wp--custom--max,1120px);--hdr:64px;--bar:76px;
--r-1:6px;--r-2:10px;--r-3:14px;--r:12px;--r-pill:999px;--sh-2:var(--plate-shadow);--sh-bar:0 -10px 24px -14px rgba(20,18,26,.3);
--ease:var(--wp--custom--ease,cubic-bezier(.2,.7,.2,1));--d-1:140ms;--d-2:240ms;--d-3:560ms;--focus:var(--blue)}
/* Dark mode follows the visitor's system setting (the design's values); data-theme="light|dark" on
   <html> forces either. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
--wp--preset--color--ink:#F2EFF5;--wp--preset--color--paper:#121016;--wp--preset--color--plate:#1C1922;--wp--preset--color--plate-2:#221E2A;--wp--preset--color--lav:#8C74A0;--wp--preset--color--lav-soft:#241F2C;--wp--preset--color--blue:#4FA9E8;--wp--preset--color--blue-deep:#7FC4F2;--wp--preset--color--cyan:#42C8F5;--wp--preset--color--amber:#FFA94D;--wp--preset--color--grey:#A39CAE;--wp--preset--color--line:#332D3D;--wp--preset--color--line-strong:#F2EFF5;
--danger:#FF8A80;--ok:#5FD3B0;--lav-on-ink:#5E4B70;--field:#8E85A0;--tile:url("../img/leaf-tile-dark.svg");--plate-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.75);--flare:#B3261E;--go-on-ink:#0E6B52}}
:root[data-theme="dark"]{color-scheme:dark;
--wp--preset--color--ink:#F2EFF5;--wp--preset--color--paper:#121016;--wp--preset--color--plate:#1C1922;--wp--preset--color--plate-2:#221E2A;--wp--preset--color--lav:#8C74A0;--wp--preset--color--lav-soft:#241F2C;--wp--preset--color--blue:#4FA9E8;--wp--preset--color--blue-deep:#7FC4F2;--wp--preset--color--cyan:#42C8F5;--wp--preset--color--amber:#FFA94D;--wp--preset--color--grey:#A39CAE;--wp--preset--color--line:#332D3D;--wp--preset--color--line-strong:#F2EFF5;
--danger:#FF8A80;--ok:#5FD3B0;--lav-on-ink:#5E4B70;--field:#8E85A0;--tile:url("../img/leaf-tile-dark.svg");--plate-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.75);--flare:#B3261E;--go-on-ink:#0E6B52}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px);scroll-padding-bottom:calc(var(--bar) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-base)/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.num,.tab,.hours,.licence{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;letter-spacing:-.018em}
/* running-text links (the design: deep blue) — components set their own colour */
:where(main) :where(p,li,dd,td,figcaption)>a:not([class]){color:var(--blue-deep)}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role=list],ol[role=list],.drawer ul,.fcol ul,.nav__list,.legal-links,.steps{list-style:none;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
main:focus,.filters__h:focus{outline:none}
.sr-only,.screen-reader-text{position:absolute;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:-80px;z-index:100;padding:12px 16px;background:var(--ink);color:var(--paper);font-weight:700;border-radius:var(--r-1)}
.skip:focus{top:12px;box-shadow:0 0 0 2px var(--paper)}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:18px;height:18px}

/* WordPress wrappers: template parts and block wrappers never add boxes or gaps of their own */
.wp-site-blocks>*{margin-block:0}
.part{display:contents}
.wp-block-group:where(.section,.band,.hero,.wrap,.page-head){margin-block:0}
.wp-block-image:where(.hero__photo,.why__photo,.prose__fig){margin:0}

/* layout */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
main{display:block;padding-bottom:var(--section)}
.section{padding-top:var(--section)}
.section--tight,.section--flush{padding-top:calc(var(--section)*.6)}
.section--first{padding-top:0}
.section--deal{padding-top:var(--s-6)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn-row--stack{display:grid}
.split{display:grid;gap:var(--s-5)}
.split__note{margin-top:var(--s-3);color:var(--graphite);font-size:var(--fs-sm);max-width:22rem}

/* shared surfaces */
.panel,.is-style-panel,.card,.quote,.is-style-review,.rating,.cat,.fact,.step,.day,.offer,.post-card,.post-lead,.pdp__buy,.pdp__well,.nf__link,.state,.cta-band,.callout,.is-style-callout,.is-style-callout-deal,.dealday,.map__frame,.deal-strip{border:1px solid var(--line);border-radius:var(--r-2);background:var(--plate)}
/* shared type families: the wide-caps label (the design's eyebrow) and the display face */
.label,.is-style-label,.hero__kicker,.ticket__label,.fgroup legend,.hours thead th,.fact dt,.stats dt,.bgroup h4,.link-arrow,.is-style-link-arrow a,.daytag,.card__brand{font:700 var(--fs-xs)/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.h1,.h2,.hero__h,.panel__h,.cta-band__h,.signup__h,.gate__title,.pdp__name,.post-lead__h,.prose h2,.ticket__deal,.drawer__main a,.rail__d,.cat__count,.card__ph,.filters__h,.stats dd,.pdp__price b,.day__name,.offer .offer__big,.fact dd,.step::before,.nf__code::before,.rating__score{font-family:var(--f-display);font-weight:800;line-height:1.12;letter-spacing:-.018em;text-wrap:balance}

/* type */
.label,.is-style-label{color:var(--graphite);margin-bottom:var(--s-2)}
/* the home H1's topic line (span.hero__kicker inside h1.hero__h) reads as the eyebrow label above it */
.hero__kicker{display:block;margin-bottom:var(--s-4);color:var(--graphite);text-wrap:pretty}
.hero__h:has(.hero__kicker){margin-top:0}
.label--light{color:var(--smoke)}
.h1{font-size:var(--fs-3xl);line-height:1.1}
.h2{font-size:var(--fs-2xl);line-height:1.15}
.h3{font:700 var(--fs-lg)/1.25 var(--f-display);letter-spacing:-.01em}
.lead,.is-style-lead{font-size:var(--fs-md);line-height:1.5;color:var(--graphite);max-width:40rem;text-wrap:pretty}
.fine,.is-style-fine{font-size:var(--fs-xs);color:var(--mute)}
.deal-text{color:var(--red)}
.nowrap{white-space:nowrap}

/* buttons, links, fields. The design's .btn (ink, 2px sign border, lifts on hover with a lavender
   shadow) and .btn.ghost (plate). core/button: default = .btn; is-style-ghost / -outline = ghost;
   -deal (amber) / -light / -ghost-light (on ink); size classes btn--sm / btn--lg / btn--block on the
   wp-block-button wrapper; has-arrow (or span.ar inside a .btn) adds the arrow. */
.btn,.wp-block-button .wp-block-button__link{--bg:var(--ink);--fg:var(--paper);--bd:var(--line-strong);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border:2px solid var(--bd);border-radius:var(--r-2);background:var(--bg);color:var(--fg);font:700 1.03125rem/1.15 var(--f-display);letter-spacing:0;text-transform:none;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--d-1) ease,box-shadow var(--d-1) ease,background-color var(--d-1),color var(--d-1)}
.btn:hover,.wp-block-button .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 8px 0 -4px var(--lav)}
.btn .ar{font-size:1.1875rem;line-height:1;transition:transform .16s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn--primary,.wp-block-button:not([class*=is-style-]) .wp-block-button__link,.wp-block-button.is-style-fill .wp-block-button__link{--bg:var(--ink);--fg:var(--paper)}
.btn.ghost,.btn--outline,.btn--ghost,.wp-block-button.is-style-outline .wp-block-button__link,.wp-block-button.is-style-ghost .wp-block-button__link{--bg:var(--plate);--fg:var(--ink);--bd:var(--line-strong)}
.btn--deal,.is-style-deal .wp-block-button__link{--bg:var(--amber);--fg:var(--amber-ink);--bd:var(--line-strong)}
.btn--light,.is-style-light .wp-block-button__link{--bg:var(--paper);--bd:var(--paper);--fg:var(--ink)}
.btn--ghost-light,.is-style-ghost-light .wp-block-button__link{--bg:transparent;--bd:var(--smoke);--fg:var(--paper)}
.btn--ghost-light:hover,.is-style-ghost-light .wp-block-button__link:hover{--bd:var(--paper)}
.btn.sm,.btn--sm:not(.wp-block-button),.wp-block-button.btn--sm .wp-block-button__link{min-height:44px;padding:0 15px;font-size:.9375rem}
.btn--lg:not(.wp-block-button),.wp-block-button.btn--lg .wp-block-button__link{min-height:56px;padding:0 26px;font-size:1.0625rem}
.btn--block,.wp-block-button.btn--block,.wp-block-button.btn--block .wp-block-button__link{width:100%}
.btn:focus-visible,.wp-block-button__link:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-2)}
.wp-block-buttons{gap:var(--s-2)}
.wp-block-buttons>.wp-block-button{margin:0}
.has-arrow .wp-block-button__link::after,.is-style-link-arrow a::after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/18px no-repeat;mask:var(--arrow) center/18px no-repeat;transition:transform var(--d-2) var(--ease)}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E")}
.btn__i,.link-arrow .i,.day__i,.faq__i,.more-brands .i{transition:transform var(--d-2) var(--ease)}
.btn:hover .btn__i,.link-arrow:hover .i,.has-arrow .wp-block-button__link:hover::after,.is-style-link-arrow a:hover::after{transform:translateX(3px)}
.link-arrow,.is-style-link-arrow a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;letter-spacing:.12em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.link-arrow--light{color:var(--paper)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-1);background:none;cursor:pointer}
.icon-btn:hover{background:var(--concrete)}
.field{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--field);border-radius:var(--r-1);background:var(--paper);color:var(--ink);font-size:1rem}
.field::placeholder{color:var(--mute)}
.field:focus-visible{outline-offset:0;border-color:var(--ink)}
.field--select{width:auto;min-height:44px;padding:0 34px 0 12px;appearance:none;font-size:var(--fs-sm);font-weight:600;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 18px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink) 50%) right 12px center/6px 6px no-repeat,var(--paper)}
.field--dark{background:var(--ink-2);color:var(--paper)}
.field--dark::placeholder{color:var(--smoke)}
.field--dark:focus-visible{border-color:var(--paper)}
textarea.field{display:block;min-height:9rem;padding:12px 14px;line-height:1.5;resize:vertical}
.field[aria-invalid=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.field--dark[aria-invalid=true]{border-color:var(--flare);box-shadow:inset 0 0 0 1px var(--flare)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:progress}
.search:not(body){position:relative;display:flex;align-items:center;gap:var(--s-2)}
.search__i{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.search__input{flex:1;min-width:0;min-height:52px;padding-left:44px}
.search__go,.btn.search__go{flex:none;min-height:52px}

/* status + day tag (amber tag, dark text: the design's deal tag) */
.status{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-sm)}
.status::before,.stock::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none}
.status::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent)}
.stock::before{background:var(--go)}
.is-closed .status::before,.status.is-closed::before,.status.is-pending::before{background:var(--grey);box-shadow:none}
.daytag{display:inline-grid;place-items:center;flex:none;min-width:36px;padding:4px 6px;border:1.5px solid var(--line-strong);border-radius:var(--r-1);background:var(--amber);color:var(--amber-ink);font-weight:800;line-height:1;letter-spacing:.06em}

/* utility bar (block marina/util-bar: not in the MG design's header; kept for pages that place it) */
.util{--focus:var(--paper);background:var(--ink);color:var(--paper);font-size:var(--fs-sm)}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:40px}
.util__deal{display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;font-weight:600;text-decoration:none}
.util__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.util__meta{display:none;align-items:center;gap:24px;color:var(--smoke)}
.util--nodeal .util__meta{display:flex;justify-content:space-between;width:100%}
.util__meta a{color:var(--paper);text-decoration:none}
.util .status::before{background:var(--go-on-ink);box-shadow:none}
.is-closed .util .status::before,.util .status.is-closed::before,.util .status.is-pending::before{background:var(--smoke)}

/* header: frosted paper bar, the sign logo left, the main menu + "Order now" right (≥ 861 px); under
   861 px the menu is the bottom tab bar (marina/action-bar) and the burger opens the drawer. */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(2px)){.site-header{background:color-mix(in srgb,var(--paper) 97%,transparent)}}
.admin-bar .site-header{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .site-header{top:0}}
.site-header.is-stuck{box-shadow:0 10px 24px -22px rgba(20,18,26,.6)}
.site-header__in{display:flex;align-items:center;gap:14px;min-height:var(--hdr)}
.brand{display:block;flex:none;margin-right:auto;border-radius:var(--r-1)}
.brand__img{display:block;width:138px;height:46px}
.nav{display:none}
.nav__list{display:flex;align-items:center;gap:24px}
.nav__list a{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 .9375rem/1.2 var(--f-display);text-decoration:none;white-space:nowrap;cursor:pointer}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--lav);transform:scaleX(0);transform-origin:left;transition:transform var(--d-2) var(--ease)}
.nav__list a:hover::after,.nav__list a[aria-current=page]::after{transform:scaleX(1)}
.site-header__order{display:none;flex:none}
.burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:var(--r-1);background:none;color:var(--ink);cursor:pointer}
.burger__lines{display:grid;justify-items:end;gap:5px;width:24px}
.burger__lines i{display:block;height:2px;border-radius:1px;background:currentColor}
.burger__lines i:nth-child(1){width:24px}.burger__lines i:nth-child(2){width:17px}.burger__lines i:nth-child(3){width:10px}

/* native <dialog>s */
.drawer,.gate{max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--ink)}
.drawer::backdrop{background:rgb(11 11 11/.5)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);height:100%;padding:0 var(--gutter) var(--s-6);background:var(--fog);overflow-y:auto;overscroll-behavior:contain}
/* the page behind an open drawer or filter sheet does not scroll */
html:has(.drawer[open],.sheet[open]){overflow:hidden}
.drawer[open]{display:flex;flex-direction:column}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hdr);margin-bottom:var(--s-3)}
.drawer__main a{display:block;padding:10px 0;border-bottom:1px solid var(--rule);font-size:2.25rem;text-decoration:none}
.drawer__more{display:flex;flex-wrap:wrap;gap:0 20px;margin:var(--s-4) 0 var(--s-6)}
.drawer__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.drawer__foot{display:grid;gap:var(--s-3);margin-top:auto;color:var(--graphite);font-size:var(--fs-sm)}
.drawer__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.gate{--focus:var(--paper);position:fixed;inset:0;width:100%;height:100%;padding:var(--gutter);background:var(--ink);color:var(--paper)}
/* top-anchored at about the centre (content is ~370–430 px tall), not re-centred on its own height:
   a late font swap that changes the legal line's length must not move the question or buttons */
.gate[open]{display:grid;justify-items:center;align-items:start;padding-top:max(var(--gutter),calc(50vh - 12rem));padding-top:max(var(--gutter),calc(50svh - 12rem))}
.gate::backdrop{background:var(--ink)}
.gate__in{display:grid;justify-items:center;gap:var(--s-4);width:min(100%,400px);text-align:center}
.gate__logo{width:210px;margin-bottom:var(--s-4)}
.gate__title{font-size:var(--fs-2xl);line-height:.95}
.gate__desc,.gate__leave,.gate__legal{color:var(--smoke)}
.gate__actions{display:grid;gap:10px;width:100%;margin-top:var(--s-2)}
.gate__leave{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.gate__legal{margin-top:var(--s-4);font-size:var(--fs-xs);text-wrap:balance}

/* mobile tab bar (marina/action-bar): Home · Deals · Visit · the "Shop menu →" pill; under 861 px */
.actionbar{position:fixed;inset:auto 0 0 0;z-index:45;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.65fr);gap:6px;align-items:center;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--plate);border-top:2px solid var(--line-strong)}
.actionbar__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-radius:8px;color:var(--ink);font:700 .6875rem/1 var(--f-display);text-decoration:none}
.actionbar__item .i{width:20px;height:20px;stroke-width:2}
.actionbar__item[aria-current=page]:not(.actionbar__item--primary){background:var(--lav-soft)}
.actionbar__item--primary{--focus:var(--blue);flex-direction:row;gap:6px;padding-inline:6px;border:2px solid var(--line-strong);background:var(--ink);color:var(--paper);font-size:.84375rem;white-space:nowrap}
.actionbar__badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:0;padding:2px 4px;font-size:.625rem}
@media (min-width:430px){.actionbar__item--primary{gap:8px;font-size:.90625rem}}

/* section head, hero */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-5)}
/* The heading's flex basis is its longest word (basis 0, content minimum), so the link stays beside
   it whenever that fits and drops under it only when even one word per line would not ("Brands in
   concentrates" + "All 110 brands" at 320 px) — never wider than the screen. */
.sec-head>:not(.link-arrow):not(.is-style-link-arrow){flex:1 1 0;overflow-wrap:break-word}
.sec-head .link-arrow,.sec-head .is-style-link-arrow{flex:none;margin-bottom:-10px}
.hero{padding-top:var(--s-5)}
.hero__grid,.hero__side{display:grid;gap:var(--s-4)}
.hero__h{font-size:var(--fs-hero);line-height:.86;margin-top:var(--s-2)}
.hero__cta,.wp-block-buttons.hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.hero__cta .btn--lg{grid-column:1/-1}
.points .h3+p{margin-top:4px}
.hero__cta .wp-block-button{width:100%}
.hero__cta .wp-block-button .wp-block-button__link{width:100%}
.hero__status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;color:var(--graphite);font-size:var(--fs-sm)}
.hero__photo{margin-top:var(--s-5)}
.hero__photo picture{display:block}
.hero__photo img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 45%}

/* rails (phones) */
.scroller{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller:focus-visible{outline-offset:-3px}

/* why, duo panels, reviews */
.why__grid,.visit__grid{display:grid;gap:var(--s-5)}
.why__photo{display:none}
.why .lead{margin-top:var(--s-3)}
.points{margin-top:var(--s-5);border-top:1px solid var(--rule)}
.points li,.points>.wp-block-group{padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}
.points p{margin-top:4px;color:var(--graphite);font-size:var(--fs-sm)}
.duo,.deliv-grid{display:grid;gap:var(--s-3)}
.panel,.is-style-panel,.is-style-panel-ink{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-5)}
.panel .label,.panel .is-style-label{margin-bottom:0}
.panel__h{font-size:var(--fs-xl)}
.panel p{color:var(--graphite)}
.panel .facts{display:flex;flex-wrap:wrap;gap:2px 8px;color:var(--ink);font-size:var(--fs-sm)}
.panel .facts--hours{display:block}
.panel .link-arrow,.panel .is-style-link-arrow{margin-top:auto}
.panel--ink,.is-style-panel-ink{--focus:var(--paper);border:1px solid var(--ink);border-radius:var(--r-2);background:var(--ink);color:var(--paper)}
.panel--ink p,.is-style-panel-ink p{color:var(--smoke)}
.ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.rating{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 6px;height:100%;padding:12px;text-decoration:none}
.rating:hover{border-color:var(--ink)}
.rating__score{font-size:2rem}
.rating__star{width:18px;height:18px}
.rating__src{grid-column:1/-1;color:var(--mute);font-size:var(--fs-xs);line-height:1.35}
.rating__src b{display:block;color:var(--ink);font-size:.8125rem}
.reviews .fine{margin:var(--s-2) 0 var(--s-4)}
.quotes{display:grid;gap:var(--s-3)}
.quote,.is-style-review{display:flex;flex-direction:column;gap:var(--s-4);height:100%;padding:var(--s-5)}
.quote figcaption,.is-style-review cite{display:grid;gap:2px;margin-top:auto;color:var(--mute);font-size:.8125rem;font-style:normal}
.quote figcaption b{color:var(--ink)}
.wp-block-quote.is-style-review{margin:0;border-left:1px solid var(--rule)}
.quotes>li{margin:0}
.quotes--grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.reviews__more{margin-top:var(--s-3)}
.reviews__more a{white-space:nowrap}

/* visit */
.visit__addr{margin:var(--s-3) 0 var(--s-4);color:var(--graphite)}
.hours{width:100%;margin:var(--s-3) 0 var(--s-5);border-collapse:collapse;font-size:var(--fs-sm)}
.hours th,.hours td{padding:9px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.hours th{font-weight:600}
.hours td,.hours thead th{text-align:right}
.hours thead th{padding-top:0;color:var(--mute);letter-spacing:.1em}
.hours .is-today th,.hours .is-today td{font-weight:700}
.hours--pending{color:var(--graphite);font-weight:600;border-collapse:separate}
.hours__note{margin:calc(-1*var(--s-3)) 0 var(--s-4);color:var(--mute)}
.hours__note+.hours__note{margin-top:calc(4px - var(--s-4))}
.hours .is-today th::after{content:"Today";margin-left:8px;padding:2px 6px;border-radius:var(--r-1);background:var(--ink);color:var(--paper);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}
.map__frame{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--concrete)}
.map__frame.is-focused{outline:3px solid var(--focus);outline-offset:2px} /* keyboard focus inside Google's map (marked by the visit block's view.js): show where it is (WCAG 2.4.7) */
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85)}
.map__fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--graphite);text-decoration:none;font-weight:600}
.map__fallback small{text-decoration:underline}

/* footer: the ink band (paper on ink; in dark mode the inverse) — sign logo, a short line, phone and
   address (Business info), the "Shop" and "Visit & info" menus, then the meta row (licence line,
   who may shop, ©, accessibility line, legal links). The sign-up band (marina/newsletter) sits above. */
.site-footer{--focus:var(--lav);padding:34px 0 24px;border-top:2px solid var(--line-strong);background:var(--ink);color:var(--paper)}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.signup{display:grid;gap:var(--s-4);padding-bottom:var(--s-6);margin-bottom:var(--s-6);border-bottom:1px solid var(--ink-line)}
.signup__h{font-size:var(--fs-2xl);line-height:1.15}
.signup__form{display:grid;gap:var(--s-2)}
.signup__fine,.fcol__h{color:var(--smoke);font-size:var(--fs-xs)}
/* the "Get deals by text" link inside the fine print: paper + underlined, like the legal links (WCAG 1.4.1) */
.signup__fine a,.site-footer .signup__fine a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.signup__status:not(:empty){display:block;margin-top:6px;color:var(--paper);font-size:var(--fs-sm);font-weight:600}
.signup__status.is-ok{color:var(--go-on-ink)}
.signup__status.is-error{color:var(--flare)}
/* the band outside the footer (pattern newsletter-band): the same ink band, as a card */
.site-main .signup:not(.signup--page){--focus:var(--lav);margin-bottom:0;padding:var(--s-6) var(--s-5);border:2px solid var(--line-strong);border-radius:var(--r);background:var(--ink);color:var(--paper)}
/* the /sign-up/ page variant (light): name, email, mobile, SMS opt-in */
.signup.signup--page{gap:var(--s-4);margin-bottom:0;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-2);background:var(--plate)}
.signup--page .signup__copy .label{margin-bottom:var(--s-2)}

/* forms (marina/contact-form, the sign-up page): p.form__field > label.label + control + span.form__error */
.form{display:grid;gap:var(--s-4);margin:0}
.form__field{display:grid;gap:6px;margin:0}
.form__field .label{margin:0}
.form__field .field--select{width:100%;min-height:48px;padding-left:14px;font-size:1rem;font-weight:400}
.form__opt{font-stretch:100%;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--mute)}
.form__error{color:var(--red);font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.form__check{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--graphite);font-size:var(--fs-sm);line-height:1.45}
.form__check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.form__check label{cursor:pointer}
.form__fine{margin:0}
.form>.btn{justify-self:start;min-width:12rem}
.form__status{margin:0;padding:12px 16px;border:1px solid var(--rule);border-left:4px solid var(--field);border-radius:0 var(--r-2) var(--r-2) 0;background:var(--paper);font-size:var(--fs-sm);font-weight:600}
.form__status.is-ok{border-left-color:var(--go)}
.form__status.is-error{border-left-color:var(--red);color:var(--red)}
.form__status:empty{margin-top:calc(-1*var(--s-4));padding:0;border:0;background:none}
.form[aria-busy=true]{cursor:progress}

/* community timeline (marina/community, layout "timeline"): newest year first */
.timeline{display:grid;gap:var(--s-6)}
.timeline__year{display:grid;gap:var(--s-3)}
.timeline .timeline__h{margin:0;font:800 var(--fs-xl)/1 var(--f-display);text-transform:uppercase;letter-spacing:.004em}
.timeline__list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.timeline__item{display:grid;gap:2px;margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
.timeline__name{font-weight:700;line-height:1.35}
.timeline .timeline__kind{order:-1;margin:0;color:var(--mute)}
.timeline__text{color:var(--graphite);font-size:var(--fs-sm)}
.timeline__text>*+*{margin-top:.5em}
.timeline--empty{color:var(--graphite)}
.site-footer__grid{display:grid;gap:24px}
.fbrand__logo{display:block;width:min(100%,220px);height:auto;margin-bottom:14px}
.fbrand p{max-width:34ch;margin:0 0 12px;font-size:.90625rem;line-height:1.55}
.fbrand__line{opacity:.85}
.fcol__h{margin:0 0 11px;color:var(--lav-on-ink);font:700 .75rem/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.fcol ul{display:grid;gap:8px;font-size:.90625rem}
.fcol a{display:inline-flex;align-items:center;min-height:24px}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:26px;padding-top:17px;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent);font-size:.8125rem}
.site-footer__legal>*,.footer-legal>*{margin:0;opacity:.85}
.footer-legal{display:contents}
.licence{font-family:var(--f-display);font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* on ink surfaces (footer, black panels, gate, ticket, utility bar) the licence line is paper */
:is(.site-footer,.panel--ink,.is-style-panel-ink,.gate,.ticket,.util,.day.is-today) .licence{color:var(--paper)}
.site-footer__legal a{text-decoration:underline;text-underline-offset:2px}
.legal-links{display:flex;flex-wrap:wrap;gap:0 16px}
.legal-links a{display:inline-flex;align-items:center;min-height:24px}

/* page head, breadcrumbs, deal strip, CTA band */
.page-head{padding:var(--s-3) 0 var(--s-6)}
.page-head .lead{margin-top:var(--s-4)}
.page-head__cta{margin-top:var(--s-5)}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 var(--s-3);padding:0;color:var(--mute);font-size:.8125rem}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";flex:none;margin:0 8px;color:var(--field)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
/* the current page (the H1 repeats it in full) keeps to one line: it takes what is left of the row, or
   a row of its own when less than ~9rem is left, and ends in an ellipsis */
.crumbs li:last-child{flex:1 1 0;min-width:min(9rem,100%)}
.crumbs [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs a{color:var(--graphite)}
.deal-strip{display:flex;align-items:center;gap:var(--s-3);min-height:52px;margin-bottom:var(--s-5);padding:8px 14px 8px 8px;border:1.5px solid var(--red);font-size:var(--fs-sm);text-decoration:none}
.deal-strip b{color:var(--red)}
.deal-strip__go{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:700;white-space:nowrap}
.cta-band{display:grid;gap:var(--s-4);padding:var(--s-6) var(--s-5);border-radius:var(--r-3)}
.cta-band__h{font-size:var(--fs-2xl);line-height:.95}
.cta-band p{margin-top:var(--s-2);color:var(--graphite)}

/* motion (gated in JS: .motion is added only when reduced motion is not requested) */
.motion [data-reveal]{transition:opacity var(--d-3) var(--ease),transform var(--d-3) var(--ease)}
.motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(14px)}
@keyframes slide{from{opacity:0;transform:translateX(28px)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.drawer[open]{animation:slide .26s var(--ease)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* breakpoints */
/* phones and small tablets (the tab bar shows): body room for the bar, 44 px tap targets */
@media (max-width:860px){
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
.crumbs ol{margin-top:-6px;margin-bottom:calc(var(--s-3) - 6px)}
.crumbs a{min-height:44px}
.crumbs a{justify-content:center;min-width:44px;margin-inline:-5px;padding-inline:5px}}
@media (max-width:599px){.form>.btn{justify-self:stretch}}
@media (max-width:767px){
.wrap--bleed-sm{padding-inline:0}
.wrap .wrap--bleed-sm{width:auto;max-width:none;margin-inline:calc(-1*var(--gutter))}
.wrap--bleed-sm>:not(.scroller){padding-inline:var(--gutter)}
.wrap--bleed-sm .scroller{scroll-padding-inline:var(--gutter)}
.duo,.quotes:not(.quotes--grid),.is-style-rail-sm{display:grid;grid-template-columns:none;grid-auto-flow:column;width:max-content;padding:4px var(--gutter) 10px}
.duo,.quotes:not(.quotes--grid),.is-style-rail-sm{grid-auto-columns:calc(100vw - 2*var(--gutter) - 36px)}
.duo>*,.quotes:not(.quotes--grid)>*,.is-style-rail-sm>*{scroll-snap-align:start}
.deal-strip__txt{display:none}
.rating__score{font-size:1.75rem}
.sec-head .link-arrow,.sec-head .is-style-link-arrow a{font-stretch:100%;letter-spacing:.08em}}
@media (min-width:560px){.brand__img{width:162px;height:54px}}
@media (min-width:600px){
.signup__form{grid-template-columns:1fr auto}.signup__fine{grid-column:1/-1}.signup__form>a.btn{grid-column:1/-1;justify-self:start;min-width:12rem}
.form--contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form--contact>*{grid-column:1/-1}
.form--contact>.form__field:nth-child(-n+4){grid-column:auto}}
@media (min-width:768px){
.util__meta{display:flex}
.util--nodeal .util__meta{justify-content:flex-end}
.scroller{overflow:visible}
.duo,.deliv-grid{grid-template-columns:1fr 1fr;gap:var(--s-4)}
.quotes:not(.quotes--grid){grid-template-columns:repeat(3,minmax(0,1fr))}
.quotes{gap:var(--s-4)}
.site-main .signup:not(.signup--page){padding:var(--s-7)}
.signup.signup--page{padding:var(--s-6)}
.timeline__year{grid-template-columns:7rem minmax(0,1fr);gap:var(--s-5);align-items:start}
.timeline .timeline__h{position:sticky;top:calc(var(--hdr) + 16px);padding-top:10px}
.cta-band{padding:var(--s-6) var(--s-7)}}
@media (min-width:700px){.site-header__order{display:inline-flex}
.site-footer__grid{grid-template-columns:1.25fr 1fr 1fr}}
/* desktop: the main menu in the header, no tab bar, no burger */
@media (min-width:861px){
html{scroll-padding-bottom:16px}
.actionbar,.burger{display:none}
.nav{display:block;margin-left:auto}
.brand{margin-right:0}
.site-header__order{margin-left:0}}
@media (min-width:1024px){
.hero{padding-top:var(--s-7)}
.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--s-7)}
.hero__photo{max-width:calc(var(--max) + 2*var(--gutter));margin:var(--s-6) auto 0;padding-inline:var(--gutter)}
.wp-block-image.hero__photo{margin:var(--s-6) auto 0}
.hero__photo img{aspect-ratio:3.25/1;border-radius:var(--r-2)}
.why__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--s-8)}
.why__photo{display:block}
.cta-band{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.map__frame{aspect-ratio:4/3}
.why__photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-2)}
.visit__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:var(--s-8)}
.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:var(--s-8)}
.split__head{position:sticky;top:calc(var(--hdr) + 16px)}
.signup{grid-template-columns:1fr 1fr;align-items:end;gap:var(--s-7)}
.signup.signup--page{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s-5)}
}
.page-extra:not(:empty){padding-top:var(--section)}
.review-banner{padding-block:var(--s-3)}
.review-banner .callout{margin:0}
/* empty / error states (menu results, the home product rail, category grid): every page, because the
   rail's "Menu is updating" state renders on pages that never load menu.css */
.state{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-8) var(--s-5);border:1.5px dashed var(--field);text-align:center}
.state p{max-width:30rem;color:var(--graphite)}
.state__i{width:40px;height:40px;color:var(--mute)}
.state--error{border-style:solid;border-color:var(--ink)}
.state .btn-row{justify-content:center}
/* no JavaScript = no age dialog: the 21+ notice as a strip above the header (setup.php) */
.agenote{margin:0;padding:10px var(--gutter);background:var(--ink-2);color:var(--paper);font-size:var(--fs-sm);text-align:center}
/* core/image essentials (its own stylesheet is not loaded on the front end) */
.wp-block-image{margin:0 0 1em}
.wp-block-image img{box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom}
.wp-block-image.aligncenter,.wp-block-image .aligncenter{text-align:center;margin-inline:auto}
.wp-block-image.alignleft,.wp-block-image .alignleft{float:left;margin:.5em 1em .5em 0}
.wp-block-image.alignright,.wp-block-image .alignright{float:right;margin:.5em 0 .5em 1em}
.wp-block-image figcaption,.wp-element-caption{margin-top:var(--s-2);color:var(--mute);font-size:.8125rem}

/* ===================================================================================================
   MG design components (the approved preview, rev 2026-10-02). Each has a block style for staff
   (Styles panel in the editor, inc/blocks.php) next to its class:
     .band (+ .brand / .content / .quiet) + div.bg   core/group "Leaf band" / "…, light" / "…, faint"
     .plate (4 corner bolts; .no-bolt)               core/group "Sign plate"
     .copy (frosted box) / .copy.bd (black border)    core/group "Frosted box" / "Frosted box, bordered"
     .eyebrow                                         core/paragraph "Eyebrow"
     .kicker (sign label on a plate, with arrow)      core/paragraph + core/heading "Sign label"
     .btn / .btn.ghost                                core/button default / "Ghost"
   =================================================================================================== */

/* the background system: the leaf tile between the plates, never under the text */
.band,.is-style-band,.is-style-band-light,.is-style-band-faint{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--section);scroll-margin-top:calc(var(--hdr) + 8px)}
.band>.wrap,.band>:not(.bg){position:relative;z-index:2}
.bg,.is-style-band::before,.is-style-band-light::before,.is-style-band-faint::before{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--paper);background-image:var(--tile);background-size:var(--leaf) auto;background-repeat:repeat;background-position:top center}
.is-style-band::before,.is-style-band-light::before,.is-style-band-faint::before{content:"";z-index:-1}
.band .bg,.band.brand .bg,.is-style-band::before{opacity:var(--bg-brand)}
.band.content .bg,.is-style-band-light::before{opacity:var(--bg-content)}
.band.quiet .bg,.is-style-band-faint::before{opacity:var(--bg-quiet)}
/* A band's plain text sits on a frosted box (.copy) or a plate; .wp-block-group bands get the core
   group's own block gap. */
.wp-block-group:where(.is-style-band,.is-style-band-light,.is-style-band-faint){padding-inline:var(--gutter)}

/* sign plates: 2px ink border, rounded, a bolt in each corner */
.plate,.is-style-plate{position:relative;border:2px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--plate-shadow);--bolt:color-mix(in srgb,var(--line-strong) 40%,transparent);background-color:var(--plate);background-repeat:no-repeat;background-image:radial-gradient(circle 3.5px at 10px 10px,var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at calc(100% - 10px) 10px,var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at 10px calc(100% - 10px),var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at calc(100% - 10px) calc(100% - 10px),var(--bolt) 98%,transparent 100%)}
.is-style-plate{padding:20px 19px}
.plate.no-bolt{background-image:none}

/* frosted text boxes: every text block on a band sits on one; .bd = the 2px black border the client
   asked for on section-heading boxes */
.frost{background-color:color-mix(in srgb,var(--plate) 84%,transparent);-webkit-backdrop-filter:saturate(155%) blur(9px);backdrop-filter:saturate(155%) blur(9px)}
.copy,.is-style-copy,.is-style-copy-bd{display:inline-block;max-width:100%;padding:18px 20px;border-radius:14px;background-color:color-mix(in srgb,var(--plate) 84%,transparent);-webkit-backdrop-filter:saturate(155%) blur(9px);backdrop-filter:saturate(155%) blur(9px)}
.copy>:last-child,.is-style-copy>:last-child,.is-style-copy-bd>:last-child{margin-bottom:0}
.copy.full,.wp-block-group:is(.is-style-copy,.is-style-copy-bd){display:block;width:fit-content}
.copy.bd,.is-style-copy-bd{border:2px solid var(--line-strong);box-shadow:var(--plate-shadow)}
@supports not (backdrop-filter:blur(2px)){.frost,.copy,.is-style-copy,.is-style-copy-bd{background-color:color-mix(in srgb,var(--plate) 94%,transparent)}}

/* eyebrow (a lavender rule, then wide caps) and lede */
.eyebrow,.is-style-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--grey);font:700 .75rem/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before,.is-style-eyebrow::before{content:"";flex:none;width:22px;height:2px;background:var(--lav)}
.lede{max-width:60ch;margin:0 0 20px;color:var(--grey)}

/* sign label: a plate holding a big highway-sign word and an arrow ("About →"). Markup:
   div.plate.kicker-plate > span.kicker + span.arrow; or the "Sign label" block style on a paragraph
   or heading, which draws the plate and the arrow itself. */
.kicker-plate{display:inline-flex;align-items:center;gap:14px;margin-bottom:16px;padding:10px 20px 11px}
.kicker,.kicker-plate .kicker{font-family:var(--f-sign);font-weight:800;font-size:clamp(1.625rem,5.4vw,2.625rem);line-height:1;letter-spacing:.01em;color:var(--ink)}
.kicker-plate .arrow{font-size:clamp(1.375rem,4.4vw,2.125rem);line-height:1;color:var(--ink)}
.is-style-kicker{display:inline-flex;align-items:center;gap:14px;width:fit-content;max-width:100%;margin-bottom:16px;padding:10px 20px 11px;border:2px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--plate-shadow);--bolt:color-mix(in srgb,var(--line-strong) 40%,transparent);background-color:var(--plate);background-repeat:no-repeat;background-image:radial-gradient(circle 3.5px at 10px 10px,var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at calc(100% - 10px) 10px,var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at 10px calc(100% - 10px),var(--bolt) 98%,transparent 100%),radial-gradient(circle 3.5px at calc(100% - 10px) calc(100% - 10px),var(--bolt) 98%,transparent 100%);color:var(--ink);font-family:var(--f-sign);font-weight:800;font-size:clamp(1.625rem,5.4vw,2.625rem);line-height:1;letter-spacing:.01em}
.is-style-kicker::after{content:"\2192";font-family:var(--f-display);font-size:.8em;line-height:1}

/* live dot (open now) */
.dot{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink)}
.dot i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.dot i{animation:pulse 2.6s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 26%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cyan) 6%,transparent)}}