/* ViLand Coffee & Beignets: site styles.
   BRAND TOKENS: swap colors, fonts and logo paths here when the updated kit lands.
   Source: ViLand Brand Guidelines Edition 02 (Oct 2026): navy #182744, cream #F6F1E7, white. No accent colors.
   Display: Cormorant Garamond. Text: Montserrat (Ed. 02 names Be Vietnam Pro; swap --text + @font-face). Built from /DESIGN.md. Logo files live in /assets/brand/. */
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/assets/fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/assets/fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
:root{
  --navy:#182744; --cream:#F6F1E7; --white:#FFFFFF;
  --navy-70:rgba(24,39,68,.78);       /* body copy on cream; >= 7:1 */
  --line:rgba(24,39,68,.18);
  --cream-70:rgba(246,241,231,.82);
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pattern-dark:url("/assets/brand/pattern-highland-lines-cream-on-navy.webp");
  --pattern-light:url("/assets/brand/pattern-highland-lines-navy-on-cream.webp");
  --wrap:1200px; --gutter:clamp(20px,5vw,56px); --section:clamp(72px,11vw,144px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--text);font-weight:300;font-size:1rem;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .4em;letter-spacing:-.005em}
h1{font-size:clamp(3rem,8.5vw,6.5rem);line-height:1}
h2{font-size:clamp(2.375rem,5.6vw,4.25rem);line-height:1.06}
h3{font-size:clamp(1.4375rem,2.4vw,1.75rem);font-weight:500;line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--text);font-weight:400;font-size:0.75rem;letter-spacing:.26em;text-transform:uppercase;line-height:1.4;margin:0 0 14px}
.lede{font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.75;max-width:36em;color:var(--navy-70)}
.italic{font-style:italic}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:12px;transform:translateY(-200%);z-index:20;background:var(--white);color:var(--navy);padding:12px 18px;font-weight:500;text-decoration:none}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--cream)}

