/* ══════════════════════════════════════════════════════
   style — tokens up top, then every section in page order
   ══════════════════════════════════════════════════════ */

:root{
  /* GENERATED:palette — written by scripts/palette.py DEEP PALE ACCENT, never by hand */
  /* palette-fit {"given": ["#2f3d20", "#f3ecdc", "#6e5745"], "used": ["#253316", "#f3ecdc", "#7a6250"], "moved_lightness": {"deep": -0.04, "pale": 0.0, "accent": 0.04}, "pairs": ["cream on red-panel 11.38:1 (floor 4.5)", "yellow-hot on red-panel 3.23:1 (floor 3.0)", "cream on red-deep 14.65:1 (floor 4.5)", "red-deep on cream 14.65:1 (floor 4.5)", "text-desc on paper 11.94:1 (floor 4.5)", "red-deep on paper 14.87:1 (floor 4.5)", "foot-body on paper 9.23:1 (floor 4.5)", "red on paper 11.59:1 (floor 3.0)", "foot-small on paper 3.76:1 (floor 3.0)", "cream on ink 16.54:1 (floor 4.5)"], "all_pass": true} */
  --ink:         #0d0d09;
  --red:         #253316;
  --red-panel:   #223412;
  --red-deep:    #141e06;
  --wine:        #262b0f;
  --text-desc:   #2b2e23;
  --foot-ink:    #161814;
  --cream:       #f3ecdc;
  --cream-dim:   #d6cdc2;
  --paper:       #f3eee0;
  --foot-body:   #463c37;
  --foot-small:  #83776c;
  --yellow:      #7a6250;
  --gold:        #695842;
  --yellow-hot:  #8e7962;
  --ink-rgb:     13,13,9;
  --red-deep-rgb:20,30,6;
  --wine-rgb:    38,43,15;
  --foot-ink-rgb:22,24,20;
  --cream-rgb:   243,236,220;
  --paper-rgb:   243,238,224;
  /* /GENERATED:palette */
  /* GENERATED:fonts — the three Google Fonts, by role */
  --font-display: 'Cinzel', 'Arial Narrow', sans-serif;
  --font-script:  'Pinyon Script', cursive;
  --font-body:    'EB Garamond', 'Segoe UI', sans-serif;
  /* /GENERATED:fonts */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scrollbar-color: var(--red) var(--ink);
}

body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--cream);
  overflow-x:clip;
  overscroll-behavior-x:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }

::selection{ background:var(--red); color:var(--cream); }

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ══════════════════ INTRO ══════════════════ */

#intro{
  position:fixed; inset:0; z-index:100;
}
.intro-panel{
  position:absolute; inset:0;
  background:#000;
  overflow:hidden;
}
#introVideo{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
#introLogo{
  position:fixed; left:0; top:0;
  width:400px; height:auto;
  opacity:0;
  will-change:transform;
  pointer-events:none;
}
#introPlay{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-size:clamp(18px,3vw,28px);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream);
  padding:22px 44px;
  border:2px solid var(--wine);
  border-radius:999px;
  background:rgba(var(--wine-rgb),.12);
  transition:background .3s;
}
#introPlay:hover{ background:rgba(var(--wine-rgb),.3); }

/* ══════════════════ NAV ══════════════════ */

#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding:18px clamp(18px,3vw,40px);
  pointer-events:none;
}
#nav > *{ pointer-events:auto; }
.brand{
  font-family:var(--font-display);
  font-size:26px; letter-spacing:.05em;
  color:var(--cream);
  text-shadow:0 2px 14px rgba(var(--ink-rgb),.65);
}
.brand span{ color:var(--gold); }
.nav-links{
  margin-left:auto;
  display:flex; gap:8px;
}
.nav-links a{
  font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream);
  padding:10px 16px;
  border-radius:999px;
  background:rgba(var(--ink-rgb),.52);
  transition:background .3s, color .3s;
}
.nav-links a:hover{ background:var(--cream); color:var(--red-deep); }
#logoBtn{
  width:56px; height:56px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--cream);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(var(--ink-rgb),.45);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
