/*
  The app's own type and palette, so the page a friend lands on looks like the
  thing they are about to install rather than a generic redirect.

  Both faces are the ones Mettle embeds (paseito/Shared/Fonts in the app repo),
  subset to Latin + the punctuation this copy uses: 13KB for the pair, down from
  145KB of TTF, which matters on a page that redirects after two seconds.
*/
@font-face {
  font-family: "Jersey 20";
  src: url("/fonts/Jersey20-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* `-r2` is the second character set, not a second cut of the face: /hunts named
   three monsters with an umlaut in them and put a `3\00d7` in a table, and a
   filename served `immutable` for a year cannot quietly change its bytes — every
   browser that has been here would hold the old subset until 2027. A different
   character set is a different URL. fonts/README.md has the set and the command. */
@font-face {
  font-family: "Pixel Operator";
  src: url("/fonts/PixelOperator-Bold-r2.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pixel Operator";
  src: url("/fonts/PixelOperator-r2.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #1a1714;
  --line: #2a2622;
  /* The app's Pixel.muted is #9a8f7a, but the app draws every muted line in
     *bold*. At the regular weight the same grey goes faint, so secondary copy
     here is a darker one — same job, matched for the lighter strokes. */
  --muted: #7a6f5d;
  --parchment: #f4ecd9;
}

body {
  box-sizing: border-box;
  /* Full height, so the footer has a bottom to sit against on a short page.
     dvh over vh because mobile Safari's toolbars make vh a lie. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  padding: 64px 24px 40px;
  /* 20px is the app's smallest body size (Pixel.bodySmall). Pixel Operator's
     outlines are pixel-aligned, so sizes the app itself uses stay crisp. */
  font: 700 20px/1.5 "Pixel Operator", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: var(--parchment);
  text-align: center;
}

/* The app icon, served at 3x the display size so it stays sharp on a phone. */
.logo {
  display: block;
  width: 140px;
  height: 140px;
  /* A 4px rule at 10% black: the icon's own background is the same parchment as
     the page, so without one it has no edge and reads as art floating rather
     than as the app's mark. Square, like every stroke in the game. */
  border: 4px solid rgba(0, 0, 0, 0.1);
  /* Rounded like an app icon rather than square like the game's cards — this is
     the mark, and it is the shape people will meet again on a home screen. */
  border-radius: 20px;
  margin: 0 auto 12px;
}

/* The splash screen's wordmark: Jersey 20, the display face Mettle uses for its
   name (Pixel.jersey, SplashView). */
.wordmark {
  font: 400 64px/1 "Jersey 20", "Pixel Operator", Georgia, serif;
  margin: 0 0 6px;
  letter-spacing: 1px;
}

/* The name, then what it is, then why — three lines that travel together and
   set nowhere else on the page. What it *is* stays in ink and the tagline goes
   muted, so the eye reads down the lockup rather than across two equal lines.

   The kicker is Jersey 20 as well, at half the wordmark: the two lines are one
   lockup and read as one, which they did not while the second was set in the
   body face. Jersey's strokes are thin and its x-height small, so at the 20px
   the rest of the page uses it would have gone quiet rather than subordinate —
   32px is the size at which it sits *under* the name instead of behind it. The
   tagline stays Pixel Operator, which is where the lockup ends and copy
   begins. */
.kicker {
  font: 400 32px/1.1 "Jersey 20", "Pixel Operator", Georgia, serif;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.tagline { margin: 0 0 48px; }

p { margin: 0 0 24px; }
/* Muted copy is secondary copy, so it drops to the regular weight as well as
   the lighter colour — at 20px, bold pixel type on parchment is a lot of ink
   for a line nobody needs to read twice. */
.muted, footer { font-weight: 400; }
.muted { color: var(--muted); }
a { color: var(--ink); }

/* The party code, drawn like a card in the app: a 4px square-cornered rule in
   the same near-black the game strokes everything with. */
.code {
  display: inline-block;
  margin: 4px 0 24px;
  padding: 14px 20px 12px;
  border: 4px solid var(--line);
  font-size: 32px;
  letter-spacing: 6px;
  /* The letter-spacing hangs off the last character; this re-centres it. */
  text-indent: 6px;
}

/* Apple's and Google's badges, unmodified as their guidelines require.

   Matched on *width*, not height: the two artworks have different aspect ratios
   (2.99 and 3.37), so a common height left the stack ragged down both edges.
   Each still scales uniformly — nothing is stretched, which both stores forbid
   — Apple's simply ends up the taller box. 202px clears their minimums several
   times over.

   Stacked rather than side by side, so neither store reads as the first choice
   and the pair does not have to fit a column width.

   The filenames name the artwork (`-white`, `-color`) because these are served
   `immutable` for a year: swapping which badge a fixed URL points at leaves
   every browser that has visited holding the old one until 2027. A different
   artwork has to be a different URL. */
/* Flex rather than inline: whitespace between flex items is dropped outright,
   which is what stops the space between the badges rendering as a stray dash on
   the text baseline. It also gives an exact gap, and lets the pair stack on a
   narrow screen instead of overflowing. */
.badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
}
.badges a { text-decoration: none; }
.badge {
  width: 202px;
  max-width: 100%;
  height: auto;
}

/* The Discord invite: the line, then the mark, and nothing drawn around it. The
   stores get a box each because their badge artwork comes with one; this is a
   link, and a third box under the two of them competed with what it sat below.

   Discord's mark is used unmodified and in black, one of the two neutrals its
   brand guidelines allow. The wordmark is 6.6:1, so at 160px it sets about 24px
   tall, and the padding around it is what keeps a thumb-sized target now that
   there is no box making one. */
.discord-lede { margin: 0 0 4px; }
.discord { margin: 0 0 12px; }
.discord a {
  display: inline-block;
  padding: 12px 16px;
  text-decoration: none;
}
.discord img {
  display: block;
  width: 160px;
  height: auto;
}

footer {
  /* Pushed to the bottom of the viewport rather than trailing the content: on
     a page this short it otherwise floats in the middle of a lot of parchment. */
  margin-top: auto;
  padding-top: 56px;
  color: var(--muted);
}
footer a { color: var(--muted); }

@media (max-width: 400px) {
  body { padding: 48px 20px 72px; }
  .logo { width: 112px; height: 112px; }
  .wordmark { font-size: 48px; }
  .kicker { font-size: 26px; }
  .code { font-size: 26px; letter-spacing: 4px; text-indent: 4px; }
}

/* ---------------------------------------------------------------------------
   The document pages: the privacy policy, support, and account deletion.

   Everything above dresses one short, centred lockup. These are the opposite —
   several thousand words somebody has to actually read — so `.doc` undoes the
   centring and the flex column, widens the measure, and drops to the regular
   weight throughout. Bold pixel type is right for a line of a card and wrong
   for a page of prose.

   Still 20px, still Pixel Operator: the same policy is a page inside the app,
   set in the same face, and a reader who opens it in a browser should not find
   a different-looking document. Type below 20px is where this face stops being
   pixel-aligned and starts being blurry, so the long copy holds the size and
   takes the length.
   --------------------------------------------------------------------------- */
body.doc {
  display: block;
  max-width: 680px;
  text-align: left;
  font-weight: 400;
  line-height: 1.6;
  padding: 40px 24px 72px;
}

/* Home, in the top-left, in the wordmark's face at a size that reads as a mark
   rather than as a heading — the page's own title is the heading. */
.doc .home {
  display: inline-block;
  font: 400 32px/1 "Jersey 20", "Pixel Operator", Georgia, serif;
  text-decoration: none;
  margin-bottom: 32px;
}

.doc h1 {
  font: 400 44px/1.1 "Jersey 20", "Pixel Operator", Georgia, serif;
  margin: 0 0 4px;
}
/* Section headings take the bold weight the body gave up: it is the one place
   in this typography where a difference in weight still means something. */
.doc h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.doc .updated {
  color: var(--muted);
  margin: 0 0 32px;
}
.doc p { margin: 0 0 16px; }
/* The run-in that opens a paragraph ("Your account. Mettle requires…"). The app
   draws it as a muted label above its paragraph, since every face there is
   bold already; here the weight is free, so it stays a run-in. */
.doc strong { font-weight: 700; }
.doc ul { margin: 0 0 16px; padding-left: 24px; }
.doc li { margin-bottom: 8px; }
.doc footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 4px solid var(--line);
}

@media (max-width: 400px) {
  body.doc { padding: 32px 20px 56px; }
  .doc h1 { font-size: 36px; }
}

/* The bestiary link on the front page. It sits below the Discord and above the
   footer, and it is the one line here that leads somewhere with depth behind it,
   so it takes the ink colour the surrounding muted copy gives up. */
.browse { margin: 0 0 8px; }
.browse a { color: var(--ink); }