@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#f3ece6; --surface:#eadfd6; --surface-2:#e2d4c9;
  --ink:#222221; --soft:#5d534d; --taken:#8a7f79;
  --acc:#5a2744; --acc-2:#6b3253; --on-acc:#f6edf0; --on-acc-soft:#e3c9d5; --error:#a3262c; --error-on-acc:#ffc9c4;
  --gutter:clamp(20px,3vw,48px);
  --s-display:clamp(60px,8.4vw,136px);
  --s-h2:clamp(38px,4.6vw,72px);
  --s-h3:22px; --s-body:17px; --s-small:15px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --spring:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--s-body)/1.55 Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:4px}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--acc);color:var(--on-acc)}
.plum ::selection,.about ::selection,.book-side ::selection{background:var(--on-acc);color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
.about :focus-visible,.plum :focus-visible,.book-side :focus-visible,.tray :focus-visible{outline-color:var(--on-acc)}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1}
h2{font-size:var(--s-h2);text-wrap:balance}
h3{font-size:var(--s-h3);letter-spacing:-.01em;line-height:1.2}
p{max-width:62ch}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--acc);color:var(--on-acc);border:0;border-radius:999px;padding:16px 28px;font-weight:500;font-size:var(--s-body);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .12s ease-out,background .2s}
.btn:hover{background:var(--acc-2)}
.btn:active{transform:scale(.97)}
.btn .dot{width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .35s var(--spring)}
.btn:hover .dot{transform:scale(1.4)}
.btn.light{background:var(--on-acc);color:var(--acc)}
.btn.light:hover{background:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.mark{font-weight:600;font-size:28px;letter-spacing:.02em;text-decoration:none;line-height:1}
.mark small{display:block;font-weight:300;font-size:13px;letter-spacing:.32em;margin-top:6px;white-space:nowrap}

/* nav after the hero */
.topbar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:var(--bg);transform:translateY(-101%);transition:transform .4s var(--ease);visibility:hidden}
.topbar.show{transform:none;visibility:visible}
.topbar .mark{font-size:24px}
.topbar nav{display:flex;gap:28px;font-size:var(--s-small)}
.topbar nav a{text-decoration:none}
.topbar nav a:hover{text-decoration:underline}

/* hero: the full stop grows until it is the whole page */
.stage{height:150svh;background:var(--bg)}
.hero{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;display:grid;align-items:center}
.nav{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gutter)}
.nav ul{display:flex;gap:32px;list-style:none;font-size:var(--s-small);margin-left:clamp(40px,7vw,120px);margin-right:auto}
.nav ul a{text-decoration:none}
.nav ul a:hover{text-decoration:underline}
.nav .btn{padding:12px 22px;font-size:var(--s-small)}
.disc{position:absolute;z-index:3;width:122vh;height:122vh;border-radius:50%;background:var(--acc);right:-34vh;top:-12vh;transform-origin:center;will-change:transform}
.photo{position:absolute;z-index:4;width:42vh;height:42vh;border-radius:50%;overflow:hidden;right:25vh;bottom:6vh;will-change:transform,opacity}
.photo img{width:100%;height:100%;object-fit:cover}
.copy{position:relative;z-index:2;padding:120px var(--gutter) 60px;max-width:min(54vw,860px)}
.copy h1{font-size:var(--s-display);letter-spacing:-.04em;line-height:.95}
.stop{color:var(--acc)}
.copy p{font-size:20px;margin:32px 0 40px;max-width:40ch}
.disc-text{position:absolute;z-index:4;right:calc(var(--gutter) + 2vw);top:22vh;color:var(--on-acc);width:min(320px,24vw);font-size:var(--s-small)}
.disc-text strong{display:block;font-size:var(--s-h3);font-weight:500;margin-bottom:8px}

