@font-face{font-family:"Bodoni Moda";src:url("../assets/fonts/bodoni.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("../assets/fonts/bodoni-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url("../assets/fonts/outfit.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --brown:#845333;
  --panel:#744a2d;
  --deep:#5e3a22;
  --night:#3b2314;
  --cream:#e7e5d8;
  --paper:#f3efe3;
  --ink-on-brown:#f1e8d6;
  --desc-on-brown:#ecdcc4;
  --carpet-red:#b8323c;
  --red:#c81f2c;
  --tan:#d9c7ae;
  --carrot:#e98a2a;
  --bar:60px;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Outfit","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --medallion:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23845333' stroke-width='1.6'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='5' fill='%23845333'/%3E%3Ccircle cx='52' cy='32' r='7'/%3E%3Ccircle cx='46.1' cy='46.1' r='7'/%3E%3Ccircle cx='32' cy='52' r='7'/%3E%3Ccircle cx='17.9' cy='46.1' r='7'/%3E%3Ccircle cx='12' cy='32' r='7'/%3E%3Ccircle cx='17.9' cy='17.9' r='7'/%3E%3Ccircle cx='32' cy='12' r='7'/%3E%3Ccircle cx='46.1' cy='17.9' r='7'/%3E%3Cpath d='M32 27v-8M32 37v8M27 32h-8M37 32h8'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--deep);font-family:var(--sans);font-size:1.125rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--carpet-red);color:var(--paper)}
:focus-visible{outline:3px solid var(--carrot);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--brown) var(--night)}
::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--night)}::-webkit-scrollbar-thumb{background:var(--brown);border:3px solid var(--night);border-radius:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 .95rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.3rem;border-radius:999px;border:2px solid transparent;transition:transform .35s var(--ease),background-color .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#a5151f}
.btn-ghost{color:var(--deep);border-color:transparent}
.btn-ghost:hover{border-color:var(--deep)}
.btn-line{color:var(--deep);border-color:var(--deep)}
.btn-line:hover{background:var(--deep);color:var(--paper)}
.btn-big{font-size:1.02rem;padding:1.05rem 1.7rem}

/* top bar, like the tabs of a leaflet */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:1.2rem;padding:0 clamp(1rem,2.6vw,2.2rem);background:var(--cream);border-bottom:2px dotted var(--brown)}
.bar-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:700 .92rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.bar-brand img{width:auto;height:34px;mix-blend-mode:multiply}
.bar-links{display:flex;gap:clamp(.9rem,2vw,1.9rem);margin:0 auto}
.bar-links a{font:500 .95rem/1 var(--sans);letter-spacing:.06em;text-decoration:none;color:var(--deep);padding:.5rem 0;background:linear-gradient(var(--carpet-red),var(--carpet-red)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.bar-links a:hover,.bar-links a.on{background-size:100% 2px}
.bar-cta{display:flex;gap:.4rem;align-items:center}
.bar-cta .btn{padding:.7rem 1.1rem}

/* SPREAD: cover + first inside panel */
.spread{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);min-height:max(680px,100svh);padding-top:var(--bar);background:var(--panel);perspective:2200px;perspective-origin:0 50%}
.spread-photo{position:relative;display:flex;padding:clamp(1.4rem,3vw,2.8rem);background:var(--panel)}
.bracket,.frame{position:relative;--c:var(--paper);--len:0px}
.bracket,.frame.in,html:not(.js) .frame{--len:34px}
.bracket{flex:1;display:flex;padding:clamp(1rem,1.6vw,1.6rem)}
.bracket::before,.frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(var(--c),var(--c)) 0 0/var(--len) 3px no-repeat,
   linear-gradient(var(--c),var(--c)) 0 0/3px var(--len) no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 0/var(--len) 3px no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 0/3px var(--len) no-repeat,
   linear-gradient(var(--c),var(--c)) 0 100%/var(--len) 3px no-repeat,
   linear-gradient(var(--c),var(--c)) 0 100%/3px var(--len) no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 100%/var(--len) 3px no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 100%/3px var(--len) no-repeat;
  transition:all 1.1s var(--ease)}
