/* The Clumsy Baker: site styles. Tokens follow The Clumsy Baker Design System.
   The "clumsy" layer: small deliberate tilts, dropped letters and wobbles. Text blocks stay straight and readable. */

/* Fonts (self-hosted, latin subset) */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-latin-600-normal.woff2) format("woff2")}

:root{
  --cream:#FDFBF4; --oat:#E6D5C1; --oat-tint:#F3EBE0;
  --espresso:#372A1E; --cocoa:#675342; --cinnamon:#A57E5D;
  --gold:#D8A866; --mocha:#B99D81;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --header:72px;
  --k:1; /* tilt strength: 1 on desktop, smaller on phones */
}
@media (max-width:700px){:root{--header:64px; --k:.6}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--header) + 12px)}
@supports not (overflow:clip){html{overflow-x:hidden}}
body{margin:0; background:var(--cream); color:var(--espresso); font-family:var(--body); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.005em; text-wrap:balance}
p{margin:0 0 1em; text-wrap:pretty}
::selection{background:var(--gold); color:var(--espresso)}
.price,.num{font-variant-numeric:lining-nums tabular-nums}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-999px; top:8px; background:var(--espresso); color:var(--cream); padding:10px 16px; border-radius:999px; z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; box-shadow:0 0 0 2px var(--espresso); border-radius:4px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Type helpers */
.label{font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--cocoa)}
.label--gold{color:var(--gold)}
.display-xl{font-size:clamp(46px,7vw,100px)}
.display-l{font-size:clamp(38px,5.6vw,76px)}
.display-m{font-size:clamp(32px,4.2vw,52px)}
em.accent{font-style:italic; font-weight:500; color:var(--cinnamon)}
.on-dark em.accent{color:var(--gold)}
.lead{font-size:clamp(16px,1.6vw,18px); color:var(--cocoa); max-width:560px}

/* Hand-drawn scribble under an accent word, drawn in when its heading is revealed */
.scribble{position:relative; display:inline-block; white-space:nowrap}
.scribble svg{position:absolute; left:-2%; bottom:-.12em; width:104%; height:.32em; overflow:visible; pointer-events:none}
.scribble path{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s .35s var(--ease)}
.in .scribble path,.no-reveal .scribble path{stroke-dashoffset:0}

/* Clumsy letters: misaligned on purpose, they jiggle on hover */
.clumsy{display:inline-block; white-space:nowrap}
.clumsy .l{display:inline-block; transform:translateY(calc(var(--y,0) * 1em)) rotate(calc(var(--r,0) * 1deg)); transition:transform .5s var(--spring)}
.clumsy:hover .l{animation:jiggle .6s var(--ease) both; animation-delay:calc(var(--i) * 40ms)}
.clumsy .dot{display:inline-block; animation:drop 1.1s 1.7s var(--spring) both}

/* Buttons */
.btn{--bg:var(--espresso); --fg:var(--cream); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:14px 28px; border-radius:999px; background:var(--bg); color:var(--fg); font:600 14px/1 var(--body); letter-spacing:.06em; text-decoration:none; border:1.5px solid var(--bg); cursor:pointer; overflow:hidden; isolation:isolate; transition:color .35s var(--ease), transform .2s}
.btn::before{content:""; position:absolute; inset:0; background:var(--cinnamon); transform:translateY(101%); transition:transform .4s var(--ease); z-index:-1}
.btn:hover::before{transform:none}
.btn:hover{animation:wobble .55s var(--ease)}
.btn:active{transform:scale(.96)}
.btn--ghost{--bg:transparent; --fg:var(--espresso); border-color:var(--espresso)}
.btn--ghost::before{background:var(--espresso)}
.btn--ghost:hover{color:var(--cream)}
.btn--light{--bg:var(--cream); --fg:var(--espresso); border-color:var(--cream)}
.btn--light::before{background:var(--gold)}
.btn svg{width:18px; height:18px; fill:currentColor; flex:none}
.link{display:inline-block; font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold); padding:12px 0 2px; transition:border-color .25s}
.link:hover{border-color:var(--espresso)}
p .link,.a .link,.small .link,label .link{display:inline; padding:0 0 1px}

