:root {
    --red: #ff4d6d; --orange: #ff9f1c; --yellow: #ffd60a; --green: #38b000;
    --blue: #3a86ff; --purple: #8338ec; --ink: #22223b; --paper: #fffdf3;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; color: var(--ink); font: 1.3rem/1.5 "Patrick Hand", "Comic Sans MS", cursive;
    background-color: var(--paper);
    /* graph-paper background, like a school notebook */
    background-image:
      linear-gradient(#cde4ff 1px, transparent 1px),
      linear-gradient(90deg, #cde4ff 1px, transparent 1px);
    background-size: 28px 28px;
  }
  h1, h2, h3 { font-family: "Bubblegum Sans", "Comic Sans MS", cursive; font-weight: normal; margin: 0; }
  main { max-width: 1000px; margin: 0 auto; padding: 0 16px 48px; }

  header { text-align: center; padding: 40px 16px 24px; }
  h1 { font-size: clamp(3rem, 12vw, 6rem); line-height: 1; letter-spacing: 2px; }
  h1 span { display: inline-block; text-shadow: 4px 4px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
  h1 span:nth-child(6n+1) { color: var(--red);    transform: rotate(-6deg); }
  h1 span:nth-child(6n+2) { color: var(--orange); transform: rotate(4deg) translateY(-6px); }
  h1 span:nth-child(6n+3) { color: var(--yellow); transform: rotate(-3deg); }
  h1 span:nth-child(6n+4) { color: var(--green);  transform: rotate(7deg) translateY(4px); }
  h1 span:nth-child(6n+5) { color: var(--blue);   transform: rotate(-5deg); }
  h1 span:nth-child(6n)   { color: var(--purple); transform: rotate(5deg) translateY(-4px); }
  .tagline {
    display: inline-block; margin-top: 16px; padding: 6px 18px; background: var(--yellow);
    border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    transform: rotate(-2deg); font-size: 1.5rem;
  }

  .box {
    background: #fff; border: 4px solid var(--ink); padding: 24px; margin: 32px 0;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* wobbly hand-drawn edge */
    box-shadow: 6px 6px 0 var(--ink);
  }
  .box h2 { font-size: 2.4rem; margin-bottom: 8px; }
  .about { transform: rotate(-1deg); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
  .about > div { flex: 1 1 260px; }
  /* polaroid photo "taped" into the page */
  .polaroid {
    position: relative; flex: 0 1 260px; margin: 12px auto; padding: 12px 12px 4px; background: #fff;
    border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(4deg);
  }
  .polaroid::before {
    content: ""; position: absolute; top: -16px; left: 50%; width: 90px; height: 28px;
    background: rgba(255, 214, 10, .75); transform: translateX(-50%) rotate(-5deg);
  }
  .polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
  .polaroid figcaption { text-align: center; font-size: 1.2rem; padding-top: 4px; }

  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; padding: 0; list-style: none; }
  .card {
    background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 14px;
    box-shadow: 6px 6px 0 var(--ink); transition: transform .2s; text-align: center;
  }
  .card:nth-child(odd)  { transform: rotate(-2deg); }
  .card:nth-child(even) { transform: rotate(2deg); }
  .card:hover { transform: rotate(0) scale(1.06); }
  .card:nth-child(6n+1) .pic { background: #ffd6de; }
  .card:nth-child(6n+2) .pic { background: #ffe8c2; }
  .card:nth-child(6n+3) .pic { background: #fff5b8; }
  .card:nth-child(6n+4) .pic { background: #d4f5c4; }
  .card:nth-child(6n+5) .pic { background: #cfe0ff; }
  .card:nth-child(6n)   .pic { background: #e3d1ff; }
  .pic {
    display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover;
    border: 3px dashed var(--ink); border-radius: 12px; font-size: 5rem;
  }
  /* several photos: swipe on phones, arrows on computers */
  .pic { position: relative; overflow: hidden; }
  .slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .slides::-webkit-scrollbar { display: none; }
  .slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
  .arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0;
    background: #fff; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink);
    font: 1.3rem/1 "Bubblegum Sans", cursive; cursor: pointer;
  }
  .arrow.prev { left: 6px; }
  .arrow.next { right: 6px; }
  .dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .dots span { width: 11px; height: 11px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; }
  .dots span.on { background: var(--yellow); }
  .card h3 { font-size: 1.7rem; margin-top: 10px; }
  .card p { margin: 0; }
  .price {
    display: inline-block; margin-top: 8px; padding: 2px 14px; background: var(--green); color: #fff;
    border: 3px solid var(--ink); border-radius: 999px; font-family: "Bubblegum Sans", cursive; font-size: 1.4rem;
  }

  .order { background: var(--blue); color: #fff; transform: rotate(1deg); }
  .order ol { margin: 0; padding-left: 1.4em; }
  .order a { color: var(--yellow); }

  [hidden] { display: none !important; }
  .sold-sticker {
    display: table; margin: 4px auto 28px; padding: 4px 20px; background: var(--red); color: #fff;
    border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 4px 4px 0 var(--ink); transform: rotate(2deg); font: 1.6rem "Bubblegum Sans", cursive;
  }

  footer .built { font-size: 0.9rem; color: #666; }
  footer { text-align: center; padding: 16px; font-size: 1.1rem; }

  @media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.gallery-title { font-size: 2.6rem; text-align: center; }
.cats button { font-family: inherit; font-size: 1.2rem; border: 3px solid var(--ink); background: #fff; color: var(--ink); opacity: 1; box-shadow: 3px 3px 0 var(--ink); }
.cats .on { background: var(--purple); color: var(--on-brand, #fff); border-color: var(--ink); }