.bracket::before{--len:34px}
.hero-shot{position:relative;flex:1;overflow:hidden;min-height:420px;background:var(--deep);animation:photo-in 1.8s var(--ease) both}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-shot figcaption{position:absolute;left:0;bottom:0;right:0;padding:2.4rem 1.6rem 1.3rem;background:linear-gradient(to top,rgba(59,35,20,.86),rgba(59,35,20,0));color:var(--paper);font-size:1.05rem;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero-shot figcaption b{display:block;font:800 clamp(1.5rem,2.2vw,2rem)/1.1 var(--serif);margin-bottom:.15rem}
.hero-shot figcaption em{font:italic 700 1.35rem var(--serif);color:#ffd9a3;margin-left:.3rem}

.cover{position:relative;z-index:2;background:var(--cream);color:var(--brown);display:grid;grid-template-columns:clamp(54px,5vw,76px) 1fr;grid-template-rows:1fr auto auto;transform-origin:0 50%;animation:unfold 1.7s var(--ease) .1s both;box-shadow:-18px 0 40px -20px rgba(0,0,0,.55)}
.medallions{background:var(--tan) var(--medallion) 0 0/clamp(54px,5vw,76px) auto repeat-y;animation:medal-drift 60s linear infinite;grid-row:1/-1}
.cover-body{container-type:inline-size;padding:clamp(1.6rem,3vw,2.8rem) clamp(1.4rem,3vw,3rem) 1rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.35rem;min-width:0}
.chef{width:clamp(150px,15vw,220px);height:auto;mix-blend-mode:multiply;margin-bottom:.3rem}
.wordmark{font:700 clamp(.95rem,1.15vw,1.15rem)/1.15 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--brown)}
.flag{margin-top:.9rem;font:800 clamp(1.1rem,1.45vw,1.45rem)/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--red)}
.small-red{font:500 .95rem/1.2 var(--sans);color:var(--red)}
.lockup{margin-top:.9rem;display:grid;font-family:var(--serif);font-weight:800;color:var(--brown);line-height:.86;letter-spacing:-.02em;font-optical-sizing:auto}
.lockup span{display:block}
.l1{font-size:min(9cqw,2.6rem);font-weight:500;font-style:italic;letter-spacing:0;margin-bottom:-.25rem}
.l2{font-size:min(31cqw,8.4rem);line-height:.82;margin-top:.1em}
.l3{font-size:min(7.5cqw,2.3rem);font-weight:500;font-style:italic;letter-spacing:0;justify-self:end;margin:.15rem .4rem -.15rem 0}
.l4{font-size:min(15.2cqw,5.9rem);text-transform:uppercase;letter-spacing:-.03em}
.cover-actions,.back-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.cover-carpet{grid-column:2;height:clamp(60px,7.5vh,92px);background:url("../assets/img/carpet-strip.jpg") 0 50%/auto 100% repeat-x;border-top:3px solid var(--brown);border-bottom:3px solid var(--brown)}
.cover-address{grid-column:2;padding:.8rem clamp(1.4rem,3vw,3rem) 1.1rem;font:600 1rem/1.2 var(--sans);letter-spacing:.06em;color:var(--red)}
.cover-address::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.55em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--red)}

@keyframes unfold{from{transform:rotateY(-104deg);filter:brightness(.55)}60%{filter:brightness(.95)}to{transform:rotateY(0);filter:none}}
@keyframes photo-in{from{clip-path:inset(0 0 0 100%);transform:scale(1.05)}to{clip-path:inset(0);transform:none}}
@keyframes medal-drift{to{background-position:0 -640px}}