#logoBtn:hover{
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 12px 30px rgba(var(--ink-rgb),.6);
}
#logoBtnImg{ width:38px; height:auto; }

/* ══════════════════ HERO ══════════════════ */

#hero{
  position:relative;
  height:100svh;
  min-height:620px;
  overflow:clip;
}
.hero-bk{
  position:absolute; inset:0; z-index:0;
  background:url('../assets/cloth-hero.webp') center/cover no-repeat;
}
.hero-bk::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(var(--ink-rgb),.42) 100%);
}

/* ── ribbons ── */
.ribbon{
  position:absolute;
  left:-12vw; width:124vw;
  overflow:hidden;
  padding:.55em 0;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(var(--ink-rgb),.35);
}
.ribbon-track{
  display:inline-flex;
  will-change:transform;
}
.ribbon-half{
  font-family:var(--font-display);
  font-size:clamp(13px,1.5vw,21px);
  letter-spacing:.28em;
  padding-left:.28em;
}
.ribbon-a{
  top:29%; z-index:3;
  transform:rotate(-7deg);
  background:var(--cream);
  color:var(--red-deep);
}
.ribbon-b{
  top:64%; z-index:3;
  transform:rotate(5.5deg);
  background:var(--red-deep);
  color:var(--cream);
}

/* ── giant dish title ── */
.hero-title{
  position:absolute; z-index:2;
  left:50%; top:15%;
  width:100vw;
  text-align:center;
  transform:translateX(-50%);   /* no-JS fallback; GSAP takes over with xPercent + x:0 */
}
.hero-title h1{
  font-family:var(--font-display);
  font-size:clamp(44px,18.5vw,200px);   /* fitted by JS */
  line-height:.9;
  letter-spacing:.015em;
  color:var(--red);
  white-space:nowrap;
}
.hero-title .l-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}
.hero-title .l{
  display:inline-block;
  will-change:transform;
  /* per-letter so the shadow survives the mask AND ancestor transforms stay composited */
  filter:drop-shadow(0 6px 0 rgba(var(--cream-rgb),.42));
}
.hero-title-front{
  z-index:4;
  pointer-events:none;
}
.script-accent{
  position:absolute; z-index:5;
  left:50%; top:30%;
  transform:translateX(-46%) rotate(-8deg);   /* no-JS fallback; GSAP takes over */
  font-family:var(--font-script);
  font-size:clamp(54px,8.5vw,130px);
  color:var(--cream);
  text-shadow:0 3px 0 rgba(var(--red-deep-rgb),.5), 0 8px 14px rgba(var(--ink-rgb),.45);
  pointer-events:none;
}

/* ── props ── */
.prop{
  position:absolute;
  z-index:5;
  pointer-events:none;
  will-change:transform;
}
.prop img{ width:100%; height:auto; }
.scatter img{ filter:drop-shadow(0 6px 6px rgba(var(--ink-rgb),.45)); }
.sprig{ width:clamp(90px,10vw,150px); }
.chilli{ width:clamp(90px,11vw,170px); }
.chilli img{ filter:drop-shadow(0 8px 6px rgba(var(--ink-rgb),.5)); }
.sprig img{ filter:drop-shadow(0 8px 6px rgba(var(--ink-rgb),.5)); }

