/* Signature: pinned scrubbed loaf. Static list by default, pinned only under html.motion. */
.loaf{background:var(--flour-2);padding:clamp(60px,8vw,120px) var(--gut)}
.loaf-pin{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:center}
.loaf-h{font:400 clamp(2.8rem,6.4vw,5.6rem)/.95 var(--serif);letter-spacing:-.02em;margin-bottom:1.6rem}
.cap{padding:14px 0;border-top:1px solid var(--line)}
.cap-n{font:500 .75rem/1 var(--sans);color:var(--muted);letter-spacing:.1em}
.cap h3{font:italic 400 2rem/1.1 var(--serif);color:var(--blue);margin:.35rem 0 .2rem}
.cap p{max-width:36ch;color:var(--ink)}
.loaf-bar{display:none}
.loaf-note{margin-top:1.4rem;font-size:.85rem;color:var(--muted);max-width:40ch}
.stage{position:relative;width:100%;aspect-ratio:3/2;max-height:72svh}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.sv-wrap{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s}
.gl-on .stage canvas{opacity:1}
.gl-on .sv-wrap{opacity:0}
.sv{transform-origin:50% 88%;transform-box:view-box;scale:calc(.86 + .14 * clamp(0, var(--p,1) * 2.2, 1))}
.sv-dough{fill:#EBDAB8}
.sv-mid{fill:#D8A257;opacity:clamp(0, calc((var(--p,1) - .12) * 4), 1)}
.sv-crust{fill:#9A5322;opacity:clamp(0, calc((var(--p,1) - .5) * 3), 1)}
.sv-score{fill:none;stroke:#EBD3A6;stroke-linecap:round;stroke-width:calc(2px + 12px * clamp(0, (var(--p,1) - .3) * 2.5, 1));opacity:clamp(0, calc((var(--p,1) - .28) * 6), 1)}
.sv-ear{fill:#7A3F17;opacity:clamp(0, calc((var(--p,1) - .5) * 3), .85)}
@media (max-width:860px){.loaf-pin{grid-template-columns:1fr}.stage{aspect-ratio:4/3}}

html.motion .loaf{height:430vh;padding:0}
html.motion .loaf-pin{position:sticky;top:0;height:100svh;padding:calc(var(--hd) + 12px) var(--gut) 24px;box-sizing:border-box}
html.motion .loaf-txt{position:relative}
html.motion .caps{position:relative;min-height:9.2rem}
html.motion .cap{position:absolute;inset:0 0 auto 0;opacity:0;translate:0 16px;transition:opacity .7s var(--ease),translate .8s var(--ease);pointer-events:none}
html.motion .cap.on{opacity:1;translate:0 0}
html.motion .loaf-bar{display:block;margin-top:1.4rem;height:2px;background:var(--line);max-width:260px}
html.motion .loaf-bar i{display:block;height:100%;background:var(--blue);transform-origin:left;scale:var(--p,0) 1}
@media (max-width:860px){
 html.motion .loaf{height:360vh}
 html.motion .loaf-pin{grid-template-rows:auto 1fr;align-content:start;gap:8px}
 html.motion .loaf-txt{order:2}
 html.motion .stage{order:1;max-height:40svh;aspect-ratio:3/2;margin-top:4px}
 html.motion .loaf-h{font-size:2.5rem;margin-bottom:.6rem}
 html.motion .loaf-txt .eyebrow{margin-bottom:.5rem}
 html.motion .caps{min-height:7.6rem}
 html.motion .cap h3{font-size:1.7rem}
 html.motion .loaf-note{margin-top:.8rem}
}