/* ===== fonts ===== */
/* Only the two faces used in the opening viewport are preloaded. */
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebasneue-400-normal-latin.woff2?v=5853435d') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/sourceserif4-400-normal-latin.woff2?v=95bbd98f') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/sourceserif4-600-normal-latin.woff2?v=beb0c8d8') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/sourceserif4-400-italic-latin.woff2?v=fa10869c') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* Glutbank — metric-matched local fallbacks, font-display: swap.
   Metrics source: @capsizecss/metrics v4.3.0 (npm), read directly from each
   font's own OS/2 + hhea tables at package-build time — not eyeballed.
   Formula (Fontaine/next-font convention):
     sizeAdjust    = (web.xWidthAvg/web.unitsPerEm) / (fallback.xWidthAvg/fallback.unitsPerEm)
     ascentOverride  = web.ascent  / (web.unitsPerEm * sizeAdjust)
     descentOverride = |web.descent| / (web.unitsPerEm * sizeAdjust)
     lineGapOverride = web.lineGap / (web.unitsPerEm * sizeAdjust)
   Bebas Neue has no metric-compatible display face in @capsizecss/metrics
   (no Impact/Arial Narrow entry) — Arial is the closest cross-platform system
   font it ships, so it is the computed fallback base here.
   Source Serif 4 is matched against Georgia (its usual metric fallback). */

@font-face {
  font-family: 'Bebas Neue Fallback';
  src: local('Arial');
  size-adjust: 76.72%;
  ascent-override: 117.32%;
  descent-override: 39.11%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-weight: 400;
  size-adjust: 107.45%;
  ascent-override: 96.42%;
  descent-override: 31.18%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-weight: 600;
  size-adjust: 109.02%;
  ascent-override: 95.03%;
  descent-override: 30.73%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-style: italic;
  font-weight: 400;
  size-adjust: 98.92%;
  ascent-override: 104.73%;
  descent-override: 33.86%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Usage: font-family: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif;
          font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif; */


/* ===== layout ===== */
:root{--night:#0d0b0a;--bone:#efe6d8;--ember:#ff6b1a;--coal:#7a1f05;--line:rgb(255 107 26 / .3);--display:'Bebas Neue','Bebas Neue Fallback',sans-serif;--body:'Source Serif 4','Source Serif 4 Fallback',Georgia,serif}
*{box-sizing:border-box}
html{scroll-padding-top:24px;color-scheme:dark}
body{margin:0;background:var(--night);color:var(--bone);font:400 16px/1.55 var(--body)}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover,button:hover{text-shadow:0 0 16px rgb(255 107 26 / .6)}
:focus-visible{outline:2px solid var(--bone);outline-offset:5px;box-shadow:0 0 18px rgb(255 107 26 / .35)}
button{border:1px solid var(--line);background:none}
button:hover{box-shadow:inset 0 0 15px rgb(255 107 26 / .08),0 0 15px rgb(255 107 26 / .12)}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.015em}
h2{font-size:clamp(40px,5.2vw,76px)}
h3{font-size:32px}
p+p{margin-top:16px}
img{display:block;width:100%;height:auto}
fieldset{min-width:0;margin:0;padding:0;border:0}
[hidden]{display:none!important}
.sr-only,.hp{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:var(--night);padding:12px;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.layout{display:grid;grid-template-columns:38% 62%;align-items:start}
[data-sid="order-rail"]{min-width:0;border-left:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.micro{font-size:12px;line-height:1.5}
.section-line{display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-line>span{font-size:10px;letter-spacing:.12em}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:52px;padding:12px 20px;border:1px solid var(--line);text-decoration:none;font-size:15px}
.button:hover{box-shadow:0 0 24px rgb(255 107 26 / .16),inset 0 0 14px rgb(255 107 26 / .07)}
.button>span{font-size:24px}

/* ===== demo-note ===== */
/* Closing the notice hides its ink, not its reserved space. */
[data-sid="demo-note"]{height:42px;display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 24px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.3}
.demo-stamp{font:18px var(--display);letter-spacing:.06em}
[data-sid="demo-note"] button{border:0;font:24px/1 var(--body);width:32px;min-height:32px}
[data-sid="demo-note"].dismissed>*{visibility:hidden}

/* ===== site-header ===== */
[data-sid="site-header"]{height:88px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.small-brand{font:32px/.9 var(--display);text-decoration:none}
.small-brand span{display:block;font:8px/1.5 var(--body);letter-spacing:.1em;margin-top:6px}
nav{display:flex;gap:30px;font-size:14px}
nav a{text-decoration:none;white-space:nowrap}
nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--ember)}
.language{display:flex;align-items:center;gap:8px;font-size:12px}
.language button{border:0;padding:8px 2px;min-height:40px;min-width:30px}
.language button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px}

/* ===== pass ===== */
[data-sid="pass"]{position:sticky;top:0;min-width:0;padding:28px 3vw 24px;max-height:100dvh;overflow:auto;scrollbar-width:thin;isolation:isolate}
/* The texture reads as reflected ember light, never as a photo backdrop. */
[data-sid="pass"]:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(var(--night),transparent 50%,var(--night)),url('../images/embers-900.webp?v=b54e1e75') center/cover;opacity:.035;pointer-events:none}
.wordmark{font:clamp(80px,8.8vw,158px)/1 var(--display);letter-spacing:-.035em;text-decoration:none;display:block;position:relative;margin-left:-.025em}
.wordmark>span{font:16px var(--body);vertical-align:top;display:inline-block;margin-top:14px;margin-left:3px}
.pass-brand>.eyebrow{font-size:10px;letter-spacing:.2em}
.open-now{font-size:12px;min-height:23px;margin-top:8px}
.open-now:before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;vertical-align:middle;background:var(--ember);box-shadow:0 0 9px var(--ember)}
.mobile-hours{display:none}
.pass-statement{font:clamp(60px,8vw,120px)/.95 var(--display);margin-top:80px}

