/* A small botanical specimen accompanies each scroll-linked ingredient. */
#hero-stage .ingredient-story{max-width:520px}
#hero-stage .ingredient-feature{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:12px;min-height:110px;margin:10px 0 8px}
#hero-stage .ingredient-feature-copy{min-width:0}
#hero-stage .ingredient-feature h3{margin:0 0 8px;font-size:clamp(25px,2.45vw,36px)}
#hero-stage .ingredient-feature .ingredient-benefit{margin:0}
.ingredient-specimen{display:grid;place-items:center;aspect-ratio:1;min-width:0;pointer-events:none}
.ingredient-specimen svg{display:block;width:100%;height:auto;overflow:visible}
.hero-specimen__body,.hero-specimen__piece{transform-box:fill-box;transform-origin:center}
#hero-stage[data-hero-layout="stack"] .ingredient-feature{grid-template-columns:minmax(0,1fr) 80px;min-height:80px;margin:7px 0;gap:10px}
#hero-stage[data-hero-layout="stack"] .ingredient-feature h3{font-size:24px;line-height:1.12;margin:0 0 5px}
@media(min-width:1440px) and (min-height:760px){#hero-stage .ingredient-feature{grid-template-columns:minmax(0,1fr) 132px;min-height:128px}}
@media(max-width:360px){#hero-stage[data-hero-layout="stack"] .ingredient-feature{grid-template-columns:minmax(0,1fr) 68px;min-height:76px;gap:8px}#hero-stage[data-hero-layout="stack"] .ingredient-feature h3{font-size:22px}}
@media(max-height:500px){#hero-stage[data-hero-layout="columns"] .ingredient-feature{grid-template-columns:minmax(0,1fr) 66px;min-height:64px;gap:8px;margin:5px 0}#hero-stage[data-hero-layout="columns"] .ingredient-feature h3{font-size:23px;margin:0 0 4px}}
@media(prefers-reduced-motion:no-preference){
  .scene-chapter.active .ingredient-specimen svg{animation:specimen-arrive .6s cubic-bezier(.2,.7,.2,1) both}
  .scene-chapter.active .hero-specimen__piece{animation:specimen-unfold .85s cubic-bezier(.2,.7,.2,1) both}
  .scene-chapter.active .hero-specimen__piece:nth-child(2n){animation-delay:.08s}
  .scene-chapter.active .hero-specimen__piece:nth-child(3n){animation-delay:.14s}
  .scene-chapter.active .hero-specimen__detail{animation:specimen-detail .9s ease-out both}
  .hero-specimen__body{transform:translateY(calc(var(--beat-progress,0) * -5px)) rotate(calc(var(--beat-progress,0) * 4deg - 2deg))}
  .ingredient-specimen{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.ingredient-feature:hover .ingredient-specimen{transform:translateY(-3px) rotate(2deg)}}
@keyframes specimen-arrive{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}}
@keyframes specimen-unfold{from{transform:rotate(-7deg) scale(.94)}to{transform:none}}
@keyframes specimen-detail{from{opacity:0}to{opacity:1}}