/* over: the intro already rises while the disc grows, so the plum is never empty */
.about{position:relative;z-index:1;background:var(--acc);color:var(--on-acc);overflow:hidden}
.about-intro{min-height:100svh;display:grid;align-items:center;padding:96px var(--gutter)}
.about-intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.about-intro h2{font-size:clamp(46px,6.4vw,104px);letter-spacing:-.04em;line-height:.98}
.big-p{font-size:clamp(22px,2.1vw,30px);line-height:1.35;letter-spacing:-.01em}
.about-rest{background:var(--acc);display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:clamp(24px,4vw,64px) var(--gutter) 0;align-items:start}
.about-text{display:grid;gap:20px;align-content:start;padding-bottom:clamp(72px,9vw,140px)}
.about-text h3{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;line-height:1.05}
.about-photo{width:min(36vw,560px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:-8vw}
.about-photo img{width:100%;height:100%;object-fit:cover}
.weekrow{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,.7vw,10px);margin-top:16px}
.weekrow li{display:grid;justify-items:center;align-content:start;gap:10px;text-align:center}
.wd{width:100%;max-width:64px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-weight:500;background:var(--on-acc);color:var(--acc)}
.shut .wd{background:none;border:2px solid var(--acc-2);color:var(--on-acc-soft)}
.hrs{font-size:var(--s-small);line-height:1.3;font-variant-numeric:tabular-nums}