.napkin{
  z-index:6;
  left:-3%; bottom:-9%;
  width:clamp(200px,24vw,400px);
}
.napkin img{
  transform:rotate(9deg);
  filter:drop-shadow(0 24px 30px rgba(var(--ink-rgb),.52));
}
.fork{
  z-index:8;
  left:22.5vw; top:27vh;
  height:44vh; width:auto;
}
.knife{
  z-index:8;
  left:69.5vw; top:26vh;
  height:46vh;
}
.spoon{
  z-index:8;
  left:75.5vw; top:29vh;
  height:40vh;
}
.fork img,.knife img,.spoon img{
  height:100%; width:auto;
  filter:drop-shadow(-14px 22px 18px rgba(var(--ink-rgb),.5));
}
.fork img{ transform:rotate(-4deg); }
.knife img{ transform:rotate(3.5deg); }
.spoon img{ transform:rotate(8deg); }
.glass{
  z-index:8;
  right:4%; top:31vh;
  width:clamp(80px,9.5vw,150px);
}
.glass img{ filter:drop-shadow(0 18px 26px rgba(var(--ink-rgb),.55)); }
.folder{
  z-index:8;
  right:-4%; bottom:-12%;
  width:clamp(190px,20vw,340px);
}
.folder img{
  transform:rotate(-12deg);
  filter:drop-shadow(0 30px 40px rgba(var(--ink-rgb),.6));
}

/* ── plate wheel ── */
#wheelParallax{
  position:absolute; inset:0;
  z-index:7;
  pointer-events:none;
}
#wheel{
  position:absolute;
  left:50%; top:0;              /* y set by JS */
  width:0; height:0;
  will-change:transform;
}
.arm{
  position:absolute;
  left:0; top:0;
  width:0; height:0;
}
.plate{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%,-50%);
}
/* cheap composited shadow — a blurred filter here re-rasterizes every wheel frame */
.plate::before{
  content:'';
  position:absolute;
  left:2%; top:7%;
  width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,5,6,.5), rgba(10,5,6,.26) 62%, transparent 80%);
}
.plate img{
  position:relative;
  width:100%; height:auto;
  will-change:transform;
}

#dragZone{
  position:absolute;
  z-index:9;
  left:0; right:0; top:0;
  height:76%;
  cursor:grab;
}
#dragZone:active{ cursor:grabbing; }

/* ── hero info / hint ── */
.hero-info{
  position:absolute; z-index:10;
  left:clamp(18px,3.4vw,48px); bottom:clamp(18px,5vh,48px);
  max-width:300px;
  background:rgba(var(--paper-rgb),.94);
  padding:20px 24px 22px;
  border-radius:18px;
  box-shadow:0 14px 26px rgba(var(--ink-rgb),.45), inset 0 0 0 1px rgba(var(--red-deep-rgb),.1);
  transform:rotate(-1.5deg);
}
.hero-info-script{
  font-family:var(--font-script);
  font-size:34px;
  color:var(--red-deep);
  margin-bottom:2px;
}
#dishDesc{
  font-size:14px; font-weight:500;
  line-height:1.55;
  color:var(--text-desc);
  margin-bottom:10px;
}
.hero-price{
  font-family:var(--font-display);
  font-size:44px;
  color:var(--red-deep);
  margin-bottom:14px;
}
.hero-price small{
  font-size:14px; letter-spacing:.2em;
  margin-left:6px;
  color:var(--text-desc);
}
.btn{
  display:inline-block;
  font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream);
  background:var(--red-deep);
  padding:14px 26px;
  border-radius:999px;
  box-shadow:0 10px 26px rgba(var(--red-deep-rgb),.4);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.btn:hover{ transform:translateY(-3px) scale(1.03); background:var(--ink); }

.hero-hint{
  position:absolute; z-index:10;
  left:50%; bottom:18px;
  transform:translateX(-50%);
  font-size:11px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(var(--cream-rgb),.85);
  text-shadow:0 2px 10px rgba(var(--ink-rgb),.6);
  white-space:nowrap;
}
.hint-arrow{ display:inline-block; }

/* ══════════════════ MENU ══════════════════ */