/* Header */
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:14px;padding-bottom:14px}
.brand-link{display:block;line-height:0;padding:4px 0}
.brand-link img{width:160px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:0.8125rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.nav a:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}}
@media (max-width:719px){
  .site-header .wrap{justify-content:center}
  .nav{justify-content:center;width:100%}
  .nav a{padding:0 9px;font-size:0.75rem;letter-spacing:.14em}
  .nav .btn{display:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border:1px solid var(--navy);text-decoration:none;font-family:var(--text);font-size:0.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.3;text-align:center;transition:background-color .18s,color .18s}
.btn-solid{background:var(--navy);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.btn-solid:hover{background:transparent;color:var(--navy)}}
.btn-line{background:transparent;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.btn-line:hover{background:var(--navy);color:var(--cream)}}
.dark .btn{border-color:var(--cream)}
.dark .btn-solid{background:var(--cream);color:var(--navy)}
@media (hover:hover) and (pointer:fine){.dark .btn-solid:hover{background:transparent;color:var(--cream)}}
.dark .btn-line{color:var(--cream)}
@media (hover:hover) and (pointer:fine){.dark .btn-line:hover{background:var(--cream);color:var(--navy)}}
.nav .btn{min-height:44px;padding:8px 18px;margin-left:6px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Sections */
section{padding:var(--section) 0}
.dark{background:var(--navy);color:var(--cream)}
.dark .lede{color:var(--cream-70)}
.white{background:var(--white)}
.patterned{background:var(--navy) var(--pattern-dark) 0 0/240px auto}
.panel{background:var(--navy);padding:clamp(28px,5vw,56px)}

/* Hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,96px)}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero h1{margin-bottom:.25em}
.status{display:inline-flex;align-items:center;gap:10px;font-size:0.75rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin:6px 0 0}
.status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0}
.hero-art img:first-child{transform:translateX(8%)}
.hero-art img:last-child{transform:translateX(-6%)}

/* Pillars */
.pillars{display:grid;gap:36px;margin-top:40px}
.pillar{border-top:1px solid var(--cream-70);padding-top:22px}
.pillar .num{font-family:var(--display);font-style:italic;font-size:1.375rem;display:block;margin-bottom:6px}
.pillar p{color:var(--cream-70);margin:0}

/* Product cards */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;margin-top:36px}
.product{margin:0;text-align:center}
.product img{margin:0 auto 14px;max-height:260px;width:auto}
.product figcaption{font-family:var(--display);font-size:1.375rem;font-weight:500;line-height:1.2}
.product figcaption span{display:block;font-family:var(--text);font-size:0.875rem;font-weight:300;color:var(--navy-70);margin-top:6px;line-height:1.5}

/* Split image + text */
.split{display:grid;gap:36px;align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Menu */
.menu-nav{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.menu-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);text-decoration:none;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
@media (hover:hover) and (pointer:fine){.menu-nav a:hover{border-color:var(--navy)}}
.menu-cat{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line);scroll-margin-top:12px}
.menu-cat:nth-of-type(even){background:var(--white)}
.menu-cat-head{display:grid;gap:28px;align-items:end;margin-bottom:28px}
.menu-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.menu-photos figure{margin:0;text-align:center}
.menu-photos img{margin:0 auto 8px;max-height:220px;width:auto}
.menu-photos figcaption{font-size:0.8125rem;color:var(--navy-70);line-height:1.4}
.items{list-style:none;margin:0;padding:0;display:grid;gap:0 48px}
.items li{padding:18px 0;border-bottom:1px solid var(--line)}
.items h3{margin:0 0 4px;font-size:1.5rem}
.items p{margin:0;font-size:0.9375rem;color:var(--navy-70);line-height:1.6}
.note{font-size:0.875rem;color:var(--navy-70)}

/* Visit */
.info{display:grid;gap:28px}
.info-row{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.info-row img{width:32px;height:32px;margin-top:2px}

.info-row p{margin:0}
.map{width:100%;aspect-ratio:4/3;border:0;background:var(--white);display:block}
.link-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Footer */
.site-footer{background:var(--navy);color:var(--cream);padding:56px 0 40px;font-size:0.9375rem}
.site-footer .wrap{display:grid;gap:28px}
.site-footer img.flogo{width:170px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.site-footer li a:hover{text-decoration:underline;text-underline-offset:6px}}
.site-footer .fine{font-size:0.8125rem;color:var(--cream-70);border-top:1px solid rgba(246,241,231,.25);padding-top:20px;margin:0}

@media (min-width:720px){
  .products{grid-template-columns:repeat(4,1fr)}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .menu-photos{grid-template-columns:repeat(4,1fr)}
  .items{grid-template-columns:1fr 1fr}
  .site-footer .wrap{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:48px}
  .split{grid-template-columns:1fr 1fr;gap:72px}
  .split.reverse > :first-child{order:2}
  .brand-link img{width:190px}
  .menu-cat-head{grid-template-columns:1fr 1fr}
  .info-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
}


/* Hero art: large cut-outs with their own contact shadows */
.hero-art{display:block;position:relative;min-height:0}
.hero-art img{width:100%;max-width:640px;margin:0 auto}

.subhead{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;margin:0 0 .6em}

/* Full-bleed photo band with navy panel */
.bleed{position:relative;padding:0;background:var(--navy)}
.bleed img{width:100%;height:min(80vh,780px);height:min(80svh,780px);object-fit:cover}
.bleed .panel{position:relative;margin:-90px var(--gutter) 0;max-width:560px}
@media (min-width:1024px){.bleed .panel{position:absolute;left:max(var(--gutter),calc(50vw - 600px + 56px));bottom:56px;margin:0}}

/* Footer pattern strip */
.pattern-strip{height:64px;background:var(--navy) var(--pattern-dark) 0 0/200px auto;opacity:.9}

/* Motion: fade-up reveal. Content stays visible without JS (class added by site.js). */
/* v12: reveal + reduced motion moved to the Motion block at the end of this file. */

/* Favorites lineup: one composited photograph on a shared tabletop */
.lineup{margin:40px 0 0}
.lineup img{width:100%}
.lineup-names{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px;text-align:center}
.lineup-names li{font-family:var(--display);font-size:1.375rem;font-weight:500;line-height:1.2}
.lineup-names span{display:block;font-family:var(--text);font-size:0.875rem;font-weight:300;color:var(--navy-70);margin-top:6px;line-height:1.5}
@media (min-width:720px){.lineup-names{grid-template-columns:var(--cols,repeat(4,1fr));gap:18px 12px}}
/* Listings row */
.listings{margin-top:28px}
.listings ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.listings a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--navy);text-decoration:none;font-size:0.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background-color .18s,color .18s}
@media (hover:hover) and (pointer:fine){.listings a:hover{background:var(--navy);color:var(--cream)}}
.listings.on-dark a,.site-footer .listings a{border-color:var(--cream);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.listings.on-dark a:hover,.site-footer .listings a:hover{background:var(--cream);color:var(--navy)}}
h2.h3{font-size:1.5rem;font-weight:500;line-height:1.2;margin:0 0 2px}
.info-row p a{display:inline-block;padding:6px 0;min-height:24px}
iframe:focus-visible,.map:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* Hero photo (hero-grounded-v1) is an intact photograph; its edge cream samples at ~#F5EEE2.
   The hero band uses that color so the photo meets the page with no visible box. No edits to the photo. */
