/* Generated by tools/FlickFrag.Site (FieldBrand.cs); do not edit by hand.
   The brand's own colours: yellow #FFCC00, black, and #E6B800. The contrast ratios in the
   comments are WCAG, against the ground each colour is used on. */
:root {
  --yellow: #ffcc00;        /* the field; the brand */
  --yellow-deep: #e6b800;   /* the quiet second yellow, for shapes, never text */
  --ink: #000000;           /* the brand's black */
  --on-yellow: #000000;     /* text on the yellow field (13.9:1) */
  --bone: #f4f2ec;          /* headings on the dark page (17.6:1) */

  /* The dark ground the pages are drawn on. */
  --bg: #0b0b0a;            /* the page */
  --panel: #161614;         /* frames and panels */
  --panel-high: #1f1f1c;    /* a panel that is hovered */
  --well: #050505;          /* code blocks, below the page */
  --text: #d9d6ce;          /* body text on --bg (13.6:1) */
  --text-dim: #a19e96;      /* secondary text on --bg (7.4:1) */
  --accent: #ffcc00;        /* links, buttons, badges on --bg (13.0:1) */
  --accent-chip: #2b2400;   /* the ground under a badge (10.2:1 with --accent) */
  --rule: #2a2926;
  --rule-strong: #6e6b64;   /* a boundary that marks a control (3.7:1) */
}
/* fragfield.com: one stylesheet, no framework, no build step at the far end.
   The colour tokens above this line are generated by the site builder (FieldBrand.cs); everything
   below is written by hand and only ever refers to them by name.

   The brand is the Steam set's: flat yellow and black, the stencil for the name, the soldier, and
   the hazard tape. The site wears it at full strength once, in the yellow band the home page opens
   on, and quietly everywhere else: one dark column, text you can read for a while, yellow only
   where something is meant to be clicked. The tape is a band along an edge, never behind text. */

