/*
 * The press kit's stylesheet. STANDALONE — this file is not part of main.css and
 * shares no tokens with the game site. Do not "unify" them: they are meant to look
 * nothing alike.
 *
 * The original was presskit() by Rami Ismail, which is UIkit 1.2.0 plus a short
 * override file. This keeps its character — plain, light, skim-it-in-thirty-seconds,
 * Trebuchet body, Georgia headings, sidebar of section links — while fixing the parts
 * that made the page unusable rather than merely dated.
 *
 * Ships as /press/presskit.css, NOT style.css. The old presskit() install served
 * /press/style.css and Cloudflare has that address cached; reusing the name would
 * serve the stale 2020 file and the kit would arrive looking unstyled.
 *
 * ── What was wrong, measured at 1280px before this rewrite ──────────────────────
 *
 *   Every gallery image rendered 314x2px      no width/height + loading="lazy", so
 *                                             nothing was reserved and the page
 *                                             lurched downwards as each one arrived.
 *                                             Fixed in the template, not here: see
 *                                             the pressImg shortcode.
 *   Body text 14.4px                          0.9em of 16px. Small for a page that is
 *                                             mostly prose.
 *   Content column 679px of a 1280px window   980px container minus a 226px sidebar.
 *   Screenshots shown 314px wide              in a kit whose purpose is distributing
 *                                             screenshots.
 *   Ragged image rows                         2 fixed columns, `width: 100%`, and one
 *                                             portrait box-art among nine 16:9 shots:
 *                                             every row as tall as its tallest member.
 */

:root {
  --pk-text: #333;
  --pk-muted: #767676;
  --pk-heading: #222;
  --pk-link: #0b6cbf;
  --pk-link-hover: #05467d;
  --pk-rule: #ddd;
  --pk-bg: #fff;
  --pk-tile-bg: #f7f7f7;
  --pk-alert-bg: #ebf7fd;
  --pk-alert-text: #1f5c78;
  --pk-gutter: 28px;

  /* The kit is a document. Prose is capped so lines stay readable even though the
     page itself is wide enough to show screenshots at a useful size. */
  --pk-measure: 68ch;
}

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

body {
  margin: 0;
  padding: 24px 0;
  background: var(--pk-bg);
  color: var(--pk-text);
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
  /* Was 0.9em. A press kit is read, not glanced at. */
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--pk-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--pk-link-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--pk-link);
  outline-offset: 2px;
}

/*
 * max-width, NOT width. `img { width: 100% }` blew every image up to the width of its
 * container regardless of its own size — a 512px icon became a half-page banner.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

hr {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--pk-rule);
}

/* ── Shell ────────────────────────────────────────────── */

.pk-container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pk-gutter);
}

.pk-grid {
  display: grid;
  gap: var(--pk-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .pk-grid {
    /* A fixed sidebar rather than 1fr 3fr: the nav needs exactly enough room for its
       longest label, and every pixel it does not need belongs to the screenshots. */
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  /* The nav rides along instead of scrolling away — the kit is one long page. */
  .pk-nav {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* ── Sidebar ──────────────────────────────────────────── */

.pk-nav__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.35rem;
  font-weight: normal;
  line-height: 1.25;
  color: var(--pk-heading);
}

.pk-nav__site {
  display: block;
  margin-bottom: 16px;
  font-size: 0.9rem;
  word-break: break-word;
}

.pk-nav__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pk-rule);
  list-style: none;
}

.pk-nav__list a {
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid var(--pk-rule);
  color: var(--pk-link);
  font-size: 0.95rem;
}

.pk-nav__list a:hover,
.pk-nav__list a:focus-visible {
  color: var(--pk-link-hover);
  text-decoration: none;
}

/* ── Content ──────────────────────────────────────────── */

.pk-content h2 {
  margin: 56px 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pk-rule);
  color: var(--pk-heading);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.3;
}

.pk-content > h2:first-child,
.pk-header-image + h2 {
  margin-top: 0;
}

.pk-content h3 {
  margin: 28px 0 6px;
  color: var(--pk-heading);
  font-size: 1.05rem;
}

.pk-content p {
  margin: 0 0 16px;
  max-width: var(--pk-measure);
}

.pk-content ul {
  margin: 0 0 16px;
  max-width: var(--pk-measure);
  padding-left: 22px;
  list-style-type: square;
}

.pk-content li {
  margin-bottom: 6px;
}

.pk-header-image {
  margin-bottom: 32px;
}

.pk-header-image img {
  display: block;
  width: 100%;
}

/* ── Facts (factsheet, contact) ───────────────────────── */

/*
 * One flowing set of label/value pairs rather than a two-cell grid. The old
 * `.pk-columns--halves` had exactly two cells and the contact section only ever passed
 * one child, so six contacts were crammed into 469px with a 185px column empty beside
 * them. auto-fit has no opinion about how many items there are.
 */
.pk-facts {
  display: grid;
  gap: 4px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-bottom: 16px;
  align-items: start;
}

.pk-fact {
  margin: 0 0 16px;
  max-width: none;
}

.pk-fact strong {
  display: block;
  color: var(--pk-heading);
  font-weight: bold;
}

/* Contact values are bare URLs and some are long; let them wrap rather than widen
   the column or spill out of it. */
.pk-fact__url {
  word-break: break-word;
}

/* Two columns of credits beside the press-copy and monetization notes. */
.pk-columns {
  display: grid;
  gap: var(--pk-gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .pk-columns--halves {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.pk-columns h3:first-child {
  margin-top: 0;
}

/* ── Media ────────────────────────────────────────────── */

.pk-video {
  position: relative;
  max-width: 820px;
  margin-bottom: 24px;
  /* presskit()'s own figure, not the usual 56.25%. */
  padding-bottom: min(56.5%, 464px);
  background: var(--pk-tile-bg);
}

.pk-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * Uniform tiles. Nine of the ten press images are 16:9 and one is portrait box art;
 * with `width: 100%` and free heights, every row was as tall as its tallest member and
 * the grid looked broken. Fixed-ratio tiles with `contain` give even rows AND show
 * every image whole — cropping box art to 16:9 would be worse than pillarboxing it.
 */
.pk-images {
  display: grid;
  gap: var(--pk-gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 0 0 16px;
  padding: 0;
  max-width: none;
  list-style: none;
}

.pk-images li {
  margin: 0;
}

.pk-images a {
  display: block;
}

.pk-images img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--pk-tile-bg);
  border: 1px solid var(--pk-rule);
}

.pk-images a:hover img,
.pk-images a:focus-visible img {
  border-color: var(--pk-link);
}

/* The logo and the icon are square and small — they get their own scale. */
.pk-images--marks {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 220px));
}

.pk-images--marks img {
  aspect-ratio: 1 / 1;
  padding: 12px;
}

/* UIkit's .uk-alert, used by presskit() for the download-everything links. */
.pk-alert {
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: var(--pk-alert-bg);
  border-radius: 4px;
  color: var(--pk-alert-text);
  font-weight: bold;
}

.pk-alert:hover,
.pk-alert:focus-visible {
  color: var(--pk-alert-text);
  text-decoration: underline;
}

/* ── Footer ───────────────────────────────────────────── */

.pk-colophon {
  max-width: var(--pk-measure);
  color: var(--pk-muted);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

@media print {
  .pk-nav,
  .pk-video,
  .pk-alert {
    display: none;
  }

  .pk-grid {
    grid-template-columns: 1fr;
  }

  .pk-content h2 {
    margin-top: 24px;
  }
}