/* The Wire — shared styles for the Agents & Humans news desk.
   Same paper/ink editorial DNA as the main site, faster pulse. */

:root {
  --ink: #14120f;
  --paper: #f5f2ec;
  --accent: #b5432a;
  --steel: #3e6a92;
  --muted: #6a635a;
  --rule: #d4cfc5;
  --highlight: #e8e0d0;
  --body-text: #3a3630;
  --card-bg: #fdfbf7;
  --toggle-track: #8e857a;
  /* aurora palette — read by aurora.js from computed style */
  --aurora-1: #c96b4e;
  --aurora-2: #4a7aa8;
  --aurora-3: #7a9471;
  --aurora-4: #cfa14c;
}

[data-theme="dark"] {
  --ink: #ece8e2;
  --paper: #191816;
  --accent: #e8654a;
  --steel: #7da3c4;
  --muted: #948d82;
  --rule: #363330;
  --highlight: #262420;
  --body-text: #c6c1b9;
  --card-bg: #22201d;
  --toggle-track: #555250;
  --aurora-1: #e8654a;
  --aurora-2: #5f93c4;
  --aurora-3: #7fae8a;
  --aurora-4: #d9b05e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  padding: 44px 28px 72px;
}

.wire-page { max-width: 1020px; margin: 0 auto; }
.article-page { max-width: 780px; margin: 0 auto; }

/* ── chrome shared with the main site ─────────────────────────── */
.theme-toggle {
  position: fixed; top: 16px; right: 24px;
  display: flex; align-items: center; gap: 8px; z-index: 100;
}
.theme-toggle label { font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle-switch {
  position: relative; width: 36px; height: 20px;
  background: var(--toggle-track); border-radius: 10px;
  cursor: pointer; transition: background 0.2s;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; background: var(--paper); border-radius: 50%;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.active { background: var(--accent); }
.toggle-switch.active::after { transform: translateX(16px); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  letter-spacing: 0.05em; margin-bottom: 22px; transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

/* ── wire masthead ────────────────────────────────────────────── */
.wire-masthead {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 0 18px; margin-bottom: 10px;
}
.wire-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.wire-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.02;
  text-wrap: balance;
}
.wire-title em { font-style: italic; color: var(--accent); }
.wire-sub {
  font-size: 14px; color: var(--muted); max-width: 60ch; margin-top: 10px;
}
.dateline-strip {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; color: var(--muted);
  padding: 10px 0; border-bottom: 1px solid var(--rule); margin-bottom: 36px;
}
.dateline-strip a { color: var(--muted); text-decoration: none; }
.dateline-strip a:hover { color: var(--accent); }

/* ── desk chips ───────────────────────────────────────────────── */
.desk {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--rule);
  color: var(--dc, var(--accent)); border-color: color-mix(in srgb, var(--dc, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--dc, var(--accent)) 9%, transparent);
}
.desk-market { --dc: var(--aurora-4); }
.desk-devtools { --dc: var(--steel); }
.desk-mcp { --dc: var(--aurora-3); }
.desk-coding { --dc: var(--accent); }

/* ── story cards ──────────────────────────────────────────────── */
.wire-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
}
.story { grid-column: span 1; text-decoration: none; color: inherit; display: block; }
.story.lead { grid-column: 1 / -1; }
@media (max-width: 660px) { .wire-grid { grid-template-columns: 1fr; } }

.story-art {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); background: var(--card-bg);
  aspect-ratio: 16 / 9; margin-bottom: 14px;
}
.story.lead .story-art { aspect-ratio: 21 / 8; }
.story-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-art::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  pointer-events: none;
}

.story-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.story h2, .story h3 {
  font-family: 'Playfair Display', serif; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.16; text-wrap: balance;
  transition: color 0.18s;
}
.story.lead h2 { font-size: clamp(24px, 3.6vw, 34px); }
.story h3 { font-size: 20px; }
.story:hover h2, .story:hover h3 { color: var(--accent); }
.story .dek { font-size: 13.5px; color: var(--body-text); margin-top: 8px; max-width: 70ch; }
.story .byline { font-size: 12px; color: var(--muted); margin-top: 10px; }

.wire-footer {
  border-top: 1px solid var(--rule); margin-top: 52px; padding-top: 16px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.wire-footer a { color: var(--muted); }
.wire-footer a:hover { color: var(--accent); }

/* ── article pages ────────────────────────────────────────────── */
.hero-art {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule); background: var(--card-bg);
  aspect-ratio: 21 / 9; margin: 6px 0 26px;
}
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.art-masthead { padding: 4px 0 0; }
.art-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 14px 0 18px;
}
h1.art-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 42px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}
h1.art-title em { font-style: italic; color: var(--accent); }
.art-dek {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 17px; line-height: 1.6; color: var(--body-text);
  margin: 16px 0 8px; max-width: 62ch;
}

.art-body { max-width: 66ch; }
.art-body p { font-size: 15px; color: var(--body-text); margin: 0 0 18px; }
.art-body p strong { font-weight: 500; color: var(--ink); }
.art-body h2 {
  font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700;
  margin: 30px 0 12px; letter-spacing: -0.01em;
}
.art-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.art-body a:hover { border-bottom-color: var(--accent); }
.art-body ul { margin: 0 0 18px 18px; font-size: 14.5px; color: var(--body-text); }
.art-body li { margin-bottom: 6px; }

.sourcebar {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 26px;
}
.sourcebar a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--card-bg); border: 1px solid var(--rule);
  font-size: 12px; color: var(--ink); text-decoration: none; font-weight: 500;
  transition: border-color 0.2s;
}
.sourcebar a:hover { border-color: var(--accent); }

.disclosure {
  border-top: 3px solid var(--ink); margin-top: 40px; padding: 16px 0 0;
  font-size: 12.5px; color: var(--muted); max-width: 70ch;
}
.art-footer {
  border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 14px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.art-footer a { color: var(--muted); }
.art-footer a:hover { color: var(--accent); }

/* page-load choreography (matches main site) */
.wire-page > *, .article-page > * { animation: fadeUp 0.4s ease both; }
.wire-page > *:nth-child(2), .article-page > *:nth-child(2) { animation-delay: 0.05s; }
.wire-page > *:nth-child(3), .article-page > *:nth-child(3) { animation-delay: 0.1s; }
.wire-page > *:nth-child(4), .article-page > *:nth-child(4) { animation-delay: 0.15s; }
.wire-page > *:nth-child(5), .article-page > *:nth-child(5) { animation-delay: 0.2s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wire-page > *, .article-page > * { animation: none; }
}