/* Thai Lanxang — Le Swan–style layout, Thai flag accents. Mobile first. */
:root{
  --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper:#FBF8F1;
  --paper-2:#F3EDE0;
  --ink:#1f1b18;
  --ink-2:#5d564f;
  /* Thai-flag red + navy */
  --red:#A51931;
  --red-dark:#8a1328;
  --navy:#2D2A4A;
  --stripe-mid:#2D2A4A;
  --slate:#5F6E94;
  --sage:#B5B99A;
  --gold:#C9A24A;
  --rule:#1f1b18;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Libre Franklin', system-ui, sans-serif;
  --label:'Oswald', 'Arial Narrow', sans-serif;
  --thai:'Noto Serif Thai', serif;
  --hand:'Caveat', cursive;
  --wrap:1180px;
  --gutter:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head-h,60px);-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--paper);background-image:var(--paper-tex);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
[lang="th"]{font-family:var(--thai)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
.muted{color:var(--ink-2)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Thai-flag stripe: red / paper / navy ×2 / paper / red (1:1:2:1:1) */
.flag{height:12px;background:linear-gradient(to bottom,
  var(--red) 0 16.66%, var(--paper) 16.66% 33.33%, var(--stripe-mid) 33.33% 66.66%, var(--paper) 66.66% 83.33%, var(--red) 83.33% 100%)}
.wrap-rule{max-width:calc(var(--wrap) - 2*var(--gutter));margin:56px auto;height:9px}
@media (max-width:1212px){.wrap-rule{margin-inline:var(--gutter)}}

/* order bar */
.orderbar{background:var(--navy);color:#F6EEDC;display:flex;justify-content:center;align-items:center;gap:14px;padding:10px var(--gutter);
  font:500 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
.orderbar a{text-decoration:none}
.orderbar a:hover{color:#fff;text-decoration:underline}
.orderbar .dot{color:var(--gold);font-size:10px}

/* sticky header; the logo slot in the middle is where the storefront logo lands (js/brand.js) */
/* no backdrop-filter here: it stops Chrome painting the multiply-blended illustrations scrolling underneath */
.masthead{position:sticky;top:0;z-index:30;background:var(--paper);   /* flat (no grain): the browser's status-bar tint is a flat colour, so they match */
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.masthead.stuck{border-bottom-color:rgba(31,27,24,.14);box-shadow:0 10px 18px -18px rgba(31,27,24,.7)}
/* Phones with a see-through status bar (iOS 26 Safari) draw the page above the viewport top, behind the clock. A paper
   backing always extends up from the header to cover that strip. The order bar and flag stripe are layered above it, so at
   the top of the page they paint over the backing; once they scroll away, the backing is what sits behind the clock.
   (No scroll tracking: an earlier scroll-timeline switch didn't run in Safari.) */
.masthead::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:var(--paper);pointer-events:none}
.orderbar,.orderbar + .flag{position:relative;z-index:40}
.mh-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter)}
.brand-slot{grid-column:2;display:block;width:var(--brand-w);aspect-ratio:3776/1260}
.mh-side{display:none}
.mh-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.mh-right .js-phone{display:none}
@media (max-width:859px){.mh-right{display:flex}.mh-right .btn-small{padding:7px 12px;font-size:11px}}
@media (min-width:860px){
  .mh-inner{padding:10px var(--gutter)}
  .mh-side{display:flex;flex-direction:column;gap:4px;font:500 13px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;justify-self:start}
  .mh-right{flex-direction:row;align-items:center;gap:16px}
  .mh-right .js-phone{display:inline;text-decoration:none;font-size:15px}
}
/* no will-change here: a promoted layer over the multiply-blended hero makes Chrome drop the illustration */
.brand-logo,.foot-logo,.o-brand{display:block;background:var(--red);-webkit-mask:url(img/logo.svg) center/contain no-repeat;mask:url(img/logo.svg) center/contain no-repeat}
.brand-logo{width:100%;aspect-ratio:3776/1260}
:root{--brand-w:132px}
@media (min-width:860px){:root{--brand-w:178px}}
/* The logo rides on the storefront sign and docks in the header without JavaScript moving it:
   - position: it's part of the page (a sticky element in a full-height rail), so it scrolls with the sign natively and sticks
     at the header's logo slot. The browser does this on the compositor, in step with the scroll, so it can't lag.
   - size: a scroll-driven animation shrinks it from sign size (--s0) to slot size over the same scroll distance (--travel).
   js/brand.js only measures the layout (on resize / font / image changes) to set --sign-top, --dock-top, --s0, --travel. */
@property --lit{syntax:'<number>';inherits:true;initial-value:1}
body{position:relative}
.brand-rail{position:absolute;inset:0;z-index:31;pointer-events:none}
.brand-rail:not(.ready){visibility:hidden}
.brand{position:sticky;top:var(--dock-top,10px);display:block;width:var(--brand-w);margin:var(--sign-top,0px) auto 0;transform-origin:50% 0;transform:scale(var(--s,1))}
@supports (animation-timeline:scroll()){
  .brand{animation:dock linear both;animation-timeline:scroll(root);animation-range:0px var(--travel,1px)}
}
@keyframes dock{from{transform:scale(var(--s0,1));--lit:1}60%{--lit:0}to{transform:scale(1);--lit:0}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-block;background:var(--red);color:#fff;border:2px solid var(--red);padding:12px 20px;border-radius:999px;
  font:600 14px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-small{padding:8px 14px;font-size:12px}

/* storefront masthead illustration */
.hero{margin:10px auto 0;max-width:980px;padding-inline:var(--gutter)}
/* The illustrations melt their white background into the paper with multiply. Each one blends inside its own isolated
   group that carries its own paper, so the result doesn't depend on what else the browser has layered on the page
   (an animated logo passing over the hero used to make Chromium blend the image against nothing and wash it out). */
.hero-frame,.pho-box,.family{isolation:isolate}
.hero-frame,.family{background-color:var(--paper);background-image:var(--paper-tex)}
.hero img,.pho img,.family img{mix-blend-mode:multiply}
.hero img{width:100%;margin-inline:auto}

/* intro + info box */
.kicker{font:500 13px/1.3 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.kicker [lang="th"]{letter-spacing:0;font-size:16px;text-transform:none}
.intro{display:grid;gap:36px;margin-top:20px}
.intro h1{font-size:clamp(30px,4.6vw,50px);font-weight:700;line-height:1.1;margin-bottom:18px}
.intro h1 em,.section-head h2 em{font-style:italic;font-weight:600;color:var(--red)}
.lede{font:400 21px/1.5 var(--serif)}
.infobox{border:3px solid var(--ink);padding:5px;align-self:start;background:var(--paper)}
.infobox-inner{border:1px solid var(--ink);padding:22px 22px 24px}
.info-row{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(31,27,24,.35)}
.info-row:first-child{padding-top:0}
.info-row h2{font:700 26px/1.1 var(--thai);color:var(--red);display:flex;flex-direction:column}
.info-row h2 small{font:500 11px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.info-row p{margin:0}
.info-row .big{font:600 22px/1.2 var(--serif);text-decoration:none}
.open-now{grid-column:2;font:500 12px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;margin-top:8px!important}
.open-now::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}
.open-now.is-open{color:#2f7a3c}
.open-now.is-closed{color:var(--red)}
.info-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
@media (max-width:899px){.infobox{order:-1}}
@media (min-width:900px){
  .intro{grid-template-columns:1.5fr 1fr;gap:64px;margin-top:36px}
  .infobox{margin-top:8px}
}

/* section heads */
.section-head{text-align:center;max-width:640px;margin:0 auto 30px}
.section-head h2{font-size:clamp(38px,6vw,60px);font-weight:800}
.section-sub{color:var(--ink-2);margin-top:12px}

/* menu */
.menu-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin:0 calc(-1*var(--gutter)) 18px;padding-inline:var(--gutter);scrollbar-width:none;justify-content:flex-start}
.menu-nav::-webkit-scrollbar{display:none}
.menu-nav a{flex:none;font:500 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:9px 14px;background:var(--paper)}
.menu-nav a:hover{background:var(--ink);color:var(--paper)}
@media (min-width:760px){.menu-nav{justify-content:center;flex-wrap:wrap}}
.menu-body{display:grid;gap:44px}
.menu-cat{scroll-margin-top:20px}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;position:relative;margin-bottom:6px}
.cat-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(to bottom,
  var(--red) 0 16.66%, transparent 16.66% 33.33%, var(--stripe-mid) 33.33% 66.66%, transparent 66.66% 83.33%, var(--red) 83.33% 100%)}
.cat-head h3{font-size:30px;font-weight:800}
.cat-head .lao{font:700 22px/1 var(--thai);color:var(--red)}
.dish{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:14px 0;border-bottom:1px solid rgba(31,27,24,.18)}
.dish h4{margin:0;font:600 19px/1.3 var(--serif)}
.dish .price{font:600 17px/1.3 var(--serif);white-space:nowrap}
.price.placeholder{color:inherit}
.dish p{grid-column:1/-1;margin:4px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.dish .opts{grid-column:1/-1;margin-top:5px;font:italic 400 13.5px/1.45 var(--serif);color:#8a8178}
.mh-left a{text-decoration:none}
.tag{display:inline-block;font:500 10.5px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:3px;margin-left:8px;vertical-align:3px}
.tag-family-recipe,.tag-house-specialty{background:var(--red);color:#fff}
.tag-vegetarian{background:#E3ECD9;color:#2f5a2a}
.tag-spicy{background:#F6DEDB;color:var(--red)}
.dish.sold-out h4,.dish.sold-out .price{text-decoration:line-through;color:var(--ink-2)}
.menu-note{text-align:center;color:var(--ink-2);font-size:14px;margin-top:28px;font-style:italic}
.menu-cta{text-align:center;margin-top:26px}

/* pho feature box */
.pho{margin-top:72px}
.pho-box{border:3px solid var(--ink);outline:1px solid var(--ink);outline-offset:-9px;padding:26px 22px 30px;background:var(--paper-2);display:grid;gap:10px;position:relative}
.pho-box img{width:100%;max-width:560px;margin:-10px auto 0}
.pho-copy h2{font-size:clamp(38px,5.4vw,60px);font-weight:700;font-style:italic;color:var(--red);line-height:1.02;margin-bottom:16px}
.pho-copy p{font:400 19px/1.55 var(--serif)}
@media (min-width:860px){.pho-box{grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding:40px 48px}.pho-box img{margin:0}}

/* people */
.family{margin:0 auto 34px;max-width:1000px}
.family img{width:100%}
.bios{display:grid;gap:28px}
@media (min-width:700px){.bios{grid-template-columns:1fr 1fr;column-gap:48px}}
@media (min-width:1080px){.bios{grid-template-columns:repeat(4,1fr);column-gap:32px}}
.bio{border-top:3px double var(--rule);padding-top:16px}
.bio h3{font-size:26px;font-weight:800}
.role{font:500 12px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:6px 0 10px}
.tbd{color:var(--ink-2);font-weight:400;font-style:italic;border-bottom:1px dashed var(--ink-2)}
.tbd-text{color:var(--ink-2);font-style:italic;font-size:15.5px}

/* footer */
.footer{background:var(--navy);color:#EFE7D6;padding:48px 0 24px;margin-top:0}
main{padding-bottom:72px}
.footer-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
.footer-grid > div:first-child{grid-column:1/-1}
@media (min-width:860px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}.footer-grid > div:first-child{grid-column:auto}}
.foot-logo{width:220px;aspect-ratio:3776/1260;background:#EFE7D6;margin-bottom:6px}
.foot-name{font:800 28px/1.1 var(--serif);margin:8px 0 4px}
.footer .muted{color:#c3c8d8}
.footer h2{font:500 12px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.footer a:hover{color:#fff}
.fine{margin-top:36px;font-size:13px;color:#c3c8d8}

/* order dialog */
.order-dialog{border:3px solid var(--ink);outline:1px solid var(--ink);outline-offset:-9px;background:var(--paper);color:var(--ink);padding:30px 28px;max-width:min(440px,calc(100vw - 32px))}
.order-dialog::backdrop{background:rgba(31,27,24,.45)}
.order-dialog h2{font-size:28px;font-weight:800;margin-bottom:12px}
.order-dialog .btn{margin-right:8px}

/* ---- polish ---- */
.nw{white-space:nowrap}
.hero{position:relative}
.note{font:600 26px/1.05 var(--hand);color:var(--red);pointer-events:none}
.note-hero{display:none}
@media (min-width:980px){
  .note-hero{display:block;position:absolute;right:-118px;top:46%;width:170px;transform:rotate(4deg)}
  .note-hero svg{width:96px;height:56px;display:block;margin:6px 0 0 30px;transform:scaleX(-1) rotate(-10deg)}
}
@media (min-width:980px) and (max-width:1240px){.note-hero{right:-40px;top:auto;bottom:-34px;transform:rotate(-3deg)}.note-hero svg{display:none}}

.stamp{position:absolute;width:140px;height:140px;top:-40px;right:-12px;color:var(--red);background:var(--paper);border-radius:50%;
  font:600 10.2px var(--label);letter-spacing:.16em;fill:currentColor}
/* only the lettering turns; the elephant in the middle stays put */
.stamp-ring{transform-box:view-box;transform-origin:60px 60px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:600px){.stamp{width:88px;height:88px;top:-26px;right:-8px}}

/* menu: two balanced columns, dotted leaders */
.dish h4{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.dish{grid-template-columns:auto 1fr auto}
.dish::before{content:"";grid-column:2;grid-row:1;align-self:end;margin-bottom:6px;border-bottom:2px dotted rgba(31,27,24,.35);min-width:16px}
.dish h4{grid-column:1;grid-row:1}
.dish .price{grid-column:3;grid-row:1}
.tag{margin-left:0}
@media (hover:hover){.dish:hover h4{color:var(--red)}}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .hero img{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.stamp-ring{animation:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* mobile quick-order bar */
.sticky-order{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid rgba(31,27,24,.2);transform:translateY(110%);transition:transform .3s}
.sticky-order.show{transform:none}
.sticky-order .btn{flex:1;text-align:center}
.sticky-order .btn-ghost{flex:0 0 auto}
@media (min-width:860px){.sticky-order{display:none}}
@media (max-width:859px){body.has-sticky .footer{padding-bottom:90px}}
.pho-copy .kicker{font:500 13px/1.3 var(--label);letter-spacing:.18em}
@media (max-width:599px){.dish{grid-template-columns:1fr auto}.dish::before{display:none}.dish .price{grid-column:2}}

/* menu: item codes, price ladders, multi-price rows */
.dish .code{font:600 12px/1 var(--label);letter-spacing:.06em;color:var(--red);min-width:30px;display:inline-block}
.dish.no-price::before{display:none}
.dish .price .vn{font:500 11px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.dish .price .sep{color:var(--ink-2)}
.ladder{list-style:none;margin:10px 0 4px;padding:10px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 16px;background:var(--paper-2);border:1px solid rgba(31,27,24,.2)}
.ladder li{display:flex;justify-content:space-between;gap:8px;font-size:14.5px}
.ladder b{font:600 15px/1.3 var(--serif)}
.tag-favourite{background:var(--navy);color:#fff}
@media (max-width:599px){.dish.multi h4{grid-column:1/-1}.dish.multi .price{grid-column:1/-1;grid-row:2;margin-top:2px}}

/* sticky menu sections with scroll-spy */
.menu-nav{position:sticky;top:var(--head-h,60px);z-index:4;background:var(--paper);
  margin-top:0;padding-top:10px;padding-bottom:10px;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.menu-nav.stuck{border-bottom-color:rgba(31,27,24,.18);box-shadow:0 6px 14px -12px rgba(31,27,24,.5)}
.menu-nav a.active{background:var(--red);border-color:var(--red);color:#fff}
.menu-cat{scroll-margin-top:calc(var(--head-h,60px) + 72px)}
.pho{overflow-x:clip}   /* the stamp may overhang the box by up to the 16px gutter, never more */

/* ---- menu v2: one current section at a time ----
   phones: sticky chip bar on top · desktop: sticky index on the left, sections full width with dishes in two columns */
.menu-layout{display:block}
.menu-nav .l,.menu-nav .c{display:none}
.menu-cat{padding-bottom:6px;border-bottom:3px double var(--rule)}
@media (min-width:1000px){
  .menu-layout{display:grid;grid-template-columns:210px 1fr;gap:56px;align-items:start}
  .menu-nav{position:sticky;top:calc(var(--head-h,80px) + 24px);display:flex;flex-direction:column;gap:2px;margin:0;padding:0;overflow:visible;flex-wrap:nowrap;justify-content:flex-start;
    background:none;backdrop-filter:none;border:0;box-shadow:none}
  .menu-nav.stuck{box-shadow:none}
  .menu-nav a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;border:0;border-radius:0;padding:9px 0 9px 14px;
    border-left:3px solid transparent;background:none;font:600 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink-2)}
  .menu-nav a:hover{background:none;color:var(--ink)}
  .menu-nav a.active{background:none;color:var(--ink);border-left-color:var(--red)}
  .menu-nav .l{display:block;grid-column:1;font:500 13px/1.2 var(--thai);color:var(--red)}
  .menu-nav .c{display:block;grid-row:1;grid-column:2;font:500 11px/1 var(--label);letter-spacing:.1em;color:var(--ink-2)}
  .menu-cat{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;scroll-margin-top:calc(var(--head-h,80px) + 24px);margin-bottom:48px}
  .menu-cat > .cat-head,.menu-cat > .ladder{grid-column:1/-1}
  .menu-body{gap:0}
}
.dish-order{grid-column:1/-1;justify-self:end;margin-top:4px;font:500 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:none;opacity:.75}
.dish-order:hover{opacity:1;text-decoration:underline}
@media (hover:hover) and (min-width:860px){.dish .dish-order{opacity:0;transition:opacity .15s}.dish:hover .dish-order,.dish-order:focus{opacity:1}}


/* woven sinh border (img/sinh-border.png: one seamless repeat, transparent) — full-bleed ribbon between sections */
.weave{height:96px;margin:64px 0;background:url(img/sinh-border.png) repeat-x center/auto 100%}
.weave-foot{margin:0}
@media (min-width:860px){.weave{height:140px;margin:88px 0}.weave-foot{margin:0}}

.mh-right .btn-small{white-space:nowrap}
@media (max-width:859px){.hide-sm{display:none}}

/* ---- one order button at a time ----
   top of page: the top bar's single link · header stuck (bar scrolled away): the header button · phones: the bottom bar */
.orderbar .ob-sub{opacity:.75}
.orderbar .dot{margin:0 8px}
.mh-inner .mh-right{justify-self:end;align-items:center;position:relative}
.mh-right .head-order{position:absolute;right:calc(100% + 16px);top:50%;margin:0;white-space:nowrap;transform:translate(6px,-50%)}
.masthead.stuck .mh-right .head-order{transform:translate(0,-50%)}
.head-order{opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.masthead.stuck .head-order{opacity:1;pointer-events:auto}
@media (max-width:859px){.head-order{display:none}}
.info-note{font-size:13px;color:var(--ink-2);align-self:center}

/* living storefront overlay (js/life.js) */
.hero-frame{position:relative}
.hero-life{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1420/790;pointer-events:none}
.hero-life .room{opacity:.9}
:root[data-light="evening"] .hero-life .room{opacity:.95;filter:sepia(.28) saturate(1.15)}
:root[data-light="day"] .hero-life .neon{opacity:.85}
.bio .aka{font:italic 400 .62em/1 var(--serif);color:var(--red);margin-left:6px}

/* vines beside the People section (js/bloom.js) */
.people{position:relative}
.bloom{position:absolute;top:120px;bottom:40px;height:calc(100% - 160px);width:clamp(90px,calc((100vw - 1060px)/2),240px);pointer-events:none;overflow:visible}
.bloom-left{left:calc(-1 * clamp(90px,calc((100vw - 1060px)/2),240px) + 10px)}
.bloom-right{right:calc(-1 * clamp(90px,calc((100vw - 1060px)/2),240px) + 10px)}
.bloom .bl-in{transform-box:fill-box;transform-origin:0 50%;scale:0;opacity:0;transition:scale .7s cubic-bezier(.2,.9,.3,1.2),opacity .5s}
.bloom .bl-in.open{scale:1;opacity:1}
@media (max-width:1240px){.bloom{display:none}}


/* "that's us! come say hi!" under the sidewalk. Real text (not SVG text in a fixed box), so the browser measures the
   actual words in whatever font is showing and wraps inside the picture's width; it can never run off the edge. */
.hero-note{display:flex;justify-content:flex-end;align-items:flex-start;gap:.25em;max-width:94%;margin:.35em 3% 0 auto;
  font:700 clamp(19px,1.4vw + 13px,28px)/1.15 var(--hand);color:var(--red);text-align:right;pointer-events:none}
.hero-note .hn-text{min-width:0}
.hero-note .arr{flex:none;width:.8em;height:1.25em;margin-top:-.2em;overflow:visible}
.hero-note .arr path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* the whole note simply appears, with a small lift, once the storefront is in view and the handwriting font is ready */
.hero-note{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.hero-note.go{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-note{transition:none}}
/* the vines overhang the People section: clip them there (clipping on html/body breaks the sticky header) */
main{overflow-x:clip}

/* evening: the sign is lit. A warm halo and a brighter red on the logo while it sits on the storefront;
   it fades out as the logo travels up and docks (--lit, animated by the same scroll timeline). (filter goes on .brand: the logo itself is a mask, which would clip it) */
:root[data-light="evening"][data-open="1"] .brand{filter:drop-shadow(0 0 4px rgba(255,214,150,calc(.95*var(--lit)))) drop-shadow(0 0 14px rgba(255,170,90,calc(.75*var(--lit)))) drop-shadow(0 0 32px rgba(255,150,80,calc(.45*var(--lit))))}
:root[data-light="evening"][data-open="1"] .brand .brand-logo{background:color-mix(in srgb,#C81E3C calc(var(--lit)*100%),var(--red))}

/* open / closed (data-open from js/light.js): people and steam only while open; OPEN neon vs an unlit CLOSED sign */
:root[data-open="0"] .hero-life .crowd,:root[data-open="1"] .hero-life .neon-closed,:root[data-open="0"] .hero-life .neon-open{display:none}