/* Meridian — journal-grade serif body, sans display.
   Light by default with a dark-mode toggle via prefers-color-scheme. */

:root {
  --bg: #f8f7f3;
  --paper: #ffffff;
  --ink: #15161a;
  --ink-soft: #4a4d55;
  --ink-faint: #7a7d85;
  --rule: #e3e1da;
  --pill-bg: #f1efe8;
  --pill-bg-hover: #e6e2d4;
  --pill-border: #d6d3c8;
  --accent: #8b2a1f;
  --accent-soft: #b94c3c;
  --green: #2c5d3f;
  --amber: #a86c0a;
  --blue: #1f4a7a;
  --serif: "Iowan Old Style", "Iowan", "Palatino", "Georgia", serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, monospace;
  --measure: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14141a;
    --paper: #1c1c24;
    --ink: #ebe9e0;
    --ink-soft: #b3b1a8;
    --ink-faint: #8a887e;
    --rule: #2c2c36;
    --pill-bg: #25252f;
    --pill-bg-hover: #2f2f3a;
    --pill-border: #3a3a44;
    --accent: #d4624f;
    --accent-soft: #e88673;
    --green: #6cb481;
    --amber: #d5a849;
    --blue: #6fa3d4;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }

/* ---------- Header ---------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.site-header .bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.brand-mark {
  display: inline-block;
  width: 1.6rem; height: 1.6rem;
  background: var(--accent); color: var(--paper);
  border-radius: 50%;
  text-align: center; line-height: 1.6rem;
  font-size: 1rem;
}
.brand-name { font-size: 1.1rem; }

.primary-nav { display: flex; gap: 1.25rem; flex: 1; }
.primary-nav a {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 0.9rem;
  border-bottom: none;
}
.primary-nav a:hover { color: var(--ink); }

.search input {
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  width: 14rem;
}

/* ---------- Page wrapper ---------- */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.page-title {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

/* ---------- Feed ---------- */

.conflicts-strip {
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.strip-title {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}
.conflict-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.conflict-pill {
  font-family: var(--sans);
  font-size: 0.85rem;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-bottom: 1px solid var(--pill-border);
}
.conflict-pill:hover { background: var(--pill-bg-hover); border-bottom-color: var(--pill-border); }
.conflict-pill .dot {
  display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--green);
}
.conflict-pill .dot.status-active { background: var(--accent); }
.conflict-pill .dot.status-frozen { background: var(--amber); }

.feed-list { max-width: 56rem; }
.brief-card {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.brief-card header {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.brief-card h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.brief-card h2 a { color: var(--ink); border-bottom: none; }
.brief-card h2 a:hover { color: var(--accent); }
.brief-card .excerpt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.product-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: var(--pill-bg);
  color: var(--ink-soft);
  border: 1px solid var(--pill-border);
}
.tag-sitrep { background: rgba(180,120,30,0.12); color: var(--amber); }
.tag-intsum { background: rgba(31,74,122,0.12); color: var(--blue); }
.tag-synthesis { background: rgba(44,93,63,0.12); color: var(--green); }

/* ---------- Brief page ---------- */

.brief { max-width: var(--measure); margin: 0 auto; }
.brief-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--rule); }
.brief-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin-bottom: 0.75rem;
}
.brief-meta .conflict-link { color: var(--ink-soft); border: 1px solid var(--rule); padding: 0.15rem 0.5rem; border-radius: 3px; }
.brief-header h1 {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.005em;
}
.byline {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}

.brief-body { font-size: 1.08rem; }
.brief-body h1, .brief-body h2, .brief-body h3, .brief-body h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2rem;
}
.brief-body h2 { font-size: 1.4rem; }
.brief-body h3 { font-size: 1.15rem; color: var(--ink-soft); }
.brief-body p { margin: 0 0 1rem; }
.brief-body ul, .brief-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.brief-body li { margin-bottom: 0.4rem; }
.brief-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  color: var(--ink-soft);
  background: var(--pill-bg);
}
.brief-body code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--pill-bg);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.brief-body pre {
  background: var(--pill-bg);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9rem;
}
.brief-body pre code { background: none; padding: 0; }
.brief-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.brief-body th, .brief-body td {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.brief-body th { font-family: var(--sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.brief-body hr { border: none; border-top: 1px solid var(--rule); margin: 2rem 0; }

.brief-sources, .brief-redteam, .brief-entities {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.brief-sources h3, .brief-redteam h3, .brief-entities h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
}
.brief-sources ul { padding-left: 1.25rem; font-size: 0.92rem; color: var(--ink-soft); }
.redteam-body { font-size: 0.95rem; color: var(--ink-soft); white-space: pre-wrap; font-family: var(--mono); }

/* ---------- Entity pills ---------- */

.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  color: var(--ink);
  border-bottom: 1px solid var(--pill-border);
  white-space: nowrap;
}
.pill:hover { background: var(--pill-bg-hover); border-bottom-color: var(--pill-border); color: var(--accent); }
.pill .count {
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: 0.4rem;
  padding-left: 0.4rem;
  border-left: 1px solid var(--pill-border);
}
.entity-pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}

/* In-prose pills (auto-linked) - lighter, inline-friendly */
.brief-body .pill {
  font-family: var(--serif);
  font-size: 1em;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  border-bottom: 1px solid rgba(139,42,31,0.2);
  border-radius: 0;
  white-space: normal;
}
.brief-body .pill:hover { background: var(--pill-bg); border-bottom-color: var(--accent); }

/* ---------- Entity page ---------- */

.entity { max-width: 60rem; margin: 0 auto; }
.entity-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--rule); }
.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: flex; gap: 0.75rem; margin-bottom: 0.5rem;
}
.entity-header h1 {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.aliases, .description, .parent {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0.4rem 0;
}
.aliases { font-style: italic; font-size: 0.9rem; }

.entity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 800px) { .entity-grid { grid-template-columns: 1fr; } }

