/* =========================================================
   Design tokens — warm editorial, teal accent, dense feed
   Fonts: Satoshi (body) + system monospace (code/logo)
   ========================================================= */

:root, [data-theme="light"] {
  --color-bg:             #f7f6f2;
  --color-surface:        #f0ede8;
  --color-border:         rgba(40, 37, 29, 0.10);
  --color-divider:        rgba(40, 37, 29, 0.07);
  --color-text:           #28251d;
  --color-text-muted:     #7a7974;
  --color-text-faint:     #bab9b4;
  --color-text-visited:   #9e9a92;
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-tag-bg:         rgba(1, 105, 111, 0.08);
  --color-tag-text:       #01696f;
  --color-tag-border:     rgba(1, 105, 111, 0.20);
  --font-body:   'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --radius-sm:   3px;
  --radius-full: 9999px;
  --transition:  150ms ease;
  --content-default: 820px;
  --content-narrow:  640px;
}

[data-theme="dark"] {
  --color-bg:             #171614;
  --color-surface:        #1d1c1a;
  --color-border:         rgba(205, 204, 202, 0.10);
  --color-divider:        rgba(205, 204, 202, 0.07);
  --color-text:           #cdccca;
  --color-text-muted:     #797876;
  --color-text-faint:     #5a5957;
  --color-text-visited:   #686663;
  --color-primary:        #4f98a3;
  --color-primary-hover:  #227f8b;
  --color-tag-bg:         rgba(79, 152, 163, 0.12);
  --color-tag-text:       #4f98a3;
  --color-tag-border:     rgba(79, 152, 163, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             #171614;
    --color-surface:        #1d1c1a;
    --color-border:         rgba(205, 204, 202, 0.10);
    --color-divider:        rgba(205, 204, 202, 0.07);
    --color-text:           #cdccca;
    --color-text-muted:     #797876;
    --color-text-faint:     #5a5957;
    --color-text-visited:   #686663;
    --color-primary:        #4f98a3;
    --color-primary-hover:  #227f8b;
    --color-tag-bg:         rgba(79, 152, 163, 0.12);
    --color-tag-text:       #4f98a3;
    --color-tag-border:     rgba(79, 152, 163, 0.25);
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
code, pre { font-family: var(--font-mono); font-size: 0.875em; }

/* Layout */
.page { min-height: 100vh; }
.content-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* Nav */
.nav-wrapper {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
  max-width: var(--content-default);
  margin: 0 auto;
}
.wordmark {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.wordmark-symbol {
  color: var(--color-primary);
  font-style: italic;
}
.nav-links { display: flex; gap: var(--space-4); flex: 1; }
.nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--color-text); }
.rss-link {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--color-text-faint);
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  flex-shrink: 0;
}
.rss-link:hover { color: var(--color-primary); }
.rss-link svg { width: 16px; height: 16px; }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--color-text); }
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="light"] .icon-moon,
[data-theme="dark"]  .icon-sun  { display: none; }
[data-theme="light"] .icon-sun,
[data-theme="dark"]  .icon-moon { display: block; }

/* Feed header / filters */
.feed-header {
  max-width: var(--content-default);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.feed-tagline { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); font-style: italic; }
.filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filter-pill {
  font-size: var(--text-xs); color: var(--color-text-muted);
  padding: 2px 10px; border-radius: var(--radius-full);
  border: 1px solid transparent; transition: all var(--transition);
}
.filter-pill:hover { color: var(--color-text); border-color: var(--color-border); }
.filter-pill.active {
  color: var(--color-primary);
  background: var(--color-tag-bg);
  border-color: var(--color-tag-border);
}

/* Feed list */
.feed {
  list-style: none;
  max-width: var(--content-default);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.link-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: background var(--transition);
}
.link-row:hover {
  background: var(--color-surface);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.row-num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-faint);
  min-width: 2ch; text-align: right; padding-top: 2px; flex-shrink: 0;
}
.link-body { flex: 1; min-width: 0; }
.link-title {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text); display: block; margin-bottom: 4px; line-height: 1.4;
}
.link-title:hover { color: var(--color-primary); }
.link-title:visited { color: var(--color-text-visited); }
.link-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.link-time {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-faint); margin-left: auto;
}

