:root{
  --plum:#2E2235; --plum-2:#45354F; --sun:#FFC24B; --cream:#FFF6EC; --coral:#F07A6A; --mint:#7FD1C7; --pink:#F2809C;
  --ink:var(--plum); --muted:#6B5D73;
  --display:"Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 1.25rem/1 var(--display)}
.brand img{width:34px;height:auto}
.top nav a{font:500 1rem var(--display);text-decoration:none;margin-left:22px}
.top nav a:hover{text-decoration:underline}

/* Hero: the mule is the one bold thing on the page */
.hero{background:var(--sun);overflow:hidden;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;min-height:min(78vh,620px)}
.hero h1{font:700 clamp(3.2rem,9vw,7.2rem)/.92 var(--display);letter-spacing:-.02em;margin:0 0 18px}
.hero p{font:500 clamp(1.15rem,2.2vw,1.45rem)/1.4 var(--display);max-width:26ch;margin:0 0 56px}
.hero .copy{align-self:center;padding:64px 0 0}
.hero .mule{width:100%;max-width:460px;justify-self:end;display:block;margin-bottom:-4px;
  transform-origin:50% 100%;animation:nod 1.1s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes nod{from{transform:translateY(40px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero .mule{animation:none}}

/* Games */
.games{padding-top:88px;padding-bottom:40px}
.games h2,.doc h1{font:600 clamp(2rem,4vw,2.8rem)/1.1 var(--display);margin:0 0 8px}
.games .lede{color:var(--muted);margin:0 0 40px;max-width:60ch}
.game{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;padding:26px 0;border-top:2px solid #EADBCB}
.game:last-child{border-bottom:2px solid #EADBCB}
.game svg{width:150px;height:110px;display:block}
.game h3{font:600 1.6rem/1.15 var(--display);margin:0 0 4px}
.game p{margin:0;color:var(--muted);max-width:52ch}
.soon{font:500 .95rem var(--display);padding:10px 16px;border-radius:999px;background:var(--plum);color:#fff;white-space:nowrap}

/* Docs */
.doc{padding-top:56px;padding-bottom:72px;max-width:72ch}
.doc .updated{color:var(--muted);margin:0 0 32px}
.doc h2{font:600 1.45rem/1.25 var(--display);margin:40px 0 8px}
.doc h3{font:600 1.15rem/1.3 var(--display);margin:24px 0 4px}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
.mail{display:inline-block;font:600 1.3rem var(--display);background:var(--sun);padding:12px 20px;border-radius:14px;text-decoration:none;margin:8px 0 8px}
.mail:hover{background:#FFD27A}
.todo{background:#FFE1DA;color:#8A2E22;border-radius:4px;padding:0 4px;font-weight:700}

/* Footer */
footer{background:var(--plum);color:#E9DCEB;padding:36px 0;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav a{margin-right:22px;text-decoration:none;font:500 1rem var(--display);color:#fff}
footer nav a:hover{text-decoration:underline}
footer small{font-size:.9rem}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero .copy{padding:40px 0 0}
  .hero p{margin-bottom:24px}
  .hero .mule{max-width:300px;justify-self:center}
  .game{grid-template-columns:96px 1fr;gap:18px}
  .game svg{width:96px;height:72px}
  .soon{grid-column:2;justify-self:start}
  .top nav a{margin-left:16px}
}