/* ===== grill ===== */
[data-sid="grill"]{margin-top:34px;border-top:1px solid var(--line);padding-top:17px}
[data-sid="grill"] h2{font-size:34px}
.grill-help{font-size:13px;margin-top:6px}
.grate{height:124px;position:relative;margin-top:12px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 120%,rgb(255 107 26 / .22),transparent 70%),repeating-linear-gradient(90deg,transparent 0 12px,rgb(239 230 216 / .13) 12px 14px,transparent 14px 24px);box-shadow:inset 0 -12px 24px rgb(122 31 5 / .13)}
.grate canvas{display:block;width:100%;height:100%}
.grate-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:16px;font-size:12px;background:rgb(13 11 10 / .55);pointer-events:none}
.grate.drag-over{box-shadow:0 0 25px rgb(255 107 26 / .35);border-color:var(--ember)}
.grill-instruction{margin-top:10px;max-width:38ch}
[data-sid="grill-controls"]{max-height:210px;overflow:auto;scrollbar-width:thin}
.grill-line{border-bottom:1px solid var(--line);padding:12px 0}
.grill-line-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.grill-line-head button{border:0;min-width:36px;min-height:36px;font-size:22px}
.doneness{display:flex;gap:6px;margin-top:8px}
.doneness button,.extra-chip{font-size:11px;padding:5px 9px;min-height:32px}
.doneness [aria-pressed="true"],.extra-chip[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 12px rgb(255 107 26 / .15);text-decoration:underline;text-underline-offset:4px}
.extra-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.extra-chip:disabled{opacity:.4;cursor:not-allowed}
.drag-token{position:fixed;z-index:90;pointer-events:none;width:48px;height:32px;border-radius:50%;background:radial-gradient(ellipse,#7a1f05,#0d0b0a);border:1px solid var(--ember);box-shadow:0 0 18px rgb(255 107 26 / .3);transform:translate(-50%,-50%)}

/* ===== docket ===== */
[data-sid="docket"]{margin-top:24px;border-top:1px solid var(--line)}
.docket-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 0;text-align:left;border:0;font-size:13px}
.docket-toggle>span:first-child{font:28px var(--display);margin-right:auto}
.toggle-sign{display:none}
#docket-content{padding-bottom:4px}
[data-cart-lines]{font-size:12px;max-height:160px;overflow:auto;scrollbar-width:thin}
.cart-empty{padding:4px 0 14px}
.cart-row{padding:9px 0;border-top:1px solid var(--line)}
.cart-row-top{display:flex;gap:10px;justify-content:space-between;align-items:baseline}
.cart-row-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-options{font-size:11px;margin:4px 0}
.qty-controls{display:flex;align-items:center;gap:10px;margin-top:6px}
.qty-controls button{min-width:32px;min-height:32px;padding:0 8px}
.qty-controls button:last-child{margin-left:auto;border:0;font-size:11px}
.docket-order{width:100%;margin-top:10px;min-height:44px}
/* Closes the auto-opened sheet after Grillen/extras on phones; hidden on desktop where the
   docket sits open beside the room and there is nothing to close. */
.docket-done{display:none}

/* ===== dish-preview ===== */
/* The live configurator (js/app.js + js/dish-stage.js). Desktop: it sits in the sticky pass
   column in place of the grill photo, a 4:3 window with the caption laid over its foot, the
   docket and garpunkt/extras chips right under it. Below 1024 px: see the fixed top panel in
   the layout-mobile block. Hidden (display:none via [hidden]) until a burger line is active. */
.dish-preview{position:relative;margin-top:14px;aspect-ratio:4/3;border:1px solid var(--line);background:var(--night)}
/* Desktop only: on phones the grill photo stays, or hiding it would shift the menu row just tapped. */
@media(min-width:1024px){.dish-on [data-sid="grill-photo"]{display:none}}
.dish-stage{position:absolute;inset:0;overflow:hidden}
.dish-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.dish-canvas:active{cursor:grabbing}
.dish-canvas:focus-visible{outline-offset:-3px}
/* Three rising bone threads while three.js and the part models load (reduced motion: still). */
.dish-steam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:none}
.dish-steam i{width:1px;height:34%;background:linear-gradient(transparent,rgb(239 230 216 / .4),transparent);animation:dish-steam 1.4s ease-in-out infinite alternate}
.dish-steam i:nth-child(2){animation-delay:.35s}
.dish-steam i:nth-child(3){animation-delay:.7s}
@keyframes dish-steam{from{transform:translateY(10%);opacity:.25}to{transform:translateY(-10%);opacity:1}}
.dish-stage.is-ready .dish-steam{display:none}
.dish-caption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:end;justify-content:space-between;gap:12px;padding:28px 14px 12px;background:linear-gradient(transparent,rgb(13 11 10 / .88));pointer-events:none}
.dish-caption p{min-width:0}
.dish-name{display:block;font:30px/.95 var(--display);letter-spacing:.01em}
.dish-price{display:block;font-size:12px;margin-top:4px;font-variant-numeric:tabular-nums}
.dish-done{pointer-events:auto;flex:none;min-height:40px;padding:0 14px;font-size:13px;border-color:var(--ember);background:var(--night)}