/* behandelingen */
.menu-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;padding:clamp(100px,12vw,180px) var(--gutter) clamp(56px,6vw,96px)}
.menu-head p{font-size:20px}
.cat{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:auto 1fr;gap:32px clamp(40px,6vw,96px);padding:clamp(72px,8vw,120px) var(--gutter);align-items:start}
.cat.tint{background:var(--surface)}
.cat.plum{background:var(--acc);color:var(--on-acc)}
.cat-head h3{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.03em;line-height:1}
.cat-head p{margin-top:16px;max-width:38ch}
.plate{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;width:min(100%,clamp(300px,34vw,520px));aspect-ratio:1;border-radius:50%;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
.items{grid-column:1;list-style:none}
.cat.left{grid-template-columns:5fr 7fr}
.cat.left .cat-head,.cat.left .items{grid-column:2}
.cat.left .plate{grid-column:1;justify-self:start}
.cat.no-image{grid-template-columns:1fr}
.cat.no-image .items{columns:2;column-gap:clamp(40px,6vw,96px)}
.cat.no-image .items li{break-inside:avoid}

.item{display:grid;grid-template-columns:30px 1fr 4.4em 6.4em;align-items:center;gap:16px;width:100%;min-height:60px;padding:10px 0;background:none;border:0;text-align:left;cursor:pointer;touch-action:manipulation;font-size:18px}
.item .pick{width:26px;height:26px;border-radius:50%;border:2px solid var(--acc);transition:transform .45s var(--spring),background .15s}
.plum .item .pick{border-color:var(--on-acc)}
.item:hover .pick{transform:scale(1.15)}
.item:active .pick{transform:scale(.88);transition-duration:.1s}
.item[aria-pressed=true] .pick{background:var(--acc)}
.plum .item[aria-pressed=true] .pick{background:var(--on-acc)}
.item[aria-pressed=true] .name{font-weight:500}
.item .name small{display:block;font-size:var(--s-small);color:var(--soft)}
.plum .item .name small{color:var(--on-acc-soft)}
.item .dur{font-size:var(--s-small);color:var(--soft);white-space:nowrap;text-align:right}
.plum .item .dur{color:var(--on-acc-soft)}
.item .price{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* band */
.band{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:clamp(80px,9vw,140px);overflow:hidden}
.band i{aspect-ratio:1;border-radius:50%;background:var(--acc);transform:scale(var(--s,.12))}

/* boeken */
.book{padding:clamp(96px,11vw,180px) var(--gutter) 0}
.book-head{display:flex;justify-content:space-between;align-items:end;gap:48px;flex-wrap:wrap}
.book-head p{max-width:46ch}
.book-grid{display:grid;grid-template-columns:7fr 4fr;gap:20px;margin-top:64px}
.book-main{background:var(--surface);padding:40px;min-width:0}
.step+.step{margin-top:44px}
.step h3{margin-bottom:20px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.step h3 small{font-size:var(--s-small);color:var(--soft);font-weight:400;letter-spacing:0}
.hint{color:var(--soft)}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.day{aspect-ratio:1;border-radius:50%;border:0;background:var(--bg);display:grid;place-content:center;text-align:center;cursor:pointer;line-height:1.15;touch-action:manipulation;transition:transform .35s var(--spring),background .15s}
.day b{font-size:26px;font-weight:500;display:block;letter-spacing:-.02em}
.day span{font-size:13px;color:var(--soft)}
.day:hover:not(:disabled){transform:scale(1.05)}
.day:active:not(:disabled){transform:scale(.95);transition-duration:.1s}
.day[aria-pressed=true]{background:var(--acc);color:var(--on-acc)}
.day[aria-pressed=true] span{color:var(--on-acc-soft)}
.day:disabled{background:transparent;cursor:not-allowed;color:var(--taken)}
.day:disabled span{color:var(--taken)}
.more{margin-top:16px;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:14px 8px;align-items:start}
.slots.pending{opacity:.45}
.slots .hint{grid-column:1 / -1}
.slot{border:0;background:transparent;display:grid;justify-items:center;gap:8px;cursor:pointer;font-size:var(--s-small);font-variant-numeric:tabular-nums;padding:4px 0;touch-action:manipulation}
.slot i{width:32px;height:32px;border-radius:50%;background:var(--acc);transition:transform .4s var(--spring),box-shadow .15s}
.slot:hover i{transform:scale(1.18)}
.slot:active i{transform:scale(.9);transition-duration:.1s}
.slot[aria-pressed=true]{font-weight:600}
.slot[aria-pressed=true] i{background:var(--ink);transform:scale(1.1)}

.book-side{position:relative;background:var(--acc);color:var(--on-acc);padding:40px;display:flex;flex-direction:column;gap:24px;overflow:hidden;min-width:0}
.sum{display:grid;gap:14px}
.sum dt{font-size:var(--s-small);color:var(--on-acc-soft)}
.sum dd{font-size:18px;font-weight:500;line-height:1.3}
.sum dd span{display:block}
.book-side form{display:grid;gap:12px;margin-top:auto}
.field{display:grid;gap:4px}
.field label{font-size:var(--s-small)}
.field small{font-size:inherit;color:var(--on-acc-soft)}
.field input,.field textarea{width:100%;background:var(--acc-2);border:0;border-radius:14px;padding:13px 16px;color:var(--on-acc);caret-color:var(--on-acc);resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--on-acc);outline-offset:0}
.field [aria-invalid=true]{outline:2px solid var(--error-on-acc)}
.err,.form-err{font-size:var(--s-small);color:var(--error-on-acc)}
.err:empty,.form-err:empty{display:none}
.hp{position:absolute;left:-9999px}
.book-side .btn{justify-content:center;margin-top:6px}
.fine{font-size:var(--s-small);color:var(--on-acc-soft)}
.done{position:absolute;inset:0;background:var(--on-acc);color:var(--acc);padding:40px;display:flex;flex-direction:column;justify-content:center;gap:12px;outline:0}
.done[hidden]{display:none}
.done h3{font-size:clamp(38px,3.6vw,52px);letter-spacing:-.03em;line-height:1.02;margin-bottom:8px}
.noscript{margin-top:24px}

/* contact */
.contact{padding:clamp(100px,12vw,180px) var(--gutter) 0;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.contact .lines{font-size:clamp(30px,3.6vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1.12;margin-top:40px}
.contact .lines a{text-decoration:none;transition:color .15s}
.contact .lines a:hover{color:var(--acc)}
.contact .mail{margin:32px 0 16px}
.contact figure{aspect-ratio:1;border-radius:50%;overflow:hidden}
.contact figure img{width:100%;height:100%;object-fit:cover}

/* footer */
footer{margin-top:clamp(100px,12vw,180px);background:var(--surface);padding:56px var(--gutter) 32px}
.big{font-size:clamp(120px,27vw,420px);font-weight:600;letter-spacing:-.02em;line-height:.8;display:flex;align-items:flex-end;text-decoration:none}
.big i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--acc);margin-left:.04em;margin-bottom:.01em;transition:transform .5s var(--spring)}
.big:hover i{transform:scale(1.25)}
.foot-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:24px;margin-top:56px;font-size:var(--s-small)}
.foot-row ul{list-style:none;display:grid;gap:6px;align-content:start}
.credits{color:var(--soft)}

/* tray */
.tray{position:fixed;z-index:15;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(620px,calc(100vw - 24px));display:flex;align-items:center;gap:14px;background:var(--acc);color:var(--on-acc);border-radius:999px;padding:10px 10px 10px 20px;box-shadow:0 12px 32px rgba(34,34,33,.28); /* taste-skill-ignore: floating bar */transform:translate(-50%,0);transition:transform .45s var(--spring),opacity .2s}
.tray[hidden]{display:flex;transform:translate(-50%,140%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .3s var(--ease),opacity .2s,visibility 0s .3s}
.tray-dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--on-acc)}
.tray-dot.bump{animation:bump .45s var(--spring)}
@keyframes bump{from{transform:scale(1.7)}to{transform:none}}
.tray-sum{flex:1;min-width:0;line-height:1.2;font-size:var(--s-small)}
.tray-sum b{display:block;font-weight:500;white-space:nowrap}
.tray-sum span{color:var(--on-acc-soft);white-space:nowrap}
.tray .btn{flex:none;padding:12px 20px;font-size:var(--s-small)}
.fly{position:fixed;z-index:16;width:26px;height:26px;border-radius:50%;background:var(--acc);pointer-events:none}

