/* The accessible document is a gallery. JavaScript enhances it into a
   pinned story without changing the reading order of the ingredients. */
.composition{background:var(--cream);color:var(--acai);position:relative;padding:30px var(--gutter) 60px}
.composition-sticky{position:relative}
.composition-heading{min-width:0;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:36px}
.composition-heading h2{font-size:clamp(32px,4.4vw,70px);font-weight:600;letter-spacing:-.055em;line-height:1.08}
.composition-heading .eyebrow{font-size:12px;max-width:230px}
.story-static .composition-heading{display:block}
.story-static .composition-heading h2{margin-top:18px}
.composition-image{display:none}
.ingredient-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;min-width:0}
.ingredient-stage{min-width:0;opacity:1;visibility:visible}
.ingredient-thumbnail{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:180px 180px 18px 18px;margin-bottom:25px}
.step-index{display:block;font-size:26px;font-weight:600;color:var(--violet);line-height:1.2}
.step-index>span{font-size:12px;letter-spacing:.06em;margin-left:10px}
.ingredient-stage h3{font-size:clamp(30px,3.4vw,54px);font-weight:600;letter-spacing:-.055em;line-height:1.08;margin:24px 0 20px}
.ingredient-stage p{font-size:16px;line-height:1.55;color:#5d4e65;max-width:340px}
.ingredient-tag{display:block;font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--violet);margin-top:22px}
.composition-progress{display:none}
.sequence-step{border:0;background:transparent;color:#66546f;font:inherit;font-size:12px;text-align:left;padding:7px 0;min-height:44px;cursor:pointer;min-width:0;flex:1}
.sequence-step>span{display:flex;gap:10px;align-items:center;white-space:nowrap}
.sequence-step>span>b{font-size:14px;font-weight:600}
.sequence-step>i{display:block;height:2px;margin-top:9px;background:#160a1f26;position:relative;overflow:hidden}
.sequence-step>i>b{position:absolute;inset:0;background:var(--violet);transform:scaleX(var(--step-fill,0));transform-origin:left}
.sequence-step[aria-current="step"],.sequence-step:hover{color:var(--violet)}
.sequence-step:focus-visible{outline-color:var(--violet);outline-offset:4px;border-radius:3px}

/* A single sticky geometry owns all screen sizes. The photo and articles
   share stable slots, so their content never pushes the next step below. */
.js:not(.motion-paused) .composition:not(.story-static){--order-space:0px;--scene-height:calc(var(--viewport-height,100svh) - var(--header) - var(--order-space));padding-top:0;padding-bottom:0;height:calc(var(--scene-height) + var(--viewport-height,100svh) * 2.2)}
.js:not(.motion-paused) .composition:not(.story-static) .composition-sticky{position:sticky;top:var(--header);height:var(--scene-height);min-height:0;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.13fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px;grid-template-areas:"heading photo copy" "steps steps steps";gap:22px 4vw;padding:28px 0 16px;align-items:center}
.js:not(.motion-paused) .composition:not(.story-static) .composition-heading{grid-area:heading;display:block;align-self:start;margin:0;padding-top:22px}
.js:not(.motion-paused) .composition:not(.story-static) .composition-heading h2{margin-top:22px}
.js:not(.motion-paused) .composition:not(.story-static) .composition-image{grid-area:photo;display:block;position:relative;isolation:isolate;width:100%;height:100%;max-height:650px;min-height:0;overflow:hidden;border-radius:220px 220px 20px 20px;background:#e9dfd0}
.js:not(.motion-paused) .composition:not(.story-static) .ingredient-stages{grid-area:copy;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.js:not(.motion-paused) .composition:not(.story-static) .ingredient-stage{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.js:not(.motion-paused) .composition:not(.story-static) .ingredient-stage.active{opacity:1;transform:translateY(0);pointer-events:auto}
.js:not(.motion-paused) .composition:not(.story-static) .ingredient-thumbnail{display:none}
.js:not(.motion-paused) .composition:not(.story-static) .composition-progress{grid-area:steps;display:flex;gap:28px;align-items:center;align-self:end}
.ingredient-photo{position:absolute;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .7s;will-change:transform}
.ingredient-photo.active{opacity:1;animation:ingredient-arrive .95s cubic-bezier(.2,.7,.2,1) both}
.composition-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 67%,#160a1fc9);pointer-events:none}
.composition-image-caption{position:absolute;z-index:2;bottom:24px;left:16px;right:16px;display:grid;text-align:center;color:var(--cream);font-size:12px;line-height:1.5;letter-spacing:.06em}
.photo-caption{grid-area:1/1;opacity:0;transform:translateY(9px);transition:opacity .45s,transform .55s}
.photo-caption.active{opacity:1;transform:translateY(0)}
@keyframes ingredient-arrive{from{clip-path:inset(14% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

@media(max-width:760px){
 .ingredient-stages{grid-template-columns:1fr;gap:42px}
 .ingredient-thumbnail{aspect-ratio:1;max-height:480px}
 .ingredient-stage h3 br{display:none}
 .ingredient-stage p{max-width:none}
 .composition-heading h2{font-size:32px}
 .composition-heading .eyebrow{max-width:130px}
 .js:not(.motion-paused) .composition:not(.story-static){--order-space:calc(72px + var(--safe-bottom-max))}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-sticky{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);grid-template-rows:auto minmax(0,1fr) 44px;grid-template-areas:"heading heading" "photo copy" "steps steps";gap:18px 16px;padding:18px 0 10px}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-heading{min-width:0;display:flex;align-items:center;padding:0}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-heading h2{font-size:30px;margin:0}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-heading .eyebrow{font-size:12px;letter-spacing:.015em;max-width:126px}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-image{max-height:480px;border-radius:150px 150px 16px 16px}
 .js:not(.motion-paused) .composition:not(.story-static) .ingredient-stage h3{font-size:30px;margin:18px 0 15px}
 .js:not(.motion-paused) .composition:not(.story-static) .ingredient-stage p{font-size:16px;line-height:1.45}
 .js:not(.motion-paused) .composition:not(.story-static) .step-index>span{display:block;font-size:12px;margin:6px 0 0}
 .js:not(.motion-paused) .composition:not(.story-static) .ingredient-tag{font-size:12px;margin-top:16px}
 .js:not(.motion-paused) .composition:not(.story-static) .composition-progress{gap:16px}
 .composition-image-caption{font-size:12px;letter-spacing:0;left:10px;right:10px;bottom:18px}
 .sequence-step>span{gap:6px}
}

/* Short portrait: a photograph beside the title, full-width copy below. */
@media(max-width:760px){
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-sticky{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:minmax(110px,1fr) auto 44px;grid-template-areas:"heading photo" "copy copy" "steps steps";gap:12px 16px;padding:12px 0 8px}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-heading{display:block;align-self:center}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-heading .eyebrow{display:none}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-heading h2{font-size:32px}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-image{border-radius:80px 80px 12px 12px;max-height:200px}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .composition-image-caption{display:none}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .step-index{display:none}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .ingredient-stage h3{font-size:28px;margin:0 0 10px}
 .js:not(.motion-paused) .composition.scene-compact:not(.story-static) .ingredient-tag{margin-top:10px}
}

/* Short landscape keeps the three-column scene. */
@media(min-width:761px){
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .composition-sticky{grid-template-columns:minmax(0,.72fr) minmax(0,.94fr) minmax(0,1.4fr);gap:12px 24px;padding:12px 0 8px}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .composition-heading{padding:0;align-self:center}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .composition-heading h2{font-size:34px;margin-top:12px}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .composition-heading .eyebrow{font-size:12px;letter-spacing:0}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .ingredient-stage h3{font-size:28px;margin:12px 0 10px}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .ingredient-stage h3 br{display:none}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .step-index{font-size:20px}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .ingredient-stage p{line-height:1.4}
 .js:not(.motion-paused) .composition.scene-wide-compact:not(.story-static) .ingredient-tag{margin-top:10px}
 .composition.scene-wide-compact .composition-image-caption{bottom:12px}
}

/* Motion preferences keep navigation and step changes available. */
@media(prefers-reduced-motion:reduce){
 .ingredient-photo,.photo-caption,.ingredient-stage{animation:none!important;transition:none!important;transform:none!important}
 .plastic-zero>span{transform:none!important}
}
.motion-paused .plastic-zero>span{transform:none!important}
.plastic-zero>span:first-child{transform:translate3d(0,var(--zero-offset,0px),0) scale(var(--zero-scale,1));transform-origin:50% 60%}
.plastic-zero>.percent{transform:translate3d(0,var(--percent-offset,0px),0)}