/* Scroll progress */
.progress{position:fixed; left:0; top:0; height:3px; width:100%; background:var(--gold); transform-origin:0 50%; transform:scaleX(0); z-index:60; pointer-events:none}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(253,251,244,.94); -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent; transition:border-color .3s}
.site-header.is-scrolled{border-bottom-color:var(--oat)}
.site-header .wrap{display:flex; align-items:center; gap:16px; height:var(--header)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; min-height:44px}
.brand img{width:48px; height:48px; animation:stumble 1.3s var(--ease) both; transition:transform .5s var(--spring)}
.brand:hover img{transform:rotate(-14deg) scale(1.06)}
.brand.is-dropping img{animation:logodrop 1.4s var(--ease)}
.brand span{font-family:var(--display); font-weight:600; font-size:22px; line-height:1; white-space:nowrap}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; position:relative; padding:12px 0}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav .btn{min-height:42px; padding:12px 22px; font-size:12px; color:var(--cream)}
.count{display:none; min-width:20px; height:20px; padding:0 6px; margin:-4px -8px -4px 0; border-radius:999px; background:var(--gold); color:var(--espresso); font:700 11px/20px var(--body); letter-spacing:0; text-align:center}
.count.show{display:inline-block}
.count.bump{animation:bump .5s var(--spring)}
.head-order{display:none; position:relative; min-height:42px; padding:10px 18px; font-size:12px}
.menu-toggle{display:none; background:none; border:0; width:44px; height:44px; padding:11px 10px; cursor:pointer; color:var(--espresso); margin-right:-10px}
.menu-toggle span{display:block; height:1.5px; background:currentColor; margin:6px 0; transition:transform .35s var(--ease), opacity .2s}
.menu-toggle span:nth-child(2){width:70%; margin-left:auto}
@media (max-width:1040px){
  .menu-toggle{display:block}
  .head-order{display:inline-flex}
  .nav{position:fixed; top:var(--header); left:0; right:0; height:calc(100vh - var(--header)); height:calc(100dvh - var(--header)); overflow-y:auto; background:var(--cream); flex-direction:column; align-items:flex-start; gap:2px; padding:28px var(--gutter) 40px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .3s}
  .nav.is-open{opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .4s var(--ease)}
  .nav a{font-family:var(--display); font-size:clamp(32px,8vw,44px); letter-spacing:0; text-transform:none; font-weight:600; padding:8px 0}
  .nav a:not(.btn)::after{bottom:8px}
  .nav.is-open a{animation:navin .5s var(--ease) both}
  .nav.is-open a:nth-child(2){animation-delay:.05s} .nav.is-open a:nth-child(3){animation-delay:.1s} .nav.is-open a:nth-child(4){animation-delay:.15s} .nav.is-open a:nth-child(5){animation-delay:.2s}
  .nav a:nth-child(2){margin-left:18px} .nav a:nth-child(4){margin-left:8px}
  .nav .btn{margin-top:22px; font-family:var(--body); font-size:14px; min-height:52px; padding:14px 30px}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  body.nav-open{overflow:hidden}
}
@media (max-width:420px){.brand span{font-size:19px}.brand img{width:40px;height:40px}.brand{gap:9px}.head-order{padding:10px 14px}}
@media (max-width:350px){.brand span{display:none}}

/* Sections */
.section{padding:clamp(72px,10vw,140px) 0}
.section--tint{background:var(--oat-tint)}
.section--dark{background:var(--espresso); color:var(--cream)}
.section--dark .label{color:var(--oat)}
.section--dark .lead,.section--dark p{color:var(--oat)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:clamp(36px,5vw,64px); flex-wrap:wrap}
.section-head h2{margin-top:14px}

/* Tilted photo frames */
.tilt{--t:-1.5;}
.tilt-a{--t:-1.8} .tilt-b{--t:1.4} .tilt-c{--t:-.7} .tilt-d{--t:2.2}
.ph,.split-media,.snap{rotate:calc(var(--t,0) * var(--k) * 1deg); transition:rotate .6s var(--spring), translate .6s var(--spring), box-shadow .6s}
a:hover .ph,a:hover .snap,.split-media:hover,.product:hover .ph{rotate:0deg; translate:0 -6px; box-shadow:0 18px 30px -18px rgba(55,42,30,.45)}
.tape{position:relative}
.tape::before,.tape::after{content:""; position:absolute; z-index:2; width:84px; height:26px; background:rgba(230,213,193,.82); box-shadow:0 1px 2px rgba(55,42,30,.12); pointer-events:none}
.tape::before{top:-11px; left:18px; rotate:-8deg}
.tape::after{bottom:-11px; right:22px; rotate:-6deg}
.tape--one::after{display:none}
.tape--top::before{left:50%; translate:-50% 0; rotate:3deg}

