/* shared design system — colors, base type, nav, buttons, footer.
   Used by index.html and every page under /goods so product pages
   feel like the same site instead of a bolted-on store. */
:root{
  --paper:#F6F1E3;
  --ink:#231F20;
  --pink:#FF48B0;
  --blue:#0078BF;
  --yellow:#FFE800;
  --green:#00A95C;
  --orange:#FF6C2F;
  --purple:#7946B5;
  --night:#221D1F;
  --maroon:#5A2C3E;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:light only;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Fredoka',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
/* riso grain over the whole world */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--yellow);color:var(--ink);}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.display{font-family:'Bagel Fat One',cursive;font-weight:400;line-height:1.05;}

/* highlight chip — riso-color patch behind a phrase, hand-torn feel */
.hl{
  padding:.04em .22em;border-radius:40% 60% 55% 45% / 55% 45% 60% 40%;
  white-space:nowrap;display:inline-block;font-weight:600;
}
.hl.pink{background:var(--pink);}
.hl.yellow{background:var(--yellow);}
.hl.green{background:var(--green);color:var(--paper);}
.hl.blue{background:var(--blue);color:var(--paper);}
.hl.orange{background:var(--orange);color:var(--paper);}

/* ═══ NAV ═══ */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:22px;
  padding:8px 22px 8px 12px;
  background:rgba(246,241,227,.94);
  border:2.5px solid var(--ink);
  border-radius:60px 46px 56px 48px / 48px 58px 44px 56px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;
}
.nav-mark{
  display:inline-flex;align-items:center;transition:transform .25s;
}
.nav-mark:hover{transform:rotate(-2deg) scale(1.05);}
.nav-logo-img{height:38px;width:auto;display:block;}
.nav-logo-img.settle{animation:settle .38s ease;}
@keyframes settle{
  0%{transform:scale(1);}
  35%{transform:scale(1.32) rotate(-6deg);}
  65%{transform:scale(.94) rotate(3deg);}
  100%{transform:scale(1) rotate(0deg);}
}
nav a.lnk{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;
  padding:5px 12px;border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;
  transition:background .2s;
}
nav a.lnk:hover,nav a.lnk:focus-visible{background:var(--yellow);outline:none;}

/* ═══ BUTTONS ═══ */
.squish{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  text-decoration:none;cursor:pointer;color:var(--ink);background:var(--paper);
  border:2.5px solid var(--ink);padding:14px 28px;
  border-radius:64% 36% 55% 45% / 48% 62% 38% 52%;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:inline-block;
}
.squish:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.squish.loud{background:var(--blue);color:var(--paper);}
.squish.loud:hover{background:var(--pink);color:var(--ink);}

/* pill tag — bordered oval label used above section headings */
.pill-tag{
  font-family:'Bagel Fat One',cursive;font-size:13px;letter-spacing:.2em;
  background:var(--paper);padding:8px 20px;
  border:2.5px solid var(--ink);margin:0 auto 18px;display:table;
  border-radius:55% 45% 50% 50% / 45% 55% 45% 55%;transform:rotate(1.5deg);
}

/* ═══ FOOTER ═══ */
footer{padding:60px 5vw;text-align:center;background:var(--night);color:var(--paper);}
.foot-mark{font-family:'Bagel Fat One',cursive;font-size:1.8rem;}
footer p{font-size:.85rem;opacity:.6;margin-top:10px;}
footer a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;opacity:1;}
footer a:hover{opacity:.7;}