.hero-photo-bg{background:#F5EEE2}
.hero-art img{width:100%;max-width:560px;margin:0 auto}
/* v7: edge fade on the intact hero photo, confined to its empty outer margin (photo pixels untouched).
   Measured clearances in source: left 4.9%, top 4.2% -> 3% / 2.5% fade; cast shadow reaches ~3% at right
   and plate shadow ~3.4% at bottom -> narrower 2% / 1.5% fades there. */
.hero-art img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 98%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 2.5%,#000 98.5%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 98%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 2.5%,#000 98.5%,transparent 100%);
  mask-composite:intersect}
/* ===== v9: button system + "Order & find us" section (DESIGN.md §4 Buttons, §4 Order & find us) ===== */
:root{--btn-h:48px;--btn-h-sm:44px;--btn-pad-x:28px;--btn-radius:0;--btn-gap:16px;--tile-h:96px;--tile-gap:16px;--hair:rgba(24,39,68,.22)}
.btn{min-height:var(--btn-h);padding:0 var(--btn-pad-x);border-radius:var(--btn-radius)}
.nav .btn{min-height:var(--btn-h-sm);padding:0 18px}
.btn-row{gap:var(--btn-gap) calc(var(--btn-gap) * 1.5);align-items:center}
.btn-text{display:inline-flex;align-items:center;gap:8px;min-height:var(--btn-h-sm);padding:0 2px;color:inherit;font-family:var(--text);font-size:0.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (hover:hover) and (pointer:fine){.btn-text:hover{text-decoration-thickness:2px}}
.panel .btn{margin-top:8px}
.cream-band{background:var(--cream)}
.order-sec{border-top:1px solid var(--hair)}
.dark + .order-sec{border-top:0}
.order-head{display:grid;gap:28px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.order-head h2{margin:0}
.order-primary .lede{margin:0 0 24px}
.order-groups{display:grid;gap:clamp(36px,4vw,48px)}
.group-label{font-family:var(--text);font-weight:400;font-size:0.75rem;letter-spacing:.26em;text-transform:uppercase;line-height:1.4;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--tile-gap);grid-template-columns:1fr}
.tile{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:var(--tile-h);padding:18px 52px 18px 24px;background:var(--cream);border:1px solid var(--hair);color:var(--navy);text-decoration:none;transition:border-color .18s,background-color .18s}
.cream-band .tile{background:var(--white)}
.tile-pre{font-size:0.6875rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--navy-70);line-height:1.4}
.tile-name{font-family:var(--display);font-size:1.625rem;font-weight:500;line-height:1.15;margin-top:4px}
.tile-arrow{position:absolute;top:50%;right:22px;margin-top:-8px;transition:transform .18s}
@media (hover:hover) and (pointer:fine){.tile:hover{border-color:var(--navy)}}
@media (hover:hover) and (pointer:fine){.tile:hover .tile-arrow{transform:translate(2px,-2px)}}
@media (min-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .order-head{grid-template-columns:1.1fr 1fr;gap:64px}
  .tiles-3{grid-template-columns:repeat(3,1fr)}
  .tiles-4{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.tile-arrow{transition:none}.tile:hover .tile-arrow{transform:none}}
@media (max-width:559px){:root{--tile-h:72px;--tile-gap:10px}.tile{padding:12px 48px 12px 20px}.tile-name{font-size:1.4375rem;margin-top:2px}}

/* ===== v11: responsive type + UX polish (DESIGN.md §3, §9) ===== */
:root{--section:clamp(56px,7vw + 28px,128px);--hdr-h:64px;--measure:34em}
@media (min-width:720px){:root{--hdr-h:76px}}
html{scroll-padding-top:calc(var(--hdr-h) + 12px)}
body{font-weight:400;line-height:1.6}
.lede{line-height:1.6;max-width:var(--measure);text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* Header: sticky, compact; Order pickup stays visible on phones */
.site-header{position:sticky;top:0;z-index:30}
.site-header .wrap{flex-wrap:nowrap;gap:8px 24px;padding-top:10px;padding-bottom:10px}
.site-nav{margin-left:auto}
.hdr-actions{display:flex;align-items:center;gap:8px;order:3}
.nav{gap:8px}
.nav a{min-width:44px;justify-content:center}
.nav .btn{display:inline-flex}
.nav-toggle{display:none}
@media (max-width:719px){
  .site-header .wrap{flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding-top:8px;padding-bottom:8px}
  .brand-link img{width:116px}
  .hdr-actions{order:2;margin-left:auto}
  .hdr-order{min-height:44px;padding:0 12px;letter-spacing:.12em;margin:0}
  .site-nav{order:3;width:100%;margin:0}
  .nav{justify-content:center;width:100%}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer}
  .nav-toggle path{stroke:currentColor;stroke-width:1.5;transition:transform .18s;transform-origin:11px 11px}
  .nav-open .nav-toggle .l1{transform:translateY(4px) rotate(45deg)}
  .nav-open .nav-toggle .l2{transform:translateY(-4px) rotate(-45deg)}
  .js .site-nav{display:none}
  .js .nav-open .site-nav{display:block;border-top:1px solid var(--line);margin-top:8px;padding:8px 0 4px}
  .js .nav{flex-direction:column;align-items:stretch;gap:0}
  .js .nav a{justify-content:flex-start;min-height:48px;padding:0 4px;font-size:0.8125rem;letter-spacing:.16em}
}
@media (min-width:720px){.hdr-actions{margin-left:6px}.hdr-order{min-height:44px;padding:0 18px}}
/* Hero: tighter top on phones, equal-width two-column CTAs */
.hero{padding-top:clamp(24px,5vw,96px)}
.hero-grid{gap:24px}

@media (min-width:1024px){.hero h1{font-size:clamp(4rem,5.6vw,5.25rem);max-width:none}}
@media (max-width:719px){
  .hero .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .hero .btn{padding:0 10px;letter-spacing:.14em;white-space:nowrap}
  .hero .lede{margin-bottom:.6em}
}
/* Menu: readable descriptions; compact category selector on phones */
.items p{font-size:1rem;line-height:1.6;font-weight:400}
.menu-photos figcaption{font-size:0.875rem}
.lineup-names span,.product figcaption span{font-size:0.9375rem;font-weight:400}
@media (max-width:719px){
  .menu-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .menu-nav li:last-child{grid-column:1/-1}
  .menu-nav a{width:100%;justify-content:center;padding:0 8px;letter-spacing:.1em;text-align:center;line-height:1.25}
}
/* Visit: 44px info links, directions in the first block */
.info-row p a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.info-btn{margin-top:14px}
iframe:focus,.map:focus{outline:3px solid var(--navy);outline-offset:3px}
.site-footer{font-size:1rem}
.brand-link{min-height:44px;display:flex;align-items:center}
.site-footer ul{display:grid;gap:8px}
.site-footer li a{min-width:44px}
.info-grid{display:grid;gap:40px}
.info-grid > div:has(> iframe):focus-within{outline:3px solid var(--navy);outline-offset:3px}
.map-focused{outline:3px solid var(--navy);outline-offset:3px}

/* ===== v12: motion & interaction (DESIGN.md §10 Motion & interaction) ===== */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);       /* entrances, press release, panels */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);   /* on-screen movement (icon morph) */
  --dur-press:90ms; --dur-release:200ms; --dur-hover:180ms;
  --dur-panel-in:220ms; --dur-panel-out:160ms;
  --dur-reveal:560ms; --dur-intro:600ms; --stagger:70ms;
  --rise:14px; --press-scale:.97; --press-scale-lg:.985;
  --hdr-bg:rgba(246,241,231,.9); --hdr-blur:saturate(180%) blur(20px)}

