.ingredient-story {
  --story-ink: #f6f7f2;
  --story-muted: #cdd5cb;
  --story-accent: #cad8ad;
  position: relative;
  background: #1b2337;
  color: var(--story-ink);
}
.story-stage {
  position: relative;
  height: calc(100svh - 96px);
  min-height: 620px;
  isolation: isolate;
  overflow: clip;
  background: #1b2337;
}
.story-content { position: relative; height: 100%; z-index: 6; pointer-events: none; }
.story-panels { position: absolute; top: 15%; left: var(--gutter); width: calc(58% - var(--gutter)); }
.story-panel { max-width: 790px; }
.story-panel:not(:first-child) { display: none; }
.story-ready .story-panel { display: block; position: absolute; inset: 0 auto auto 0; width: 100%; }
.story-ready .story-panel:not(.is-current) { opacity: 0; visibility: hidden; }
.story-panel h1, .story-panel h2 {
  font-size: clamp(52px, 5.9vw, 90px);
  line-height: 1.03;
  font-weight: 400;
  letter-spacing: -.04em;
  color: inherit;
  text-wrap: balance;
}
.story-panel em { font-style: normal; color: var(--story-accent); }
.story-panel p { max-width: 370px; font-size: 18px; line-height: 1.55; margin-top: 28px; color: var(--story-muted); }
.story-action { pointer-events: auto; margin-top: 30px; background: var(--story-accent); color: #1b2337; }
.story-action:hover { background: #e1e8cf; color: #1b2337; }
.story-bottom { position: absolute; left: var(--gutter); bottom: 68px; width: 46%; }
.js .story-chapters { display: flex; gap: 27px; pointer-events: auto; }
.story-chapters button {
  position: relative; background: none; color: var(--story-muted); font-size: 15px;
  padding: 15px 0; border-radius: 0; border-bottom: 1px solid currentColor;
  min-width: 44px; min-height: 44px;
}
.story-chapters button[aria-pressed=true] { color: var(--story-accent); }
.story-chapters button span { position: absolute; height: 3px; left: 0; right: 0; bottom: -2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 250ms; }
.story-chapters button[aria-pressed=true] span { transform: scaleX(1); }
.story-scroll { display: flex; align-items: center; gap: 12px; font-size: 12px; margin-top: 25px; color: var(--story-muted); }
.story-scroll svg { width: 20px; height: 24px; }
.story-backdrop {
  position: absolute; bottom: -6%; left: 25%; color: var(--story-ink); opacity: .035;
  font-size: clamp(240px, 34vw, 540px); line-height: .9; letter-spacing: -.07em; pointer-events: none;
}
.ingredient-world { position: absolute; width: 60%; height: 100%; right: -1%; top: 0; pointer-events: none; z-index: 3; }
.scene-bowl { position: absolute; left: 5%; top: 42%; width: 85%; height: auto; z-index: 2; transform-origin: 50% 55%; }
.scene-scoop, .scene-scoop-empty, .scene-scoop-anchor { position: absolute; left: 40%; top: -10%; width: 56%; height: auto; z-index: 4; transform-origin: 75% 25%; }
.spice-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.scene-orbit { display: none; }
.orbit-two { transform: rotate(28deg); height: 54%; top: 28%; }
.scene-label { position: absolute; font-size: 12px; color: var(--story-muted); z-index: 5; }
.scene-label::before { content: ''; display: inline-block; vertical-align: middle; width: 24px; height: 1px; margin-right: 10px; background: currentColor; }
.scene-label-one { left: 20%; top: 31%; }
.scene-label-two { left: 75%; top: 71%; white-space: nowrap; }
.scene-controls { position: absolute; right: 5%; bottom: 66px; z-index: 8; text-align: right; }
.scene-mix {
  display: flex; align-items: center; gap: 12px; padding: 15px 19px;
  color: #1b2337; background: #f6f7f2; border: 1px solid #f6f7f2; border-radius: 40px;
  font-size: 13px; transition: background 200ms, transform 180ms;
}
.scene-mix:hover { background: #cad8ad; }
.scene-mix:active { transform: scale(.97); }
.scene-mix svg { width: 21px; height: 21px; }
.scene-motion { display: block; margin: 10px 0 0 auto; padding: 4px 0; color: var(--story-muted); background: none; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.scene-caption { position: absolute; left: 5%; bottom: 20px; font-size: 11px; color: var(--story-muted); z-index: 7; }
.ingredient-story button:focus-visible, .ingredient-story a:focus-visible { outline: 2px solid var(--story-accent); outline-offset: 6px; }
.ingredient-story button:disabled { opacity: .5; cursor: wait; }
.story-panel.is-leaving { pointer-events: none; }
@media (max-width: 1100px) and (min-width: 821px) {
  .story-stage { min-height: 610px; }
  .story-panel h1, .story-panel h2 { font-size: 65px; }
  .story-panels { width: 64%; top: 13%; }
  .scene-scoop, .scene-scoop-empty, .scene-scoop-anchor { top: -7%; }
  .scene-bowl { top: 46%; }
  .scene-label-two { left: 65%; }
}
@media (max-width: 820px) {
  .story-stage { height: calc(100svh - 78px); min-height: 700px; max-height: 950px; }
  .story-panels { top: 6%; width: calc(100% - var(--gutter) * 2); z-index: 6; }
  .story-panel h1, .story-panel h2 { font-size: clamp(41px, 7vw, 62px); max-width: 650px; }
  .story-panel p { font-size: 15px; margin-top: 18px; max-width: 360px; }
  .story-action { padding: 15px 21px; font-size: 13px; margin-top: 20px; }
  .ingredient-world { width: 80%; height: 66%; top: 27%; right: -5%; }
  .scene-scoop, .scene-scoop-empty, .scene-scoop-anchor { top: -10%; left: 40%; width: 56%; }
  .scene-bowl { top: 39%; left: 3%; width: 86%; }
  .scene-label { display: none; }
  .story-bottom { width: auto; bottom: 66px; }
  .story-chapters { gap: 22px; }
  .story-chapters button { font-size: 12px; padding: 10px 0; }
  .story-scroll { display: none; }
  .scene-controls { bottom: 76px; right: 5%; }
  .scene-mix { width: 44px; height: 44px; padding: 10px; }
  .scene-mix span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scene-motion { font-size: 10px; max-width: 85px; min-height: 44px; line-height: 1.3; }
  .scene-caption { font-size: 9px; bottom: 22px; max-width: 240px; }
  .story-backdrop { font-size: 38vw; left: -1%; bottom: 20%; }
}
@media (max-width: 500px) {
  .story-stage { min-height: 690px; }
  .story-panels { top: 5%; }
  .story-panel h1, .story-panel h2 { font-size: 43px; max-width: 360px; }
  .story-panel p { max-width: 290px; font-size: 14px; margin-top: 15px; }
  .story-action { margin-top: 18px; }
  .ingredient-world { width: 116%; top: 38%; height: 50%; right: -10%; }
  .scene-scoop, .scene-scoop-empty, .scene-scoop-anchor { top: -25%; left: 45%; width: 54%; }
  .scene-bowl { top: 39%; left: 8%; width: 78%; }
  .scene-controls { bottom: 67px; }
  .story-bottom { bottom: 68px; }
  .story-chapters { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-stage { min-height: 690px; }
  .spice-canvas { display: none; }
  .story-chapters button span { transition: none; }
}

/* Keep the scene controls in reach on phones with short viewports. */
@media (max-width:820px) and (max-height:760px) {
  .story-stage {height:calc(100svh - 78px);min-height:560px;}
  .story-panels {top:5%;}
  .story-panel h1,.story-panel h2 {font-size:clamp(34px,7.5vw,48px);}
  .story-panel p {font-size:13px;max-width:290px;margin-top:15px;}
  .story-action {margin-top:16px;padding:13px 19px;}
  .ingredient-world {top:32%;height:51%;}
  .scene-bowl {top:23%;width:73%;left:10%;}
  .scene-scoop,.scene-scoop-empty,.scene-scoop-anchor {top:-14%;width:49%;left:46%;}
  .story-bottom {bottom:47px;}
  .scene-controls {bottom:38px;}
  .scene-caption {bottom:13px;max-width:270px;font-size:8px;}
}

.scene-scoop-anchor {aspect-ratio:3/2;pointer-events:none;visibility:hidden;}
.scene-scoop-anchor span {position:absolute;width:0;height:0;}
.scoop-source {left:21.6796875%;top:89.2578125%;}
.scoop-lip {left:21.484375%;top:92.96875%;}
.scoop-edge {left:23.111979%;top:89.2578125%;}
.story-ingredients {position:absolute;left:var(--gutter);bottom:179px;pointer-events:auto;}
.story-ingredients>span {display:block;font-size:12px;color:var(--story-muted);margin-bottom:10px;}
.story-ingredients>div {display:flex;gap:8px;}
.story-ingredients button {background:transparent;border:1px solid #7a8976;color:var(--story-ink);padding:10px 15px;border-radius:0;min-height:44px;font-size:13px;}
.story-ingredients button[aria-pressed=true] {background:var(--story-accent);color:#1b2337;border-color:var(--story-accent);}
.story-ingredients button:disabled {opacity:.5;}
@media(max-width:820px) {
  .story-ingredients {bottom:133px;}
  .story-ingredients>span {font-size:10px;margin-bottom:5px;}
  .story-ingredients button {padding:8px 12px;font-size:11px;min-height:38px;}
}
@media(max-width:500px) {
  .scene-bowl {top:28%;}
}
@media(max-width:820px) and (max-height:760px) {
  .story-ingredients {bottom:102px;}
  .story-ingredients button {min-height:36px;padding:6px 11px;}
  .scene-bowl {top:12%;width:68%;left:12%;}
}

@media(max-width:500px) and (max-height:760px) {
  .scene-scoop,.scene-scoop-empty,.scene-scoop-anchor {left:49%;}
}
@media(max-width:380px) and (max-height:760px) {
  .scene-scoop,.scene-scoop-empty,.scene-scoop-anchor {left:53%;}
}

@media(max-width:380px) {.story-action {max-width:215px;}}