@font-face {
  font-family: "Inter var";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The stencil, for the name and the headings. Latin only: a Russian heading falls back to Inter. */
@font-face {
  font-family: "Black Ops One";
  src: url("../fonts/BlackOpsOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark by default and dark only (K44 in docs/kararlar.md). The yellow is a field and an accent,
     never a page. */
  color-scheme: dark;

  --wrap: 860px;
  --wide: 1100px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 0;
  --measure: 70ch;

  /* One motion setting for the whole site: a micro interaction, not a performance (K229).
     Nothing longer than 200ms, nothing that eases in, and nothing that moves the layout. */
  --motion: 160ms;
  --ease: ease-out;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  --sans: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Black Ops One", "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Fluid from a 320px phone to a 1280px desktop, then held. */
  --h1: clamp(26px, 20px + 1.9vw, 42px);
  --h2: clamp(21px, 17px + 1vw, 28px);
  --h3: 17px;
  --body: 16px;
  --lede: clamp(16.5px, 16px + 0.25vw, 18px);
  --small: 14px;
  --tiny: 12.5px;

  --section: clamp(40px, 6vw, 80px);
  --section-lead: clamp(40px, 6vw, 72px);

  /* The hazard tape (the Steam set's rule): stripes at 45 degrees, black and yellow of equal
     width, and the pitch along the edge twice the band's thickness. Across the stripes that is a
     period of the thickness times the square root of two, half of it black. --t is the thickness
     wherever a band is drawn. */
  --t: 10px;
  --tape: repeating-linear-gradient(135deg,
    var(--ink) 0 calc(var(--t) * 0.7071),
    var(--yellow) 0 calc(var(--t) * 1.4142));
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--body)/1.7 var(--sans);
  font-synthesis-weight: none;
  overflow-wrap: break-word;
  overflow-x: clip;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

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

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 400;
  color: var(--bone);
  text-wrap: balance;
}
h1, h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
h3, h4 { font-weight: 700; }
/* The stencil has no Cyrillic, so a Russian heading is set in Inter: heavy, to keep its weight. */
:lang(ru) :is(h1, h2) { font-weight: 800; letter-spacing: 0; }
/* Chinese, Japanese and Korean are set in the fonts the reader's system already has: no download.
   The Latin in them (FragField, version numbers) stays in Inter and the stencil; the browser takes
   every CJK character from the next font in the list. A heading keeps the stencil's black weight
   with the bold CJK face: the stencil has one weight and is never faked bolder (font-synthesis). */
:lang(zh) { --cjk: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC"; }
:lang(ja) { --cjk: "Yu Gothic UI", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans CJK JP", "Noto Sans JP"; }
:lang(ko) { --cjk: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR"; }
html:is(:lang(zh), :lang(ja), :lang(ko)) {
  --sans: "Inter var", var(--cjk), system-ui, sans-serif;
  --display: "Black Ops One", var(--cjk), system-ui, sans-serif;
}
:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2) { font-weight: 800; letter-spacing: 0; font-synthesis: none; }
:is(:lang(zh), :lang(ja)) body { line-height: 1.8; line-break: strict; }
:lang(ko) body { word-break: keep-all; }
:lang(ja) body { word-break: auto-phrase; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1em; max-width: var(--measure); }

code, pre, .hash, .num, time, .mono { font-variant-numeric: tabular-nums; }
code, pre, .hash, .mono { font-family: var(--mono); }
code, .hash { font-size: 0.92em; }
code {
  color: var(--bone);
  background: var(--well);
  padding: 1px 5px;
}

.muted { color: var(--text-dim); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stack-top { margin: var(--s4) 0 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.wide { max-width: var(--wide); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--accent);
  color: var(--on-yellow);
  padding: 10px 18px;
  font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---- the hazard tape ---------------------------------------------------------------------------- */

/* Two places and no more, both thin: the top edge of the page (the header) and the top of the
   footer at the bottom. Always along an edge, always on its own strip, never behind a word. */
.site-head::before,
.site-foot::before {
  content: "";
  display: block;
  height: var(--t);
  background: var(--tape);
}

/* ---- the logo ----------------------------------------------------------------------------------- */

/* FRAG over FIELD in the stencil, black, on a yellow plate: the Steam logo, set as text so it is
   sharp at any size and costs nothing but the font the headings already use. */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 15px;
  line-height: 0.86;
  letter-spacing: 0.03em;
  color: var(--on-yellow);
  background: var(--yellow);
  padding: 6px 8px 5px;
}
/* In the header and the footer the name stands beside the mark, without its plate: the soldier
   on the yellow square (the favicon, drawn as a background so it is no picture on the page) and
   FRAG over FIELD in yellow on the dark. */
.logo-mark {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--yellow) url("../../favicon.svg") center / 100% 100% no-repeat;
}
.brand .logo { background: none; color: var(--yellow); padding: 0; font-size: 16px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-name, .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- the emblems --------------------------------------------------------------------------- */

/* Drawn as paths in a hidden symbol stack at the top of every page: no icon font and no request
   to anybody else. They take the colour of whatever they sit in and turn yellow on hover. */
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.icon-discord { transform: scale(1.06); }
.icon-steam { transform: scale(1.08); }
.icon-youtube { transform: scale(1.04); }
.icon-tiktok { transform: scale(0.95); }

/* ---- header ---------------------------------------------------------------------------------- */

/* One row, about sixty pixels high, at every width: the logo, the pages and the language chip.
   On a phone the pages and the chip fold behind a menu button (Raşit, 14 October 2026: the old
   header took a third of a phone screen). The tape along the top is a thin accent now. */
.site-head {
  --t: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
}

.head-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding-block: 8px;
}
.head-menu { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s3); }

.menu-btn {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 0;
  color: var(--bone);
  cursor: pointer;
}
.menu-btn[hidden] { display: none; }
.menu-btn span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--motion) var(--ease), opacity var(--motion) var(--ease);
}
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 760px) { .menu-btn { display: none; } }

.nav { flex: 1 1 auto; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--accent); }

/* The language picker: twelve languages do not fit in one chip, so the chip is a button that opens
   a short list ("Sitede on iki dil"). It is a plain <details>, so it opens and closes without
   JavaScript; the script only closes it on Escape or a click elsewhere. The list hangs from the
   chip's right edge, two columns wide, and never wider than the screen minus its gutters. */
.lang { flex: 0 0 auto; position: relative; }
.lang-pick > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule-strong);
  padding: 4px 9px;
  font-size: var(--tiny);
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--text-dim);
  user-select: none;
}
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick .lang-name { display: none; text-transform: none; font-family: var(--sans); font-size: var(--small); }
.lang-pick > summary::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  transition: transform var(--motion) var(--ease);
}
.lang-pick > summary:hover, .lang-pick[open] > summary { color: var(--accent); border-color: var(--accent); }
.lang-pick[open] > summary::after { transform: translateY(-2px) rotate(180deg); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--s1);
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: var(--s1);
  list-style: none;
  background: var(--panel-high);
  border: 1px solid var(--rule-strong);
  border-top: 2px solid var(--accent);
}
.lang-menu a {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: 7px 8px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--small);
  white-space: nowrap;
}
.lang-menu a span { font-family: var(--mono); font-size: var(--tiny); text-transform: uppercase; color: var(--text-dim); }
.lang-menu a:hover, .lang-menu a:focus-visible { color: var(--accent); }
.lang-menu a[aria-current="true"] { color: var(--accent); background: var(--panel); }

