/* ==== 00-base.css ==== */
/* SUPPER INU — THE TASTING MENU. Oxblood velvet dining room, linen menu paper, two inks (suit blue + cape red).
   Motion: html.rm (boot.js); hide-until-seen gated on html.js:not(.rm). No inline styles (CSP). Built by src/build.py. */
:root {
  --velvet: #1B0A0D; --velvet-2: #2A0F14; --velvet-0: #12060A; --curtain: #4A141B; --linen: #F4EEE4; --linen-2: #ECE3D3; --card: #FFFDF8;
  --ink: #1B2238; --ink-2: #4A5068; --suit: #1F4AA0; --cape: #B3262C; --cape-lit: #C8302F; --candle: #F3B44C; --glow: #EBC8A6; --mute: #BFA9A0; --silver: #C7CCD3;
  --serif: 'Libre Baskerville', Georgia, serif; --sans: 'Golos Text', 'Segoe UI', system-ui, sans-serif; --mono: 'Atkinson Hyperlegible Mono', Consolas, monospace; --hand: 'Parisienne', cursive;
  --m: 40px; --nav: 72px; --ease: cubic-bezier(.2, .7, .2, 1); --em: var(--glow); --ring: var(--silver);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background-color: var(--velvet); scroll-padding-top: calc(var(--nav) + 8px); -webkit-text-size-adjust: 100%; }
html.js:not(.rm) { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--velvet); color: var(--linen); font: 400 17px/1.6 var(--sans); overflow-x: clip; }
body.lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background-color: var(--linen); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* grounds */
.gd-velvet { background-color: var(--velvet); color: var(--linen); --em: var(--glow); --ring: var(--silver); }
.gd-velvet2 { background-color: var(--velvet-2); color: var(--linen); --em: var(--glow); --ring: var(--silver); }
.gd-velvet0 { background-color: var(--velvet-0); color: var(--linen); --em: var(--glow); --ring: var(--silver); }
.gd-linen { background-color: var(--linen); color: var(--ink); --em: var(--suit); --ring: var(--suit);
  background-image: url(/img/linen-tile.webp); background-size: 256px 256px; }
.gd-photo { background-color: var(--velvet); color: var(--linen); --em: var(--glow); --ring: var(--silver); }

