/* A white page with selected pale washes and two stronger, full-bleed edge fills.
   This final paint layer never fills controls, artwork or individual dish rows. */
:root{--ink:#184940;--muted:#184940;--blue-ink:#15565c;--aqua-ink:#15565c}
body,.preview-strip,.hero,.values-band,.menu-section,.menu-controls,
.menu-group,.menu-outro,.garden-section,.market-section,.together-section,
.family-story-heading>.family-story-title,.chef-spotlight,
.chef-spotlight>div:first-child,footer{background:#ffffff;color:var(--ink)}
.hero-figure>.image-label,.local-badge,
.menu-section .section-intro,
.menu-quip>span,.menu-quip-coffee>span,.garden-step-title>span,
.garden-quip p,.market-section>.eyebrow,.market-intro .eyebrow,
.chef-comic p,.together-mark{background:#ffffff;color:#123f38}
/* One normal-flow block paints behind both the top strip and header, all the way
   to the viewport edges. Interior .wrap widths and header row geometry stay intact.
   The warm top gradient runs from orange at the left through yellow to green.
   Fully opaque tropical colors keep both edges bright. */
.page-top{width:100%;margin:0;background:linear-gradient(300deg,#b7ef32 0%,#fff600 48%,#ffb42d 100%);color:var(--ink)}
.page-top>.preview-strip,.page-top>.site-header{background:transparent}
footer{background:linear-gradient(295deg,#b7ef32 0%,#5ee5cc 48%,#aff0eb 100%);color:var(--ink)}
/* Selected headline and shared content boxes receive translucent tropical color.
   Eight-digit colors cap opacity below 13%, keeping the white page dominant. */
.hero-copy h1 em{background:linear-gradient(115deg,#fff6001f 0%,#ffb42d14 48%,#5ee5cc1a 100%);color:#123f38}
.hero>.vibes-sign{background:linear-gradient(100deg,#59d1ef1a 0%,#5ee5cc14 48%,#b7ef321f 100%);color:#15565c}
.menu-section .section-heading .eyebrow{background:linear-gradient(110deg,#5ee5cc1a 0%,#fff60014 48%,#ffb42d1f 100%);color:#123f38}
/* Qué coro is heroLine3, the same live bilingual box as Good company. */
.hero-action-slot>.hero-note-row{background:linear-gradient(115deg,#b7ef321a 0%,#5ee5cc14 48%,#ffb42d1f 100%);color:#123f38}
.hero-figure>.image-label{background:linear-gradient(105deg,#fff6001f 0%,#ffb42d14 48%,#59d1ef1a 100%);color:#123f38}
.values-band{background:linear-gradient(110deg,#5ee5cc1a 0%,#b7ef3214 48%,#59d1ef1f 100%);color:#123f38}
/* Each category pairs its title color with a pale wash of that same hue. */
.menu-group[data-menu-group="breakfast"]{background:linear-gradient(115deg,#0099ff1f 0%,#0099ff14 48%,#0099ff1a 100%)}
.menu-group[data-menu-group="empanadas"]{background:linear-gradient(115deg,#ff79001f 0%,#ff790014 48%,#ff79001a 100%)}
.menu-group[data-menu-group="sandwich"]{background:linear-gradient(115deg,#fff6001f 0%,#fff60014 48%,#fff6001a 100%)}
.menu-group[data-menu-group="coffee"]{background:linear-gradient(115deg,#b3ff001f 0%,#b3ff0014 48%,#b3ff001a 100%)}
.menu-group[data-menu-group="cold"]{background:linear-gradient(115deg,#00d4b81f 0%,#00d4b814 48%,#00d4b81a 100%)}
.menu-group[data-menu-group="drinks"]{background:linear-gradient(115deg,#ff14931f 0%,#ff149314 48%,#ff14931a 100%)}
.menu-group[data-menu-group="sides"]{background:linear-gradient(115deg,#ff443b1f 0%,#ff443b14 48%,#ff443b1a 100%)}
/* The garden corner is one soft green box, including its heading. */
.market-section{background:linear-gradient(115deg,#b7ef321f 0%,#64cdb514 48%,#5ee5cc1a 100%);color:#123f38}
.market-section>.eyebrow{background:transparent}
.menu-group :is(.menu-group-heading,.menu-item,.menu-icon,.group-number,.menu-character p){background:transparent}
/* Every control state stays unfilled. Separate transparent SVGs draw the edges. */
button,.button,.button-arrow,.text-link,.text-link>span:last-child,.site-header nav a,.skip-link{background:transparent!important;color:#123f38}
/* Wordmark containers and the nested y shapes remain transparent. */
.brand,.footer-brand,.brand .brand-join,.footer-brand .brand-join{background:transparent}
/* One shared logo paint source: both locations always match. Saturated orange
   ties the fine letter and spiral edges together; the y gets a blue-green edge. */
.brand,.footer-brand{--logo-orange:#ff6500;--logo-teal:#15565c}
.brand .brand-word,.footer-brand .brand-word,.brand .brand-join,.footer-brand .brand-join{color:#126a54;-webkit-text-stroke:.03em var(--logo-orange);paint-order:stroke fill}
/* A crisp, subpixel teal underprint separates orange from the warm header.
   Zero blur and no horizontal offset keep this quieter than another outline. */
.brand .brand-word,.footer-brand .brand-word{filter:drop-shadow(0 .012em 0 var(--logo-teal))}
/* Preserve the green/blue interiors. The y is vivid orange through golden yellow,
   with its existing finer edge and exact transparent enclosure geometry. */
.brand .brand-word:nth-child(2),.footer-brand .brand-word:nth-child(2){--logo-fill:linear-gradient(115deg,#38dd78 0%,#79ed83 55%,#d2ff72 100%)}
.brand .brand-word:nth-child(4),.footer-brand .brand-word:nth-child(4){--logo-fill:linear-gradient(115deg,#229fff 0%,#55cfff 58%,#a1efff 100%)}
.brand .brand-join,.footer-brand .brand-join{--logo-fill:linear-gradient(115deg,var(--logo-orange) 0%,#ffad00 60%,#fff12b 100%);-webkit-text-stroke:.024em var(--logo-teal)}
/* Original lime/blue curves, with the same fine orange edge as the letters. */
.brand .brand-leaf-start,.footer-brand .brand-leaf-start{color:#baff00}
.brand .brand-leaf-end,.footer-brand .brand-leaf-end{color:#00d9ff}
.brand .brand-spiral,.footer-brand .brand-spiral{stroke-width:7.5}
.brand .brand-spiral .brand-spiral-keyline,.footer-brand .brand-spiral .brand-spiral-keyline{stroke:var(--logo-orange);stroke-width:9.5}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .brand .brand-word,.footer-brand .brand-word,.brand .brand-join,.footer-brand .brand-join{background-image:var(--logo-fill);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.hero-copy h1{color:#123f38}
.hero-copy h1>span:nth-of-type(2){color:#15565c}
.hero-note-row>.hero-seal,.hero-footnote,
.family-story-title>.eyebrow,.together-section .family-story-title>h2,
.together-section .family-story-title>h2>span,.together-section .family-story-title>h2>em,
.picture-frame,.garden-visual>img,.family-story-art,.menu-patio-family-art,
.menu-brush-animals,.menu-category-art>img,.menu-garden-divider,
.market-item-divider,.page-plant,.garden-quip>img,.garden-quip svg{background:transparent}
.family-story-title>.eyebrow,.together-section .family-story-title>h2>span{color:#15565c}
.together-section .family-story-title>h2>em{color:#175248}
.garden-copy h2 em,.garden-copy .eyebrow,.garden-principles strong,.garden-description,
.garden-visual>p,.garden-principles p>span,.vision-note,.market-intro h3,
.market-item h4,.market-note,.market-intro>[data-i18n="marketBody"],.market-item p,
.story-copy,.chef-spotlight .eyebrow,.chef-spotlight>.chef-bio,
.footer-top>p,.footer-bottom,.footer-bottom>span{color:#123f38}
.menu-info .item-category,.menu-info .item-price,.menu-group-heading p,
.menu-meta,.menu-naming-note,.menu-disclaimer{color:#184940}
/* One shared display palette in both languages. The open family scribble stays
   untouched; smaller body copy keeps readable Open Sans and dark ink. */
.menu-group[data-menu-group="breakfast"]{--title-fill:#0099ff}
.menu-group[data-menu-group="empanadas"]{--title-fill:#ff7900}
.menu-group[data-menu-group="sandwich"]{--title-fill:#fff600}
.menu-group[data-menu-group="coffee"]{--title-fill:#b3ff00}
.menu-group[data-menu-group="cold"]{--title-fill:#00d4b8}
.menu-group[data-menu-group="drinks"]{--title-fill:#ff1493}
.menu-group[data-menu-group="sides"]{--title-fill:#ff443b}
.values-inner>[data-i18n]{color:#15565c}
.values-inner>.band-doodle svg{stroke:#ffbf00}
.values-inner>[data-i18n]::after{content:'';display:block;width:36px;height:3px;margin:5px auto 0;background:#fff600;border-radius:2px}
@supports(-webkit-text-stroke:1px #15565c){
 :root :is(.hero-copy h1>span,.hero-copy h1>em,.menu-title-lockup h2>span,.menu-title-lockup h2>em,.garden-intro-copy h2>span,.garden-intro-copy h2>em,.market-intro h3,.chef-spotlight h3){-webkit-text-stroke:1px #15565c;paint-order:stroke fill;color:#00dcff}
 :root :is(.hero-copy h1>span:first-child,.menu-title-lockup h2>em,.garden-intro-copy h2>span,.market-intro h3){color:#b3ff00}
 :root :is(.hero-copy h1>em,.menu-title-lockup h2>span,.garden-intro-copy h2>em,.chef-spotlight h3){color:#fff600}
 .menu-group .menu-group-heading h3{color:var(--title-fill);-webkit-text-stroke:1px #15565c;paint-order:stroke fill}
 .values-inner>[data-i18n]{-webkit-text-stroke:.75px #15565c;paint-order:stroke fill}
 .values-inner>[data-i18n="valueCoffee"]{color:#00afe0}
 .values-inner>[data-i18n="valueEmpanada"]{color:#21cf65}
 .values-inner>[data-i18n="valueNature"]{color:#ff7900}
}
@media(forced-colors:active){
 body,.page-top,.preview-strip,.site-header,.hero,.values-band,.menu-section,.menu-controls,
 .menu-group,.menu-outro,.garden-section,.market-section,.together-section,
 .family-story-heading>.family-story-title,.chef-spotlight,.chef-spotlight>div:first-child,
 .hero>.vibes-sign,.hero-copy h1 em,.hero-figure>.image-label,.hero-action-slot>.hero-note-row,
 .menu-section .section-heading .eyebrow,.menu-section .section-intro,.menu-quip>span,
 .garden-step-title>span,.garden-quip p,.market-section>.eyebrow,.chef-comic p,footer{
   background:Canvas!important;color:CanvasText;
 }
 :is(h1,h2,h3,h4,h1>span,h1>em,h2>span,h2>em){color:CanvasText!important;-webkit-text-stroke:0!important}
 .brand .brand-word,.footer-brand .brand-word,.brand .brand-join,.footer-brand .brand-join{background-image:none;color:CanvasText;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0;filter:none}
 .brand .brand-leaf,.footer-brand .brand-leaf{color:CanvasText}
 .brand .brand-spiral .brand-spiral-keyline,.footer-brand .brand-spiral .brand-spiral-keyline{stroke:CanvasText}
 .values-inner>[data-i18n]{color:CanvasText;-webkit-text-stroke:0}
 .values-inner>[data-i18n]::after{background:CanvasText}
 .values-inner>.band-doodle svg{stroke:CanvasText}
 .family-story-title>.eyebrow,.together-section .family-story-title>h2>span,
 .together-section .family-story-title>h2>em,.hero-note-row>.hero-seal>span{color:CanvasText}
}

/* The same menu-rule motifs wrap both complete brand signatures and both
   colored page edges. An outside paint layer preserves the approved wordmark
   metrics, its side-by-side desktop navigation, and the transparent interior. */
.brand-lockup{position:relative;width:max-content;max-width:100%;flex:0 0 auto;gap:0}
.brand-lockup::before{content:'';position:absolute;inset:-6px;pointer-events:none;border:12px solid transparent;border-image:url('assets/brand-geoglyph-frame.svg') 36 / 12px / 0 round}
.brand-lockup>.brand-tagline{width:100%;margin:0;padding:0 18px 12px;font-family:var(--display);font-size:clamp(12px,1.2vw,15px);font-weight:700;line-height:1.35;letter-spacing:.03em;text-align:center;color:#123f38;text-wrap:balance}
.page-top{position:relative;padding-block:12px 10px}
.page-top::before,:root footer::before{content:'';position:absolute;inset:4px;left:4px;right:4px;top:4px;bottom:4px;height:auto;background:none;pointer-events:none;border:18px solid transparent;border-image:url('assets/brand-geoglyph-frame.svg') 36 / 18px / 0 round}
.site-header::after{display:none}
footer{border-top:0;padding-block:10px}
.footer-top>.brand-lockup{align-self:center}
/* Keep the perimeter away from the language buttons on the smallest screens. */
@media(max-width:680px){.footer-top>.brand-lockup{margin-inline:auto}}
@media(max-width:600px){
 .page-top>.preview-strip{padding-inline:24px}
 .page-top::before,:root footer::before{inset:0;left:0;right:0;top:0;bottom:0;border-width:12px;border-image-width:12px}
}
@media(max-width:360px){.site-header nav a{padding-inline:10px}}
@media(forced-colors:active){
 .brand-lockup::before,.page-top::before,:root footer::before{border-image:none;border:1px solid CanvasText}
 .brand-lockup>.brand-tagline{color:CanvasText}
}

/* Fill the two edge boxes with a larger proportional signature and a fully
   distributed navigation row. No glyph scaling: both logos use this one size. */
:root{--wordmark-size:clamp(56px,5.8vw,76px)}
.site-header .brand,.footer-brand{padding-block:8px}
.brand-lockup>.brand-tagline{padding:0 12px 8px;font-size:clamp(13px,1.55vw,19px);letter-spacing:.02em}
.page-top{padding-block:22px 14px}
.site-header{min-height:0;gap:clamp(20px,2.2vw,34px);padding-block:0;grid-template-columns:auto minmax(0,1fr)}
.site-header nav{width:100%;max-width:1320px;justify-self:stretch;justify-content:space-between;gap:clamp(12px,2vw,30px)}
.site-header nav a{flex:1 1 0;min-width:0;min-height:48px;padding:12px 10px;font-size:14px}
.page-top>.preview-strip{padding:8px 0 0;gap:12px;font-size:11px;line-height:1.4}
.page-top>.preview-strip>span{justify-content:flex-end;text-align:right}
.footer-top{padding-block:20px 18px;gap:24px}
.footer-bottom{padding-block:14px 12px;gap:18px}
@media(min-width:961px) and (max-width:1120px){.site-header nav{gap:12px}.site-header nav a{padding-inline:8px}}
@media(max-width:960px){
 :root{--wordmark-size:clamp(31px,8.4vw,62px)}
 .site-header{grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px}
 .site-header .brand-lockup{justify-self:center}
 .site-header nav{width:100%;max-width:1320px;justify-self:stretch;gap:16px}
 .footer-top{display:flex;flex-direction:column;gap:16px}
 .footer-top>.brand-lockup{margin-inline:auto}
 .footer-top>p{max-width:100%;margin:0;font-size:21px}
}
@media(max-width:600px){
 .page-top{padding-block:18px 12px}
 .site-header{gap:14px}
 .site-header nav{gap:8px}
 .site-header nav a{font-size:13px;padding-inline:8px}
 .page-top>.preview-strip{padding:6px 0 0;font-size:10px}
 .footer-top{padding-block:14px 14px;gap:14px}
 .footer-bottom{padding-block:12px 10px}
 .footer-bottom>span{margin-top:10px}
}
@media(max-width:360px){.site-header nav{gap:6px}.site-header nav a{padding-inline:6px}}

/* Keep the v45 header/footer refinements only. Main content uses the original
   v44 widths, open columns, panel outlines, and hero-window geometry.
   The edge gradients retain their separate, unfilled outer motif gutters. */
:root{--edge-fill-width:calc(100% - 88px);--edge-fill-height:calc(100% - 40px)}
.page-top,footer{background-size:var(--edge-fill-width) var(--edge-fill-height);background-position:center;background-repeat:no-repeat}
.page-top{padding-block:32px 32px}
footer{padding-block:20px}
.page-top::before,:root footer::before{inset:0;left:24px;right:24px;top:0;bottom:0;border-width:18px;border-image-width:18px}
.page-top>.site-header,.page-top>.concept-note,.footer-top,.footer-bottom{width:calc(100% - 96px)}
/* ES/EN returns to its original top-right position. On desktop that control
   space belongs to the right column; the bigger logo can occupy the full left. */
.page-top>.preview-strip{position:absolute;top:26px;left:0;right:0;justify-content:flex-end;width:100%;margin:0;padding:5px 48px;line-height:1.4}
.page-top>.concept-note{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:8px auto 0;padding:0;font-size:11px;line-height:1.4;letter-spacing:.025em;text-align:right}
.site-header nav{padding-top:24px}
/* The signature borrows the logo's rounded weight, gentle slant and live color
   fills. A fine teal keyline keeps these small tropical letters distinguishable. */
.site-header .brand,.footer-brand{padding-bottom:0}
.brand .brand-caption,.footer-brand .brand-caption{color:#126a54;-webkit-text-stroke:.6px #15565c;paint-order:stroke fill}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .brand .brand-caption,.footer-brand .brand-caption{background-image:linear-gradient(110deg,#38dd78 0%,#79ed83 28%,#229fff 58%,#55cfff 76%,#ff6500 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(min-width:961px) and (max-width:1120px){.site-header nav{gap:10px}.site-header nav a{padding-inline:7px}}
@media(max-width:960px){
 .page-top{padding-top:24px}
 .page-top>.preview-strip{position:static;padding:4px 48px 12px}
 .site-header nav{padding-top:0}
}
@media(max-width:600px){
 :root{--edge-fill-width:calc(100% - 36px);--edge-fill-height:calc(100% - 20px)}
 .page-top{padding-block:14px 24px}
 footer{padding-block:12px}
 .page-top::before,:root footer::before{left:8px;right:8px;border-width:8px;border-image-width:8px}
 .page-top>.site-header,.page-top>.concept-note,.footer-top,.footer-bottom{width:calc(100% - 32px)}
 .page-top>.preview-strip{padding:4px 24px 12px}
 .page-top>.concept-note{font-size:10px;padding-right:8px}
}
@media(forced-colors:active){
 .page-top::before,:root footer::before{border-width:1px}
 .brand .brand-caption,.footer-brand .brand-caption{color:CanvasText;background-image:none;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0}
}

/* Each signature phrase belongs directly to its word. Both words share one
   baseline; the original y and its nested geometry stay between them.
   The reserved bottom space holds the real captions on the narrowest phones. */
.site-header .brand,.footer-brand{padding-bottom:16px}
.brand .brand-word,.footer-brand .brand-word{position:relative;display:inline-block;height:1em}
.brand .brand-caption,.footer-brand .brand-caption{position:absolute;top:calc(100% + 4px);left:0;width:100%;display:block;font-family:var(--display);font-size:clamp(8px,.17em,13px);font-weight:700;font-style:oblique -5deg;line-height:1.1;letter-spacing:0;text-align:center;white-space:normal;filter:none}
/* The concept note uses the lower-right space beside the complete logo,
   avoiding an empty full-width row below it. Stacked layouts keep normal flow. */
@media(min-width:961px){
 .page-top>.concept-note{position:absolute;left:auto;right:48px;bottom:32px;width:max-content;max-width:calc(100% - 96px);margin:0}
}

/* The three existing values fill equal, centered tracks in their original
   shared strip. Artwork and distinct letter fills are preserved. */
.values-band>.values-inner{width:calc(100% - 48px);max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.5vw,24px);padding-block:12px;font-size:clamp(22px,2.3vw,36px);line-height:1.2;text-align:center}
.values-inner>[data-i18n]{width:100%;min-width:0;justify-self:stretch;text-align:center;text-wrap:balance}
.values-band>.values-inner>.band-doodle{display:block;justify-self:center}
.values-inner>.band-doodle svg{width:clamp(26px,2.5vw,38px);height:clamp(26px,2.5vw,38px)}
@media(max-width:680px){
 .values-band>.values-inner{width:calc(100% - 24px);grid-template-columns:minmax(0,1fr);gap:6px;font-size:clamp(22px,5vw,30px);padding-block:12px}
 .values-inner>.band-doodle svg{width:20px;height:20px}
}

/* Fuller, slimmer brush-art bands reuse both approved transparent strips.
   Intrinsic proportions keep every animal intact; these bands have no frame. */
.menu-intro-art-column>.menu-animal-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(6px,1vw,12px);width:100%;max-width:600px;min-width:0;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
.menu-intro-art-column>.menu-animal-band>.menu-brush-animals{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center;margin:0;padding:0;background:transparent;border:0;box-shadow:none;transform:none}
@media(max-width:680px){.menu-intro-art-column>.menu-animal-band{max-width:520px;gap:8px}}

/* Width-fitted signatures retain the existing word blocks and palette. The
   fitting script adjusts real text, after font loading and language changes. */
.brand .brand-caption,.footer-brand .brand-caption{text-align:left;padding-left:.5px}
.brand-caption-line{display:block;width:max-content;max-width:none;white-space:nowrap;line-height:1.1;transform-origin:left top;color:inherit;-webkit-text-fill-color:inherit;-webkit-text-stroke:inherit;background-image:inherit;background-clip:inherit;-webkit-background-clip:inherit;paint-order:inherit}
/* The transparent desktop header overlaps this earlier utility row. Lift only
   its controls; the full-width empty area must remain click-through. */
.page-top>.preview-strip{z-index:2;pointer-events:none}
.page-top>.preview-strip>.languages{position:relative;pointer-events:auto}
@media(max-width:960px){.page-top>.preview-strip{position:relative;top:auto}}
/* Keep just the footer fill's perimeter and the matching logo frame. */
footer>.footer-top,footer>.footer-bottom{border:0;border-image:none;box-shadow:none}
footer>.footer-top::before,footer>.footer-top::after,footer>.footer-bottom::before,footer>.footer-bottom::after{content:none;display:none}
/* The patio window and the label below share their complete outer bounds.
   Keep the photo's intrinsic proportions, including the breakfast plate. */
.hero-visual .hero-figure,.hero-visual .image-credit{width:100%;max-width:720px;margin-inline:auto}
.hero-figure>.picture-frame{width:100%;height:auto;max-height:none;aspect-ratio:auto;border:0;padding:0}
.hero-figure>.picture-frame>img{width:100%;height:auto;object-fit:contain}
.hero-figure>.picture-frame::after{inset:0}
.hero-visual .hero-figure>.image-label{width:100%;max-width:100%;border-image-outset:0;background-clip:padding-box}

/* Open neon penwork lives in the sign's existing spare space. The two gap
   clusters move with the flex word boundaries rather than fixed percentages. */
.hero>.vibes-sign{isolation:isolate}
.hero>.vibes-sign>span{position:relative}
.hero>.vibes-sign>span:nth-child(1)::after,.hero>.vibes-sign>span:nth-child(2)::after{
 content:'';
 position:absolute;
 left:calc(100% + .175em);
 top:50%;
 width:clamp(18px,6vw,72px);
 aspect-ratio:1;
 transform:translate(-50%,-50%);
 background:url('assets/vibes-neon-motifs.svg') 0 0/200% 100% no-repeat;
 pointer-events:none;
 user-select:none;
}
.hero>.vibes-sign>span:nth-child(2)::after{background-position:100% 0}
/* Reuse the approved miniature squiggles in the existing padding. No fill,
   frame or new content row is introduced. Reset the historic zigzag mask. */
.hero>.vibes-sign::before,.hero>.vibes-sign::after{
 content:'';
 display:block;
 position:absolute;
 left:18px;
 right:18px;
 height:8px;
 background:url('assets/sketch-rule.svg') center/100% 100% no-repeat;
 -webkit-mask:none;
 mask:none;
 pointer-events:none;
 user-select:none;
}
.hero>.vibes-sign::before{top:2px;bottom:auto}
.hero>.vibes-sign::after{top:auto;bottom:2px;transform:scaleX(-1)}
@media(max-width:680px){
 .hero>.vibes-sign>span:nth-child(1)::after,.hero>.vibes-sign>span:nth-child(2)::after{left:calc(100% + .11em)}
 .hero>.vibes-sign::before,.hero>.vibes-sign::after{left:12px;right:12px;height:6px}
}
@media(max-width:360px){
 .hero>.vibes-sign>span:nth-child(1)::after,.hero>.vibes-sign>span:nth-child(2)::after{width:14px}
}
@media(forced-colors:active){
 .hero>.vibes-sign::before,.hero>.vibes-sign::after,
 .hero>.vibes-sign>span:nth-child(1)::after,.hero>.vibes-sign>span:nth-child(2)::after{display:none}
}
/* One complete indoor/outdoor mural spans each open space around the copy.
   Preserve the drawings' native proportions instead of repeating small strips. */
.menu-section .menu-intro-art-column{justify-content:space-between;gap:16px}
.menu-intro-art-column>.menu-animal-band{display:block;width:100%;max-width:none}
.menu-intro-art-column>.menu-animal-band>.menu-brush-animals{width:100%;height:auto;object-fit:contain}


/* One shared, normal-flow utility row sits below navigation beside the logo.
   Its empty space stays click-through; ES/EN retain their own raised hit layer. */
.site-header{row-gap:8px;grid-template-rows:1fr auto}
.site-header>.brand-lockup{grid-column:1;grid-row:1 / 3}
.site-header nav{grid-column:2;grid-row:1;align-self:end;padding-top:0}
.site-header nav a{min-height:44px;padding:9px 8px;font-size:13px}
.site-header>.header-utility{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:10px;grid-column:2;grid-row:2;min-width:0;width:100%;pointer-events:none;font-size:11px;line-height:1.4;letter-spacing:.025em}
.header-utility>.languages{position:relative;flex:0 0 auto;pointer-events:auto}
.header-utility>.concept-note{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:6px;position:static;margin:0;padding:0;width:auto;font-size:inherit;line-height:1.4;letter-spacing:inherit;text-align:right;white-space:nowrap}
@media(max-width:960px){
 .site-header{grid-template-rows:auto;row-gap:10px}
 .site-header>.brand-lockup{grid-column:1;grid-row:1}
 .site-header nav{grid-column:1;grid-row:2;align-self:auto}
 .site-header>.header-utility{grid-column:1;grid-row:3}
}
@media(max-width:600px){
 .site-header nav a{font-size:12px;padding-inline:7px}
 .site-header>.header-utility{gap:8px;font-size:10px}
}
@media(max-width:360px){.site-header nav a{padding-inline:5px}}

/* Shared, open wordmarks: one lettering size for both captions, a blue/green
   signature above Patio, its reverse below Río, and brighter golden orange
   letter edges. The original slants, fills, spirals and nested y stay intact. */
.brand,.footer-brand{--logo-orange:#ff9f00}
.brand-lockup::before{content:none;display:none;border:0;border-image:none}
.site-header .brand,.footer-brand{padding-block:calc(.2em + 8px)}
.brand .brand-word,.footer-brand .brand-word{filter:none}
.brand .brand-word:nth-child(2),.footer-brand .brand-word:nth-child(2){top:.08em}
.brand .brand-caption,.footer-brand .brand-caption{left:1px;width:calc(100% - 2px);padding:0;background:none;color:#0073cf;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;text-shadow:none;filter:none;font-size:clamp(9px,.2em,15.2px);font-style:normal;text-align:center}
.brand .brand-caption[data-i18n="brandPatioCaption"],.footer-brand .brand-caption[data-i18n="brandPatioCaption"]{top:auto;bottom:calc(100% + 4px);--caption-fill:linear-gradient(90deg,#0073cf 0%,#008e49 100%)}
.brand .brand-caption[data-i18n="brandRioCaption"],.footer-brand .brand-caption[data-i18n="brandRioCaption"]{top:calc(100% + 4px);bottom:auto;color:#008e49;--caption-fill:linear-gradient(90deg,#008e49 0%,#0073cf 100%)}
.brand-caption-line{font-size:inherit;font-style:normal;-webkit-text-stroke:0;text-shadow:none;filter:none}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .brand .brand-caption,.footer-brand .brand-caption{background-image:var(--caption-fill);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
 .brand-caption-line{background-image:var(--caption-fill);background-clip:text;-webkit-background-clip:text}
}
/* Paint reaches the page top, page bottom and both viewport edges. The existing
   outer motif borders and transparent wordmarks keep their geometry. */
.page-top,footer{width:100%;margin:0;background-size:100% 100%;background-position:0 0;background-clip:border-box}
.page-top::before{inset:0;left:0;right:0;top:0;bottom:0;border-width:24px;border-image-width:24px}
.page-top::after{content:none;display:none}
/* Raise the compact, unfilled zigzag buttons. Their utility row shares the
   exact navigation bounds: ES/EN at the left, concept/no-orders at the right. */
.site-header{grid-template-rows:auto 1fr}
.site-header nav{align-self:start}
.site-header nav a{min-height:44px;padding:8px 8px;font-size:12px;border-image:none!important}
.site-header nav a::before,.site-header nav a:hover::before{content:'';display:block;inset:0;background:url('assets/nav-zigzag-green.svg') center/100% 100% no-repeat;pointer-events:none}
.site-header>.header-utility{align-self:start;justify-content:space-between}
/* A real outside border band preserves the entire portrait and its breakfast.
   The photo and caption retain the same outer width, without an arch crop. */
.hero-figure>.picture-frame{border:12px solid transparent!important;border-image:url('assets/sketch-frame.svg') 18 / 12px / 0 round!important;padding:3px;border-radius:0;overflow:visible}
.hero-figure>.picture-frame>img{border-radius:0}
.hero-figure>.picture-frame::after{content:none;display:none}
@media(max-width:960px){.site-header{grid-template-rows:auto}}
@media(max-width:600px){
 .page-top::before{border-width:12px;border-image-width:12px}
 .site-header nav a{font-size:11px;padding-inline:7px}
}
@media(max-width:360px){.site-header nav a{padding-inline:5px}}
@media(forced-colors:active){
 .brand .brand-caption,.footer-brand .brand-caption,.brand-caption-line{color:CanvasText;background-image:none;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0}
 .page-top::before{border-width:1px;border-image:none}
 .site-header nav a::before{display:none}
 .hero-figure>.picture-frame{border:1px solid CanvasText!important;border-image:none!important}
}

/* Only the requested opening heading and its paragraph share this new box.
   Move the existing light wash to that group, removing the inner phrase box. */
.hero-copy>.hero-intro-box{width:100%;padding:clamp(14px,1.8vw,24px);border:12px solid transparent;border-image:url('assets/sketch-frame.svg') 18 / 12px / 0 round;background:linear-gradient(115deg,#fff6001f 0%,#ffb42d14 48%,#5ee5cc1a 100%);background-clip:padding-box}
.hero-intro-box>h1{width:100%}
.hero-intro-box>.hero-description{margin:22px auto 0}
.hero-copy .hero-intro-box h1 em{padding:0;background:transparent;border:0!important;border-image:none!important;box-shadow:none!important}
.hero-copy .hero-intro-box h1 em::after{content:none;display:none}
/* Echo the two existing between-word motifs at the sign's open outer ends.
   Small end caps stay in the spare margin; the lettering remains unobscured. */
.hero>.vibes-sign>span:first-child::before,.hero>.vibes-sign>span:last-child::after{content:'';display:block;position:absolute;top:50%;width:clamp(10px,2vw,28px);aspect-ratio:1;background:url('assets/vibes-neon-motifs.svg') 0 0/200% 100% no-repeat;pointer-events:none;user-select:none;filter:saturate(1.2) brightness(1.08)}
.hero>.vibes-sign>span:first-child::before{left:0;transform:translate(-50%,-50%)}
.hero>.vibes-sign>span:last-child::after{right:0;background-position:100% 0;transform:translate(50%,-50%)}
.hero>.vibes-sign>span:nth-child(1){color:#eaff00}
.hero>.vibes-sign>span:nth-child(2){color:#00eaff}
.hero>.vibes-sign>span:nth-child(3){color:#a6ff00}
.hero>.vibes-sign>span:nth-child(1)::after,.hero>.vibes-sign>span:nth-child(2)::after{filter:saturate(1.2) brightness(1.08)}
@media(forced-colors:active){
 .hero-copy>.hero-intro-box{background:Canvas;color:CanvasText;border:1px solid CanvasText;border-image:none}
 .hero>.vibes-sign>span:first-child::before,.hero>.vibes-sign>span:last-child::after{display:none}
}
/* Keep the two utility endpoints aligned even on extra-wide screens. */
.site-header nav,.site-header>.header-utility{max-width:1320px}
/* With the menu eyebrow removed, the family scene fills its left column.
   Compact, even gaps group the remaining title, complete picture and note. */
.menu-section .section-heading>.menu-title-lockup{justify-content:center;gap:16px}
.menu-title-lockup>.menu-patio-family-art{width:100%;max-width:none;height:auto;object-fit:contain;margin:0}
.menu-title-lockup>.menu-naming-note{max-width:100%;margin:0}

/* Category titles use the whole left half when needed, with natural wrapping
   instead of phrase-specific widths or forced line counts. Keep the complete
   cartoon/quip pair in the right half, and the existing stacked phone layout. */
.menu-group .menu-group-heading{padding-block:16px}
.menu-group-heading>div:not(.menu-character){align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
html[lang] .menu-group[data-menu-group] .menu-group-heading h3{display:block;width:fit-content;max-width:100%;margin:0 auto;padding-block:9px;white-space:normal;text-wrap:balance}
@media(max-width:360px){
 .menu-group[data-menu-group="coffee"] .menu-group-heading h3{font-size:27px}
 .menu-group .menu-group-heading h3[data-i18n="drinksHeading"]{font-size:27px}
}

/* The full signature belongs to the upper-right header space, independently
   of the bare wordmark. Navigation sits below it, followed by the same utility
   endpoints. Flexible first-row space fills the logo height without a spacer. */
.site-header{grid-template-rows:minmax(0,1fr) auto auto;row-gap:8px}
.site-header>.brand-lockup{grid-row:1 / 4}
.site-header>.header-tagline{grid-column:2;grid-row:1;align-self:center;justify-self:stretch;width:100%;max-width:1320px;min-width:0;margin:0;padding:0 8px;font-family:var(--sans);font-size:clamp(16px,1.45vw,21px);font-weight:400;font-style:italic;line-height:1.45;letter-spacing:0;text-align:center;text-wrap:balance;color:#123f38}
.site-header nav{grid-row:2;align-self:end}
.site-header>.header-utility{grid-row:3;align-self:start}
/* Remove only the empty caption reservation. Both complete wordmarks keep
   their exact lettering, slants, nested-y geometry, sizes, spacing and colors. */
.site-header .brand,.footer-brand{padding-block:8px}
.footer-top>p{font-weight:400;font-style:italic}
/* Move the existing slogan and its small quip down together by just six pixels,
   keeping their spacing and the plant/CTA panel's dimensions unchanged. */
.hero-note-row>.hero-seal,.hero-action-slot>.hero-note-row>.hero-footnote{position:relative;top:6px}
@media(max-width:960px){
 .site-header{grid-template-rows:auto auto auto auto;row-gap:10px}
 .site-header>.brand-lockup{grid-row:1}
 .site-header>.header-tagline{grid-column:1;grid-row:2}
 .site-header nav{grid-row:3}
 .site-header>.header-utility{grid-row:4}
}
@media(forced-colors:active){.site-header>.header-tagline{color:CanvasText}}

/* Two local breathing spaces in the garden story: keep the existing column
   geometry and drawn dividers, adding 16px before step 01 and the final quip. */
.garden-copy>.garden-intro-copy + .garden-principles{margin-top:16px}
.garden-copy .garden-principles>div:last-child>.garden-quip{margin-top:31px}

/* Centered bilingual header utility: semantic ES | notice | EN order.
   Keep the existing header grid, with a compact single-line control group. */
.site-header>.header-utility{justify-content:center}
.site-header>.header-utility>.languages{justify-content:center;flex-wrap:nowrap;gap:8px;max-width:100%}
.header-utility>.languages>.language{flex:0 0 auto;min-width:44px;min-height:44px}
.header-utility>.languages>.concept-note{display:flex;align-items:center;justify-content:center;flex:0 0 auto;gap:6px;position:static;margin:0;padding:0;width:auto;font-size:inherit;line-height:1.4;letter-spacing:inherit;text-align:center;white-space:nowrap}
.header-utility>.languages>.utility-separator{flex:0 0 auto;pointer-events:none}
@media(max-width:600px){.site-header>.header-utility>.languages{gap:6px}}

/* One connected neon garden around GOOD VIBES ONLY. All four motifs retain
   the exact size and sprite paint of the two original internal references.
   The original words, flex tracks, font metrics and sign box stay unchanged. */
.hero>.vibes-sign{
 --vibes-motif-size:clamp(18px,6vw,72px);
 --vibes-pad-x:22px;
 --vibes-pad-y:14px;
 --vibes-half-gap:.175em;
 --vibes-glow:drop-shadow(0 0 .025em #00e5ff) drop-shadow(0 0 .06em #b7ff0080);
 border-image:none!important;
 overflow:visible;
}
.hero>.vibes-sign>span{text-shadow:0 0 .045em currentColor,0 0 .11em currentColor}
.hero>.vibes-sign>span:first-child::before,
.hero>.vibes-sign>span:nth-child(1)::after,
.hero>.vibes-sign>span:nth-child(2)::after,
.hero>.vibes-sign>span:last-child::after{
 width:var(--vibes-motif-size);
 height:calc(100% + var(--vibes-pad-y) * 2 - 14px);
 aspect-ratio:auto;
 background-image:url('assets/vibes-neon-motifs.svg'),url('assets/vibes-neon-tendrils.svg');
 background-size:200% var(--vibes-motif-size),100% 100%;
 background-position:0 50%,center;
 background-repeat:no-repeat;
 filter:var(--vibes-glow);
 overflow:visible;
 pointer-events:none;
 user-select:none;
}
.hero>.vibes-sign>span:first-child::before{left:calc(0px - var(--vibes-half-gap))}
.hero>.vibes-sign>span:nth-child(1)::after,
.hero>.vibes-sign>span:nth-child(2)::after{left:calc(100% + var(--vibes-half-gap))}
.hero>.vibes-sign>span:nth-child(2)::after,
.hero>.vibes-sign>span:last-child::after{background-position:100% 50%,center}
.hero>.vibes-sign>span:last-child::after{right:calc(0px - var(--vibes-half-gap))}
/* The continuous upper/lower vines meet all four vertical tendrils. They use
   only existing padding; no backdrop, larger box, motion or lettering overlay. */
.hero>.vibes-sign::before,.hero>.vibes-sign::after{
 left:calc(var(--vibes-pad-x) - var(--vibes-half-gap));
 right:calc(var(--vibes-pad-x) - var(--vibes-half-gap));
 height:14px;
 background-image:url('assets/vibes-neon-vine.svg');
 background-size:240px 14px;
 background-position:left center;
 background-repeat:repeat-x;
 filter:var(--vibes-glow);
 overflow:visible;
 pointer-events:none;
 user-select:none;
}
.hero>.vibes-sign::before{top:0;bottom:auto}
.hero>.vibes-sign::after{top:auto;bottom:0;transform:scaleY(-1)}
@media(max-width:680px){
 .hero>.vibes-sign{--vibes-pad-x:10px;--vibes-pad-y:12px;--vibes-half-gap:.11em}
}
@media(max-width:360px){.hero>.vibes-sign{--vibes-motif-size:14px}}
@media(forced-colors:active){
 .hero>.vibes-sign>span{text-shadow:none}
 .hero>.vibes-sign::before,.hero>.vibes-sign::after,
 .hero>.vibes-sign>span:first-child::before,
 .hero>.vibes-sign>span:nth-child(1)::after,
 .hero>.vibes-sign>span:nth-child(2)::after,
 .hero>.vibes-sign>span:last-child::after{display:none;filter:none}
}

/* Footer-only compact spacing: trim stacked row padding and the mobile logo
   gap, preserving the complete wordmark and the existing outer frame gutter. */
footer>.footer-top{padding-block:16px 12px}
footer>.footer-bottom{padding-block:10px 10px}
@media(max-width:960px){footer>.footer-top{row-gap:12px}}
@media(max-width:600px){
 footer>.footer-top{padding-block:12px 10px}
 footer>.footer-bottom{padding-block:8px 8px}
}

/* Family-heart refinement: fuller complete artworks and filled original brush
   lettering. Only this title uses the filled derivative; its source preserves
   the original squiggle contours. Palette samples come from the two v3 PNGs. */
@font-face{font-family:'Patio Scribble Filled';src:url('assets/patio-scribble-filled.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
.family-story-heading{gap:clamp(10px,1.4vw,20px)}
.family-story-heading>.family-story-art{width:100%;max-width:380px;height:auto;aspect-ratio:1 / 1;object-fit:contain;object-position:center;justify-self:center;align-self:center}
.family-story-title>.eyebrow,.together-section .family-story-title>h2,.together-section .family-story-title>h2>span,.together-section .family-story-title>h2>em{font-family:'Patio Scribble Filled','Patio Scribble','Trebuchet MS',Arial,sans-serif;font-weight:600;font-style:normal;font-synthesis:none}
.family-story-title>.eyebrow{font-size:clamp(19.2px,1.63vw,23px)}
.together-section .family-story-title>h2{font-size:clamp(34px,3.5vw,48px)}
.family-story-title>.eyebrow,.together-section .family-story-title>h2>span,.together-section .family-story-title>h2>em{color:#00a5b8;-webkit-text-fill-color:currentColor;-webkit-text-stroke:.28px #15565c}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .family-story-title>.eyebrow,.together-section .family-story-title>h2>span,.together-section .family-story-title>h2>em{background-image:linear-gradient(105deg,#00a5b8 0%,#15af00 29%,#fd7800 54%,#fdf101 76%,#7e4913 100%);background-color:transparent;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(max-width:950px){
 .family-story-heading{gap:14px 10px}
 .family-story-heading>.family-story-art{max-width:clamp(144px,39vw,250px)}
 .family-story-title>.eyebrow{font-size:clamp(16.4px,4.42vw,21.2px)}
 .together-section .family-story-title>h2{font-size:clamp(32.5px,7.7vw,42.5px)}
}
@media(forced-colors:active){
 .family-story-title>.eyebrow,.together-section .family-story-title>h2>span,.together-section .family-story-title>h2>em{background:none!important;color:CanvasText;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0}
}
/* End family-heart refinement. */

/* Albania spotlight: one outer frame, with each original column centered.
   The heading/spoon/quote and biography retain their existing reading order. */
.chef-spotlight{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;text-align:center}
.chef-spotlight>div:first-child,.chef-spotlight>.chef-bio{align-items:center;justify-content:center;text-align:center}
.chef-spotlight>div:first-child{padding:0;border:0;border-image-source:none!important;background:transparent!important;transform:none}
.chef-spotlight .eyebrow{align-self:center;max-width:100%;margin-inline:0;text-align:center}
.chef-spotlight .chef-comic{justify-content:center;width:100%;max-width:360px;margin-inline:auto}
.chef-spotlight .chef-comic p{min-width:0;padding:0;border:0;border-image-source:none!important;background:transparent!important;text-align:center}
@media(max-width:680px){.chef-spotlight{grid-template-columns:minmax(0,1fr)}}

/* Lower the complete plant/slogan/quip panel in normal flow, so its frame and
   contents move together and the separate elastic CTA area stays balanced. */
.hero-action-slot>.hero-note-row{margin-top:8px}

/* Garden columns share their outer edges and distribute their three groups.
   The closing fourth rule matches the three step dividers exactly. */
.garden-layout>.garden-visual,.garden-layout>.garden-copy{justify-content:space-between}
.garden-copy>.garden-intro-copy + .garden-principles{margin-top:28px}
.garden-copy>.garden-quip{margin-top:28px}
.garden-principles>div:last-child::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:12px;background:url('assets/sketch-rule.svg') center/auto 100% repeat-x;pointer-events:none}
@media(max-width:680px){.garden-layout>.garden-visual,.garden-layout>.garden-copy{justify-content:flex-start}}

/* Louder category pairs: larger natural-wrap titles on the left, and the
   complete cartoon plus a readable quip centered together on the right. */
.menu-group .menu-group-heading{gap:clamp(18px,2.6vw,32px);padding-block:14px;min-height:172px}
html[lang] .menu-group[data-menu-group] .menu-group-heading h3{font-size:clamp(42px,4.4vw,64px);padding-block:7px;white-space:normal;text-wrap:balance}
.menu-group-heading>.menu-character{gap:14px}
.menu-group-heading>.menu-character>img{width:108px;height:144px;flex-basis:108px}
.menu-group-heading>.menu-character>p{flex-basis:245px;max-width:245px;font-size:17.5px;font-weight:800}
@media(max-width:850px) and (min-width:681px){
 .menu-group .menu-group-heading{gap:18px;min-height:148px}
 html[lang] .menu-group[data-menu-group] .menu-group-heading h3{font-size:36px}
 .menu-group-heading>.menu-character{gap:10px}
 .menu-group-heading>.menu-character>img{width:84px;height:112px;flex-basis:84px}
 .menu-group-heading>.menu-character>p{font-size:15px}
}
@media(max-width:680px){
 .menu-group .menu-group-heading{gap:10px;min-height:0}
 html[lang] .menu-group[data-menu-group] .menu-group-heading h3{font-size:clamp(34px,7.8vw,46px)}
 .menu-group-heading>.menu-character{max-width:370px;gap:12px}
 .menu-group-heading>.menu-character>img{width:90px;height:120px;flex-basis:90px}
 .menu-group-heading>.menu-character>p{font-size:16px}
}

/* Menu titles keep their complete wording in at most two live-text phrases.
   The phrase width caps use the actual title-column width, including tablet
   and phone breakpoints, so larger lettering cannot add a third heading row.
   Existing header/cartoon sizes, color washes, underlines and gaps stay put. */
.menu-group-heading>div:not(.menu-character){container-type:inline-size}
html[lang] .menu-group[data-menu-group] .menu-group-heading h3{font-size:clamp(22px,3.1vw,44px);white-space:normal;text-wrap:wrap}
.menu-group-heading h3>.category-title-phrase{display:inline-block;white-space:nowrap}
@media(max-width:680px){
 html[lang] .menu-group[data-menu-group] .menu-group-heading h3{font-size:clamp(22px,5.1vw,42px)}
}
@supports(font-size:1cqw){
 html[lang] .menu-group[data-menu-group] .menu-group-heading h3{--title-target:clamp(42px,4.4vw,64px);--title-fit:14.7cqw;--title-single-fit:14.7cqw;font-size:min(var(--title-target),var(--title-fit),max(32px,var(--title-single-fit)))}
 html[lang] .menu-group[data-menu-group="sandwich"] .menu-group-heading h3{--title-fit:13cqw}
 html[lang="es"] .menu-group[data-menu-group="empanadas"] .menu-group-heading h3{--title-fit:9.3cqw}
 html[lang="es"] .menu-group[data-menu-group="coffee"] .menu-group-heading h3{--title-fit:10.7cqw}
 /* Prefer the complete title on one line at a comfortable size. Below 32px,
    keep two phrases instead; the existing phrase cap still prevents overflow.
    These full-title ratios include tracking and 2% room for the outline. */
 html[lang="es"] .menu-group[data-menu-group="breakfast"] .menu-group-heading h3{--title-single-fit:8.08cqw}
 html[lang="en"] .menu-group[data-menu-group="breakfast"] .menu-group-heading h3{--title-single-fit:11.82cqw}
 html[lang="es"] .menu-group[data-menu-group="empanadas"] .menu-group-heading h3{--title-single-fit:5.74cqw}
 html[lang="en"] .menu-group[data-menu-group="empanadas"] .menu-group-heading h3{--title-single-fit:9.58cqw}
 html[lang="es"] .menu-group[data-menu-group="sandwich"] .menu-group-heading h3{--title-single-fit:7.68cqw}
 html[lang="en"] .menu-group[data-menu-group="sandwich"] .menu-group-heading h3{--title-single-fit:7.58cqw}
 html[lang="es"] .menu-group[data-menu-group="sides"] .menu-group-heading h3{--title-single-fit:13.53cqw}
 html[lang="en"] .menu-group[data-menu-group="sides"] .menu-group-heading h3{--title-single-fit:17.49cqw}
 html[lang="es"] .menu-group[data-menu-group="coffee"] .menu-group-heading h3{--title-single-fit:6.27cqw}
 html[lang="en"] .menu-group[data-menu-group="coffee"] .menu-group-heading h3{--title-single-fit:7.82cqw}
 html[lang="es"] .menu-group[data-menu-group="cold"] .menu-group-heading h3{--title-single-fit:11.16cqw}
 html[lang="en"] .menu-group[data-menu-group="cold"] .menu-group-heading h3{--title-single-fit:7.49cqw}
 html[lang="es"] .menu-group[data-menu-group="drinks"] .menu-group-heading h3{--title-single-fit:10.70cqw}
 html[lang="en"] .menu-group[data-menu-group="drinks"] .menu-group-heading h3{--title-single-fit:11.66cqw}
 @media(max-width:850px) and (min-width:681px){
  html[lang] .menu-group[data-menu-group] .menu-group-heading h3{--title-target:36px}
 }
 @media(max-width:680px){
  html[lang] .menu-group[data-menu-group] .menu-group-heading h3{--title-target:clamp(34px,7.8vw,46px)}
 }
}

/* Compact menu categories: keep the large fitted headings and all live text,
   but let content determine height instead of reserving empty header space. */
.menu-group{margin-top:20px;padding-block:14px 10px}
.menu-group+.menu-group{margin-top:20px}
.menu-group .menu-group-heading{min-height:0;padding-block:6px;border-width:0}
.menu-group-heading>div:not(.menu-character){gap:0}
.menu-group-heading>div:not(.menu-character)>p{margin-top:4px}
.menu-group-heading>.menu-character{gap:10px}
.menu-group-heading>.menu-character>img{width:90px;height:120px;flex-basis:90px}
.menu-group-heading>.menu-character>p{margin-top:0;padding-block:4px}
.menu-group>.menu-grid{gap:0 clamp(16px,2vw,24px)}
.menu-group .menu-item{align-items:center;padding-block:14px}
.menu-group .menu-info{text-align:center}
.menu-group .menu-info>h4{font-size:22px}
.menu-group .menu-info>.item-category{margin-bottom:4px;font-size:11px;font-weight:700}
.menu-group .menu-info>p:not(.item-category):not(.item-price){max-width:none;margin-top:5px;font-size:14px;font-weight:600;line-height:1.55}
.menu-group .menu-info>.item-price{margin-top:6px;font-size:11px;font-weight:700}
@media(max-width:850px) and (min-width:681px){
 .menu-group-heading>.menu-character>img{width:76px;height:102px;flex-basis:76px}
}
@media(max-width:680px){
 .menu-group{margin-top:16px;padding-block:10px}
 .menu-group+.menu-group{margin-top:16px}
 .menu-group .menu-group-heading{row-gap:6px}
 .menu-group-heading>.menu-character>img{width:76px;height:102px;flex-basis:76px}
 .menu-group .menu-item{padding-block:12px}
}
/* Three centered columns on roomy desktops, keeping DOM order down columns.
   Five dishes: 2 / 1 / 2, with the middle dish vertically centered.
   Four dishes: 1 / 2 / 1. Sides use natural-height columns below. */
@media(min-width:1121px){
 .menu-group>.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
 .menu-group>.menu-grid>.menu-item{align-self:center}
 .menu-group>.menu-grid>.menu-item:first-child:nth-last-child(5){grid-column:1;grid-row:1}
 .menu-group>.menu-grid>.menu-item:nth-child(2):nth-last-child(4){grid-column:1;grid-row:2}
 .menu-group>.menu-grid>.menu-item:nth-child(3):nth-last-child(3){grid-column:2;grid-row:1 / 3}
 .menu-group>.menu-grid>.menu-item:nth-child(4):nth-last-child(2){grid-column:3;grid-row:1}
 .menu-group>.menu-grid>.menu-item:nth-child(5):last-child{grid-column:3;grid-row:2}
 .menu-group>.menu-grid>.menu-item:first-child:nth-last-child(4){grid-column:1;grid-row:1 / 3}
 .menu-group>.menu-grid>.menu-item:nth-child(2):nth-last-child(3){grid-column:2;grid-row:1}
 .menu-group>.menu-grid>.menu-item:nth-child(3):nth-last-child(2){grid-column:2;grid-row:2}
 .menu-group>.menu-grid>.menu-item:nth-child(4):last-child{grid-column:3;grid-row:1 / 3}


}

/* Complete single-line category names, sized independently up to the same
   display ceiling. The language-specific full-phrase ratios above include
   tracking and a little breathing room for the existing colored outline. */
.menu-group .menu-group-heading{
 grid-template-columns:minmax(0,2fr) minmax(0,1fr);
 column-gap:clamp(24px,3vw,36px);
 row-gap:14px;
 min-height:0;
 padding-block:10px 18px;
 margin-bottom:10px;
}
html[lang] .menu-group[data-menu-group] .menu-group-heading h3{
 width:fit-content;
 max-width:100%;
 padding-block:4px;
 white-space:nowrap;
 text-wrap:nowrap;
 font-size:min(44px,3vw);
}
@supports(font-size:1cqw){
 html[lang] .menu-group[data-menu-group] .menu-group-heading h3{
  --title-target:64px;
  font-size:min(var(--title-target),var(--title-single-fit));
 }
}
/* One rule belongs between the complete header and the dishes. Separate grid
   tracks and a compact gap distinguish the title from its cartoon and quote. */
.menu-group .menu-group-heading h3::after{content:none;display:none}
.menu-group .menu-group-heading::after{
 content:'';
 display:block;
 left:0;
 right:0;
 bottom:0;
 height:8px;
 background:url('assets/sketch-rule.svg') center/auto 100% repeat-x;
 -webkit-mask:none;
 mask:none;
}
.menu-group-heading>div:not(.menu-character)>p{margin-top:8px}
.menu-group-heading>.menu-character{max-width:360px;justify-self:center;gap:12px}
.menu-group-heading>.menu-character>p{margin-top:0;padding-block:4px}
@media(max-width:1120px){
 .menu-group-heading>.menu-character>img{width:76px;height:102px;flex-basis:76px}
 .menu-group-heading>.menu-character>p{font-size:16px}
}
/* Give narrow screens the full title width before the companion row, rather
   than squeeze two unrelated parts together. Longer Spanish empanadas get
   that treatment a little earlier to keep the desktop title near 32px+. */
@media(max-width:1000px){
 html[lang="es"] .menu-group[data-menu-group="empanadas"] .menu-group-heading{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:960px){
 .menu-group .menu-group-heading{grid-template-columns:minmax(0,1fr);row-gap:12px}
}
@media(max-width:680px){
 .menu-group .menu-group-heading{padding-block:8px 16px;margin-bottom:8px;row-gap:12px}
}

/* Brighter neon around this sign only: retain the sharp letter cores, colors,
   complete motifs, box geometry, and the existing motion-free presentation. */
.hero>.vibes-sign{
 --vibes-glow:drop-shadow(0 0 .04em #00e5ff) drop-shadow(0 0 .10em #b7ff00b3);
}
.hero>.vibes-sign>span{
 text-shadow:0 0 .025em #ffffffb3,0 0 .075em currentColor,0 0 .16em currentColor,0 0 .28em currentColor;
}
@media(forced-colors:active){.hero>.vibes-sign>span{text-shadow:none}}

/* Four distinct neon patterns keep the original four slots, scale and tethers. */
.hero>.vibes-sign>span:first-child::before,
.hero>.vibes-sign>span:nth-child(1)::after,
.hero>.vibes-sign>span:nth-child(2)::after,
.hero>.vibes-sign>span:last-child::after{
 background-size:400% var(--vibes-motif-size),100% 100%;
}
.hero>.vibes-sign>span:first-child::before{background-position:0% 50%,center}
.hero>.vibes-sign>span:nth-child(1)::after{background-position:33.333333% 50%,center}
.hero>.vibes-sign>span:nth-child(2)::after{background-position:66.666667% 50%,center}
.hero>.vibes-sign>span:last-child::after{background-position:100% 50%,center}

/* Ten sides flow down three independent natural-height columns (4 / 3 / 3).
   Avoid explicit equal-height rows: the old six-row layout left two empty rows.
   Contents preserves the original one/two-column card flow below desktop. */
.menu-group[data-menu-group="sides"] .side-column{display:contents}
.menu-group[data-menu-group="sides"] .menu-item{padding-block:10px}
@media(min-width:1121px){
 .menu-group[data-menu-group="sides"]>.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
 .menu-group[data-menu-group="sides"] .side-column{display:flex;flex-direction:column;min-width:0}
 .menu-group[data-menu-group="sides"] .menu-item{gap:12px;min-width:0}
 .menu-group[data-menu-group="sides"] .menu-icon{width:54px;height:54px;flex-basis:54px}
}