/* ==========================================================================
   Origins — a page about where each dish came from, and what this kitchen
   did with it.

   Inherits every token from site.css. This file adds only what the story
   page needs: the route ribbon, the dish plates, the chapter rhythm.

   WHY THE ART IS DRAWN AND NOT PHOTOGRAPHED
   There are photographs of this shop, and they are on the home page. There
   are no photographs of a plate of ghugni in fourteenth-century Lhasa, and
   stock food photography of somebody else's momo would be a small lie in a
   site built on not telling them. So each dish is drawn, in the same three
   colours the rest of the site uses, and drawn art never pretends to be
   evidence.
   ========================================================================== */

/* ==========================================================================
   The origins index — seven cards instead of one endless scroll
   ========================================================================== */

.dishgrid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.dishcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dishcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(var(--text-rgb),.06), 0 22px 44px -22px rgba(var(--text-rgb),.5);
}
/* The plate is square and dark inside a card too, so the seven drawings read
   as one set whichever page they appear on. */
.dishcard .plate { position: static; border-radius: 0; aspect-ratio: 4/3; }
.dishcard .plate svg { width: 56%; }
.dishcard__body { padding: 1rem 1.2rem 1.3rem; }
.dishcard__no {
  font-family: var(--hand); font-size: 1.3rem; color: var(--marigold); line-height: 1;
}
.dishcard h3 {
  margin: .1rem 0 .25rem; font-family: var(--display-bn); font-size: 1.35rem; font-weight: 700;
}
html[data-lang="en"] .dishcard h3 { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1; }
.dishcard__sub { margin: 0 0 .7rem; font-size: .9rem; color: var(--text-dim); }
.dishcard__price { font-weight: 700; color: var(--stool-ink); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Pager — the bottom of a single dish page
   ========================================================================== */

.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
body[data-tone="ink"] .pager { border-top-color: rgba(var(--chalk-rgb),.16); }
.pager a { text-decoration: none; }
.pager__dir {
  display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
html[data-lang="bn"] .pager__dir { letter-spacing: .02em; text-transform: none; font-size: .84rem; }
body[data-tone="ink"] .pager__dir { color: var(--chalk-fade); }
.pager__name { font-weight: 600; font-size: 1.05rem; }
.pager__next { text-align: right; }
.pager__all {
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--rule);
  font-size: .9rem; white-space: nowrap;
}
body[data-tone="ink"] .pager__all { border-color: rgba(var(--chalk-rgb),.28); }
.pager__all:hover { background: var(--paper-2); }
body[data-tone="ink"] .pager__all:hover { background: rgba(var(--chalk-rgb),.08); }
@media (max-width: 620px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { grid-column: 1 / -1; order: 3; text-align: center; }
}

/* A single dish page takes its ground from the dish's own tone, so the seven
   pages alternate the way the seven chapters used to. */
body[data-tone="ink"]   { background: var(--ink); color: var(--chalk); }
body[data-tone="ink"] .lede, body[data-tone="ink"] .origin p { color: var(--chalk-dim); }
body[data-tone="ink"] .route li { border-left-color: rgba(var(--chalk-rgb),.28); }
body[data-tone="ink"] .route li::before { background: var(--ink); }
body[data-tone="ink"] .route .when { color: var(--marigold-2); }
body[data-tone="ink"] .route .what { color: var(--chalk-dim); }
body[data-tone="ink"] .origin h3, body[data-tone="ink"] .kitchen h3 { color: var(--marigold-2); }
body[data-tone="ink"] .kitchen {
  background: rgba(var(--chalk-rgb),.05); border-color: rgba(var(--chalk-rgb),.16);
  border-left-color: var(--marigold);
}
body[data-tone="ink"] .kitchen .price-note { color: var(--marigold-2); }
body[data-tone="ink"] .chips li {
  background: rgba(var(--chalk-rgb),.08); color: var(--chalk); border-color: rgba(var(--chalk-rgb),.2);
}
body[data-tone="warm"] { background: var(--paper-2); }

/* ---------- chapter rhythm ---------- */

.chapters { counter-reset: chapter; }

.chapter {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--rule);
}
.chapter:first-child { border-top: 0; }
.chapter--ink { background: var(--ink); color: var(--chalk); border-top-color: rgba(var(--chalk-rgb),.12); }
.chapter--ink .lede,
.chapter--ink .origin p { color: var(--chalk-dim); }
.chapter--warm { background: var(--paper-2); }

.chapter__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(1.8rem, 5vw, 3.4rem); align-items: start;
}
@media (max-width: 900px) { .chapter__grid { grid-template-columns: 1fr; } }

/* The number is written by pages.js now, because a dish page shows one dish
   and a CSS counter has nothing to count. The ::before rule that used to
   supply it is gone — with both in place the first dish rendered as "0101". */