/* Mobile-native baseline */
html{-webkit-tap-highlight-color:transparent}
a,button{touch-action:manipulation}
input,select,textarea{font-size:max(16px,1rem)}
.btn,.tile,.menu-nav a,.nav-toggle,.listings a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.pattern-strip{box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom,0px)}

/* Type: size-specific tracking and leading (brand fonts unchanged) */
h1,h2,h3,.tile-name{font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1{letter-spacing:-.018em}
h2{letter-spacing:-.012em}
h3,h2.h3,.tile-name{letter-spacing:-.004em}
.label,.group-label,.tile-pre{font-variant-numeric:lining-nums}

/* Press feedback: instant on pointer-down, softer release. Transform only. */
.btn,.tile,.menu-nav a,.listings a,.nav-toggle{transition:transform var(--dur-release) var(--ease-out),background-color var(--dur-hover) ease,color var(--dur-hover) ease,border-color var(--dur-hover) ease}
.btn:active,.menu-nav a:active,.listings a:active,.nav-toggle:active{transform:scale(var(--press-scale));transition-duration:var(--dur-press)}
.tile:active{transform:scale(var(--press-scale-lg));transition-duration:var(--dur-press)}
.nav a,.btn-text,.site-footer li a{transition:opacity var(--dur-release) ease}
.nav a:active,.btn-text:active,.site-footer li a:active{opacity:.6;transition-duration:var(--dur-press)}
.tile-arrow{transition:transform var(--dur-hover) var(--ease-out)}

/* Frosted sticky header with a scroll-edge fade instead of a hard rule */
.site-header{background:var(--hdr-bg);-webkit-backdrop-filter:var(--hdr-blur);backdrop-filter:var(--hdr-blur);border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
.site-header::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;background:linear-gradient(to bottom,rgba(24,39,68,.09),rgba(24,39,68,0));opacity:0;transition:opacity var(--dur-hover) ease}
.site-header.is-stuck::after{opacity:1}
.nav a{font-weight:500}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header{background:var(--cream)}}
@media (prefers-reduced-transparency:reduce){.site-header{background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Mobile menu: an overlay panel anchored under its trigger; interruptible CSS transitions */
@media (max-width:719px){
  .js .site-nav{display:block;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px max(var(--gutter),env(safe-area-inset-right,0px)) 14px max(var(--gutter),env(safe-area-inset-left,0px));
    background:var(--cream);border-top:1px solid var(--line);box-shadow:0 18px 32px -18px rgba(24,39,68,.28);
    opacity:0;transform:translateY(-8px);visibility:hidden;
    transition:opacity var(--dur-panel-out) var(--ease-out),transform var(--dur-panel-out) var(--ease-out),visibility 0s linear var(--dur-panel-out)}
  .js .nav-open .site-nav{display:block;border-top:1px solid var(--line);margin:0;padding:6px max(var(--gutter),env(safe-area-inset-right,0px)) 14px max(var(--gutter),env(safe-area-inset-left,0px));opacity:1;transform:none;visibility:visible;
    transition:opacity var(--dur-panel-in) var(--ease-out),transform var(--dur-panel-in) var(--ease-out),visibility 0s}
  .nav-open.site-header::after{opacity:0}
  .site-header.nav-instant .site-nav,.site-header.nav-instant .nav-toggle path{transition:none!important}
  .nav-toggle path{transition:transform var(--dur-panel-in) var(--ease-in-out)}
}

/* Entrances. Content is never hidden without JS: the hero/page intro is a one-off CSS animation,
   and below-the-fold reveals are armed by site.js only for elements that start off-screen. */
@keyframes vl-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes vl-fade{from{opacity:0}to{opacity:1}}
.hero .reveal > *,main > section:first-child:not(.hero) .wrap > .reveal,main > section:first-child .split > div.reveal{animation:vl-rise var(--dur-intro) var(--ease-out) both}
.hero .reveal > :nth-child(2),main > section:first-child:not(.hero) .wrap > .reveal:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.hero .reveal > :nth-child(3),main > section:first-child:not(.hero) .wrap > .reveal:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.hero .reveal > :nth-child(4),main > section:first-child:not(.hero) .wrap > .reveal:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.hero .reveal > :nth-child(n+5),main > section:first-child:not(.hero) .wrap > .reveal:nth-child(n+5){animation-delay:calc(var(--stagger) * 4)}
.reveal-armed{opacity:0;transform:translateY(var(--rise))}
.reveal-armed.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}

/* Reduced motion: fewer and gentler, not zero. Keep fades and color; drop movement and scale. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .reveal > *,main > section:first-child:not(.hero) .wrap > .reveal,main > section:first-child .split > div.reveal{animation:vl-fade 240ms ease both;animation-delay:0s!important}
  .reveal-armed{opacity:1;transform:none}
  .btn:active,.tile:active,.menu-nav a:active,.listings a:active,.nav-toggle:active{transform:none;opacity:.8}
  .js .site-nav,.js .nav-open .site-nav{transform:none!important}
  .tile-arrow{transition:none}
}
/* Higher contrast: solid surfaces, defined borders, full-strength text */
@media (prefers-contrast:more){
  :root{--navy-70:var(--navy);--line:rgba(24,39,68,.6);--hair:rgba(24,39,68,.6);--hdr-bg:var(--cream)}
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--navy)}
  .site-header::after{display:none}
  .tile{border-color:var(--navy)}
}
@media (forced-colors:active){.site-header{border-bottom:1px solid CanvasText}}

