/* Copyright (c) 2026 Brooklyn Halmstad. All rights reserved. */

/* The game's own colours: the dark of its ground for the page, the paper white of its text, a
   person's skin for quiet text, blood for links; one faint grey for every rule and box. */
:root {
  --page: #131417;
  --rule: #2b2c31;
  --paper: #f1f0f4;
  --skin: #aaa9b2;
  --blood: #b8141e;
}

/* Jersey 15 is for the two big heading sizes only. It is kept on this site, shown as soon as
   it arrives, and is under the SIL Open Font License (the licence text is in /fonts).
   Everything else is in the game's own interface font. */
@font-face { font-family: "Jersey 15"; src: url("/fonts/jersey-15-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; }

html { background: var(--page); }

/* One column, the same on every page. The footer sits at the bottom of the window on a short
   page, so the room under the text is the window's and not a gap of our choosing. */
body {
  margin: 0 auto;
  max-width: 50rem;
  min-height: 100vh;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  font: 1.125rem/1.65 Arial, "Liberation Sans", Helvetica, sans-serif;
}

/* The wordmark: the same size and in the middle on every page. */
header { padding: 3.5rem 0 2.5rem; }
header a { display: block; width: 26rem; max-width: 100%; margin: 0 auto; }
header img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

main { flex: 1; padding: 2rem 0 5rem; }

h1, h2 { font-family: "Jersey 15", Arial, "Liberation Sans", sans-serif; font-weight: 400; }
h1 { margin: 0 0 1.5rem; font-size: 3rem; line-height: 1.05; }
h2 { margin: 3.5rem 0 1rem; font-size: 2.2rem; line-height: 1.1; }
h3 { margin: 2rem 0 0.6rem; font-size: 1.2rem; line-height: 1.3; }
p { margin: 0 0 1.2rem; }
ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
li { margin-bottom: 0.5rem; }
.date { color: var(--skin); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

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

code { font: 0.9em/1.4 ui-monospace, "Liberation Mono", Menlo, Consolas, monospace; background: var(--rule); padding: 0.1em 0.35em; }

/* The news: each entry whole, on the front page. */
.news article { padding: 1.2rem 0 0.4rem; border-bottom: 1px solid var(--rule); }
.news h3 { margin: 0 0 0.6rem; }
.news .date { margin: 0 0 0.1rem; }

.table { overflow-x: auto; margin: 0 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 1rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
th { color: var(--skin); font-weight: normal; }

/* Pictures and clips from the game: full width, their own pixels kept sharp. */
.media { margin: 3rem 0 0; display: grid; gap: 2rem; }
.media figure { margin: 0; }
.media img, .media video { display: block; width: 100%; height: auto; background: var(--rule); }
.media figcaption { margin-top: 0.6rem; color: var(--skin); font-size: 0.95rem; }

footer { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); color: var(--skin); font-size: 0.95rem; }
footer p { margin: 0 0 0.3rem; }
footer a { color: var(--skin); }

@media (max-width: 34rem) {
  body { font-size: 1.0625rem; padding: 0 1.1rem; }
  header { padding: 2.2rem 0 1.5rem; }
  h1 { font-size: 2.4rem; }
}