/* ================= THE CONSUL'S TABLE — /table/ =================
   A night page: the whole room is dark, and each card is the dish itself.

   site.css paints with tokens (--cream is the ground, --ink the text), so
   this page turns them around once on <body> and every shared part — nav,
   hero, buttons, the folded menu, the MENU card — follows. */

:root{interpolate-size:allow-keywords}
.tb-page{
  --light:#FFF7EB;                 /* real cream, for text and marks on the dark */
  --bg:#140b06;--bg2:#1d120a;--felt:#2a1a0e;
  --cream:var(--bg);
  --sand:#23160c;--tan:#3a2716;
  --ink:#f3e6cf;--ink-70:rgba(243,230,207,.74);--ink-45:rgba(243,230,207,.5);--ink-20:rgba(243,230,207,.16);
  --paper:#fffaf1;--rong:#c8664c;--oxblood:#6e2219;
  --navh:72px;--cw:clamp(132px,38vw,190px);
  background:var(--bg);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the day tokens, for what stays light */
.tb-toast{--ink:#412612;--ink-70:rgba(65,38,18,.7);--ink-45:rgba(65,38,18,.45);--ink-20:rgba(65,38,18,.18);
  --cream:#FFF7EB;--sand:#f2ead9;--tan:#e9d2b3;--rong:#9a4630}

/* shared parts, at night */
.tb-page .nav::before{background:linear-gradient(to bottom,rgba(20,11,6,.94),rgba(20,11,6,.78) 70%,rgba(20,11,6,0))}
.tb-page .btn--gold:hover{background:var(--light);border-color:var(--light);color:#2a1a0e}
.tb-page .nav__menuPop{box-shadow:0 0 0 1px rgba(233,181,121,.25),0 24px 50px -18px rgba(0,0,0,.7);background:var(--bg2)}
.tb-page .footer{background:#0c0603;color:var(--light);border-top:1px solid rgba(233,181,121,.14)}
.tb-page .grain{opacity:.14}
.tb-page .xp-kicker,.tb-page .eyebrow{color:var(--gold)}
.tb-page .xp-title em,.tb-page .h-serif em{color:var(--gold)}
.tb-page .btm-notice{background:var(--light);color:#2a1a0e}
.tb-page .btm-notice__x{color:#2a1a0e;opacity:.65}
.tb-page .btm-notice__x:hover{color:var(--rong);opacity:1}

/* ---------------- hero ---------------- */
.tb-hero{padding-bottom:clamp(50px,8vh,90px)}
.tb-hero .arch{outline-color:rgba(233,181,121,.3)}
/* the menu's and the table's hero: three seconds of the kitchens on a loop,
   in a small arch on a phone so the page's work is never far below (the
   poster stays when motion is reduced, page.js) */
.tb-film{background:#140b06}
@media (max-width:880px){
  .xp-hero__media .arch.tb-film{width:min(250px,60vw);margin-top:12px;outline-offset:10px}
}

/* ---------------- the composer ---------------- */
.tb{padding:clamp(40px,7vh,80px) var(--pad) clamp(70px,11vh,130px);scroll-margin-top:70px}
.tb__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4.5vw,72px);align-items:start;max-width:1440px;margin:0 auto}
.tb__ask{display:flex;flex-direction:column;gap:6px;min-width:0}
.tb__ask .h-serif{font-size:clamp(32px,3.4vw,50px);margin-bottom:18px}

.tq{border:0;border-top:1px solid var(--ink-20);padding:24px 0 22px;min-width:0}
.tq__h{display:flex;align-items:center;gap:14px;margin-bottom:20px;font:500 14px var(--sans);letter-spacing:.3em;color:var(--ink)}
.tq__h i{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--gold);border-radius:50%;
  font:400 italic 12px/1 var(--serif);letter-spacing:0;color:var(--gold)}
.tq-note{margin-top:14px;min-height:1.5em;font:400 18px/1.5 var(--sans);color:var(--ink-70)}

/* I. guests: a round table seen from above, a seat for every guest */
.tq-guests{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 26px;align-items:center}
.tq-round{grid-row:1/3;width:clamp(112px,11vw,150px);height:auto;overflow:visible}
.tq-round .tbl{fill:var(--felt);stroke:var(--gold-deep);stroke-width:1}
.tq-round .tbl-in{fill:none;stroke:rgba(233,181,121,.25);stroke-width:.8;stroke-dasharray:2 3}
.tq-round .seat{fill:var(--gold);stroke:var(--gold-deep);stroke-width:1.2}
.tq-round .plate{fill:#f3e6cf;stroke:var(--gold-deep);stroke-width:.8}
.tq-step{display:flex;align-items:center;gap:18px}
.tq-step__b{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink-45);background:none;color:var(--ink);
  font:400 22px/1 var(--sans);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.tq-step__b:hover{background:var(--gold);border-color:var(--gold);color:#2a1a0e}
.tq-step__b:disabled{opacity:.3;cursor:default;background:none;color:var(--ink);border-color:var(--ink-45)}
.tq-step__n{min-width:2ch;text-align:center;font:500 clamp(46px,4.6vw,62px)/1 var(--serif);color:var(--light)}
.tq-guests__txt{font:500 15px var(--sans);letter-spacing:.1em;text-wrap:balance;color:var(--ink-45);text-transform:uppercase}
.tq-guests__txt a{color:var(--gold)}

/* II. the balance: two dishes in one arch, one from each kitchen, side by side
   in their own frames; the arch is the control (drag the seam, or tap) */
.tq-bal__arch{position:relative;display:flex;aspect-ratio:16/9;border-radius:999px 999px 6px 6px;overflow:hidden;isolation:isolate;
  background:var(--felt);outline:1px solid rgba(233,181,121,.25);outline-offset:8px;--x:50%;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tq-bal__arch.is-dragging{cursor:grabbing}
.tq-bal__arch:focus-within{outline-color:var(--gold)}
.tq-bal__pane{position:relative;flex:none;height:100%;overflow:hidden}
.tq-bal__pane--cn{width:var(--x)}
.tq-bal__pane--it{width:calc(100% - var(--x))}
/* each plate stays whole and centred in its own frame as the frame narrows */
.tq-bal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.tq-bal__pane--cn .tq-bal__img{border-right:3px solid var(--felt)}
.tq-bal__pane--it .tq-bal__img{border-left:3px solid var(--felt)}
.tq-bal__line{position:absolute;z-index:2;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--gold);
  box-shadow:0 0 14px rgba(233,181,121,.9);pointer-events:none}
.tq-bal__line::after{content:"‹ ›";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:var(--gold);color:#2a1a0e;font:600 16px/1 var(--sans);letter-spacing:.1em;
  box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tq-bal__tag{position:absolute;z-index:3;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 13px 7px;border-radius:30px;
  font:500 12px var(--sans);letter-spacing:.24em;color:var(--light);background:rgba(10,5,2,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;transition:opacity .3s}
.tq-bal__tag b{font:500 14px/1 var(--serif);letter-spacing:0;color:var(--gold)}
.tq-bal__pane--cn .tq-bal__tag{left:14px}
.tq-bal__pane--it .tq-bal__tag{right:14px}
.tq-bal__pane.is-narrow .tq-bal__tag{opacity:0}
/* a quarter of the arch: the kitchen keeps only its mark */
.tq-bal__pane.is-slim .tq-bal__tag span{display:none}
.tq-bal__read{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:10px;margin:22px 0 4px}
.tq-bal__read span{font:500 14px var(--sans);color:var(--ink-45)}
.tq-bal__read span:last-child{text-align:right}
.tq-bal__read b{font:500 clamp(30px,2.8vw,40px)/1 var(--serif);color:var(--rong);margin-right:2px}
.tq-bal__read span:last-child b{color:var(--gold);margin:0 0 0 2px}
.tq-bal__read em{font:400 italic 19px var(--serif);color:var(--light)}
.tq-bal__split{margin-top:12px;font:400 18px/1.5 var(--sans);color:var(--ink-70)}

/* III–V. choices */
/* the answers are big and easy to tap: read at a glance, at the table, glass in hand */
.tq-moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tq-mood{display:block;padding:20px 22px 19px;text-align:left;border:1px solid var(--ink-20);border-radius:3px;background:none;cursor:pointer;
  font:500 24px/1.2 var(--serif);color:var(--ink);transition:background .35s var(--ease),border-color .35s,color .35s}
.tq-mood small{display:block;margin-top:8px;font:500 15px/1.35 var(--sans);letter-spacing:.1em;color:var(--ink-70);text-transform:uppercase}
.tq-mood:hover{border-color:var(--ink-45)}
.tq-mood[aria-checked="true"]{background:var(--gold);border-color:var(--gold);color:#2a1a0e}
.tq-mood[aria-checked="true"] small{color:rgba(42,26,14,.82)}
.tq-mood:last-child:nth-child(odd){grid-column:1/-1}
.tq-chips{display:flex;flex-wrap:wrap;gap:10px}
.tq-chip{display:inline-flex;align-items:center;gap:10px;padding:16px 22px 15px;border:1px solid var(--ink-20);border-radius:40px;background:none;cursor:pointer;
  font:500 18px var(--sans);letter-spacing:.02em;color:var(--ink);transition:background .35s var(--ease),border-color .35s,color .35s}
.tq-chip::before{content:"+";color:var(--gold)}
.tq-chip:hover{border-color:var(--ink-45)}
.tq-chip[aria-pressed="true"],.tq-chip[aria-checked="true"]{background:var(--gold);border-color:var(--gold);color:#2a1a0e}
.tq-chip[aria-pressed="true"]::before{content:"✕";font-size:14px;color:#2a1a0e}
.tq-chip[aria-checked="true"]::before{content:"✦";color:#2a1a0e}
.tq-go{width:100%;margin-top:18px;padding:22px 30px 21px;font-size:15px}
.tq-go:disabled{opacity:.6;cursor:progress}

/* ---------------- the table ----------------
   Wide screens: a lit panel that stays beside the answers (sticky), its cards
   scrolling inside it, the sum at its foot. */
.tb__play{position:sticky;top:calc(var(--navh) + 12px);height:calc(100svh - var(--navh) - 30px);min-height:520px;min-width:0;
  display:flex;flex-direction:column;border-radius:4px;color:var(--light);overflow:hidden;
  background:radial-gradient(90% 50% at 50% 0%,rgba(233,181,121,.07),transparent 70%),#170d07;
  border:1px solid rgba(233,181,121,.12)}
.tb__stage{flex:1;min-height:0;display:flex;flex-direction:column}
.tb__head{flex:none;display:flex;align-items:center;gap:22px;padding:24px 28px 12px}
.tb__maitre{min-width:0;flex:1}
.tb__maitreK{font:500 11.5px var(--sans);letter-spacing:.42em;color:var(--gold);margin-bottom:7px}
.tb__maitreL{font:400 clamp(17px,1.5vw,21px)/1.38 var(--sans);color:var(--light)}
.tb__maitreL b{font-style:normal;font-weight:500;color:var(--gold)}
.tb__deck{position:relative;flex:none;width:54px;height:78px}
.tb__deck i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(160deg,#3a2616,#24170d);
  box-shadow:inset 0 0 0 1px rgba(233,181,121,.3),0 6px 14px rgba(0,0,0,.45)}
.tb__deck i:nth-child(1){transform:translate(-3px,3px) rotate(-5deg)}
.tb__deck i:nth-child(2){transform:translate(2px,2px) rotate(4deg)}
.tb__deck i:nth-child(3){transform:translate(-1px,1px) rotate(-1.5deg)}
.tb__deck i:last-child::after{content:"";position:absolute;inset:32% 18%;background:var(--gold);
  -webkit-mask:url('../img/consul-logo.svg') center/contain no-repeat;mask:url('../img/consul-logo.svg') center/contain no-repeat}
.tb__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 26px 26px;
  scrollbar-width:thin;scrollbar-color:rgba(233,181,121,.35) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 22px),transparent)}
.tb__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px;list-style:none}

/* a card: the dish edge to edge on its face, the club on its back, flipped in 3D */
.tc{position:relative;perspective:1100px;min-width:0}
.tc__in{position:relative;aspect-ratio:4/5.4;transform-style:preserve-3d}
.tc__face,.tc__back{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tc__back{transform:rotateY(180deg);background:linear-gradient(160deg,#3a2616,#24170d);
  box-shadow:inset 0 0 0 1px rgba(233,181,121,.28),0 16px 34px rgba(0,0,0,.55)}
.tc__back::after{content:"";position:absolute;inset:38% 28%;background:rgba(233,181,121,.85);
  -webkit-mask:url('../img/consul-logo.svg') center/contain no-repeat;mask:url('../img/consul-logo.svg') center/contain no-repeat}
.tc__face{display:block;width:100%;padding:0;border:0;text-align:left;cursor:pointer;font:inherit;color:var(--light);background:#0e0704;
  box-shadow:0 0 0 1px rgba(233,181,121,.14),0 18px 38px rgba(0,0,0,.6);transition:box-shadow .45s var(--ease)}
.tc__face:hover{box-shadow:0 0 0 1px rgba(233,181,121,.5),0 22px 44px rgba(0,0,0,.65)}
.tc__face:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tc__media{position:absolute;inset:0}
.tc__media img,.tc__media video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.tc__face:hover .tc__media img,.tc__face:hover .tc__media video{transform:scale(1.07)}
/* light at the top for the course, deep shadow at the foot for the words */
.tc__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,5,2,.55) 0,rgba(10,5,2,0) 22%,rgba(10,5,2,0) 46%,rgba(10,5,2,.72) 74%,rgba(10,5,2,.94) 100%)}
.tc__media--none{display:grid;place-items:center;padding-bottom:28%;
  background:radial-gradient(70% 55% at 50% 38%,rgba(233,181,121,.16),transparent 70%),linear-gradient(170deg,#2a1a0e,#120a05);
  font:400 italic clamp(40px,4vw,56px)/1 var(--serif);color:rgba(233,181,121,.42)}
.tc__media--none::after{display:none}
.tc__course{position:absolute;left:12px;right:44px;top:11px;display:flex;align-items:center;gap:8px;
  font:500 7.5px var(--sans);letter-spacing:.3em;color:rgba(255,247,235,.8);text-transform:uppercase;white-space:nowrap;overflow:hidden}
.tc__film{display:inline-flex;align-items:center;gap:4px;font-style:normal;color:rgba(255,247,235,.7)}
.tc__film::before{content:"";width:4px;height:4px;border-radius:50%;background:#e2584a;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.tc__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:0 12px 10px}
.tc__k{font:400 11px/1.2 var(--sans);color:var(--gold)}
.tc__k b{font-style:normal;font-weight:500}
.tc__name{font:500 14.5px/1.22 var(--sans);color:var(--light);text-shadow:0 1px 12px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc__price{font:500 12px var(--sans);letter-spacing:.14em;color:rgba(255,247,235,.72)}
.tc__price small{font-size:10.5px;letter-spacing:.22em;color:rgba(255,247,235,.5)}
.tc__swap{position:absolute;z-index:3;right:8px;top:8px;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,247,235,.28);background:rgba(10,5,2,.45);color:var(--light);
  font:400 13px/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s,color .3s,border-color .3s,opacity .3s}
.tc__swap:hover{background:var(--gold);border-color:var(--gold);color:#2a1a0e}
@media (hover:hover){.tc__swap{opacity:.75}.tc:hover .tc__swap{opacity:1}}
/* − n + : one more of a dish, or one less */
.tc__qty{position:absolute;z-index:3;right:8px;bottom:10px;display:flex;align-items:center;gap:1px;padding:2px;border-radius:20px;
  border:1px solid rgba(255,247,235,.22);background:rgba(10,5,2,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tc__qty button{width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--light);font:400 14px/1 var(--sans);cursor:pointer;
  transition:background .25s,color .25s}
.tc__qty button:hover{background:var(--gold);color:#2a1a0e}
.tc__qty b{min-width:14px;text-align:center;font:500 12px/1 var(--sans);color:var(--light);display:inline-block}
.tc__price{display:flex;align-items:center;gap:6px;min-height:28px;padding-right:80px}
/* the drinks, apart: a heading across the table */
.tc-div{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin-top:8px;padding-top:18px;border-top:1px solid rgba(233,181,121,.16);list-style:none}
.tc-div span{font:400 italic 20px/1 var(--serif);color:var(--gold)}
.tc-div small{font:500 11px var(--sans);letter-spacing:.3em;color:rgba(255,247,235,.5);text-transform:uppercase}
/* a slot nothing fits */
.tc__face--wild{cursor:default;display:grid;place-items:center;background:linear-gradient(170deg,#2a1a0e,#120a05)}
.tc__wild{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;text-align:center}
.tc__wild i{font-style:normal;font-size:18px;color:var(--gold)}
.tc__wild b{font:500 17px/1.2 var(--sans);color:var(--light)}
.tc__wild small{font:400 12.5px/1.45 var(--sans);color:rgba(255,247,235,.6)}

/* the sum, at the foot of the panel: the seal, the numbers, what to do next */
.tbsum{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:center;
  padding:14px 26px 20px;border-top:1px solid rgba(233,181,121,.12)}
.tbsum[hidden]{display:none}
.tbsum__seal{grid-row:1/4;position:relative;width:86px;height:86px}
.tbsum__spark{position:absolute;inset:-70px;width:calc(100% + 140px);height:calc(100% + 140px);pointer-events:none}
.tbsum__wax{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#93362a,var(--oxblood) 55%,#4c140e);color:var(--gold);transform:rotate(-8deg);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),inset 0 0 0 6px rgba(233,181,121,.5);
  /* a wax edge that is never a perfect circle */
  clip-path:polygon(50% 0,61% 3%,71% 2%,79% 9%,89% 13%,93% 23%,99% 32%,97% 43%,100% 53%,96% 63%,98% 73%,90% 81%,85% 91%,74% 94%,64% 99%,53% 96%,42% 100%,32% 96%,22% 97%,14% 89%,6% 82%,4% 71%,0 61%,3% 50%,0 39%,5% 29%,8% 18%,17% 12%,25% 4%,36% 3%)}
.tbsum__wax .wordmark{font-size:7px}
.tbsum__wax small{font:500 5px var(--sans);letter-spacing:.26em;color:rgba(233,181,121,.85)}
.tbsum__nums{display:flex;gap:30px}
.tbsum__nums p{display:flex;flex-direction:column;gap:4px}
.tbsum__nums span{font:500 11px var(--sans);letter-spacing:.34em;color:rgba(255,247,235,.55)}
.tbsum__nums b{font:500 clamp(24px,2.1vw,30px)/1 var(--serif);color:var(--gold)}
.tbsum__note{font:500 10.5px/1.5 var(--sans);color:rgba(255,247,235,.5)}
.tbsum__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tbsum__row .btn{padding:11px 16px 10px;font-size:11px;letter-spacing:.2em}
.tbsum__row .btn:not(.btn--gold){color:var(--light);border-color:rgba(255,247,235,.34)}
.tbsum__row .btn:not(.btn--gold):hover{background:var(--light);color:#2a1a0e;border-color:var(--light)}
.tbsum__hint{display:none;font:400 13px/1.55 var(--sans);color:rgba(255,247,235,.5)}

/* ---------------- the way to the whole menu ---------------- */
.tb-more{padding:clamp(70px,11vh,120px) var(--pad);text-align:center;background:#1d120a;border-top:1px solid rgba(233,181,121,.16)}
.tb-more__title{font:500 clamp(32px,4vw,54px)/1.1 var(--serif);color:var(--light)}
.tb-more__title em{color:var(--gold)}
.tb-more__lede{max-width:46ch;margin:16px auto 30px;font:400 17px/1.55 var(--sans);color:var(--ink-70)}

/* ---------------- the dish sheet ---------------- */
.sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(5,2,1,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* one row, no taller than the card: the words scroll inside it and the picture
   fills it (an auto row grew to the whole description, which the card then cut off) */
.sheet__card{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);width:min(940px,92vw);max-height:min(640px,88vh);overflow:hidden;
  border-radius:10px;background:var(--bg2);color:var(--ink);box-shadow:0 0 0 1px rgba(233,181,121,.2),0 40px 90px rgba(0,0,0,.7)}
.sheet__media{position:relative;background:var(--felt);min-height:0}
.sheet__media img,.sheet__media video{display:block;width:100%;height:100%;object-fit:cover}
.sheet__media img[hidden]{display:none}   /* a film plays instead: the photo must not stack under it */
.sheet__media.is-none{display:grid;place-items:center}
/* the gallery: a slide per photo or film, swiped sideways (menu-core.js) */
.sheet__gal{position:absolute;inset:0}
.sheet__track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;outline:0}
.sheet__track::-webkit-scrollbar{display:none}
.sheet__slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.sheet__slide img,.sheet__slide video{display:block;width:100%;height:100%;object-fit:cover}
.sheet__dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.sheet__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,247,235,.45);box-shadow:0 0 0 1px rgba(20,11,6,.25);transition:background .3s,transform .3s}
.sheet__dots i.is-on{background:var(--gold);transform:scale(1.2)}
.sheet__arrow{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,11,6,.55);color:var(--light);font:400 26px/1 var(--serif);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s,background .3s}
.sheet__arrow--prev{left:14px}
.sheet__arrow--next{right:14px}
.sheet__arrow:hover{background:rgba(20,11,6,.85)}
.sheet__arrow:disabled{visibility:hidden}
.sheet__media:hover .sheet__arrow,.sheet__arrow:focus-visible{opacity:1}
/* touch screens swipe: the arrows stay away */
@media (pointer:coarse){.sheet__arrow{display:none}}
/* the film's sound, in real cream on a dark glass: on these dark pages --cream
   is the ground colour, which left the chip's words invisible */
.sheet__sound{left:16px;bottom:40px;transform:none;padding:11px 18px 10px;gap:10px;
  background:rgba(20,11,6,.78);color:var(--light);font-size:10.5px;letter-spacing:.26em;
  box-shadow:0 0 0 1px rgba(233,181,121,.35)}
.sheet__sound:hover{background:rgba(20,11,6,.92)}
.sheet__media.is-none::after{content:attr(data-mark);font:400 italic 90px/1 var(--serif);color:var(--gold);opacity:.5}
.sheet__body{--sp:clamp(28px,3.5vw,46px);overflow-y:auto;padding:var(--sp);display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
/* nothing in the column shrinks: a folded story (overflow hidden) was squeezed to
   nothing on a tall dish, so READ MORE stood alone under the price */
.sheet__body>*{flex-shrink:0}
.sheet__k{font:500 11.5px var(--sans);letter-spacing:.36em;color:var(--gold)}
/* a dish's or drink's name and numbers in Optima, as on the menu's list (Playfair stays for titles) */
.sheet__name{font:500 clamp(26px,2.6vw,36px)/1.15 var(--sans);letter-spacing:.01em;color:var(--light)}
.sheet__price{font:500 14px var(--sans);letter-spacing:.06em;color:var(--gold)}
.sheet__price small{margin-left:8px;font-size:12px;letter-spacing:.2em;color:var(--ink-45)}
.sheet__desc{display:flex;flex-direction:column;gap:12px;font:500 14px/1.7 var(--sans);color:var(--ink-70)}
/* the story, set like a printed menu card (menu-core.js → prose) */
/* the opening paragraph leads by size and colour, in the same clear letters as the
   rest: a block of italic serif was hard to read (Danilo, 2026-10-24) */
.sheet__desc .sd-lede{font:500 15.5px/1.7 var(--sans);color:var(--light)}
.sheet__desc .sd-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin:4px 0;padding:14px 0;
  border-top:1px solid rgba(233,181,121,.18);border-bottom:1px solid rgba(233,181,121,.18)}
.sheet__desc .sd-list li{position:relative;padding-left:22px;font:500 13.5px/1.55 var(--sans);color:var(--ink-70)}
.sheet__desc .sd-list li::before{content:"";position:absolute;left:0;top:.78em;width:11px;height:1px;background:var(--gold)}
.sheet__desc .sd-list b{font:500 15px/1 var(--sans);color:var(--light)}
.sheet__desc .sd-h{display:flex;align-items:center;gap:12px;margin:12px 0 -4px;font:500 11.5px var(--sans);letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
.sheet__desc .sd-h::after{content:"";flex:1;height:1px;background:linear-gradient(to right,rgba(233,181,121,.3),transparent)}
/* a long description folds after ~6 lines (about five clear, the last fading softly into the card) */
.sheet__desc.is-folded{max-height:10.4em;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
@supports (not (mask-image:linear-gradient(to bottom,#000,transparent))) and (not (-webkit-mask-image:linear-gradient(to bottom,#000,transparent))){
  .sheet__desc.is-folded{position:relative}
  .sheet__desc.is-folded::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
    background:linear-gradient(to bottom,rgba(29,18,10,0),var(--bg2));pointer-events:none}
}
.sheet__read{position:relative;z-index:1;align-self:center;display:inline-flex;align-items:center;gap:7px;margin:-26px 0 4px;padding:7px 16px 6px;
  border:1px solid rgba(233,181,121,.38);border-radius:999px;background:rgba(29,18,10,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:var(--gold);font:500 11.5px var(--sans);letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.sheet__read[aria-expanded="true"]{margin-top:2px}
.sheet__read:hover,.sheet__read:focus-visible{color:var(--light);border-color:var(--gold);background:rgba(233,181,121,.12);outline:none}
.sheet__read i{font-style:normal;font-size:13px;line-height:1;transition:transform .3s var(--ease)}
.sheet__read[aria-expanded="true"] i{transform:rotate(180deg)}
.sheet__read[hidden]{display:none}
.sheet__ing,.sheet__all{font:500 12px/1.6 var(--sans);color:var(--ink-70)}
.sheet__ing b,.sheet__all b{display:block;margin-bottom:2px;font:500 11px var(--sans);letter-spacing:.34em;color:var(--ink-45)}
.sheet__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sheet__row:empty{display:none}
.sheet__row .btn{padding:13px 22px 12px}
/* wide screens: ADD TO MY TABLE stays at the foot of the card while the guest reads */
@media (min-width:701px){
  .sheet__row{position:sticky;bottom:calc(-1 * var(--sp));z-index:2;margin:8px calc(-1 * var(--sp)) 0;padding:14px var(--sp) 16px;
    background:rgba(29,18,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-top:1px solid rgba(233,181,121,.18);box-shadow:0 -14px 30px rgba(0,0,0,.4)}
}
/* the price, and SHARE on the same line */
.sheet__line{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.sheet__share{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 8px;border:1px solid rgba(233,181,121,.4);border-radius:999px;
  background:none;color:var(--gold);font:500 11.5px var(--sans);letter-spacing:.3em;cursor:pointer;transition:background .25s,color .25s}
.sheet__share i{font-style:normal;letter-spacing:0}
.sheet__share:hover{background:var(--gold);color:var(--brown)}
.sheet__share[hidden]{display:none}
/* the heart: one of the guest's favourite dishes (btm-account.js sets is-liked) */
.sheet__acts{display:inline-flex;align-items:center;gap:10px}
.sheet__like{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(233,181,121,.4);border-radius:50%;
  background:none;color:var(--gold);cursor:pointer;transition:background .25s,color .25s}
.sheet__like svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sheet__like.is-liked svg{fill:currentColor}
.sheet__like:hover{background:rgba(233,181,121,.12)}
.sheet__like[hidden]{display:none}
/* Goes well with · Also from …: small cards, a tap opens that dish */
.sheet__more{display:flex;flex-direction:column;gap:24px;margin-top:18px}
.sheet__more:empty{display:none}
.sheet__group-h{display:flex;align-items:center;gap:12px;margin-bottom:12px;font:500 11.5px var(--sans);letter-spacing:.34em;color:var(--gold)}
.sheet__group-h::after{content:"";flex:1;height:1px;background:linear-gradient(to right,rgba(233,181,121,.3),transparent)}
.sheet__picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sheet__pick{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:12px;align-items:center;padding:8px;text-align:left;
  border:1px solid rgba(233,181,121,.18);border-radius:10px;background:rgba(255,247,235,.03);color:var(--light);cursor:pointer;transition:border-color .25s,background .25s}
.sheet__pick:hover{border-color:rgba(233,181,121,.55);background:rgba(255,247,235,.06)}
.sheet__pick-m{grid-row:1/3;width:52px;height:52px;border-radius:7px;overflow:hidden;background:var(--felt);display:grid;place-items:center}
.sheet__pick-m img{display:block;width:100%;height:100%;object-fit:cover}
.sheet__pick-m[data-mark]::after{content:attr(data-mark);font:400 italic 22px/1 var(--serif);color:var(--gold);opacity:.6}
.sheet__pick b{align-self:end;font:500 14px/1.25 var(--sans);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sheet__pick small{align-self:start;margin-top:3px;font:500 11px var(--sans);letter-spacing:.06em;color:var(--gold)}
.sheet__x{position:absolute;z-index:2;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(233,181,121,.4);
  background:rgba(20,11,6,.85);color:var(--light);font:400 24px/1 var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* ---------------- toast + the phone bar ---------------- */
.tb-toast{position:fixed;z-index:95;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  max-width:min(420px,88vw);padding:13px 22px 12px;border-radius:40px;background:var(--gold);color:#2a1a0e;text-align:center;
  font:500 12px/1.4 var(--sans);letter-spacing:.04em;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:opacity .35s,transform .35s var(--ease)}
.tb-toast.is-on{opacity:1;transform:translate(-50%,0)}
.tb-bar{display:none}

/* ---------------- tablets and phones ----------------
   The table rides at the top of the screen while you answer: the cards are
   a carousel (swipe through them, the middle one faces you), the questions
   scroll underneath, and every answer re-deals the cards it changes. */
@media (max-width:1120px){
  .tb__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .tb__play{display:contents}
  /* while composing, the site's nav slides away and the cards take the top (table.js → body.tb-docked) */
  .tb-page .nav.nav--page{transition:transform .45s var(--ease)}
  body.tb-docked .nav.nav--page{transform:translateY(-110%)}
  body.tb-docked .tb__stage{top:0;padding-top:calc(10px + env(safe-area-inset-top))}
  .tb__stage{order:-1;min-width:0;position:sticky;top:calc(var(--navh) - 16px);z-index:20;margin:0 calc(-1 * var(--pad));padding:22px 0 10px;
    transition:top .45s var(--ease),padding .45s var(--ease);
    background:linear-gradient(to bottom,var(--bg) 0,var(--bg) calc(100% - 14px),rgba(20,11,6,0));color:var(--light)}
  .tb__head{gap:12px;padding:0 var(--pad) 4px}
  .tb__deck{width:30px;height:43px}
  .tb__deck i{border-radius:4px}
  .tb__maitreK{margin-bottom:3px;font-size:10.5px}
  .tb__maitreL{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tb__scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:12px 0 8px;perspective:900px;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
  .tb__scroll::-webkit-scrollbar{display:none}
  .tb__cards{display:flex;gap:12px;padding:0 calc(50% - var(--cw) / 2);width:max-content}
  .tc{flex:0 0 var(--cw);scroll-snap-align:center;transform-style:preserve-3d;will-change:transform}
  .tc-div{flex:0 0 44px;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:0;padding:0;border-top:0;
    border-left:1px solid rgba(233,181,121,.25);scroll-snap-align:none}
  .tc-div span,.tc-div small{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
  .tc-div span{font-size:16px}
  .tc-div small{display:none}
  .tb__cards{align-items:flex-start}
  .tc-div{align-self:stretch}
  .tb__ask{order:0;padding-top:10px}
  .tbsum{order:1;grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;margin-top:20px;padding:26px 18px 28px;
    border:1px solid rgba(233,181,121,.12);border-radius:4px;background:radial-gradient(90% 50% at 50% 0%,rgba(233,181,121,.07),transparent 70%),#170d07}
  .tbsum__seal{grid-row:auto;width:112px;height:112px}
  .tbsum__wax .wordmark{font-size:9px}
  .tbsum__wax small{font-size:6px}
  .tbsum__nums{justify-content:center;gap:clamp(30px,8vw,60px)}
  .tbsum__row{justify-content:center;margin-top:12px}
  .tbsum__hint{display:block;max-width:52ch;margin-top:6px}
}
@media (max-width:880px){
  /* the app bar: the answers so far, and the button that deals */
  .tb-bar{display:flex;position:fixed;z-index:65;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:14px;
    background:rgba(42,26,14,.97);color:var(--light);box-shadow:0 0 0 1px rgba(233,181,121,.3),0 14px 34px rgba(0,0,0,.55);
    transform:translateY(140%);transition:transform .45s var(--ease)}
  .tb-bar.is-on{transform:none}
  .tb-bar__txt{min-width:0;font:500 12px/1.45 var(--sans);letter-spacing:.02em;color:rgba(255,247,235,.7)}
  .tb-bar__txt b{display:block;font:500 17px/1.2 var(--sans);letter-spacing:0;color:var(--gold)}
  .tb-bar__go{flex:none;padding:14px 11px 13px;font-size:12.5px;letter-spacing:.04em}
  .tb-bar__txt{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .tb-bar__txt b{overflow:hidden;text-overflow:ellipsis}
  .tb-bar__mine{flex:none;display:flex;align-items:center;gap:7px;height:42px;padding:0 12px 0 5px;border-radius:30px;
    border:1px solid rgba(233,181,121,.5);background:none;color:var(--light);font:500 11px var(--sans);letter-spacing:.22em;cursor:pointer}
  .tb-bar__mine[hidden]{display:none}
  .tb-bar{gap:8px}
  .tb-bar__go{padding:13px 10px 12px;letter-spacing:.04em}
  .tb-bar__mine b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 5px;border-radius:20px;background:var(--gold);color:#2a1a0e;font:500 14px/1 var(--sans);letter-spacing:0}
  /* a smaller strip of cards, so the questions have the screen */
  .tb-page{--cw:clamp(104px,29vw,140px)}
  .tb__stage{padding-top:14px;padding-bottom:6px}
  .tb__deck{display:none}
  .tb__maitreK{display:none}
  .tb__maitreL{font-size:13.5px;-webkit-line-clamp:1}
  .tb__scroll{padding:10px 0 6px}
  .tb__cards{gap:9px}
  .tc__course{display:none}
  .tc__cap{padding:0 8px 8px}
  .tc__k{font-size:11px}
  .tc__name{font-size:12px;-webkit-line-clamp:2}
  .tc__price{min-height:0;padding-right:0;font-size:11px}
  /* − n + moves to the top left, the swap stays top right */
  .tc__qty{top:6px;left:6px;right:auto;bottom:auto}
  .tc__qty button{width:20px;height:20px;font-size:12px}
  .tc__qty b{font-size:11px;min-width:12px}
  .tc__swap{top:6px;right:6px;width:26px;height:26px;font-size:12px}
  .tb-page:has(.yt-fab.is-on,.tb-bar.is-on) .btm-notice{bottom:calc(78px + env(safe-area-inset-bottom))}
}
/* narrow phones: the list button is just its count, so the answers keep their line */
@media (max-width:420px){.tb-bar__mine span{display:none}.tb-bar__mine{padding:0 5px}}
@media (max-width:700px){
  .tb{padding-left:16px;padding-right:16px;--pad:16px}
  .tq-moods{grid-template-columns:1fr}
  .tq-bal__arch{aspect-ratio:4/3}
  .tbsum__row .btn{flex:1 1 calc(50% - 10px);padding:14px 10px 13px;font-size:11px;letter-spacing:.18em}
  .tbsum__row .btn--gold{flex-basis:100%}
  /* the sheet rises from the bottom like an app's */
  /* the dish takes the whole screen: photo and words in one scroll, nothing behind it moves */
  html.sheet-open{--btm-chat-lift:76px}
  .sheet{place-items:stretch}
  .sheet__card{display:block;width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .sheet__media{aspect-ratio:4/5}
  .sheet__body{overflow:visible;padding:24px 20px calc(108px + env(safe-area-inset-bottom))}
  .sheet__x{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;width:46px;height:46px;font-size:28px;
    background:rgba(20,11,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  /* ADD TO MY TABLE stays fixed at the foot once the guest scrolls into the description */
  .sheet__row{position:fixed;left:0;right:0;bottom:0;z-index:3;margin-top:0;align-items:center;
    padding:12px 20px calc(14px + env(safe-area-inset-bottom));
    background:rgba(20,11,6,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(233,181,121,.2);box-shadow:0 -14px 34px rgba(0,0,0,.55);
    transform:translateY(115%);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .28s}
  .sheet__row.is-on{transform:none;opacity:1;pointer-events:auto}
  .sheet__row .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .sheet__row .btn--gold{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .tc__face,.tb-bar,.tb-toast,.sheet__row{transition:none}
  .tc__film::before{animation:none}
}