:root {
  --ink: #18302a;
  --paper: #f0eddf;
  --acid: #d9eb74;
  --moss: #315849;
  --line: rgba(24, 48, 42, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Mono", monospace;
  overflow-x: hidden;
}
a { color: inherit; }
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
nav {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 4;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 600 20px "Fraunces", serif;
  letter-spacing: -.03em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--acid);
  background: var(--ink);
  font: 12px sans-serif;
}
.nav-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-meta i { width: 6px; height: 6px; border-radius: 50%; background: #6f9d4d; box-shadow: 0 0 0 4px rgba(111,157,77,.14); }
.hero {
  min-height: calc(100vh - 82px);
  padding: clamp(72px, 11vh, 130px) clamp(24px, 8vw, 124px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.kicker {
  margin: 0 0 20px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #728475;
}
h1 {
  margin: 0;
  max-width: 980px;
  font: 600 clamp(72px, 12vw, 170px)/.75 "Fraunces", serif;
  letter-spacing: -.075em;
}
h1 em { color: var(--moss); font-weight: 500; }
.intro {
  width: min(440px, 80vw);
  margin: 54px 0 0 38%;
  font: 500 12px/1.85 "DM Mono", monospace;
  color: #52665e;
}
.scroll-link {
  margin-top: 44px;
  margin-left: 38%;
  width: fit-content;
  font-size: 9px;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}
.scroll-link span { color: #719645; margin-right: 8px; }
.sun {
  position: absolute;
  right: -6vw;
  top: 4vh;
  width: min(39vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acid);
  z-index: -1;
  opacity: .8;
}
.sun:before, .sun:after, .sun span {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(24,48,42,.18);
  border-radius: 50%;
}
.sun:after { inset: 23%; }
.sun span { inset: 37%; }
.collection {
  padding: 110px clamp(24px, 5vw, 76px) 130px;
  background: var(--ink);
  color: #e9edda;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}
.section-heading .kicker { color: #8ea39a; }
h2 { margin: 0; font: 600 clamp(48px, 7vw, 90px)/.9 "Fraunces", serif; letter-spacing: -.055em; }
.section-heading > p { color: #899d94; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.game-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.game-card {
  grid-column: span 4;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(240,237,223,.15);
  text-decoration: none;
  background: #29473d;
}
.game-card.featured { grid-column: span 8; }
.game-card .card-bg { position: absolute; inset: 0; background-position: center; background-size: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.game-card:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(7,20,16,.88)); }
.game-card:hover .card-bg { transform: scale(1.045); }
.card-content { position: relative; z-index: 2; }
.card-index { position: absolute; z-index: 2; top: 28px; left: 28px; font-size: 9px; letter-spacing: .12em; }
.card-tag { display: inline-block; margin-bottom: 13px; color: var(--acid); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.game-card h3 { margin: 0; font: 600 clamp(36px, 4vw, 64px)/.9 "Fraunces", serif; letter-spacing: -.05em; }
.game-card p { max-width: 450px; margin: 18px 0 0; color: #c6d0c8; font-size: 10px; line-height: 1.7; }
.card-action { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.22); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.game-card.placeholder { background: #223831; cursor: default; }
.game-card.placeholder:after { background: rgba(12,29,24,.62); }
.placeholder-art { position: absolute; inset: 12%; border: 1px dashed rgba(217,235,116,.22); border-radius: 50%; }
.manifesto {
  min-height: 80vh;
  padding: 130px clamp(24px, 9vw, 150px);
  display: grid;
  align-content: center;
}
blockquote {
  margin: 0;
  font: 500 clamp(42px, 6.8vw, 96px)/1.04 "Fraunces", serif;
  letter-spacing: -.055em;
}
.principles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 66px; }
.principles span { border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
footer { min-height: 90px; padding: 0 clamp(24px, 5vw, 76px); border-top: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 800px) {
  .nav-meta { display: none; }
  .hero { justify-content: start; }
  h1 { font-size: clamp(64px, 19vw, 120px); margin-top: 5vh; }
  .intro, .scroll-link { margin-left: 0; }
  .sun { width: 72vw; right: -30vw; top: 28vh; }
  .game-card, .game-card.featured { grid-column: 1 / -1; min-height: 450px; }
  .section-heading { align-items: start; }
  footer { gap: 20px; }
}