@font-face {
  font-family:Comic;
  src:url('/font.ttf') format('truetype');
  font-display:swap;
}
:root {
  color-scheme:light dark;
  --paper:#f7f6ee;
  --ink:#20382e;
  --muted:#5d695f;
  --line:#c9d0be;
  --accent:#dfe8c8;
  --card:#fffef9;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Comic,monospace;
  font-size:17px;
  line-height:1.65;
}
a {
  color:inherit;
  text-underline-offset:.25em;
}
a:hover {
  text-decoration-thickness:2px;
}
a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px;
}
header,main,footer {
  width:min(1100px,100% - 40px);
  margin-inline:auto;
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-block:28px;
  border-bottom:1px solid var(--line);
}
header a {
  font-size:.9rem;
}
.wordmark {
  font-size:1.1rem;
  text-decoration:none;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font-size:clamp(2.5rem,8.5vw,6.3rem);
  line-height:1.1;
  letter-spacing:-.045em;
  margin-bottom:30px;
}
h1 span,.wordmark span {
  color:var(--muted);
}
h2 {
  font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.3;
}
h3 {
  font-size:1.6rem;
  line-height:1.25;
  margin-bottom:12px;
}
.intro {
  padding-block:clamp(60px,10vw,120px);
}
.eyebrow,.muted {
  color:var(--muted);
}
.eyebrow {
  font-size:.85rem;
  margin-bottom:24px;
}
.lead {
  max-width:800px;
  font-size:clamp(1.2rem,2.8vw,1.65rem);
  line-height:1.55;
  margin-bottom:34px;
}
.github {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--ink);
  color:var(--paper);
  padding:14px 20px;
  border-radius:4px;
  text-decoration:none;
  font-size:1rem;
}
.github svg {
  flex-shrink:0;
}
.section-heading {
  display:flex;
  gap:20px;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-bottom:24px;
}
.section-heading>span {
  color:var(--muted);
  white-space:nowrap;
  font-size:.85rem;
}
.section-heading h2 {
  margin:0;
}
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:28px;
}
.game-card {
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  max-width:700px;
}
.game-card img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
  background:var(--accent);
}
.game-card>div {
  padding:28px;
}
.game-card p {
  color:var(--muted);
  margin-bottom:24px;
}
.game-card span {
  font-size:.9rem;
  text-decoration:underline;
  text-underline-offset:.3em;
}
.game-card:hover {
  border-color:var(--ink);
}
footer {
  border-top:1px solid var(--line);
  margin-top:90px;
  padding-block:28px 40px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  font-size:.8rem;
  color:var(--muted);
}
footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.legal {
  max-width:780px;
  margin:60px auto;
}
.legal h1 {
  font-size:clamp(2rem,6vw,3.4rem);
}
.legal section {
  margin-top:42px;
}
.legal h2 {
  font-size:1.4rem;
}
.legal li {
  margin-bottom:16px;
}
p,li,a {
  overflow-wrap:anywhere;
}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--paper);
  padding:12px;
}
.skip:focus {
  top:8px;
}
@media(min-width:800px) {
  footer nav {
    margin-left:auto;
  }
}
@media(prefers-color-scheme:dark) {
  :root {
    --paper:#171e1b;
    --ink:#e0e8cd;
    --muted:#aab6a6;
    --line:#424e43;
    --accent:#2d3b2e;
    --card:#202a23;
  }
}