/* Dispatch — monochrome editorial theme (Linear "Now" layout language) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #08090a;
  --card: #0d0e0f;
  --card-hover: #131415;
  --line: #1d1e20;
  --fg: #f7f8f8;
  --dim: #8a8f98;
  --dim2: #5c6066;
  --accent: #f7f8f8;
  --radius: 10px;
  --radius-sm: 6px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 72px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Shell / Nav ===== */
.shell { max-width: 74rem; margin: 0 auto; padding: 0 var(--spacing-lg); }
.topnav {
  display: flex; align-items: center; gap: var(--spacing-xl);
  max-width: 74rem; margin: 0 auto; padding: 20px var(--spacing-lg);
  border-bottom: 1px solid var(--line);
}
.topnav .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--fg); text-decoration: none;
}
.topnav .brand .mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(135deg, #f7f8f8, #8a8f98);
  flex-shrink: 0;
}
.topnav nav { display: flex; align-items: center; gap: var(--spacing-lg); flex: 1; }
.topnav nav a { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.15s; }
.topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); }
.topnav .rss-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--dim);
  transition: color 0.15s, background 0.15s;
}
.topnav .rss-link:hover { color: var(--fg); background: var(--card); }

/* ===== Hero ===== */
.hero { max-width: 74rem; margin: 0 auto; padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-lg); }
.hero h1 {
  font-size: 48px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
}
.hero-controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg);
  margin-top: var(--spacing-xl); flex-wrap: wrap;
  padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--line);
}
.tabs { display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; }
.tabs a {
  color: var(--dim); text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: color 0.15s;
}
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="page"] { color: var(--fg); font-weight: 500; }
.search-row { display: flex; align-items: center; gap: var(--spacing-sm); }
.search-box { position: relative; }
.search-box input {
  width: 220px; background: var(--card); border: 1px solid var(--line); color: var(--fg);
  font-size: 13px; font-family: var(--font); padding: 9px 12px 9px 34px; border-radius: 999px;
  outline: none; transition: border-color 0.15s, width 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.search-box input:focus { border-color: var(--dim); width: 260px; }
.search-box input::placeholder { color: var(--dim2); }
.rss-icon { width: 16px; height: 16px; }
.search-results { display: none; max-width: 74rem; margin: 0 auto; padding: 0 var(--spacing-lg) var(--spacing-xl); }
.search-results.show { display: block; }
.search-results .result-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-results .result-item a { color: var(--fg); text-decoration: none; font-weight: 500; }
.search-results .result-item a:hover { color: var(--dim); }
.search-results .result-meta { color: var(--dim); font-size: 12px; margin-top: 2px; }
.search-count { color: var(--dim); font-size: 13px; margin-bottom: var(--spacing-sm); }
.hide-default { display: none !important; }

/* ===== Card grid ===== */
.card-grid {
  max-width: 74rem; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl) var(--spacing-lg);
}
.card { text-decoration: none; color: inherit; display: block; }
.card .thumb {
  aspect-ratio: 5 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--line); margin-bottom: var(--spacing-md);
  transition: border-color 0.15s;
}
.card .thumb svg { width: 100%; height: 100%; display: block; }
.card:hover .thumb { border-color: var(--dim2); }
.card h3 {
  font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 10px;
}
.card:hover h3 { color: var(--dim); }
.card .excerpt {
  color: var(--dim); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: var(--spacing-md);
}
.card .byline { color: var(--dim2); font-size: 13px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } }

/* ===== Section headers ===== */
.section { max-width: 74rem; margin: 0 auto; padding: var(--spacing-lg); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--spacing-lg); padding-top: var(--spacing-xl);
}
.section-head h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.section-head a { color: var(--dim); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.section-head a:hover { color: var(--fg); }

/* ===== Archive flat list ===== */
.post-list { list-style: none; }
.post-item {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-lg);
}
.post-item:first-child { border-top: 1px solid var(--line); }
.post-item a {
  color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color 0.15s; flex: 1 1 auto; min-width: 0;
}
.post-item a:hover { color: var(--dim); }
.post-meta {
  color: var(--dim2); font-size: 13px; white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-right: 6px;
  text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; line-height: 1.6;
}
.badge-dk { background: rgba(247, 166, 92, 0.14); color: #f7a65c; }
.badge-or { background: rgba(125, 211, 252, 0.14); color: #7dd3fc; }
.badge-al { background: rgba(216, 180, 254, 0.14); color: #d8b4fe; }
.badge-nw { background: rgba(110, 231, 183, 0.14); color: #6ee7b7; }
.empty-state { color: var(--dim); font-size: 13px; padding: var(--spacing-md) 0; }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: center;
  margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--line);
}
.pagi-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
  padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--dim);
  text-decoration: none; font-size: 13px; transition: all 0.15s;
}
.pagi-link:hover { border-color: var(--dim2); color: var(--fg); }
.pagi-link.active { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 600; }
.pagi-dots { color: var(--dim2); font-size: 13px; }