/* ---- the yellow band ------------------------------------------------------------------------- */

/* The brand at full strength, once: edge to edge yellow, the big soldier running off its left and
   bottom edges (the Steam set's style 09), the name in the stencil, and the tape along the bottom
   edge, drawn over the soldier the way it is on the capsules. Black on this yellow, always. */
.band {
  position: relative;
  background: var(--yellow);
  color: var(--on-yellow);
  overflow: hidden;
}
.band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(440px, 44vw, 600px);
}
.band-soldier {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: block;
  width: 136%;
  margin-left: -34%;
  margin-top: var(--s4);
}
.band-soldier img { width: 100%; height: auto; }
.band-copy {
  grid-column: 2;
  grid-row: 1;
  padding-block: var(--s5);
}
.band h1 {
  margin: 0;
  color: var(--on-yellow);
  font-family: var(--display);
  font-size: clamp(56px, 30px + 7vw, 128px);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.band h1 span { display: block; }
.band-tag {
  margin: var(--s3) 0 0;
  max-width: 26ch;
  font-size: clamp(17px, 15px + 0.5vw, 21px);
  font-weight: 650;
  line-height: 1.4;
  color: var(--on-yellow);
}
.band .status { color: var(--on-yellow); margin: var(--s3) 0 0; }
.band .badge { background: var(--ink); color: var(--yellow); }

/* ---- the page head: title, status line, one paragraph ---------------------------------------- */

.page { padding-block: var(--section-lead) 0; }
.page h1 { margin-bottom: var(--s2); }
.page > .wrap > h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  background: var(--accent);
  margin-bottom: var(--s2);
}
.masthead { padding-top: var(--section); }

/* One line of machine facts: the alpha badge and the platform. */
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) 10px;
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--text-dim);
  max-width: none;
}
.status .sep { opacity: 0.6; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--tiny);
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 8px;
  background: var(--accent-chip);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lede { font-size: var(--lede); color: var(--text); max-width: var(--measure); }

/* ---- buttons --------------------------------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  align-items: stretch;
  max-width: none;
}

/* Big, filled, square cornered, short and in capitals. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 0;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease),
              color var(--motion) var(--ease), transform var(--motion) var(--ease);
}
/* Pressing something should feel like pressing something. One pixel, on transform, nothing else. */
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-yellow); border-color: var(--accent); }
.btn-primary:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn-ghost { border-color: var(--rule-strong); color: var(--text); background: transparent; }
/* The wishlist button stands on its own line and the accounts follow in a quieter row under it:
   the flex row breaks once, at an empty item a full line wide that sits between the two. */
.cta-row { row-gap: var(--s1); }
.cta-row::after { content: ""; flex-basis: 100%; order: 1; }
.cta-row .btn-ghost { order: 2; padding: 11px 18px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--bone); background: var(--panel); }

.more {
  font-size: var(--small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.more::after { content: " →"; }

/* ---- sections -------------------------------------------------------------------------------- */

.section { padding-block: var(--section); }
/* A page title sits close to what it names; the big rhythm is between sections, not under a title. */
.page + .section { padding-top: var(--s4); }
.section > .wrap > h2 { margin-bottom: var(--s3); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.section-head h2 { margin: 0; border: 0; padding: 0; }
/* A short yellow bar opens each heading: the brand's mark of a new subject. */
.section h2::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  background: var(--accent);
  vertical-align: 0.08em;
}
.prose h2::before, .release h2::before { content: none; }

/* ---- lists of rows -------------------------------------------------------------------------- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 2px var(--s2);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.rows li:last-child { border-bottom: 0; }
.rows time { font-family: var(--mono); font-size: var(--tiny); color: var(--text-dim); }
.rows a { color: var(--bone); text-decoration: none; font-weight: 600; }
.rows a:hover { color: var(--accent); text-decoration: underline; }
.rows p { grid-column: 2; margin: 0; font-size: var(--small); color: var(--text-dim); }
.rows .meta { grid-column: 2; font-family: var(--mono); font-size: var(--tiny); color: var(--text-dim); }

/* ---- screenshots ----------------------------------------------------------------------------- */

.shots { display: grid; gap: var(--s3); align-items: start; }
.shots-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Sharp corners, a quiet rule all the way round, a thin dark mat, and two short yellow marks
   cutting the top left and the bottom right that grow under a pointer. */
.shot {
  position: relative;
  margin: 0;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color var(--motion) var(--ease);
}
.shot::before,
.shot::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
  /* The corner grows on transform, not on width and height (K229). */
  transition: transform var(--motion) var(--ease);
}
.shot::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; transform-origin: top left; }
.shot::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; transform-origin: bottom right; }
.shot:hover { border-color: var(--rule-strong); }
.shot:hover::before,
.shot:hover::after { transform: scale(1.55); }

