:root {
  --night: #1b1530;
  --night-2: #261d44;
  --paper: #fff6e6;
  --muted: #cfc4e6;
  --sun: #ffd15c;
  --pink: #ff8bb8;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60rem 40rem at 50% -10%, #4a3470 0, transparent 70%),
    radial-gradient(circle at 0% 100%, #3b1f45 0, transparent 30rem),
    var(--night);
  color: var(--paper);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 22px 22px;
}
a { color: inherit; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 20px;
}
.logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; }
.logo span { color: var(--sun); }
.dice { font-size: 1.6rem; display: inline-block; animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.hero { text-align: center; padding: clamp(3rem, 10vh, 6.5rem) 0 clamp(2.5rem, 7vh, 4.5rem); }
.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sun);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
h1 {
  font-size: clamp(3.4rem, 12vw, 7.6rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.055em;
  margin: 0;
}
h1 em { font-style: normal; color: var(--pink); }
.lede {
  color: var(--muted);
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 560px;
  margin: 1.6rem auto 2rem;
}
.cta {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  background: var(--sun);
  color: var(--night);
  font-weight: 800;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 0 #c99a20;
  transition: transform .12s, box-shadow .12s;
}
.cta:hover { transform: translateY(2px); box-shadow: 0 4px 0 #c99a20; }
.cta:active { transform: translateY(6px); box-shadow: 0 0 0 #c99a20; }

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
  padding: 10px 0 30px;
  scroll-margin-top: 20px;
}
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c);
  color: var(--ink);
  border-radius: 22px;
  padding: 22px 22px 18px;
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 10px 0 color-mix(in srgb, var(--c) 55%, #000), 0 24px 50px #0007;
  transition: transform .18s ease, box-shadow .18s ease;
}
.box:hover, .box:focus-visible {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 16px 0 color-mix(in srgb, var(--c) 55%, #000), 0 30px 60px #0009;
  outline: none;
}
.lid { display: flex; justify-content: space-between; align-items: flex-start; }
.emoji {
  font-size: 2.3rem;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #ffffff70;
  border-radius: 18px;
}
.badge {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--c);
}
.badge.building { background: transparent; color: var(--ink); border: 2px dashed var(--ink); }
.box h3 { font-size: 2rem; letter-spacing: -.04em; line-height: 1; margin: 18px 0 6px; }
.tagline { font-weight: 800; margin: 0 0 10px; }
.blurb { line-height: 1.45; margin: 0 0 18px; opacity: .85; flex: 1; }
.meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding-top: 12px;
  font-size: .9rem;
}
.box.empty {
  --c: transparent;
  --ink: var(--muted);
  border: 3px dashed #ffffff35;
  box-shadow: none;
  transform: none;
  justify-content: center;
}
.box.empty .emoji { background: #ffffff12; }

.how { padding: 50px 0 20px; }
.how h2 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.045em; margin: 0 0 22px; text-align: center; }
.how ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.how li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--night-2);
  border: 1px solid #ffffff20;
  border-radius: 18px;
  padding: 18px;
  line-height: 1.45;
  color: var(--muted);
}
.how li strong { color: var(--paper); }
.how li b {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper);
  color: var(--night);
  font-size: 1.2rem;
}

footer { text-align: center; color: var(--muted); padding: 40px 20px 50px; font-size: .95rem; }
footer b { color: var(--paper); }

@media (max-width: 520px) {
  .box { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dice { animation: none; }
  .box, .cta { transition: none; }
}