#menu{
  position:relative;
  background:var(--ink) top center / 100% auto repeat-y;
  padding:clamp(80px,12vh,140px) 0 clamp(100px,14vh,180px);
  overflow:clip;
}
#menu.has-cloth{ background-image:url('../assets/cloth-menu.webp'); }   /* the class is added when the file exists: no 404 while the page grows */
#menu::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.66), rgba(var(--ink-rgb),.28) 14%, rgba(var(--ink-rgb),.28) 86%, rgba(var(--ink-rgb),.7)),
    rgba(var(--ink-rgb),.14);
  pointer-events:none;
}

.menu-bgwords{
  position:absolute; inset:0;
  overflow:clip;
  pointer-events:none;
}
.menu-bgwords span{
  position:absolute;
  font-family:var(--font-display);
  font-size:clamp(140px,22vw,340px);
  letter-spacing:.04em;
  color:rgba(var(--cream-rgb),.09);
  /* no blurred shadow here: invisible at this alpha, and a 30px blur on 340px
     rotated glyphs is one of the most expensive rasters on the page */
  white-space:nowrap;
}
.menu-bgwords span:nth-child(1){ left:-4%; top:14%; transform:rotate(-90deg); transform-origin:left top; }
.menu-bgwords span:nth-child(2){ right:-14%; top:40%; transform:rotate(-8deg); }
.menu-bgwords span:nth-child(3){ left:-18%; top:82%; transform:rotate(-8deg); }

.menu-head{
  position:relative; z-index:2;
  display:flex; justify-content:center;
  margin-bottom:clamp(60px,9vh,110px);
  padding:0 20px;
}
.menu-panel{
  position:relative;
  text-align:center;
  background:var(--red-panel);
  border-radius:30px;
  padding:clamp(28px,4vw,48px) clamp(40px,7vw,90px) clamp(30px,4vw,46px);
  transform:rotate(-2deg);
  box-shadow:0 18px 36px rgba(var(--ink-rgb),.6), inset 0 0 0 2px rgba(var(--cream-rgb),.14);
}
.menu-panel::after{
  content:'';
  position:absolute; inset:0;
  border-radius:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  pointer-events:none;
}
.menu-script{
  font-family:var(--font-script);
  font-size:clamp(38px,5.4vw,64px);
  color:var(--yellow-hot);
  margin-bottom:-14px;
}
.menu-head h2{
  font-family:var(--font-display);
  font-size:clamp(58px,9vw,140px);
  letter-spacing:.02em;
  color:var(--cream);
  text-shadow:0 6px 0 rgba(var(--red-deep-rgb),.55), 0 10px 18px rgba(var(--ink-rgb),.5);
}
.menu-sub{
  font-size:13px;
  color:rgba(var(--cream-rgb),.78);
  letter-spacing:.06em;
  line-height:1.6;
  margin-top:12px;
}

.mprop{
  position:absolute; z-index:1;
  pointer-events:none;
  opacity:.95;
}
.mprop img{ width:100%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)); }

/* ── cards ── */
.cards{
  position:relative; z-index:2;
  max-width:1150px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,90px);
  row-gap:clamp(70px,10vh,120px);
}
.card{
  position:relative;
  min-height:340px;
}
.card:nth-child(even){ transform:translateY(clamp(30px,6vh,70px)); }

.card-accent{
  position:absolute; inset:0;
  background:var(--yellow);
  border-radius:28px;
  box-shadow:0 12px 24px rgba(var(--ink-rgb),.45);
}
.card[data-side="right"] .card-accent{ transform:translate(16px,18px) rotate(1.6deg); }
.card[data-side="left"]  .card-accent{ transform:translate(-16px,18px) rotate(-1.6deg); }

.card-paper{
  position:absolute; inset:0;
  background:
    radial-gradient(150% 130% at 22% 0%, rgba(255,255,255,.16), transparent 55%),
    var(--red-panel);
  border-radius:28px;
  box-shadow:
    inset 0 0 0 2px rgba(var(--cream-rgb),.13),
    inset 0 -40px 70px rgba(var(--ink-rgb),.28),
    0 20px 36px rgba(var(--ink-rgb),.6);
}
.card-paper::after{
  content:'';
  position:absolute; inset:0;
  border-radius:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  pointer-events:none;
}

