:root { --ink:#1b1530; --cream:#fff8e7; --yellow:#ffd23f; --pink:#ff5fa2; --cyan:#3dd6f5; --teal:#2ec4b6; }
* { box-sizing: border-box; }
body { margin:0; font-family: Fredoka, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink);
  background: var(--teal) radial-gradient(circle, rgba(255,255,255,.18) 2px, transparent 2.5px) 0 0/18px 18px; line-height:1.55; }
.wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }
header { text-align:center; margin-bottom: 18px; }
header img { width:112px; height:112px; border-radius:26px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
h1 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size: clamp(36px, 8vw, 56px); margin:14px 0 4px; letter-spacing:1px;
  color:var(--yellow); text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.tag { font-weight:600; color:#fff; margin:0; text-shadow: 1px 1px 0 var(--ink); }
nav { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0; }
nav a { background:var(--yellow); color:var(--ink); text-decoration:none; font-weight:700; padding:8px 16px; border:3px solid var(--ink);
  border-radius:999px; box-shadow:3px 3px 0 var(--pink); }
nav a[aria-current] { background:#fff; }
.card { background:var(--cream); border:4px solid var(--ink); border-radius:22px; box-shadow:7px 7px 0 var(--ink); padding: 22px 22px 10px; margin-bottom: 26px; }
h2 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size:30px; margin:0 0 8px; letter-spacing:.5px; }
h3 { margin:20px 0 4px; font-size:19px; }
a { color:#0a6d8a; font-weight:600; }
ul { padding-left: 22px; }
.mail { display:inline-block; background:var(--yellow); border:3px solid var(--ink); border-radius:14px; padding:8px 14px; box-shadow:3px 3px 0 var(--cyan); text-decoration:none; color:var(--ink); }
footer { text-align:center; color:#fff; font-size:14px; text-shadow:1px 1px 0 var(--ink); }

/* v2: landing page */
.logo { font-family: Anton, Impact, sans-serif; font-size: clamp(36px, 8vw, 56px); margin:14px 0 4px; letter-spacing:1px; line-height:1.1;
  color:var(--yellow); text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.card h1 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size: clamp(28px, 6vw, 38px); line-height:1.15; margin:0 0 10px;
  color:var(--ink); text-shadow:none; letter-spacing:.5px; }
.lead { font-size: 18px; }
.small { font-size: 14px; opacity: .8; }
.stores { display:flex; flex-wrap:wrap; gap:12px; margin: 14px 0 8px; }
.store { display:inline-flex; flex-direction:column; justify-content:center; min-width: 170px; padding: 8px 18px; background: var(--ink); color:#fff;
  border-radius: 14px; border:3px solid var(--ink); box-shadow: 4px 4px 0 var(--pink); text-decoration:none; font-size: 21px; font-weight:700; line-height:1.15; }
.store small { font-size: 11px; font-weight:600; letter-spacing:.5px; text-transform: uppercase; opacity:.85; }
.store:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--pink); }
.store.soon { background:#fff; color: var(--ink); box-shadow: 4px 4px 0 var(--cyan); opacity:.85; }
.shots { display:flex; gap:14px; overflow-x:auto; padding: 4px 4px 18px; margin: 0 0 14px; scroll-snap-type: x mandatory; }
.shots img { flex: 0 0 auto; width: 180px; height:auto; border-radius: 18px; border:4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); scroll-snap-align: start; background:#fff; }
.steps { padding-left: 22px; } .steps li { margin-bottom: 8px; }
details { border-top: 2px dashed rgba(27,21,48,.25); padding: 10px 0; }
details:first-of-type { border-top: 0; }
summary { cursor:pointer; font-weight:700; font-size: 18px; }
details p { margin: 8px 0 4px; }
h2.step { font-family: Fredoka, system-ui, sans-serif; font-weight:700; font-size: 21px; margin: 22px 0 4px; letter-spacing:0; }
footer a { color:#fff; }
@media (max-width: 480px) { .store { min-width: 0; flex: 1 1 140px; font-size: 18px; } .card { padding: 18px 16px 8px; } }
