: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{position:relative;min-height:100dvh;overflow:hidden;background:var(--butter-200) var(--hearts);display:grid;align-items:end;padding-block:0}
.hero-inner{position:relative;z-index:1;width:var(--content);margin-inline:auto;padding:clamp(3rem,8vw,9rem) 0 clamp(3rem,7vh,5rem);display:grid;gap:1.25rem}
.hero-copy{display:contents}
.hero .wordmark{width:14rem;height:auto;margin-bottom:.5rem}/* phone: 224 px, above §2.4's 200 px minimum, so the frame reaches the first screen */
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:12em}
.hero h1 .w{display:block}
.hero-lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;max-width:30rem;color:var(--ink-600)}
.hero-stage{order:3;display:grid;width:100%}/* phone: the bake comes right after the H1 */
.hero-stage>*{grid-area:1/1}
.hero-stage .picture{background-image:url(img/A1-opened-box-table.jpg)}/* A1 is the mat the frame is set down on; its top band of trimmings shows above the frame */
.hero-frame{width:82%;justify-self:center;align-self:end;translate:0 4%}
.hero-lede{order:4}.hero .promise{order:5}
@media(min-width:56rem){
  .hero-inner{grid-template-columns:7fr 5fr;column-gap:5rem;align-items:end;padding-top:clamp(5rem,12vw,9rem)}
  .hero-copy{display:block}
  .hero-copy>*+*{margin-top:1.5rem}
  .hero .wordmark{width:22rem;margin-bottom:0}
  .hero-stage{order:0;height:min(84dvh,46rem);justify-self:end;aspect-ratio:3/4}
  .hero-frame{width:80%}
}
/* load choreography: only once JS is on, only with motion allowed (§11.8) */
@media (prefers-reduced-motion:no-preference){
.js .hero .wordmark{animation:wipe 1200ms var(--ease-move) both}
.js .hero-stage .picture{animation:fade 900ms var(--ease-out) 300ms both}
.js .hero h1 .w{animation:rise 900ms var(--ease-out) both;animation-delay:400ms}
.js .hero h1 .w+.w{animation-delay:520ms}
.js .hero-frame{animation:settle 1400ms var(--ease-out) 600ms both}
.js .hero-lede,.js .hero .promise{animation:fadeup 700ms var(--ease-out) 1200ms both}
@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)}}
@keyframes settle{from{opacity:0;translate:0 calc(4% + 48px);rotate:0deg}}
.sheet{transition:transform var(--dur-sheet-out) var(--ease-out)}
.sheet.in{transition-duration:var(--dur-sheet-in)}
}
/* 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}
.price{position:absolute;left:1.4rem;bottom:1.4rem;background:var(--butter-200);color:var(--plum-800);border-radius:999px;padding:.6rem 1.1rem;line-height:1;display:flex;gap:.6rem;align-items:baseline;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-tag)}
.price b{font-family:var(--font-display);font-weight:400;font-size:1.3rem}
.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 .frame{transition:translate .2s var(--ease-out),box-shadow .2s}
  .card:hover .frame{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>div{flex:1;min-width:0}
.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{position:relative}
.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{padding-inline:.5rem}
.card>a{display:block;color:inherit;text-decoration:none}
.card .frame{transition:transform var(--dur-press) var(--ease-out)}
.card:active .frame{transform:scale(.985)}
@media(min-width:56rem){
  .table-grid{grid-template-columns:repeat(12,1fr);row-gap:var(--card-gap);column-gap:2rem;align-items:start}
  .table-grid h3{grid-column:1/-1;margin-bottom:0}
  .card{padding-inline:0}
  .card:nth-of-type(odd){grid-column:1/span 6}
  .card:nth-of-type(even){grid-column:8/span 5;margin-top:6rem}
}
.indulgent .picture{aspect-ratio:16/7;background-image:url(/img/A2-indulgent-table-edge.jpg);background-position:right top;margin-bottom:3rem}
@media(min-width:56rem){.indulgent .picture{aspect-ratio:16/5}
  /* a table with one product: the heading sits beside the card, not above an empty half */
  .table .wrap:has(.table-grid>.card:only-of-type){display:grid;grid-template-columns:5fr 6fr;column-gap:5rem;align-items:center}
  .table .wrap:has(.table-grid>.card:only-of-type) .picture{grid-column:1/-1}
  .table .wrap:has(.table-grid>.card:only-of-type) .table-grid{display:block;margin-top:0;max-width:30rem;justify-self:end;width:100%}
  .table .wrap:has(.table-grid>.card:only-of-type) .table-grid h3{margin-bottom:1.5rem}
  .table .wrap:has(.table-grid>.card:only-of-type) .table-grid .card{margin-top:0}}
.wholesome{background:var(--butter-200)}
/* 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}
  .panel-photos{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:1rem 1rem 1rem 0}
  .panel-words{overflow-y:auto;padding-right:.5rem}
  .panel .sheet-foot{padding:1.25rem 2rem 2rem}
}