/* Hero */
.hero{padding:clamp(24px,5vw,64px) 0 clamp(64px,8vw,110px)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center}
.hero h1{margin:18px 0 0}
.hero h1 .word{display:inline-block; animation:tumble .9s var(--ease) both}
.hero .lead{margin-top:26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:36px; padding-top:22px; border-top:1px solid var(--oat); font-size:13px; color:var(--cocoa)}
.hero-facts b{color:var(--espresso); font-weight:600}
.hero-media{position:relative; padding:4% 4% 6% 8%}
.hero-media .back{position:absolute; inset:10% 18% 2% 0; rotate:calc(-6deg * var(--k)); overflow:hidden; background:var(--oat); animation:fanback 1.4s .3s var(--ease) both}
.hero-media .back img{width:100%; height:100%; object-fit:cover}
.hero-media .frame{position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--oat); rotate:calc(2deg * var(--k)); box-shadow:0 24px 50px -28px rgba(55,42,30,.55); animation:fanfront 1.2s .15s var(--ease) both}
.hero-media .frame img{width:100%; height:100%; object-fit:cover; animation:slowzoom 22s ease-in-out infinite alternate}
.hero-badge{position:absolute; left:-2%; bottom:-2%; width:clamp(96px,11vw,140px); aspect-ratio:1; animation:roll 1.4s .7s var(--ease) both; z-index:2; cursor:grab}
.hero-badge img{width:100%; height:100%; filter:drop-shadow(0 8px 14px rgba(55,42,30,.25)); transition:transform .6s var(--spring)}
.hero-badge:hover img{transform:rotate(200deg)}
.crumb{position:absolute; border-radius:46% 54% 40% 60%; background:var(--cinnamon); opacity:.7; pointer-events:none}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:24px}
  .hero-media{order:-1; padding:6% 7% 9% 9%; max-width:560px; width:100%; margin:0 auto}
  .hero-media .frame{aspect-ratio:1}
  .hero-badge{left:50%; bottom:-6%; translate:-50% 0; width:96px}
  .hero h1{margin-top:22px}
  .hero .wrap > div:first-child{padding-top:44px}
}

/* Marquee: two crossed, slightly crooked bands */
.marquee{position:relative; height:clamp(118px,13vw,170px); overflow:hidden; margin:clamp(-10px,-1vw,0px) 0}
.band{position:absolute; left:-5%; width:110%; padding:14px 0; overflow:hidden}
.band--a{top:50%; translate:0 -62%; rotate:-2.2deg; background:var(--espresso); color:var(--cream); z-index:2}
.band--b{top:50%; translate:0 -30%; rotate:1.6deg; background:var(--oat); color:var(--espresso)}
.marquee-track{display:flex; width:max-content; animation:marquee 44s linear infinite}
.band--b .marquee-track{animation-direction:reverse; animation-duration:56s}
.marquee:hover .marquee-track{animation-play-state:paused}
@media (max-width:700px){.band--a{translate:0 -78%}.band--b{translate:0 -4%; rotate:2.4deg}}
.band span{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(22px,2.8vw,32px); line-height:1.2; padding:0 22px; white-space:nowrap}
.band span::after{content:"✦"; font-style:normal; font-size:.55em; vertical-align:middle; color:var(--gold); padding-left:44px}
.band--b span::after{color:var(--cinnamon)}

/* Category tiles (home) */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.tile{text-decoration:none; display:block}
.tile:nth-child(2){margin-top:clamp(0px,4vw,48px)}
.tile .ph{overflow:hidden; aspect-ratio:4/5; background:var(--oat)}
.tile .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.tile:hover .ph img{transform:scale(1.06)}
.tile h3{font-size:clamp(30px,3vw,38px); margin-top:22px; display:flex; align-items:center; justify-content:space-between}
.tile h3 .arrow{font-family:var(--body); font-size:20px; transition:transform .4s var(--spring)}
.tile:hover h3 .arrow{transform:translateX(8px) rotate(-12deg)}
.tile p{color:var(--cocoa); font-size:14.5px; margin:6px 0 0}
.tile .from{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--cocoa); margin-top:10px}
.tile .from b{font-family:var(--display); font-size:22px; font-weight:600; color:var(--espresso); letter-spacing:0}
@media (max-width:800px){.tiles{grid-template-columns:1fr; gap:44px}.tile .ph{aspect-ratio:4/3}.tile:nth-child(2){margin-top:0}}

/* Steps: numbers are a little crooked and do not quite line up */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px)}
.step{border-top:1px solid var(--oat); padding-top:26px}
.step:nth-child(2){margin-top:clamp(0px,3vw,36px)} .step:nth-child(3){margin-top:clamp(0px,1vw,12px)}
.step .n{display:inline-block; font-family:var(--display); font-size:72px; line-height:1; color:var(--cinnamon); font-variant-numeric:lining-nums; rotate:-8deg; transition:rotate .6s var(--spring)}
.step:nth-child(2) .n{rotate:6deg; translate:0 8px} .step:nth-child(3) .n{rotate:-3deg}
.step:hover .n{rotate:0deg; translate:0 0}
.step h3{font-size:30px; margin:14px 0 10px}
.step p{color:var(--cocoa); font-size:15px; margin:0}
@media (max-width:800px){.steps{grid-template-columns:1fr; gap:8px}.step{display:grid; grid-template-columns:64px 1fr; column-gap:14px; padding:22px 0}.step .n{font-size:58px; grid-row:span 2}.step h3{margin:4px 0 6px; font-size:27px}.step:nth-child(n){margin-top:0}}