.entity-section h2 {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.entity-section h2 .count {
  font-size: 0.85em;
  color: var(--ink-faint);
  margin-left: 0.5rem;
}
.entity-section ul { list-style: none; padding: 0; margin: 0; }
.entity-section.relationships .rel-group { margin-bottom: 1.25rem; }
.rel-type {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

.alignment {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--pill-bg);
  color: var(--ink-soft);
}
.alignment-belligerent { background: rgba(139,42,31,0.12); color: var(--accent); }
.alignment-backer { background: rgba(180,120,30,0.12); color: var(--amber); }
.alignment-mediator { background: rgba(44,93,63,0.12); color: var(--green); }

.brief-list { list-style: none; padding: 0; }
.brief-list li { border-bottom: 1px solid var(--rule); padding: 0.5rem 0; }
.brief-list li:last-child { border-bottom: none; }
.brief-list a {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  color: var(--ink);
  border-bottom: none;
}
.brief-list a:hover .brief-title { color: var(--accent); }
.brief-list time {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.brief-title { font-family: var(--serif); font-size: 0.95rem; }

/* ---------- Conflict page ---------- */

.conflict { max-width: 60rem; margin: 0 auto; }
.conflict-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--rule); }
.conflict-header h1 { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; margin: 0; }
.conflict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .conflict-grid { grid-template-columns: 1fr; } }

.actor-group { margin-bottom: 1.5rem; }
.actor-group h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}
.actor-group.alignment-belligerent h3 { color: var(--accent); }
.actor-group.alignment-backer h3 { color: var(--amber); }
.actor-group.alignment-mediator h3 { color: var(--green); }

.timeline-event {
  border-left: 3px solid var(--rule);
  padding: 0.5rem 0 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.timeline-event.assessment-escalating { border-left-color: var(--accent); }
.timeline-event.assessment-stable { border-left-color: var(--ink-soft); }
.timeline-event.assessment-de-escalating { border-left-color: var(--green); }
.timeline-event.assessment-crisis { border-left-color: var(--accent); background: rgba(139,42,31,0.06); }
.timeline-event time { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-right: 0.5rem; }
.timeline-event .assessment {
  font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: var(--pill-bg); color: var(--ink-soft);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  padding: 2rem 1.5rem;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  transform: translateX(100%);
  transition: transform 200ms ease;
  z-index: 100;
}
.sidebar.open { transform: translateX(0); }
.sidebar[hidden] { display: block; }  /* override default to allow transitions */
.sidebar h2 { font-family: var(--serif); margin-top: 0; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  margin-top: 4rem;
}
.site-footer .bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- Sidebar fragment (/api/sidebar/) ---------- */

.sidebar-close {
  position: absolute;
  top: 0.75rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  color: var(--ink-faint);
}
.sidebar-close:hover { color: var(--ink); }

.mer-sidebar-head {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.mer-sidebar-type {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}
.mer-sidebar-name {
  margin: 0 0 0.25rem 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}
.mer-sidebar-name a { color: var(--ink); text-decoration: none; }
.mer-sidebar-name a:hover { text-decoration: underline; }
.mer-sidebar-aliases {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-style: italic;
}
.mer-sidebar-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1rem 0;
}
.mer-sidebar-section {
  margin-bottom: 1.25rem;
}
.mer-sidebar-section h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 0 0 0.4rem 0;
  font-weight: 600;
}
.mer-sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.mer-sidebar-section li { margin-bottom: 0.3rem; }
.mer-alignment {
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-family: var(--sans);
}
.mer-rel-type {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding: 0.1rem 0.35rem;
  background: var(--pill-bg);
  border-radius: 3px;
  margin-right: 0.3rem;
}
.mer-conf {
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-family: var(--sans);
}
.mer-brief-date {
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-family: var(--sans);
  display: block;
}
.mer-sidebar-foot {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.mer-open-full {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.mer-open-full:hover { text-decoration: underline; }