.chapter__no {
  font-family: var(--hand); font-size: 2.4rem; line-height: 1;
  color: var(--marigold); margin-bottom: .3rem;
}

.chapter h2 {
  margin: 0 0 .2rem; font-family: var(--display-bn); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08;
}
html[data-lang="en"] .chapter h2 {
  font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
}
.chapter__sub {
  font-family: var(--hand); font-size: 1.35rem; color: var(--stool);
  margin: 0 0 1.1rem;
}
.chapter--ink .chapter__sub { color: var(--marigold-2); }

.lede { font-size: 1.05rem; color: var(--text-dim); max-width: 62ch; }

/* ---------- the drawn plate ---------- */

/* The plate is dark in every chapter, light section or not. The drawings are
   cream, marigold and purple; on a pale ground the cream simply vanishes and
   the loaf reads as a dark brick. Rather than maintain two colourways of
   seven illustrations, the disc stays dark and the art always has the same
   ground under it — which also gives the page a spine of dark circles running
   down its right edge. */
.plate {
  position: sticky; top: 84px;
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 50%;
  /* EXEMPT FROM THE THEMES, deliberately. The seven drawings are cream,
     marigold and purple — one colourway, drawn once. Let this disc follow a
     light theme and the cream vanishes into it and the loaf reads as a dark
     brick, which is the bug that put the plate on a fixed dark ground in the
     first place. It is a plate; a plate does not change colour with the room. */
  background:
    radial-gradient(circle at 34% 28%, rgba(246, 241, 230, .12), transparent 58%),
    #241e18;
  box-shadow: inset 0 0 0 1px rgba(246, 241, 230, .12), 0 26px 60px -26px rgba(42, 35, 27, .75);
}
.chapter--ink .plate { box-shadow: inset 0 0 0 1px rgba(246, 241, 230, .10), 0 26px 60px -26px rgba(0,0,0,.9); }
.plate svg { display: block; width: 78%; height: auto; overflow: visible; }
@media (max-width: 900px) { .plate { position: static; max-width: 340px; margin-inline: auto; } }

/* Steam rises. It is the one animation on the page and it is switched off
   for anyone who asked not to see motion. */
.steam { opacity: .0; animation: rise 3.4s ease-out infinite; }
.steam--b { animation-delay: 1.1s; }
.steam--c { animation-delay: 2.2s; }
@keyframes rise {
  0%   { opacity: 0;   transform: translateY(6px)  scaleX(1); }
  25%  { opacity: .85; }
  100% { opacity: 0;   transform: translateY(-26px) scaleX(1.35); }
}
@media (prefers-reduced-motion: reduce) { .steam { animation: none; opacity: .5; } }

/* ---------- the route ribbon ---------- */

.origin { margin: 1.6rem 0 2rem; }
.origin h3, .kitchen h3 {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stool); margin: 0 0 .9rem; font-weight: 700;
}
html[data-lang="bn"] .origin h3, html[data-lang="bn"] .kitchen h3 {
  letter-spacing: .04em; text-transform: none; font-size: .92rem;
}
.chapter--ink .origin h3, .chapter--ink .kitchen h3 { color: var(--marigold-2); }

.route { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0; }
.route li {
  position: relative; padding: 0 0 1.1rem 2.1rem;
  border-left: 2px dotted var(--rule);
}
.chapter--ink .route li { border-left-color: rgba(var(--chalk-rgb),.28); }
.route li:last-child { border-left-color: transparent; padding-bottom: 0; }
.route li::before {
  content: ''; position: absolute; left: -7px; top: .38rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--marigold);
}
.chapter--ink .route li::before { background: var(--ink); }
.route li:last-child::before { background: var(--marigold); }
.route .when {
  display: block; font-family: var(--hand); font-size: 1.2rem;
  color: var(--marigold); line-height: 1.1;
}
.chapter--ink .route .when { color: var(--marigold-2); }
.route .where { font-weight: 600; }
.route .what { display: block; font-size: .92rem; color: var(--text-dim); margin-top: .1rem; max-width: 56ch; }
.chapter--ink .route .what { color: var(--chalk-dim); }

/* ---------- what is in it ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.chips li {
  font-size: .84rem; padding: .28rem .7rem; border-radius: 999px;
  background: var(--stool-soft); color: var(--stool-ink); border: 1px solid #ddd0f2;
}
.chapter--ink .chips li {
  background: rgba(var(--chalk-rgb),.08); color: var(--chalk); border-color: rgba(var(--chalk-rgb),.2);
}

/* ---------- the kitchen note ---------- */