/* Split feature */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center}
.split--rev .split-media{order:2}
.split-media{background:var(--oat)}
.split-media .clip{overflow:hidden; width:100%; height:100%}
.split-media img{width:100%; height:100%; object-fit:cover}
.split .lead{margin-top:20px}
.split .btn{margin-top:30px}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--rev .split-media{order:0}.split-media{width:calc(100% - 16px); margin:0 auto}}

/* Bun box */
.bunlist{list-style:none; margin:0; padding:0; border-top:1px solid rgba(216,168,102,.5)}
.bunlist li{display:flex; align-items:baseline; gap:22px; padding:clamp(18px,2.4vw,28px) 0; border-bottom:1px solid rgba(216,168,102,.5); font-family:var(--display); font-weight:600; font-size:clamp(26px,3vw,40px); line-height:1.1; color:var(--cream); transition:translate .5s var(--spring)}
.bunlist li:nth-child(2){padding-left:clamp(10px,2vw,28px)}
.bunlist li:hover{translate:10px 0}
.bunlist li span{font-style:italic; font-weight:500; color:var(--gold); min-width:1.6em; font-variant-numeric:lining-nums; display:inline-block; rotate:-8deg}
@media (max-width:900px){.split > .bunlist{order:2}}
.price-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:26px}
.chip{display:inline-flex; align-items:baseline; gap:10px; padding:12px 22px; border:1px solid var(--gold); border-radius:999px; rotate:-2deg}
.chip .price{font-family:var(--display); font-weight:600; font-size:30px; line-height:1}
.chip small{font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oat)}
.stamp{display:inline-grid; place-items:center; width:92px; height:92px; border:1.5px dashed var(--gold); border-radius:50%; color:var(--gold); font:600 12px/1.25 var(--body); letter-spacing:.18em; text-transform:uppercase; text-align:center; rotate:12deg; transition:rotate .6s var(--spring)}
.stamp:hover{rotate:-8deg}
.on-dark .btn{margin-top:28px}

/* Stickers (on plain grounds, never on photos) */
.sticker{display:inline-grid; place-items:center; width:104px; height:104px; border-radius:50%; background:var(--gold); color:var(--espresso); font:600 12px/1.25 var(--body); letter-spacing:.12em; text-transform:uppercase; text-align:center; padding:12px; rotate:-10deg; box-shadow:0 6px 16px -8px rgba(55,42,30,.5); transition:rotate .6s var(--spring)}
.sticker b{display:block; font:600 30px/1 var(--display); letter-spacing:0; text-transform:none}
.sticker:hover{rotate:6deg}

/* Journal cards: scrapbook snaps */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,5vw,64px) clamp(24px,4vw,56px)}
.card{text-decoration:none; display:grid; gap:22px}
.snap{background:#fff; padding:12px 12px 14px; box-shadow:0 10px 24px -16px rgba(55,42,30,.45)}
.cards .card:nth-child(odd) .snap{--t:-1.6} .cards .card:nth-child(even) .snap{--t:1.3}
.cards .card:nth-child(even){margin-top:clamp(0px,3vw,40px)}
.snap .ph{rotate:0deg; overflow:hidden; aspect-ratio:4/3; background:var(--oat); box-shadow:none!important; translate:none!important}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card h3,.card h2{font-size:clamp(30px,3vw,38px)}
.card p{color:var(--cocoa); font-size:15px; margin:8px 0 0}
.card .meta{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--cocoa)}
@media (max-width:760px){.cards{grid-template-columns:1fr}.cards .card:nth-child(even){margin-top:0}}

/* Page head */
.page-head{padding:clamp(40px,8vw,110px) 0 clamp(32px,5vw,64px)}
.page-head h1{margin-top:16px}
.page-head .lead{margin-top:22px}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px}
.head-row .sticker{flex:none; margin-bottom:8px}
@media (max-width:700px){.head-row{flex-direction:column; align-items:flex-start; gap:0}.head-row .sticker{align-self:flex-end; margin:-6px 6px 0 0; width:88px; height:88px; font-size:10.5px}.head-row .sticker b{font-size:24px}}

