/* ============================================================
   Heretik theme: design system locked
   No em dashes anywhere. Ever.
   ============================================================ */

/* Self-hosted fonts (latin subset, WOFF2). No third-party requests. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-sans-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-500.woff2') format('woff2');
}

:root {
  --bg: #0D0D0D;
  --surface: #111;
  --surface-2: #141414;
  --border: #1A1A1A;
  --border-2: #2A2A2A;
  --text: #F0F0EC;
  --text-2: #C0C0BC;
  --muted: #888;     /* 5.4:1 on near-black, passes WCAG AA normal */
  --muted-2: #888;   /* was #666 (3.5:1, fails AA normal). Bumped for accessibility */
  --muted-3: #9A9A9A; /* was #444 (1.4:1, blocker). Now 6.1:1, passes AA */
  --muted-4: #757575; /* was #333 (1.0:1). Now 4.5:1, passes AA at the threshold */

  --brand: #0066FF;
  --philosophy: #FFD700;
  --tech: #00E5FF;
  --rant: #FF2D2D;
  --essay: #BF5FFF;
  --love: #39FF14;
  --satire: #FF2D95;
  --pending: #FFAA00;

  --font-head: 'Barlow Condensed', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ---------- NAV ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #555;
  transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }

/* ---------- FEED (index) ---------- */
.feed-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 120px;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-right: 4px;
}

.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.pill.all        { color: var(--brand);      border-color: var(--brand); }
.pill.philosophy { color: var(--philosophy); border-color: var(--philosophy); }
.pill.tech       { color: var(--tech);       border-color: var(--tech); }
.pill.rant       { color: var(--rant);       border-color: var(--rant); }
.pill.essay      { color: var(--essay);      border-color: var(--essay); }
.pill.love       { color: var(--love);       border-color: var(--love); }
.pill.satire     { color: var(--satire);     border-color: var(--satire); }

.pill.active, .pill:hover { color: var(--bg) !important; }
.pill.all.active,        .pill.all:hover        { background: var(--brand); }
.pill.philosophy.active, .pill.philosophy:hover { background: var(--philosophy); }
.pill.tech.active,       .pill.tech:hover       { background: var(--tech); }
.pill.rant.active,       .pill.rant:hover       { background: var(--rant); }
.pill.essay.active,      .pill.essay:hover      { background: var(--essay); }
.pill.love.active,       .pill.love:hover       { background: var(--love); }
.pill.satire.active,     .pill.satire:hover     { background: var(--satire); }

.feed { display: flex; flex-direction: column; }

.post-card {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 0.15s;
  color: inherit;
}
.post-card:hover { opacity: 0.75; }
.post-card:first-child { border-top: 1px solid var(--border); }

.post-bar { width: 3px; align-self: stretch; background: var(--brand); }

.post-content { display: flex; flex-direction: column; gap: 14px; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.post-category {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
}

.post-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-3);
}

.post-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

.post-excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-2);
  max-width: 58ch;
}

.post-read {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-top: 4px;
}

.post-card.hidden { display: none; }

.post-card.has-image { grid-template-columns: 3px 200px 1fr; gap: 0 32px; }
.post-card-image { align-self: start; }
.post-card-image img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border: 1px solid var(--border);
  filter: grayscale(0.15) contrast(1.05);
}
.post-card.has-image:hover .post-card-image img { filter: none; }
@media (max-width: 720px) {
  .post-card.has-image {
    grid-template-columns: 3px 1fr;
    grid-template-rows: auto auto;
    gap: 14px 16px;
  }
  .post-card.has-image .post-bar { grid-row: 1 / span 2; }
  .post-card.has-image .post-card-image { grid-column: 2; grid-row: 1; }
  .post-card.has-image .post-content { grid-column: 2; grid-row: 2; }
  .post-card-image img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Category color theming (driven by primary tag slug on body) */
.cat-philosophy .post-bar,
.post-card.cat-philosophy .post-bar { background: var(--philosophy); }
.cat-philosophy .post-category,
.post-card.cat-philosophy .post-category { color: var(--philosophy); }

.cat-tech .post-bar,
.post-card.cat-tech .post-bar { background: var(--tech); }
.cat-tech .post-category,
.post-card.cat-tech .post-category { color: var(--tech); }

.cat-rant .post-bar,
.post-card.cat-rant .post-bar { background: var(--rant); }
.cat-rant .post-category,
.post-card.cat-rant .post-category { color: var(--rant); }

.cat-essay .post-bar,
.post-card.cat-essay .post-bar { background: var(--essay); }
.cat-essay .post-category,
.post-card.cat-essay .post-category { color: var(--essay); }

.cat-love .post-bar,
.post-card.cat-love .post-bar { background: var(--love); }
.cat-love .post-category,
.post-card.cat-love .post-category { color: var(--love); }

.cat-satire .post-bar,
.post-card.cat-satire .post-bar { background: var(--satire); }
.cat-satire .post-category,
.post-card.cat-satire .post-category { color: var(--satire); }

/* ---------- POST (single) ---------- */
.article-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

.post-feature-image {
  margin: 0 0 48px;
}
.post-feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--border);
}
.post-feature-image figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
  margin-top: 10px;
  text-align: center;
}

