@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&family=Fraunces:opsz,wght@9..144,700&display=swap');

/* ============ TOKENS: palette + light direction ============ */
:root {
  --puri-base: #d9912f;
  --puri-light: #f5c968;
  --puri-shadow: #8b461e;
  --chutney: #55301f;
  --leaf: #769447;
  --leaf-shadow: #314e2c;
  --pudina: #4f8f3f;
  --pudina-deep: #2f6337;
  --terracotta: #b4632f;
  --terracotta-dark: #7c3c1d;
  --steel: #c3ccd4;
  --key-x: 28%;
  --key-y: 18%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  color: #3b2117;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 225, 158, .5), transparent 28rem),
    linear-gradient(145deg, #e7c58a 0%, #c98852 48%, #a74d32 100%);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

.page-shell {
  width: min(100%, 1100px);
  min-height: 100svh;
  margin: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
}

/* ============ MASTHEAD ============ */
.masthead { position: relative; z-index: 20; }
.eyebrow {
  margin: 0 0 .2rem;
  color: #742e20;
  font-size: clamp(.68rem, 1.3vw, .85rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #582518;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  line-height: .9;
  text-shadow:
    0 1px 0 rgba(255, 236, 180, .55),
    0 3px 0 rgba(120, 46, 26, .25),
    0 10px 22px rgba(90, 32, 18, .3);
}

.subtitle {
  margin: .7rem 0 1.6rem;
  color: #6a3020;
  font-size: clamp(.9rem, 2vw, 1.1rem);
}

/* ============ BASE SCENE ============ */
.food-stage {
  position: relative;
  width: min(94vw, 760px);
  aspect-ratio: 1.02;
  margin: clamp(-1.5rem, -2.5vw, -.5rem) auto -1rem;
  isolation: isolate;
  filter: drop-shadow(0 1.8rem 1.4rem rgba(88, 32, 20, .12));
}

.food-stage figcaption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.table-grain {
  position: absolute;
  inset: -18% -12%;
  z-index: -3;
  opacity: .3;
  background:
    repeating-linear-gradient(102deg, transparent 0 7%, rgba(91, 42, 25, .12) 7.2%, transparent 7.6% 15%),
    repeating-linear-gradient(4deg, transparent 0 19px, rgba(255, 238, 195, .15) 20px, transparent 22px);
  mix-blend-mode: multiply;
}
/* Radial vignette + warm reflected bounce that seats the plate on the table. */
.food-stage::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 214, 148, .22) 0 18%, transparent 46%),
    radial-gradient(ellipse at 50% 78%, rgba(60, 28, 16, .3), transparent 60%);
}

/* ============ BACKGROUND: STREET CART ============ */
.street-cart {
  position: absolute;
  left: 3%; right: 3%; top: -4%;
  height: 58%;
  z-index: -2;
  filter: drop-shadow(10px 14px 12px rgba(76, 33, 21, .22));
}

