/* RedmonLabs — the studio shell.
   Deliberately quiet and typographic. The studio does not have a colour; the GAMES
   have colours. A second game arrives later and must be able to look nothing like
   Fall of Shot without either of them looking like a guest on this site.

   Per-game skinning works by REDEFINING THE TOKENS BELOW, nothing else. A skin file
   is a :root block and (at most) a handful of additions. If a skin ever needs to
   restyle a component, the component belongs here instead. */

:root{
  --paper:#FBF9F6;
  --ink:#16212B;
  --ink-soft:#4A5C6B;
  --rule:#E3DDD4;
  --card:#FFFFFF;
  --accent:#2F5D7C;
  --accent-soft:#EAF1F6;
  --shadow:0 1px 2px rgba(22,33,43,.06), 0 8px 24px rgba(22,33,43,.05);
  --measure:44rem;
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#11181F;
    --ink:#EDF2F6;
    --ink-soft:#A3B4C2;
    --rule:#243240;
    --card:#18222C;
    --accent:#8FBEDF;
    --accent-soft:#1B2733;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.65 var(--sans);
  font-synthesis-weight:none;
}

/* A skip link, because the masthead sits before the content on every page and
   keyboard users should not have to walk it three times. */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--card);color:var(--ink);
  padding:10px 14px;border:2px solid var(--accent);border-radius:6px;z-index:10;
}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 22px}

a{color:var(--accent);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

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

/* ---- masthead ---------------------------------------------------------- */

.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:16px;padding-bottom:16px;
}
.wordmark{
  font:600 15px/1 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.wordmark:hover{color:var(--accent)}
.masthead nav{display:flex;gap:18px;font-size:15px}
.masthead nav a{color:var(--ink-soft);text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--accent);text-decoration:underline}

/* ---- type -------------------------------------------------------------- */

h1{
  font:400 clamp(30px,5.4vw,42px)/1.15 var(--serif);
  margin:0 0 14px;letter-spacing:-.01em;
}
h2{font:600 22px/1.3 var(--sans);margin:44px 0 10px;letter-spacing:-.005em}
h3{font:600 17px/1.4 var(--sans);margin:26px 0 6px}
p{margin:0 0 16px;max-width:38rem}
.lead{font-size:19px;color:var(--ink-soft);max-width:36rem}
.eyebrow{
  font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}

main{padding:56px 0 24px}
section{margin:0 0 8px}

ul{padding-left:20px;margin:0 0 16px;max-width:38rem}
li{margin:6px 0}
li::marker{color:var(--accent)}

/* ---- cards ------------------------------------------------------------- */

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:22px 24px;
  margin:20px 0;
  box-shadow:var(--shadow);
}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* A card that carries a game's own colours on the neutral hub. It sets its own
   tokens inline (see index.html) so the hub stays skin-free. */
.card--game{display:block;text-decoration:none;color:inherit;transition:transform .12s ease}
.card--game:hover{transform:translateY(-2px)}

/* Deliberately NOT scoped to .card--game. They were, and the second card on the
   hub — the one that is a plain .card because it has nowhere to link to yet —
   silently lost its styling. Caught by rendering the page, not by reading it. */
.card-title{font:600 20px/1.3 var(--sans);margin:0 0 6px;letter-spacing:-.005em}
.card-meta{
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 12px;
}

/* ---- the promise panel -------------------------------------------------- */
/* Used on the hub and on every game page. It is the same claim in both places on
   purpose: it is a studio-wide rule, not a Fall of Shot feature. */

.promise{
  background:var(--accent-soft);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:10px;
  padding:20px 24px;
  margin:26px 0;
}
.promise h2,.promise h3{margin-top:0}
.promise p:last-child,.promise ul:last-child{margin-bottom:0}

/* ---- Q&A --------------------------------------------------------------- */

.qa{border-top:1px solid var(--rule);padding-top:20px;margin-top:20px}
.qa:first-of-type{border-top:0}
.qa h3{margin-top:0;font-size:18px}

/* ---- footer ------------------------------------------------------------ */

footer{
  border-top:1px solid var(--rule);
  margin-top:56px;padding:24px 0 56px;
  color:var(--ink-soft);font-size:15px;
}
footer p{margin:0 0 6px;max-width:none}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent)}