/* What I bring to the table: Shreya's painted thali on a red-checked gamcha, a dish served for each strength,
   and a handwritten cabin-style menu card beside it (scripts/scenes/table.js). */

.table {
  --brass: #c9973a;
  --brass-hi: #f3d488;
  --brass-lo: #8a5f1c;
  --card: #f8f0de;
  --ink: #2a1f1a;
  --red: #a3261f;
  position: relative;
  background: #e9dcc4;
  color: var(--ink);
}

.table__walk { position: relative; height: 280svh; }

/* The table: a gamcha — cream cotton checked in red, with a few thin stripes — softly lit from the middle. */
.table__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(24px, 5svh, 56px) max(20px, 6vw);
  background:
    radial-gradient(70% 70% at 40% 50%, rgba(255, 248, 232, 0.35), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(60, 20, 10, 0.3) 100%),
    repeating-linear-gradient(90deg, transparent 0 56px, rgba(163, 38, 31, 0.5) 56px 72px, transparent 72px 78px, rgba(163, 38, 31, 0.35) 78px 80px, transparent 80px 112px),
    repeating-linear-gradient(0deg, transparent 0 56px, rgba(163, 38, 31, 0.5) 56px 72px, transparent 72px 78px, rgba(163, 38, 31, 0.35) 78px 80px, transparent 80px 112px),
    #efe3cb;
}

.table__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain, none);
  mix-blend-mode: multiply;
}

.table__stage > * { position: relative; z-index: 1; }

/* ── The thali: Shreya's painting of it, the dishes lifted out as separate pieces ── */

.thali {
  --d: min(76svh, 42vw);
  position: relative;
  justify-self: center;
  width: var(--d);
  aspect-ratio: 930 / 892;
}

/* The plate, with the rice, the lemon and the leaf; the spaces left for the dishes are bare leaf. It slides in
   under the light as the section arrives. */
.thali__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 28px 30px rgba(50, 20, 5, 0.45));
  opacity: calc(0.25 + var(--plate, 1) * 0.75);
  scale: calc(0.92 + var(--plate, 1) * 0.08);
}

/* A dish: set back in its own place on the plate. It comes down from above, a touch large and in shadow, and
   lands (tools.js-style back-out, from table.js). */
.katori {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--lift, 0) * -42svh))
    scale(calc(1 + var(--lift, 0) * 0.25));
  opacity: clamp(0, calc(var(--serve, 1) * 3), 1);
  filter: drop-shadow(0 calc(3px + var(--lift, 0) * 40px) calc(4px + var(--lift, 0) * 30px) rgba(40, 15, 5, calc(0.35 - var(--lift, 0) * 0.15)));
  transition: scale 0.35s var(--ease-out);
}

.katori img { display: block; width: 100%; height: 100%; }

/* Its number, on a little tag at its edge. */
.katori__num {
  position: absolute;
  right: 4%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: max(20px, calc(var(--d) * 0.045));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card);
  color: var(--red);
  font-family: 'Noto Serif Bengali', var(--font-display);
  font-size: max(11px, calc(var(--d) * 0.026));
  line-height: 1;
  box-shadow: 0 2px 4px rgba(50, 20, 5, 0.35);
}

.katori.is-served.is-lit,
.katori.is-served:focus-visible {
  scale: 1.08;
  filter: drop-shadow(0 0 14px rgba(255, 236, 170, 0.95)) drop-shadow(0 6px 8px rgba(40, 15, 5, 0.35));
  outline: none;
}

/* ── The menu card ── */

.menu {
  justify-self: start;
  max-width: 34rem;
  padding: clamp(24px, 4svh, 40px) clamp(22px, 3vw, 40px) clamp(20px, 3svh, 30px);
  background: var(--card);
  color: var(--ink);
  border-radius: 4px;
  box-shadow:
    0 0 0 6px var(--card),
    0 0 0 7px rgba(163, 38, 31, 0.5),
    0 26px 40px -24px rgba(50, 20, 5, 0.65);
  rotate: 1.4deg;
}

.menu__kicker {
  margin: 0 0 0.6em;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.menu__kicker span { font-family: 'Noto Serif Bengali', var(--font-display); letter-spacing: 0.02em; text-transform: none; font-size: 1.15em; }

/* Set like "Open Source Projects". */
.menu__title {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  line-height: 1;
  letter-spacing: -0.015em;
}

.menu__title em { font-style: italic; color: var(--red); }

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed rgba(42, 31, 26, 0.35);
}

/* Each line, written in as its dish is served. */
.menu__item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.6rem;
  padding: 0.6em 0.4em;
  border-bottom: 1px dashed rgba(42, 31, 26, 0.35);
  border-radius: 6px;
  opacity: calc(0.12 + var(--write, 1) * 0.88);
  translate: calc((1 - var(--write, 1)) * 14px) 0;
  transition: background 0.3s;
  cursor: default;
}

.menu__num {
  font-family: 'Noto Serif Bengali', var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--red);
}

.menu__text { display: grid; gap: 0.1em; }

.menu__text strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  font-variation-settings: 'opsz' 36;
}

.menu__text span {
  font-family: 'Figtree', var(--font-ui);
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  line-height: 1.45;
  color: rgba(42, 31, 26, 0.75);
}

.menu__item.is-lit { background: rgba(242, 193, 58, 0.22); }

.menu__foot {
  margin: 0.9em 0 0;
  text-align: right;
  font-family: 'Cedarville Cursive', cursive;
  font-size: 1rem;
  color: rgba(42, 31, 26, 0.7);
}

/* Tall screens: the thali above, the menu below, both smaller. */
@media (max-aspect-ratio: 1/1) {
  .table__walk { height: 240svh; }
  .table__stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-content: center;
    gap: 14px;
    padding: 18px 16px;
  }
  .thali { --d: min(40svh, 82vw); }
  .menu { justify-self: center; padding: 16px 18px 12px; rotate: 0.8deg; }
  .menu__title { font-size: 1.9rem; margin-bottom: 0.4em; }
  .menu__item { padding: 0.35em 0.2em; }
  .menu__text span { font-size: 0.74rem; line-height: 1.35; }
  .menu__text strong { font-size: 0.92rem; }
  .menu__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .table__walk { height: auto; }
  .table__stage { position: relative; min-height: 100svh; }
}