.plate-clip{
  position:absolute;
  top:50%;
  width:min(320px,58%);
  aspect-ratio:1;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
}
.card[data-side="right"] .plate-clip{ right:-14%; }
.card[data-side="left"]  .plate-clip{ left:-14%; }
.plate-clip::before{
  content:'';
  position:absolute;
  left:5%; top:10%;
  width:94%; height:94%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.3) 60%, transparent 80%);
  opacity:var(--sh, 1);
}
.card-plate{
  position:relative;
  width:100%; height:auto;
  will-change:transform;
}

.card-body{
  position:relative; z-index:3;
  padding:clamp(28px,4vw,44px);
  width:64%;
}
.card[data-side="left"] .card-body{ margin-left:auto; text-align:right; }
.card-num{
  display:inline-grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(var(--cream-rgb),.75);
  font-family:var(--font-display);
  font-size:17px;
  color:var(--cream);
  margin-bottom:16px;
}
.card h3{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,46px);
  letter-spacing:.02em;
  color:var(--cream);
  text-shadow:0 4px 0 rgba(var(--red-deep-rgb),.5);
  margin-bottom:10px;
}
.card p{
  font-size:14px;
  line-height:1.6;
  color:rgba(var(--cream-rgb),.85);
  margin-bottom:20px;
  max-width:270px;
}
.card[data-side="left"] p{ margin-left:auto; }
.card-foot{
  display:flex; align-items:center; gap:16px;
}
.card[data-side="left"] .card-foot{ justify-content:flex-end; }
.card-price{
  font-family:var(--font-display);
  font-size:34px;
  color:var(--yellow-hot);
  text-shadow:0 3px 0 rgba(var(--red-deep-rgb),.55);
  transform:rotate(-3deg);
}
.card-order{
  font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-deep);
  background:var(--cream);
  padding:10px 18px;
  border-radius:999px;
  pointer-events:auto;
  box-shadow:0 8px 20px rgba(var(--ink-rgb),.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
.card-order:hover{ transform:translateY(-2px) scale(1.05); background:var(--yellow-hot); color:var(--ink); }

/* ══════════════════ DIVIDER ══════════════════ */

.divider-ribbon{
  position:relative;
  left:0; width:100%;
  transform:none;
  background:var(--red-deep);
  color:var(--cream);
  z-index:3;
}

/* ══════════════════ FOOTER ══════════════════ */

#reserve{
  position:relative;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    var(--paper);
  color:var(--foot-ink);
  padding:clamp(70px,10vh,120px) clamp(24px,5vw,70px) 40px;
  overflow:clip;
}
.reserve-watermark{
  position:absolute;
  right:-6%; top:4%;
  width:clamp(300px,36vw,620px);
  opacity:.1;
  pointer-events:none;
}
.rfork{
  left:clamp(6px,4vw,70px); top:12%;
  height:min(46vh,420px); width:auto;
  z-index:1;
}
.rknife{
  right:clamp(6px,4vw,70px); top:16%;
  height:min(48vh,440px);
  z-index:1;
}
.rfork img,.rknife img{
  height:100%; width:auto;
  filter:drop-shadow(-10px 20px 16px rgba(var(--foot-ink-rgb),.35));
}
.rfork img{ transform:rotate(-14deg); }
.rknife img{ transform:rotate(12deg); }
.rscatter{ z-index:1; }
.rscatter img{ filter:drop-shadow(0 6px 8px rgba(var(--foot-ink-rgb),.35)); }
.r1{ left:16%; top:66%; width:24px; }
.r2{ right:20%; top:62%; width:44px; }
.r3{ left:9%;  top:38%; width:52px; }
.r4{ right:12%; top:34%; width:18px; }

