/* ============================================================
   THE DISPATCH — dossier theme
   Light "field paper" + dark "night archive" via [data-theme]
   ============================================================ */

:root {
  /* palette — exact OKLCH tokens from anmolbakshi.com */
  --paper: oklch(0.965 0.012 82);
  --paper-2: oklch(0.935 0.014 80);
  --ink: oklch(0.205 0.015 250);
  --ink-soft: oklch(0.38 0.013 250);
  --ink-faint: oklch(0.55 0.010 250);
  --red: oklch(0.56 0.155 32);
  --red-soft: oklch(0.46 0.155 32);
  --red-rgb: 180, 68, 30;
  --hairline: oklch(0.78 0.012 80);
  --hairline-strong: oklch(0.62 0.012 80);
  --card: oklch(0.935 0.014 80);
  --code-bg: oklch(0.205 0.015 250);
  --code-ink: oklch(0.93 0.018 82);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* paper-grain dots — matches anmolbakshi.com */
  --grain-1: rgba(120, 90, 40, 0.025);
  --grain-2: rgba(80, 60, 30, 0.020);
  --grain-3: rgba(0, 0, 0, 0.018);
  --grain-blend: multiply;
  --grain-opacity: 0.7;

  color-scheme: light;
}

[data-theme="dark"] {
  --paper: oklch(0.165 0.012 250);
  --paper-2: oklch(0.205 0.013 250);
  --ink: oklch(0.93 0.018 82);
  --ink-soft: oklch(0.78 0.018 82);
  --ink-faint: oklch(0.60 0.014 82);
  --red: oklch(0.68 0.165 35);
  --red-soft: oklch(0.58 0.165 35);
  --red-rgb: 230, 110, 70;
  --hairline: oklch(0.34 0.014 250);
  --hairline-strong: oklch(0.46 0.016 250);
  --card: oklch(0.205 0.013 250);
  --code-bg: oklch(0.125 0.012 250);
  --code-ink: oklch(0.93 0.018 82);

  /* paper-grain dots — dark mode flips to light specks */
  --grain-1: rgba(255, 230, 180, 0.020);
  --grain-2: rgba(255, 210, 160, 0.016);
  --grain-3: rgba(255, 245, 220, 0.014);
  --grain-blend: screen;
  --grain-opacity: 0.55;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background 0.35s ease, color 0.35s ease;
}

::selection { background: var(--red); color: var(--paper); }

/* paper grain overlay — same technique as the main dossier site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, var(--grain-1) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 70%, var(--grain-2) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--grain-3) 0 1px, transparent 2px);
  background-size: 7px 7px, 11px 11px, 5px 5px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: var(--grain-blend);
  opacity: var(--grain-opacity);
}

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.62rem;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1.5px solid var(--red);
  outline-offset: 3px;
}

/* ---------- page frame ---------- */

.frame {
  min-height: 100vh;
  margin: 10px;
  border: 1px solid var(--hairline);
  position: relative;
  padding: 0 clamp(20px, 5vw, 72px) 48px;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.corner::before, .corner::after {
  content: ""; position: absolute; background: var(--hairline-strong);
}
.corner::before { width: 100%; height: 1px; top: 50%; }
.corner::after { width: 1px; height: 100%; left: 50%; }
.corner.tl { top: -2px; left: -2px; }
.corner.tr { top: -2px; right: -2px; }
.corner.bl { bottom: -2px; left: -2px; }
.corner.br { bottom: -2px; right: -2px; }

/* ---------- header ---------- */

.site-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 14px;
  flex-wrap: wrap;
}
.badge {
  display: inline-block;
  border: 1px solid var(--red);
  padding: 7px 12px 6px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.badge:hover { background: var(--red); color: var(--paper); }
.head-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.head-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 8px;
  box-shadow: 0 0 0 0 var(--red);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(var(--red-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0); }
}
.head-link {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.head-link:hover { border-color: var(--red); color: var(--red); }

.theme-toggle {
  width: 34px; height: 34px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, transform 0.3s;
}
.theme-toggle:hover { color: var(--red); border-color: var(--red); transform: rotate(20deg); }
.theme-toggle svg { width: 15px; height: 15px; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
  text-align: center;
  color: var(--ink-soft);
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ticker .sep { color: var(--red); }

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 9vh, 110px) 0 40px; position: relative; }
.hero-kicker {
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.hero-kicker::after {
  content: "";
  flex: 0 0 90px;
  height: 1px;
  background: var(--hairline-strong);
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero h1 em { font-style: italic; }
.hero-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--ink);
  border-left: 2px solid var(--red);
  padding-left: 18px;
  margin-top: 34px;
  max-width: 560px;
}
.hero-sub {
  margin-top: 20px;
  max-width: 560px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.cross { position: absolute; color: var(--red); font-family: var(--mono); font-size: 1rem; }
.cross.c1 { top: 20px; right: 8px; }
.cross.c2 { bottom: 0; left: 40%; }

/* ---------- controls (search + tags) ---------- */

.controls {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.search-wrap { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 26px 10px 2px;
}
.search-wrap input::placeholder { color: var(--ink-faint); }
.search-wrap svg {
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--ink-faint);
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag-row .tag-label { color: var(--ink-faint); margin-right: 4px; }
.tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-soft);
  padding: 5px 10px 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.tag:hover { border-color: var(--red); color: var(--red); }
.tag.active { background: var(--red); border-color: var(--red); color: var(--paper); }
a.tag { display: inline-block; }

/* ---------- archive list ---------- */

.archive { padding: 10px 0 30px; }
.archive-meta {
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  padding: 18px 0 8px;
}
.entry {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.2s;
  position: relative;
}
.entry:hover { background: linear-gradient(90deg, transparent, var(--paper-2) 18%, var(--paper-2) 82%, transparent); }
.entry-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--red);
}
.entry-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
}
.entry a .entry-title { transition: color 0.2s; }
.entry a:hover .entry-title { color: var(--red); }
.entry-excerpt {
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-soft);
  margin-top: 8px;
  font-size: 1.02rem;
  max-width: 640px;
}
.entry-tags { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.entry-date {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  text-align: right;
}
.no-results {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: none;
}
.no-results.is-shown { display: block; }

/* ---------- article (post page) ---------- */

.post-head { padding: clamp(40px, 8vh, 90px) 0 30px; max-width: 860px; margin: 0 auto; }
.post-kicker { color: var(--red); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.post-kicker::after { content: ""; flex: 0 0 70px; height: 1px; background: var(--hairline-strong); }
.post-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1.05;
}
.post-head .standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--red);
  padding-left: 18px;
  margin-top: 26px;
}
.post-byline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 34px;
  padding: 12px 0;
  color: var(--ink-soft);
}