/* v12 break-ui fixes: long labels, 150-200% text size, 320px */
.hero-grid > *,.split > *,.info-grid > *,.order-head > *{min-width:0}
h1,h2,h3,.tile-name,.menu-nav a,.items h3{overflow-wrap:anywhere}
h1,h2{-webkit-hyphens:auto;hyphens:auto}
@media (max-width:719px){
  .hero .btn-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
  .hero .btn{white-space:normal;padding:8px 10px;line-height:1.25}
  .menu-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:359px){
  .brand-link img{width:96px}
  .hdr-order{padding:0 8px;letter-spacing:.05em}
  .site-header .wrap{gap:0 6px}
  .hdr-actions{gap:6px}
}

/* v12 review fix: the page intro plays once per visit, not on every page change */
.intro-seen .hero .reveal > *,.intro-seen main > section:first-child:not(.hero) .wrap > .reveal,.intro-seen main > section:first-child .split > div.reveal{animation:none}

/* Bilingual switcher (English / Tiếng Việt) */
.lang-switch{display:flex;margin:0;padding:0;list-style:none;gap:2px}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;text-decoration:none;font-size:0.75rem;font-weight:500;letter-spacing:.06em;color:inherit;opacity:.72}
.lang-switch a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.lang-switch a:hover{opacity:1;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}}
@media (min-width:1200px){.site-nav{display:flex;align-items:center;gap:8px}.lang-switch{border-left:1px solid var(--line);padding-left:8px}}
@media (max-width:1199.98px){.js .lang-switch{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;gap:8px}.js .lang-switch a{min-height:48px;padding:0 4px;font-size:0.8125rem}}
.lang-switch a{opacity:1;color:var(--navy-70)}.lang-switch a[aria-current="true"]{color:var(--navy)}
/* Vietnamese: stacked diacritics need a little more leading in tight display type */
html[lang="vi"] h1{line-height:1.12}
html[lang="vi"] h2{line-height:1.15}
html[lang="vi"] h3,html[lang="vi"] .tile-name,html[lang="vi"] .product figcaption,html[lang="vi"] .lineup-names li{line-height:1.28}
html[lang="vi"] .btn,html[lang="vi"] .btn-text,html[lang="vi"] .nav a,html[lang="vi"] .menu-nav a{line-height:1.4}
/* About: beignet photo stays centred on the plate at every width */
.split img.about-beignets{object-position:50% 52%}
/* Header labels never break */
.nav a,.lang-switch a,.hdr-order{white-space:nowrap}
/* Compact header (menu button + panel) from 720px up to 1199px, so the full nav + switcher + pickup button
   only appear when they fit on one row (VI needs ~1104px). Mirrors the <720px header rules; the brand keeps its size. */
