:root{
  /* plum — brand, dark surfaces, actions */
  --plum-50:oklch(97% .012 345);--plum-100:oklch(93% .022 345);--plum-200:oklch(86% .04 345);
  --plum-300:oklch(76% .06 345);--plum-400:oklch(64% .075 345);--plum-500:oklch(53% .085 345);
  --plum-600:oklch(44% .085 345);--plum-700:oklch(36% .08 345);--plum-800:oklch(26% .06 345);
  --plum-900:oklch(19% .05 345);--plum-950:oklch(14% .035 345);
  --logo-plum:#381D2A;
  /* ink — text on light */
  --ink-50:oklch(97% .006 345);--ink-100:oklch(93% .01 345);--ink-200:oklch(86% .015 345);
  --ink-300:oklch(76% .02 345);--ink-400:oklch(64% .025 345);--ink-500:oklch(53% .03 345);
  --ink-600:oklch(42% .04 345);--ink-700:oklch(33% .04 345);--ink-800:oklch(24% .04 345);
  --ink-900:oklch(18% .03 345);--ink-950:oklch(13% .02 345);
  /* butter — light surfaces */
  --butter-50:oklch(98.5% .01 80);--butter-100:oklch(96.5% .02 80);--butter-200:oklch(94% .03 80);
  --butter-300:oklch(89% .045 80);--butter-400:oklch(84% .06 80);--butter-500:oklch(76% .07 80);
  --butter-600:oklch(66% .07 80);--butter-700:oklch(55% .06 80);--butter-800:oklch(44% .05 80);
  --butter-900:oklch(33% .035 80);--butter-950:oklch(24% .025 80);
  /* berry — voice */
  --berry-50:oklch(97% .015 5);--berry-100:oklch(93% .03 5);--berry-200:oklch(86% .06 5);
  --berry-300:oklch(76% .1 5);--berry-400:oklch(65% .13 5);--berry-500:oklch(54% .145 5);
  --berry-600:oklch(42% .13 5);--berry-700:oklch(35% .11 5);--berry-800:oklch(28% .09 5);
  --berry-900:oklch(22% .07 5);--berry-950:oklch(16% .05 5);
  /* gold — markers */
  --gold-50:oklch(98% .017 78);--gold-100:oklch(95% .04 78);--gold-200:oklch(88% .07 78);
  --gold-300:oklch(82% .11 78);--gold-400:oklch(76% .13 78);--gold-500:oklch(68% .13 78);
  --gold-600:oklch(58% .115 78);--gold-700:oklch(48% .095 78);--gold-800:oklch(38% .075 78);
  --gold-900:oklch(29% .055 78);--gold-950:oklch(21% .04 78);
  /* caramel — asides, warning */
  --caramel-50:oklch(97% .015 55);--caramel-100:oklch(93% .03 55);--caramel-200:oklch(86% .055 55);
  --caramel-300:oklch(77% .085 55);--caramel-400:oklch(67% .11 55);--caramel-500:oklch(58% .12 55);
  --caramel-600:oklch(49% .11 55);--caramel-700:oklch(41% .095 55);--caramel-800:oklch(33% .075 55);
  --caramel-900:oklch(25% .055 55);--caramel-950:oklch(18% .04 55);
  /* sage — success only */
  --sage-50:oklch(97% .015 150);--sage-100:oklch(93% .03 150);--sage-200:oklch(86% .05 150);
  --sage-300:oklch(76% .075 150);--sage-400:oklch(65% .095 150);--sage-500:oklch(55% .1 150);
  --sage-600:oklch(46% .09 150);--sage-700:oklch(38% .075 150);--sage-800:oklch(30% .06 150);
  --sage-900:oklch(23% .045 150);--sage-950:oklch(17% .03 150);
  /* chilli — error only */
  --chilli-50:oklch(97% .014 28);--chilli-100:oklch(93% .03 28);--chilli-200:oklch(86% .06 28);
  --chilli-300:oklch(76% .1 28);--chilli-400:oklch(65% .14 28);--chilli-500:oklch(56% .16 28);
  --chilli-600:oklch(47% .15 28);--chilli-700:oklch(39% .125 28);--chilli-800:oklch(31% .1 28);
  --chilli-900:oklch(24% .075 28);--chilli-950:oklch(17% .05 28);

  /* aliases used by index.html (v1) */
  --plum:var(--plum-800);--plum-deep:var(--plum-900);--plum-glow:var(--plum-700);
  --butter:var(--butter-200);--butter-deep:var(--butter-300);--paper:var(--butter-400);
  --ink:var(--ink-800);--ink-soft:var(--ink-600);
  --berry:var(--berry-600);--gold:var(--gold-400);--caramel:var(--caramel-600);

  /* type (self-hosted, §4.2) */
  --font-display:"Young Serif",Georgia,serif;
  --font-text:"Nunito Sans",system-ui,sans-serif;

  /* shape, depth, motion */
  --radius-pill:999px;--radius-frame:2rem;--radius-card:1.5rem;--radius-field:1rem;
  --shadow-float:0 40px 70px -40px oklch(26% .06 345 / .55);
  --shadow-lift:0 0 0 1px oklch(26% .06 345 / .08),0 14px 28px -12px oklch(26% .06 345 / .6);
  --shadow-tag:0 10px 24px -10px oklch(26% .06 345 / .6);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-move:cubic-bezier(.77,0,.175,1);
  --section-y:clamp(5rem,12vw,9rem);--content:min(72rem,100% - 3rem);
}
:root{
  --bevel:inset 0 1px 0 oklch(100% 0 0 / .6);
  /* web-only tokens (§11.8) */
  --tilt:1.2deg;--tray-max:96rem;--card-gap:clamp(4rem,10vw,7rem);
  --dur-press:160ms;--dur-state:200ms;--dur-sheet-in:320ms;--dur-sheet-out:240ms;--dur-burst:600ms;--dur-reveal:900ms;--dur-hero:2600ms;--dur-tick:1200ms;
  --butter-85:oklch(94% .03 80 / .85);--butter-60:oklch(94% .03 80 / .6);--butter-18:oklch(94% .03 80 / .18);
  --hearts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23381D2A' fill-opacity='.09'%3E%3Cpath d='M30 42c-5-8-16-4-14 5 1 6 9 12 14 17 5-5 13-11 14-17 2-9-9-13-14-5z'/%3E%3Cpath d='M90 96c-5-8-16-4-14 5 1 6 9 12 14 17 5-5 13-11 14-17 2-9-9-13-14-5z'/%3E%3Cpath d='M92 24c-3-5-10-2-9 3 1 4 6 7 9 10 3-3 8-6 9-10 1-5-6-8-9-3z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-text);font-optical-sizing:auto;background:var(--butter-200);color:var(--ink-800);line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:4px}