/* Menu */
.menu-nav{position:sticky; top:var(--header); z-index:20; background:rgba(253,251,244,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--oat)}
.menu-nav .wrap{display:flex; gap:26px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.menu-nav .wrap::-webkit-scrollbar{display:none}
@media (max-width:700px){.menu-nav .wrap{-webkit-mask:linear-gradient(90deg,#000 85%,transparent); mask:linear-gradient(90deg,#000 85%,transparent); padding-right:48px}}
.menu-nav a{flex:none; padding:15px 0 13px; min-height:48px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--cocoa); border-bottom:2px solid transparent; transition:color .25s, border-color .25s}
.menu-nav a.is-active{color:var(--espresso); border-color:var(--gold)}
.menu-cat{padding:clamp(56px,8vw,100px) 0 0; scroll-margin-top:36px}
.menu-cat.section--dark{margin-top:clamp(56px,8vw,100px); padding-bottom:clamp(56px,8vw,100px)}
.menu-cat-head{position:relative; display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:end; margin-bottom:44px; padding-bottom:26px; border-bottom:1px solid var(--oat)}
.menu-cat-head p{color:var(--cocoa); margin:12px 0 0; max-width:440px}
.menu-cat-head .sticker{margin-bottom:-52px; z-index:1}
@media (max-width:700px){.menu-cat-head{grid-template-columns:1fr}.menu-cat-head:has(.sticker) h2{padding-right:92px}.menu-cat-head .sticker{position:absolute; right:0; top:-8px; margin:0; width:84px; height:84px; font-size:10.5px}.menu-cat-head .sticker b{font-size:23px}}
.products{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(36px,5vw,64px) clamp(24px,3vw,44px)}
.product{display:grid; grid-template-columns:minmax(120px,40%) 1fr; gap:clamp(18px,2.4vw,30px); align-items:start}
.product:nth-child(4n+1) .ph{--t:-1.8} .product:nth-child(4n+2) .ph{--t:1.4} .product:nth-child(4n+3) .ph{--t:1} .product:nth-child(4n+4) .ph{--t:-1.2}
.product .ph{overflow:hidden; aspect-ratio:1; background:var(--oat)}
.product .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.product:hover .ph img{transform:scale(1.06)}
.product h3{font-size:clamp(27px,2.6vw,32px)}
.product p{color:var(--cocoa); font-size:14.5px; margin:8px 0 14px}
.tag{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:var(--gold); color:var(--espresso); margin-bottom:12px; rotate:-3deg}
.boxes{list-style:none; margin:0; padding:0; border-top:1px solid var(--oat)}
.boxes li{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--oat); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cocoa)}
.boxes li .what{flex:1}
.boxes .price{font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:0; color:var(--espresso); text-transform:none}
.add-btn{position:relative; flex:none; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--espresso); background:transparent; color:var(--espresso); cursor:pointer; text-decoration:none; transition:background .25s, color .25s, transform .3s var(--spring)}
.add-btn svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round}
.add-btn .ok{display:none}
.add-btn:hover{background:var(--espresso); color:var(--cream); transform:rotate(90deg)}
.add-btn.added{background:var(--gold); border-color:var(--gold); color:var(--espresso); transform:none; animation:bump .45s var(--spring)}
.add-btn.added .plus{display:none} .add-btn.added .ok{display:block}
.on-dark .add-btn{border-color:var(--cream); color:var(--cream)}
@media (max-width:900px){.products{grid-template-columns:1fr}}
@media (max-width:480px){.product{grid-template-columns:1fr; gap:22px}.product .ph{aspect-ratio:4/3; width:calc(100% - 12px); margin:0 auto}}

.note-band{display:flex; flex-wrap:wrap; gap:10px 36px; justify-content:center; padding:22px var(--gutter); background:var(--oat-tint); font-size:13.5px; color:var(--cocoa); text-align:center}
.note-band b{color:var(--espresso)}
.note-band .link{display:inline-block; padding:10px 0 2px}

/* Basket bar + toast */
.basket-bar{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:45; display:flex; align-items:center; gap:16px; padding:8px 8px 8px 24px; background:var(--espresso); color:var(--cream); border-radius:999px; box-shadow:0 16px 30px -14px rgba(55,42,30,.6); translate:-50% 180%; visibility:hidden; transition:translate .5s var(--spring), visibility 0s .5s; max-width:calc(100% - 24px)}
.basket-bar.show{translate:-50% 0; visibility:visible; transition:translate .5s var(--spring)}
@media (min-width:1041px){.basket-bar{left:auto; right:24px; translate:0 180%}.basket-bar.show{translate:0 0}}
@media (max-width:1040px){body.has-basket .site-footer{padding-bottom:110px}}
.basket-bar .sum{font-size:13px; letter-spacing:.06em; white-space:nowrap}
.basket-bar .sum .price{font-family:var(--display); font-size:24px; font-weight:600; margin-left:6px}
.basket-bar .btn{min-height:44px; padding:10px 20px; font-size:12px; white-space:nowrap}
.cart-bar.near{translate:0 180%; visibility:hidden}
.toast{position:fixed; left:50%; top:calc(var(--header) + 12px); z-index:55; translate:-50% -20px; opacity:0; padding:12px 20px; background:var(--cream); border:1px solid var(--oat); border-radius:999px; box-shadow:0 12px 26px -14px rgba(55,42,30,.5); font-size:13.5px; white-space:nowrap; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; pointer-events:none; transition:opacity .3s, translate .45s var(--spring)}
.toast.show{opacity:1; translate:-50% 0}
.toast b{font-weight:600}
.flyer{position:fixed; z-index:70; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; pointer-events:none; background:url(/assets/logo.webp) center/cover; box-shadow:0 6px 14px -4px rgba(55,42,30,.4)}
.crumbs-p{position:fixed; z-index:70; width:7px; height:6px; border-radius:46% 54% 40% 60%; pointer-events:none}

