/* Four States — drawing becomes room */

@property --lit { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --tx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --ty { syntax: '<percentage>'; inherits: true; initial-value: 45%; }

:root {
  --espresso: #17100b;
  --wall: #2a1b11;
  --wall-lit: #4a2f1b;
  --cane: #f1e2c6;
  --cane-dim: #c7ab82;
  --amber: #f2c078;
  --glow: #ffd98f;
  --cloth: #ead8b6;
  --ink: #23170f;
  --marble: #13231a;
  --marble-2: #1c3327;
  --leaf: #b9cfa0;
  --brick: #8f3d26;
  --brick-deep: #6f2c1a;
  --redline: #ff6b4e;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --body: 'Albert Sans', system-ui, sans-serif;
  --measure: 'Martian Mono', ui-monospace, monospace;

  --nav-h: 60px;
  --dock-h: 0px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glow-strength: .8;
}
[data-light='night'] { --glow-strength: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #6b4a2c var(--espresso); }
body {
  margin: 0; background: var(--espresso); color: var(--cane);
  font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock-h);
}
::selection { background: var(--amber); color: var(--ink); }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -.012em; }
h2 { font-size: clamp(2.1rem, 6.4vw, 4.4rem); }
h3 { font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; border: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
.wrap { padding-inline: var(--gut); max-width: 1440px; margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--amber); color: var(--ink); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  background: var(--amber); color: var(--ink); font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  border-radius: 999px; box-shadow: 0 10px 34px -10px rgb(255 201 120 / calc(.75 * var(--glow-strength)));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s;
}
.btn:hover { transform: translateY(-2px); background: #ffd494; box-shadow: 0 18px 44px -10px rgb(255 201 120 / .9); }
.btn:active { transform: translateY(0); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: .92rem; }
.btn--light { background: var(--cane); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); }
.btn--light:hover { background: #fff3da; box-shadow: 0 16px 36px -12px rgb(0 0 0 / .7); }
.link-arrow { font-weight: 500; text-decoration: none; padding: 14px 0; border-bottom: 1px solid currentColor; }
.link-arrow::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .6em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-.2em) rotate(45deg); transition: transform .4s var(--ease); }
.link-arrow:hover::after { transform: translateY(.05em) rotate(45deg); }

