:root{
  --felt:#10382E;
  --felt-deep:#0A241D;
  --chalk:#EFE9DA;
  --line:#3E6B5C;
  --cue:#E8B33C;
  --muted:#A8C0B4;

  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:62ch;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--felt);
  color:var(--chalk);
  font-family:var(--body);
  font-size:clamp(1.0625rem,.55vw + .95rem,1.1875rem);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--cue);
  outline-offset:3px;
  border-radius:1px;
}

.wrap{
  max-width:74rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── masthead ─────────────────────────── */
.masthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.5rem;
  flex-wrap:wrap;
}
.mark{
  font-family:var(--display);
  font-size:1.125rem;
  letter-spacing:.06em;
  text-decoration:none;
}
.mark span{color:var(--cue)}
.masthead nav{
  display:flex;
  gap:1.75rem;
  font-size:.95rem;
}
.masthead nav a{
  text-decoration:none;
  color:var(--muted);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--chalk);border-bottom-color:var(--cue)}

/* ── hero ─────────────────────────────── */
.hero{
  padding-block:clamp(3rem,9vw,7rem) clamp(2rem,5vw,4rem);
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  /* 12vw keeps "THE DEVELOPMENTS" (~7.2em wide) on one line inside the gutters */
  font-size:clamp(2.5rem,12vw,9rem);
  line-height:.86;
  letter-spacing:-.01em;
  margin:0;
  text-transform:uppercase;
}
.hero p{
  max-width:34ch;
  margin:1.75rem 0 0;
  font-size:clamp(1.15rem,1.4vw + .85rem,1.6rem);
  line-height:1.4;
  color:var(--chalk);
  font-weight:300;
}

/* the one moving thing: a ball rolls the baseline, leaving a chalk trail */
.court{
  position:relative;
  height:34px;
  margin-top:clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.court::before{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  height:1px;
  width:100%;
  background:var(--cue);
  transform-origin:left center;
  transform:scaleX(0);
  animation:trail 1900ms cubic-bezier(.22,.7,.3,1) 250ms forwards;
}
.ball{
  position:absolute;
  bottom:1px;
  left:0;
  width:22px;height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#F7D98A,var(--cue) 55%,#B07F14);
  animation:roll 1900ms cubic-bezier(.22,.7,.3,1) 250ms forwards;
}
.ball::after{
  content:"";
  position:absolute;
  inset:6px 5px auto auto;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(16,56,46,.55);
}
@keyframes roll{
  from{left:0;transform:rotate(0)}
  to{left:calc(100% - 22px);transform:rotate(1080deg)}
}
@keyframes trail{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .court::before{animation:none;transform:scaleX(1)}
  .ball{animation:none;left:calc(100% - 22px)}
}

/* ── section frame ────────────────────── */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.section-head{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 2.5rem;
  padding-bottom:.65rem;
  border-bottom:1px solid var(--line);
}

/* ── games: a lane list, not cards ────── */
.lane{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:.75rem 2.5rem;
  align-items:start;
  padding-block:2.25rem;
  border-bottom:1px solid var(--line);
}
.lane:first-of-type{border-top:1px solid var(--line)}
.lane h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:.95;
  margin:0;
  text-transform:uppercase;
}
.lane .status{
  display:block;
  margin-top:.6rem;
  font-style:italic;
  font-size:.95rem;
  color:var(--cue);
}
.lane p{margin:0;color:var(--muted);max-width:44ch}
.btn{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--body);
  font-size:1rem;
  text-decoration:none;
  padding:.6rem 1.35rem;
  border:1px solid var(--cue);
  color:var(--cue);
  background:transparent;
  cursor:pointer;
  transition:background 140ms ease,color 140ms ease;
}
.btn:hover{background:var(--cue);color:var(--felt-deep)}
.btn--solid{background:var(--cue);color:var(--felt-deep);font-weight:500}
.btn--solid:hover{background:#F2C459}
.btn--quiet{border-color:var(--line);color:var(--muted)}
.btn--quiet:hover{background:var(--line);color:var(--chalk)}

@media (max-width:52rem){
  .lane{grid-template-columns:1fr;gap:1rem}
}

/* ── studio note ──────────────────────── */
.note p{max-width:var(--measure);margin:0 0 1.15rem}
.note p:last-child{margin-bottom:0}

/* ── press ────────────────────────────── */
.press{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2.5rem 3.5rem;
}
.press h3{
  font-family:var(--body);
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 .85rem;
}
.press ul{margin:0;padding-left:1.1rem;color:var(--muted)}
.press li{margin-bottom:.4rem}
.press a.contact{color:var(--cue);overflow-wrap:anywhere}

/* ── signup ───────────────────────────── */
.signup{
  background:var(--felt-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.signup .inner{max-width:var(--measure)}
.signup h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem,4vw,2.75rem);
  text-transform:uppercase;
  margin:0 0 .75rem;
  line-height:1;
}
.signup p{margin:0 0 1.75rem;color:var(--muted)}
.field{display:flex;gap:.75rem;flex-wrap:wrap}
.field input{
  flex:1 1 15rem;
  min-width:0;
  font-family:var(--body);
  font-size:1rem;
  padding:.6rem .9rem;
  color:var(--chalk);
  background:transparent;
  border:1px solid var(--line);
}
.field input::placeholder{color:#7F9A8D}
.field input:focus{border-color:var(--cue);outline:none}

/* ── footer ───────────────────────────── */
footer{
  padding-block:3rem 4rem;
  color:var(--muted);
  font-size:.92rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
footer nav{display:flex;gap:1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--chalk)}

/* ── document pages (privacy, support) ── */
.doc{padding-block:clamp(2.5rem,7vw,5rem) clamp(3.5rem,8vw,6rem)}
.doc h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,8vw,5rem);
  line-height:.95;
  text-transform:uppercase;
  margin:0 0 .75rem;
}
.doc .meta{margin:0 0 3rem;color:var(--muted);font-style:italic}
.doc h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:3rem 0 1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
  max-width:var(--measure);
}
.doc h3{font-weight:600;font-size:1.05rem;margin:1.75rem 0 .5rem}
.doc p,.doc ul,.doc dl{max-width:var(--measure);margin:0 0 1.15rem}
.doc ul{padding-left:1.2rem}
.doc li{margin-bottom:.45rem}
.doc a{color:var(--cue);overflow-wrap:anywhere}
.doc strong{font-weight:600}
.doc dt{font-weight:600;margin-top:1.5rem}
.doc dd{margin:.35rem 0 0;color:var(--muted)}
.callout{
  max-width:var(--measure);
  padding:1.25rem 1.5rem;
  margin:0 0 2rem;
  border:1px solid var(--line);
  background:var(--felt-deep);
}
.callout p:last-child{margin-bottom:0}
.masthead nav a[aria-current="page"]{color:var(--chalk);border-bottom-color:var(--cue)}
.doc code{font-size:.92em;padding:.1em .35em;background:var(--felt-deep);border:1px solid var(--line);word-break:break-all}
.doc ol{padding-left:1.3rem;margin:.75rem 0}
.doc dd ol li{margin-bottom:.3rem}