:root {
  --night: #070b0a;
  --paper: #efe9d8;
  --ink: #12261e;
  --ink-half: rgba(18, 38, 30, 0.62);
  --gold: #d9b25f;
  --verd: #3f8f6e;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --roman: "Marcellus SC", "Cinzel", "Times New Roman", serif;
  --mono: "Cutive Mono", "Courier New", monospace;
  --hand: "Architects Daughter", cursive;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 30%, #0f1816 0%, var(--night) 70%); font-family: var(--cond); color: var(--ink); }
.board { padding: 40px 16px 80px; }
.articles {
  max-width: 820px; margin: 0 auto; padding: 44px 48px 40px;
  background: var(--paper) repeating-linear-gradient(0deg, rgba(18, 38, 30, 0.05) 0 1px, transparent 1px 30px);
  border: 1px solid rgba(18, 38, 30, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(120, 90, 40, 0.12);
}
.masthead { text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 18px; margin-bottom: 20px; }
.over { font-size: 12px; letter-spacing: 3px; color: var(--ink-half); margin: 0 0 12px; }
.sep { display: inline-block; width: 0.44em; height: 0.4em; margin: 0 0.5em; vertical-align: 0.06em; background: var(--ink); opacity: 0.6; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
h1 { font-family: var(--roman); font-size: 34px; letter-spacing: 6px; margin: 0; font-weight: 400; }
.motto { font-family: var(--hand); font-size: 20px; margin: 10px 0 0; }
.live { font-family: var(--mono); font-size: 14px; color: var(--ink-half); margin: 10px 0 0; }
.back { margin: 8px 0 0; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 26px; }
.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(18, 38, 30, 0.4); }
section { margin: 0 0 28px; }
h2 { font-size: 18px; letter-spacing: 4px; margin: 0 0 10px; font-weight: 600; border-bottom: 1px solid rgba(18, 38, 30, 0.4); padding-bottom: 6px; }
p, li { font-size: 17px; line-height: 1.5; }
p { margin: 0 0 12px; }
a { color: var(--ink); }
.turn { font-family: var(--hand); font-size: 17px; color: var(--ink-half); }
.m { font-family: var(--mono); }
.rm { font-style: italic; }
ul.split { padding-left: 20px; }
table.plain { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 15px; }
table.plain th { text-align: left; font-size: 11px; letter-spacing: 3px; color: var(--ink-half); border-bottom: 1px solid rgba(18, 38, 30, 0.4); padding: 6px; }
table.plain td { padding: 6px; border-bottom: 1px solid rgba(18, 38, 30, 0.15); font-family: var(--mono); }
.colophon { border-top: 3px double var(--ink); padding-top: 14px; margin-top: 30px; text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--ink-half); }
.colophon p { font-size: 12px; margin: 0 0 6px; }
@media (max-width: 640px) { .articles { padding: 28px 18px; } h1 { font-size: 24px; letter-spacing: 3px; } p, li { font-size: 16px; } }