/* inside panels */
.panel{background:var(--panel);color:var(--ink-on-brown);padding:clamp(1.6rem,4vw,3.4rem) clamp(1rem,3.2vw,3rem)}
.panel:nth-of-type(odd){background:#6d4529}
.frame{padding:clamp(1.6rem,4vw,4rem) clamp(1.2rem,3.6vw,3.8rem);max-width:1480px;margin:0 auto}
.frame::before{--len:0px}
.frame.in::before,html:not(.js) .frame::before{--len:38px}
.panel-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(1.6rem,4.5vw,5rem);align-items:start}
.panel.flip .panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.panel.flip .panel-copy{order:2}
.panel h2{font:800 clamp(2.6rem,5.4vw,5.2rem)/.98 var(--serif);letter-spacing:-.015em;color:var(--paper);text-wrap:balance}
.lead{margin-top:1rem;max-width:34rem;font-size:1.22rem;line-height:1.45;color:var(--desc-on-brown)}
.menu{margin-top:2.2rem;counter-reset:none}
.menu li{counter-increment:dish;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;column-gap:.9rem;align-items:baseline;padding:1rem 0 1.05rem;border-bottom:2px dotted rgba(241,232,214,.45)}
.menu li::before{content:counter(dish);font:italic 500 1.05rem var(--serif);color:#e7c79b;text-align:right}
.menu h3{font:600 clamp(1.22rem,1.5vw,1.45rem)/1.15 var(--sans);letter-spacing:.005em;color:var(--paper)}
.menu p{margin-top:.25rem;font-size:1.02rem;line-height:1.4;color:var(--desc-on-brown);max-width:36rem}
.price{font:700 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums;color:#ffdca8;white-space:nowrap}
.menu.two li{grid-template-columns:2.4rem minmax(0,1fr) 5.4rem 5.4rem}
.menu.two .price{text-align:right}
.sizes{display:grid;grid-template-columns:1fr 5.4rem 5.4rem;justify-items:end;padding-left:3.3rem;margin-top:1.6rem;margin-bottom:-1.3rem;font:italic 500 1.05rem var(--serif);color:#e7c79b}
.sizes span:first-child{grid-column:2}
.big-serif{display:block;font-size:1.28em;line-height:.9}

.shot{position:sticky;top:calc(var(--bar) + 1.5rem);margin:0;justify-self:stretch}
.shot img{width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 30px 50px -28px rgba(0,0,0,.7);outline:2px solid var(--paper);outline-offset:10px}
.shot figcaption{margin-top:1.4rem;font:italic 500 1.15rem var(--serif);color:var(--desc-on-brown);text-align:center}

/* carpet runner with a paper slip on it */
.runner{position:relative;z-index:3;height:clamp(150px,13vw,190px);display:grid;place-items:center;background:var(--night);border-block:3px solid var(--paper)}
.runner-carpet{position:absolute;inset:0;overflow:hidden;background:url("../assets/img/carpet-strip.jpg") 0 50%/auto 100% repeat-x;background-position-x:var(--drift,0px);filter:saturate(1.05)}
.runner-carpet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(59,35,20,.28),rgba(59,35,20,0) 20%,rgba(59,35,20,0) 80%,rgba(59,35,20,.28))}
.slip{position:relative;z-index:2;max-width:min(46rem,88vw);background:var(--paper);color:var(--deep);padding:clamp(1.3rem,2.4vw,2.2rem) clamp(1.6rem,3.6vw,3.4rem);text-align:center;box-shadow:0 22px 34px -14px rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.08);outline:2px solid var(--brown);outline-offset:-10px}
.slip p{font:italic 800 clamp(1.7rem,3.3vw,2.9rem)/1.06 var(--serif);text-wrap:balance;color:var(--brown)}
.slip footer{margin-top:.9rem;font:600 .82rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}

/* family packs, cream like the cover */
.packs{position:relative;background:var(--cream);color:var(--brown);display:grid;grid-template-columns:clamp(54px,5vw,76px) 1fr;border-top:3px solid var(--brown)}
.packs .medallions{grid-column:1}
.packs-inner{padding:clamp(2rem,5vw,4.6rem) clamp(1.2rem,5vw,5rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.6rem,4vw,4.4rem);align-items:start}
.packs-inner h2,.pack-list{grid-column:1}
.pack-photo{grid-column:2;grid-row:1/3;align-self:stretch;position:relative;padding:clamp(.8rem,1.2vw,1.2rem);--c:var(--brown);--len:34px}
.pack-photo::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--c),var(--c)) 0 0/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/3px 34px no-repeat}
.pack-photo img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:50% 50%}
.packs h2{font:800 clamp(2.4rem,5vw,4.8rem)/1 var(--serif);color:var(--brown)}
.pack-list{margin-top:2rem}
.pack-list li{display:grid;grid-template-columns:minmax(6.4rem,10.5rem) 1fr;gap:1.4rem;align-items:baseline;padding:1.3rem 0;border-bottom:2px dotted var(--brown)}
.pack-price{font:800 clamp(2.6rem,5.4vw,4.8rem)/.9 var(--serif);color:var(--red)}
.pack-list h3{font:700 clamp(1.3rem,1.8vw,1.7rem)/1.15 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--brown)}
.pack-list h3 em{font:italic 500 1.15rem var(--serif);text-transform:none;letter-spacing:0;margin-left:.5rem;color:var(--red)}
.pack-list p{margin-top:.3rem;font-size:1.08rem;max-width:44rem;color:var(--deep)}

.sweets-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4.5vw,5rem)}
.sweets .panel-copy h2{font-size:clamp(2.2rem,4.2vw,4rem)}
.sweets .menu{margin-top:1.2rem}

