/* ═══════════════════════════════════════════════════════════════════════════
   Scroll story — a film the visitor scrubs with their own scroll.

   The section is tall; the stage inside it is sticky. Scrolling the tall
   section moves a progress value from 0 to 1, and that value — not a timer —
   places every element. The visitor controls the playhead, so nobody waits
   through a beat they have already understood and nobody misses one they
   haven't.

   Everything animates with transform and opacity only, so it stays on the
   compositor and holds 60fps on the mid-range Android a café owner actually
   browses on.

   With reduced motion, or without JavaScript, the whole thing degrades to the
   chapters stacked as ordinary cards. The content is in the markup, not in the
   script — so it is readable, crawlable and printable either way.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Each page sets these once; everything below reads them, so the same engine
   wears TableGenie's turmeric on one page and Vedanta's yellow on the other
   without a second stylesheet. */
.story {
  --sc-accent: var(--turmeric-deep, var(--yellow-deep, #C4842A));
  --sc-ink: var(--text, #3D2418);
  --sc-soft: var(--brown-soft, var(--text-soft, #6B5647));
  --sc-faint: var(--brown-faint, var(--text-faint, #8A7466));
  --sc-line: var(--line, #E3D6C4);
  --sc-card: var(--white, var(--paper, #fff));

  /* The stage sits under the page's sticky nav, not behind it: a stage as
     tall as the window with a 68px bar on top of it hid the top of every
     picture. story.js measures the real nav; this is only the first frame. */
  --story-top: 64px;
  --vh: 100vh;
  --stage-h: calc(var(--vh) - var(--story-top));
  /* How tall a picture may be. Every prop is sized from this, so the phone is
     never taller than the room it is drawn in. */
  --art-h: clamp(240px, calc(var(--stage-h) * 0.72), 500px);

  position: relative;
  /* One stage-height of scroll per chapter — plus one for the sticky stage
     itself. The stage occupies that height the whole time, so a section of
     exactly n stages yields only n-1 of travel and the chapters arrive
     progressively early. n+1 makes the sums come out: one stage of scroll is
     one chapter. Declared here, not by script, so the height is right on the
     first frame. */
  height: calc((var(--chapters, 6) + 1) * var(--stage-h));
  margin-block: 8px;
}
/* The small viewport height, where supported: on a phone the address bar
   comes and goes, and 100vh is the height without it. Switched through a
   variable so a browser without svh keeps the vh value instead of losing the
   declaration. */
@supports (height: 100svh) {
  .story { --vh: 100svh; }
}

.story-stage {
  position: sticky;
  top: var(--story-top);
  height: var(--stage-h);
  overflow: hidden;
}

.story-inner {
  position: absolute;
  inset: 0;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* One chapter = its caption and its picture, stacked on the same spot. */
.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  align-content: center;
  /* The bottom padding keeps every picture clear of the progress rail. */
  padding: 16px 20px 64px;
  will-change: opacity, transform;
  opacity: 0;
}

.chapter-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  pointer-events: none;
}
/* A short label above the headline, where a page uses one. */
.chapter-copy .n {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sc-accent);
}
.chapter-copy h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.02em; margin: 0;
  text-wrap: balance;
}
.chapter-copy p {
  margin: 0; max-width: 34ch;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.6;
  color: var(--sc-soft);
}
.chapter-copy .beat {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem; color: var(--sc-faint);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
}
.chapter-copy .beat::before {
  content: ''; width: 18px; height: 1px;
  background: var(--sc-accent);
}

/* ── the device column ──────────────────────────────────────────────────── */
.chapter-art {
  display: grid;
  /* A fixed cell, so a prop taller than the room overflows evenly around its
     centre — which is what the fit in story.js scales about — instead of the
     row growing downwards from the top. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  height: var(--art-h);
  pointer-events: none;
}

/* ── progress rail ──────────────────────────────────────────────────────── */
.story-rail {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 7px;
  padding: 7px 11px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--sc-card) 82%, transparent);
  border: 1px solid var(--sc-line);
  backdrop-filter: blur(8px);
}
.story-rail i {
  display: block; width: 22px; height: 3px; border-radius: 2px;
  background: var(--sc-line);
  overflow: hidden; position: relative;
}
.story-rail i b {
  position: absolute; inset: 0; transform-origin: left center;
  background: var(--sc-accent);
  transform: scaleX(0);
}

/* ═══ the props ═════════════════════════════════════════════════════════ */

/* phone */
.sp-phone {
  /* As wide as the room allows AND no taller than the picture's height. */
  width: min(228px, 46vw, calc(var(--art-h) * 9 / 18.5));
  aspect-ratio: 9 / 18.5;
  border-radius: 30px;
  background: #0E0B09;
  border: 8px solid #2A211A;
  box-shadow: 0 30px 70px -28px rgba(42, 29, 20, .7);
  overflow: hidden;
  position: relative;
}
.sp-screen {
  position: absolute; inset: 0;
  background: var(--cream, #FBF5E9);
  display: flex; flex-direction: column;
}
.sp-bar {
  padding: 13px 13px 9px; background: #fff;
  border-bottom: 1px solid var(--line, #E3D6C4);
}
.sp-bar b { display: block; font-size: 0.86rem; color: #3D2418; }
.sp-bar span { font-size: 0.66rem; color: #9C8674; }
.sp-row {
  display: flex; gap: 9px; align-items: center;
  padding: 9px 13px; border-bottom: 1px solid #F0E6D5;
}
.sp-thumb {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, #F3C87E, #E0913A);
}
.sp-row div { flex: 1; min-width: 0 }
.sp-row b { display: block; font-size: 0.72rem; color: #3D2418 }
.sp-row span { font-size: 0.64rem; color: #9C8674 }
.sp-add {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  background: var(--sc-accent); color: #3D2418;
  font-size: 0.7rem; font-weight: 800;
  display: grid; place-items: center;
}
.sp-add.on { background: #4C7A5C; color: #fff }
.sp-foot {
  margin-top: auto; padding: 11px 13px; background: #3D2418; color: #fff;
  font-size: 0.72rem; font-weight: 700;
  display: flex; justify-content: space-between;
}

/* the table + sticker */
.sp-table {
  position: relative; width: min(320px, 74vw); aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.sp-tabletop {
  position: absolute; inset: 22% 4% 14%;
  border-radius: 14px;
  background: linear-gradient(170deg, #D9A96F, #B87F४6);
  background: linear-gradient(170deg, #D9A96F, #B87F46);
  box-shadow: 0 26px 50px -26px rgba(42, 29, 20, .6);
}
.sp-card {
  position: relative; z-index: 2;
  width: 40%; aspect-ratio: 3 / 4;
  border-radius: 10px; background: #fff;
  border: 1px solid var(--sc-line);
  box-shadow: 0 14px 30px -14px rgba(42, 29, 20, .5);
  display: grid; place-items: center; gap: 6px;
  align-content: center; padding: 10px;
}
.sp-card small {
  font-family: var(--mono, monospace); font-size: 0.56rem;
  letter-spacing: .14em; text-transform: uppercase; color: #B08A4E;
}
.sp-qr { width: 70%; aspect-ratio: 1; }
.sp-beam {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 58%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sc-accent), transparent);
  transform: translate(-50%, -50%);
}

/* kitchen ticket */
.sp-tik {
  width: min(250px, 62vw);
  background: #fff; border-radius: 12px; padding: 16px 18px;
  border: 1px solid var(--sc-line);
  box-shadow: 0 24px 50px -24px rgba(42, 29, 20, .5);
}
.sp-tik-h {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 9px; border-bottom: 2px dashed #E4D6BF;
}
.sp-tik-h b { font-size: 1.15rem; color: #3D2418 }
.sp-tik-h span { font-size: 0.74rem; font-weight: 700; color: var(--sc-accent) }
.sp-tik-l {
  display: flex; gap: 9px; padding: 7px 0;
  font-size: 0.84rem; font-weight: 600; color: #3D2418;
}
.sp-tik-l i { font-style: normal; font-weight: 800; color: var(--sc-accent); min-width: 22px }

/* tablet + till */
.sp-pair { display: flex; gap: 14px; align-items: flex-end }
.sp-slab {
  background: #fff; border: 1px solid var(--sc-line);
  border-radius: 12px; padding: 14px;
  box-shadow: 0 20px 44px -22px rgba(42, 29, 20, .45);
  display: grid; gap: 8px; align-content: start;
}
.sp-slab.wide { width: min(190px, 42vw) }
.sp-slab.tall { width: min(128px, 30vw) }
.sp-slab em {
  font-style: normal; font-family: var(--mono, monospace);
  font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-accent);
}
.sp-slab b { font-size: 0.86rem; color: #3D2418 }
.sp-slab span { font-size: 0.7rem; color: #8A7466; line-height: 1.45 }
.sp-line { height: 6px; border-radius: 3px; background: #F0E6D5 }

/* bill */
.sp-bill {
  width: min(266px, 64vw);
  background: #fff; border-radius: 12px; padding: 18px 20px;
  border: 1px solid var(--sc-line);
  box-shadow: 0 24px 50px -24px rgba(42, 29, 20, .5);
}
.sp-bill em {
  font-style: normal; font-family: var(--mono, monospace);
  font-size: 0.58rem; letter-spacing: .14em; text-transform: uppercase;
  color: #B08A4E; display: block;
}
.sp-bill strong { display: block; font-size: 0.86rem; color: #3D2418; margin-bottom: 10px }
.sp-brow {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 0.76rem; color: #6B5647;
}
.sp-brow b { color: #3D2418 }
.sp-hr { height: 1px; background: #EFE3CE; margin: 7px 0 }
.sp-btot {
  display: flex; justify-content: space-between; padding-top: 9px; margin-top: 5px;
  border-top: 2px solid #EFE3CE; font-size: 1rem; font-weight: 800; color: #3D2418;
}

/* pay */
.sp-pay { display: grid; gap: 10px; width: min(250px, 62vw) }
.sp-chip {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--sc-line);
  border-radius: 11px; padding: 11px 13px;
  box-shadow: 0 14px 30px -18px rgba(42, 29, 20, .4);
}
.sp-chip i {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-style: normal;
  background: var(--sc-accent); color: #3D2418;
  font-size: 0.72rem; font-weight: 800;
}
.sp-chip b { font-size: 0.8rem; color: #3D2418; display: block }
.sp-chip span { font-size: 0.68rem; color: #8A7466 }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Picture above words, so the picture gets the smaller share. */
  .story { --art-h: clamp(180px, calc(var(--stage-h) * 0.42), 360px); }
  .chapter {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chapter-art { order: -1 }
  .chapter-copy p { max-width: none }
}
/* A short phone: tighter words, so the picture keeps some room. */
@media (max-width: 860px) and (max-height: 640px) {
  .chapter { gap: 12px; padding-bottom: 54px }
  .chapter-copy { gap: 8px }
  .chapter-copy h3 { font-size: 1.42rem }
  .chapter-copy p { font-size: 0.92rem; line-height: 1.5 }
  .chapter-copy .beat { display: none }
}

/* ── no script, or the visitor asked for stillness ──────────────────────── */
.no-story .story { height: auto !important }
.no-story .story-stage { position: static; height: auto; overflow: visible }
.no-story .story-inner { position: static; padding-inline: 0 }
.no-story .chapter {
  position: static;
  opacity: 1;
  transform: none;
  padding: clamp(22px, 4vw, 40px) 0;
  border-top: 1px solid var(--sc-line);
}
.no-story .chapter:first-child { border-top: 0 }
.no-story .chapter-copy,
.no-story .chapter-art { pointer-events: auto }
.no-story .chapter-art { height: auto; padding-block: 10px }
/* No stage to fit into, so the phone can be drawn at the size its screen was
   designed for. */
.no-story .sp-phone { width: min(228px, 64vw) }
.no-story .story-rail { display: none }
.no-story [data-at] { opacity: 1 !important; transform: none !important }

@media (prefers-reduced-motion: reduce) {
  .chapter-copy, .chapter-art { transition: none !important }
}