/* DayZ Clan Wars — Field Guide
   Palette and faces follow the dayzclanwars.com design system so the guide
   reads as part of the site. Hand-written; no build step. */

:root {
  --ground: #050505;
  --frame: #0b0b0a;
  --surface: #131211;
  --rule: #1a1917;
  --rule-2: #2a2825;
  --ink: #e8e2d4;
  --ink-2: #b5afa4;
  --muted: #8a857c;
  --dim: #6e6a62;
  --gold: #d9a03c;
  --rust: #8c3a22;
  --olive: #8fa36a;

  --font-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Menlo, monospace;

  --measure: 66ch;
  --rail: 280px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
}
@media (min-width: 1000px) { body { font-size: 18px; } }

a { color: var(--gold); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- shell ---------- */

.shell { display: flex; min-height: 100vh; }

.rail {
  display: none;
  width: var(--rail);
  flex: 0 0 var(--rail);
  border-right: 1px solid var(--rule);
  background: var(--frame);
}
.rail-inner { position: sticky; top: 0; padding: 28px 22px 40px; max-height: 100vh; overflow-y: auto; }
.rail img { width: 120px; height: 120px; display: block; margin-bottom: 18px; }
.rail .kicker { color: var(--muted); font-size: 13px; margin: 0 0 22px; }

.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: grid; grid-template-columns: 2ch 1fr; gap: 12px;
  padding: 7px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.35;
}
.toc a .n { color: var(--dim); font-family: var(--font-mono); font-size: 12.5px; padding-top: 2px; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a[aria-current="page"] { color: var(--gold); }
.toc a[aria-current="page"] .n { color: var(--gold); }
.toc .sep { border-top: 1px solid var(--rule-2); margin: 12px 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--frame);
  position: sticky; top: 0; z-index: 5;
}
.topbar img { width: 40px; height: 40px; }
.topbar .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--font-display); font-size: 15px; letter-spacing: .02em; }
.topbar details { position: relative; }
.topbar summary {
  list-style: none; cursor: pointer; color: var(--gold); font-size: 15px;
  padding: 10px 4px; min-height: 44px; display: flex; align-items: center;
}
.topbar summary::-webkit-details-marker { display: none; }
.topbar details[open] summary { color: var(--ink); }
.topbar .menu {
  position: absolute; right: 0; top: 100%; width: min(86vw, 340px);
  background: var(--surface); border: 1px solid var(--rule-2); padding: 12px 16px;
  max-height: 75vh; overflow-y: auto;
}
.topbar .menu .toc a { padding: 9px 0; min-height: 44px; align-items: center; }

@media (min-width: 1000px) {
  .rail { display: block; }
  .topbar { display: none; }
}

main { flex: 1 1 auto; min-width: 0; }
.page { padding: 28px 20px 64px; max-width: calc(var(--measure) + 40px); }
@media (min-width: 700px) { .page { padding: 48px 40px 96px; } }
@media (min-width: 1000px) { .page { padding: 64px 64px 120px; } }

/* ---------- chapter opener ---------- */

.opener { margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--rule-2); }
.opener .num {
  display: block; font-family: var(--font-display); color: var(--gold);
  font-size: 88px; line-height: .9; letter-spacing: -.02em; margin: 0 0 8px -3px;
}
@media (min-width: 700px) { .opener .num { font-size: 128px; } }
.opener h1 {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: 34px; line-height: 1.08; letter-spacing: -.01em;
}
@media (min-width: 700px) { .opener h1 { font-size: 46px; } }
.opener .lede { color: var(--ink-2); font-size: 1.1em; margin: 16px 0 0; max-width: 56ch; }

/* ---------- text ---------- */

h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.45em; line-height: 1.2;
  margin: 2.2em 0 .6em; letter-spacing: -.005em;
}
h3 { font-size: 1.05em; font-weight: 700; margin: 1.8em 0 .4em; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.3em; margin: 0 0 1.1em; max-width: var(--measure); }
li { margin: 0 0 .45em; }
li::marker { color: var(--muted); }
strong { color: #fff; font-weight: 700; }
em { color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--rule-2); margin: 2.4em 0; }
code, .mono { font-family: var(--font-mono); font-size: .88em; }
kbd { font-family: var(--font-mono); font-size: .85em; background: var(--surface); border: 1px solid var(--rule-2); padding: 1px 6px; }

/* A rule: the thing a player is promised. The one loud device on the page. */
.rule {
  margin: 1.6em 0; padding: 18px 22px;
  border-left: 3px solid var(--gold); background: var(--frame);
  font-size: 1.08em; line-height: 1.5; max-width: var(--measure);
}
.rule p { margin: 0; }
.rule p + p { margin-top: .7em; }
.rule strong { color: var(--gold); }

/* What the server can see — the honesty box. Quiet, grey, never gold. */
.log {
  margin: 1.6em 0; padding: 16px 20px; background: var(--surface);
  border: 1px solid var(--rule-2); color: var(--ink-2); font-size: .95em; max-width: var(--measure);
}
.log .t { display: block; color: var(--muted); font-size: .82em; margin-bottom: 6px; }
.log p:last-child { margin-bottom: 0; }

/* Enforced by people — rust means an obligation, not a decoration. */
.human {
  margin: 1.6em 0; padding: 16px 20px; border-left: 3px solid var(--rust);
  background: var(--frame); max-width: var(--measure);
}
.human p:last-child { margin-bottom: 0; }

/* An announcement as the bot would post it. */
.post {
  margin: 1.2em 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: .86em; line-height: 1.5; max-width: var(--measure);
  overflow-x: auto;
}
.post .ch { color: var(--muted); display: block; margin-bottom: 4px; font-size: .9em; }

table { border-collapse: collapse; width: 100%; max-width: var(--measure); margin: 1.2em 0 1.6em; font-size: .95em; }
.tablewrap { overflow-x: auto; max-width: var(--measure); }
th, td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-2); }
th { color: var(--muted); font-weight: 400; font-size: .85em; }
td:last-child, th:last-child { padding-right: 0; }
td.v { font-family: var(--font-mono); font-size: .9em; white-space: nowrap; color: #fff; }
tr.group td { color: var(--gold); font-family: var(--font-display); padding-top: 22px; border-bottom-color: var(--rule-2); }

/* one-page rules list */
.onepage h2 { font-size: 1.15em; margin-top: 2em; }
.onepage ul { list-style: none; padding: 0; }
.onepage li { padding: 8px 0; border-bottom: 1px solid var(--rule); margin: 0; }

/* prev / next — big, tappable, unmistakable */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule-2); max-width: var(--measure);
}
.pager a {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 72px; padding: 14px 18px;
  background: var(--gold); color: var(--ground); border: 1px solid var(--gold);
}
.pager a .lbl { font-family: var(--font-display); font-size: 17px; letter-spacing: .01em; }
.pager a .dest { font-size: 14px; line-height: 1.3; opacity: .8; }
.pager a:hover, .pager a:focus-visible { background: #e6b04f; border-color: #e6b04f; text-decoration: none; }
.pager a:hover .dest { opacity: 1; }
.pager .prev { grid-column: 1; text-align: left; }
.pager .next { grid-column: 2; text-align: right; align-items: flex-end; }
.pager .empty { min-height: 72px; }

footer.site { color: var(--dim); font-size: 13px; margin-top: 40px; max-width: var(--measure); }

@media (prefers-reduced-motion: no-preference) {
  .topbar .menu { animation: drop .12s ease-out; }
  @keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}