/* Shared tokens and base styles for all pages. */

:root {
  --paper:#faf7f2; --ink:#1f1924; --pop:#f59e0b; --line:#1f1924;
  --amber:#f59e0b; --indigo:#6366f1; --rose:#f43f5e;
  --mute:#4a4450; --faint:#8a8290;
  --display:"Fredoka",system-ui,-apple-system,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --hand:"Caveat",ui-rounded,cursive;

  /* Hard offset shadows, no blur. */
  --chunky-sm:0 3px 0 var(--ink); --chunky:0 6px 0 var(--ink);
  --chunky-lg:0 9px 0 var(--ink); --tactile:0 5px 0 #d97706;
  --dot:#e2d9ce; --hair:#e7e0d6;

  /* Crayon colors for card edges and section marks. */
  --c-red:#e8452b; --c-orange:#f5821f; --c-yellow:#ffd447; --c-green:#37a05f;
  --c-teal:#1f9b8e; --c-blue:#2f7fd1; --c-violet:#8e44ad; --c-pink:#d81b60;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }

body {
  margin:0; padding:0 0 70px;
  background:var(--paper); color:var(--ink);
  background-image:radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size:24px 24px;
  font-family:var(--body); font-weight:500;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit }
h1, h2 { font-family:var(--body); font-weight:800; letter-spacing:-.02em }
h3, .big { font-family:var(--display); font-weight:600 }

.wrap { max-width:1120px; margin:0 auto; padding:0 24px }
@media (max-width:640px) { .wrap { padding:0 18px } }

.hide { display:none !important }
.center { text-align:center }

/* Like button */
.like {
  font:inherit; font-family:var(--display); font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 11px; border-radius:99px; border:2px solid var(--ink); background:#fff;
  color:var(--ink); box-shadow:0 2px 0 var(--ink);
  transition:transform .1s, background .2s;
}
.like:hover { background:#fff1f2 }
.like:active { transform:translateY(2px); box-shadow:none }
.like.on { background:#ffe4e6; border-color:var(--ink) }
.like.on .h { color:#e11d48 }
.like .h { font-size:14px; line-height:1 }
.like.pop .h { animation:likepop .32s cubic-bezier(.2,1.5,.4,1) }
@keyframes likepop { 50% { transform:scale(1.5) } }