:root {
  --poke-red:#ee1515;
  --poke-red-dark:#b91010;
  --poke-yellow:#ffcb05;
  --poke-yellow-dark:#f0a500;
  --poke-blue:#3b4cca;
  --poke-blue-dark:#2a3999;
  --poke-green:#2e8b57;
  --poke-navy:#1b1e52;
  --poke-cream:#fff9e6;
  --ink:var(--poke-navy);
  --muted:#5f648a;
  --line:rgba(27,30,82,0.12);
  --line-strong:#1b1e52;
  --shadow:0 18px 50px rgba(27,30,82,0.12);
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:14px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font:16px/1.55 "Space Grotesk","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,203,5,0.28), transparent 30%),
    radial-gradient(circle at 92% 4%, rgba(238,21,21,0.18), transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(59,76,202,0.16), transparent 32%),
    linear-gradient(180deg, #fffbe8 0%, #fff4d6 100%);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 14px 14px, rgba(27,30,82,0.08) 2px, transparent 3px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.45), transparent 75%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.45), transparent 75%);
}

.shell {
  width:min(960px, calc(100vw - 32px));
  margin:0 auto;
  padding:28px 0 56px;
  display:grid;
  gap:22px;
}

.shell--wide {
  width:min(1180px, calc(100vw - 32px));
}

.panel {
  background:#ffffff;
  border:2px solid var(--poke-navy);
  border-radius:var(--r-xl);
  box-shadow:4px 4px 0 var(--poke-navy);
  padding:26px 28px;
  position:relative;
  overflow:hidden;
}

.panel--red { border-top:6px solid var(--poke-red); }
.panel--yellow { border-top:6px solid var(--poke-yellow); }
.panel--blue { border-top:6px solid var(--poke-blue); }
.panel--gold { border-top:6px solid var(--poke-yellow-dark); }
.panel--green { border-top:6px solid var(--poke-green); }

.eyebrow {
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  font-weight:900;
  color:var(--poke-red);
}

.topbar {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:18px;
  align-items:center;
}

.topbar::after {
  content:"";
  position:absolute;
  right:-54px;
  top:-54px;
  width:180px;
  height:180px;
  border-radius:50%;
  opacity:0.10;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 14%, transparent 14.5%),
    linear-gradient(180deg, var(--poke-red) 0 50%, #fff 50% 100%);
  border:5px solid var(--poke-navy);
}

.pokeball-mark {
  width:60px;
  height:60px;
  flex:0 0 60px;
  filter:drop-shadow(0 6px 12px rgba(238,21,21,0.28));
}

.topbar .site-header-copy {
  display:grid;
  gap:10px;
  min-width:0;
}

.topbar .site-header-main {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}

.topbar .brand-block {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}

.topbar .brand-word {
  font-family:"Bungee",sans-serif;
  color:var(--poke-navy);
  font-size:clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

.topbar .brand-word:hover {
  color:var(--poke-navy);
  text-decoration:none;
}

.topbar .brand-tag {
  color:var(--muted);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.topbar .nav-pills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.topbar .header-wordmark {
  display:block;
  width:min(46%, 360px);
  flex:0 0 auto;
}

.topbar .header-wordmark img {
  display:block;
  width:100%;
  height:auto;
}

.topbar .nav-pills a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--poke-navy);
  color:var(--poke-yellow);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-decoration:none;
  border:2px solid var(--poke-navy);
  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.topbar .nav-pills a:hover {
  background:var(--poke-red);
  border-color:var(--poke-red);
  color:#fff;
  text-decoration:none;
}

.topbar .nav-pills a[aria-current="page"] {
  background:#fff;
  color:var(--poke-navy);
}

.site-footer {
  width:min(960px, calc(100vw - 32px));
  margin:18px auto 36px;
  color:var(--muted);
  font-size:0.84rem;
  line-height:1.55;
  display:grid;
  gap:12px;
}

.site-footer--wide {
  width:min(1180px, calc(100vw - 32px));
}

.site-footer p { margin:0 0 8px; }
.site-footer a { color:var(--poke-navy); }

.site-footer-copy {
  display:grid;
  gap:4px;
}

.footer-socials {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

.footer-socials li {
  margin:0;
}

.social-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:2px solid var(--poke-navy);
  background:#fff;
  color:var(--poke-navy);
  box-shadow:2px 2px 0 var(--poke-navy);
  font-weight:700;
  font-size:0.78rem;
  text-decoration:none;
}

.social-link:hover {
  background:var(--poke-yellow);
  color:var(--poke-navy);
  text-decoration:none;
}

.social-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--poke-navy);
  color:var(--poke-yellow);
  font-size:0.65rem;
  font-weight:900;
  letter-spacing:0.02em;
  text-transform:uppercase;
  flex:0 0 22px;
}

@media (max-width:640px) {
  .shell {
    padding:18px 0 40px;
  }

  .panel {
    padding:22px 20px;
  }

  .pokeball-mark {
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .topbar .site-header-main {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .topbar .header-wordmark {
    width:min(100%, 280px);
    justify-self:start;
  }
}