@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; src: url("assets/fredoka-latin.woff2") format("woff2"); }
html, body { margin: 0; padding: 0; background: #FFF8EE; }
body { font-family: "Fredoka", system-ui, -apple-system, sans-serif; font-variation-settings: "wdth" 100; color: #3E2C23; -webkit-font-smoothing: antialiased; }
a { color: #3E2C23; text-decoration: none; }
a:hover { color: #FFA24C; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }

/* Replaces the design tool's `style-hover` attribute, which was not real CSS. */
.store-btn { transition: background 0.15s ease; }
.store-btn:hover { background: #59422F; color: #FFF8EE; }
.cat-clip { transition: transform 0.15s ease; }
.cat-clip:hover { transform: scale(1.04); }

/* Legal pages: same palette, plain prose column. */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 24px 72px; line-height: 1.6; }
.legal h1 { font-size: 40px; font-weight: 500; margin: 8px 0 4px; }
.legal h2 { font-size: 22px; font-weight: 500; margin: 36px 0 8px; }
.legal p, .legal li { color: rgb(62 44 35 / 0.8); }
.legal li { margin-bottom: 6px; }
.legal .updated { color: rgb(62 44 35 / 0.55); font-size: 14px; margin-top: 0; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

/* The layout came from a 1440px design; only the side padding needs a phone. */
@media (max-width: 640px) {
  header, main, section, footer { padding-left: 20px !important; padding-right: 20px !important; }
}