.cart-canopy {
  position: absolute;
  left: 2%; top: 0;
  width: 96%; height: 22%;
  border-radius: 5px 5px 14px 14px;
  background: repeating-linear-gradient(90deg, #f4d272 0 10%, #a83e28 10% 20%);
  box-shadow: inset 0 7px 10px rgba(255, 235, 158, .4), 0 8px 10px rgba(82, 34, 22, .28);
  transform: perspective(540px) rotateX(-8deg);
  transform-origin: 50% 0;
  animation: canopy-bob 6s ease-in-out infinite;
  overflow: hidden;
}
@keyframes canopy-bob {
  0%, 100% { transform: perspective(540px) rotateX(-8deg) translateY(0); }
  50%      { transform: perspective(540px) rotateX(-9.4deg) translateY(-1.6%); }
}
.cart-canopy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(6deg, transparent 0 11px, rgba(91, 34, 24, .1) 12px, transparent 14px);
  mix-blend-mode: multiply;
}
.awning-valance {
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 48%;
  background: repeating-linear-gradient(90deg, #a83e28 0 10%, #f4d272 10% 20%);
  box-shadow: 0 6px 8px rgba(72, 26, 20, .34);
  clip-path: polygon(0 0, 100% 0, 100% 52%, 96% 100%, 92% 60%, 86% 100%, 80% 58%, 74% 100%, 68% 58%, 62% 100%, 56% 58%, 50% 100%, 44% 58%, 38% 100%, 32% 58%, 26% 100%, 20% 58%, 14% 100%, 8% 60%, 4% 100%, 0 60%);
}

.cart-post {
  position: absolute;
  top: 16%; bottom: 9%; width: 1.8%;
  border-radius: 3px;
  background: linear-gradient(90deg, #603426, #d8a85e 38%, #7a4630 72%, #48271e);
  box-shadow: 4px 5px 6px rgba(66, 29, 20, .22);
}
.cart-post--left { left: 5%; }
.cart-post--right { right: 5%; }

.cart-sign {
  position: absolute;
  left: 37%; top: 12%;
  width: 26%; height: 12%;
  display: grid;
  place-items: center;
  border: 4px solid #f2c75e;
  border-radius: 4px;
  color: #ffe8a3;
  background: linear-gradient(145deg, #a63725, #70251d);
  box-shadow: 0 5px 8px rgba(67, 28, 20, .35), inset 0 0 0 2px rgba(121, 42, 29, .8);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(.46rem, 1.4vw, .84rem);
  letter-spacing: .08em;
  transform: rotate(-1deg);
}

.cart-counter {
  position: absolute;
  left: 1%; right: 1%; top: 55%; height: 9%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(#f0d19a 0 13%, #947560 17%, #5f493f 52%, #302a27 100%);
  box-shadow: 0 7px 8px rgba(61, 29, 21, .34), inset 0 4px 3px rgba(255, 241, 195, .46);
}

.cart-base {
  position: absolute;
  left: 8%; right: 8%; top: 61%; height: 30%;
  border: 5px solid #674532;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 12%, rgba(68, 47, 39, .08) 12% 24%),
    linear-gradient(135deg, #c7773c, #98472e 60%, #703224);
  box-shadow: inset 10px 9px 12px rgba(239, 162, 84, .2), inset -10px -8px 14px rgba(81, 31, 23, .3);
}
.cart-panel-line { position: absolute; left: 49.5%; top: 0; bottom: 0; width: 1%; background: #69402d; box-shadow: 2px 0 rgba(222, 132, 62, .24); }

.cart-wheel {
  position: absolute;
  bottom: -3%; width: 15%; aspect-ratio: 1;
  border: clamp(6px, 1.1vw, 11px) solid #241d1a;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 47%, #76563d 48% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, #76563d 48% 52%, transparent 53%),
    radial-gradient(circle, #b6773f 0 13%, #3d302a 14% 19%, #bb8d57 20% 23%, transparent 24%);
  box-shadow: 6px 10px 10px rgba(66, 31, 22, .4);
}
.cart-wheel--left { left: 13%; }
.cart-wheel--right { right: 13%; }

/* ============ GOODS ON THE CART COUNTER ============ */
.cart-goods { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* --- Glass display box of puris (left) --- */
.puri-box {
  position: absolute;
  left: 9%; top: 8%;
  width: 30%; height: 24%;
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(232, 244, 250, .55), rgba(255,255,255,.16) 40%, rgba(150, 185, 200, .22));
  box-shadow:
    0 4px 6px rgba(64, 32, 20, .28),
    0 14px 14px -6px rgba(48, 22, 14, .5),
    inset 0 0 0 1px rgba(255,255,255,.35);
  overflow: hidden;
}
.box-inner {
  position: absolute;
  inset: 8% 6% 6%;
  border-radius: 4px;
  background: linear-gradient(#caa066, #a06a34 70%, #7a4a24);
  box-shadow: inset 0 6px 8px rgba(60, 32, 16, .45);
}
.puri-pile {
  position: absolute;
  inset: 8% 5% 12%;
  z-index: 1;
}
/* Individual fried puris loosely piled in the display box (no rigid tiling). */
.mini-puri {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 64% 62%, rgba(120, 52, 20, .3) 0 8%, transparent 16%),
    radial-gradient(ellipse at 38% 32%, var(--puri-light) 0 20%, #e5a43f 46%, var(--puri-base) 68%, #9c5220 92%, transparent 100%);
  box-shadow:
    inset -2px -3px 4px rgba(108, 46, 21, .35),
    inset 2px 2px 3px rgba(255, 227, 134, .4),
    1px 2px 3px rgba(60, 32, 18, .45);
}
/* Smaller puris packed in a fuller pile — sized down for background distance. */
.mp--1  { left: 4%;  top: 14%; width: 18%; transform: rotate(-8deg); }
.mp--2  { left: 24%; top: 10%; width: 19%; transform: rotate(6deg); }
.mp--3  { left: 45%; top: 13%; width: 18%; transform: rotate(-5deg); }
.mp--4  { left: 66%; top: 11%; width: 17%; transform: rotate(10deg); }
.mp--5  { left: 0%;  top: 34%; width: 19%; transform: rotate(4deg); z-index: 2; }
.mp--6  { left: 20%; top: 32%; width: 20%; transform: rotate(-9deg); z-index: 2; }
.mp--7  { left: 41%; top: 34%; width: 19%; transform: rotate(11deg); z-index: 2; }
.mp--8  { left: 62%; top: 33%; width: 18%; transform: rotate(-6deg); z-index: 2; }
.mp--9  { left: 80%; top: 36%; width: 16%; transform: rotate(9deg); }
.mp--10 { left: 8%;  top: 55%; width: 19%; transform: rotate(-4deg); z-index: 3; }
.mp--11 { left: 30%; top: 57%; width: 20%; transform: rotate(7deg); z-index: 3; }
.mp--12 { left: 52%; top: 55%; width: 19%; transform: rotate(-10deg); z-index: 3; }
.box-glass {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(128deg, rgba(255,255,255,.5) 0 6%, rgba(255,255,255,.14) 14% 22%, transparent 34% 62%, rgba(255,255,255,.16) 70% 76%);
  mix-blend-mode: screen;
}
.box-frame {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 3px solid rgba(176, 190, 198, .85);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 4px rgba(60,40,30,.25);
}
.box-label {
  position: absolute;
  left: 0; right: 0; bottom: 5%;
  text-align: center;
  color: rgba(72, 40, 24, .72);
  font-size: clamp(.34rem, .9vw, .5rem);
  font-weight: 600;
  letter-spacing: .1em;
}

/* --- Cloth-covered earthen pot with pudina water (right) --- */
.cloth-matka {
  position: absolute;
  right: 9%; top: 9%;
  width: 22%; height: 24%;
  filter: drop-shadow(4px 8px 8px rgba(48, 22, 14, .34));
}
/* Contact shadow that seats the pot on the cart counter. */
.cloth-matka::before {
  content: "";
  position: absolute;
  left: 6%; right: 2%; bottom: -4%; height: 16%;
  border-radius: 50%;
  background: rgba(56, 24, 12, .42);
  filter: blur(5px);
  z-index: -1;
}
.matka-body {
  position: absolute;
  left: 6%; right: 6%; top: 14%; bottom: 0;
  border-radius: 44% 44% 46% 46% / 26% 26% 64% 64%;
  background: radial-gradient(ellipse at 34% 26%, #d68a4d 0 8%, var(--terracotta) 40%, #96501f 74%, var(--terracotta-dark) 100%);
  box-shadow: inset 8px 5px 9px rgba(255, 214, 150, .3), inset -9px -7px 12px rgba(90, 40, 18, .4), 5px 9px 9px rgba(64, 30, 18, .3);
}

/* Maroon cloth draped across the lower half of the pot. */
.matka-cloth {
  position: absolute;
  left: 1%; right: 1%; top: 50%; bottom: -3%;
  z-index: 2;
  border-radius: 42% 42% 46% 46% / 24% 24% 74% 74%;
  background:
    linear-gradient(112deg, rgba(255,255,255,.14) 0 6%, transparent 18%),
    repeating-linear-gradient(80deg, rgba(0,0,0,.15) 0 5px, transparent 5px 15px),
    linear-gradient(160deg, #a83039, #7c1f2b 54%, #551520);
  box-shadow: inset -8px -8px 12px rgba(60, 14, 22, .5), inset 8px 6px 10px rgba(255, 150, 150, .18), 3px 7px 8px rgba(70, 20, 24, .3);
  clip-path: polygon(0 10%, 10% 2%, 22% 8%, 34% 1%, 46% 8%, 58% 1%, 70% 8%, 82% 2%, 92% 8%, 100% 12%, 100% 74%, 92% 96%, 84% 80%, 74% 100%, 64% 82%, 52% 100%, 40% 82%, 30% 100%, 20% 82%, 10% 98%, 0 76%);
}
/* Soft vertical folds in the draped cloth. */
.cloth-fold {
  position: absolute;
  z-index: 3;
  top: 54%; bottom: 4%;
  width: 8%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,150,150,.18), rgba(60,14,22,.32));
  filter: blur(1px);
}
.cf--1 { left: 30%; transform: rotate(4deg); }
.cf--2 { left: 60%; transform: rotate(-6deg); }
/* Leafy garland tied around the pot's waist. */
.matka-garland {
  position: absolute;
  z-index: 3;
  left: 0%; right: 0%; top: 44%; height: 12%;
  border-radius: 50%;
  background: linear-gradient(#5f8a34, #3c6a2c);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.22), 0 3px 4px rgba(30, 54, 24, .34);
}
.garland-leaf {
  position: absolute;
  z-index: 4;
  top: 43%;
  width: 10%; height: 10%;
  border-radius: 0 78% 0 78% / 0 78% 0 78%;
  background: radial-gradient(circle at 32% 28%, #94bd52, #3f6d35 72%, #2b5626);
  box-shadow: 1px 1px 2px rgba(30, 54, 24, .35);
}
.gl--1 { left: 1%;  transform: rotate(-34deg); }
.gl--2 { left: 15%; transform: rotate(22deg) scale(.9); }
.gl--3 { left: 29%; transform: rotate(-18deg); }
.gl--4 { left: 44%; transform: rotate(28deg) scale(.95); }
.gl--5 { left: 58%; transform: rotate(-24deg) scale(.9); }
.gl--6 { left: 72%; transform: rotate(20deg); }
.gl--7 { left: 85%; transform: rotate(-30deg) scale(.85); }
/* Knot where the garland is tied. */
.cloth-knot {
  position: absolute;
  z-index: 5;
  left: 40%; top: 42%; width: 20%; height: 14%;
  border-radius: 52% 48% 60% 40%;
  background: radial-gradient(circle at 38% 32%, #6f9a3e, #3c6a2c 68%, #2b5626);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.25), 0 4px 5px rgba(30, 54, 24, .3);
  transform: rotate(-6deg);
}
.matka-mouth {
  position: absolute;
  left: 22%; right: 22%; top: 8%; height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #3a2416 0 55%, #6a4326 90%);
  box-shadow: 0 3px 4px rgba(40, 20, 12, .4), inset 0 -3px 4px rgba(20, 10, 6, .6);
}
.matka-water {
  position: absolute;
  left: 25%; right: 25%; top: 10%; height: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 34%, rgba(220, 235, 142, .7) 0 6%, transparent 12%),
    radial-gradient(ellipse at 50% 45%, #7fae4f 0 30%, var(--pudina) 62%, var(--pudina-deep) 100%);
  box-shadow: inset 0 2px 3px rgba(230, 240, 160, .5), inset 0 -3px 4px rgba(20, 55, 25, .5);
  animation: water-ripple 5s ease-in-out infinite;
}
@keyframes water-ripple {
  0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(230, 240, 160, .5), inset 0 -3px 4px rgba(20, 55, 25, .5); }
  50%      { transform: scale(1.03, .96); box-shadow: inset 0 3px 5px rgba(230, 240, 160, .6), inset 0 -4px 6px rgba(20, 55, 25, .55); }
}
.matka-mint { position: absolute; width: 8%; height: 5%; border-radius: 70% 20%; background: #3f6d35; z-index: 2; }
.mm--1 { left: 40%; top: 12%; transform: rotate(20deg); }
.mm--2 { right: 33%; top: 15%; transform: rotate(-28deg); }
.mm--3 { left: 46%; top: 16%; transform: rotate(70deg) scale(.8); }
.matka-glint { position: absolute; left: 12%; top: 30%; width: 9%; height: 26%; border-radius: 50%; background: rgba(255, 236, 200, .5); filter: blur(3px); }

/* --- Condiment bowls on the counter (between box and matka) --- */
.counter-bowl {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(2px 5px 5px rgba(52, 26, 16, .34));
}
.bowl--onion { left: 42%; top: 22%; width: 11%; height: 10.5%; }
.bowl--lemon { left: 58%; top: 22.5%; width: 11%; height: 10%; }
.bowl-body {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 82%;
  border-radius: 14% 14% 50% 50% / 20% 20% 100% 100%;
  background: linear-gradient(#eef2f5 0 12%, #c3ccd4 32%, #99a3ac 76%, #7c868f);
  box-shadow: inset 0 3px 3px rgba(255,255,255,.55), inset 0 -4px 5px rgba(70, 82, 94, .5);
}
.bowl-rim {
  position: absolute;
  left: -2%; right: -2%; top: -6%; height: 44%;
  border-radius: 50%;
  border: 2px solid rgba(205, 213, 219, .9);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), 0 2px 3px rgba(60, 40, 30, .28);
  z-index: 4;
}
/* Food mound doming up out of the bowl, framed by the rim. */
.bowl-food {
  position: absolute;
  left: 4%; right: 4%; top: -8%; height: 64%;
  z-index: 3;
  border-radius: 50%;
}
/* Diced red onion — distinct cubes matching the plate's onion garnish. */
.bowl-food--onion {
  background: radial-gradient(ellipse at 50% 58%, #e9cfe6, #b98fb5 92%);
  box-shadow: inset 0 -3px 4px rgba(90, 44, 82, .35);
}
.onion-cube {
  position: absolute;
  width: 32%; height: 32%;
  border-radius: 2px;
  background: linear-gradient(140deg, #ffffff, #f3e0f0 42%, #c98fc4 100%);
  box-shadow: 0 0 0 1px rgba(120, 60, 110, .5), 1px 1px 1px rgba(56, 22, 42, .3);
}
.oc--1 { left: 8%;  top: 18%; transform: rotate(12deg); }
.oc--2 { left: 44%; top: 8%;  transform: rotate(-14deg); }
.oc--3 { left: 28%; top: 42%; transform: rotate(6deg); }
.oc--4 { left: 60%; top: 38%; transform: rotate(-8deg) scale(.9); }
/* Chopped lemon — distinct wedges with green rind and pale pulp. */
.bowl-food--lemon {
  background: radial-gradient(ellipse at 50% 58%, #e2ea86, #b7c73a 92%);
  box-shadow: inset 0 -3px 4px rgba(120, 130, 30, .35);
}
.lemon-piece {
  position: absolute;
  width: 42%; height: 46%;
  border-radius: 62% 62% 12% 12% / 86% 86% 18% 18%;
  background: radial-gradient(ellipse at 50% 96%, #fdfbde 0 36%, #eef19a 68%, #e2e77e 100%);
  box-shadow: inset 0 -2px 2px rgba(170, 180, 60, .5), 1px 1px 2px rgba(90, 90, 20, .32);
  overflow: hidden;
}
.lemon-piece::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 32%;
  border-radius: 62% 62% 0 0 / 100% 100% 0 0;
  background: linear-gradient(#cfe23e, #a9c22c);
}
.lp--1 { left: 6%;  top: 22%; transform: rotate(-16deg); }
.lp--2 { left: 42%; top: 12%; transform: rotate(14deg); }
.lp--3 { left: 28%; top: 46%; transform: rotate(-4deg) scale(.85); }

/* ============ GROUND SHADOW UNDER PLATE ============ */
.scene-shadow {
  position: absolute;
  left: 20%; right: 12%; bottom: 1%; height: 15%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(75, 33, 23, .42);
  filter: blur(22px);
  transform: rotate(-2deg);
}

/* ============ FOREGROUND: SERVING PLATE ============ */
.serving-plate {
  position: absolute;
  left: 11%; right: 11%; top: 55%;
  height: 43%;
  z-index: 5;
}
/* Steel plate rendered as a shallow ellipse to match the cart's angle,
   with a raised lip that catches the upper-left key light. */
.plate-disc {
  position: absolute;
  inset: 4% 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 26%, #ffffff 0 4%, #eef2f5 16%, var(--steel) 46%, #a4aeb7 72%, #8a949d 90%, #757f89 100%);
  box-shadow:
    inset 0 9px 14px rgba(255,255,255,.6),
    inset 0 -14px 20px rgba(74, 86, 98, .55),
    inset 14px 0 22px rgba(255,255,255,.18),
    inset -14px 0 22px rgba(74, 86, 98, .3),
    10px 18px 22px rgba(60, 40, 30, .34);
}
/* Outer lip: bright top edge, shadowed lower edge — sells the 3D rim. */
.plate-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.75),
    inset 0 -6px 8px rgba(70, 82, 94, .5);
}
/* Inner well recess where the food sits. */
.plate-rim {
  position: absolute;
  inset: 14% 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 44% 34%, rgba(255,255,255,.14), rgba(120, 132, 143, .12) 62%, transparent 80%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.4),
    inset 0 7px 12px rgba(108, 120, 132, .5),
    inset 0 -5px 9px rgba(255,255,255,.32);
}

/* --- Chickpea masala heap --- */
.masala-heap {
  position: absolute;
  left: 3%; top: 50%;
  width: 24%; height: 30%;
  z-index: 8;
  filter: drop-shadow(3px 6px 6px rgba(56, 30, 16, .38));
}
.heap-base {
  position: absolute;
  inset: 12% 0 0;
  border-radius: 50% 50% 48% 52% / 60% 60% 42% 42%;
  background: radial-gradient(ellipse at 40% 26%, #c8944a, #8a531f 74%);
  box-shadow: 3px 7px 7px rgba(60, 32, 16, .35), inset 0 4px 6px rgba(255, 214, 140, .3);
}
.heap-bean {
  position: absolute;
  width: 22%; aspect-ratio: 1;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(circle at 30% 24%, #f1d181 0 12%, #c8903d 50%, #8f592c 100%);
  box-shadow: inset -2px -3px 3px rgba(82, 44, 20, .3), 1px 3px 3px rgba(49, 29, 16, .45);
}
.hb--1 { left: 12%; top: 20%; }
.hb--2 { left: 40%; top: 12%; transform: scale(.9); }
.hb--3 { left: 62%; top: 26%; transform: scale(.82); }
.hb--4 { left: 30%; top: 40%; transform: scale(.78); }
.heap-potato {
  position: absolute;
  width: 24%; height: 20%;
  border-radius: 40% 60% 52% 48%;
  background: radial-gradient(circle at 32% 26%, #f3d882, #c69a44 80%);
  box-shadow: 2px 4px 4px rgba(49, 29, 16, .4);
}
.hp--1 { left: 46%; top: 40%; transform: rotate(12deg); }
.hp--2 { left: 6%; top: 44%; transform: rotate(-14deg) scale(.85); }
.heap-onion {
  position: absolute;
  width: 14%; height: 11%;
  border-radius: 3px;
  background: linear-gradient(#f6ecf5, #d4b3d2);
  box-shadow: 0 0 0 1px rgba(150, 92, 140, .55), 1px 2px 2px rgba(60, 30, 45, .3);
}
.ho--1 { left: 24%; top: 30%; transform: rotate(18deg); }
.ho--2 { left: 58%; top: 46%; transform: rotate(-10deg) scale(.85); }
.heap-herb {
  position: absolute;
  width: 12%; height: 13%;
  border-radius: 65% 20% 65% 20%;
  background: radial-gradient(circle at 25% 20%, #8dad4d, #315c2a 75%);
}
.hh--1 { left: 36%; top: 24%; transform: rotate(-20deg); }
.hh--2 { left: 66%; top: 40%; transform: rotate(40deg) scale(.85); }

/* --- Onion garnish pile --- */
.onion-pile { position: absolute; left: 21%; top: 66%; width: 20%; height: 26%; z-index: 8; filter: drop-shadow(2px 5px 5px rgba(48, 20, 34, .38)); }
.onion-ring {
  position: absolute;
  aspect-ratio: 1;
  /* Organic sliced-onion sliver: asymmetric outline, magenta skin fading to
     translucent white pulp, and a crescent break so it never reads as a ring. */
  border-radius: 52% 48% 50% 50% / 48% 53% 47% 52%;
  background: radial-gradient(circle at 52% 46%, transparent 0 40%,
    rgba(255, 249, 252, .74) 43% 51%,
    hsla(var(--ring-hue, 318), 40%, 66%, .5) 55% 64%,
    hsla(var(--ring-hue, 318), 55%, 44%, .85) 72% 82%,
    transparent 88%);
  clip-path: polygon(0 4%, 100% 0, 100% 60%, 60% 44%, 44% 80%, 0 68%);
  box-shadow: 1px 3px 3px rgba(56, 22, 42, .22);
  transform-origin: 50% 50%;
}
.or--1 { left: 2%; top: 4%; width: 60%; transform: rotate(-24deg); --ring-hue: 322; }
.or--2 { left: 42%; top: 24%; width: 50%; transform: rotate(30deg); --ring-hue: 300; }
.onion-dice {
  position: absolute;
  width: 18%; height: 18%;
  border-radius: 3px;
  background: linear-gradient(140deg, #ffffff, #f3e0f0 40%, #b979b5);
  box-shadow: 0 0 0 1px rgba(120, 60, 110, .55), 1px 2px 3px rgba(56, 22, 42, .32);
}
.od--1 { left: 6%; top: 66%; transform: rotate(20deg); }
.od--2 { left: 42%; top: 74%; transform: rotate(-16deg); }
.od--3 { left: 70%; top: 58%; transform: rotate(8deg) scale(.9); }

/* --- Lemon wedge: cool green-yellow accent against the warm palette --- */
.lemon-wedge {
  position: absolute;
  left: 20%; top: 40%;
  width: 15%; height: 13%;
  z-index: 9;
  transform: rotate(-18deg);
  filter: drop-shadow(3px 5px 4px rgba(52, 46, 14, .4));
}
.lemon-rind {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 6% 6% / 90% 90% 12% 12%;
  background: linear-gradient(150deg, #eaf36a, #cfe23e 46%, #a9c22c 100%);
  box-shadow: inset 0 -3px 4px rgba(120, 138, 30, .5), inset 0 3px 3px rgba(255,255,255,.5);
}
.lemon-flesh {
  position: absolute;
  inset: 14% 10% 6%;
  border-radius: 50% 50% 4% 4% / 92% 92% 8% 8%;
  background: radial-gradient(ellipse at 50% 98%, #fbf7c4 0 22%, #eef19a 55%, #e2e77e 100%);
  box-shadow: inset 0 -2px 3px rgba(190, 190, 90, .5);
}
.lemon-seg {
  position: absolute;
  bottom: 8%;
  width: 24%; height: 66%;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(#fdfbde, #edf097 88%);
  box-shadow: 0 0 0 1px rgba(206, 210, 120, .7);
  transform-origin: 50% 100%;
}
.ls--1 { left: 38%; transform: rotate(0deg); }
.ls--2 { left: 38%; transform: rotate(-30deg); }
.ls--3 { left: 38%; transform: rotate(30deg); }

/* --- Small glass of pudina water --- */
/* Grouped on the left flank with the other condiments; shortened so it plays
   a clear supporting role behind the hero open puri. */
.pudina-glass { position: absolute; left: 1%; top: 2%; width: 17%; height: 44%; z-index: 4; filter: drop-shadow(5px 9px 7px rgba(50, 30, 20, .42)); }
.pudina-glass::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -6%; height: 16%;
  border-radius: 50%;
  background: rgba(70, 40, 26, .32);
  filter: blur(5px);
}
.glass-body {
  position: absolute;
  inset: 0;
  border-radius: 12% 12% 26% 26% / 6% 6% 20% 20%;
  background: linear-gradient(100deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 34%, rgba(120, 160, 110, .16) 66%, rgba(255,255,255,.34));
  box-shadow: inset 6px 0 7px rgba(255,255,255,.4), inset -6px -3px 8px rgba(60, 90, 55, .2), 4px 9px 9px rgba(60, 34, 22, .28);
  border: 2px solid rgba(226, 238, 224, .55);
}
.glass-water {
  position: absolute;
  left: 6%; right: 6%; bottom: 5%; height: 66%;
  border-radius: 8% 8% 22% 22% / 5% 5% 18% 18%;
  background:
    radial-gradient(circle at 26% 22%, rgba(220, 235, 142, .7) 0 4%, transparent 8%),
    radial-gradient(circle at 68% 54%, rgba(214, 232, 140, .5) 0 4%, transparent 8%),
    linear-gradient(rgba(128, 172, 74, .82), var(--pudina) 55%, var(--pudina-deep));
  box-shadow: inset 0 6px 5px rgba(224, 238, 150, .35);
}
.glass-water::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3%; height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #9dc45f, #4f8f3f 80%);
  box-shadow: inset 0 2px 3px rgba(230, 240, 160, .5);
  animation: water-ripple 4.4s ease-in-out infinite .6s;
}
.glass-shine { position: absolute; left: 16%; top: 12%; width: 13%; height: 70%; border-radius: 50%; background: rgba(255,255,255,.6); filter: blur(2px); }
.mint-fleck { position: absolute; width: 12%; height: 7%; border-radius: 70% 20%; background: #3f6d35; z-index: 2; }
.mf--1 { left: 30%; top: 44%; transform: rotate(22deg); }
.mf--2 { left: 56%; top: 58%; transform: rotate(-30deg) scale(.85); }
.mf--3 { left: 40%; top: 66%; transform: rotate(60deg) scale(.7); }

/* ============ PURI: base, texture and lighting ============ */
.puri {
  position: absolute;
  z-index: 6;
  width: 21%;
  aspect-ratio: 1.05;
  border-radius: 48% 52% 46% 54% / 52% 48% 55% 45%;
  outline: none;
  background:
    radial-gradient(circle at 22% 20%, rgba(120, 52, 20, .42) 0 3%, transparent 6%),
    radial-gradient(circle at 62% 28%, rgba(120, 52, 20, .34) 0 2.4%, transparent 5%),
    radial-gradient(circle at 44% 58%, rgba(120, 52, 20, .36) 0 2.8%, transparent 5.4%),
    radial-gradient(circle at 74% 64%, rgba(120, 52, 20, .3) 0 2.4%, transparent 5%),
    radial-gradient(circle at 30% 76%, rgba(120, 52, 20, .3) 0 2.4%, transparent 5%),
    radial-gradient(circle at var(--key-x) var(--key-y), rgba(255, 238, 163, .92) 0 3%, transparent 10%),
    radial-gradient(ellipse at 35% 26%, var(--puri-light) 0 12%, #e5a43f 34%, var(--puri-base) 56%, #b86224 78%, var(--puri-shadow) 100%);
  box-shadow:
    inset 10px 8px 14px rgba(255, 227, 134, .34),
    inset -12px -13px 16px rgba(108, 46, 21, .34),
    5px 12px 12px rgba(77, 43, 24, .35);
  transform-origin: 50% 90%;
  transition: filter 220ms ease, transform 220ms ease;
  overflow: hidden;
}

/* CSS-only specular bloom that reveals on hover/focus — no JS pointer tracking. */
.puri::after,
.shell-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 32% 24%, rgba(255, 244, 195, .62), transparent 24%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 180ms ease;
}
.puri:hover::after, .puri:focus-visible::after,
.open-puri:hover .shell-front::after, .open-puri:focus-visible .shell-front::after { opacity: 1; }
.puri:hover, .puri:focus-visible { filter: saturate(1.1) brightness(1.05); }
.puri:focus-visible, .open-puri:focus-visible { outline: 3px solid rgba(255, 242, 182, .8); outline-offset: 5px; }

.puri-texture, .shell-texture {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .7;
  background:
    radial-gradient(circle at 18% 28%, rgba(116, 51, 20, .45) 0 1.1%, transparent 1.8%),
    radial-gradient(circle at 68% 20%, rgba(255, 225, 125, .58) 0 1.8%, rgba(130, 59, 22, .23) 2.3%, transparent 3.2%),
    radial-gradient(circle at 43% 58%, rgba(124, 53, 19, .4) 0 1.4%, transparent 2.4%),
    radial-gradient(circle at 75% 70%, rgba(255, 221, 117, .4) 0 2%, rgba(114, 47, 17, .3) 2.5%, transparent 4%),
    radial-gradient(circle at 25% 76%, rgba(128, 55, 19, .35) 0 1%, transparent 2%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(122, 54, 19, .08) 9px, transparent 11px);
  background-size: 52px 47px, 61px 56px, 43px 49px, 67px 64px, 39px 41px, 100% 100%;
  mix-blend-mode: multiply;
}

.puri-glint {
  position: absolute;
  left: 20%; top: 14%;
  width: 26%; height: 10%;
  border-radius: 50%;
  background: rgba(255, 239, 176, .72);
  filter: blur(4px);
  transform: rotate(-24deg);
}

/* Four closed puris inset from the rim so they rest inside the well */
.puri--p1 { left: 33%; top: 8%; transform: rotate(-10deg); }
.puri--p2 { right: 12%; top: 16%; transform: rotate(12deg) scale(.96); }
.puri--p3 { right: 10%; top: 42%; transform: rotate(8deg) scale(.94); }
.puri--p4 { right: 31%; top: 58%; transform: rotate(-9deg) scale(.92); }
.puri--p1:hover, .puri--p1:focus-visible { transform: rotate(-10deg) scale(1.06); }
.puri--p2:hover, .puri--p2:focus-visible { transform: rotate(12deg) scale(1.02); }
.puri--p3:hover, .puri--p3:focus-visible { transform: rotate(8deg) scale(1.0); }
.puri--p4:hover, .puri--p4:focus-visible { transform: rotate(-9deg) scale(.98); }

/* ============ OPEN, FILLED PURI ============ */
.open-puri {
  position: absolute;
  left: 34%; top: 20%;
  width: 32%; height: 48%;
  z-index: 7;
  outline: none;
  filter: drop-shadow(8px 14px 10px rgba(64, 35, 22, .38));
}
.shell-back {
  position: absolute;
  inset: 0 3% 8%;
  border-radius: 46% 54% 44% 56% / 44% 48% 55% 58%;
  background: radial-gradient(circle at 30% 18%, #f1c05a 0, #da8c2e 45%, #9a491f 100%);
  overflow: hidden;
}
.broken-rim {
  position: absolute;
  left: 9%; top: 3%; width: 82%; height: 43%;
  z-index: 2;
  clip-path: polygon(2% 42%, 9% 21%, 18% 28%, 25% 6%, 34% 22%, 43% 1%, 52% 18%, 62% 4%, 71% 23%, 81% 10%, 90% 30%, 98% 24%, 93% 100%, 6% 100%);
  background: linear-gradient(#793619 0 17%, #b46125 18% 36%, #efb94e 38% 100%);
  filter: drop-shadow(0 4px 2px rgba(78, 35, 18, .5));
}
.filling {
  position: absolute;
  left: 13%; top: 14%; width: 74%; height: 62%;
  z-index: 4;
  border-radius: 48% 52% 45% 55%;
  /* Lighter mid/base so sev, sprouts and boondi stay legible against it. */
  background: radial-gradient(ellipse at 40% 26%, #cf9350, #7a4a2b 62%, #5a331f 90%);
  box-shadow: inset 0 8px 12px rgba(48, 27, 17, .45), inset 0 -4px 7px rgba(30, 16, 9, .38), 0 5px 6px rgba(77, 35, 18, .45);
  overflow: visible;
}
/* Chaat-masala + chilli speckle scattered over the filling for crisp detail. */
.filling::after {
  content: "";
  position: absolute;
  inset: 4% 7% 12%;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 30%, #7a1f12 0 1.1%, transparent 1.9%),
    radial-gradient(circle at 60% 24%, #9c3312 0 .9%, transparent 1.6%),
    radial-gradient(circle at 44% 58%, #5c1a0c 0 1%, transparent 1.7%),
    radial-gradient(circle at 74% 64%, #8a2a12 0 .9%, transparent 1.5%),
    radial-gradient(circle at 32% 74%, #6e1e10 0 1%, transparent 1.7%),
    radial-gradient(circle at 54% 42%, #a83a16 0 .8%, transparent 1.4%);
  opacity: .8;
}
.shell-front {
  position: absolute;
  left: 1%; right: 1%; bottom: 0; height: 64%;
  z-index: 7;
  border-radius: 12% 14% 50% 50% / 10% 10% 61% 64%;
  clip-path: polygon(0 17%, 9% 6%, 18% 15%, 29% 3%, 39% 13%, 50% 5%, 61% 16%, 72% 4%, 82% 14%, 92% 7%, 100% 18%, 98% 100%, 2% 100%);
  background: radial-gradient(circle at 27% 18%, #efbc54 0, #d9882b 43%, #a44f20 80%, #75351a 100%);
  box-shadow: inset 8px 4px 10px rgba(255, 217, 113, .28), inset -10px -10px 13px rgba(91, 37, 17, .32);
  overflow: hidden;
}

.potato, .chickpea, .boondi, .chutney, .cilantro, .sev, .sprout { position: absolute; display: block; }
.potato {
  width: 28%; height: 25%;
  border-radius: 42% 58% 53% 47%;
  background: radial-gradient(circle at 30% 24%, #f7dc8c 0 18%, #dcac52 60%, #b07f38 90%);
  box-shadow: inset 1px 2px 2px rgba(255, 240, 200, .5), inset -2px -3px 3px rgba(90, 52, 22, .3), 2px 4px 4px rgba(49, 29, 16, .4);
}
.potato--one { left: 12%; top: 12%; transform: rotate(-13deg); }
.potato--two { left: 50%; top: 4%; transform: rotate(18deg) scale(.9); }

.chickpea {
  width: 16%; aspect-ratio: 1;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(circle at 30% 24%, #f5d59f 0 14%, #e5b36a 42%, #b47b34 78%, #8f592c 100%);
  box-shadow: inset 1px 2px 2px rgba(255, 240, 200, .5), inset -2px -3px 3px rgba(82, 44, 20, .35), 1px 3px 3px rgba(49, 29, 16, .5);
}
.chickpea--one { left: 26%; top: -4%; }
.chickpea--two { left: 60%; top: 18%; transform: scale(.9); }
.chickpea--three { left: 38%; top: 22%; transform: scale(.8); }

.chutney {
  width: 32%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 24%, #c47d3a 0 6%, #8a3d1c 36%, #5e2f1b 82%);
  box-shadow: 0 3px 5px rgba(47, 20, 14, .55), inset 1px 2px 3px rgba(255, 200, 120, .5), inset 0 -3px 4px rgba(40, 18, 10, .6);
}
.chutney--one { left: 12%; top: 56%; transform: rotate(10deg); z-index: 5; }
.chutney--two { right: 8%; top: 30%; transform: rotate(-17deg) scale(.72); z-index: 5; }

/* Tamarind chutney dripping over the front rim of the shell */
.chutney-drip {
  position: absolute;
  left: 30%; top: -4%;
  width: 20%; height: 60%;
  z-index: 8;
  border-radius: 45% 45% 50% 50% / 20% 20% 80% 80%;
  background: linear-gradient(#7a3c1f, #6a3319 55%, #542814);
  box-shadow: inset 2px 0 2px rgba(255, 190, 110, .4), inset -2px 0 3px rgba(38, 18, 10, .5);
  filter: drop-shadow(1px 2px 2px rgba(40, 20, 12, .4));
}
.chutney-drip::after {
  content: "";
  position: absolute;
  left: 24%; bottom: -8%;
  width: 55%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #a4562a, #6a3319 60%, #4c2412);
  box-shadow: inset 1px 1px 2px rgba(255, 200, 120, .45);
}

.boondi {
  width: 10%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #f4ce54, #c78327 72%);
  box-shadow: 1px 2px 2px rgba(66, 34, 18, .4);
}
.boondi--one { left: 9%; top: 25%; }
.boondi--two { left: 73%; top: 40%; transform: scale(.78); }
.boondi--three { left: 46%; top: 14%; transform: scale(.65); }

.sev { width: 22%; height: 2.5px; border-radius: 50%; background: #f0d259; box-shadow: 0 1px rgba(142, 92, 37, .8); z-index: 6; }
.sev--one { left: 18%; top: 17%; transform: rotate(22deg); }
.sev--two { left: 48%; top: 20%; transform: rotate(-32deg); }
.sev--three { left: 34%; top: 63%; transform: rotate(15deg); }
.sev--four { left: 62%; top: 60%; transform: rotate(-8deg); }
.sev--five { left: 24%; top: 40%; width: 26%; transform: rotate(-14deg); }
.sev--six { left: 52%; top: 44%; width: 18%; transform: rotate(28deg); }
.sev--seven { left: 30%; top: 30%; width: 24%; transform: rotate(6deg); }
.sev--eight { left: 58%; top: 34%; width: 20%; transform: rotate(-22deg); }

.sprout { width: 23%; height: 15%; border: 2px solid #e7dfb0; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.sprout::after { content: ""; position: absolute; right: -2px; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #779449; }
.sprout--one { left: 18%; top: 9%; transform: rotate(-18deg); }
.sprout--two { left: 58%; top: 8%; transform: rotate(30deg) scale(.8); }
.sprout--three { left: 48%; top: 54%; transform: rotate(155deg) scale(.65); }

.cilantro { width: 15%; height: 17%; border-radius: 65% 20% 65% 20%; background: radial-gradient(circle at 25% 20%, #8dad4d, #315c2a 75%); box-shadow: 1px 2px 2px rgba(30, 54, 24, .4); z-index: 9; }
.cilantro--one { left: 22%; top: -8%; transform: rotate(-25deg); }
.cilantro--two { left: 66%; top: 4%; transform: rotate(38deg) scale(.85); }
.cilantro--three { left: 46%; top: 30%; transform: rotate(88deg) scale(.75); }

/* Steam rising from the freshly filled puri */
.steam {
  position: absolute;
  left: 26%; top: 4%;
  width: 48%; height: 60%;
  z-index: 3;
  pointer-events: none;
}
.steam-wisp {
  position: absolute;
  bottom: 0;
  width: 26%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255, 250, 240, 0), rgba(255, 250, 240, .5) 45%, rgba(255,255,255,.05) 100%);
  filter: blur(4px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: steam-rise 4s ease-in-out infinite;
}
.sw--1 { left: 10%; animation-delay: 0s; }
.sw--2 { left: 40%; height: 118%; animation-delay: 1.3s; }
.sw--3 { left: 66%; animation-delay: 2.4s; }

@keyframes steam-rise {
  0%   { opacity: 0; transform: translateY(18%) scaleX(.7); }
  30%  { opacity: .8; }
  70%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-40%) scaleX(1.3) skewX(8deg); }
}

/* ============ HINT ============ */
.hint {
  z-index: 20;
  margin: 0 auto;
  padding: .38rem .8rem;
  width: max-content;
  max-width: 90%;
  color: rgba(74, 34, 22, .8);
  font-size: .74rem;
  letter-spacing: .06em;
  background: linear-gradient(#fdf1cf, #f6e2ac);
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(74, 34, 22, .2), inset 0 1px 0 rgba(255,255,255,.6);
  transform: rotate(-1deg);
}
.hint span { display: inline-block; width: .45rem; aspect-ratio: 1; margin-right: .4rem; border-radius: 50%; background: #f3c658; box-shadow: 0 0 0 4px rgba(243, 198, 88, .18); }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  .page-shell { min-height: 100svh; padding: 1.25rem .8rem 1rem; grid-template-rows: auto auto 1fr auto; }
  .masthead { padding-inline: .5rem; text-align: center; }
  .subtitle { margin-bottom: .8rem; }
  /* Enlarge the plate scene relative to the cart so detail stays legible. */
  .food-stage { width: 100%; margin: 0 auto; align-self: start; aspect-ratio: .92; }
  .street-cart { top: -2%; height: 50%; }
  .serving-plate { top: 50%; height: 48%; left: 6%; right: 6%; }
  .table-grain { inset: -18% 0; }
  .hint { font-size: .68rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}