/* ===== Footer CTA ===== */
.cta-band {
  max-width: 74rem; margin: var(--spacing-2xl) auto 0; padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center; border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--spacing-lg); }
.cta-band .cta-buttons { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  text-decoration: none; transition: opacity 0.15s;
}
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-secondary { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.btn:hover { opacity: 0.85; }

/* ===== Footer ===== */
.site-footer {
  max-width: 74rem; margin: 0 auto; padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--spacing-xl);
}
.site-footer .brand-col .brand { font-weight: 600; font-size: 15px; margin-bottom: var(--spacing-sm); }
.site-footer .brand-col p { color: var(--dim2); font-size: 13px; line-height: 1.6; max-width: 220px; }
.site-footer h4 { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-md); font-weight: 500; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: var(--dim); text-decoration: none; font-size: 13.5px; transition: color 0.15s; }
.site-footer a:hover { color: var(--fg); }
@media (max-width: 700px) { .site-footer { grid-template-columns: 1fr 1fr; } }

@media (max-width: 700px) {
  .hero h1 { font-size: 32px; }
  .hero { padding-top: var(--spacing-2xl); }
  .hero-controls { flex-direction: column; align-items: flex-start; }
  .search-box input, .search-box input:focus { width: 100%; }
  .section-head h2 { font-size: 21px; }
  .topnav nav { display: none; }
  .post-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cta-band h2 { font-size: 24px; }
}

/* ===== Post pages ===== */
header { max-width: 44rem; margin: 0 auto; padding: var(--spacing-2xl) var(--spacing-lg) 0; }
header .back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--dim); text-decoration: none; font-size: 13px;
  margin-bottom: var(--spacing-lg); transition: color 0.15s;
}
header .back:hover { color: var(--fg); }
header h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: pretty; }
header .meta { color: var(--dim); font-size: 13.5px; margin-top: var(--spacing-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); }
@media (max-width: 480px) { header h1 { font-size: 24px; } }

