:root{--ink:#2B1A24;--cream:#FFF7EE;--paper:#fff;--pumpkin:#F7A440;--pumpkin-soft:#FFD9A8;--cran:#C8364E;--pine:#2F7D5B;--pine-soft:#CDEBD9;--snow:#EAF4FB;--mute:#6E5B63;--r:24px;--sh:0 6px 0 var(--ink);--line:3px solid var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 Nunito,system-ui,sans-serif}
a{color:inherit}img{max-width:100%}
h1,h2,h3,.logo,.ft-brand,.price,.pr{font-family:Fredoka,Nunito,sans-serif;font-weight:600;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--cran);outline-offset:3px;border-radius:8px}
/* header */
.hd{position:relative;background:var(--pumpkin-soft);border-bottom:var(--line);overflow:hidden;perspective:700px}
#hd3d,#ft3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hd-in{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 20px 26px;max-width:1160px;margin:auto;pointer-events:none}
.hd-in a{pointer-events:auto;text-decoration:none}
.logo{font-size:30px;font-weight:700}
.l3d{display:inline-block;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink);transform:rotateX(10deg) rotateY(var(--ry,-6deg));transition:transform .2s}
.l3d i{font-style:normal;color:var(--cran)}
nav{display:flex;gap:8px}nav a{font-weight:800;font-size:15px;padding:10px 16px;border:var(--line);border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--ink);min-height:44px;display:inline-flex;align-items:center}
nav a:hover{background:var(--pine-soft)}nav a:active{transform:translateY(3px);box-shadow:none}
.ribbon{background:var(--pine);color:var(--paper);text-align:center;font-weight:800;font-size:14px;padding:9px 16px;border-bottom:var(--line)}
/* hero */
.hero{max-width:1160px;margin:auto;padding:64px 20px 40px;display:grid;gap:40px;align-items:center}
@media(min-width:880px){.hero{grid-template-columns:1.05fr 1fr;padding:80px 20px 56px}}
h1{font-size:clamp(44px,7vw,78px);line-height:.98;margin:0 0 18px}h1 em{font-style:normal;color:var(--cran)}
.lede{font-size:clamp(18px,2vw,21px);color:var(--mute);max-width:32ch;margin:0 0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--cran);color:var(--paper);border:var(--line);padding:12px 28px;border-radius:999px;font:700 18px Fredoka,sans-serif;text-decoration:none;cursor:pointer;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}.btn:active{transform:translateY(6px);box-shadow:none}
.stack{position:relative;aspect-ratio:1.15;max-width:560px;width:100%;justify-self:center}
.s{position:absolute;width:56%;aspect-ratio:1;object-fit:cover;border:var(--line);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);background:var(--paper)}
.s0{left:0;top:8%;transform:rotate(-6deg);z-index:2}.s1{right:0;top:0;transform:rotate(5deg)}.s2{left:24%;bottom:0;transform:rotate(-1deg);z-index:3}
/* shop */
.shop{max-width:1160px;margin:auto;padding:24px 20px 40px}
h2{font-size:clamp(30px,4vw,44px);line-height:1.05;margin:0 0 24px}
.grid{display:grid;gap:28px;grid-template-columns:1fr}@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--paper);border:var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 var(--ink)}
.art{position:relative;aspect-ratio:1;border-bottom:var(--line);background:var(--snow);overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.badge{display:inline-block;font:800 13px Nunito,sans-serif;background:var(--paper);color:var(--ink);padding:5px 12px;border:2px solid var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink)}
.art .badge{position:absolute;left:14px;top:14px;transform:rotate(-3deg)}
.c1 .art .badge{background:var(--pine-soft)}.c0 .art .badge{background:var(--pumpkin-soft)}.c2 .art .badge{background:#FFD3DA}
.cb{padding:18px 22px 22px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end;flex:1}
.cb h3{font-size:25px;line-height:1.1;margin:0;grid-column:1/-1}.cb p{margin:4px 0 0;color:var(--mute)}
.pr{font-size:26px;color:var(--cran);white-space:nowrap}
.ship{max-width:1160px;margin:20px auto 80px;padding:0 20px}
.ship ol{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:s}@media(min-width:720px){.ship ol{grid-template-columns:repeat(3,1fr)}}
.ship li{counter-increment:s;background:var(--paper);border:var(--line);border-radius:var(--r);padding:22px;box-shadow:0 4px 0 var(--ink)}
.ship li:before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pumpkin);border:var(--line);font:700 20px Fredoka;margin-bottom:12px}
.ship li b{display:block;font-size:19px}
/* product page */
.pd{max-width:1160px;margin:auto;padding:40px 20px 80px;display:grid;gap:40px}@media(min-width:880px){.pd{grid-template-columns:1.1fr 1fr;align-items:start}.gal{position:sticky;top:20px}}
.gal{display:grid;gap:14px}
.pd-art{aspect-ratio:1;border:var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.pd-art img{width:100%;height:100%;object-fit:cover;display:block}
img.contain{object-fit:contain!important;background:var(--pumpkin-soft);padding:5%}
.thumbs{display:flex;gap:12px;flex-wrap:wrap}
.th{width:80px;height:80px;padding:0;border:var(--line);border-radius:16px;overflow:hidden;background:var(--paper);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.th img{width:100%;height:100%;object-fit:cover;display:block}.th img.contain{padding:6%}
.th.on{outline:3px solid var(--cran);outline-offset:3px}
.pd-info h1{font-size:clamp(38px,5vw,56px);margin:14px 0 10px}
.price{font-size:38px;color:var(--cran);margin:0}.shipline{margin:2px 0 18px;font-weight:800;color:var(--pine)}
.desc{font-size:18px;max-width:52ch}.pd-info ul{padding-left:20px}.pd-info li{margin:.35em 0}
.order{display:grid;gap:14px;margin-top:28px;background:var(--paper);border:var(--line);padding:22px;border-radius:var(--r);box-shadow:var(--sh)}
.order label{display:grid;gap:6px;font-weight:800;font-size:15px}
.order input,.order select,.order textarea{font:17px Nunito,sans-serif;min-height:48px;padding:11px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--cream);color:var(--ink);width:100%}
.order input:user-invalid,.order textarea:user-invalid{border-color:var(--cran);background:#FFEFF2}
.order .btn{width:100%}
.err{margin:0;padding:10px 14px;border-radius:12px;background:#FFEFF2;border:2px solid var(--cran);color:var(--cran);font-weight:800}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sm{font-size:14px;color:var(--mute);margin:0}
.thanks{grid-template-columns:1fr!important;text-align:center}.thanks .lede{margin-inline:auto}
/* footer */
.ft{position:relative;background:var(--pine);color:var(--paper);overflow:hidden;border-top:var(--line);min-height:240px}
.ft-in{position:relative;max-width:1160px;margin:auto;padding:48px 20px;display:flex;gap:36px;align-items:center;flex-wrap:wrap;pointer-events:none}
.ft-in a{pointer-events:auto;color:var(--pumpkin-soft);font-weight:800}
.ft-brand{font-size:32px;margin:0 0 6px}.ft .sm{color:#d7efe2}
.cube{width:84px;height:84px;position:relative;transform-style:preserve-3d;animation:spin 16s linear infinite;flex:none}
.cube i{position:absolute;inset:0;display:grid;place-items:center;font:700 34px Fredoka,sans-serif;font-style:normal;background:var(--pumpkin);border:3px solid var(--ink);border-radius:14px;color:var(--ink)}
.cube i:nth-child(1){transform:translateZ(42px)}.cube i:nth-child(2){transform:rotateY(90deg) translateZ(42px);background:var(--paper)}.cube i:nth-child(3){transform:rotateY(180deg) translateZ(42px);background:#FFD3DA}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(42px);background:var(--pine-soft)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(42px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(42px);background:var(--paper)}
@keyframes spin{to{transform:rotateX(360deg) rotateY(720deg)}}
/* the one authored moment: hero photo stack deals in on load */
@keyframes deal{from{opacity:0;translate:0 40px;scale:.9}}
.s{animation:deal .7s cubic-bezier(.2,1.4,.4,1) both}.s1{animation-delay:.12s}.s2{animation-delay:.24s}
@media(max-width:600px){.hd-in{padding:16px 16px 18px}.logo{font-size:23px}nav a{padding:8px 12px;font-size:14px}.hero{padding:36px 18px 24px;gap:28px}.hero-copy .btn{width:100%}.shop,.ship{padding-inline:18px}.pd{padding:24px 18px 56px}.th{width:68px;height:68px}.order{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.card:hover{transform:none}}