/* layout */
.wrap { max-width: 1340px; margin: 0 auto; padding: 0 var(--m); box-sizing: content-box; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.sec { position: relative; padding: 120px 0; }

/* type */
.eyebrow { font: 500 12px/1.35 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.gd-linen .eyebrow { color: var(--suit); }
h2 { font: 500 clamp(32px, 3.3vw, 46px)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
h2 em, h3 em { display: block; font-style: italic; font-weight: 500; color: var(--em); text-wrap: balance; }
h3 { font: 500 clamp(26px, 2.6vw, 36px)/1.15 var(--serif); text-wrap: balance; }
.sh .eyebrow { margin-bottom: 14px; }
/* split editorial header on wide screens: headline left, the intro on the right behind a hairline */
@media (min-width: 1100px) {
  .sh:not(.mn-sh) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; max-width: none; }
  .sh:not(.mn-sh) > .eyebrow { grid-column: 1 / -1; }
  .sh:not(.mn-sh) > h2 { grid-column: 1; }
  .sh:not(.mn-sh) > .intro { grid-column: 2; margin: 0 0 6px; padding-left: 24px; border-left: 1px solid rgba(199, 204, 211, .28); max-width: 30em; }
  .gd-linen .sh:not(.mn-sh) > .intro { border-left-color: rgba(31, 74, 160, .25); }
}
.intro { margin-top: 18px; max-width: 36em; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.gd-velvet .intro, .gd-velvet2 .intro, .gd-velvet0 .intro { color: var(--mute); }
.gd-linen .intro { color: var(--ink-2); }
.wn { display: flex; align-items: baseline; gap: 8px; font: italic 500 15px/1.45 var(--serif); }
.wn .ic { width: 16px; height: 16px; transform: translateY(3px); opacity: .8; }
.note { font-family: var(--hand); font-weight: 400; line-height: 1; }
.tick { width: 22px; height: 22px; color: var(--suit); }

/* buttons */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 600 17px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.pill.sm { height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; }
.pill.buy { background-color: var(--cape-lit); color: #FFF7EE; box-shadow: 0 6px 16px rgba(0, 0, 0, .32); }
.gd-linen .pill.buy, .tp-card .pill.buy, .pill.buy.on-linen { background-color: var(--cape); }
.pill.buy:hover { background-color: #D93A38; }
.pill.ink { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill.ink:hover { background-color: rgba(27, 34, 56, .07); }
.pill.lin { background-color: transparent; color: var(--linen); box-shadow: inset 0 0 0 1.5px rgba(244, 238, 228, .7); }
.pill.lin:hover { background-color: rgba(244, 238, 228, .1); }
.pill.blue { background-color: var(--suit); color: #fff; }
.pill.blue:hover { background-color: #2857B3; }
.pill .mk { flex: none; width: 20px; height: 20px; }
.pill.buy .mk { box-sizing: content-box; padding: 3px; border-radius: 50%; background-color: #fff; }
.pill .mk.inv { filter: invert(1); }
.pill .ic { width: 20px; height: 20px; }
html.js:not(.rm) .pill { transition: transform .18s var(--ease), background-color .18s; }
html.js:not(.rm) .pill:hover { transform: translateY(-2px); }
html.js:not(.rm) .pill:active { transform: scale(.97); }
.rnd { position: relative; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; padding: 0; background-color: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(199, 204, 211, .7); text-decoration: none; }
.rnd img { width: 18px; height: 18px; filter: invert(1); }
.rnd:hover { background-color: rgba(199, 204, 211, .12); }
.soon-dot { position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--candle); box-shadow: 0 0 8px var(--candle); }

/* the CA: RESERVED place card (flips to SEATED) */
.pc { --ring: var(--suit); position: relative; perspective: 900px; width: min(528px, 100%); min-height: 98px; }
.pc-in { position: relative; min-height: inherit; transform-style: preserve-3d; }
.pc-f, .pc-b { position: relative; min-height: 98px; padding: 16px 16px 14px; border-radius: 6px; background-color: var(--card); color: var(--ink); backface-visibility: hidden;
  box-shadow: inset 0 6px 0 rgba(27, 34, 56, .06), 0 0 0 1px #D9D2C4, 0 10px 22px rgba(27, 34, 56, .16); }
.pc-f { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.pc-b { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 6px; transform: rotateX(180deg); }
.pc-l { font: 500 12px/1.3 var(--mono); letter-spacing: .16em; color: var(--suit); }
.pc-sh { display: none; }
.pc-copy { height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background-color: var(--suit); color: #fff; font: 700 13px/1 var(--mono); letter-spacing: .1em; white-space: nowrap; }
.pc-copy:hover { background-color: #2857B3; }
.pc .ca { grid-column: 1 / -1; font: 500 15px/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.pc-t { font: italic 500 17px/1.3 var(--serif); color: var(--ink); }
.pc-b .pc-l { color: var(--cape); }
.pc.pre .pc-f { grid-template-columns: 1fr auto; }
.pc.pre .ca-pre { grid-column: 1 / -1; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.pc.ok .pc-in { transform: rotateX(180deg); }
html.js:not(.rm) .pc-in { transition: transform .5s var(--ease); }
html.rm .pc.ok .pc-in { transform: none; }
html.rm .pc-b { transform: none; visibility: hidden; }
html.rm .pc.ok .pc-b { visibility: visible; pointer-events: none; }
.pc.ok:focus-within .pc-in { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
.pc-sm { width: min(440px, 100%); }
.pc-sm .ca { font-size: 14px; }

/* header */
.top { position: sticky; top: 0; z-index: 50; height: var(--nav); display: flex; align-items: center; gap: 22px; padding: 0 var(--m); background-color: var(--velvet-2);
  box-shadow: 0 1px 0 rgba(199, 204, 211, .22); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #D78435; }
.brand b { font: 600 22px/1 var(--serif); white-space: nowrap; }
.brand b i { font-style: italic; font-weight: 500; color: var(--glow); }
.nav { display: flex; gap: 22px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: 500 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: var(--mute); }
.nav a:hover, .nav a.here { color: var(--linen); }
.course-line { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--mute); white-space: nowrap; }
html.js:not(.rm) .course-line { transition: opacity .25s; }
.course-line.swap { opacity: 0; }
.nav-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.course-line + .nav-r { margin-left: 18px; }
.motion { color: var(--linen); box-shadow: inset 0 0 0 1.5px rgba(199, 204, 211, .5); background-color: transparent; }
.motion .dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--candle); box-shadow: 0 0 8px var(--candle); }
html.rm .motion .dot { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--mute); }
.top .motion { height: 44px; padding: 0 12px; font-size: 13px; }
.menu-btn { display: none; }

/* menu sheet (linen) */
.sheet-bg { position: fixed; inset: 0; z-index: 59; background-color: rgba(10, 4, 6, .62); }
.sheet { position: fixed; z-index: 60; left: 0; right: 0; top: 0; max-height: 100svh; overflow: auto; padding: 70px 24px 26px; background-color: var(--linen); color: var(--ink); --ring: var(--suit);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.sheet .eyebrow { color: var(--suit); margin-bottom: 8px; }
.sheet a.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 48px; padding: 10px 0; border-top: 1px solid rgba(27, 34, 56, .18); font: italic 500 24px/1.2 var(--serif); text-decoration: none; }
.sheet a.row span { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--suit); font-style: normal; }
.sheet-x { position: absolute; right: 16px; top: 14px; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sheet-r { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sheet .motion { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
html.js:not(.rm) .sheet:not([hidden]) { animation: drop .3s var(--ease) 1; }
@keyframes drop { from { transform: translateY(-20px); opacity: 0; } }

/* toast */
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translate(-50%, 150%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background-color: var(--linen); color: var(--ink); font-weight: 600; opacity: 0; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
html.js:not(.rm) .toast { transition: transform .3s var(--ease), opacity .3s; }

@media (max-width: 1279px) { .course-line { display: none; } .nav-r { margin-left: auto; } .nav { gap: 18px; margin-left: auto; } }
@media (max-width: 1099px) {
  :root { --m: 24px; }
  .nav, .top .rnd, .top .motion { display: none; }
  .top .menu-btn { display: inline-flex; }
  .course-line + .nav-r { margin-left: auto; }
}
@media (max-width: 699px) {
  :root { --m: 16px; --nav: 60px; }
  body { font-size: 16px; }
  .g12 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .sec { padding: 84px 0; }
  .top { gap: 8px; }
  .brand img { width: 36px; height: 36px; } .brand b { font-size: 18px; }
  .intro { font-size: 17px; }
  .pc, .pc-f, .pc-b { min-height: 114px; }
  .pc-lg { display: none; } .pc-sh { display: inline; }
  .pc .ca { font-size: 14px; }
}
@media (max-width: 359px) { .brand b { display: none; } }

/* ==== 10-hero.css ==== */
/* HERO #top — the candle-lit table photo (him left) + the deckled linen menu card (right) printed in two inks. */
.hero { position: relative; height: clamp(760px, calc(100svh - var(--nav)), 960px); overflow: hidden; isolation: isolate; --gx: 6%; --gy: 40%; --sx: 35%; --sy: 89%; --kx: 53%; --ky: 42%; }
.tp-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.tp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; max-width: none; }
.tp-glow { position: absolute; left: var(--gx); top: var(--gy); width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(243, 180, 76, .42), rgba(243, 180, 76, 0) 62%); opacity: .75; }
.tp-steam { position: absolute; left: var(--sx); top: var(--sy); width: 60px; height: 120px; margin: -120px 0 0 -30px; pointer-events: none; }
.tp-steam i { position: absolute; bottom: 0; left: 50%; width: 10px; height: 60px; margin-left: -5px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); opacity: 0; }
.tp-steam i:nth-child(2) { margin-left: -16px; } .tp-steam i:nth-child(3) { margin-left: 6px; }
.tp-glint { position: absolute; left: var(--kx); top: var(--ky); width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, .7) 9% 14%, rgba(255, 255, 255, 0) 60%); }
.tp-glint::before, .tp-glint::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(transparent, #fff, transparent); }
.tp-glint::after { transform: rotate(90deg); }
.tp-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(27, 10, 13, 0) 48%, rgba(27, 10, 13, .8) 100%), linear-gradient(0deg, var(--velvet) 0, rgba(27, 10, 13, 0) 120px); }

/* the menu card column */
.tp-col { position: absolute; z-index: 2; right: max(56px, calc(50vw - 664px)); top: 28px; width: 600px; display: grid; gap: 18px; }
.tp-card { position: relative; padding: 30px 36px 28px; border-radius: 4px 4px 8px 8px; background-color: var(--linen); background-image: url(/img/linen-tile.webp); background-size: 256px; color: var(--ink); text-align: center; --ring: var(--suit);
  -webkit-mask: url(/img/deckle-top.svg) top / 100% 14px no-repeat, linear-gradient(#000, #000) 0 13px / 100% calc(100% - 13px) no-repeat;
  mask: url(/img/deckle-top.svg) top / 100% 14px no-repeat, linear-gradient(#000, #000) 0 13px / 100% calc(100% - 13px) no-repeat;
  box-shadow: inset 0 0 0 10px var(--linen), inset 0 0 0 11px rgba(31, 74, 160, .28); }
.tp-col { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)); }
/* the silk bookmark: off the centre line, a swallowtail end */
.tp-ribbon { position: absolute; right: 72px; top: 0; width: 10px; height: 62px; background: linear-gradient(90deg, #17398a, #2652ad 45%, #1f4aa0 62%, #163a86); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); transform-origin: 50% 0; }
.tp-note { position: absolute; left: 28px; top: 26px; font-size: 36px; color: var(--suit); transform: rotate(-7deg); }
.tp-mark { width: 40px; height: 40px; margin: 6px auto 10px; color: var(--suit); stroke-width: 1.6; }
.tp-card .eyebrow { color: var(--suit); letter-spacing: .2em; }
h1 { margin-top: 14px; font: 500 clamp(40px, 3.75vw, 54px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--suit); text-wrap: balance; }
h1 em { display: block; font-style: italic; font-weight: 500; color: var(--cape); }
.tp-card .sub { margin: 14px auto 0; max-width: 500px; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.tp-card .pc { margin: 20px auto 0; text-align: left; }
.tp-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.tp-cta .pill { padding: 0 20px; }
/* one red Buy, one ink Chart, then a quiet text link: the Buy keeps the pull */
.tp-cta .pill.blue { background: none; color: var(--suit); padding: 0 6px; box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tp-cta .pill.blue:hover { background: none; color: var(--ink); }
.tp-read { margin-top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; color: var(--ink-2); }
.tp-under { display: grid; justify-items: center; gap: 14px; text-align: center; }
.tp-small { font-size: 14px; color: rgba(244, 238, 228, .82); }
.tp-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.tp-btns .pill.sm { background: none; box-shadow: none; padding: 0 6px; color: var(--linen); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.tp-btns .pill.sm:hover { background: none; color: var(--glow); }
.tp-ring .ic { transform-origin: 50% 20%; }
.tp-ring.ding .ic { animation: ding .5s ease-out 1; }
@keyframes ding { 20% { transform: rotate(18deg); } 45% { transform: rotate(-14deg); } 70% { transform: rotate(8deg); } }
.tp-wn { position: absolute; z-index: 2; left: var(--m); bottom: 30px; max-width: 470px; color: var(--linen); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

/* motion (never under html.rm; paused off screen via .still). Only the glow flickers: opacity + scale stay on the compositor. */
html.js:not(.rm) .hero:not(.still) .tp-glow { animation: tp-flick 2.7s linear infinite; }
@keyframes tp-flick {
  0%, 100% { opacity: .75; transform: scale(1); } 13% { opacity: .95; transform: scale(1.048); } 21% { opacity: .825; transform: scale(1.018); }
  37% { opacity: 1; transform: scale(1.06); } 52% { opacity: .8; transform: scale(1.012); } 68% { opacity: .925; transform: scale(1.042); }
  81% { opacity: .775; transform: scale(1.006); } 90% { opacity: .975; transform: scale(1.054); } }
html.js:not(.rm) .hero:not(.still) .tp-steam i { animation: steam 5s ease-out infinite; }
html.js:not(.rm) .hero:not(.still) .tp-steam i:nth-child(2) { animation-duration: 6s; animation-delay: -2s; } html.js:not(.rm) .hero:not(.still) .tp-steam i:nth-child(3) { animation-duration: 4.4s; animation-delay: -3.3s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(0) scaleX(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scaleX(1.6) rotate(8deg); } }
html.js:not(.rm) .hero:not(.still) .tp-glint { animation: glint 7s ease-in-out infinite; }
@keyframes glint { 0%, 88%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 93% { opacity: 1; transform: scale(1) rotate(45deg); } }
html.js:not(.rm) .hero:not(.still) .tp-ribbon { animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
html.js:not(.rm) .tp-card { animation: serve .8s var(--ease) .15s both; }
@keyframes serve { from { opacity: 0; transform: translateY(24px); } }
html.js:not(.rm) .tp-card h1 em { animation: ink .9s var(--ease) .55s both; }
@keyframes ink { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* short laptops (720-760px tall): drop the fork mark, keep the note clear of the eyebrow */
@media (min-width: 1200px) and (max-height: 760px) { .tp-col { top: 14px; } .tp-card { padding-top: 24px; } .tp-mark { display: none; } .tp-ribbon { height: 40px; } .tp-note { top: 24px; left: 18px; font-size: 30px; } .tp-card .eyebrow { margin-top: 42px; } }
/* small laptops + landscape tablets: keep the side-by-side table, a slimmer card */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hero { height: clamp(640px, calc(100svh - var(--nav)), 900px); }
  .tp-img { object-position: 24% 50%; }
  .tp-col { right: var(--m); top: 20px; width: min(520px, 50vw); }
  .tp-card { padding: 24px 26px 22px; }
  h1 { font-size: 38px; }
  .tp-card .sub { font-size: 16px; }
  .tp-card .pc .ca { font-size: 14px; }
  .tp-mark, .tp-wn { display: none; }
  .tp-ribbon { height: 40px; right: 48px; }
  .tp-note { top: 24px; left: 18px; font-size: 30px; }
  .tp-card .eyebrow { margin-top: 42px; }
}
/* stacked: photo on top, the card overlapping it */
@media (max-width: 999px) {
  .hero { height: auto; overflow: visible; }
  .tp-photo { position: relative; height: clamp(300px, 40svh, 460px); }
  .tp-img { object-position: 32% 40%; }
  .tp-shade { background: linear-gradient(0deg, var(--velvet) 0, rgba(27, 10, 13, 0) 140px); }
  .tp-col { position: relative; right: auto; top: auto; margin: -48px auto 0; width: min(600px, calc(100% - 2 * var(--m))); }
  .tp-wn { position: static; margin: 22px var(--m) 8px; max-width: none; justify-content: center; text-shadow: none; }
}
@media (max-width: 699px) {
  .tp-photo { height: clamp(190px, 34svh, 300px); min-height: 0; }
  .tp-img { transform: scale(1.3); transform-origin: 35% 33%; object-position: 30% 35%; }
  .tp-col { margin-top: -28px; width: calc(100% - 32px); }
  /* the CA + Buy come before the paragraph on screen (DOM order unchanged) */
  .tp-card { display: flex; flex-direction: column; padding: 18px 18px 18px; }
  .tp-card .sub { order: 1; margin-top: 14px; }
  .tp-read { order: 2; }
  .tp-note { position: static; display: block; margin: 0 0 4px auto; width: max-content; font-size: 28px; transform: rotate(-5deg); }
  .tp-mark { display: none; }
  h1 { font-size: clamp(27px, 8.1vw, 31px); }
  .tp-card .sub { font-size: 15.5px; line-height: 1.45; }
  .tp-cta .pill { flex: 1 1 calc(50% - 5px); height: 52px; padding: 0 12px; }
  .tp-cta .pill.blue { height: 44px; }
  .tp-read { font-size: 12px; letter-spacing: .06em; }
}
.hero.paused, .hero.paused * { animation-play-state: paused !important; }
@media (max-width: 699px) {
  .top .pill.sm { padding: 0 12px; gap: 6px; }
  .brand b { font-size: 17px; }
  .tp-ribbon { display: none; }
  .tp-cta { gap: 8px; }
  .tp-cta .pill { padding: 0 10px; font-size: 16px; }
  .tp-cta .pill.buy { flex: 2 1 auto; }
  .tp-cta .pill.ink { flex: 1 1 auto; }
  .tp-cta .pill.blue { flex: 0 1 auto; padding: 0 6px; }
}

/* ==== s01-02.css ==== */
/* Part A — #menu (the open two-panel tasting menu, pencil ticks) + #evening (three scenes, photos served from the left).
   Prefixes mn- / ev-. Motion only under html.js:not(.rm); under rm every tick and line is drawn and every photo is in place. */

/* ================= #menu ================= */
.mn { overflow-x: clip; }
.mn .wrap { position: relative; }
.mn-pool { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(64% 50% at 50% 58%, rgba(243, 180, 76, .34), rgba(235, 160, 80, .14) 44%, rgba(235, 160, 80, .04) 66%, rgba(235, 160, 80, 0) 84%),
    radial-gradient(34% 18% at 50% 100%, rgba(18, 6, 10, .75), rgba(18, 6, 10, 0)); }
.mn-sh { text-align: center; display: grid; justify-items: center; }
.mn-sh .intro { max-width: 31em; text-wrap: balance; }

/* the open menu: two linen panels, a centre fold, the blue silk ribbon lying in it */
.mn-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1120px; margin: 64px auto 0; border-radius: 3px;
  box-shadow: 0 2px 0 #CFC4B1, 0 3px 0 #B9AD98, 0 46px 80px -24px rgba(0, 0, 0, .78), 0 18px 34px rgba(0, 0, 0, .34); }
.mn-pg { position: relative; display: flex; flex-direction: column; padding: 64px 62px 56px; color: var(--ink); --ring: var(--suit);
  background-color: var(--linen); background-size: auto, auto, 256px 256px; background-repeat: no-repeat, no-repeat, repeat; }
.mn-pl { border-radius: 3px 0 0 3px;
  background-image: linear-gradient(270deg, rgba(74, 52, 30, .2), rgba(74, 52, 30, .07) 26px, rgba(74, 52, 30, 0) 84px),
    radial-gradient(90% 60% at 18% 0%, rgba(243, 180, 76, .13), rgba(243, 180, 76, 0) 70%), url(/img/linen-tile.webp); }
.mn-pr { border-radius: 0 3px 3px 0;
  background-image: linear-gradient(90deg, rgba(74, 52, 30, .17), rgba(74, 52, 30, .06) 22px, rgba(74, 52, 30, 0) 72px),
    linear-gradient(270deg, rgba(60, 34, 24, .07), rgba(60, 34, 24, 0) 40%), url(/img/linen-tile.webp); }
/* the printed frame: a fine double rule in suit ink */
.mn-pg::after { content: ''; position: absolute; inset: 18px; border: 3px double rgba(31, 74, 160, .34); pointer-events: none; }
.mn-pl::after { right: 26px; }
.mn-pr::after { left: 26px; }

.mn-rib { position: absolute; z-index: 2; left: 50%; top: -8px; bottom: 0; width: 8px; margin-left: -4px; border-radius: 2px 2px 0 0;
  background-image: linear-gradient(90deg, #183C86, #2452A8 45%, #1D4597 70%, #163680);
  box-shadow: 1px 0 2px rgba(27, 34, 56, .3); }
.mn-rib i { position: absolute; left: 0; top: 100%; width: 100%; height: 64px; transform-origin: 50% 0;
  background-image: linear-gradient(90deg, #183C86, #2452A8 45%, #1D4597 70%, #163680);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.mn-rib i::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(10, 10, 30, .35), rgba(10, 10, 30, 0) 18px); }

/* head of the left panel */
.mn-head { display: grid; justify-items: center; text-align: center; margin-bottom: 38px; }
.mn-mark { width: 30px; height: 30px; color: var(--suit); stroke-width: 1.6; }
.mn-title { margin-top: 10px; font: italic 500 40px/1.1 var(--serif); color: var(--suit); letter-spacing: -.005em; }
.mn-table { margin-top: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .18em; color: var(--suit); }
.mn-orn { position: relative; display: block; width: 132px; height: 9px; margin-top: 18px;
  background-image: linear-gradient(90deg, rgba(31, 74, 160, 0), rgba(31, 74, 160, .6) 30%, rgba(31, 74, 160, .6) 70%, rgba(31, 74, 160, 0));
  background-size: 100% 1px; background-position: 0 50%; background-repeat: no-repeat; }
.mn-orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transform: rotate(45deg);
  background-color: var(--linen); box-shadow: inset 0 0 0 1.5px var(--suit); }

/* one course */
.mn-list { display: grid; gap: 30px; }
.mn-n { display: flex; align-items: flex-end; gap: 10px; min-height: 18px; font: 500 13px/1.35 var(--mono); letter-spacing: .14em; color: var(--suit); }
.mn-nm { flex: 0 1 auto; }
.mn-dots { flex: 1 1 24px; min-width: 24px; margin-bottom: 5px; background-image: radial-gradient(circle, rgba(31, 74, 160, .55) 1px, transparent 1.4px);
  background-size: 6px 3px; background-repeat: repeat-x; background-position: 0 50%; height: 3px; }
.mn-tk { flex: none; width: 30px; height: 26px; margin: -10px -4px -2px 0; color: var(--suit); overflow: visible; stroke-width: 1.7;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.mn-tk path { opacity: .9; }
.mn-tk .mn-tk2 { stroke-width: 1; opacity: .42; }
.mn-d { margin-top: 7px; font: italic 500 20px/1.35 var(--serif); color: var(--ink); text-wrap: balance; }
.mn-l { margin-top: 5px; font: 400 15.5px/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.mn-go { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; font-weight: 600; color: var(--suit);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; vertical-align: middle; }
.mn-go:hover { text-decoration-thickness: 2.5px; }

/* the course that is not on the menu */
.mn-x { margin-top: 34px; padding-top: 26px; border-top: 1px dashed rgba(31, 74, 160, .3); }
.mn-x .mn-n { color: var(--ink-2); }
.mn-xs { position: relative; display: inline-block; }
.mn-xs s { text-decoration: none; }
.mn-strike { position: absolute; left: -6px; top: 50%; width: calc(100% + 16px); height: 16px; margin-top: -9px; color: var(--suit);
  overflow: visible; stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mn-strike path { opacity: .92; }
.mn-strike .mn-tk2 { stroke-width: 1.2; opacity: .5; }
.mn-x .mn-l { font-style: italic; }

/* foot of the right panel */
.mn-foot { margin-top: auto; padding-top: 34px; display: grid; justify-items: center; text-align: center; }
.mn-foot .mn-orn { margin: 0 0 18px; }
.mn-milk { font: italic 500 19px/1.4 var(--serif); color: var(--ink); text-wrap: balance; }
.mn-fine { margin-top: 10px; font: 500 12px/1.6 var(--mono); letter-spacing: .14em; color: var(--suit); }
.mn-fine span { display: inline-block; }

/* motion: ticks and the strike draw in at mid-screen (scroll-driven; IntersectionObserver fallback in s01-02.js) */
html.js:not(.rm) .mn-tk, html.js:not(.rm) .mn-strike { stroke-dashoffset: 1; }
@supports (animation-timeline: view()) {
  html.js:not(.rm) .mn-tk { animation: mn-draw linear both; animation-timeline: view(); animation-range: cover 28% cover 50%; }
  html.js:not(.rm) .mn-strike { animation: mn-draw linear both; animation-timeline: view(); animation-range: cover 30% cover 52%; }
}
html.js:not(.rm) .mn-io .mn-tk, html.js:not(.rm) .mn-io .mn-strike { transition: stroke-dashoffset .7s var(--ease); }
html.js:not(.rm) .mn-io .mn-in .mn-tk, html.js:not(.rm) .mn-io .mn-in .mn-strike { stroke-dashoffset: 0; }
@keyframes mn-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* loops (only while on screen, tab visible): the candle pool breathes, the ribbon tail sways */
html.js:not(.rm) .mn.mn-on .mn-pool { animation: mn-flick 2.7s steps(1, end) infinite, mn-breathe 5.4s ease-in-out infinite alternate; }
html.js:not(.rm) .mn.mn-on .mn-rib i { animation: mn-sway 5s ease-in-out infinite alternate; }
@keyframes mn-flick { 0% { opacity: 1; } 18% { opacity: .9; } 22% { opacity: 1; } 47% { opacity: .94; } 53% { opacity: .86; } 58% { opacity: 1; } 81% { opacity: .92; } }
@keyframes mn-breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes mn-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ================= #evening ================= */
.ev { overflow-x: clip; }
.ev-sh { max-width: 760px; }
.ev-list { display: grid; gap: 128px; margin-top: 72px; }
.ev-s { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.ev-ph { position: relative; grid-row: 1; grid-column: 1 / span 7; aspect-ratio: 4 / 3; background-color: var(--velvet-2);
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .8), 0 10px 24px rgba(0, 0, 0, .3); }
.ev-ph { isolation: isolate; }
.ev-ph img { width: 100%; height: 100%; object-fit: cover; }
/* the candle in each photo spills a little warm light onto the velvet around it */
.ev-ph::before { content: ''; position: absolute; z-index: -1; left: var(--cx); top: var(--cy); width: 560px; height: 420px; margin: -210px 0 0 -280px; pointer-events: none;
  background-image: radial-gradient(closest-side, rgba(243, 180, 76, .22), rgba(243, 180, 76, .08) 50%, rgba(243, 180, 76, 0)); }
.ev-ph::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(199, 204, 211, .78); pointer-events: none; }
.ev-a img { object-position: 50% 24%; }
.ev-b img { object-position: 46% 50%; }
.ev-c img { object-position: 50% 40%; }
.ev-a .ev-ph { --cx: 2%; --cy: 84%; }
.ev-b .ev-ph { --cx: 12%; --cy: 64%; }
.ev-c .ev-ph { --cx: 2%; --cy: 88%; }
.ev-card { position: relative; z-index: 1; grid-row: 1; grid-column: 7 / span 4; margin-bottom: -64px; padding: 38px 36px 32px; border-radius: 3px; color: var(--ink); --ring: var(--suit);
  background-color: var(--linen); background-image: radial-gradient(120% 80% at 0% 0%, rgba(243, 180, 76, .1), rgba(243, 180, 76, 0) 60%), url(/img/linen-tile.webp);
  background-size: auto, 256px 256px; box-shadow: 0 2px 0 #CFC4B1, 0 30px 60px -12px rgba(0, 0, 0, .65), 0 10px 20px rgba(0, 0, 0, .3); }
.ev-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(31, 74, 160, .26); pointer-events: none; }
.ev-s:nth-child(even) .ev-ph { grid-column: 6 / span 7; }
.ev-s:nth-child(even) .ev-card { grid-column: 3 / span 4; }
.ev-tag { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; color: var(--suit); }
.ev-card h3 { margin-top: 14px; font-size: clamp(25px, 2.15vw, 31px); line-height: 1.16; color: var(--ink); }
.ev-txt { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ev-card .wn { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(27, 34, 56, .14); color: var(--ink); text-wrap: balance; }
.ev-card .wn .ic { color: var(--suit); opacity: 1; }

/* served from the left: every photo slides in from the left; its card follows */
html.js:not(.rm) .ev-ph { opacity: 0; transform: translateX(-48px); transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease-out; }
html.js:not(.rm) .ev-card { opacity: 0; transform: translateY(16px); transition: transform .6s .2s var(--ease), opacity .5s .2s ease-out; }
html.js:not(.rm) .ev-in .ev-ph, html.js:not(.rm) .ev-in .ev-card { opacity: 1; transform: none; }

/* ================= responsive ================= */
/* wide screens: the frames step 4:3 -> 3:2 -> 1:1, so the soup photo shows whole and the square noodle photo keeps
   the ear tips and the bowl (scene III is an odd row: photo on the left, card on the right) */
@media (min-width: 1100px) {
  .ev-b .ev-ph { aspect-ratio: 3 / 2; }
  .ev-c .ev-ph { grid-column: 1 / span 6; aspect-ratio: 1 / 1; }
  .ev-c .ev-card { grid-column: 6 / span 5; }
}
@media (max-width: 1099px) {
  .mn-pg { padding: 54px 42px 48px; }
  .mn-n { gap: 8px; letter-spacing: .1em; }
  .mn-dots { min-width: 10px; flex-basis: 10px; }
  .ev-ph { grid-column: 1 / span 8; }
  .ev-card { grid-column: 7 / span 6; }
  .ev-s:nth-child(even) .ev-ph { grid-column: 5 / span 8; }
  .ev-s:nth-child(even) .ev-card { grid-column: 1 / span 6; }
}
@media (max-width: 899px) {
  .mn-book { grid-template-columns: minmax(0, 1fr); max-width: 600px; }
  .mn-pl { border-radius: 3px 3px 0 0; padding-bottom: 46px;
    background-image: linear-gradient(0deg, rgba(74, 52, 30, .18), rgba(74, 52, 30, .06) 22px, rgba(74, 52, 30, 0) 70px),
      radial-gradient(90% 40% at 18% 0%, rgba(243, 180, 76, .13), rgba(243, 180, 76, 0) 70%), url(/img/linen-tile.webp); }
  .mn-pr { border-radius: 0 0 3px 3px; padding-top: 46px;
    background-image: linear-gradient(180deg, rgba(74, 52, 30, .15), rgba(74, 52, 30, .05) 20px, rgba(74, 52, 30, 0) 64px),
      linear-gradient(270deg, rgba(60, 34, 24, .06), rgba(60, 34, 24, 0) 40%), url(/img/linen-tile.webp); }
  .mn-pl::after { right: 18px; bottom: 26px; }
  .mn-pr::after { left: 18px; top: 26px; }
  /* in one column the fold is across the middle; the ribbon lies in it and its tail hangs off the right edge */
  .mn-rib { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 13px; margin: -6.5px -10px -6.5px 0; border-radius: 0;
    background-image: linear-gradient(180deg, #163A84, #2B5BBB 34%, #4B78D0 46%, #1F4AA0 62%, #153578);
    box-shadow: 0 2px 3px rgba(27, 34, 56, .25), 0 -1px 2px rgba(27, 34, 56, .18); }
  .mn-rib i { display: none; }
  .mn-rib { clip-path: polygon(0 -6px, 100% -6px, calc(100% - 7px) 50%, 100% calc(100% + 6px), 0 calc(100% + 6px)); }
}
@media (max-width: 699px) {
  .mn-book { margin-top: 44px; }
  .mn-pg { padding: 40px 24px 36px; }
  .mn-pg::after { inset: 12px; }
  .mn-pl::after { right: 12px; bottom: 20px; }
  .mn-pr::after { left: 12px; top: 20px; }
  .mn-head { margin-bottom: 30px; }
  .mn-title { font-size: 34px; }
  .mn-list { gap: 26px; }
  .mn-n { gap: 8px; font-size: 12px; letter-spacing: .07em; }
  .mn-dots { min-width: 10px; flex-basis: 10px; }
  .mn-d { font-size: 18.5px; }
  .mn-l { font-size: 15px; }
  .mn-milk { font-size: 17.5px; }
  .mn-rib { margin-right: -8px; }

  .ev-list { gap: 72px; margin-top: 48px; }
  .ev-s { grid-template-columns: minmax(0, 1fr); }
  .ev-ph, .ev-s:nth-child(even) .ev-ph { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; }
  .ev-s.ev-b .ev-ph { aspect-ratio: 3 / 2; }
  .ev-card, .ev-s:nth-child(even) .ev-card { grid-column: 1; grid-row: 2; margin: -36px 0 0 22px; padding: 30px 24px 24px; }
  .ev-s:nth-child(even) .ev-card { margin: -36px 22px 0 0; }
  .ev-ph::before { width: 360px; height: 300px; margin: -150px 0 0 -180px; }
  .ev-card h3 { font-size: 25px; }
  .ev-txt { font-size: 16px; }
}

/* ==== s03-04.css ==== */
/* PART B — V · CHEF'S TABLE (the toy: plate five tiny things, he eats them in one bite) + VI · THE SOMMELIER
   (arched window + the wine list). Prefixes ct- and sm-. Motion only under html.js:not(.rm). */

/* ===================== V · CHEF'S TABLE ===================== */
.ct { overflow-x: clip; }
.ct-pool { position: absolute; left: 50%; top: 260px; width: 1300px; height: 1000px; margin-left: -650px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(243, 180, 76, .15), rgba(243, 180, 76, .05) 52%, rgba(243, 180, 76, 0)); }
.ct-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ct .wrap { position: relative; }
.ct-game { display: grid; grid-template-columns: minmax(0, 640px) minmax(320px, 480px); gap: 64px; align-items: start; margin-top: 56px; }

/* the stage: chef-wait + chef-gulp stacked, the pencil sketch, the sprites */
.ct-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background-color: #140709; --ring: var(--silver);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M30 2 8.2 19.8 3 29M30 2 13.2 24.6 3 29' fill='none' stroke='%231B2238' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 2 8.2 19.8 3 29M30 2 13.2 24.6 3 29' fill='none' stroke='%23E4E8EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 3 29, crosshair;
  box-shadow: 0 0 0 1px rgba(199, 204, 211, .3), 0 44px 90px rgba(0, 0, 0, .55), 0 0 120px rgba(243, 180, 76, .07); }
.ct-stage::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(199, 204, 211, .42); border-radius: 3px; pointer-events: none; }
.ct-scene { position: absolute; inset: 0; transform-origin: 51.4% 84.1%; scale: calc(1 + var(--lean, 0) * .01); }
html.js:not(.rm) .ct-scene { transition: scale .4s var(--ease); }
.ct-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-touch-callout: none; }
.ct-gulp { opacity: 0; }
.ct.ct-eat .ct-gulp { opacity: 1; }
html.js:not(.rm) .ct-gulp { transition: opacity .18s linear; }

/* the chef's pencil sketch (suit-blue dotted rings) */
.ct-sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; --sw: 3.4; }
.ct-guide { fill: none; stroke: var(--suit); stroke-width: var(--sw); stroke-dasharray: .1 9; stroke-linecap: round; opacity: .5; }
.ct-ring { fill: rgba(31, 74, 160, .07); stroke: var(--suit); stroke-width: var(--sw); stroke-dasharray: .1 6.2; stroke-linecap: round; }
.ct-dot { fill: var(--suit); opacity: .75; }
.ct.ct-eat .ct-sketch { opacity: 0; }
html.js:not(.rm) .ct-sketch { transition: opacity .3s; }

/* tiny things (hand-made SVG; size = % of the stage, scale 0.8 at the back to 1.1 at the front) */
.ct-sprites { position: absolute; inset: 0; pointer-events: none; }
.ct-sp, .ct-ghost { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 1%); height: auto; aspect-ratio: 1 / 1; overflow: visible; translate: -50% -72.5%; pointer-events: none; }
html.js:not(.rm) .ct-sp { animation: ct-drop .12s var(--ease) both; }
@keyframes ct-drop { from { transform: translateY(-38%) scale(1.22); opacity: .5; } }
.ct-ghost { opacity: 0; }
.ct-stage.ct-hov .ct-ghost { opacity: .6; }
.ct.ct-done .ct-ghost { display: none; }

/* keyboard tweezers (shows only with keyboard focus) */
.ct-kb { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 7%; aspect-ratio: 1 / 1; translate: -9.4% -90.6%; opacity: 0; pointer-events: none; }
.ct-kb svg { width: 100%; height: 100%; overflow: visible; }
.ct-stage:focus-visible .ct-kb { opacity: 1; }
.ct.ct-done .ct-kb { opacity: 0; }

/* attract: a pecking tweezers + "Tap the plate" (pauses off screen) */
.ct-attract { position: absolute; left: 51.4%; top: 66%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 12px; border-radius: 999px;
  background-color: rgba(27, 10, 13, .88); color: var(--linen); font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(199, 204, 211, .35), 0 10px 24px rgba(0, 0, 0, .4); }
.ct-twz { width: 24px; height: 24px; overflow: visible; }
.ct-ar { font: 600 14px/1 var(--sans); letter-spacing: 0; }   /* the mono face has no arrow glyph */
.ct.ct-go .ct-attract { opacity: 0; visibility: hidden; }
.ct-attract.ct-nudge, .ct.ct-go .ct-attract.ct-nudge { opacity: 1; visibility: visible; background-color: var(--suit); }
.ct.ct-fast .ct-stage *, .ct.ct-fast .ct-card, .ct.ct-fast .ct-card * { transition: none !important; animation: none !important; }
html.js:not(.rm) .ct-attract { transition: opacity .25s, visibility .25s, background-color .2s; }
html.js:not(.rm) .ct-twz { animation: ct-peck 1.5s var(--ease) infinite; }
html.js:not(.rm) .ct-attract.ct-nudge { animation: ct-nudge .4s var(--ease) 1; }
.ct.ct-off .ct-twz, .ct.ct-hid .ct-twz { animation-play-state: paused; }
@keyframes ct-peck { 0%, 55%, 100% { transform: none; } 25% { transform: translate(-3px, 5px); } }
@keyframes ct-nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

/* the payoff: SERVICE! -> gulp -> CHOMP. */
.ct-service { position: absolute; left: 6%; top: 6%; display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 3px; background-color: var(--linen-2); color: var(--ink);
  font: 700 15px/1 var(--mono); letter-spacing: .2em; rotate: -3deg; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(31, 74, 160, .25), 0 12px 26px rgba(0, 0, 0, .45); }
.ct-service .ic { width: 20px; height: 20px; color: var(--cape); }
html.js:not(.rm) .ct-service:not([hidden]) { animation: ct-call .3s var(--ease) both; }
@keyframes ct-call { from { transform: translateY(-18px) scale(.9); opacity: 0; } }
.ct-chomp { position: absolute; left: 51.4%; top: 84%; translate: -50% -55%; font: italic 500 64px/1 var(--serif); color: var(--cape); letter-spacing: -.01em; white-space: nowrap; rotate: -4deg; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 253, 248, .8); }
html.js:not(.rm) .ct-chomp:not([hidden]) { animation: ct-chomp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ct-chomp { from { transform: scale(.35); opacity: 0; } }

.ct-hint { margin-top: 16px; text-align: center; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--mute); text-wrap: balance; }

/* the order card + the result card (linen menu paper, blind-emboss frame) */
.ct-card { position: relative; padding: 34px 36px 32px; border-radius: 4px; background-color: var(--linen); background-image: url(/img/linen-tile.webp); background-size: 256px 256px; color: var(--ink); --ring: var(--suit);
  box-shadow: inset 0 0 0 10px var(--linen), inset 0 0 0 11px rgba(31, 74, 160, .28), 0 30px 60px rgba(0, 0, 0, .45); }
.ct-k { font: 500 12px/1.35 var(--mono); letter-spacing: .16em; color: var(--suit); }
.ct-sk { margin-top: 10px; font: italic 500 27px/1.2 var(--serif); color: var(--ink); }
.ct-sk span { color: var(--suit); }
.ct-items { margin-top: 18px; border-top: 3px double rgba(31, 74, 160, .3); }
.ct-items li { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) 24px; align-items: center; gap: 0 8px; min-height: 48px; border-bottom: 1px solid rgba(27, 34, 56, .12); }
.ct-rn { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--suit); }
.ct-ii { width: 34px; height: 34px; overflow: visible; }
.ct-in { font: italic 500 19px/1.25 var(--serif); color: var(--ink); }
.ct-tk { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; clip-path: inset(0 100% 0 0); }
.ct-items li.ct-got .ct-tk { clip-path: inset(0); }
.ct-items li.ct-got .ct-in { color: var(--ink-2); }
.ct-items li.ct-now { background-image: linear-gradient(90deg, rgba(31, 74, 160, .08), rgba(31, 74, 160, 0)); }
.ct-items li.ct-now .ct-rn { color: var(--cape); }
html.js:not(.rm) .ct-tk { transition: clip-path .35s var(--ease); }
.ct-next { margin-top: 18px; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.ct-next b { font-weight: 600; color: var(--cape); }
.ct-kbd { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ct-over { margin-top: 18px; }

.ct-times { margin-top: 12px; font: 500 28px/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
.ct-verdict { margin-top: 12px; font: italic 500 20px/1.45 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.ct-naps { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 12px 0; border-top: 3px double rgba(31, 74, 160, .3); border-bottom: 1px solid rgba(27, 34, 56, .12); }
.ct-nl { font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--suit); }
.ct-nr { display: flex; gap: 6px; }
.ct-np { width: 42px; height: 42px; fill: none; stroke: rgba(27, 34, 56, .28); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2.5 3; }
.ct-np.on { fill: var(--card); stroke: var(--suit); stroke-dasharray: none; filter: drop-shadow(0 2px 2px rgba(27, 34, 56, .18)); }
html.js:not(.rm) .ct-result:not([hidden]) .ct-np.on { animation: ct-nap .4s var(--ease) both; }
html.js:not(.rm) .ct-result:not([hidden]) .ct-np.on:nth-child(2) { animation-delay: .12s; }
html.js:not(.rm) .ct-result:not([hidden]) .ct-np.on:nth-child(3) { animation-delay: .24s; }
@keyframes ct-nap { from { transform: translateY(8px) rotate(-8deg); opacity: 0; } }
.ct-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ct-btns .pill { padding: 0 20px; }
.ct-btns .ct-more { padding: 0 16px; }
html.js:not(.rm) .ct-result:not([hidden]) { animation: ct-serve .45s var(--ease) both; }
@keyframes ct-serve { from { transform: translateY(14px); opacity: 0; } }

/* "Press and hold to save" overlay (in-app browsers) — appended to body */
.ct-ov { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background-color: rgba(10, 4, 6, .86); }
.ct-ovb { width: min(720px, 100%); text-align: center; color: var(--linen); }
.ct-ovi { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.ct-ovt { margin: 16px 0 14px; font: italic 500 20px/1.3 var(--serif); }
html.ct-lock, html.ct-lock body { overflow: hidden; }

@media (max-width: 1099px) {
  .ct-game { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 32px; }
  .ct-card { padding: 28px 28px 26px; }
}
@media (max-width: 899px) {
  .ct-game { grid-template-columns: minmax(0, 640px); justify-content: center; gap: 28px; margin-top: 44px; }
}
@media (max-width: 699px) {
  .ct-pool { top: 300px; width: 900px; margin-left: -450px; height: 900px; }
  .ct-game { margin-top: 36px; gap: 22px; }
  .ct-stage { margin: 0 calc(var(--m) * -1); border-radius: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
  .ct-stage::after { inset: 8px; }
  .ct-sketch { --sw: 5; }
  .ct-attract { top: 63%; padding: 8px 14px 8px 10px; }
  .ct-service { font-size: 13px; padding: 9px 14px 9px 11px; left: 5%; top: 5%; }
  .ct-chomp { font-size: 42px; }
  .ct-hint { margin-top: 12px; letter-spacing: .08em; }
  .ct-card { padding: 24px 22px 24px; }
  .ct-sk { font-size: 24px; }
  .ct-times { font-size: 24px; }
  .ct-verdict { font-size: 18px; }
  .ct-btns .pill { flex: 1 1 auto; }
}
/* short landscape screens (phones on their side): shrink the square stage so his face and the plate fit on one screen */
@media (min-width: 700px) and (max-height: 500px) {
  .ct-stage { width: min(100%, calc(100vh - var(--nav) - 24px)); width: min(100%, calc(100svh - var(--nav) - 24px)); margin-inline: auto; }
}

/* ===================== VI · THE SOMMELIER ===================== */
.sm-sec { padding: 144px 0; }
.sm-sec::before, .sm-sec::after { content: ''; position: absolute; left: 0; right: 0; height: 24px; background-color: var(--velvet); }
.sm-sec::before { top: 0; box-shadow: 0 1px 0 rgba(199, 204, 211, .5), 0 6px 14px rgba(27, 10, 13, .18); }
.sm-sec::after { bottom: 0; box-shadow: 0 -1px 0 rgba(199, 204, 211, .5), 0 -6px 14px rgba(27, 10, 13, .18); }
.sm-sec h2 em { color: var(--suit); }
.sm-row { margin-top: 64px; align-items: start; }
.sm-arch { grid-column: 1 / span 5; grid-row: 1; position: relative; padding: 0 10px; }
.sm-arch::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -26px; height: 16px; border-radius: 2px; background-color: var(--velvet-2);
  box-shadow: inset 0 1px 0 rgba(199, 204, 211, .35), 0 14px 26px rgba(27, 10, 13, .3); }
.sm-win { position: relative; display: block; aspect-ratio: 5 / 7.6; border-radius: 999px 999px 0 0; overflow: hidden; background-color: var(--velvet-2);
  box-shadow: 0 0 0 10px var(--velvet-2), 0 0 0 11px rgba(199, 204, 211, .55), 0 40px 70px rgba(27, 10, 13, .35); }
.sm-win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.sm-win::after { content: ''; position: absolute; inset: 12px; border: 1.5px solid rgba(199, 204, 211, .8); border-radius: 999px 999px 0 0; border-bottom: 0; pointer-events: none; }
.sm-list { grid-column: 5 / span 7; grid-row: 1; position: relative; z-index: 1; margin-top: 112px; padding: 54px 60px 46px; border-radius: 3px; background-color: var(--card); color: var(--ink); --ring: var(--suit);
  box-shadow: 0 0 0 1px #E2DACB, 0 34px 70px rgba(27, 34, 56, .22), 0 6px 14px rgba(27, 34, 56, .08); }
.sm-list::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(31, 74, 160, .24); border-radius: 2px; pointer-events: none; }
.sm-title { font: italic 500 40px/1.1 var(--serif); color: var(--suit); text-align: center; }
.sm-none { margin-top: 12px; font: 500 12px/1.35 var(--mono); letter-spacing: .2em; color: var(--cape); text-align: center; }
.sm-wines { margin-top: 28px; border-top: 3px double rgba(31, 74, 160, .3); }
.sm-wines li { padding: 22px 0 20px; border-bottom: 1px solid rgba(27, 34, 56, .12); }
.sm-n { font: 500 26px/1.2 var(--serif); color: var(--ink); }
.sm-v { margin-top: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; color: var(--suit); }
.sm-t { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sm-t a { color: var(--suit); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sm-pick { position: relative; display: inline-block; }
.sm-loop { position: absolute; left: -20px; top: -13px; width: calc(100% + 44px); max-width: none; height: calc(100% + 19px); overflow: visible; fill: none; stroke: var(--suit); stroke-width: 1.8; stroke-linecap: round; opacity: .8; pointer-events: none; }
html.js:not(.rm) .sm-loop { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .2s; }
html.js:not(.rm) .sm-on .sm-loop { clip-path: inset(0 -10% 0 0); }
.sm-note { margin-top: 30px; text-align: center; }
.sm-q { font: italic 500 20px/1.45 var(--serif); color: var(--ink); text-wrap: balance; }
.sm-sig { margin-top: 12px; font-size: 40px; color: var(--suit); rotate: -3deg; }
.sm-count { margin-top: 16px; font: 500 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--ink-2); text-wrap: balance; }

@media (max-width: 1099px) {
  .sm-arch { grid-column: 1 / span 5; }
  .sm-list { grid-column: 5 / span 8; margin-top: 96px; padding: 44px 40px 38px; }
}
/* tablets in portrait: the arch stands centred and the wine list overlaps its sill, like on the phone */
@media (min-width: 700px) and (max-width: 899px) {
  .sm-arch { grid-column: 3 / span 8; }
  .sm-list { grid-column: 2 / span 10; grid-row: 2; margin-top: -64px; }
}
@media (max-width: 699px) {
  .sm-sec { padding: 108px 0; }
  .sm-row { margin-top: 44px; gap: 0; }
  .sm-arch { grid-row: 1; padding: 0 26px; }
  .sm-arch::after { left: 14px; right: 14px; bottom: -14px; }
  .sm-list { grid-row: 2; margin: -56px 0 0; padding: 40px 24px 32px; }
  .sm-title { font-size: 34px; }
  .sm-n { font-size: 23px; }
  .sm-t { font-size: 16px; }
  .sm-q { font-size: 18px; }
  .sm-count { letter-spacing: 0; }
  .sm-win { aspect-ratio: 5 / 7; }
}
/* touch phones have no keyboard: hide the key hint (aria-describedby still reads it) */
@media (hover: none) and (pointer: coarse) { .ct-kbd { display: none; } }

/* ==== s05-06.css ==== */
/* Part C — #terrace (VII: the main course over the city; a full-bleed photo that drifts 3%, a candle glow placed with
   NS.focal, a linen menu card with the roadmap) and #kitchen (VIII: four thermal tickets clipped onto a steel rail).
   Prefixes tr- and kt-. Motion only under html.js:not(.rm); under html.rm everything is hung, still and final. */

/* ================= #terrace ================= */
.tr { padding-top: 0; overflow-x: clip; }
.tr-ph { position: relative; aspect-ratio: 2 / 1; overflow: hidden; isolation: isolate; background-color: var(--velvet-0); }
/* the pan is 7% taller than the frame (never wider), so a 3% drift up or down never shows an edge */
.tr-pan { position: absolute; inset: -3.5% 0; }
html.js:not(.rm) .tr-pan { transform: translate3d(0, calc(var(--tr-p, 0) * 3%), 0); will-change: transform; }
.tr-img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 34%; }
/* the candle: a warm pool of light where the flame is (NS.focal sets --tr-gx / --tr-gy in px of the photo box) */
.tr-glow { position: absolute; left: var(--tr-gx, 38%); top: var(--tr-gy, 46%); width: clamp(220px, 26vw, 460px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(closest-side, rgba(255, 214, 140, .58), rgba(243, 180, 76, .25) 32%, rgba(243, 180, 76, .09) 60%, rgba(243, 180, 76, 0)); }
.tr-glow::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background-image: radial-gradient(closest-side, rgba(255, 236, 196, .55), rgba(255, 214, 140, 0)); }
.tr-pan:not(.tr-ld) .tr-glow { visibility: hidden; }
html.js:not(.rm) .tr-glow { animation: tr-flick 2.9s linear infinite; animation-play-state: paused; }
html.js:not(.rm) .tr-on .tr-glow { animation-play-state: running; }
@keyframes tr-flick {
  0% { opacity: .86; transform: translate(-50%, -50%) scale(1); }
  13% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  24% { opacity: .8; transform: translate(-50%, -50%) scale(.97); }
  41% { opacity: .95; transform: translate(-50%, -50%) scale(1.03); }
  58% { opacity: .84; transform: translate(-50%, -50%) scale(.99); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  88% { opacity: .9; transform: translate(-50%, -50%) scale(1.01); }
  100% { opacity: .86; transform: translate(-50%, -50%) scale(1); }
}
/* the photo melts into the velvet at the top and the bottom */
.tr-shade { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(180deg, var(--velvet) 0%, rgba(27, 10, 13, .55) 5%, rgba(27, 10, 13, 0) 16%, rgba(27, 10, 13, 0) 78%, rgba(27, 10, 13, .6) 94%, var(--velvet) 100%); }

/* the menu card: linen, a blue keyline, warm on the side that faces the candle */
.tr-wrap { position: relative; z-index: 1; }
.tr-card { position: relative; padding: 42px 38px 36px; border-radius: 3px; color: var(--ink); --em: var(--suit); --ring: var(--suit);
  background-color: var(--linen); background-image: radial-gradient(90% 60% at 100% 0%, rgba(243, 180, 76, .16), rgba(243, 180, 76, 0) 62%), url(/img/linen-tile.webp);
  background-size: auto, 256px 256px; box-shadow: 0 2px 0 #CFC4B1, 0 40px 80px -16px rgba(0, 0, 0, .75), 0 12px 24px rgba(0, 0, 0, .35); }
.tr-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(31, 74, 160, .26); pointer-events: none; }
.tr-card .eyebrow { color: var(--suit); }
.tr-card h2 { margin-top: 16px; font-size: clamp(32px, 2.7vw, 41px); line-height: 1.12; color: var(--ink); }
.tr-txt { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.tr-card .wn { margin-top: 18px; color: var(--ink); text-wrap: balance; }
.tr-card .wn .ic { color: var(--suit); opacity: 1; }

/* TOMORROW'S MENU: a ruled box printed in suit ink */
.tr-box { position: relative; margin-top: 28px; padding: 18px 20px 16px; border: 1.5px solid var(--suit); border-radius: 2px; background-color: rgba(255, 253, 248, .55); }
.tr-box::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(31, 74, 160, .3); pointer-events: none; }
.tr-bt { padding-bottom: 10px; border-bottom: 1.5px solid var(--suit); font: 500 12px/1.35 var(--mono); letter-spacing: .14em; color: var(--suit); }
.tr-list { counter-reset: tr; }
.tr-list li { counter-increment: tr; display: flex; align-items: baseline; gap: 14px; padding: 9px 0 8px; border-bottom: 1px solid rgba(27, 34, 56, .16);
  font: italic 500 19px/1.35 var(--serif); color: var(--ink); }
.tr-list li::before { content: counter(tr, upper-roman); flex: none; min-width: 26px; font: 500 12px/1 var(--mono); letter-spacing: .1em; font-style: normal; color: var(--suit); }
.tr-end { margin-top: 12px; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }

/* ================= #kitchen ================= */
.kt { overflow-x: clip; }
.kt-lamp { position: absolute; left: 50%; top: 220px; width: min(1500px, 130vw); height: 820px; transform: translateX(-50%); pointer-events: none;
  background-image: radial-gradient(48% 42% at 50% 34%, rgba(243, 180, 76, .14), rgba(243, 180, 76, .05) 55%, rgba(243, 180, 76, 0) 75%); }
.kt .wrap { position: relative; }
.kt-sh { max-width: 760px; }
.kt-row { position: relative; margin-top: 72px; }
.kt-rail { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 28px; align-items: start; padding: 0 26px; }
/* the steel rail and its two wall mounts */
.kt-rail::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 16px; border-radius: 3px;
  background-image: linear-gradient(180deg, #F4F6F9 0%, #D4D8DE 22%, #9CA3AD 50%, #C7CCD3 70%, #7B828C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 10px 18px rgba(0, 0, 0, .45); }
.kt-rail::after { content: ''; position: absolute; z-index: 1; left: 6px; right: 6px; top: -14px; height: 44px; pointer-events: none;
  background-image: linear-gradient(90deg, #6E747D, #C7CCD3 40%, #E8EBEF 55%, #8E959F), linear-gradient(90deg, #6E747D, #C7CCD3 40%, #E8EBEF 55%, #8E959F);
  background-size: 12px 44px; background-position: 0 0, 100% 0; background-repeat: no-repeat; }
.kt-t { position: relative; padding-top: 6px; }
.kt-1 { --kt-r: -1.4deg; --kt-s: 4deg; }
.kt-2 { --kt-r: .9deg; --kt-s: -4deg; }
.kt-3 { --kt-r: -.6deg; --kt-s: 4deg; }
.kt-4 { --kt-r: 1.1deg; --kt-s: -4deg; }
/* the clip on the rail (sits over the top of the paper) */
.kt-clip { position: absolute; z-index: 3; left: 50%; top: -9px; width: 46px; height: 34px; margin-left: -23px; border-radius: 6px 6px 9px 9px;
  background-image: radial-gradient(circle at 50% 66%, #5E646D 0 3.5px, rgba(94, 100, 109, 0) 4.5px), linear-gradient(180deg, #FAFBFC, #C7CCD3 38%, #A2A9B2 62%, #D9DDE2 82%, #858C96);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .22), 0 6px 10px rgba(0, 0, 0, .5); }
.kt-clip::after { content: ''; position: absolute; left: 7px; right: 7px; top: 9px; height: 2px; border-radius: 2px; background-color: rgba(70, 76, 85, .55); }
.kt-p { position: relative; z-index: 1; transform: rotate(var(--kt-r)); transform-origin: 50% 0; }
.kt-p::before { content: ''; position: absolute; z-index: -1; inset: 14px 6px 12px; box-shadow: 0 26px 36px -10px rgba(0, 0, 0, .7), 0 8px 14px rgba(0, 0, 0, .35); }
.kt-paper { position: relative; padding: 30px 22px 40px; color: var(--ink); --ring: var(--suit); background-color: var(--linen-2);
  background-image: linear-gradient(180deg, rgba(27, 34, 56, .16), rgba(27, 34, 56, 0) 30px), radial-gradient(120% 50% at 50% 0%, rgba(243, 180, 76, .12), rgba(243, 180, 76, 0) 70%); }
.kt-1 .kt-paper { padding-bottom: 66px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 96% calc(100% - 3px), 92.7% calc(100% - 3px), 89.1% calc(100% - 3px), 86.7% calc(100% - 1px), 81.8% calc(100% - 8px), 78.8% calc(100% - 4px), 76% calc(100% - 8px), 72.2% calc(100% - 9px), 68.6% calc(100% - 5px), 63.8% calc(100% - 4px), 59.7% calc(100% - 9px), 56.3% calc(100% - 1px), 52.1% calc(100% - 2px), 49.4% calc(100% - 3px), 47.1% calc(100% - 1px), 42.4% calc(100% - 5px), 38.8% calc(100% - 7px), 34.5% calc(100% - 7px), 31.1% calc(100% - 3px), 27.5% calc(100% - 3px), 22.7% calc(100% - 2px), 20.4% calc(100% - 8px), 17.5% calc(100% - 5px), 14% calc(100% - 5px), 9.3% calc(100% - 7px), 5.5% calc(100% - 7px), 1.6% calc(100% - 9px), 0 calc(100% - 6px)); }
.kt-2 .kt-paper { padding-bottom: 128px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 95% calc(100% - 7px), 90.8% calc(100% - 2px), 86.1% calc(100% - 2px), 82.8% calc(100% - 1px), 77.9% calc(100% - 4px), 75.6% calc(100% - 7px), 72.1% calc(100% - 4px), 69.7% calc(100% - 7px), 67.3% calc(100% - 3px), 64.7% calc(100% - 4px), 60.6% calc(100% - 3px), 55.6% calc(100% - 3px), 51.6% calc(100% - 1px), 46.5% calc(100% - 1px), 42.6% calc(100% - 3px), 39.6% calc(100% - 3px), 35.7% calc(100% - 3px), 32.6% calc(100% - 5px), 29.9% calc(100% - 3px), 26% calc(100% - 4px), 22.6% calc(100% - 9px), 18.3% calc(100% - 3px), 15.9% calc(100% - 4px), 12.2% calc(100% - 9px), 8.8% calc(100% - 6px), 5.2% calc(100% - 8px), 1.9% calc(100% - 4px), 0 calc(100% - 7px)); }
.kt-3 .kt-paper { padding-bottom: 74px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95.2% calc(100% - 8px), 91.6% calc(100% - 3px), 88.9% calc(100% - 9px), 85.3% calc(100% - 3px), 80.7% calc(100% - 2px), 77.1% calc(100% - 3px), 74.7% calc(100% - 5px), 72.3% calc(100% - 7px), 67.2% calc(100% - 5px), 62.8% calc(100% - 5px), 60.2% calc(100% - 1px), 55.5% calc(100% - 2px), 53.1% calc(100% - 4px), 48.2% calc(100% - 3px), 45.9% calc(100% - 8px), 42.8% calc(100% - 3px), 38% calc(100% - 9px), 35.1% calc(100% - 5px), 31.4% calc(100% - 5px), 29% calc(100% - 5px), 26% calc(100% - 9px), 20.8% calc(100% - 2px), 16.4% calc(100% - 6px), 12% calc(100% - 9px), 8.9% calc(100% - 2px), 5% calc(100% - 2px), 1.6% calc(100% - 5px), 0 calc(100% - 2px)); }
.kt-4 .kt-paper { padding-bottom: 46px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 97.7% calc(100% - 9px), 95.1% calc(100% - 4px), 91.7% calc(100% - 9px), 88.7% calc(100% - 3px), 84.7% calc(100% - 2px), 81.7% calc(100% - 6px), 76.6% calc(100% - 2px), 72.1% calc(100% - 5px), 69.8% calc(100% - 3px), 67% calc(100% - 2px), 62% calc(100% - 2px), 58.2% calc(100% - 7px), 53.4% calc(100% - 2px), 48.8% calc(100% - 7px), 46.5% calc(100% - 3px), 42.2% calc(100% - 7px), 38.6% calc(100% - 5px), 34.7% calc(100% - 9px), 30% calc(100% - 5px), 25% calc(100% - 4px), 20.4% calc(100% - 3px), 16.1% calc(100% - 4px), 12.7% calc(100% - 3px), 10.1% calc(100% - 8px), 7.6% calc(100% - 8px), 5.3% calc(100% - 8px), 0.4% calc(100% - 3px), 0 calc(100% - 5px)); }
/* a faded thermal barcode above the tear (tickets 01-03) */
.kt-1 .kt-paper::after, .kt-2 .kt-paper::after, .kt-3 .kt-paper::after { content: ''; position: absolute; left: 22px; bottom: 24px; width: 46%; height: 18px; opacity: .5;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, rgba(27, 34, 56, 0) 1px 3px), repeating-linear-gradient(90deg, var(--ink) 0 2px, rgba(27, 34, 56, 0) 2px 7px),
    repeating-linear-gradient(90deg, rgba(27, 34, 56, 0) 0 11px, var(--ink) 11px 14px, rgba(27, 34, 56, 0) 14px 17px); }
.kt-no { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1.5px dashed rgba(27, 34, 56, .4);
  font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.kt-no b { font: 700 30px/1 var(--mono); letter-spacing: .02em; color: var(--ink); }
.kt-h { margin-top: 18px; font: 500 20px/1.25 var(--mono); letter-spacing: .05em; color: var(--ink); }
.kt-txt { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.kt-mk { margin-top: 20px; padding-top: 16px; border-top: 1.5px dashed rgba(27, 34, 56, .4); }
.kt-mk img { box-sizing: content-box; width: 24px; height: 24px; padding: 10px; border-radius: 50%; background-color: var(--ink); }
/* ticket 03: a tiny RESERVED place card, like the one at the top */
.kt-pc { position: relative; display: inline-block; padding: 12px 14px 10px; border-radius: 3px; background-color: var(--card); color: var(--suit);
  font: 500 12px/1 var(--mono); letter-spacing: .16em; box-shadow: inset 0 4px 0 rgba(27, 34, 56, .06), 0 0 0 1px #D9D2C4, 0 6px 12px rgba(27, 34, 56, .18); }
/* ticket 04: the pass stamps it TABLE 1, in suit ink (the one mono label that stays 700) */
.kt-stamp { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 4px 4px; padding: 7px 12px 7px 10px; border: 3px solid currentColor; border-radius: 5px;
  outline: 1.5px solid currentColor; outline-offset: 3px; color: var(--suit); font: 700 17px/1 var(--mono); letter-spacing: .18em; transform: rotate(-7deg); opacity: .94;
  mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .8) 30%, #000 52%, rgba(0, 0, 0, .86) 78%, #000 100%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .8) 30%, #000 52%, rgba(0, 0, 0, .86) 78%, #000 100%); }
.kt-stamp .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.kt-buy { margin-top: 22px; padding-top: 18px; border-top: 1.5px dashed rgba(27, 34, 56, .4); }
.kt-buy .pill { width: 100%; padding: 0 12px; }
.kt-row:focus-visible { outline-offset: -4px; }
.kt-small { margin-top: 56px; font-size: 14px; line-height: 1.5; color: var(--mute); }

/* clipped on, one by one, when seen: drop 24px, swing, settle (JS adds .kt-on) */
html.js:not(.rm) .kt-t:not(.kt-on) .kt-p { opacity: 0; transform: translateY(-24px); }
html.js:not(.rm) .kt-on .kt-p { animation: kt-hang 1.05s var(--ease) both; }
html.js:not(.rm) .kt-on .kt-clip { animation: kt-snap .32s ease-out both; }
html.js:not(.rm) .kt-4:not(.kt-on) .kt-stamp { opacity: 0; }
html.js:not(.rm) .kt-4.kt-on .kt-stamp { animation: kt-stamp .42s cubic-bezier(.3, 1.5, .5, 1) .75s both; }
html.js:not(.rm) .kt-done .kt-p, html.js:not(.rm) .kt-done .kt-clip { animation: none; }
html.js:not(.rm) .kt-done:hover .kt-p, html.js:not(.rm) .kt-done:focus-within .kt-p { animation: kt-nudge .7s var(--ease) both; }
@keyframes kt-hang {
  0% { opacity: 0; transform: translateY(-24px) rotate(0deg); }
  28% { opacity: 1; transform: translateY(0) rotate(var(--kt-s)); }
  52% { transform: translateY(0) rotate(calc(var(--kt-s) * -.55)); }
  74% { transform: translateY(0) rotate(calc(var(--kt-s) * .25 + var(--kt-r) * .5)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--kt-r)); }
}
@keyframes kt-snap { 0% { transform: scaleY(.84); } 60% { transform: scaleY(1.06); } 100% { transform: none; } }
@keyframes kt-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(1.7); } 100% { opacity: .94; transform: rotate(-7deg) scale(1); } }
@keyframes kt-nudge {
  0% { transform: rotate(var(--kt-r)); }
  35% { transform: rotate(calc(var(--kt-r) + var(--kt-s) * .5)); }
  70% { transform: rotate(calc(var(--kt-r) - var(--kt-s) * .2)); }
  100% { transform: rotate(var(--kt-r)); }
}

/* ================= responsive ================= */
/* wide: the card stands in the empty left third of the photo (the candle and the shiba stay clear) and hangs below it */
@media (min-width: 1280px) {
  /* one grid cell for the photo and the card; the card is anchored to the photo's bottom and hangs 72px below it */
  .tr { --tr-w: clamp(390px, calc(33vw - 48px), 470px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 72px; padding-bottom: 96px; }
  .tr-ph { grid-area: 1 / 1 / 2 / 2; align-self: start; }
  .tr-wrap { grid-area: 1 / 1 / 3 / 2; align-self: end; width: 100%; max-width: none; padding: 0; }
  .tr-card { width: var(--tr-w); margin-left: max(var(--m), min(calc(50vw - 670px), calc(33vw - var(--tr-w)))); }
}
@media (max-width: 1279px) {
  .tr-ph { aspect-ratio: 16 / 9; }
  .tr-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; max-width: 960px; margin-top: -64px; }
  .tr-box { margin-top: 0; }
  .tr-bt { letter-spacing: .1em; }
}
@media (max-width: 1099px) {
  .kt-row { margin: 56px calc(-1 * var(--m)) 0; padding: 18px 0 40px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kt-row::-webkit-scrollbar { display: none; }
  .kt-rail { display: flex; gap: 22px; width: max-content; padding: 0 var(--m); }
  .kt-t { flex: none; width: 290px; scroll-snap-align: start; scroll-margin-left: var(--m); }
  .kt-4 { width: 318px; }
  .kt-small { margin-top: 24px; }
}
@media (max-width: 699px) {
  .tr-ph { aspect-ratio: 4 / 5; }
  .tr-img { object-position: 68% 50%; }
  .tr-glow { width: 300px; }
  .tr-card { display: block; margin-top: -40px; padding: 34px 26px 28px; }
  .tr-card h2 { font-size: 30px; }
  .tr-txt { font-size: 16px; }
  .tr-box { margin-top: 24px; padding: 16px 16px 14px; }
  .tr-list li { font-size: 18px; }
  .kt-row { margin-top: 44px; }
  .kt-rail { gap: 16px; }
  .kt-t, .kt-4 { width: min(300px, calc(100vw - 2 * var(--m) - 48px)); }
  .kt-paper { padding-left: 20px; padding-right: 20px; }
}

/* ==== s07-end.css ==== */
/* #later (second helpings + doggy bag) · #bill (thermal receipt + Ask the waiter) · footer — lead part. Prefixes: lt- bl- ft- */

/* #later */
.lt { padding-bottom: 0; overflow-x: clip; }
.lt-diner { position: relative; margin-top: 48px; width: min(100%, 893px); }
.lt-diner img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px rgba(199, 204, 211, .35), 0 30px 60px rgba(0, 0, 0, .5); }
.lt-diner figcaption { margin-top: 14px; max-width: 52%; color: var(--glow); }
.lt-plates { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 28px; margin: -96px 0 0 auto; width: min(100%, 760px); justify-content: flex-end; }
.lt-plates li { width: 220px; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center; }
.lt-plate { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background-color: #fff; box-shadow: 0 0 0 10px #F7F4EE, 0 0 0 11px rgba(0, 0, 0, .12), 0 22px 40px rgba(0, 0, 0, .5); }
.lt-plate img { width: 100%; height: 100%; object-fit: cover; }
.lt-plates p { font-size: 15px; color: var(--linen); }
.lt-rules { font: 500 12px/1.5 var(--mono) !important; letter-spacing: .06em; color: var(--mute) !important; }
/* wide: the header fills the empty column beside the diner photo (DOM order unchanged) */
@media (min-width: 1100px) {
  .lt > .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  .lt .sh { display: block; grid-column: 2; grid-row: 1; padding-bottom: 128px; }
  .lt .sh > .intro { margin: 18px 0 0; }
  .lt-diner { grid-column: 1; grid-row: 1; margin-top: 0; width: 100%; }
  .lt-plates { grid-column: 1 / -1; }
}
.lt-bag { margin-top: 110px; padding: 96px 0 104px; }
.lt-bag .eyebrow { margin-bottom: 12px; }
.lt-bag h3 em { color: var(--suit); }
/* the silver tray: specular bands so it reads as metal */
.lt-tray { margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 18px; padding: 40px 26px 30px; border-radius: 120px / 26px;
  background: linear-gradient(115deg, #9AA0A8 0%, #EEF0F3 16%, #B4BAC2 34%, #F6F7F9 52%, #A3A9B1 72%, #DCE0E4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 18px 36px rgba(27, 34, 56, .22); }
.lt-tray a { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
/* each picture sits in a fluted paper cup */
.lt-tray a::before { content: ''; position: absolute; z-index: -1; top: -14px; left: 50%; width: calc(min(100%, 120px) + 28px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: repeating-conic-gradient(#FFFDF8 0 5deg, #E6DCCB 5deg 10deg); box-shadow: 0 8px 16px rgba(27, 34, 56, .18); }
.lt-tray img { width: 100%; max-width: 120px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 5px rgba(27, 34, 56, .18); }
.lt-tray span { margin-top: 6px; font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-align: center; }
html.js:not(.rm) .lt-tray a { transition: transform .2s var(--ease); }
.lt-tray a:hover, .lt-tray a:focus-visible { transform: translateY(-4px); }
.lt-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* #bill */
.bl-grid { margin-top: 44px; align-items: start; }
.bl-tray { grid-column: 1 / span 5; padding: 26px 22px 30px; border-radius: 14px;
  background: linear-gradient(115deg, #9AA0A8 0%, #EEF0F3 16%, #B4BAC2 34%, #F6F7F9 52%, #A3A9B1 72%, #DCE0E4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 22px 44px rgba(0, 0, 0, .5); }
.bl-rcpt { position: relative; padding: 26px 24px 30px; background-color: var(--linen-2); color: var(--ink); font: 400 14px/1.5 var(--mono); --ring: var(--suit); }
.bl-rcpt::before, .bl-rcpt::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; background: linear-gradient(135deg, var(--linen-2) 50%, transparent 50%) 0 0 / 14px 9px repeat-x, linear-gradient(225deg, var(--linen-2) 50%, transparent 50%) 0 0 / 14px 9px repeat-x; }
.bl-rcpt::before { top: -9px; transform: rotate(180deg); }
.bl-rcpt::after { bottom: -9px; }
.bl-hd { font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-align: center; text-wrap: balance; padding-bottom: 12px; border-bottom: 1.5px dashed rgba(27, 34, 56, .4); }
.bl-rows { margin: 12px 0 0; padding-bottom: 12px; border-bottom: 1.5px dashed rgba(27, 34, 56, .4); }
.bl-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.bl-rows dt { color: var(--ink); }
.bl-rows dd { margin: 0; text-align: right; color: var(--ink-2); }
.bl-coin dd { color: var(--suit); font-weight: 700; }
.bl-rcpt .pc { margin: 16px 0 4px; width: 100%; }
.bl-total dt, .bl-total dd { font-weight: 700; color: var(--ink); }
.bl-sm { margin-top: 10px; font-size: 13px; color: var(--ink-2); text-align: center; }
.bl-ty { margin-top: 16px; font: 500 13px/1.3 var(--mono); letter-spacing: .14em; text-align: center; text-wrap: balance; color: var(--cape); }
html.js:not(.rm) .bl-rcpt.print { animation: print 1.4s steps(18) 1 both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
html.js:not(.rm) .bl-rcpt:not(.print):not(.done) { clip-path: inset(0 0 100% 0); }
.bl-waiter { grid-column: 7 / span 6; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bl-q[aria-expanded="true"] { background-color: var(--linen); color: var(--ink); }
.bl-answers { margin-top: 18px; display: grid; gap: 12px; }
.bl-a { justify-self: start; max-width: 34em; padding: 14px 18px; border-radius: 16px 16px 16px 4px; background-color: var(--linen); color: var(--ink); font: italic 500 17px/1.45 var(--serif); }
html.js .bl-a { display: none; }
html.js .bl-a.on, html.broken .bl-a { display: block; }
html.js:not(.rm) .bl-a.on { animation: bub .3s var(--ease) 1; }
@keyframes bub { from { opacity: 0; transform: translateY(8px); } }
/* the Buy on its own line, the five secondary links on one row below it */
.bl-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bl-links::before { content: ''; flex-basis: 100%; order: 1; margin-top: -10px; }
.bl-links > .buy { order: 0; }
.bl-links > :not(.buy) { order: 2; }

/* footer: an oversized wordmark closes the evening */
.foot { padding: 72px 0 48px; text-align: center; box-shadow: 0 -1px 0 rgba(199, 204, 211, .2); }
.ft-in { display: grid; justify-items: center; gap: 10px; }
.ft-mark { width: 36px; height: 36px; color: var(--glow); stroke-width: 1.6; }
.ft-word { font: 600 clamp(48px, 7vw, 104px)/1 var(--serif); letter-spacing: -.015em; }
.ft-word i { font-style: italic; font-weight: 500; color: var(--glow); }
.ft-note { margin-top: 4px; font-size: 48px; color: var(--glow); }
.ft-line { font: italic 500 18px/1.4 var(--serif); color: var(--linen); }
.ft-hours { margin-top: 4px; }
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; margin-top: 18px; }
.ft-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--mute); }
.ft-links a:hover { color: var(--linen); }
.ft-small { max-width: 700px; font-size: 14px; color: var(--mute); }
.ft-small:first-of-type { margin-top: 14px; }

@media (max-width: 1099px) {
  .bl-tray, .bl-waiter { grid-column: 1 / -1; }
  .lt-tray { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lt-plates { margin-top: 28px; justify-content: center; width: 100%; }
  .lt-diner figcaption { max-width: none; }
}
@media (max-width: 699px) {
  .lt-plates { gap: 22px 12px; }
  .lt-plates li { width: calc(50% - 6px); }
  .lt-plate { width: 112px; height: 112px; box-shadow: 0 0 0 6px #F7F4EE, 0 12px 24px rgba(0, 0, 0, .5); }
  .lt-plates p { font-size: 14px; }
  .lt-bag { margin-top: 72px; padding: 72px 0; }
  .lt-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 10px; padding: 26px 14px 22px; border-radius: 40px / 18px; }
  .lt-tray img { max-width: 72px; box-shadow: 0 0 0 3px #FFFDF8, 0 0 0 4px rgba(27, 34, 56, .2); }
  .lt-tray a::before { top: -8px; width: calc(min(100%, 72px) + 16px); }
  .lt-tray span { font-size: 11px; letter-spacing: .06em; }
  .lt-btns .pill { flex: 1 1 100%; }
  .bl-tray { padding: 16px 12px 20px; }
  .bl-rcpt { padding: 22px 16px 26px; font-size: 13px; }
  .bl-hd { font-size: 12px; letter-spacing: .04em; }
  .ft-note { font-size: 40px; }
}
/* 404 */
.e404 { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 18px; padding: 40px var(--m); max-width: 1000px; }
.e404 h1 { font: 500 clamp(34px, 4.6vw, 60px)/1.1 var(--serif); color: var(--linen); }
.e404 h1 em { display: block; font-style: italic; color: var(--glow); }
/* narrow phones: keep the header inside 360px */
@media (max-width: 389px) { .brand b { font-size: 15px; } .top { gap: 6px; } .top .pill.sm { padding: 0 10px; } }