:root {
  --sky: #e9f1f3;
  --sky-deep: #d6e4e8;
  --ink: #12394a;
  --ink-soft: #3f6372;
  --sea: #1f5fa0;
  --paper: #ffffff;
  --line: rgba(18, 57, 74, 0.16);
  --focus: #1f5fa0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #0e2a36;
    --sky-deep: #12333f;
    --ink: #e6eff2;
    --ink-soft: #a9c0c8;
    --sea: #5d9bdc;
    --paper: #143744;
    --line: rgba(230, 239, 242, 0.16);
    --focus: #f2b938;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--sea); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-head { padding: 1.5rem 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 2rem; height: 2rem; display: block; }
.nav { display: flex; gap: 1.25rem; font-size: 1rem; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* Hero */
.hero { padding: 3rem 0 4.5rem; overflow: hidden; }
.hero h1 {
  margin: 0;
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 0.005em;
  font-stretch: 92%;
}
.hero h1 span { display: block; }
.hero .lede { max-width: 34rem; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.45; color: var(--ink-soft); margin: 2.5rem 0 0; }

/* Sections */
section { padding: 4rem 0; border-top: 1px solid var(--line); }
section h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 1.5rem; font-weight: 750; }
.split { display: grid; gap: 0.5rem; }
@media (min-width: 52rem) { .split { grid-template-columns: 18rem 1fr; gap: 4rem; } }

/* Games list */
.games { list-style: none; margin: 0; padding: 0; }
.game { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.game:first-child { padding-top: 0; }
.game svg { width: 3rem; height: 1.6rem; margin-top: 0.35rem; }
.game-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: block; margin-top: 0.2rem; }
.game h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.015em; }
.game p { margin: 0.25rem 0 0; color: var(--ink-soft); max-width: 36rem; }
.status { display: inline-block; margin-top: 0.6rem; font-size: 0.9rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sky-deep); color: var(--ink); }

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1rem; }

/* Footer */
.site-foot { padding: 3rem 0 4rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.site-foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* Policy page */
.doc { padding: 2.5rem 0 4rem; }
.doc h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.035em; margin: 0 0 0.75rem; font-weight: 800; }
.doc .updated { color: var(--ink-soft); margin: 0 0 2.5rem; }
.doc h2 { font-size: 1.45rem; margin: 2.5rem 0 0.75rem; letter-spacing: -0.015em; }
.doc p, .doc ul { max-width: 40rem; }
.doc li { margin-bottom: 0.4rem; }

@media (max-width: 30rem) {
  .nav { gap: 0.9rem; }
  .brand span { display: none; }
}