/* ============================================================
   COG — Citizens Observing Government
   Editorial-news aesthetic. Navy-dominant. Subtle flag accents.
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #0a1933;
  --navy-800: #122348;
  --navy-700: #1a3160;
  --navy-600: #1f4080;
  --navy-500: #2756a6;
  --blue-500: #2b7bd6;
  --blue-400: #4d94e0;
  --blue-300: #7eb3eb;
  --blue-50:  #eaf2fb;

  --flag-red: #b22234;
  --flag-red-soft: #d8636f;

  /* Surfaces (light) */
  --bg: #fbfaf7;          /* warm off-white, newspaper-y */
  --bg-elev: #ffffff;
  --bg-tint: #f3f1ec;
  --rule: #e2dfd8;
  --rule-strong: #cfcbc1;

  /* Text */
  --ink: #0e1a2e;
  --ink-2: #2b364a;
  --ink-3: #5a6478;
  --ink-4: #8a92a3;

  /* Accents */
  --accent: var(--blue-500);
  --accent-ink: var(--navy-800);

  /* Semantic */
  --hot: #c0392b;
  --gold: #b8860b;
  --good: #2f7d4a;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Georgia", serif;
  --sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(10, 25, 51, 0.06), 0 2px 8px rgba(10, 25, 51, 0.04);
  --shadow-2: 0 4px 20px rgba(10, 25, 51, 0.08), 0 1px 3px rgba(10, 25, 51, 0.06);
}

html.dark {
  --bg: #0a1019;
  --bg-elev: #111a2c;
  --bg-tint: #0e1626;
  --rule: #1f2a40;
  --rule-strong: #2a3754;

  --ink: #e9edf5;
  --ink-2: #c4ccdb;
  --ink-3: #8a96ae;
  --ink-4: #5a6680;

  --accent: var(--blue-400);
  --accent-ink: var(--blue-300);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

::selection { background: var(--navy-700); color: white; }

/* Utilities */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Eyebrow / kicker */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--flag-red);
  margin-right: 8px; vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Section heading */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.section-head .titles h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  margin: 6px 0 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-head .titles p {
  margin: 8px 0 0; color: var(--ink-3); max-width: 60ch;
}
.section-head .more {
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s;
}
.section-head .more:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  transition: all 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--navy-800); color: white;
}
.btn-primary:hover { background: var(--navy-700); }
html.dark .btn-primary { background: var(--blue-500); }
html.dark .btn-primary:hover { background: var(--blue-400); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.btn-ghost:hover { background: var(--bg-tint); }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-tint); color: var(--ink-2);
  border: 1px solid var(--rule);
}
.pill.solid { background: var(--navy-800); color: white; border-color: var(--navy-800); }
.pill.red   { background: rgba(178, 34, 52, 0.08); color: var(--flag-red); border-color: rgba(178, 34, 52, 0.25); }
html.dark .pill.red { background: rgba(216, 99, 111, 0.1); color: var(--flag-red-soft); }
.pill.gold  { background: rgba(184, 134, 11, 0.1); color: var(--gold); border-color: rgba(184, 134, 11, 0.25); }
.pill.blue  { background: var(--blue-50); color: var(--navy-700); border-color: rgba(43, 123, 214, 0.2); }
html.dark .pill.blue { background: rgba(43, 123, 214, 0.12); color: var(--blue-300); border-color: rgba(43, 123, 214, 0.3); }

/* Flag stripe accent */
.flag-stripe {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--navy-800) 0%, var(--navy-800) 33%,
    white 33%, white 66.6%,
    var(--flag-red) 66.6%, var(--flag-red) 100%
  );
}
html.dark .flag-stripe {
  background: linear-gradient(
    90deg,
    var(--navy-500) 0%, var(--navy-500) 33%,
    var(--ink-2) 33%, var(--ink-2) 66.6%,
    var(--flag-red-soft) 66.6%, var(--flag-red-soft) 100%
  );
}

/* Star pattern utility */
.stars-bg {
  background-image:
    radial-gradient(circle at 20% 30%, var(--rule) 1.2px, transparent 1.6px),
    radial-gradient(circle at 60% 70%, var(--rule) 1.2px, transparent 1.6px),
    radial-gradient(circle at 80% 20%, var(--rule) 1px, transparent 1.4px);
  background-size: 80px 80px, 100px 100px, 60px 60px;
}

/* Cards */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--rule-strong); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}