.kitchen {
  margin-top: 1.6rem; padding: 1.3rem 1.5rem;
  background: #fff; border: 1px solid var(--rule);
  border-left: 4px solid var(--stool); border-radius: 12px;
  box-shadow: var(--shadow);
}
.chapter--ink .kitchen {
  background: rgba(var(--chalk-rgb),.05); border-color: rgba(var(--chalk-rgb),.16);
  border-left-color: var(--marigold);
}
.kitchen p { margin: 0 0 .7rem; }
.kitchen p:last-child { margin-bottom: 0; }
.kitchen .price-note {
  display: inline-flex; align-items: baseline; gap: .5rem; margin-top: .4rem;
  font-weight: 700; color: var(--stool-ink);
}
.chapter--ink .kitchen .price-note { color: var(--marigold-2); }
.kitchen .price-note small { font-weight: 400; color: var(--text-dim); font-size: .84rem; }
.chapter--ink .kitchen .price-note small { color: var(--chalk-fade); }

/* ---------- page head ---------- */

.origins-hero {
  background: var(--ink); color: var(--chalk);
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  position: relative; overflow: hidden;
}
.origins-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56vmax 40vmax at 84% 10%, rgba(224,150,26,.16), transparent 62%),
    radial-gradient(50vmax 38vmax at 12% 92%, rgba(109,63,168,.24), transparent 62%);
}
.origins-hero > * { position: relative; }
.origins-hero h1 {
  margin: 0 0 .6rem; font-family: var(--display-bn); font-weight: 700;
  font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: 1.04; max-width: 18ch;
}
html[data-lang="en"] .origins-hero h1 {
  font-family: var(--display); font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 90;
}
.origins-hero p { color: var(--chalk-dim); max-width: 60ch; font-size: 1.05rem; }

.honesty {
  margin-top: 1.6rem; padding: .9rem 1.15rem; border-radius: 10px;
  background: rgba(224,150,26,.1); border: 1px solid rgba(224,150,26,.3);
  font-size: .93rem; color: var(--chalk); max-width: 70ch;
}
.honesty b { color: var(--marigold-2); }

/* contents strip */
.toc { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.8rem; padding: 0; list-style: none; }
.toc a {
  display: inline-block; text-decoration: none; font-size: .88rem;
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid rgba(var(--chalk-rgb),.24); color: var(--chalk-dim);
}
.toc a:hover { background: rgba(var(--chalk-rgb),.1); color: var(--chalk); }

/* back to the shop */
.backbar { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 2.4rem 0; }
.backbar .wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* ==========================================================================
   Films — the uncut footage

   Native <video controls> rather than a custom player. A visitor already
   knows how this works, it is keyboard accessible without any help from me,
   and preload="none" means the browser fetches nothing at all until they
   press play. On a 5MB file over Indian mobile data that is the difference
   between a page and an imposition.
   ========================================================================== */

.films { display: grid; gap: clamp(2rem, 5vw, 3.4rem); }
.film {
  margin: 0; display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 760px) { .film { grid-template-columns: 1fr; } }

.film__frame {
  border-radius: 14px; overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(var(--chalk-rgb), .16);
  box-shadow: var(--shadow);
}
.film__frame video { width: 100%; height: auto; display: block; background: var(--ink); }

.film figcaption h2 {
  margin: 0 0 .2rem; font-family: var(--display-bn); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2;
}
html[data-lang="en"] .film figcaption h2 {
  font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
}
.film__meta {
  margin: 0 0 .8rem; font-family: var(--hand); font-size: 1.15rem; color: var(--marigold);
}
html[data-lang="bn"] .film__meta { font-family: var(--body-bn); font-size: .9rem; }
.film figcaption p { max-width: 58ch; color: var(--text-dim); }

/* ==========================================================================
   BENGALI LEADING FOR THIS FILE'S OWN ELEMENTS

   site.css sets 1.45–1.6 for Bengali, but this stylesheet loads after it and
   several of its rules match at equal specificity — `.film figcaption h2` ties
   with `html[data-lang="bn"] h2`, and a tie goes to whoever is later. So the
   overrides for elements defined here have to live here.

   Measured, not guessed: seven dish-card headings on the origins index were
   clipping two pixels, and both film headings on the movies page were seven
   pixels short of their own glyphs.
   ========================================================================== */

html[data-lang="bn"] .dishcard h3,
html[data-lang="bn"] .film figcaption h2,
html[data-lang="bn"] .chapter h1,
html[data-lang="bn"] .chapter h2,
html[data-lang="bn"] .origins-hero h1 { line-height: 1.6; }

html[data-lang="bn"] .dishcard__sub,
html[data-lang="bn"] .chapter__sub,
html[data-lang="bn"] .pager__name,
html[data-lang="bn"] .walk__body h3,
html[data-lang="bn"] .route .where,
html[data-lang="bn"] .film__meta { line-height: 1.5; }