.reserve-head{
  position:relative;
  text-align:center;
  margin-bottom:clamp(50px,8vh,90px);
  z-index:2;
}
.reserve-title{
  font-family:var(--font-display);
  font-size:clamp(70px,14vw,220px);
  line-height:.95;
  color:var(--red);
  letter-spacing:.01em;
  white-space:nowrap;
}
.reserve-title .l-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}
.reserve-title .l{ display:inline-block; }
.reserve-script{
  font-family:var(--font-script);
  font-size:clamp(44px,6.5vw,90px);
  color:var(--foot-ink);
  margin-top:clamp(-60px,-3vw,-30px);
  transform:rotate(-4deg);
}
.reserve-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:clamp(24px,4vw,60px);
  align-items:start;
  max-width:1150px;
  margin:0 auto clamp(50px,8vh,90px);
}
.reserve-col h3{
  font-family:var(--font-display);
  font-size:15px; letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red-deep);
  margin-bottom:12px;
}
.reserve-col p{
  font-size:15px; line-height:1.7;
  color:var(--foot-body);
}
.reserve-col a:hover{ color:var(--red); }
.btn-big{
  font-size:14px;
  padding:20px 38px;
  background:var(--red);
}
.reserve-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:16px;
  justify-content:center;
  border-top:1px solid rgba(var(--red-deep-rgb),.18);
  padding-top:26px;
}
.foot-logo{ width:54px; opacity:.9; }
.reserve-foot p{
  font-size:12px; letter-spacing:.08em;
  color:var(--foot-small);
}

/* ══════════════════ RESPONSIVE ══════════════════ */

@media (max-width:1190px) and (min-width:901px){
  .card[data-side="right"] .plate-clip{ right:-7%; }
  .card[data-side="left"]  .plate-clip{ left:-7%; }
}

@media (max-width:900px){
  .cards{ grid-template-columns:1fr; row-gap:90px; }
  .card:nth-child(even){ transform:none; }
  .card-body{ width:70%; }
  .card[data-side="right"] .plate-clip{ right:-4%; }
  .card[data-side="left"]  .plate-clip{ left:-4%; }
  .reserve-grid{ grid-template-columns:1fr 1fr; }
  .rfork,.rknife{ height:32vh; }
}

@media (max-width:640px){
  #nav{ gap:12px; padding:14px 16px; }
  .brand{ font-size:22px; }
  .nav-links{ gap:6px; }
  .nav-links a{ font-size:11px; letter-spacing:.1em; padding:8px 10px; }
  #logoBtn{ width:44px; height:44px; }
  #logoBtnImg{ width:30px; }

  .spoon,.glass{ display:none; }
  .fork{ left:3vw; top:30vh; height:30vh; }
  .knife{ left:auto; right:3vw; top:29vh; height:32vh; }
  .napkin{ width:200px; }
  .folder{ width:190px; }
  .sprig{ display:none; }
  .hero-info{ max-width:240px; padding:16px 18px; }
  .hero-info-script{ font-size:28px; }
  .hero-price{ font-size:34px; }
  .script-accent{ top:36%; }

  .card{ min-height:0; }
  .card-body{ width:100%; padding:24px; }
  .plate-clip,
  .card[data-side="left"] .plate-clip,
  .card[data-side="right"] .plate-clip{
    position:relative;
    left:auto; right:auto; top:auto;
    transform:none;
    width:min(240px,62%);
    margin:-46px auto -6px;
  }
  .card p{ font-size:13px; max-width:none; }
  .card[data-side="left"] .card-body{ text-align:left; margin-left:0; }
  .card[data-side="left"] p{ margin-left:0; }
  .card[data-side="left"] .card-foot{ justify-content:flex-start; }

  .reserve-grid{ grid-template-columns:1fr; }
  .rfork,.rknife{ display:none; }
}

/* ══════════════════ REDUCED MOTION ══════════════════ */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}