@media (min-width:720px) and (max-width:1199.98px){
  .site-header .wrap{flex-wrap:wrap;justify-content:space-between;gap:0 12px}
  .hdr-actions{order:2;margin-left:auto}
  .site-nav{order:3;width:100%;margin:0}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);background:transparent;color:var(--navy);cursor:pointer}
  .nav-toggle path{stroke:currentColor;stroke-width:1.5;transform-origin:11px 11px;transition:transform var(--dur-panel-in) var(--ease-in-out)}
  .nav-open .nav-toggle .l1{transform:translateY(4px) rotate(45deg)}
  .nav-open .nav-toggle .l2{transform:translateY(-4px) rotate(-45deg)}
  .js .nav{flex-direction:column;align-items:stretch;gap:0}
  .js .nav a{justify-content:flex-start;min-height:48px;padding:0 4px;font-size:0.8125rem;letter-spacing:.16em}
  .js .site-nav{display:block;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px max(var(--gutter),env(safe-area-inset-right,0px)) 14px max(var(--gutter),env(safe-area-inset-left,0px));
    background:var(--cream);border-top:1px solid var(--line);box-shadow:0 18px 32px -18px rgba(24,39,68,.28);
    opacity:0;transform:translateY(-8px);visibility:hidden;
    transition:opacity var(--dur-panel-out) var(--ease-out),transform var(--dur-panel-out) var(--ease-out),visibility 0s linear var(--dur-panel-out)}
  .js .nav-open .site-nav{opacity:1;transform:none;visibility:visible;
    transition:opacity var(--dur-panel-in) var(--ease-out),transform var(--dur-panel-in) var(--ease-out),visibility 0s}
  .nav-open.site-header::after{opacity:0}
  .site-header.nav-instant .site-nav,.site-header.nav-instant .nav-toggle path{transition:none!important}
}
@media (min-width:720px) and (max-width:1199.98px) and (prefers-reduced-motion:reduce){.js .site-nav,.js .nav-open .site-nav{transform:none!important}}