.post-header {
  margin-bottom: 56px;
  border-left: 3px solid var(--accent, var(--brand));
  padding-left: 28px;
}

.post-header .post-category { color: var(--accent, var(--brand)); }

.post-title-hero {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 20px 0;
}

.post-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: #777;
}

.post-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-2);
}

.post-body p { margin-bottom: 28px; }

.post-body h2,
.post-body h3 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--text);
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
}
.post-body h2 { font-size: 28px; }
.post-body h3 { font-size: 22px; }

.post-body blockquote {
  border-left: 2px solid var(--accent, var(--brand));
  padding: 4px 0 4px 24px;
  margin: 40px 0;
  font-style: italic;
  font-size: 18px;
  color: #999;
  line-height: 1.6;
}

.post-body strong { color: var(--text); font-weight: 500; }

.post-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--border);
  color: var(--accent, var(--brand));
  padding: 2px 7px;
  border-radius: 2px;
}

.post-body a {
  color: var(--accent, var(--brand));
  border-bottom: 1px solid currentColor;
}

.post-body img,
.post-body figure { max-width: 100%; margin: 32px 0; }

.section-break {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0;
}

.section-break span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent, var(--brand));
}

.section-break::before,
.section-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.post-tags {
  display: flex;
  gap: 8px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.tag-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--border-2);
  color: #555;
}

/* ---------- ACCENT COLOR BY PRIMARY TAG ---------- */
.accent-philosophy { --accent: var(--philosophy); }
.accent-tech       { --accent: var(--tech); }
.accent-rant       { --accent: var(--rant); }
.accent-essay      { --accent: var(--essay); }
.accent-love       { --accent: var(--love); }

/* ---------- COMMENTS ---------- */
.comments-section {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 120px;
  border-top: 1px solid var(--border);
}

.comments-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 48px 0 40px;
}

.comments-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.comments-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-3);
}

.comments-notice {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
  padding-bottom: 32px;
}

/* ---------- PAGE: about ---------- */
.page-hero {
  max-width: 780px;
  margin: 0 auto;
  padding: 100px 24px 80px;
  border-bottom: 1px solid var(--border);
}

.page-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 24px;
}

.page-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.page-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 24px 120px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
}

.page-content p { margin-bottom: 20px; }
.page-content strong { color: var(--text); font-weight: 400; }
.page-content em { font-style: italic; color: #777; }
.page-content h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
}
.page-content blockquote {
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 24px;
  margin: 40px 0;
  font-style: italic;
  color: #999;
}

/* ---------- 404 ---------- */
.err-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 120px;
}

.err-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 480px;
  text-align: center;
}

.redacted-doc {
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-line { height: 8px; background: var(--border-2); border-radius: 1px; }
.doc-line.short { width: 60%; }
.doc-line.med   { width: 80%; }
.doc-line.full  { width: 100%; }

.doc-redacted { height: 10px; background: var(--text); border-radius: 1px; }
.doc-redacted.short { width: 55%; }
.doc-redacted.med   { width: 75%; }
.doc-redacted.full  { width: 100%; }

.doc-stamp {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.1em;
  color: var(--rant);
  border: 3px solid var(--rant);
  padding: 4px 12px;
  transform: rotate(-8deg);
  align-self: center;
  margin-top: 8px;
  opacity: 0.85;
}

.err-code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--border);
}

.err-tagline {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.err-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}

.back-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 10px 22px;
  border: 1px solid var(--brand);
  transition: all 0.15s;
}

.back-link:hover { background: var(--brand); color: var(--bg); }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .site-nav { padding: 0 20px; }
  .feed-main, .article-wrap, .page-hero, .page-content, .comments-section { padding-left: 20px; padding-right: 20px; }
  .post-title { font-size: 24px; }
}

/* ---------- KOENIG EDITOR (Ghost image/embed cards) ---------- */
.kg-width-wide {
  position: relative;
  width: 85vw;
  max-width: 1024px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
}
.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
}
.kg-width-wide img,
.kg-width-full img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 720px) {
  .kg-width-wide, .kg-width-full {
    width: 100%;
    left: 0;
    transform: none;
  }
}