/* The palette is lifted from the game rather than invented for the web, so the
   site and the launch screen are recognisably the same product. Ground is the
   key art's own sampled edge colour (#07080D) -- the same value BootScreen.cs
   paints behind the contained artwork. */
:root {
  --ground: #07080d;
  --panel: #0d0f18;
  --ink: #e3dbcc;
  --muted: #8d8778;
  --gold: #f2e1a1;
  --rule: #1d1f2b;
  --measure: 42rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }

/* The hero image is the artwork's own aspect (2.21:1) and is never cropped,
   for the reason the launch screen does the same: cover costs the crown its
   outer points on any viewport narrower than the art. */
.hero {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sits over the art rather than under it, matching where the launch screen
   puts the mark: in the band of empty sky between the crown and the board.

   One positioned block holding both lines, rather than two lines each pinned
   to their own percentage. Two percentages look right at the width they were
   chosen at and collide at every other one -- the mark scales with the
   viewport and the gap under it did not, so at 1280px the tagline was drawn
   into the wordmark's descenders. A margin cannot do that. */
.hero .mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 6.2vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
}

.hero .tagline {
  margin: 0.95em 0 0;
  font-size: clamp(0.72rem, 1.9vw, 1.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Not --muted, which is the colour this takes everywhere else on the site.
     Here it is drawn over the lit hexes of the board rather than over a flat
     panel, and grey-on-grey went illegible at the left end of the line where
     the art is brightest. */
  color: #cdc4b2;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.4rem 5rem;
}

h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}

h2:first-child { margin-top: 0; }

p, li { color: var(--ink); }

ul { padding-left: 1.25rem; }

li { margin: 0.35rem 0; }

.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink);
}

.note {
  margin-top: 2.5rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 0.95rem;
}

.page-title {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.updated {
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

nav {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.6rem 1.4rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

nav a { margin: 0 0.6rem; }

/* Below roughly a phone's landscape width the artwork's centre is too small to
   carry text over it, so the mark moves out of the picture and under it. */
@media (max-width: 600px) {
  .hero .mark { position: static; padding: 1.6rem 1rem 0; }
}

/* The inner pages are the ones a store reviewer opens directly, from a link in
   App Store Connect rather than from the home page. Without this they open as
   unbranded text on a dark ground, with the only way back at the very bottom. */
.bar {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 1.4rem;
  text-align: center;
}

.bar a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
}

.bar a:hover { color: #fff; }