/* ============================================================================
   GEOCRACY: the browser strategy game on the real Earth. Theme over the shared game-page layout.
   Same two faces as the game itself:
     ATLAS     = the page: cream paper, slate ink, the game's map blue for action, its brick red as a mark
     WAR ROOM  = the alert section only: night, cyan lines, capitals. It switches abruptly, as in the game.
   Titles in a serif, like the game's wordmark; elsewhere the site's Archivo, loaded from the Apiarium folder.
   ============================================================================ */

@font-face{
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../apiarium/assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2") format("woff2");
}

:root{
  --bg:      #f4efe2;
  --panel:   #faf7ee;
  --line:    #d8d3c5;
  --text:    #293b43;
  --muted:   #5f655e;
  --accent:  #315675;
  --on-accent: #faf7ee;
  --soft:    #ad5a48;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: Consolas, ui-monospace, monospace;
  --clip-ratio: 16 / 9;
  color-scheme: light;
}

h1, h2, .brand{ font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
h1{ line-height: 1.04; }
h2{ line-height: 1.06; }
.brand{ letter-spacing: .12em; text-transform: uppercase; }

/* Screens of the game: a paper card on the paper page. */
.clip .frame, .showcase .frame{ box-shadow: 0 12px 32px rgba(60, 50, 30, .16); }
.frame img{ object-position: 50% 50%; }

/* ---------- The alert: the page turns into the war room for one section ---------- */
.war{
  --bg: #01040a;
  --panel: #020a14;
  --line: rgba(47, 159, 230, .28);
  --text: #c8ecff;
  --muted: #7fa9c6;
  --accent: #6fd6ff;
  --on-accent: #01040a;
  --soft: #ff5252;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}
.war h2{ font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.war .eyebrow{ color: var(--accent); }
.war .clip .frame{ box-shadow: 0 0 28px rgba(47, 159, 230, .35); }
.war .fact-list dt{ color: var(--accent); }

/* On the narrowest phones the marked words and the eyebrow wrap, and the section links close up, or the page
   is pushed sideways. */
@media (max-width: 400px){
  .marked, .hero-heading > .eyebrow{ white-space: normal; }
  .nav nav{ gap: 12px; }
}