/* ==========================================================
   Lingonberry Doodles – shared design system
   Used by index.html and hollow.html
   ========================================================== */
:root{
  --red:#B8322F;--red-d:#8f2523;--green:#3F6B4A;--green-d:#2d4e36;--forest:#24402c;
  --cream:#F6F1E7;--paper:#FBF6EA;--kraft:#EDE3D1;--brown:#3A2A24;--wood:#9A6B43;
  --pink:#E9B7B0;--sun:#F2C14E;--sun-d:#b88a1c;--sky:#BFE0F0;--ice:#DDEFF6;--moss:#8FBF5A;--meadow:#E6EFD3;--butter:#FCEBB5;
  --ink-shadow:0 5px 0 rgba(58,42,36,.15);
  --card-shadow:0 18px 40px rgba(58,42,36,.18);
  --sec-pad:104px;
  --spring:cubic-bezier(.3,1.5,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:84px}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--brown);background:var(--cream);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Sniglet',system-ui,sans-serif;font-weight:800;line-height:1.08;letter-spacing:.005em}
img{max-width:100%}
a{color:var(--red)}
.hand,.mali{font-family:'Mali',cursive;font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
section{position:relative;padding:var(--sec-pad) 0}
::selection{background:var(--sun);color:var(--brown)}
:focus-visible{outline:3px dashed var(--red);outline-offset:3px}

/* language */
html:not(.sv) [data-sv]{display:none!important}
html.sv [data-en]{display:none!important}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px dashed rgba(184,50,47,.2)}
header.site .wrap{display:flex;align-items:center;gap:14px;padding-top:9px;padding-bottom:9px}
header.site .logo img{height:50px;display:block;transition:transform .3s var(--spring)}
header.site .logo:hover img{transform:rotate(-5deg) scale(1.05)}
header.site nav{display:flex;align-items:center;gap:2px;margin-left:auto}
header.site nav a{text-decoration:none;color:var(--brown);font-weight:800;padding:8px 13px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap}
header.site nav a:hover{background:#fff;color:var(--red)}
header.site nav a[aria-current]{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px rgba(184,50,47,.25)}
header.site nav a.shop{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-d);margin-left:6px}
header.site nav a.shop:hover{transform:translateY(-1px)}
.actions{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;border:2px solid var(--green);border-radius:999px;overflow:hidden;background:#fff}
.lang button{border:0;background:transparent;padding:6px 12px;font:800 .85rem 'Nunito';color:var(--green);cursor:pointer}
.lang button.on{background:var(--green);color:#fff}
.menu-btn{display:none;width:46px;height:42px;border-radius:14px;border:3px solid var(--brown);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 0 rgba(58,42,36,.2)}
.menu-btn span{display:block;width:20px;height:3px;border-radius:2px;background:var(--brown);transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons, tags, eyebrows ---------- */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font:800 1rem 'Nunito';padding:14px 26px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 5px 0 var(--red-d);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--red-d)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-d)}
.btn.green{background:var(--green);box-shadow:0 5px 0 var(--green-d)}
.btn.green:hover{box-shadow:0 8px 0 var(--green-d)}
.btn.sun{background:var(--sun);color:var(--brown);box-shadow:0 5px 0 var(--sun-d)}
.btn.sun:hover{box-shadow:0 8px 0 var(--sun-d)}
.btn.ghost{background:#fff;color:var(--red);border:3px solid var(--red);padding:11px 23px;box-shadow:var(--ink-shadow)}
.btn.ghost.light{background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.tag{display:inline-block;background:var(--pink);color:var(--brown);font-weight:800;font-size:.8rem;padding:5px 14px;border-radius:999px;margin-bottom:12px}
.tag.sun{background:var(--sun)}
.eyebrow{display:inline-block;font:700 1.5rem/1.1 'Mali',cursive;color:var(--red);transform:rotate(-2.5deg);margin-bottom:6px}
.on-dark .eyebrow{color:var(--sun)}
.head{margin-bottom:40px}
.head h2{font-size:clamp(2.3rem,4.4vw,3.2rem);color:var(--green);margin-bottom:10px}
.on-dark .head h2{color:#fff}
.lead{font-size:1.14rem;max-width:660px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* wooden sign – the Hollow's heading style */
.sign{display:inline-block;position:relative;background:linear-gradient(180deg,#B07C4F,#8E6038);color:#FFF4DF;padding:12px 32px 14px;border-radius:14px;border:4px solid var(--brown);box-shadow:0 7px 0 rgba(58,42,36,.25),inset 0 -6px 0 rgba(0,0,0,.12);transform:rotate(-1.5deg);text-shadow:0 2px 0 rgba(58,42,36,.4)}
.sign::before{content:"";position:absolute;inset:6px;border-radius:8px;background:repeating-linear-gradient(180deg,transparent 0 11px,rgba(58,42,36,.12) 11px 13px);pointer-events:none}
.sign i{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#5a4030}
.sign i:first-child{left:11px}.sign i:last-of-type{right:11px}
.sign.r{transform:rotate(1.5deg)}
.head .sign{margin-bottom:16px}
.head .sign h2{color:#FFF4DF;margin:0;position:relative;font-size:clamp(1.9rem,3.6vw,2.6rem)}

/* tape strip & stickers */
.taped{position:relative}
.taped::before{content:"";position:absolute;z-index:3;top:-14px;left:50%;width:104px;height:28px;margin-left:-52px;background:rgba(242,193,78,.82);transform:rotate(-4deg);box-shadow:0 2px 3px rgba(0,0,0,.06)}
.taped.pink::before{background:rgba(233,183,176,.88)}
.taped.blue::before{background:rgba(191,224,240,.92);transform:rotate(5deg)}
.taped.green::before{background:rgba(143,191,90,.8);transform:rotate(5deg)}
.sticker{position:absolute;z-index:5;width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:'Sniglet',sans-serif;font-weight:800;line-height:1;box-shadow:0 6px 0 rgba(58,42,36,.18);border:4px dashed rgba(255,255,255,.7);animation:wobble 6s ease-in-out infinite}
.sticker b{font-size:1.75rem;display:block}
.sticker span{font:800 .68rem 'Nunito';text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(6deg) scale(1.05)}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 8deg))}}

/* grass edge between sections (drawn by site.js) */
.edge{position:absolute;left:0;width:100%;height:40px;top:-39px;z-index:3;pointer-events:none;display:block}
.edge.bottom{top:auto;bottom:-1px}

/* ---------- footer ---------- */
footer.site{background:var(--brown);color:#d8cfc6;padding:56px 0 34px;font-size:.95rem;position:relative}
footer.site .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;align-items:start}
footer.site .brand img{width:110px;display:block;margin-bottom:12px;transition:transform .8s}
footer.site .brand img:hover{transform:rotate(360deg)}
footer.site .brand p{max-width:260px;font-size:.92rem}
footer.site h4{font:800 1.15rem 'Sniglet';color:var(--sun);margin-bottom:10px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:6px}
footer.site a{color:#fff;text-decoration:none;font-weight:700}
footer.site a:hover{color:var(--sun)}
footer.site .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:40px;padding-top:20px;border-top:2px dashed rgba(255,255,255,.15)}
footer.site small{max-width:720px;opacity:.7;font-size:.82rem}
footer.site .bye{display:flex;align-items:center;gap:10px;font:700 1.25rem 'Mali';color:var(--sun);white-space:nowrap}
footer.site .bye img{width:70px;animation:wave 1.6s ease-in-out infinite;transform-origin:bottom center}
@keyframes wave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,160%);background:var(--brown);color:#fff;border-radius:999px;padding:10px 22px 10px 10px;display:flex;align-items:center;gap:10px;font:700 1.05rem 'Mali';box-shadow:0 10px 26px rgba(0,0,0,.3);transition:transform .45s var(--spring)}
.toast img{width:44px}
.toast.on{transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .menu-btn{display:flex}
  header.site nav{position:absolute;left:12px;right:12px;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:4px;background:var(--paper);border:3px solid var(--brown);border-radius:22px;padding:12px;box-shadow:0 18px 40px rgba(58,42,36,.25);transform:translateY(-10px) scale(.97);opacity:0;pointer-events:none;transition:all .25s var(--spring)}
  header.site nav.open{transform:none;opacity:1;pointer-events:auto}
  header.site nav a{padding:12px 16px;font-size:1.08rem}
  header.site nav a.shop{margin:6px 0 0;text-align:center}
  .actions{margin-left:auto}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site .bottom{flex-direction:column-reverse;align-items:flex-start}
}
@media(max-width:600px){
  :root{--sec-pad:84px}
  header.site .logo img{height:44px}
  .eyebrow{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sign h2{position:relative;margin:0;color:#FFF4DF}
.sticker b span,.sticker span span{font:inherit;margin:0;letter-spacing:inherit;text-transform:inherit}