/* A saved brew becomes a recipe. Intrinsic reading order is the base layout. */
.recall{--recall-phone-width:min(286px,calc(100vw - 88px));position:relative;isolation:isolate;padding-block:64px 100px}
.recall-layout{display:flex;flex-direction:column;align-items:stretch}
.recall-intro{order:0;max-width:600px;position:relative;z-index:1}
.recall-intro h2{margin-bottom:22px}
.recall-intro p{max-width:400px}
.recall-copy{max-width:440px;min-width:0;position:relative;z-index:3}
.recall-copy-result{order:1;margin-top:48px}
.recall-copy-recipe{order:3;margin-top:76px}
.recall-copy h3{font-size:var(--body);font-weight:600;letter-spacing:-.015em;line-height:1.4;margin:0 0 16px;text-wrap:balance}
.recall-copy p+p{margin-top:14px}
.recall-stage{display:contents}
.recall-shot{width:var(--recall-phone-width);max-width:100%;position:relative;flex:none;margin:44px auto 0;perspective:1100px;perspective-origin:50% 50%;z-index:2}
.recall-shot-result{order:2}
.recall-shot-recipe{order:4}
.recall .recall-phone{transform-origin:50% 50%;backface-visibility:hidden}
.recall .recall-phone:before{box-shadow:0 24px 36px #3a23162c}
@media(min-width:760px){
 .recall{--recall-phone-width:280px;padding-block:76px 110px}
 .recall-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:74px 48px}
 .recall-intro{grid-column:1/-1;grid-row:1}
 .recall-copy{margin:0;max-width:420px}
 .recall-copy-result{grid-column:1;grid-row:2}
 .recall-copy-recipe{grid-column:1;grid-row:3}
 .recall-shot{margin:0 auto}
 .recall-shot-result{grid-column:2;grid-row:2}
 .recall-shot-recipe{grid-column:2;grid-row:3}
}
/* Only JS enables this composition after checking the stable viewport size.
   Copy still determines the section height; there is no fixed scroll track. */
@media(min-width:1080px){
 .recall.recall-paired{--recall-phone-width:min(292px,32svh);--recall-stage-height:calc(var(--recall-phone-width)*2760/1350 + 156px);padding-block:80px 100px}
 .recall-paired .recall-layout{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:auto auto auto;align-items:start;gap:68px 56px}
 .recall-paired .recall-intro{grid-column:1;grid-row:1;max-width:490px}
 .recall-paired .recall-intro h2{font-size:var(--heading)}
 .recall-paired .recall-copy-result{grid-column:1;grid-row:2;padding-top:4px}
 .recall-paired .recall-copy-recipe{grid-column:1;grid-row:3;margin-top:106px;padding-bottom:26px}
 .recall-paired .recall-stage{grid-column:2;grid-row:1/4;display:block;position:sticky;top:max(28px,calc((100svh - var(--recall-stage-height))/2));height:var(--recall-stage-height);min-width:0;align-self:start;isolation:isolate;z-index:2}
 .recall-paired .recall-shot{position:absolute;top:12px;width:var(--recall-phone-width);margin:0}
 .recall-paired .recall-shot-result{left:0;z-index:2}
 .recall-paired .recall-shot-recipe{left:clamp(150px,16vw,220px);right:auto;z-index:1}
 .recall-paired .recall-shot-result .recall-phone{transform:translate3d(18px,42px,70px) rotateY(-3deg) scale(.97)}
 .recall-paired .recall-shot-recipe .recall-phone{transform:translate3d(90px,168px,-450px) rotateY(9deg) rotateX(5deg) scale(.94);opacity:.64}
}
@media(max-width:359px){.recall{--recall-phone-width:calc(100vw - 80px);padding-block:52px 84px}.recall-copy-result{margin-top:38px}.recall-copy-recipe{margin-top:64px}}
@media(prefers-reduced-motion:reduce){.recall .recall-phone,.recall .recall-motion-layer{transform:none!important;opacity:1!important}}