/* redline measurement strip and stamp, borrowed from the artwork docket */
.dim { display: flex; flex-wrap: wrap; gap: 6px 0; font: 400 .7rem/1.5 var(--measure); letter-spacing: .02em; color: var(--redline); text-transform: uppercase; }
.dim span { padding-right: 14px; margin-right: 14px; border-right: 1px solid currentColor; }
.dim span:last-child { border: 0; margin: 0; padding: 0; }
.stamp {
  font: 500 .66rem/1.35 var(--measure); letter-spacing: .08em; text-transform: uppercase; color: var(--redline);
  border: 1.5px solid currentColor; padding: 9px 12px 8px; transform: rotate(-4deg); background: rgb(23 16 11 / .82);
  width: max-content; max-width: 80%;
}
.stamp b { display: block; font-weight: 500; color: var(--cane); }
.stamp--static { margin-top: 26px; background: transparent; }
.note { color: var(--cane-dim); font-size: .95rem; max-width: 46ch; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h); padding-inline: var(--gut);
  display: flex; align-items: center; gap: 28px;
  transition: background .5s, transform .6s var(--ease);
}
.nav.is-solid { background: rgb(23 16 11 / .9); backdrop-filter: blur(10px); }
.nav.is-away { transform: translateY(-100%); }
.wordmark { font: 600 .95rem/1 var(--body); letter-spacing: .34em; text-transform: uppercase; text-decoration: none; margin-right: auto; display: flex; align-items: center; }
.wordmark span { width: 18px; height: 1px; background: var(--amber); margin: 0 .5em 0 .18em; }
.nav__links { display: none; gap: 30px; font-size: .95rem; }
.nav__links a { text-decoration: none; padding: 8px 0; background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.nav__links a:hover { background-size: 100% 1px; }
.nav .btn { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; --lx: 54%; --ly: 26%; }
.hero__stage { position: absolute; inset: 0; z-index: -1; transform: scale(calc(1.04 + var(--hs, 0) * .1)); transform-origin: 54% 30%; }
.hero__stage picture, .hero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__line { opacity: .95; }
.hero__room {
  --lit: 170%;
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lit) - 26%), transparent var(--lit));
  mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lit) - 26%), transparent var(--lit));
}
.js .hero__room { animation: switch-on 3.6s 1.1s both; }
.js .hero__line { animation: draw-in 1.4s both; }
@keyframes draw-in { from { opacity: 0; filter: blur(6px); } }
@keyframes switch-on {
  0% { --lit: 0%; opacity: 0; }
  4% { --lit: 16%; opacity: 1; }
  7% { opacity: .15; }
  10% { opacity: .9; }
  13% { opacity: .3; }
  17% { --lit: 20%; opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  100% { --lit: 170%; opacity: 1; }
}
.hero__motes { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(23 16 11 / .55) 0, transparent 22%, transparent 38%, rgb(23 16 11 / .86) 74%, var(--espresso) 100%); }
.hero__copy { padding: 0 var(--gut); max-width: 900px; transform: translateY(calc(var(--hs, 0) * -40px)); }
.hero__title { font-size: clamp(3.1rem, 13.2vw, 6rem); line-height: .96; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.js .hero__title .line > span { display: block; animation: rise 1.3s var(--ease) 2.1s both; }
.js .hero__title .line + .line > span { animation-delay: 2.26s; }
@keyframes rise { from { transform: translateY(108%); } }
.hero__lede { margin-top: 18px; max-width: 34ch; font-size: clamp(1.02rem, 2.3vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 26px; }
.js .hero__lede, .js .hero__actions, .js .hero__meter { animation: fade-up 1.2s var(--ease) 2.7s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
.hero__meter { display: flex; gap: 0; margin: 34px var(--gut) 26px; border-top: 1px solid rgb(241 226 198 / .28); }
.hero__meter div { flex: 1; padding: 12px 12px 0 0; }
.hero__meter dt { font-size: .78rem; color: var(--cane-dim); }
.hero__meter dd { font: 500 clamp(.82rem, 2.6vw, 1rem)/1.4 var(--measure); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- walk the plan ---------- */
.walk { padding-block: clamp(80px, 12vw, 170px) clamp(40px, 6vw, 90px); position: relative; }
.walk__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 6vw, 80px); }
.walk__head h2 { max-width: 13ch; }
.walk__head p { max-width: 54ch; color: #e4d0ad; }
.walk__grid { display: grid; gap: 40px; }
.plan { position: relative; aspect-ratio: 1752 / 1211; }
.plan__lines { position: absolute; inset: 0; background: var(--cane-dim); opacity: .78; -webkit-mask: url('../assets/img/plan-mask.webp') center / 100% 100% no-repeat; mask: url('../assets/img/plan-mask.webp') center / 100% 100% no-repeat; }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plan .area { fill: var(--redline); fill-opacity: 0; stroke: var(--redline); stroke-opacity: 0; stroke-width: 2; stroke-dasharray: 7 6; transition: fill-opacity .6s, stroke-opacity .6s, fill .6s; cursor: pointer; }
.plan .area.is-draft { fill-opacity: .07; stroke-opacity: .5; }
.plan .area.is-lit { fill: var(--glow); fill-opacity: .16; stroke: none; }
.plan .area.is-here { fill-opacity: .38; stroke-opacity: 1; }
.plan .area.is-lit.is-here { fill-opacity: .46; }
.plan .route { fill: none; stroke: var(--redline); stroke-width: 3; stroke-linecap: round; }
.plan .route--ghost { opacity: .32; stroke-dasharray: 3 9; }
.plan .dot { fill: var(--glow); filter: drop-shadow(0 0 8px var(--glow)); }
.plan .ping { fill: none; stroke: var(--glow); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.plan .mark circle { fill: var(--espresso); stroke: var(--redline); stroke-width: 2; }
.plan .mark text { font: 500 22px var(--measure); fill: var(--redline); text-anchor: middle; dominant-baseline: central; }
.plan__legend { margin-top: 16px; font-size: .8rem; color: var(--cane-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.key { width: 18px; height: 10px; display: inline-block; margin-left: 12px; }
.key:first-child { margin-left: 0; }
.key--route { border-top: 2px solid var(--redline); height: 0; }
.key--lit { background: rgb(255 217 143 / .4); }
.key--draft { border: 1px dashed var(--redline); }

.plan--mini {
  position: fixed; z-index: 30; right: 12px; top: 12px; width: 132px; padding: 0; background: rgb(23 16 11 / .9);
  outline: 7px solid rgb(23 16 11 / .9); box-shadow: 0 0 0 8px rgb(241 226 198 / .22), 0 18px 40px rgb(0 0 0 / .5);
  opacity: 0; transform: translateY(-16px) scale(.94); transform-origin: 100% 0; pointer-events: none;
  transition: opacity .5s, transform .7s var(--ease);
}
.show-mini .plan--mini { opacity: 1; transform: none; }
.plan--mini .mark { display: none; }
.plan--mini .dot { r: 26px; }
.plan--mini .route { stroke-width: 9; }

.zone { padding-bottom: clamp(72px, 11vw, 140px); display: grid; gap: 18px; }
.zone > p:not(.dim) { max-width: 50ch; color: #e4d0ad; }
.zone em { font-family: var(--display); font-style: normal; color: var(--cane); }
.zone h3 { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.pin { flex: none; width: 34px; height: 34px; border: 1.5px solid var(--redline); border-radius: 50%; display: grid; place-items: center; font: 500 .8rem/1 var(--measure); color: var(--redline); }

.reveal { position: relative; overflow: hidden; background: #1b130e; margin-inline: calc(var(--gut) * -1); --p: 1; }
.reveal img { width: 100%; display: block; }
.reveal.is-draft .reveal__line { filter: brightness(1.45) contrast(1.05); }
.reveal__room { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.reveal .stamp { position: absolute; left: 16px; bottom: 18px; display: none; z-index: 3; }
.reveal--aside { margin-inline: 0 calc(var(--gut) * -1); width: 86%; justify-self: end; }

/* lit rooms: a bar of light crosses the drawing and leaves the room behind it */
.js .reveal.is-lit .reveal__room { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.js .reveal.is-lit::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 90px; margin-left: -88px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgb(255 217 143 / .5) 86%, #fff3d6 98%, transparent);
  opacity: var(--edge, 0); transition: opacity .4s; mix-blend-mode: screen; pointer-events: none;
}
/* drawing-board rooms: only a torch beam shows what is coming */
.js .reveal.is-draft .reveal__room {
  -webkit-mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 0, #000 9%, transparent 24%);
  mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 0, #000 9%, transparent 24%);
  animation: torch 15s ease-in-out infinite alternate;
}
.js .reveal.is-draft.is-held .reveal__room { animation: none; }
.js .reveal.is-draft { cursor: crosshair; }
.js .reveal.is-draft .stamp { display: block; animation: stamp .7s var(--ease) both; animation-play-state: paused; }
.js .reveal.is-draft.is-seen .stamp { animation-play-state: running; }
@keyframes stamp { from { opacity: 0; transform: rotate(-11deg) scale(1.7); } }
@keyframes torch {
  0% { --tx: 22%; --ty: 40%; }
  25% { --tx: 64%; --ty: 30%; }
  50% { --tx: 80%; --ty: 64%; }
  75% { --tx: 42%; --ty: 72%; }
  100% { --tx: 28%; --ty: 34%; }
}

.materials { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--cane-dim); }
.materials li { display: flex; align-items: center; gap: 8px; }
.materials li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--sw, #a8875a); box-shadow: inset 0 -3px 5px rgb(0 0 0 / .35), inset 0 2px 3px rgb(255 255 255 / .18); }
[data-m='travertine'] { --sw: #9a4a34; } [data-m='cane'] { --sw: #d8bb86; } [data-m='marble'] { --sw: #2f4a38; }
[data-m='timber'] { --sw: #4a2d1c; } [data-m='plaster'] { --sw: #cdb89a; } [data-m='stone'] { --sw: #4c4a47; }
[data-m='brick'] { --sw: #b0563a; } [data-m='leaf'] { --sw: #5f7f45; } [data-m='brass'] { --sw: #c9954c; }

/* ---------- menu ---------- */
.menu {
  background:
    radial-gradient(60% 40% at 82% 8%, rgb(185 207 160 / .1), transparent),
    linear-gradient(160deg, var(--marble-2), var(--marble) 55%);
  padding-block: clamp(84px, 12vw, 170px); color: #eef0dd; position: relative; overflow: hidden;
}
.menu ::selection { background: var(--leaf); color: var(--marble); }
.menu__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 80px); }
.menu__head p:not(.stamp) { max-width: 46ch; color: #cbd6b8; }
.menu .stamp--static { color: #ff8e75; }
.menu .stamp--static b { color: #eef0dd; }
.menu__grid { display: grid; gap: 44px; }
.thali { display: grid; gap: 24px; justify-items: center; }
.thali__svg { width: min(78vw, 420px); filter: drop-shadow(0 34px 40px rgb(0 0 0 / .5)); overflow: visible; }
.thali__disc { transition: transform 1.3s var(--ease); transform: rotate(var(--turn, 0deg)); }
.thali .wedge { fill: #2a1a0c; fill-opacity: 0; transition: fill-opacity .6s; cursor: pointer; }
.thali__q:not(.is-on) .wedge { fill-opacity: .34; }
.thali__q:not(.is-on):hover .wedge { fill-opacity: .2; }
.thali text { font: 600 15px var(--body); letter-spacing: .3em; fill: #4a2c10; pointer-events: none; }
.thali .katori { fill: #b98440; stroke: #6f4517; stroke-width: 1.5; pointer-events: none; transition: fill .8s; }
.thali__q.is-on .katori { fill: #7a2d19; }
.thali__q.is-on .katori:nth-of-type(2) { fill: #e9d9a2; }
.thali__q.is-on .katori:nth-of-type(3) { fill: #4f6b34; }
.thali__needle { fill: var(--redline); }
.thali__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.thali__tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; background: transparent; border: 1px solid rgb(203 214 184 / .45); color: #cbd6b8; cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
.thali__tabs button:hover { border-color: #eef0dd; color: #eef0dd; }
.thali__tabs button[aria-selected='true'] { background: #eef0dd; color: var(--marble); border-color: #eef0dd; font-weight: 600; }

.dishes h3 { margin-bottom: 14px; }
.dishes--shared { margin-top: 44px; padding-top: 36px; border-top: 1px solid rgb(203 214 184 / .28); }
.dishes--shared h3:not(:first-child) { margin-top: 40px; }
.dishes li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid rgb(203 214 184 / .16); display: grid; gap: 2px; }
.dishes b { font: 400 1.14rem/1.3 var(--display); }
.dishes span { color: #b8c6a4; font-size: .94rem; line-height: 1.45; }
.dishes li::before { content: ''; position: absolute; left: 0; top: 19px; width: 15px; height: 15px; border: 1.5px solid #7fbf6a; background: radial-gradient(circle, #7fbf6a 0 3.4px, transparent 4px); }
.dishes li.nv::before { border-color: #e2795a; background: radial-gradient(circle, #e2795a 0 3.4px, transparent 4px); }
.js .dishes.is-turning li { animation: plate .7s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 250ms); }
@keyframes plate { from { opacity: 0; transform: translateX(26px); } }

/* ---------- visit ---------- */
.visit {
  background-color: var(--brick);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 .5h96M0 24.5h96M24 0v24M72 0v24M48 24v24M0 24v24' stroke='%23451608' stroke-opacity='.34' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  padding-block: clamp(84px, 12vw, 170px); color: #fbead0;
}
.visit ::selection { background: #fbead0; color: var(--brick-deep); }
.visit__grid { display: grid; gap: 48px; }
.visit__copy { display: grid; gap: 22px; align-content: start; }
.visit__copy h2 { max-width: 12ch; }
.visit__copy > p { max-width: 46ch; }
.visit__facts { display: grid; gap: 0; margin-top: 10px; }
.visit__facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgb(251 234 208 / .3); }
.visit__facts dt { font-family: var(--display); }
.visit__facts dd { color: #f5d9bb; }
.hold { background: var(--brick-deep); padding: clamp(20px, 4vw, 40px); display: grid; gap: 22px; box-shadow: 0 40px 80px -30px rgb(40 10 0 / .7); }
.plan--pick .plan__lines { background: #fbead0; opacity: .6; }
.plan--pick .mark, .plan--pick .route, .plan--pick .dot, .plan--pick .ping { display: none; }
.plan--pick .area, .plan--pick .area.is-lit, .plan--pick .area.is-draft { fill: var(--glow); fill-opacity: 0; stroke: none; }
.plan--pick .area.is-here { fill-opacity: .6; }
.hold legend { font-family: var(--display); font-size: 1.2rem; padding: 0; margin-bottom: 12px; }
.hold__areas { display: flex; flex-wrap: wrap; gap: 8px; }
.hold__areas legend { width: 100%; }
.hold__areas input { position: absolute; opacity: 0; }
.hold__areas span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(251 234 208 / .5); cursor: pointer; transition: background .3s, color .3s; }
.hold__areas input:checked + span { background: #fbead0; color: var(--brick-deep); font-weight: 600; }
.hold__areas input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 3px; }
.hold__row { display: grid; gap: 16px; align-items: end; }
.field { display: grid; gap: 6px; font-size: .88rem; color: #f5d9bb; }
.field input, .field select { min-height: 52px; padding: 0 14px; background: rgb(251 234 208 / .08); border: 0; border-bottom: 1.5px solid rgb(251 234 208 / .6); border-radius: 0; color: #fbead0; font-size: 1.05rem; caret-color: var(--glow); width: 100%; }
.field select option { color: #23170f; }
.field input:focus-visible, .field select:focus-visible { outline: 0; border-color: var(--glow); background: rgb(251 234 208 / .14); }
.field input[aria-invalid='true'] { border-color: #ffd0c2; background: rgb(255 120 90 / .18); }
.hold__status { min-height: 1.6em; font-size: .95rem; }

/* ---------- footer + dock ---------- */
.foot { padding-block: 56px calc(40px + env(safe-area-inset-bottom)); font-size: .9rem; color: var(--cane-dim); }
.foot__grid { display: grid; gap: 14px; }
.foot__mark { font: 400 1.5rem/1.1 var(--display); color: var(--cane); }
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 45; height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: 1fr 1fr 1.5fr; background: rgb(18 12 8 / .96); border-top: 1px solid rgb(241 226 198 / .16);
}
.dock a { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: .86rem; font-weight: 500; }
.dock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dock__main { background: var(--amber); color: var(--ink); font-weight: 600 !important; }

@media (max-width: 899px) {
  :root { --dock-h: 58px; }
  .hero { --lx: 52%; --ly: 24%; padding-bottom: var(--dock-h); }
  .hero::after { background: linear-gradient(180deg, rgb(23 16 11 / .5) 0, transparent 15%, transparent 28%, rgb(23 16 11 / .74) 47%, rgb(23 16 11 / .93) 68%, var(--espresso) 100%); }
  .hero__meter { margin-top: 24px; margin-bottom: 16px; }
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }
  .nav__links, .nav .btn { display: flex; }
  .dock { display: none; }
  .hero { --lx: 52%; --ly: 22%; }
  .hero__stage picture, .hero__stage img { object-position: 50% 42%; }
  .hero__copy { padding-bottom: 8px; }
  .hero__meter { max-width: 620px; margin-top: 44px; margin-bottom: 44px; }
  .story__outro { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 6vw; }
  .walk__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 6vw; }
  .walk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 90px); align-items: start; }
  .walk__plan { position: sticky; top: calc(var(--nav-h) + 3vh); }
  .plan--mini { display: none; }
  .reveal { margin-inline: 0; }
  .reveal--aside { width: 72%; margin-inline: 0; }
  .menu__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 12px 6vw; }
  .menu__head h2 { grid-row: span 2; }
  .menu__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .thali { position: sticky; top: calc(var(--nav-h) + 4vh); }
  .thali__svg { width: min(34vw, 460px); }
  .dishes--shared { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .dishes--shared h3, .dishes--shared ul { grid-column: 1; }
  .dishes--shared h3:nth-of-type(2), .dishes--shared ul:nth-of-type(2) { grid-column: 2; }
  .dishes--shared h3:nth-of-type(1), .dishes--shared h3:nth-of-type(2) { grid-row: 1; margin-top: 0; }
  .dishes--shared ul:nth-of-type(1) { grid-row: 2; }
  .dishes--shared ul:nth-of-type(2) { grid-row: 2 / span 3; }
  .visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .hold__row { grid-template-columns: 1fr 1fr; }
  .foot__grid { grid-template-columns: 1.2fr 2fr auto; align-items: baseline; gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal.is-lit .reveal__room { clip-path: none; }
  .js .reveal.is-lit::after { display: none; }
  .js .reveal.is-draft .reveal__room { --tx: 50%; --ty: 50%; }
}