/* ===== hero ===== */
[data-sid="hero"]{position:relative;min-height:730px;overflow:hidden}
.hero-photo{position:relative;width:100%;height:clamp(430px,39vw,650px);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,var(--night));pointer-events:none}
.photo-note{position:absolute;top:18px;right:24px;font-size:10px;writing-mode:vertical-rl;z-index:1;text-shadow:0 1px 4px var(--night)}
.hero-type{position:relative;margin-top:-7%;padding:0 4vw 40px}
.hero-type>p{font-size:10px;letter-spacing:.17em;margin-bottom:16px}
.hero-type h1{font-size:18vw;line-height:.77;letter-spacing:-.025em;position:relative}
.hero-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:32px;gap:24px}
.hero-bottom p{font-size:18px;line-height:1.4;font-style:italic}
.round-link{font:42px/1 var(--body);text-decoration:none;border-bottom:1px solid var(--ember);padding:0 12px 8px}
/* A small composited drift adds heat without SVG filters or layout work. */
@media(prefers-reduced-motion:no-preference){.hero-photo img{animation:heat-shimmer 7s ease-in-out infinite alternate}@keyframes heat-shimmer{from{transform:scale(1.006) skewX(-.12deg)}to{transform:scale(1.016) skewX(.12deg)}}}