h1,h2,h3,h4,.serif{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(2rem,4vw,3rem)}
h4{font-size:1.35rem;line-height:1.2;letter-spacing:0}
p{max-width:56ch}
.wrap{width:var(--content);margin-inline:auto;position:relative;z-index:1}
section{position:relative;padding-block:var(--section-y)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600);margin-bottom:1rem}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;max-width:30rem;color:var(--ink-600);margin-top:1rem}
.body-l{font-size:1.1rem;line-height:1.7;max-width:62ch;color:var(--ink-600)}
.body-l p+p,.body p+p{margin-top:1.2rem}
.hearts{background-image:var(--hearts)}
.picture{aspect-ratio:3/4;border-radius:2rem;background-size:cover;background-position:center;position:relative}
.promise{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none}
.promise li{padding:.5rem 1rem;border-radius:999px;background:var(--plum-800);color:var(--butter-200);font-weight:600;font-size:.9rem}
/* ---------- photo frame (§9.2): whole photo, never cropped; tilt via `rotate` so GSAP's transform never fights it ---------- */
.frame{padding:.6rem;border-radius:2rem;background:var(--butter-300);box-shadow:var(--bevel),var(--shadow-float);position:relative;z-index:1}
.frame .pic{aspect-ratio:3/4;border-radius:calc(2rem - .6rem);overflow:hidden;background:var(--butter-400);box-shadow:inset 0 1px 1px oklch(100% 0 0 / .25)}
.frame img{width:100%;height:100%;object-fit:contain}
.tilt-l{rotate:calc(var(--tilt) * -1)}
/* hero, as on the static menu (D74): full-bleed tin photo dissolving into plum, light text */
.hero{position:relative;min-height:100dvh;overflow:hidden;background:var(--plum-800);color:var(--butter-200);display:grid;align-items:end;padding-block:0}
.hero-art{position:absolute;inset:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(26% .06 345 / .55) 0%,oklch(26% .06 345 / .15) 35%,oklch(26% .06 345 / .92) 78%,var(--plum-800) 100%),linear-gradient(90deg,oklch(26% .06 345 / .85) 0%,oklch(26% .06 345 / .2) 55%,transparent 100%)}
.hero-inner{position:relative;z-index:1;width:var(--content);margin-inline:auto;padding:clamp(5rem,12vh,8rem) 0 clamp(3rem,7vh,5rem);display:grid;gap:2rem;align-items:end}
.hero .wordmark{width:min(22rem,70vw);height:auto;margin-bottom:clamp(2rem,6vh,4rem)}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:12em}
.hero h1 .w{display:block}
.hero-side>*+*{margin-top:1.25rem}
.hero-lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;max-width:30rem;color:var(--butter-85)}
.hero .btn-primary{background:var(--butter-200);color:var(--plum-800)}
@media(hover:hover) and (pointer:fine){.hero .btn-primary:hover{background:var(--butter-50);transform:translateY(-2px)}}
@media(min-width:60rem){.hero-inner{grid-template-columns:8fr 4fr}}
.hero-copy,.hero-side,.hero-cta{min-width:0}
/* load choreography: only once JS is on, only with motion allowed (§11.8) */
@media (prefers-reduced-motion:no-preference){
.js .hero-art img{animation:settle-photo 2600ms var(--ease-out) both}
.js .hero .wordmark{animation:wipe 1300ms var(--ease-move) 250ms both}
.js .hero h1 .w{animation:rise 1000ms var(--ease-out) both;animation-delay:900ms}
.js .hero h1 .w+.w{animation-delay:1100ms}
.js .hero-side{animation:fadeup 1000ms var(--ease-out) 1600ms both}
@keyframes settle-photo{from{transform:scale(1.12)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(32px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
.sheet{transition:transform var(--dur-sheet-out) var(--ease-out)}
.sheet.in{transition-duration:var(--dur-sheet-in)}
/* W4: the bar, pill and notice fade; pocket counts bump; a removed line slides out; the one transient heart */
.js .bar,.js .pill,.js .notice{transition:opacity var(--dur-sheet-in) var(--ease-out),transform var(--dur-sheet-in) var(--ease-out),visibility var(--dur-sheet-in)}
.js .bar:not(.show),.js body.sheet-open .bar{opacity:0;transform:translateY(1rem)}
/* coming back, visibility switches at once (a focus() may land on it); only hiding waits for the fade */
.js body:not(.sheet-open) .bar.show,.js body:not(.sheet-open) .pill.show,.js .notice.show{transition:opacity var(--dur-sheet-in) var(--ease-out),transform var(--dur-sheet-in) var(--ease-out),visibility 0s}
.js .pill:not(.show),.js body.sheet-open .pill{opacity:0}
.js .notice:not(.show){opacity:0;transform:translate(-50%,1rem)}
.js .line{transition:opacity var(--dur-sheet-out),transform var(--dur-sheet-out)}
.js .line.out{opacity:0;transform:translateX(-16px)}
.js .count.bump{animation:bump var(--dur-burst) var(--ease-out)}
.js .pulse{animation:pulse var(--dur-burst) var(--ease-out)}
.js .burst{animation:fly var(--dur-burst) var(--ease-out) forwards}
@keyframes bump{30%{transform:scale(1.25)}}
@keyframes pulse{40%{transform:scale(1.06)}}
@keyframes fly{to{transform:translateY(-28px);opacity:0}}
.js details[open] p{animation:fadein var(--dur-state)}
@keyframes fadein{from{opacity:0}}
.js .rv{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.js .rv:not(.in){opacity:0;transform:translateY(32px)}
@supports (animation-timeline:view()){@media(min-width:56rem){
.js .goes-in{height:250dvh;view-timeline-name:--goes-in}
.js .goes-in .tray{position:sticky;top:0;min-height:100dvh;display:grid;align-items:center;padding-block:4rem}
.js .goes-in .ing li{animation:rise linear both;animation-timeline:--goes-in}
.js .goes-in .ing li:nth-child(1){animation-range:contain 0% contain 12%}
.js .goes-in .ing li:nth-child(2){animation-range:contain 10% contain 22%}
.js .goes-in .ing li:nth-child(3){animation-range:contain 20% contain 32%}
.js .goes-in .ing li:nth-child(4){animation-range:contain 30% contain 42%}
.js .goes-in .ing li:nth-child(5){animation-range:contain 40% contain 52%}
.js .goes-in .ing li:nth-child(6){animation-range:contain 50% contain 62%}
.js .goes-in .ing li:nth-child(7){animation-range:contain 60% contain 72%}
.js .goes-in .ing li:nth-child(8){animation-range:contain 70% contain 82%}
}}
}
/* still version (§11.9): one 300 ms fade, only under reduced motion */
@media (prefers-reduced-motion:reduce){.js .hero-inner{animation:fade 300ms linear both}@keyframes fade{from{opacity:0}}}
/* buttons (atoms, from design/web-blocks.html) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;border:0;font:600 1rem/1.2 var(--font-text);cursor:pointer;text-decoration:none;color:inherit;transition:background var(--dur-state),color var(--dur-state),transform var(--dur-press) var(--ease-out),box-shadow var(--dur-state)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--plum-800);color:var(--butter-200)}
@media(hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--plum-600);transform:translateY(-2px)}}
/* 404 page */
.nf{width:var(--content);margin-inline:auto;padding-block:2rem 5rem}
.nf .wordmark{width:14rem;height:auto}
.nf h2{margin-top:clamp(3rem,10vw,6rem)}
.nf .btn{margin-top:2rem}
/* ---------- shelf, product panel, sheets (ported from design/web-blocks.html) ---------- */
:root{--wa:oklch(62% .17 150);--wa-fg:oklch(98% .01 150)}
.tray{position:relative;background:var(--plum-800);color:var(--butter-200);border-radius:2rem 2rem 0 0;overflow:hidden;padding-block:var(--section-y)}
.tray .eyebrow{color:var(--gold-200)}
@media(min-width:56rem){.tray{width:min(100% - 3rem,var(--tray-max));margin-inline:auto;border-radius:2rem;box-shadow:var(--shadow-float)}}
section.holds-tray{padding-block:0}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn-secondary{background:transparent;color:var(--plum-800);box-shadow:inset 0 0 0 1.5px oklch(26% .06 345 / .25)}
.btn-wa:active,.btn-wa:focus-visible{background:var(--wa);color:var(--wa-fg)}
.on-plum .btn-primary{background:var(--butter-200);color:var(--plum-800)}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;display:inline-grid;place-items:center;cursor:pointer;background:var(--plum-50);color:var(--plum-800);transition:transform var(--dur-press) var(--ease-out),background var(--dur-state)}
.icon-btn:active{transform:scale(.97)}
.icon-btn svg{width:22px;height:22px}
.close{flex:none}
.on-plum .icon-btn{background:var(--plum-700);color:var(--butter-200)}
.chip{min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--ink-200);background:transparent;color:var(--plum-800);font:600 .95rem/1 var(--font-text);cursor:pointer;white-space:nowrap;transition:background var(--dur-state),color var(--dur-state),transform var(--dur-press)}
.chip:active{transform:scale(.97)}
.chip[aria-checked="true"]{background:var(--plum-800);border-color:var(--plum-800);color:var(--butter-200)}
.on-plum .chip{color:var(--butter-200);border-color:var(--butter-18)}
.on-plum .chip[aria-checked="true"]{background:var(--butter-200);border-color:var(--butter-200);color:var(--plum-800)}
.on-plum .promise li{background:var(--butter-200);color:var(--plum-800)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-weight:600;color:var(--plum-800);list-style:none}
.on-plum .tags{color:var(--butter-200)}
.tags li:not(:last-child)::after{content:"";display:inline-block;width:.35em;height:.35em;border-radius:50%;background:var(--gold-400);margin-left:.9rem;vertical-align:middle}
.tilt-r{rotate:var(--tilt)}
@media(hover:hover) and (pointer:fine){
  .btn-secondary:hover{background:var(--plum-50)}
  .on-plum .btn-primary:hover{background:var(--butter-50)}
  .btn-wa:hover{background:var(--wa);color:var(--wa-fg)}
  .card{transition:translate .2s var(--ease-out),box-shadow .2s,transform var(--dur-press) var(--ease-out)}
  .card:hover{translate:0 -4px;box-shadow:var(--bevel),0 48px 80px -40px oklch(26% .06 345 / .7)}
}
/* label sticker under a card's frame */
.label{display:flex;align-items:center;gap:1rem;margin-top:1rem;background:var(--butter-50);color:var(--ink-800);border-radius:1.5rem;padding:1.25rem 1.5rem;box-shadow:var(--bevel),var(--shadow-lift)}
.label h4 a{color:inherit;text-decoration:none}
.label p{color:var(--ink-600);font-size:.95rem;font-weight:600;margin-top:.3rem;max-width:34ch}
/* the tables */
.table-grid{display:grid;gap:var(--card-gap);margin-top:3rem;position:relative;z-index:1}
.table-grid h3{scroll-margin-top:2rem;margin-bottom:calc(var(--card-gap) * -.5)}
.card>a{display:block;color:inherit;text-decoration:none}
.card:active{transform:scale(.985)}
/* The shelf grid (D70, Vrushank 2026-10-22): aligned rows, straight frames, labels of equal height.
   One column on phones, two from 36rem, three from 56rem. */
.table-grid .card{display:flex;flex-direction:column}
.table-grid .label{flex:1}
@media(min-width:36rem){
  .table-grid{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;row-gap:3.5rem;align-items:stretch}
  .table-grid h3{grid-column:1/-1;margin-bottom:-1rem}
  .table-grid .frame{rotate:none}
  .table-grid .label{padding:1.1rem 1.25rem}
  .table-grid .label h4{font-size:1.2rem}
}
@media(min-width:56rem){.table-grid{grid-template-columns:repeat(3,1fr);column-gap:2rem}}
/* sheets: native <dialog> */
dialog{border:0;padding:0;margin:0;background:var(--butter-200);color:var(--ink-800);max-width:none;max-height:none;overflow:hidden}
dialog::backdrop{background:oklch(14% .035 345 / .55)}
dialog.on-plum{background:var(--plum-800);color:var(--butter-200)}
body.sheet-open{overflow:hidden}
.sheet{position:fixed;inset:auto 0 0 0;width:100%;height:auto;max-height:92dvh;border-radius:1.5rem 1.5rem 0 0;display:flex;flex-direction:column;transform:translateY(100%)}
.sheet.in{transform:none}
.sheet:not([open]){display:none} /* display:flex above beats the browser's own rule that hides a closed dialog */
.sheet-body{overflow-y:auto;flex:1;padding:1.25rem 1.25rem 1.5rem;overscroll-behavior:contain}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.sheet-head h2{font-size:1.8rem}
.sheet-foot{flex:none;display:grid;gap:.7rem;padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--ink-200)}
.on-plum .sheet-foot{box-shadow:0 -1px 0 var(--butter-18)}
.msg{white-space:pre-wrap;background:var(--butter-50);border-radius:1rem;padding:1rem 1.1rem;font-size:1rem;color:var(--ink-800);box-shadow:inset 0 0 0 1px var(--ink-200);margin:1rem 0 1.4rem}
#wa-go{width:100%}
@media(min-width:56rem){
  .sheet.center{inset:0;margin:auto;width:min(32rem,90vw);height:fit-content;border-radius:1.5rem;transform:scale(.96)}
  .sheet.center.in{transform:none}
  .sheet.center .sheet-body{padding:2rem}
  .sheet.center.panel{width:min(64rem,92vw);height:min(90dvh,54rem)}
}
/* product panel */
.panel-stage{position:relative;overflow:hidden;margin:-1.25rem -1.25rem 0;padding:1.25rem 1.25rem 0}
.panel-photos{position:relative;z-index:1;display:grid;gap:1rem;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:.4rem .2rem 1.5rem}
.panel-photos .frame{scroll-snap-align:start}
.panel-photos:has(.frame:only-child){grid-auto-columns:min(100%,22rem)}
.panel h3{font-size:clamp(2rem,4vw,2.6rem);margin:1rem 0 .8rem}
.panel .hook{font-weight:600;font-size:1.2rem;color:var(--berry-600);max-width:34ch}
.on-plum.panel .hook{color:var(--berry-200)}
.panel .desc{margin-top:.8rem;color:var(--ink-600)}
.on-plum.panel .desc{color:var(--butter-85)}
.panel .block{margin-top:1.4rem}
.panel .sizes{display:flex;flex-wrap:wrap;gap:.6rem}
.panel .price-line{display:flex;align-items:baseline;gap:.7rem;margin-top:1.4rem}
.panel .price-line b{font-family:var(--font-display);font-weight:400;font-size:1.6rem}
@media(min-width:56rem){
  .panel .sheet-body{display:grid;grid-template-columns:5fr 6fr;gap:3rem;overflow:hidden;padding:2rem}
  .panel-stage{margin:0;padding:0;overflow-y:auto;border-radius:1.5rem}
  /* room on every side so the frames' shadows are never clipped; extra room at the foot so the last photo clears the fade (D79) */
  .panel-photos{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:1rem 1.25rem 4rem}
  /* more than one photo: a soft fade at the foot of the column says it scrolls */
  .panel-stage:has(.frame+.frame){-webkit-mask-image:linear-gradient(#000 calc(100% - 5rem),transparent);mask-image:linear-gradient(#000 calc(100% - 5rem),transparent)}
  .panel-words{overflow-y:auto;padding-right:.5rem}
  .panel .sheet-foot{padding:1.25rem 2rem 2rem}
}
/* ---------- W4: shelf head, add button, pocket, bar and pill, notice (ported from design/web-blocks.html) ---------- */
.shelf{background:var(--butter-200)}
.rail{display:flex;gap:.6rem;margin-top:2.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:.3rem 1.5rem;margin-inline:-1.5rem;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail .chip{scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="true"]{background:var(--plum-800);border-color:var(--plum-800);color:var(--butter-200)}
@media(min-width:56rem){.rail{flex-wrap:wrap;overflow:visible;padding:.3rem;margin-inline:-.3rem}}
.table-grid h3{scroll-margin-top:6rem}
.add{flex:none}
html:not(.js) .add,html:not(.js) .bar,html:not(.js) .pill{display:none}/* the pocket needs JavaScript */
.count{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;font:600 .8rem/1 var(--font-text);font-variant-numeric:tabular-nums;background:var(--plum-800);color:var(--butter-200)}
.btn-primary .count{background:var(--gold-200);color:var(--plum-800)}
.count:empty,.count[data-n="0"]{display:none}
.stepper{display:inline-flex;align-items:center;gap:.6rem}
.stepper output{min-width:1.5rem;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.icon-btn:disabled{opacity:.4;cursor:default}
.link{color:inherit;font-weight:600;text-underline-offset:.2em}
.frame-sm{padding:.3rem;border-radius:1rem;box-shadow:var(--bevel)}
.frame-sm .pic{border-radius:.7rem}
/* phone: the bottom bar (a paper tag); desktop: the pocket pill */
.bar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:50;display:flex;justify-content:space-between;gap:.6rem;padding:.5rem;border-radius:999px;background:var(--butter-200);box-shadow:inset 0 1px 0 var(--gold-400),var(--shadow-lift);visibility:hidden}
.bar.show,.pill.show{visibility:visible}
body.sheet-open .bar,body.sheet-open .pill{visibility:hidden}
.pill{position:fixed;top:2rem;right:2rem;z-index:50;display:none;align-items:center;gap:.5rem;min-height:48px;padding:0 1.1rem;border-radius:999px;border:0;cursor:pointer;font:600 .95rem/1 var(--font-text);color:var(--plum-800);background:var(--butter-200);box-shadow:var(--shadow-lift),inset 0 1px 0 var(--gold-400);visibility:hidden;transition:transform var(--dur-press)}
.pill:active{transform:scale(.97)}
.pill svg{width:20px;height:20px}
@media(min-width:56rem){.bar{display:none}html.js .pill{display:inline-flex}}
/* the open pocket: a scalloped paper-cut top edge on phones, a side sheet on desktop */
.pocket-sheet{--sc:1.5rem;padding-top:var(--sc);-webkit-mask:radial-gradient(circle at 50% 100%,#000 calc(var(--sc) * .48),transparent calc(var(--sc) * .5)) top/var(--sc) var(--sc) repeat-x,linear-gradient(#000,#000) 0 var(--sc)/100% calc(100% - var(--sc)) no-repeat;mask:radial-gradient(circle at 50% 100%,#000 calc(var(--sc) * .48),transparent calc(var(--sc) * .5)) top/var(--sc) var(--sc) repeat-x,linear-gradient(#000,#000) 0 var(--sc)/100% calc(100% - var(--sc)) no-repeat}
.pocket-sheet h2{font-size:2rem}
.pocket-note{font-size:.85rem;color:var(--ink-600);margin-top:1rem}
.pocket-empty{padding:3rem 1rem;text-align:center;border-radius:1.5rem;background:var(--butter-50)}
.pocket-empty p{margin-inline:auto;color:var(--ink-600)}
.open-pocket .count{margin-left:.1rem}
.bar .lbl{white-space:nowrap}
.line{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--ink-200)}
.line .name{font-family:var(--font-display);font-size:1.2rem;line-height:1.2}
.line small{display:block;color:var(--ink-600);font-size:.95rem}
.line .stepper{margin-top:.5rem}
@media(min-width:56rem){
  .sheet.side{inset:0 0 0 auto;width:max(28rem,40vw);height:100dvh;max-height:none;border-radius:1.5rem 0 0 1.5rem;transform:translateX(100%)}
  .sheet.side.in{transform:none}
  .sheet.side .sheet-body{padding:2rem}
  .sheet.side .sheet-foot{padding:1.25rem 2rem 2rem}
  .pocket-sheet{padding-top:0;-webkit-mask:none;mask:none}
  .panel .sheet-foot{grid-template-columns:1fr 1fr}
}
/* panel tools: share and close, at the dialog's top right so they belong to the whole panel (D75) */
.tools{display:inline-flex;gap:.5rem}
.panel .tools{position:absolute;top:1rem;right:1rem;z-index:3}
.panel .sheet-head{min-height:48px}
@media(min-width:56rem){.panel .tools{top:1.5rem;right:1.5rem}.panel .panel-words h3{padding-right:7.5rem}}
/* notice and the one transient heart */
.notice{position:fixed;left:50%;bottom:calc(6rem + env(safe-area-inset-bottom));z-index:120;transform:translate(-50%,0);visibility:hidden;pointer-events:none;background:var(--butter-50);color:var(--plum-800);font-weight:600;padding:.75rem 1.2rem;border-radius:999px;box-shadow:var(--shadow-lift);max-width:calc(100% - 2rem)}
.notice.show{visibility:visible}
@media(min-width:56rem){.notice{bottom:2rem}}
.burst{position:fixed;z-index:130;pointer-events:none;color:var(--gold-400);font-size:1.25rem;line-height:1;translate:-50% -50%}
/* ---------- W6: the story chapters (ported from design/web-blocks.html) ---------- */
/* 2 · whose kitchen this is: Miloni's note on the table */
.kitchen{background:var(--butter-100)}
.note{background:var(--butter-50);border-radius:1.5rem;padding:2rem;box-shadow:var(--bevel),var(--shadow-float);rotate:var(--tilt);max-width:40rem;margin-inline:auto}
.kitchen-split{display:grid;gap:3rem;align-items:center}
.kitchen-clip{margin:0;width:min(100%,24rem);justify-self:center;rotate:calc(var(--tilt) * -1)}
.kitchen-clip img{object-fit:cover}
@media(min-width:56rem){.kitchen-split{grid-template-columns:7fr 5fr;gap:5rem}.kitchen .note{margin:0;max-width:none}.kitchen-clip{justify-self:end}}
.note h2{margin-bottom:1.2rem}
.note p+p{margin-top:1rem}
.note .sign-off{margin-top:1.5rem;font-size:.95rem;font-weight:600;color:var(--ink-600)}
/* 4 · what goes in */
.goes-in .picture{aspect-ratio:4/5;background-image:url(/img/A3-what-goes-in-plum.jpg);margin-bottom:2.5rem}
/* the ingredient words: the body face, one size for all, in two columns (D71) */
.ing{list-style:none;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;max-width:34rem}
.ing li{font:600 clamp(1.05rem,1.4vw,1.2rem)/1.35 var(--font-text);color:var(--butter-200);display:flex;align-items:center;gap:.7rem}
.ing li::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--gold-400)}
.ing-note{margin-top:2rem;font-size:.95rem;font-weight:600;color:var(--butter-60)}
@media(min-width:56rem){
  .goes-in .wrap{display:grid;grid-template-columns:5fr 7fr;gap:5rem;align-items:center}
  .goes-in .picture{margin-bottom:0}
}
/* 5 · how ordering works: the timeline with art spots, the FAQ folds, the two asks */
.order .split{display:grid;gap:3rem;align-items:start;margin-top:2.5rem}
@media(min-width:56rem){.order .split{grid-template-columns:5fr 7fr;gap:6rem}.order .timeline{position:sticky;top:6rem}}/* the steps stay while the FAQs scroll past (D78) */
.timeline{list-style:none;position:relative;margin-top:1rem;padding-left:7.5rem;display:grid;gap:2.5rem}
.timeline::before{content:"";position:absolute;left:7.5rem;top:.5rem;bottom:.5rem;width:1px;background:var(--gold-400)}
.timeline .step{position:relative;padding-left:1.6rem;min-height:5rem}
.timeline .step .dot{position:absolute;left:-.3rem;top:.45rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--gold-400)}
.spot{position:absolute;left:-7.5rem;top:-.75rem;width:6rem;aspect-ratio:1;border-radius:50%;background:url(/img/A4-bake-in-progress-spots.jpg) no-repeat;background-size:300% 300%;box-shadow:var(--bevel)}
/* each quarter of A4 holds one object near its centre; zoomed so the object fills the sticker */
.spot[data-q="1"]{background-position:15% 15%}.spot[data-q="2"]{background-position:85% 15%}.spot[data-q="3"]{background-position:15% 85%}.spot[data-q="4"]{background-position:85% 85%}
.timeline .step h3{font-size:1.35rem;line-height:1.2;margin-bottom:.3rem}
.timeline .step p{color:var(--ink-600)}
@media(min-width:56rem){.timeline{padding-left:10.5rem;gap:3.5rem}.timeline::before{left:10.5rem}.spot{width:9rem;left:-10.5rem;top:-2.5rem}.timeline .step{min-height:7rem}}
.faq{margin-top:1rem}
details{border-top:1px solid var(--ink-200);padding:1.1rem 0}
details:last-of-type{border-bottom:1px solid var(--ink-200)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-display);font-size:1.35rem;line-height:1.2;min-height:48px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--plum-800);border-bottom:2px solid var(--plum-800);rotate:-45deg;margin-right:.4rem;flex:none}
details[open] summary::after{rotate:45deg}
details p{margin-top:.6rem;color:var(--ink-600)}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.5rem}
@media(max-width:35.99rem){.ctas .btn{width:100%}}
.also{margin-top:1.5rem;color:var(--ink-600)}
/* 6 · the festive table */
.festive{background:var(--butter-100)}
.festive-tray{border:1px solid var(--gold-400);border-radius:2rem;padding:clamp(2rem,5vw,3.5rem)}
/* 7 · kind words */
.kind{background:var(--butter-300)}
.featured{margin-top:2rem}
.featured::before{content:"";display:block;width:3rem;height:2px;background:var(--gold-400);margin-bottom:1.2rem}
.quote{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.3;color:var(--berry-600);max-width:22ch}
.kind cite{display:block;margin-top:.8rem;font-style:normal;font-weight:600;font-size:.95rem;color:var(--ink-600)}
.notes{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:1rem 1.5rem;margin:1.5rem -1.5rem 0}
.notes::-webkit-scrollbar{display:none}
.note-card{scroll-snap-align:start;background:var(--butter-50);border-radius:1.5rem;padding:1.5rem;box-shadow:var(--bevel),var(--shadow-lift)}
.note-card:nth-child(odd){rotate:calc(var(--tilt) * -1)}.note-card:nth-child(even){rotate:var(--tilt)}
@media(min-width:56rem){
  .kind .split{display:grid;grid-template-columns:5fr 7fr;gap:6rem;align-items:center}
  .notes{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:1rem 0;margin:0}
}
/* 8 · the lid closes */
footer.closing{padding-block:var(--section-y) clamp(1.5rem,3vw,2.5rem)}/* breathing space below the footer (D78) */
.closing .tray{background:linear-gradient(var(--plum-800),var(--plum-900));padding-block:clamp(3rem,8vw,5rem) 2rem}
.closing-main{display:grid;gap:2.5rem;align-items:center}
.closing .picture{aspect-ratio:1;width:100%;max-width:24rem;background-image:url(/img/05-pocket-of-love-dark.jpg)}
.closing .big{font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.15;color:var(--gold-200);max-width:16ch}
.closing .ctas{margin-top:2rem}
.closing .btn-primary{background:var(--butter-200);color:var(--plum-800)}
.closing .btn-secondary{color:var(--butter-200);box-shadow:inset 0 0 0 1.5px oklch(94% .03 80 / .35)}
@media(hover:hover) and (pointer:fine){.closing .btn-primary:hover{background:var(--butter-50)}.closing .btn-secondary:hover{background:var(--plum-700)}}
@media(max-width:55.99rem){.closing .tray{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}}/* clears the phone's fixed bottom bar */
.closing-base{display:grid;gap:1.25rem;margin-top:clamp(3rem,7vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--butter-18);font-size:.9rem;font-weight:600;color:var(--butter-60)}
.closing .brand{display:flex;align-items:center;gap:1rem;line-height:1.5}
.closing .mark{width:3rem;height:3rem;flex:none;border-radius:50%;box-shadow:0 0 0 1px var(--butter-18)}
.base-links{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem}
.base-links a{color:var(--butter-200);min-height:48px;display:inline-flex;align-items:center;text-underline-offset:.2em}
@media(min-width:56rem){
  .closing-main{grid-template-columns:5fr 7fr;gap:5rem}
  .closing .picture{justify-self:start}
  .closing-base{grid-template-columns:auto auto;justify-content:space-between;align-items:center}
}
/* the Privacy page */
.privacy p{max-width:56ch;margin-top:1rem;color:var(--ink-600)}
.privacy h2+p{margin-top:1.5rem}
/* the card's sizes and prices, each with its add button (D75) */
.label{flex-direction:column;align-items:stretch;gap:0}
.label p{margin-bottom:.9rem}
.opts{list-style:none;border-top:1px solid var(--ink-200)}
.opts li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--ink-200)}
.opts li:last-child{border-bottom:0;padding-bottom:0}
.opt-size{font-size:.95rem;color:var(--ink-600);font-weight:600;min-width:0}
.opt-price{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--plum-800);font-variant-numeric:tabular-nums}
/* a card is one object (D76): photo and words share one cream card and one shadow; the whole card opens the panel */
.card{background:var(--butter-50);border-radius:1.75rem;padding:.6rem;box-shadow:var(--bevel),var(--shadow-float);cursor:pointer;display:flex;flex-direction:column}
.card .frame{padding:0;background:var(--butter-300);box-shadow:none;border-radius:1.25rem;rotate:none}
.card .frame .pic{border-radius:1.25rem}
.card .label,.table-grid .card .label{flex:1;margin-top:0;background:none;box-shadow:none;border-radius:0;padding:1rem .8rem .4rem}