@font-face{font-family:"Outfit";src:url(assets/fonts/Outfit.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--cream:#FFF9F0;--ink:#1C1915;--char:#2B2620;--shade:#E2DAC6;--gold:#FFB21E}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);line-height:1.5}
a{color:inherit}
a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero: Nikki + wordmark (transparent PNG) over a CSS-drawn band.
   Band sits at 59.8%-88.2% (just below the chest and paw edge in the art) of the art height, matching the original banner. */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(circle,#EFE2CB 1.6px,transparent 2.2px) 0 0/24px 24px,var(--cream)}
.hero::before{content:"";position:absolute;left:0;right:0;top:59.8%;height:28.4%;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 22px,#FFBC38 22px 44px);
  box-shadow:0 10px 24px -12px rgba(28,25,21,.35)}
.hero::after{content:"";position:absolute;left:0;right:0;top:88.2%;height:12px;
  background:repeating-conic-gradient(var(--ink) 0 25%,var(--cream) 0 50%) 0 0/12px 12px;opacity:.9}
.hero img{position:relative;z-index:1;display:block;width:100%;max-width:1500px;height:auto;margin:0 auto}
.hero h1{z-index:2}
/* Narrow screens: crop the empty cream sides so Nikki stays big */
@media (max-width:40em){.hero img{height:min(240px,62vw);object-fit:cover;object-position:center}}
.lead{text-align:center;font-size:clamp(1.15rem,2.8vw,1.6rem);font-weight:500;padding:8px 24px 0}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;padding:48px 0 56px;list-style:none}
.card{position:relative;background:#fff;border:2px solid var(--shade);border-radius:20px;padding:0 28px 28px;overflow:hidden}
/* Game art behind the top of each card, fading into white under the text */
.card::before{content:"";display:block;margin:0 -28px -44px;aspect-ratio:23/10;background:var(--art) center top/100% auto no-repeat;-webkit-mask-image:linear-gradient(#000 50%,transparent 96%);mask-image:linear-gradient(#000 50%,transparent 96%)}
.card > *{position:relative}
.card-racers{--art:url(assets/card-racers.jpg)}
.card-islands{--art:url(assets/card-islands.jpg)}
.card h3{font-size:1.6rem;line-height:1.2;margin:12px 0 6px}
.tag{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--gold);padding:4px 10px;border-radius:999px}

.site-footer{border-top:2px solid var(--shade);padding:32px 24px 48px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.socials{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.socials a{display:inline-block;padding:10px 18px;border:2px solid currentColor;border-radius:999px;font-weight:600;text-decoration:none}
.socials a:hover{background:var(--ink);color:var(--cream)}
.contact{font-weight:500}
.copy{width:100%;font-size:.9rem;color:#5c5346}

@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.hero img{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}

/* 404 */
.notfound{text-align:center;padding:48px 24px 64px}
.notfound h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:8px}
.notfound a{font-weight:600}