/* FrontWars Field Manual — a printed manual, not a dashboard.
   Tokens and reasoning: design-brief.md. No shadows, no motion. */

:root {
  --bone: #f1ece1;
  --paper: #fbf8f1;
  --ink: #15150f;
  --muted: #57583f;
  --line: #c9c2ae;
  --brass: #7c5a13;
  --field: #2b3125;
  --rust: #8c3a1c;

  --wrap: 1200px;
  --measure: 68ch;
  --rail: 96px;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 400 18px/1.62 var(--font-body);
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--field); color: var(--paper);
  padding: 10px 16px; z-index: 9; font-family: var(--font-mono); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

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

header.site { background: var(--paper); border-bottom: 1px solid var(--ink); }
header.site .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}

.brand {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand .mark {
  display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center;
  background: var(--field); color: var(--bone); font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .06em; margin-right: 9px;
  border-radius: 2px; vertical-align: 3px;
}
.brand .thin { font-weight: 600; color: var(--muted); letter-spacing: .12em; font-size: 16px; }

.nav { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-left: auto; }
.nav a {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--brass); }
.nav a.on { border-bottom-color: var(--brass); }

.langmenu { position: relative; }
.langmenu summary {
  list-style: none; cursor: pointer; border: 1px solid var(--line); background: var(--paper);
  padding: 5px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  border-radius: 2px;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu .caret { margin-left: 6px; color: var(--muted); }
.langmenu ul {
  position: absolute; right: 0; top: 100%; margin: 4px 0 0; padding: 4px;
  list-style: none; background: var(--paper); border: 1px solid var(--ink); min-width: 150px; z-index: 20;
  border-radius: 2px;
}
.langmenu li a, .langmenu li span {
  display: block; padding: 6px 10px; text-decoration: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px;
}
.langmenu li span.on { color: var(--muted); }

/* ---------- legend band ---------- */

.legend { background: var(--field); color: var(--bone); border-bottom: 3px solid var(--brass); }
.legend-in {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 28px;
  padding-top: 14px; padding-bottom: 14px;
}
.legend-title {
  grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-size: 13px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #b9b49f;
}
.legend-marks {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
}
.legend-marks .m { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: baseline; }
.legend-marks .mk {
  font-weight: 500; letter-spacing: .06em; white-space: nowrap;
  border-bottom: 2px solid currentColor; padding-bottom: 1px;
}
.legend-marks .ms { color: #b9b49f; }
.legend-meta {
  margin: 0; display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11.5px;
  color: #b9b49f; white-space: nowrap; align-self: center;
}

/* mark colours on paper (evidence block, tables) */
.m-tested .mk, .tbl .m-tested { color: var(--brass); }
.m-ingame .mk, .tbl .m-ingame { color: var(--ink); }
.m-official .mk, .tbl .m-official { color: var(--muted); }
.m-needcheck .mk, .tbl .m-needcheck { color: var(--rust); }

/* mark colours inside the dark legend band */
.legend .m-tested .mk { color: #e8c46a; }
.legend .m-ingame .mk { color: #f2eddc; }
.legend .m-official .mk { color: #b3ae99; }
.legend .m-needcheck .mk { color: #e08a5f; }

/* ---------- page frame ---------- */

main { display: block; }
main .wrap { padding-top: 34px; padding-bottom: 6px; max-width: calc(var(--wrap) + 0px); }

.kicker {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

h1 {
  font-family: var(--font-display); font-size: clamp(34px, 5.2vw, 54px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.005em; text-transform: uppercase;
  margin: 0 0 18px; max-width: 24ch;
}

h2 {
  counter-increment: clause;
  font-family: var(--font-display); font-size: 27px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.1; margin: 44px 0 10px;
  padding-left: 0;
}
h2::before {
  content: "§" counter(clause);
  display: inline-block; width: var(--rail); color: var(--brass);
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .02em;
  vertical-align: 4px;
}

main { counter-reset: clause; }

p, ul, ol, table, figure { max-width: var(--measure); }
p { margin: 0 0 14px; }
.lede { font-size: 21px; line-height: 1.5; color: var(--ink); }
.lede + .marks { margin-top: 20px; }

.gaps { padding-left: 20px; }
.gaps li { margin-bottom: 8px; }

/* ---------- evidence block ---------- */

.marks {
  list-style: none; margin: 0 0 26px; padding: 12px 0; max-width: var(--measure);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: grid; gap: 4px; font-family: var(--font-mono); font-size: 12.5px;
}
.marks .m { display: flex; gap: 12px; align-items: baseline; }
.marks .mk {
  flex: 0 0 132px; font-weight: 500; letter-spacing: .07em; border-bottom: 2px solid currentColor;
  align-self: start;
}
.marks .ms { color: var(--muted); }
.nw { white-space: nowrap; }

/* ---------- plate ---------- */

.plate {
  margin: 8px 0 30px; max-width: 100%; border: 1px solid var(--ink); background: var(--paper);
  border-radius: 2px; overflow: hidden;
}
.plate img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--brass); }
.plate .cap {
  display: grid; grid-template-columns: 2.4fr 1fr 1fr auto; gap: 0;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
}
.plate .cap > span { padding: 9px 12px; border-right: 1px solid var(--line); }
.plate .cap > span:last-child { border-right: 0; }
.plate .cap b { display: block; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-size: 10px; }
.plate .cap .c-shows b { color: var(--brass); }
.plate.needs-check { border-color: var(--rust); }
.plate.needs-check .cap .c-shows b { color: var(--rust); }
.plate .c-no { align-self: center; color: var(--muted); white-space: nowrap; }

/* ---------- tables ---------- */

.tbl {
  width: 100%; border-collapse: collapse; margin: 4px 0 26px; background: var(--paper);
  border: 1px solid var(--line); font-size: 16px;
}
.tbl caption {
  caption-side: top; text-align: left; padding: 0 0 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--brass);
}
.tbl th, .tbl.dense td, .tbl.dense th { padding: .42rem .8rem; }
.tbl.dense { max-width: 46rem; }
.tbl.dense th:nth-child(2), .tbl.dense td.num { width: 1%; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.tbl.dense th:nth-child(3), .tbl.dense td.size { width: 1%; white-space: nowrap; }
.tbl.dense td, .tbl.dense th { padding: .38rem .9rem; }
.tbl.dense thead th { padding-top: .55rem; padding-bottom: .55rem; }
.tbl .num { text-align: right; }
.tbl .size { color: var(--muted); font-style: italic; }
.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); background: var(--bone); border-bottom: 1px solid var(--ink);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.g, .tbl td.n { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl td.g { text-align: right; white-space: nowrap; }
.tbl td.d { color: var(--muted); font-size: 15px; }
.tbl .m-tested, .tbl .m-ingame, .tbl .m-official, .tbl .m-needcheck {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em; white-space: nowrap;
}
.tbl .m-tested { color: var(--brass); }
.tbl .m-ingame { color: var(--ink); }
.tbl .m-official { color: var(--muted); }
.tbl .m-needcheck { color: var(--rust); }

/* ---------- checked stamp ---------- */

.checked {
  margin: 40px 0 0; padding-top: 10px; border-top: 3px solid var(--field);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--muted);
  text-transform: none;
}
.checked b { color: var(--ink); font-weight: 500; }

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

footer.site {
  margin-top: 34px; background: var(--paper); border-top: 1px solid var(--ink);
  padding: 22px 0 30px; font-size: 15px;
}
footer.site p { margin: 0 0 6px; }
footer.site .small { font-size: 13px; color: var(--muted); line-height: 1.6; }
footer.site .small a { color: var(--muted); }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  h2::before { width: auto; margin-right: 8px; vertical-align: 2px; }
  .plate .cap { grid-template-columns: 1fr 1fr; }
  .plate .cap .c-shows { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .plate .cap .c-date { border-right: 1px solid var(--line); }
  .plate .cap .c-no { align-self: center; }
  .legend-in { grid-template-columns: 1fr; }
  .legend-meta { flex-wrap: wrap; gap: 10px; white-space: normal; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .nav { order: 3; margin-left: 0; width: 100%; gap: 2px 14px; }
  .lang { order: 2; margin-left: auto; align-self: flex-start; margin-top: 8px; }
  header.site .wrap { row-gap: 4px; }
  .brand .thin { display: none; }
  .brand { font-size: 20px; }
  .nav a { font-size: 14px; }
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .marks .mk { flex: 0 0 100px; }

  .plate .cap { grid-template-columns: 1fr; }
  .plate .cap > span { border-right: 0; border-bottom: 1px solid var(--line); }
  .plate .cap > span:last-child { border-bottom: 0; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 8px 8px; }
  .tbl td.d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  a, .langmenu summary { transition: none; }
}