/* Order builder */
.order{display:grid; grid-template-columns:1fr minmax(320px,400px); gap:clamp(28px,4vw,64px); align-items:start; padding-bottom:clamp(96px,9vw,120px)}
.order-list h2{font-size:clamp(28px,3vw,32px); margin:44px 0 6px; padding-bottom:12px; border-bottom:1px solid var(--oat)}
.order-list h2:first-child{margin-top:0}
.oi{display:grid; grid-template-columns:76px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--oat)}
.oi > img{width:76px; height:76px; object-fit:cover; rotate:-2deg}
.oi:nth-of-type(even) > img{rotate:2deg}
.oi h3{font-size:23px}
.oi-rows{display:grid; gap:8px; margin-top:8px}
.oi-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--cocoa)}
.oi-row .what{font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.oi-row .what .price{font-family:var(--display); font-size:21px; color:var(--espresso); letter-spacing:0; text-transform:none; margin-left:8px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--oat); border-radius:999px; flex:none}
.qty button{width:44px; height:44px; border:0; background:none; font:500 21px/1 var(--body); color:var(--espresso); cursor:pointer; border-radius:999px; transition:background .2s, transform .25s var(--spring)}
.qty button:hover{background:var(--oat-tint)}
.qty button:active{transform:scale(.85)}
.qty button:disabled{color:var(--mocha); cursor:default; background:none; transform:none}
.qty output{min-width:24px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; color:var(--espresso)}
.qty.has{border-color:var(--gold); background:rgba(216,168,102,.12)}
.summary{position:sticky; top:calc(var(--header) + 20px); background:var(--espresso); color:var(--cream); padding:30px 28px 40px; scroll-margin-top:0;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/20px 10px repeat-x}
@media (min-width:981px){.summary{max-height:calc(100vh - var(--header) - 40px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--cocoa) transparent}}
.summary .label{color:var(--oat)}
.sum-lines{list-style:none; margin:16px 0 0; padding:0; font-size:14px; min-height:44px}
.sum-lines li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed rgba(230,213,193,.28); animation:rise .35s var(--ease) both}
.sum-lines .empty{color:var(--oat); border:0; animation:none; font-style:italic; font-family:var(--display); font-size:20px}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 22px}
.sum-total .price{display:inline-block; font-family:var(--display); font-size:46px; font-weight:600; line-height:1}
.sum-total.bump .price{animation:bump .45s var(--spring)}
.field{display:grid; gap:7px; margin-bottom:16px}
.field label{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
.field input,.field textarea,.field select{width:100%; min-height:50px; font:16px var(--body); padding:12px 14px; border:1px solid var(--oat); background:var(--cream); color:var(--espresso); border-radius:0; -webkit-appearance:none; appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--espresso) 50%),linear-gradient(135deg,var(--espresso) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.field input[type=date]{display:block; min-width:0}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(216,168,102,.35)}
.summary .field input,.summary .field textarea{border-color:rgba(230,213,193,.4); background:rgba(253,251,244,.07); color:var(--cream); color-scheme:dark}
.summary .field input::placeholder,.summary .field textarea::placeholder{color:rgba(230,213,193,.7)}
.field textarea{min-height:96px; resize:vertical}
.field .hint{font-size:13px; color:var(--cocoa)}
.summary .field .hint{color:var(--oat)}
.summary .btn{width:100%; margin-top:6px}
.summary .btn[aria-disabled="true"]{opacity:.5}
.summary .small{font-size:13px; color:var(--oat); margin:16px 0 0; line-height:1.6}
.text-btn{background:none; border:0; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; padding:12px 0; min-height:44px}
.error{color:#F4C9A8; font-size:14px; min-height:22px; font-weight:500}
.sent{display:none; margin-top:14px; padding:14px 16px; border:1px dashed var(--gold); font-size:14px; color:var(--cream)}
.sent.show{display:block; animation:rise .4s var(--ease)}
.sent a{color:var(--gold)}
.back-link{margin-bottom:6px}
@media (max-width:980px){.order{grid-template-columns:1fr}.summary{position:static}}
.cart-bar{display:none}
@media (max-width:980px){
  .cart-bar{display:flex; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 22px; background:var(--espresso); color:var(--cream); border-radius:999px; translate:0 180%; visibility:hidden; transition:translate .5s var(--spring), visibility 0s .5s; box-shadow:0 16px 30px -14px rgba(55,42,30,.6)}
  .cart-bar.show{translate:0 0; visibility:visible; transition:translate .5s var(--spring)}
  .cart-bar .price{font-family:var(--display); font-size:26px; font-weight:600}
  .cart-bar .btn{min-height:44px; padding:10px 18px; font-size:12px}
}
@media (max-width:400px){.oi{grid-template-columns:56px 1fr; gap:12px}.oi > img{width:56px; height:56px}.oi-row .what{letter-spacing:.04em; font-size:12px}.oi-row .what .price{font-size:19px; margin-left:5px}.qty button{width:40px}}

/* Forms (wholesale) */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 20px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.consent{display:flex; gap:12px; align-items:flex-start; text-transform:none!important; letter-spacing:0!important; font-weight:400!important; font-size:14px!important; color:var(--cocoa); cursor:pointer; padding:6px 0}
.consent input{width:22px!important; height:22px; min-height:0!important; flex:none; margin-top:2px; accent-color:var(--espresso); -webkit-appearance:checkbox!important; appearance:auto!important}
.form-status{margin-top:16px; font-weight:600; min-height:24px}
.form-status.ok{color:#3F6B3A}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Article */
.article{max-width:760px; margin:0 auto}
.article p{font-size:17px; color:var(--cocoa)}
.article h2{font-size:clamp(30px,3.4vw,40px); margin:52px 0 16px}
.article figure{margin:44px 0}
.article figcaption{font-size:13px; color:var(--cocoa); margin-top:10px}
.article .snap-fig{background:#fff; padding:12px 12px 16px; box-shadow:0 12px 26px -18px rgba(55,42,30,.5); rotate:calc(-1.2deg * var(--k))}
.article .snap-fig:nth-of-type(even){rotate:calc(1deg * var(--k))}
.article .snap-fig .clip{overflow:hidden}
.article .snap-fig img{width:100%}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.gallery .snap-fig{margin:0}
.gallery .snap-fig:first-child{rotate:calc(-2deg * var(--k))} .gallery .snap-fig:last-child{rotate:calc(2.4deg * var(--k)); margin-top:24px}
.gallery img{width:100%; aspect-ratio:4/5; object-fit:cover}
.video-frame{max-width:340px; margin:40px auto; background:#fff; padding:12px 12px 16px; box-shadow:0 12px 26px -18px rgba(55,42,30,.5); rotate:calc(1.5deg * var(--k))}
.video-frame video{width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--oat)}
.video-frame figcaption{font-family:var(--display); font-style:italic; font-size:19px; text-align:center; margin-top:10px; color:var(--cocoa)}

/* FAQ */
.faq{border-top:1px solid var(--oat)}
.faq details{border-bottom:1px solid var(--oat)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; min-height:64px; font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.2; transition:padding .35s var(--ease)}
.faq summary:hover{padding-left:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:18px; height:18px; position:relative; transition:rotate .45s var(--spring)}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--espresso)}
.faq summary .pm::after{rotate:90deg; transition:rotate .45s var(--spring)}
.faq details[open] .pm{rotate:180deg}
.faq details[open] .pm::after{rotate:0deg}
.faq .a{padding:0 0 24px; color:var(--cocoa); max-width:680px}
.faq details[open] .a{animation:rise .45s var(--ease)}

/* Footer */
.site-footer{background:var(--espresso); color:var(--oat); padding:clamp(64px,8vw,100px) 0 calc(28px + env(safe-area-inset-bottom))}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.footer-top h2{font-size:clamp(42px,5vw,64px); color:var(--cream)}
.footer-top h2 em{color:var(--gold); font-weight:500}
.footer-top .btn{margin-top:28px}
.footer-col h3{font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--mocha); margin-bottom:10px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid}
.footer-col li{padding:2px 0; line-height:1.5}
.footer-col li:not(:has(a)){padding:8px 0}
.footer-col a{display:inline-block; text-decoration:none; color:var(--cream); padding:10px 0; transition:color .2s, translate .3s var(--spring)}
.footer-col a:hover{color:var(--gold); translate:6px 0}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:56px; padding-top:20px; border-top:1px solid rgba(230,213,193,.18); font-size:12.5px; letter-spacing:.08em}
.footer-bottom a{color:var(--oat); display:inline-block; padding:12px 0}
.to-top{display:inline-flex; align-items:center; gap:10px; background:none; border:0; color:var(--oat); font:600 12px var(--body); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; padding:6px 0; min-height:44px}
.to-top img{width:40px; height:40px; transition:transform .8s var(--spring)}
.to-top:hover img{transform:rotate(-360deg) translateY(-4px)}
.to-top.spin img{animation:rollup 1s var(--ease)}
@media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr; gap:36px 24px}.footer-top > div:first-child{grid-column:1/-1}}

