:root{--ink:#000;--paper:#FFFDF5;--yellow:#FFE14D;--pink:#FF5CA8;--purple:#A78BFA}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
main{max-width:760px;margin:0 auto;padding:32px 20px 64px}
header .logo{display:inline-block;background:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:6px 14px;font-weight:800;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
h1{font-size:40px;line-height:1.05;margin:28px 0 8px;font-weight:800;text-transform:uppercase}
h2{font-size:20px;margin:32px 0 8px;text-transform:uppercase;border-bottom:3px solid var(--ink);padding-bottom:4px}
.card{background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:6px;padding:16px 18px;margin:16px 0}
.card.yellow{background:var(--yellow)}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:2px solid var(--ink);padding:8px;text-align:left;vertical-align:top}
th{background:var(--yellow)}
a{color:var(--ink);font-weight:700}
.muted{font-size:13px}
footer{margin-top:40px;font-size:13px}

/* Landing page */
.hero{display:grid;gap:24px;align-items:center;margin-top:28px}
.hero img.icon{width:96px;height:96px;border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
.hero h1{font-size:52px;margin:0}
.btn{display:inline-block;background:var(--pink);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:6px;padding:14px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.btn:active{transform:translate(5px,5px);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:24px 0}
.grid .card{margin:0}
.card h3{margin:0 0 6px;text-transform:uppercase;font-size:17px}
.c-yellow{background:var(--yellow)}.c-pink{background:var(--pink)}.c-purple{background:var(--purple)}.c-green{background:#2BEE6C}.c-blue{background:#4DA3FF}
.shots{display:flex;gap:16px;overflow-x:auto;padding:4px 10px 14px 0;scroll-snap-type:x mandatory}
.shots img{height:440px;border:3px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);scroll-snap-align:start}
nav.links a{margin-right:14px}