.food-story {
    --stage-height: min(100svh, 820px);
    overflow-anchor: none;
    --chapter-length: clamp(470px, 73svh, 720px);
    background: radial-gradient(ellipse at 38% 3%, #622132, #3e101b 58%);
    color: var(--cream);
}
.food-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    padding-block: clamp(49px, 6.5vw, 92px) 27px;
}
.food-intro .kicker { color: var(--gold); margin-bottom: 17px; }
.food-intro h2 { font-size: clamp(3rem, 6.4vw, 6.05rem); }
.food-intro h2 em { color: var(--rose); }
.food-intro > div:last-child { flex: 0 0 auto; padding-bottom: 3px; }
.food-intro > div:last-child > p:first-child { color: #f5d5c9; font-size: 1.02rem; }
.food-scroll-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    color: var(--gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.food-scroll-cue .icon { width: 15px; height: 15px; }
.food-stage { padding-block: 20px 58px; }
.food-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
.food-scene {
    --first: 1;
    --second: 1;
    --third: 1;
    --liquid-top: 0%;
    --pour-mask: 100%;
    --pour-opacity: 0;
    --fizz-opacity: 0;
    --fizz-offset: 0px;
    --light: #aa4a53;
    --middle: #742736;
    --shade: #461321;
    min-width: 0;
    padding: 17px;
    border: 1px solid #b4787470;
    border-radius: 9px;
}
.food-scene-cookie { --light: #9a5a3e; --middle: #693829; --shade: #391d1a; }
.food-scene-mocktail { --light: #b94758; --middle: #7b263c; --shade: #4c1329; }
.food-scene-shake { --light: #a6735b; --middle: #724438; --shade: #3c201f; }
.food-copy { min-width: 0; }
.food-chapter {
    color: var(--gold);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .16em;
}
.food-chapter span { color: var(--rose); padding-inline: 3px; }
.food-copy h3 {
    margin: 8px 0 16px;
    font-size: clamp(1.8rem, 3.1vw, 3.2rem);
    line-height: .99;
    letter-spacing: -.048em;
}
.food-copy h3 span { color: var(--rose); }
.food-active-step { display: none; }
.food-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.food-step-static, .food-steps button { display: flex; align-items: baseline; gap: 8px; color: #f0d4cb; font-size: .81rem; line-height: 1.24; }
.food-step-static > span:first-child, .food-steps button > span:first-child { color: var(--gold); font-size: .61rem; font-weight: 700; letter-spacing: .06em; }

.food-visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    aspect-ratio: 1.48;
    overflow: hidden;
    border: 1px solid #f6c6a694;
    border-radius: 9px;
    background: radial-gradient(ellipse at 51% 38%, var(--light) 0%, var(--middle) 44%, var(--shade) 87%);
}
.food-visual::before {
    position: absolute;
    z-index: 3;
    inset: 7px;
    border: 1px solid #f0c39a35;
    border-radius: 5px;
    content: "";
    pointer-events: none;
}
.food-visual::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("/images/grain.svg");
    opacity: .27;
    content: "";
}
.food-picture { position: absolute; inset: 7% 4% 9%; }
.food-orbit {
    position: absolute;
    inset: 2% 19% 10%;
    border: 1px solid #f1bb8e43;
    border-radius: 50%;
    box-shadow: 0 0 0 9px #f1bb8e0e;
    transform: rotate(-12deg);
}
.food-shadow {
    position: absolute;
    top: 87%;
    left: 18%;
    width: 63%;
    height: 8%;
    border-radius: 50%;
    background: #21090e;
    opacity: .57;
    filter: blur(11px);
}
.food-visual-star { position: absolute; z-index: 4; top: 10%; right: 9%; color: var(--gold); font-size: clamp(1rem, 2vw, 1.55rem); }
.food-visual-caption {
    position: absolute;
    z-index: 4;
    right: 15px;
    bottom: 13px;
    left: 15px;
    display: flex;
    justify-content: space-between;
    color: #ffe1c5;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.food-piece {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y);
    width: var(--w);
    height: auto;
    max-width: none;
    translate: -50% 0;
    pointer-events: none;
}
.food-base { --y: 24%; --w: 67%; }
.food-topping {
    --x: 45%;
    --y: 22%;
    --w: 30%;
    opacity: var(--first);
    transform: translateY(calc((1 - var(--first)) * -50%)) rotate(calc((1 - var(--first)) * -19deg));
}
.food-glaze {
    --x: 45%;
    --y: 40%;
    --w: 31%;
    opacity: var(--second);
    clip-path: inset(0 calc((1 - var(--second)) * 44%) 0 calc((1 - var(--second)) * 44%));
    mask-image: linear-gradient(transparent, #000 19%);
    transform: rotate(5deg);
}
.food-pour {
    --x: 45%;
    --y: -2%;
    --w: 19%;
    opacity: var(--pour-opacity);
    clip-path: inset(0 0 var(--pour-mask) 0);
}
.food-finish {
    --x: 78%;
    --y: 54%;
    --w: 18%;
    opacity: var(--third);
    transform: translate(calc((1 - var(--third)) * 30%), calc((1 - var(--third)) * -34%))
        rotate(calc((1 - var(--third)) * 13deg));
    filter: drop-shadow(0 6px 6px #24090c6e);
}
.food-scene-waffle .food-base { --x: 45%; }
.food-scene-cookie .food-base { --w: 72%; --y: 25%; }
.food-scene-cookie .food-topping { --x: 46%; --w: 36%; --y: 24%; }
.food-scene-cookie .food-glaze { --x: 48%; --y: 42%; --w: 34%; }
.food-scene-cookie .food-finish { --x: 64%; --y: 26%; --w: 23%; }
.food-scene-mocktail .food-base, .food-scene-mocktail .food-filled { --w: 20%; --y: 13%; }
.food-scene-shake .food-base, .food-scene-shake .food-filled { --w: 25%; --y: 17%; }
.food-scene-mocktail .food-base, .food-scene-shake .food-base { clip-path: inset(0 0 calc(100% - var(--liquid-top)) 0); }
.food-filled { clip-path: inset(var(--liquid-top) 0 0 0); }
.food-scene-mocktail .food-finish { --x: 61%; --y: 5%; --w: 22%; }
.food-scene-shake .food-finish { --x: 50%; --y: -7%; --w: 21%; }
.food-scene-mocktail .food-pour { --x: 50%; --y: -10%; --w: 6%; }
.food-scene-shake .food-pour { --x: 50%; --y: -13%; --w: 10%; }
.food-scene-mocktail .food-shadow, .food-scene-shake .food-shadow { left: 34%; width: 33%; top: 84%; }
.food-fizz {
    position: absolute;
    top: 46%;
    left: 44%;
    width: 12%;
    height: 29%;
    opacity: var(--fizz-opacity);
    transform: translateY(var(--fizz-offset));
    background:
        radial-gradient(circle at 17% 74%, #fff1da 0 1px, #fff1da80 1px 2px, transparent 3px),
        radial-gradient(circle at 68% 62%, #fff0d9 0 1px, transparent 2px),
        radial-gradient(circle at 38% 39%, #fff0d9 0 1px, #fff0d980 1px 2px, transparent 3px),
        radial-gradient(circle at 81% 22%, #fff0d9 0 1px, transparent 2px),
        radial-gradient(circle at 30% 93%, #fff0d9 0 1px, transparent 2px);
}
.food-scene-shake .food-fizz {
    top: 17%;
    left: 41%;
    width: 18%;
    height: 13%;
    background:
        radial-gradient(ellipse at 17% 72%, #4a241b 0 2px, transparent 3px),
        radial-gradient(ellipse at 68% 62%, #462720 0 1px, transparent 3px),
        radial-gradient(ellipse at 38% 39%, #5a3426 0 2px, transparent 3px),
        radial-gradient(ellipse at 81% 22%, #42231e 0 1px, transparent 2px),
        radial-gradient(ellipse at 30% 94%, #4a261f 0 2px, transparent 3px);
}

.food-story.is-scrubbed .food-runway { height: calc(var(--stage-height) + var(--chapter-length) * 4); }
.food-story.is-scrubbed .food-stage {
    position: sticky;
    top: 0;
    height: var(--stage-height);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 3vh, 29px);
    padding-block: clamp(16px, 4vh, 33px);
}
.is-scrubbed .food-scenes { display: block; min-height: 0; }
.is-scrubbed .food-scene {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: clamp(22px, 5vw, 82px);
    padding: 0;
    border: 0;
}
.is-scrubbed .food-copy h3 { font-size: clamp(2.55rem, 5.1vw, 5.3rem); }
.is-scrubbed .food-steps { grid-template-columns: 1fr; gap: 0; margin: 22px 0 0; }
.is-scrubbed .food-step-static { display: none; }
.food-steps button {
    width: 100%;
    min-height: 35px;
    padding: 8px 7px;
    border: 0;
    border-bottom: 1px solid #a67a7959;
    background: transparent;
    text-align: left;
}
.food-steps button:hover { background: #f3af9f17; }
.food-steps li[aria-current] button { border-bottom-color: var(--gold); background: #f3af9f25; color: var(--cream); }
.food-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #bc8c7e66;
}
.food-tabs { display: flex; align-items: center; gap: 6px; }
.food-tabs button {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    color: #f8d9c9;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.12;
}
.food-tabs button span { margin-right: 5px; color: var(--gold); font-size: .63rem; }
.food-tabs button:hover { border-color: #ba8f80; }
.food-tabs button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.food-tabs button[aria-pressed="true"] span { color: #7d392f; }
.food-skip { color: #ffe6d3; font-size: .76rem; white-space: nowrap; }
.food-story :focus-visible { outline-color: var(--gold); }
.food-stage-foot {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--gold);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
}
.food-meter { flex: 1; height: 3px; background: #c58e8260; overflow: hidden; border-radius: 4px; }
.food-meter > span { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--food-progress, 0)); transform-origin: left; }

@media (max-width: 770px) {
    .food-story { --stage-height: min(100svh, 710px); --chapter-length: clamp(410px, 66svh, 580px); }
    .food-intro { align-items: start; flex-direction: column; gap: 15px; }
    .food-scenes { grid-template-columns: 1fr; }
    .food-stage { padding-block: 13px 42px; }
    .food-scene { padding: 14px; }
    .food-story.is-scrubbed .food-stage { gap: 8px; }
    .is-scrubbed .food-scene {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, auto);
        align-content: center;
        gap: clamp(10px, 3vh, 19px);
    }
    .is-scrubbed .food-copy h3 { margin: 6px 0 7px; font-size: clamp(2rem, 7.1vw, 3.7rem); }
    .is-scrubbed .food-active-step { display: block; font-size: .85rem; color: #ffe0c9; }
    .is-scrubbed .food-steps { display: flex; gap: 6px; margin-top: 8px; }
    .food-steps button { min-width: 32px; min-height: 33px; justify-content: center; border: 1px solid #a67a7988; border-radius: 4px; }
    .food-steps button > span:last-child { display: none; }
    .is-scrubbed .food-visual { width: min(100%, 550px); margin-inline: auto; }
    .food-controls { flex-wrap: wrap; gap: 6px; padding-bottom: 7px; }
    .food-tabs { gap: 3px; }
    .food-tabs button { min-height: 37px; padding: 7px 8px; font-size: .72rem; }
    .food-tabs button span { display: none; }
    .food-skip { margin-left: auto; min-height: 33px; }
    .food-visual-caption { font-size: .56rem; }
}