.content, .post-body { max-width: 44rem; margin: 0 auto; padding: 0 var(--spacing-lg); }
.content h2, .post-body h2 { font-size: 22px; font-weight: 600; margin: var(--spacing-xl) 0 var(--spacing-sm); line-height: 1.3; scroll-margin-top: 80px; }
.content h2 .anchor-link, .post-body h2 .anchor-link { color: var(--dim); text-decoration: none; margin-right: 6px; opacity: 0; transition: opacity 0.15s; font-weight: 400; }
.content h2:hover .anchor-link, .post-body h2:hover .anchor-link { opacity: 1; }
.content h3, .post-body h3 { font-size: 18px; font-weight: 600; margin: var(--spacing-lg) 0 var(--spacing-sm); scroll-margin-top: 80px; }
.content p, .post-body p { margin: var(--spacing-md) 0; color: #c9cbce; }
.content a, .post-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.content a:hover, .post-body a:hover { text-decoration-color: var(--fg); }
.content code, .post-body code { background: var(--card); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; border: 1px solid var(--line); }
.content pre, .post-body pre { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--spacing-md); overflow-x: auto; margin: var(--spacing-lg) 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; line-height: 1.5; }
.content pre.mermaid, .post-body pre.mermaid { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--spacing-lg); overflow-x: auto; margin: var(--spacing-lg) 0; text-align: center; }
.content blockquote, .post-body blockquote { border-left: 2px solid var(--dim); padding: 4px var(--spacing-md); margin: var(--spacing-lg) 0; color: var(--dim); font-style: italic; }
.content ul, .content ol, .post-body ul, .post-body ol { margin: var(--spacing-md) 0; padding-left: var(--spacing-lg); color: #c9cbce; }
.content li, .post-body li { margin: 6px 0; }
.content img, .post-body img { max-width: 100%; border-radius: var(--radius); margin: var(--spacing-lg) 0; border: 1px solid var(--line); }
.content .sources-box, .post-sources { margin-top: var(--spacing-2xl); padding: var(--spacing-lg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--dim); }
.content .sources-box a, .post-sources a { color: var(--fg); }
.content .sources-box ul, .post-sources ul { margin: var(--spacing-sm) 0 0; padding-left: var(--spacing-lg); list-style: none; }
.content .sources-box li, .post-sources li { margin: 4px 0; }
.content .toc { margin-bottom: var(--spacing-xl); padding: var(--spacing-md) var(--spacing-lg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.content .toc summary { cursor: pointer; font-weight: 500; color: var(--dim); margin-bottom: var(--spacing-sm); }
.content .toc ul { margin: 0; padding-left: var(--spacing-lg); list-style: none; }
.content .toc li { margin: 3px 0; }
.content .toc a { color: var(--dim); text-decoration: none; }
.content .toc a:hover { color: var(--fg); }
.content hr, .post-body hr { border: none; border-top: 1px solid var(--line); margin: var(--spacing-2xl) 0; }
.content figure { margin: var(--spacing-lg) 0; }
.content figcaption { color: var(--dim); font-size: 12px; text-align: center; margin-top: var(--spacing-sm); }

footer { max-width: 44rem; margin: var(--spacing-2xl) auto 0; padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl); border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--fg); }

.post { max-width: 44rem; margin: 0 auto; padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl); }
.post .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); font-size: 13px; color: var(--dim); }
.post .post-meta .badge { margin-right: 0; }
.post h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--spacing-xl); text-wrap: pretty; }

table { width: 100%; border-collapse: collapse; margin: var(--spacing-lg) 0; font-size: 14px; line-height: 1.5; overflow-x: auto; display: block; }
thead { background: var(--card); }
th, td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--fg); white-space: nowrap; }
td { color: #c9cbce; }
tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
tbody tr:hover { background: rgba(255,255,255,0.03); }

@media (max-width: 480px) {
  .post h1 { font-size: 24px; }
  table { font-size: 12px; }
  th, td { padding: 6px 8px; }
}

/* ===== Bare .post prose (no inner .content/.post-body wrapper) ===== */
.post h2 { font-size: 22px; font-weight: 600; margin: var(--spacing-xl) 0 var(--spacing-sm); line-height: 1.3; scroll-margin-top: 80px; }
.post h3 { font-size: 18px; font-weight: 600; margin: var(--spacing-lg) 0 var(--spacing-sm); scroll-margin-top: 80px; }
.post > p, .post p { margin: var(--spacing-md) 0; color: #c9cbce; }
.post a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.post a:hover { text-decoration-color: var(--fg); }
.post code { background: var(--card); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; border: 1px solid var(--line); }
.post pre { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--spacing-md); overflow-x: auto; margin: var(--spacing-lg) 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; line-height: 1.5; }
.post pre code { border: none; padding: 0; background: none; }
.post blockquote { border-left: 2px solid var(--dim); padding: 4px var(--spacing-md); margin: var(--spacing-lg) 0; color: var(--dim); font-style: italic; }
.post ul, .post ol { margin: var(--spacing-md) 0; padding-left: var(--spacing-lg); color: #c9cbce; }
.post li { margin: 6px 0; }
.post img { max-width: 100%; border-radius: var(--radius); margin: var(--spacing-lg) 0; border: 1px solid var(--line); }
.post hr { border: none; border-top: 1px solid var(--line); margin: var(--spacing-2xl) 0; }
.post .table-wrapper { overflow-x: auto; margin: var(--spacing-lg) 0; }
.post .table-wrapper table { margin: 0; }
.post .reading-time, .post .tag { color: var(--dim); }
.post .tag { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; }

/* Related posts + FAQ */
.related-posts {
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.related-posts h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-sm);
}
.related-posts ul { list-style: none; padding: 0; }
.related-posts li { margin: 6px 0; }
.related-posts a { color: var(--accent); text-decoration: none; font-size: 13px; }
.related-posts a:hover { color: var(--accent-dim); text-decoration: underline; }