/* reveal: only hides when the script runs, so content never depends on it */
@media (prefers-reduced-motion:no-preference){
  .js .about{margin-top:-100svh;background:none}
  .js .about-intro-inner{opacity:0}
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .js .rv.in{opacity:1;transform:none}
  .plate img,.about-photo img,.contact figure img{transform:scale(var(--z,1.08));will-change:transform}
  .disc{animation:grow 1.2s var(--ease) both}
  @keyframes grow{from{scale:.82;opacity:0}to{scale:1;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{height:auto}
  .hero{position:relative}
  .band i{transform:scale(.6)}
  .btn,.item .pick,.day,.slot i,.tray,.topbar{transition-duration:.01ms}
}

/* phone */
@media (max-width:820px){
  html{scroll-padding-top:68px}
  .nav ul,.topbar nav a:first-child{display:none}
  .hero{align-items:start;min-height:680px}
  .copy{max-width:none;padding:112px var(--gutter) 0}
  .copy h1{font-size:15.5vw}
  .copy p{font-size:18px;margin:22px 0 26px}
  .nav .btn{background:var(--acc);color:var(--on-acc)}
  .disc{width:150vw;height:150vw;right:auto;left:14vw;top:auto;bottom:-82vw}
  .photo{width:46vw;height:46vw;right:auto;left:var(--gutter);bottom:5vw;box-shadow:none}
  .disc-text{top:auto;bottom:7vw;right:var(--gutter);width:42vw}
  .disc-text strong{font-size:18px}
  .about-intro-inner,.about-rest{grid-template-columns:1fr;gap:24px}
  .about-text{order:-1;padding-bottom:0}
  .about-photo{width:82vw;margin:32px auto -24vw}
  .wd{font-size:15px}
  .hrs{font-size:13px}
  .menu-head{grid-template-columns:1fr;gap:20px}
  .cat,.cat.left{grid-template-columns:1fr;grid-template-rows:none;gap:20px}
  .cat .cat-head,.cat.left .cat-head{grid-column:1}
  .cat .plate,.cat.left .plate{grid-column:1;grid-row:2;width:56vw;justify-self:end;margin-top:-8px}
  .cat .items,.cat.left .items{grid-column:1;grid-row:3}
  .cat.no-image .items{columns:1}
  .item{grid-template-columns:30px 1fr auto;font-size:17px;row-gap:0}
  .item .dur{grid-column:2;grid-row:2;text-align:left}
  .item .price{grid-column:3;grid-row:1 / span 2}
  .book-grid,.contact{grid-template-columns:1fr}
  .book-main,.book-side{padding:24px}
  .done{padding:24px}
  .days{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  .days::-webkit-scrollbar{display:none}
  .day{flex:none;width:84px;scroll-snap-align:center}
  .more{display:none}
  .contact figure{width:70vw;justify-self:end}
  .foot-row{grid-template-columns:1fr}
  footer{padding-bottom:96px}
  .tray-dot{display:none}
  .tray{padding-left:20px}
}