.shot picture { display: block; overflow: hidden; }
.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--well);
  transition: transform var(--motion) var(--ease);
}
.shot:hover img { transform: scale(1.012); }

/* ---- panels ---------------------------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: var(--s3);
}
.panel > :last-child { margin-bottom: 0; }
.panel h2, .panel h3 { font-size: var(--h3); margin-bottom: var(--s2); }

.note {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: var(--s3);
  font-size: var(--small);
}
.note > :last-child { margin-bottom: 0; }

/* ---- prose ----------------------------------------------------------------------------------- */

.prose { color: var(--text); max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose + .prose { margin-top: var(--s5); }
.prose h2 { margin-top: 1.8em; font-size: var(--h3); }
.prose h3 { margin-top: 1.8em; font-size: var(--body); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; max-width: var(--measure); }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 650; color: var(--bone); }
.prose pre {
  background: var(--well);
  color: var(--text);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: var(--small);
}
.prose pre code { background: none; padding: 0; color: var(--text); }
.prose blockquote {
  margin: 0 0 1em;
  padding-left: var(--s2);
  border-left: 2px solid var(--rule-strong);
  color: var(--text-dim);
}
.prose a { text-decoration: underline; }

.table-wrap { overflow-x: auto; max-width: 100%; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--small); }
.prose th, .prose td {
  text-align: left;
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th { color: var(--text-dim); font-weight: 600; font-size: var(--tiny); }
.prose td:first-child { color: var(--bone); white-space: nowrap; padding-right: var(--s3); }

/* ---- changelog ------------------------------------------------------------------------------- */

.release { padding-bottom: var(--s4); }
.release + .release { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.release h2, .release h3 { scroll-margin-top: 90px; }
.release h2 {
  font-size: var(--h3);
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  border: 0;
  padding: 0;
}
.release .prose { font-size: var(--small); }

/* ---- links row (the logo files) ------------------------------------------------------------ */

.links {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: var(--s3);
}
.links a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--bone);
  background: var(--panel);
}
.links a:hover { border-color: var(--accent); background: var(--panel-high); }
.links b { font-size: var(--small); font-weight: 600; display: flex; align-items: center; gap: 9px; }
.links a:hover .icon { color: var(--accent); }
.links span { font-size: var(--tiny); color: var(--text-dim); }

/* The logo downloads are a list of the same rows, each with an arrow drawn in the colour of its
   text: light at rest, yellow under the pointer. */
.downloads { list-style: none; padding: 0; }
.downloads li { display: grid; }
.icon-download {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Four short rows, the same at every width (K412), under the second strip of tape. */
.site-foot {
  --t: 4px;
  margin-top: var(--s3);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  font-size: var(--small);
  color: var(--text-dim);
  background: var(--well);
}
.site-foot::before { margin-bottom: var(--s4); }
.foot { display: grid; gap: var(--s2); }
.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}
.foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s3);
}
.foot-nav a, .foot-social a { color: var(--text-dim); text-decoration: none; }
.foot-nav a:hover, .foot-social a:hover { color: var(--accent); }
.foot-pages a { color: var(--text); }
.foot-langs a[aria-current="true"] { color: var(--bone); }
.foot-small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s2);
  margin: 0;
  padding-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--tiny);
  max-width: none;
}
.foot-social .emblems { gap: var(--s1); }
.foot-small b { color: var(--text); font-weight: 400; }
.foot-small a { color: var(--text-dim); text-decoration: none; }
.foot-small a:hover { color: var(--accent); }
.emblems { display: flex; flex-wrap: wrap; gap: var(--s2); align-content: start; list-style: none; margin: 0; padding: 0; }
.emblems a { display: inline-flex; color: var(--text); padding: 6px; }
.emblems a:hover { color: var(--accent); }

/* On the home page the same row stands on its own: bigger emblems, no card, no frame, no fill
   behind them and no label beside them (K228). Steam is the yellow one because the wishlist is the main call. */