/* ===== menu ===== */
[data-sid="menu"]{padding:50px 4vw 64px;border-top:1px solid var(--line)}
[data-sid="menu"]>h2{margin:22px 0 15px;max-width:9ch}
[data-sid="menu"]>p{max-width:39ch;font-size:15px}
[data-sid="filters"]{margin:30px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details{padding:15px 0}
summary{cursor:pointer;font-size:14px}
summary>span{float:right}
details>p{font-size:13px;margin:15px 0}
.allergen-options{display:flex;flex-wrap:wrap;gap:6px}
.allergen-options button{font-size:11px;padding:7px 9px;min-height:36px;text-align:left}
.allergen-options [aria-pressed="true"]{border-color:var(--ember);text-decoration:line-through;box-shadow:0 0 12px rgb(255 107 26 / .14)}
.veg-filter{display:flex;align-items:center;gap:8px;font-size:13px;padding:12px 0;border-top:1px solid var(--line)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--bone);width:17px;height:17px;flex:none}
.filter-status{min-height:28px}
[data-sid="menu-rail"]{min-height:650px}
.menu-category{margin-top:42px}
.category-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:0}
.category-head h3{font-size:clamp(45px,6vw,86px)}
.category-head span{font-size:11px;white-space:nowrap}
.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.menu-item h4{font-size:20px;font-weight:400;margin:0}
.item-description{font-size:13px;line-height:1.55;margin-top:6px;max-width:39ch}
.item-allergens{font-size:10px;letter-spacing:.07em;margin-top:9px;min-height:16px}
.item-side{display:flex;flex-direction:column;align-items:end;justify-content:space-between;gap:16px}
.price{font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.add-item{display:flex;gap:8px;align-items:center;justify-content:center;min-height:42px;min-width:65px;font-size:12px;padding:5px 9px}
.patty-token{width:27px;height:19px;border:1px solid var(--ember);border-radius:50%;background:repeating-linear-gradient(20deg,transparent 0 5px,rgb(13 11 10 / .7) 5px 7px),radial-gradient(ellipse,#7a1f05,#0d0b0a);touch-action:none}
.menu-image{margin-top:36px;max-height:310px;overflow:hidden}
.menu-image img{aspect-ratio:2/1;object-fit:cover}
.menu-empty{padding:24px 0;font-style:italic}

/* ===== reservation-entry ===== */
[data-sid="reservation-entry"]{padding:64px 4vw;border-top:1px solid var(--line);background:radial-gradient(ellipse at 100% 100%,rgb(122 31 5 / .17),transparent 60%)}
[data-sid="reservation-entry"] h2{margin:22px 0}
[data-sid="reservation-entry"] p{max-width:35ch}
[data-sid="reservation-entry"] .button{margin-top:28px}

/* ===== arrival ===== */
[data-sid="arrival"]{padding:60px 4vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:36px}
[data-sid="arrival"] h2{margin:20px 0}
[data-sid="arrival"] h3{margin-bottom:18px}
[data-sid="arrival"] p{font-size:14px;max-width:42ch;margin-bottom:20px}
[data-hours]{font-size:13px;margin:0}
[data-hours]>div{display:grid;grid-template-columns:100px 1fr;gap:12px;border-top:1px solid var(--line);padding:7px 0}
dd{margin:0}

/* ===== page-intro ===== */
[data-sid="page-intro"]{padding:45px 4vw 36px;border-bottom:1px solid var(--line)}
[data-sid="page-intro"] h1{font-size:clamp(64px,7.6vw,112px);margin-top:20px;line-height:.9}
[data-sid="page-intro"] .open-now{margin-top:26px}
.inner-page [data-sid="menu"]{border-top:0;padding-top:36px}

/* ===== order-form ===== */
[data-sid="order-form"],[data-sid="reserve-form"]{padding:0 4vw 52px}
form>section{padding:30px 0;border-bottom:1px solid var(--line)}
form h2{font-size:38px;margin-bottom:22px}
[data-review-lines]{margin-bottom:20px;min-height:110px}
[data-review-lines] .cart-row{padding:16px 0;font-size:16px}
[data-review-lines] .cart-options{font-size:13px}
.review-config{margin-top:12px}
.review-config .extra-chip{min-height:36px}
[data-sid="order-review"]>a{font-size:13px}
.mode-switch{display:flex;gap:18px}
.mode-switch>label{display:flex;align-items:center;gap:8px}
.delivery-info{font-size:13px;margin:20px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px}
.field.wide{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;border:1px solid var(--line);background:var(--night);padding:12px;min-height:49px;box-shadow:none}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember)}
[data-slot-help]{min-height:36px;margin-top:12px}
.checkout-total{display:flex;justify-content:space-between;font-size:20px;padding:24px 0;font-variant-numeric:tabular-nums}
.form-disclaimer{font-size:12px;line-height:1.6;margin-top:26px;max-width:58ch}
[data-sid="form-feedback"]:not(:empty){padding:16px;border-left:2px solid var(--ember);margin:20px 0;font-size:14px}
.submit{width:100%;margin-top:20px}
[data-sid="order-success"],[data-sid="reserve-success"]{padding:45px 4vw 70px;min-height:480px}
.confirmation-ref{font:clamp(27px,3.5vw,48px) var(--display);padding:22px 0;color:var(--bone);overflow-wrap:anywhere}
.confirmation-details{margin:20px 0}

/* ===== legal ===== */
[data-sid="legal"]{padding:40px 4vw 70px}
[data-sid="legal"] h2{font-size:44px;margin-bottom:24px}
[data-sid="legal"] h3{margin:35px 0 18px}
[data-sid="legal"] p{font-size:14px;max-width:60ch;overflow-wrap:anywhere}
[data-sid="legal"] strong{font-weight:400;text-decoration:underline;text-underline-offset:3px}

/* ===== studio ===== */
[data-sid="studio"]{padding:60px 4vw;border-top:1px solid var(--line)}
[data-sid="studio"] h2{margin:24px 0;font-size:clamp(40px,5vw,72px)}
[data-sid="studio"]>p{max-width:40ch;font-size:14px}
.studio-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.studio-links>a{font-size:13px}

/* ===== site-footer ===== */
[data-sid="site-footer"]{padding:30px 4vw;border-top:1px solid var(--line)}
[data-sid="site-footer"]>p{font:44px var(--display)}
[data-sid="site-footer"]>p>span{display:block;font:9px var(--body);letter-spacing:.1em}
[data-sid="site-footer"]>div{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px 24px;font-size:11px}
/* U3 (UX audit 2026-09-24): the credit line clipped at 375 — a flex item's default
   min-width:auto stopped it shrinking to wrap inside the row. min-width:0 lets it wrap. */
[data-sid="site-footer"]>div>span{min-width:0}
/* The inherited seal is verbatim; these overrides keep motion within this demo's budget. */
.wdm-seal svg{transition:opacity .15s!important}
.wdm-seal:hover svg,.wdm-seal:focus-visible svg{color:var(--bone)!important}
/* Shared studio furniture follows the same short-motion budget as the demo. */
.wf-root *{animation-duration:.15s!important;animation-iteration-count:1!important;transition-duration:.15s!important}

/* ===== layout-mobile ===== */
@media(max-width:1023px){
  [data-sid="site-header"]{height:78px;padding:0 24px;gap:16px}
  nav{gap:20px;font-size:13px}
  .layout{display:flex;flex-direction:column}
  [data-sid="order-rail"]{display:contents;border:0}
  [data-sid="pass"]{display:contents}
  [data-sid="pass"]:before{display:none}
  .pass-brand,.pass-statement{display:none}
  [data-sid="hero"],[data-sid="page-intro"]{order:0;width:100%}
  [data-sid="grill"]{order:1;width:100%;padding:20px 6vw;margin:0;border-bottom:1px solid var(--line);border-top:0}
  [data-sid="menu"],[data-sid="order-form"],[data-sid="reserve-form"],[data-sid="legal"],[data-sid="order-success"],[data-sid="reserve-success"]{order:2;width:100%}
  [data-sid="reservation-entry"]{order:3;width:100%}
  [data-sid="arrival"]{order:4;width:100%}
  [data-sid="studio"]{order:5;width:100%}
  [data-sid="site-footer"]{order:6;width:100%}
  .wdm-seal{order:7;margin-bottom:72px}
  [data-sid="hero"]{min-height:0;display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .hero-photo{grid-column:1/-1;grid-row:1;height:560px;overflow:hidden}
  .hero-type{grid-column:1/-1;grid-row:1;margin-top:0;padding:0 6vw 38px}
  .hero-type h1{font-size:24vw;line-height:.78}
  .hero-type>p{margin-bottom:20px}
  .hero-bottom{margin-top:26px}
  .mobile-hours{display:block;font-size:11px!important;margin-top:18px!important;margin-bottom:0!important;letter-spacing:0!important}
  .grate{height:85px;margin-top:10px}
  .grill-instruction{max-width:none;font-size:11px}
  [data-sid="grill-controls"]{max-height:230px}
  [data-sid="docket"]{position:fixed;z-index:30;bottom:0;left:0;right:0;background:var(--night);margin:0;padding:0 6vw;border-top:1px solid var(--ember);box-shadow:0 -8px 40px rgb(13 11 10 / .6)}
  .docket-toggle{height:56px}
  .toggle-sign{display:inline}
  #docket-content{display:none;padding-bottom:16px}
  [data-sid="docket"].is-open #docket-content{display:block}
  /* Auto-opened after Grillen (see js/app.js G.add): a plain full-width close, same DNA as
     the docket-order button below it. */
  .docket-done{display:block;width:100%;min-height:44px;margin-top:14px;border-color:var(--ember)}
  [data-cart-lines]{max-height:42dvh}
  /* Dish preview on phones/tablets: pinned to the top of the viewport (fixed, so it never
     shifts the page), dish above, name + price line below. The open docket sheet is capped
     so it ends under the panel instead of covering it; order rows scroll clear of it. */
  .dish-preview{position:fixed;z-index:45;top:0;left:0;right:0;height:42svh;margin:0;aspect-ratio:auto;display:flex;flex-direction:column;border:0;border-bottom:1px solid var(--ember);box-shadow:0 8px 40px rgb(13 11 10 / .6)}
  .dish-stage{position:relative;inset:auto;flex:1;min-height:0}
  .dish-caption{position:static;align-items:center;padding:8px 6vw 10px;background:var(--night);border-top:1px solid var(--line)}
  .dish-name{font-size:26px}
  html.dish-on{scroll-padding-top:calc(42svh + 16px)}
  .dish-on [data-cart-lines]{max-height:calc(58svh - 230px)}
  .dish-on .home #docket-content{max-height:calc(58svh - 72px)}
  /* The studio's Fertig price tag (/js/fertig.js, .wf-root, do not edit that script/css)
     hangs over the top of the screen and covers the open dish preview - fade it out only
     while the panel is open, restored the instant body.dish-preview-open is removed. */
  body.dish-preview-open .wf-root{opacity:0;pointer-events:none;transition:opacity .25s}
  [data-sid="menu"],[data-sid="reservation-entry"],[data-sid="arrival"],[data-sid="studio"],[data-sid="legal"]{padding-left:6vw;padding-right:6vw}
  [data-sid="menu"]>h2{font-size:64px}
  .category-head h3{font-size:64px}
  [data-sid="page-intro"]{padding:35px 6vw}
  [data-sid="order-form"],[data-sid="reserve-form"]{padding:0 6vw 45px}
  [data-sid="arrival"]{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:560px){
  body{font-size:15px}
  [data-sid="demo-note"]{height:56px;padding:6px 16px;gap:10px;font-size:10px}
  [data-sid="demo-note"] button{flex:none}
  [data-sid="site-header"]{height:104px;padding:12px 6vw;flex-wrap:wrap;gap:8px 16px}
  .small-brand{font-size:30px}
  .small-brand span{display:none}
  nav{width:100%;order:3;justify-content:space-between;font-size:12px;gap:10px}
  /* Fixed thirds and a full-height note line: the EN dictionary lands after first paint,
     and shorter English words must not slide the boxes around them (CLS 0 in both languages). */
  nav a{flex:1 1 0;text-align:center}
  nav a:first-child{text-align:left}
  nav a:last-child{text-align:right}
  [data-sid="demo-note"] p{flex:1;align-self:stretch;display:flex;align-items:center;margin:0}
  .language{margin-left:auto}
  .hero-photo{height:440px}
  .hero-photo img{object-position:center 35%}
  .hero-type{padding-bottom:22px;padding-top:0}
  .hero-type h1{font-size:29vw}
  .hero-type>p{font-size:8px;margin-bottom:12px}
  .hero-bottom{margin-top:18px}
  .hero-bottom p{font-size:14px}
  .photo-note{right:12px;top:14px;font-size:8px}
  [data-sid="grill"] h2{font-size:28px}
  .grill-help{font-size:12px}
  [data-sid="menu"]{padding-top:35px}
  [data-sid="menu"]>h2{font-size:56px}
  .category-head h3{font-size:55px}
  .menu-item{column-gap:15px;padding:20px 0}
  .menu-item h4{font-size:18px}
  .item-description{font-size:12px}
  .price{font-size:16px}
  .add-item{min-width:56px;padding:5px}
  [data-sid="arrival"]{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  [data-sid="page-intro"] h1{font-size:64px}
  .section-line>span{font-size:9px}
  [data-sid="studio"] h2{font-size:54px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== restaurant-stage ===== */
/* The stage keeps its dimensions when the poster yields to the renderer. */
.home .layout{display:block}
.home-below{display:grid;grid-template-columns:38% 62%;align-items:start}
.home-below .pass-statement{margin:14px 0 28px;font-size:7.8vw}
/* U4 (UX audit 2026-09-24): room-controls moved BEFORE restaurant-stage in the HTML
   so Tab reaches the view switch/strip before the docket (see index.html comment);
   flex + order puts the stage back on top visually. CSS order never changes tab
   order (that always follows DOM), so this is a visual-only correction. */
/* align-items:stretch is explicit: the unrelated inner-page rule at max-width:1023px
   (grid-template-columns/align-items:end for .hero-photo) shares this same [data-sid]
   selector and, left unset here, its align-items:end survived the cascade and
   collapsed the stage (all-absolutely-positioned children, no intrinsic width) to 0. */
.home [data-sid="hero"]{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:0}
.home [data-sid="room-controls"]{order:2}
[data-sid="restaurant-stage"]{order:1;position:relative;height:clamp(560px,73vh,840px);overflow:hidden;background:var(--night)}
[data-sid="restaurant-stage"]:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(13 11 10 / .48),transparent 60%),linear-gradient(0deg,rgb(13 11 10 / .9),transparent 48%)}
.room-poster,[data-sid="restaurant-canvas"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-sid="restaurant-canvas"]{opacity:0;transition:opacity .45s ease}
.scene-ready [data-sid="restaurant-canvas"]{opacity:1}
.room-heading{position:absolute;z-index:1;left:4vw;bottom:90px;pointer-events:none}
.room-heading h1{font-size:19vw;line-height:.83;margin:20px 0 8px}
.room-heading>p:last-child{font-size:clamp(14px,1.3vw,20px)}
.room-caption{position:absolute;z-index:1;left:4vw;top:28px;display:flex;gap:28px;align-items:center}
.room-caption .open-now{margin:0}
.room-position{font:24px var(--display);letter-spacing:.04em}
.room-status{position:absolute;z-index:1;left:4vw;bottom:28px;max-width:48ch}
/* Once inside, the title gives the window view room without shifting the page. */
.scene-ready .room-heading,.room-away .room-heading{visibility:hidden}
.room-away [data-sid="restaurant-stage"]:after{background:linear-gradient(0deg,rgb(13 11 10 / .62),transparent 24%)}
.home [data-sid="docket"]{position:absolute;z-index:3;right:3vw;bottom:28px;width:310px;margin:0;background:rgb(13 11 10 / .95);border:1px solid var(--line)}
.home #docket-content{max-height:225px;overflow:auto;padding:0 16px 16px}
.home .docket-toggle{padding:15px 16px}
.home .cart-empty{padding:0 0 16px}
.docket-inline-order{display:none}
/* The view stays clear at the table; focus and hover reveal the same full docket. */
@media(min-width:1024px){
  .room-seated [data-sid="docket"]{width:340px;display:grid;grid-template-columns:1fr 98px;align-items:center}
  .room-seated .docket-toggle{height:48px;min-width:0;gap:10px;font-size:15px}
  .room-seated .docket-toggle>span:first-child{font-size:17px}
  .room-seated .docket-inline-order{display:block;font-size:13px;padding:12px 10px}
  .room-seated #docket-content{grid-column:1/-1;display:none}
  .room-seated .docket-expanded #docket-content{display:block}
}
.home [data-sid="grill-controls"]{margin-bottom:20px}
[data-sid="appetite-photo"]{margin-top:32px}
[data-sid="grill-photo"]{margin:20px 0;max-height:240px;overflow:hidden}
[data-sid="grill-photo"] img{object-fit:cover;aspect-ratio:1.5}

/* ===== room-controls ===== */
/* Native controls stay outside the canvas so the entire journey has a keyboard route. */
.room-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4vw;border-block:1px solid var(--line)}
.room-views{display:flex;gap:12px}
.room-controls button{min-height:46px;padding:8px 16px;font-size:14px}
.room-controls button[aria-pressed="true"]{box-shadow:inset 0 -2px var(--ember),0 0 18px rgb(255 107 26 / .12)}
.room-views button{width:154px;flex:none}
.quick-grill{display:flex;align-items:center;gap:12px}
.quick-grill label{font-size:12px}
.quick-grill select{width:160px;min-height:46px;background:var(--night);border:1px solid var(--line);padding:8px}
/* Fixed width: 'Auf die Glut +' and 'Onto the grill +' must occupy the same box. */
.quick-grill [data-quick-add]{flex:none;width:158px;padding-inline:8px}
/* Phone-only furniture (see phone-stage); tablet and desktop keep the inline controls. */
.sheet-toggle,.seat-action,.stage-subline{display:none}
.table-label{position:absolute;z-index:4;left:0;top:0;padding:8px 13px;background:var(--night);border:1px solid var(--line);pointer-events:none;font-size:13px;white-space:nowrap}
/* ===== look-around ===== */
/* Seated only (JS toggles [hidden]): a small chip that eases the turned head back to the
   window, and a one-time drag hint that fades after the first interaction. */
.look-reset{position:absolute;z-index:4;right:4vw;top:28px;min-height:44px;padding:8px 16px;background:var(--night);border:1px solid var(--line);font-size:13px}
.look-reset:hover{border-color:var(--ember)}
.look-hint{position:absolute;z-index:4;left:50%;top:50%;translate:-50% -50%;padding:8px 16px;background:rgb(13 11 10 / .82);border:1px solid var(--line);font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s ease}
.look-hint.is-shown{opacity:1}
/* Seated drag/one-finger look-around must not fight the browser's own scroll gesture. */
.room-seated [data-sid="restaurant-canvas"]{touch-action:none}
[data-sid="table-selection"]{padding:32px 4vw;border-bottom:1px solid var(--line)}
[data-sid="table-selection"] h2{font-size:60px;margin:12px 0 24px}
[data-sid="table-list"]{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
[data-sid="table-list"] button{padding:12px 8px;text-align:left;font-size:15px}
[data-sid="table-list"] button span{display:block;font-size:11px;line-height:1.6}
[data-sid="table-list"] button[aria-pressed="true"]{box-shadow:0 0 20px rgb(255 107 26 / .18);border-color:var(--ember)}
[data-sid="table-choice"]{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px}
.table-field{margin-bottom:22px}
.delivery-info{min-height:61px}
/* The initial cart and delivery hint reserve their final empty-state footprint. */
[data-review-lines]{min-height:130px}
[data-sid="menu-rail"]{min-height:400px}
.menu-category .menu-image{margin:0 0 24px;max-height:none;aspect-ratio:1.9}
.menu-category .menu-image img{height:100%;aspect-ratio:auto;object-fit:cover}

/* ===== language-layout ===== */
/* Reserve both language versions at first paint; the dictionary may arrive later. */
[data-sid="menu"]>h2{min-height:2.85em}
.room-position{display:block;width:220px;flex:none}
.mode-switch>label{width:130px;flex:none}
@media(min-width:600px){
  [data-sid="site-nav"]{display:grid;grid-template-columns:110px 80px 135px;gap:20px;width:365px;flex:none}
  [data-sid="demo-note"] p{width:360px;flex:none}
  .quick-grill label{width:76px;flex:none}
}

/* ===== restaurant-mobile ===== */
@media(max-width:1023px){
  .home-below{display:block}
  .home-below [data-sid="pass"]{display:none}
  [data-sid="restaurant-stage"]{height:610px}
  .room-heading h1{font-size:29vw}
  .room-caption{align-items:flex-start;gap:8px;flex-direction:column}
  .home [data-sid="docket"]{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:40;border-inline:0}
  .home #docket-content{max-height:55vh}
  .home .docket-toggle{height:56px}
  .room-controls{flex-wrap:wrap}
  .quick-grill{flex:1}
  .quick-grill select{flex:1}
  [data-sid="table-list"]{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:599px){
  [data-sid="restaurant-stage"]{height:520px}
  .room-heading{bottom:80px;left:6vw}
  .room-heading h1{font-size:36vw}
  .room-caption,.room-status{left:6vw}
  .room-poster{object-position:43% center}
  .room-controls{padding:14px 6vw;gap:14px}
  .room-views{width:100%}
  .room-views button{flex:1}
  .quick-grill{flex-wrap:wrap;gap:8px}
  .quick-grill label{width:100%}
  .quick-grill select{width:120px}
  [data-sid="table-selection"]{padding:28px 6vw}
  [data-sid="table-selection"] .section-line{display:block}
  [data-sid="table-selection"] .section-line>.micro{margin-bottom:20px}
  [data-sid="table-choice"]{align-items:start;flex-direction:column}
}

/* ===== phone-stage ===== */
/* Phones get one screen for the room: a slim notice, a sticky header, a stage that
   fills the rest of the small viewport, and ONE fixed bar at the bottom that carries
   the two views, the burger picker ("+", opens a sheet) and the docket. The bar sits
   over the bottom of the stage by design; everything the page scrolls past gets
   --bar of padding at the end, so no text is ever left under it.
   Only max-width:767px matches, so tablet and desktop never read this block. */
@media(max-width:767px){
  .home{--head:78px;--bar:64px}
  .home [data-sid="demo-note"]{height:40px;padding:0 4px 0 16px;gap:10px;font-size:10px;line-height:1.2}
  .home .demo-stamp{font-size:14px}
  .home [data-sid="demo-note"] button{width:44px;min-height:44px}
  .home [data-sid="site-header"]{position:sticky;top:0;z-index:35;background:var(--night)}
  /* The stage ends exactly at the fold on first load: 100svh minus notice and header. */
  .home [data-sid="restaurant-stage"]{height:calc(100svh - var(--head) - 40px);min-height:460px;scroll-margin-top:calc(var(--head) + 40px)}
  .home [data-sid="restaurant-stage"]:after,.home.room-away [data-sid="restaurant-stage"]:after{background:linear-gradient(180deg,rgb(13 11 10 / .72),transparent 22%),linear-gradient(0deg,rgb(13 11 10 / .9),transparent 30%)}
  /* Kicker + FEUER. become one compact block top-left; the subline moves under the stage. */
  .home .room-heading{top:14px;bottom:auto;left:16px}
  .home .room-heading .eyebrow{font-size:9px}
  .home .room-heading h1{font-size:64px;margin:6px 0 0}
  .home .room-heading>p:last-child{display:none}
  .home.scene-ready:not(.room-away) .room-heading{visibility:visible}
  /* Caption and status are read-only: taps fall through to the tables underneath. */
  .home .room-caption{top:auto;left:16px;bottom:calc(var(--bar) + 44px);gap:2px;pointer-events:none}
  .home .room-position{font-size:20px}
  .home .room-status{left:16px;right:16px;bottom:calc(var(--bar) + 10px);min-height:30px;display:flex;align-items:flex-end;font-size:11px;line-height:1.35;pointer-events:none}
  .home .stage-subline{display:block;margin-bottom:28px;font-size:18px;line-height:1.4;font-style:italic}

  /* ----- docked bar: views + "+" on the left, docket on the right ----- */
  .home .room-controls{position:fixed;z-index:41;left:0;bottom:0;right:112px;height:var(--bar);padding:10px 8px 10px 16px;gap:6px;flex-wrap:nowrap;border:0}
  .home .room-views{width:auto;flex:1;min-width:0;gap:6px}
  .home .room-views button{flex:1;width:auto;min-width:0;min-height:44px;padding:4px 6px;font-size:12px;line-height:1.15}
  .home .sheet-toggle{display:block;flex:none;width:44px;min-height:44px;padding:0;font-size:24px;line-height:1}
  .home .room-controls.sheet-open .sheet-toggle{border-color:var(--ember);box-shadow:inset 0 -2px var(--ember)}
  /* The picker is a bottom sheet above the bar; closed, it takes no room at all. */
  .home .quick-grill{position:fixed;z-index:42;left:0;right:0;bottom:var(--bar);display:none;flex-wrap:wrap;gap:10px;padding:16px;background:var(--night);border-top:1px solid var(--ember);box-shadow:0 -8px 40px rgb(13 11 10 / .6)}
  .home .room-controls.sheet-open .quick-grill{display:flex}
  .home .quick-grill label{width:100%}
  .home .quick-grill select{flex:1;width:auto;min-width:0;min-height:48px}
  .home .quick-grill [data-quick-add]{width:auto;min-height:48px;padding-inline:14px}
  /* Seated: "Tisch wählen" stays as the way back, the table's reserve link takes the rest. */
  .home.room-seated [data-view="counter"],.home.room-seated .sheet-toggle{display:none}
  .home.room-seated .room-views{flex:none}
  .home.room-seated [data-view="overview"]{flex:none;width:64px;font-size:11px}
  .home.room-seated .seat-action{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;min-height:44px;padding:3px 6px;border:1px solid var(--ember);background:rgb(255 107 26 / .12);text-decoration:none;line-height:1.2}
  .seat-name{font-size:10px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seat-cta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home [data-sid="docket"]{display:flex;flex-direction:column-reverse;padding:0;background:var(--night)}
  /* Count + total are the tap target; the open docket unfolds ABOVE the bar. */
  .home .docket-toggle{position:relative;align-self:flex-end;width:112px;height:var(--bar);display:grid;grid-template-columns:auto 1fr;align-content:center;gap:2px 6px;padding:0 14px 0 12px;border-left:1px solid var(--line)}
  .home .docket-toggle>span:first-child{grid-column:1/-1;margin:0;font-size:15px;letter-spacing:.04em;line-height:1}
  .home .docket-toggle [data-cart-count]{color:var(--ember)}
  .home .docket-toggle [data-cart-total]{font-variant-numeric:tabular-nums;white-space:nowrap}
  .home .docket-toggle .toggle-sign{display:none}
  /* A visible chevron so the count/total corner reads as a control, not a label
     (Beri's phone bug report, 2026-09-24: the bar showed count + total with no affordance
     to open it). Rotates open/closed; the text row keeps its width, so it costs no layout. */
  .home .docket-toggle:after{content:"";position:absolute;top:8px;right:5px;width:7px;height:7px;border-right:2px solid var(--bone);border-bottom:2px solid var(--bone);transform:rotate(45deg);transition:transform .2s ease}
  .home [data-sid="docket"].is-open .docket-toggle:after{transform:rotate(225deg)}
  .home #docket-content{padding:16px 16px 12px}
  .home .wdm-seal{margin-bottom:calc(var(--bar) + 16px)}
}
@media(max-width:560px){
  /* Two header rows (brand + language, then nav) at 44 px each. */
  .home{--head:88px}
  .home [data-sid="site-header"]{height:var(--head);padding:0 16px;gap:0 16px;align-content:center}
  .home [data-sid="site-header"] nav{height:40px;align-items:center}
  .home [data-sid="site-header"] nav a{line-height:40px}
}

/* ===== room-loader ===== */
/* The step from poster to 3D after the loading gesture (all widths): the poster dims, one
   ember line draws with the real download, GLUTBANK settles, the canvas fades in over it.
   Nothing here exists before the gesture, so LCP and CLS never see it. */
.room-loader{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:26px;pointer-events:none;background:rgb(13 11 10 / .64);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.is-loading .room-loader{opacity:1;visibility:visible;transition:opacity .35s ease}
.loader-row{display:flex;align-items:center;gap:10px;width:min(56vw,760px)}
.loader-line{display:block;flex:1;min-width:0;height:2px;background:linear-gradient(90deg,var(--coal),var(--ember) 72%,var(--bone));box-shadow:0 0 16px rgb(255 107 26 / .75);transform:scaleX(0);transform-origin:left;transition:transform .2s linear}
/* Real byte progress from room-scene.js's GLTFLoader callback, not a fake timer (see js/restaurant.js progress()). */
.loader-percent{flex:none;min-width:3.5ch;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;opacity:.8}
.loader-status{font-size:13px;letter-spacing:.02em;min-height:18px;text-align:center}
.loader-mark{font:clamp(56px,9vw,150px)/.9 var(--display);letter-spacing:.06em;clip-path:inset(0 0 100% 0);transform:translateY(.2em);transition:clip-path .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1)}
.is-revealing .loader-mark{clip-path:inset(0);transform:none}
.is-loading .room-heading,.is-revealing .room-heading{visibility:hidden}

/* ===== view-choreography ===== */
/* The caption masks in as the camera arrives (full contrast whenever visible, no text fade). */
@keyframes caption-in{from{clip-path:inset(0 0 100% 0);transform:translateY(12px)}to{clip-path:inset(0);transform:none}}
.room-caption.is-swapping .room-position{animation:caption-in .5s cubic-bezier(.2,.8,.2,1) calc(var(--travel,1800ms) * .5) both}
/* A new docket line drops in from under the one above it. */
@keyframes line-in{from{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}to{clip-path:inset(0);transform:none}}
.cart-row.is-new{animation:line-in .4s cubic-bezier(.2,.8,.2,1) both}

/* ===== touch-targets ===== */
/* U2 (UX audit 2026-09-24): five phone-only controls measured under the 44x44 CSS px
   tap-target floor at 375: DE/EN toggle 30x40, notice "x" 40x40 (inner pages had no
   override at all, so it stayed 32x32 there), nav links 108x40, allergen chips
   46x36, "Grillen"/"+ Dazu" buttons 87x42/56x42. Every rule is scoped to
   max-width:767px, so tablet and desktop keep their exact current size and padding. */
@media(max-width:767px){
  .language button{min-height:44px;min-width:44px}
  [data-sid="demo-note"] button{width:44px;min-height:44px}
  nav a{display:flex;align-items:center;min-height:44px}
  .allergen-options button{min-height:44px}
  .add-item{min-height:44px}
}
.burger-strip,.table-tags{display:none}