/* back cover */
.back{background:var(--cream);color:var(--brown);display:grid;grid-template-columns:clamp(54px,5vw,76px) 1fr;grid-template-rows:auto auto;border-top:3px solid var(--brown)}
.back .medallions{grid-row:1/-1}
.back-body{padding:clamp(2.2rem,5vw,4.4rem) clamp(1.2rem,5vw,5rem) 2.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.back-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,4.4rem);align-items:stretch;width:100%}
.back-main .col{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.back-photo{position:relative;padding:clamp(.8rem,1.2vw,1.2rem);--c:var(--brown);min-height:380px}
.back-photo::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--c),var(--c)) 0 0/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/3px 34px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/34px 3px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/3px 34px no-repeat}
.back-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.back .chef{width:clamp(180px,19vw,280px)}
.back-tag{font:800 clamp(2.2rem,5vw,4.6rem)/1 var(--serif);color:var(--brown);text-wrap:balance}
.back-facts{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:1.6rem clamp(2rem,5vw,5rem);margin-top:.8rem}
.back h2{font:800 .95rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.55rem}
.back p{font-size:1.3rem;line-height:1.3;color:var(--deep)}
.back .phone{white-space:nowrap;font:800 clamp(1.9rem,2.9vw,2.8rem)/1 var(--serif);text-decoration:none;color:var(--brown)}
.back small{font-size:.95rem}
.fine{font-size:.9rem!important;color:var(--deep);opacity:.8;max-width:44rem}
.back .cover-carpet{grid-column:2}

/* reveals: each block gets its own move, and stays visible without JS */
.js [data-reveal]{--d:0ms}
.js [data-reveal="up"]:not(.in){opacity:0;transform:translateY(28px)}
.js [data-reveal="up"]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal="rows"]>li{transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js [data-reveal="rows"]:not(.in)>li{opacity:0;transform:translateX(-46px)}
.js .flip [data-reveal="rows"]:not(.in)>li{transform:translateX(46px)}
.js [data-reveal="wipe"] img{transition:clip-path 1.3s var(--ease),transform 1.6s var(--ease)}
.js [data-reveal="wipe"]:not(.in) img{clip-path:inset(0 0 100% 0);transform:scale(1.12)}
.js [data-reveal="wipe"] figcaption{transition:opacity .8s .5s}
.js [data-reveal="wipe"]:not(.in) figcaption{opacity:0}
.js [data-reveal="settle"]{transition:opacity 1s var(--ease),transform 1.1s var(--ease),letter-spacing 1.2s var(--ease)}
.js [data-reveal="settle"]:not(.in){opacity:0;transform:translateY(46px) rotate(-1.4deg)}
.js .slip[data-reveal]:not(.in) p{letter-spacing:.04em}

@media (max-width:1080px){
  .packs-inner,.back-main{grid-template-columns:1fr}
  .pack-photo{grid-column:1;grid-row:auto;order:3}
  .back-photo{min-height:300px}
  .bar-links{display:none}
  .bar-cta{margin-left:auto}
  .spread{grid-template-columns:1fr;min-height:0}
  .cover{transform-origin:50% 0;animation-name:unfold-m}
  .spread-photo{min-height:56svh}
  .hero-shot{min-height:0}
  .panel-grid,.panel.flip .panel-grid,.sweets-grid{grid-template-columns:1fr}
  .panel.flip .panel-copy{order:0}
  .shot{position:static;order:-1}
}
@keyframes unfold-m{from{transform:rotateX(85deg);filter:brightness(.55)}to{transform:none;filter:none}}
@media (max-width:640px){
  body{font-size:1.06rem}
  .bar-brand span{display:none}
  .bar-cta .btn-ghost{display:none}
  .cover-body{container-type:inline-size;padding-top:1.4rem}
  .menu li{grid-template-columns:1.7rem minmax(0,1fr) auto;column-gap:.6rem}
  .menu.two li{grid-template-columns:1.7rem minmax(0,1fr) 3.8rem 3.8rem}
  .sizes{grid-template-columns:1fr 3.8rem 3.8rem;padding-left:2.3rem}
  .price{font-size:1.1rem}
  .pack-list li{grid-template-columns:1fr;gap:.2rem}
  .back-facts{grid-template-columns:1fr}
  .frame{padding:1.4rem 1rem}
  .panel{padding-inline:.7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]:not(.in),.js [data-reveal]:not(.in)>li,.js [data-reveal="wipe"]:not(.in) img{opacity:1!important;transform:none!important;clip-path:none!important}
  .bracket::before,.frame::before{--len:34px!important}
}