.emblems-row { flex-wrap: nowrap; gap: clamp(2px, 3vw, 24px); margin: var(--s3) 0 0; }
.emblems-row a {
  color: var(--bone);
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: color var(--motion) var(--ease), transform var(--motion) var(--ease);
}
.emblems-row .icon { width: 28px; height: 28px; }
.emblems-row .emblem-steam { color: var(--accent); }
.emblems-row a:hover, .emblems-row a:focus-visible { color: var(--accent); }
.emblems-row a:active { transform: scale(0.94); }

/* ---- widths, pointers, motion, print ----------------------------------------------------------- */

/* Looked at in a browser at 320, 360, 375, 390, 414, 768, 1024, 1280, 1920 and 2560. Nothing may
   scroll sideways at any of them. */

/* Below a tablet the band stacks and stays inside the first screen: the name, the line and the
   badge first, the soldier right under them, cropped at the band's bottom edge. The header keeps
   one row: the logo and a menu button; the pages and the languages open under it. */
@media (max-width: 759px) {
  .band-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .band-copy { grid-column: 1; grid-row: 1; padding-block: var(--s4) 0; }
  .band h1 { font-size: clamp(52px, 17vw, 84px); }
  .band-tag { margin-top: var(--s2); font-size: 17px; }
  .band .status { margin-top: var(--s2); }
  .band-soldier { grid-column: 1; grid-row: 2; width: 100%; max-width: 460px; margin: var(--s1) 0 0 -14%; max-height: 300px; overflow: hidden; }

  .head-row { min-height: 56px; padding-block: 6px; gap: var(--s2); }
  .menu-ready .head-menu { display: none; }
  .menu-ready.menu-open .head-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .menu-ready .nav ul { flex-direction: column; gap: 0; }
  .menu-ready .nav a { font-size: 17px; padding: 6px 0; border-bottom: 0; }
  .menu-ready .nav a[aria-current="page"] { color: var(--accent); }
  .menu-ready .lang-pick > summary { width: 100%; justify-content: flex-start; padding: 10px 12px; }
  .menu-ready .lang-pick > summary::after { margin-left: auto; }
  .menu-ready .lang-pick .lang-name { display: inline; color: var(--text); }
  .menu-ready .lang-menu { position: static; width: auto; max-width: none; margin-top: var(--s1); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Without the script the menu button never shows, and everything wraps under the logo. */
  html:not(.menu-ready) .head-row { flex-wrap: wrap; }
  html:not(.menu-ready) .head-menu { flex-basis: 100%; flex-wrap: wrap; }
}

@media (max-width: 599px) {
  .rows li { grid-template-columns: 1fr; }
  .rows p, .rows .meta { grid-column: 1; }
  /* The Steam wishlist across the whole row, the other four two by two (K412). */
  .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .cta-row .btn-primary { grid-column: 1 / -1; }
  .cta-row::after { content: none; }
  .btn { justify-content: center; padding: 12px 10px; font-size: 14px; letter-spacing: 0.04em; }
  /* A phone gets finger sized links whatever it reports as its pointer. */
  .nav a, .lang a, .lang-pick > summary, .foot-nav a, .foot-social a, .foot-small a, .rows a, .more {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* A finger is not a pointer: where the device has no fine pointer, every link that acts like a
   control gets the 44 pixels a finger needs, without the text on the page growing. */
@media (pointer: coarse) {
  .nav a, .lang a, .lang-pick > summary, .foot-nav a, .foot-social a, .foot-small a, .rows a, .more, .prose a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .lang-pick > summary { padding: 0 12px; }
  .prose a { min-height: 0; display: inline; }
}

/* ---- motion (K229) ------------------------------------------------------------------------------
   Hover, focus and press, on transform and opacity, between 120 and 200ms, with ease-out, and one
   reveal of the last 8 pixels the first time a section is scrolled to. Without JavaScript every
   section is simply visible. */

@keyframes ff-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

html.js .reveal { opacity: 0; }
html.js .reveal.seen { animation: ff-rise 180ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shot:hover img { transform: none; }
  .shot:hover::before, .shot:hover::after { transform: none; }
  .btn:active, .emblems-row a:active { transform: none; }
  html.js .reveal, html.js .reveal.seen { opacity: 1; animation: none !important; }
}

@media print {
  .site-head, .cta-row, .links, .site-foot { display: none; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .rows a { color: #000; }
  .panel, .shot { border-color: #999; background: #fff; }
  html.js .reveal { opacity: 1; animation: none; }
}