/* ============================================================
   MUWAN PALASSA — Dine (page-templates/page-dine.php).
   The fired-clay interlude register. Shared chrome (buttons,
   bands, book band, field-index, ambient layer) lives in
   main.css; this file carries the hero, this page's journey
   stroke, the kiln-clay table, the steps row and the night
   hours passage.
   ============================================================ */

/* ---------- hero (canopy dark — the kitchen fire in the trees) ---------- */
.dine-hero{
  padding: calc(var(--header-h) + clamp(3.5rem, 9vw, 6.5rem)) 0 clamp(3.5rem, 9vw, 6rem);
  position:relative;
  background:
    radial-gradient(110% 60% at 74% 100%, rgba(192,137,78,.12), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--forest) 58%, var(--forest) 100%);
}
.dine-hero h1{ max-width:11em; }
.dine-hero .kicker{ color:var(--bronze); }
.hero-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-line-inner{ display:block; will-change:transform; }
.dine-hero .hero-lede{ margin-top:var(--s-3); font-size:var(--fs-600); line-height:1.55; color:var(--khaki); max-width:34em; }
.dine-hero .hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:var(--s-4); }

/* ---------- the journey line: this page's material stops ---------- */
.journey path{ stroke: url(#dineJourneyGrad); }

/* ---------- firstfire band: forest opens into the kiln (5 mud stops) ---------- */
.firstfire{
  --sec-bg: linear-gradient(180deg, var(--forest) 0%, #46503B 22%, #7A6A45 46%, #A05A32 74%, var(--clay) 100%);
  min-height:44svh;
}
.firstfire .field-note{ color:var(--sand); }
.firstfire p.big{ color:var(--ivory); }

/* ---------- the village table (kiln clay — the warm interlude) ----------
   .dine on the section dissolves the ambient layer (main.js); the header
   keeps its dark register over clay, as on the homepage. */
.dine-table{ --sec-bg: var(--clay); color:var(--ivory); }
.dine-table .kicker{ color:var(--sand); }
.dine-table h2{ color:var(--ivory); }
.dine-table p{ color:rgba(243,235,219,.92); }
.dine-table .lede{ color:var(--ivory); }
.dine-table .stamp{ color:var(--sand); margin-bottom:var(--s-3); }
.dine-table .field-note{ color:rgba(243,235,219,.75); }
.dine-table-grid{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); align-items:center; }
@media (min-width:56em){ .dine-table-grid{ grid-template-columns:1.1fr .9fr; } }
.dine-figure{
  border-radius:58% 42% 50% 50% / 45% 52% 48% 55%; /* river-stone blob — the day's one blob */
  overflow:hidden; aspect-ratio:4/4.5; background:var(--sand);
  transform:rotate(1deg);
}
.dine-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.dine-caption{ margin-top:1rem; text-align:center; }
.dine-menu-list{ margin-top:var(--s-4); border-top:1.5px dashed var(--dash-clay); max-width:38rem; }
.dine-menu-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.25rem;
  padding:.9rem 0; border-bottom:1.5px dashed var(--dash-clay);
}
.dine-menu-list .dish{ font-family:var(--serif); font-size:1.05rem; color:var(--ivory); }
.dine-menu-list .note{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(243,235,219,.75); text-align:right; }

/* the way of the pot: three beats on a dashed rule */
.dine-steps{ margin-top:clamp(3rem, 7vw, 5rem); }
.dine-steps-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:var(--fs-600); color:var(--ivory); margin-bottom:var(--s-3);
}
.dine-steps-row{
  list-style:none; counter-reset:none;
  display:grid; gap:clamp(1.5rem, 4vw, 3rem);
  border-top:1.5px dashed var(--dash-clay); padding-top:var(--s-3);
}
@media (min-width:44em){ .dine-steps-row{ grid-template-columns:repeat(3, 1fr); } }
.dine-steps-row .step-time{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand);
}
.dine-steps-row h4{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-600);
  color:var(--ivory); margin-top:.35rem;
}
.dine-steps-row p{ margin-top:.55rem; font-size:.98rem; color:rgba(243,235,219,.88); }

/* ---------- dusk band: the kiln cools into the night (5 stops) ---------- */
.dine-dusk{
  --sec-bg: linear-gradient(180deg, var(--clay) 0%, #8A5A34 22%, #55503A 48%, #2A3527 74%, var(--night) 100%);
  min-height:48svh;
}

/* ---------- the herds' hours (night tank, one warm radial) ---------- */
.dine-hours{
  --sec-bg:
    radial-gradient(120% 55% at 20% 0%, rgba(192,137,78,.07), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night) 55%, var(--forest) 100%);
}
.dine-hours .field-note{ color:var(--bronze); }
.dine-hours-grid{ display:grid; gap:clamp(2.5rem, 6vw, 5rem); align-items:center; }
@media (min-width:56em){ .dine-hours-grid{ grid-template-columns:1.15fr .85fr; } }
.hours-cols{ display:grid; gap:clamp(1.5rem, 4vw, 2.5rem); margin-top:var(--s-4); }
@media (min-width:40em){ .hours-cols{ grid-template-columns:1fr 1fr; } }
.hours-col{
  border-top:1.5px solid transparent;
  border-image: linear-gradient(90deg, #8A6238, #C9A25E 45%, rgba(201,162,94,0)) 1;
  padding-top:1.25rem;
}
.hours-col h3{ font-family:var(--serif); font-style:italic; font-size:var(--fs-600); color:var(--ivory); }
.hours-col p{ margin-top:.8rem; color:var(--khaki); font-size:.98rem; }
.hours-figure{
  border-radius:var(--radius); /* straight-ish documentary frame in the dark */
  overflow:hidden; aspect-ratio:4/4.4; background:var(--night);
}
.hours-figure img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.dine-hours .dine-caption{ color:var(--khaki); }