/* Floating WhatsApp */
.wa-float{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:56px; height:56px; border-radius:50%; background:var(--espresso); color:var(--cream); display:grid; place-items:center; box-shadow:0 8px 24px rgba(55,42,30,.28); transform:scale(0) rotate(-30deg); transition:transform .5s var(--spring), background .25s}
.wa-float.show{transform:none}
.wa-float:hover{background:var(--cinnamon); transform:rotate(-12deg) scale(1.06)}
.wa-float svg{width:26px; height:26px; fill:currentColor}
body.has-basket .wa-float{transform:scale(0)}

/* 404 */
.lost{display:grid; grid-template-columns:1fr .8fr; gap:clamp(32px,5vw,72px); align-items:center; min-height:62vh}
.lost .drop{animation:fall 1.6s .2s var(--ease) both; rotate:12deg; background:#fff; padding:12px 12px 16px; box-shadow:0 18px 36px -20px rgba(55,42,30,.55)}
@media (max-width:800px){.lost{grid-template-columns:1fr}.lost .drop{order:-1; max-width:300px; margin:10px auto 0}}

/* Reveal on scroll */
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--spring)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal-img img{clip-path:inset(100% 0 0 0); transform:scale(1.15); transition:clip-path 1.2s var(--ease), transform 1.6s var(--ease)}
.js .reveal-img.in img{clip-path:inset(0 0 0 0); transform:scale(1)}
.d1{transition-delay:.1s!important}.d2{transition-delay:.2s!important}.d3{transition-delay:.3s!important}