.article { max-width: 720px; margin: 0 auto; padding: 44px 0 30px; }
.article p { margin-bottom: 1.4em; line-height: 1.72; color: var(--ink); }
.article > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  padding: 4px 10px 0 0;
  color: var(--red);
}
.article h2, .article h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 1.8em 0 0.7em;
  line-height: 1.2;
}
.article h2 { font-size: 1.9rem; }
.article h3 { font-size: 1.4rem; font-style: italic; font-weight: 400; }
.article a { color: var(--red); border-bottom: 1px solid var(--hairline-strong); transition: border-color 0.2s; }
.article a:hover { border-color: var(--red); }
.article ul, .article ol { margin: 0 0 1.4em 1.4em; }
.article li { margin-bottom: 0.45em; }
.article li::marker { color: var(--red); }
.article blockquote {
  border-left: 2px solid var(--red);
  padding: 4px 0 4px 20px;
  margin: 1.8em 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.article code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 2px 6px;
}
.article pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 20px 22px;
  overflow-x: auto;
  margin: 1.8em 0;
  border: 1px solid var(--hairline);
}
.article pre code { background: none; border: none; padding: 0; font-size: 0.8rem; line-height: 1.6; color: inherit; }
.article img { max-width: 100%; height: auto; display: block; margin: 1.8em auto; border: 1px solid var(--hairline); }
.article table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 0.92rem; }
.article th {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--hairline-strong);
  padding: 10px 12px 8px 0;
}
.article td { border-bottom: 1px solid var(--hairline); padding: 10px 12px 10px 0; vertical-align: top; }
.article tbody tr:last-child td { border-bottom: none; }
.article td a, .article th a { border-bottom: none; }
.article hr { border: none; border-top: 1px solid var(--hairline); margin: 2.4em auto; width: 40%; position: relative; }

.fig-rule {
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  max-width: 720px;
  margin: 10px auto 0;
}

/* ---------- post nav / footer ---------- */

.post-nav {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.post-nav a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.post-nav a:hover { color: var(--red); }

.site-foot {
  margin-top: 60px;
  border-top: 1px solid var(--hairline);
  padding: 20px 0 6px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--ink-faint);
}
.site-foot a { transition: color 0.2s; }
.site-foot a:hover { color: var(--red); }

/* ---------- 404 ---------- */

.nf { text-align: center; padding: 16vh 0 10vh; }
.nf .code {
  font-family: var(--serif);
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
}
.nf .msg { color: var(--ink-soft); font-style: italic; font-family: var(--serif); font-size: 1.2rem; margin: 18px 0 30px; }
.nf-alert { color: var(--red); margin-bottom: 18px; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px 22px 12px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: all 0.2s;
  background: transparent;
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--red); border-color: var(--red); }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry-date { text-align: left; }
  .head-title { position: static; transform: none; order: 3; flex-basis: 100%; }
  .frame { margin: 6px; padding: 0 18px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-dot { animation: none; }
  * { transition: none !important; }
}

/* ============================================================
   Content column cap — match anmolbakshi.com's centered measure so
   horizontal rules (ticker, controls, archive, footer) stop well inside
   the page frame instead of running to the border.
   ============================================================ */
.site-head, .ticker, .hero, .controls, .archive, .site-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- scroll reveal (mirrors anmolbakshi.com dossier) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
  .reveal.is-in { opacity: 1; transform: translateY(0); }

  .reveal-title { opacity: 0; transform: translateY(36px); clip-path: inset(0 0 100% 0); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1); }
  .reveal-title.is-in { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }

  .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
  .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .11s; }
  .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .17s; }
  .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .23s; }
  .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .29s; }
  .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
  .reveal-stagger.is-in > *:nth-child(7) { transition-delay: .41s; }
  .reveal-stagger.is-in > *:nth-child(8) { transition-delay: .47s; }
  .reveal-stagger.is-in > *:nth-child(n+9) { transition-delay: .53s; }
}

@media print {
  .theme-toggle, .controls, .post-nav, .head-right { display: none; }
  body { background: #fff; color: #000; }
}