/* Tag badges */
.tag-badge {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 500; white-space: nowrap;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border: 1px solid var(--color-tag-border);
  transition: opacity var(--transition);
}
.tag-badge:hover { opacity: 0.8; }
.tag-source {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* Pagination */
.pagination {
  max-width: var(--content-default);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
  display: flex; justify-content: flex-end;
}
.pagination-next,
.pagination-prev {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.pagination-next:hover,
.pagination-prev:hover { color: var(--color-text); border-color: var(--color-text-muted); }

/* Empty state */
.empty-state {
  max-width: var(--content-default);
  margin: var(--space-12) auto;
  padding: 0 var(--space-4);
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.empty-state code {
  background: var(--color-surface); padding: 1px 5px;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}

/* Static pages */
.page-heading {
  font-size: 1.5rem; font-weight: 700;
  color: var(--color-text); margin-bottom: var(--space-2);
}
.muted { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.muted a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.back-link { font-size: var(--text-sm); color: var(--color-text-muted); display: inline-block; margin-bottom: var(--space-4); }
.back-link:hover { color: var(--color-text); }
.post-header { margin-bottom: var(--space-8); }
.post-header h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-3); }
.post-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* Prose */
.prose { font-size: var(--text-base); line-height: 1.75; color: var(--color-text); }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.prose p  { margin-bottom: 1.25rem; color: var(--color-text-muted); }
.prose a  { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; color: var(--color-text-muted); }
.prose li { margin-bottom: 0.375rem; }
.prose code { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1px 5px; border-radius: var(--radius-sm); }
.prose pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: var(--space-4); overflow-x: auto; margin-bottom: 1.25rem; }
.prose pre code { background: none; border: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); color: var(--color-text-muted); margin-bottom: 1.25rem; }

/* Now page — Bluesky feed */
.now-section-heading {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-8); border-top: 1px solid var(--color-divider);
}
.now-feed { list-style: none; display: grid; gap: 0; }
.now-post {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.now-post:last-child { border-bottom: none; }
.now-repost-label {
  display: block; font-size: var(--text-xs);
  color: var(--color-text-faint); margin-bottom: var(--space-1);
  font-family: var(--font-mono);
}
.now-post-link {
  display: block; font-size: var(--text-sm); line-height: 1.55;
  color: var(--color-text); white-space: pre-wrap; word-break: break-word;
}
.now-post-link:hover { color: var(--color-primary); }
.now-embed-url {
  display: inline-block; margin-top: var(--space-1);
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--color-primary);
}
.now-post-meta { margin-top: var(--space-1); }

/* About page */
.about-header {
  display: flex; gap: var(--space-8); align-items: center;
  margin-bottom: var(--space-8);
}
.about-header-body { flex: 1; min-width: 0; }
.about-header-body .page-heading { margin-bottom: var(--space-4); }
.about-avatar {
  width: 144px; height: 144px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.about-bio { font-size: var(--text-base); line-height: 1.75; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.about-bio strong { color: var(--color-text); font-weight: 600; }
.about-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.about-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); transition: all var(--transition);
}
.about-link:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.about-section-heading {
  font-size: var(--text-base); font-weight: 600; color: var(--color-text);
  margin: var(--space-8) 0 var(--space-2);
  padding-top: var(--space-8); border-top: 1px solid var(--color-divider);
}

/* Mobile */
@media (max-width: 600px) {
  .nav { gap: var(--space-3); }
  .nav-links { gap: var(--space-3); }
  .nav-link { font-size: 11px; }
  .row-num { display: none; }
  .link-time { margin-left: 0; }
  .link-meta { gap: var(--space-1); }
  .about-header { flex-direction: column; align-items: center; text-align: center; }
  .about-links { justify-content: center; }
}