/* Keyframes */
@keyframes stumble{0%{opacity:0; transform:translateY(-30px) rotate(-16deg)}55%{opacity:1; transform:translateY(4px) rotate(7deg)}75%{transform:translateY(-2px) rotate(-3deg)}100%{transform:none}}
@keyframes logodrop{0%{transform:none}25%{transform:translateY(16px) rotate(30deg)}45%{transform:translateY(-6px) rotate(-14deg)}65%{transform:translateY(3px) rotate(8deg)}100%{transform:none}}
@keyframes tumble{0%{opacity:0; transform:translateY(-.6em) rotate(-8deg)}60%{opacity:1; transform:translateY(.06em) rotate(2deg)}100%{transform:none}}
@keyframes drop{0%{opacity:0; transform:translateY(-2.2em)}55%{opacity:1; transform:translateY(.12em) rotate(18deg)}75%{transform:translateY(-.08em) rotate(-6deg)}100%{transform:translateY(.04em) rotate(10deg)}}
@keyframes jiggle{0%,100%{transform:translateY(calc(var(--y,0) * 1em)) rotate(calc(var(--r,0) * 1deg))}40%{transform:translateY(-.08em) rotate(calc(var(--r,0) * -2deg))}70%{transform:translateY(.03em) rotate(calc(var(--r,0) * 1.5deg))}}
@keyframes wobble{0%{rotate:0deg}30%{rotate:-2.5deg}60%{rotate:1.5deg}100%{rotate:0deg}}
@keyframes roll{0%{opacity:0; transform:translateX(-90px) rotate(-220deg)}70%{opacity:1; transform:translateX(6px) rotate(12deg)}100%{transform:none}}
@keyframes rollup{0%{transform:none}60%{transform:translateY(-14px) rotate(-300deg)}100%{transform:rotate(-360deg)}}
@keyframes fanback{from{opacity:0; rotate:0deg; translate:20px 10px}to{opacity:1}}
@keyframes fanfront{from{opacity:0; rotate:-4deg; translate:0 30px}to{opacity:1}}
@keyframes fall{0%{opacity:0; transform:translateY(-120%) rotate(-30deg)}55%{opacity:1; transform:translateY(4%) rotate(4deg)}72%{transform:translateY(-3%) rotate(-2deg)}100%{transform:none}}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)}}
@keyframes navin{from{opacity:0; transform:translateX(-18px) rotate(-2deg)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .js .reveal,.js .reveal-img img{opacity:1; transform:none; clip-path:none}
  .marquee-track{animation:none}
  .scribble path{stroke-dashoffset:0}
}

/* Footer and about: dot sits crooked without the drop-in */
.site-footer .clumsy .dot{animation:none; transform:translateY(.04em) rotate(10deg)}
.hero-badge{cursor:pointer}
.sticker > span{display:block}