/* ============================================================
   The Sera Voss Column — Prompt Queen AI
   Aligned to the PQAI design system (Instrument Serif / DM Sans /
   IBM Plex Mono · ink-maroon, ivory, cerise, gold, rose)
   ============================================================ */

:root {
  /* base palette (from tokens/colors.css) */
  --maroon-950:#260A0F; --maroon-900:#38111B; --maroon-800:#4A1824; --maroon-700:#5F2130;
  --maroon-600:#762E40; --maroon-500:#8E3E52;
  --ivory-50:#FDFBF7; --ivory-100:#FAF6EE; --ivory-200:#F4EDE1; --ivory-300:#EBE1D0;
  --cerise-300:#EE96B2; --cerise-400:#E25C86; --cerise-500:#D42A5F; --cerise-600:#AD1A4C; --cerise-700:#8C123D;
  --rose-200:#E6DCD9; --rose-300:#D5C6C2; --rose-400:#B8A39F; --rose-500:#9C8380; --rose-600:#7D6663; --rose-700:#604C4A;
  --gold-200:#EFE3C4; --gold-300:#E0CD9F; --gold-500:#C2A05C; --gold-600:#9C7D3C; --gold-700:#79602B;

  --bg-page:var(--ivory-100);
  --surface-card:var(--ivory-50);
  --surface-sunken:var(--ivory-200);
  --surface-ink:var(--maroon-900);
  --text-heading:var(--maroon-900);
  --text-body:#43302F;
  --text-muted:var(--rose-600);
  --text-on-ink:var(--ivory-100);
  --text-on-ink-muted:#D4B9BC;
  --text-accent:var(--cerise-600);
  --text-gold:var(--gold-700);
  --border-subtle:#E6DCCB;
  --border-ink:#5A2833;

  --font-serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --font-sans:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --wrap:1200px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-page); color:var(--text-body);
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }

/* ---------- overline (mono label, like DS Overline) ---------- */
.overline {
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-accent);
  display:inline-block;
}
.overline.gold { color:var(--text-gold); }
.cat-crown{color:var(--gold-700);} .cat-explain{color:var(--maroon-700);}
.cat-tested{color:var(--cerise-600);} .cat-prompt{color:var(--maroon-900);}
.cat-dontbuy{color:#A62B3D;} .cat-dramatic{color:var(--gold-600);}
.cat-stack{color:var(--rose-600);} .cat-ask{color:var(--cerise-700);}
/* on dark surfaces, force a light overline regardless of category */
.overline.on-ink { color:var(--gold-300); }

/* ============================================================
   SITE NAV (matches chrome.jsx SiteNav)
   ============================================================ */
.site-nav {
  position:sticky; top:0; z-index:50;
  background:var(--bg-page); border-bottom:1px solid var(--border-subtle);
}
.nav-inner {
  max-width:var(--wrap); margin:0 auto; padding:0 32px; height:72px;
  display:flex; align-items:center; gap:32px;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo .crown { width:30px; height:auto; display:block; }
.nav-word { font-family:var(--font-serif); font-size:1.35rem; color:var(--maroon-900); line-height:1; }
.nav-logo.light .nav-word { color:var(--ivory-100); }
.nav-links { display:flex; gap:26px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav-links a {
  font-family:var(--font-sans); font-size:.9375rem; font-weight:500; color:var(--text-body);
  padding-bottom:2px; border-bottom:2px solid transparent; transition:color .2s,border-color .2s;
}
.nav-links a:hover { color:var(--cerise-600); }
.nav-links a.is-active { font-weight:600; color:var(--cerise-600); border-bottom-color:var(--cerise-500); }
.nav-cta {
  font-family:var(--font-sans); font-size:.875rem; font-weight:600; white-space:nowrap;
  background:var(--cerise-600); color:var(--ivory-50);
  padding:.55rem 1rem; border-radius:8px; transition:background .2s;
}
.nav-cta:hover { background:var(--cerise-700); }

/* ============================================================
   HERO (dark maroon radial, matches homepage hero)
   ============================================================ */
.hero {
  background:radial-gradient(120% 140% at 80% 0%, var(--maroon-800) 0%, var(--maroon-900) 55%);
  color:var(--text-on-ink);
}
.hero-inner { max-width:var(--wrap); margin:0 auto; padding:5rem 32px 4.5rem; }
.hero .overline { margin-bottom:1.1rem; }
.hero-title {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.8rem,6vw,4.75rem); line-height:1.02; letter-spacing:-.015em;
  color:var(--ivory-100); margin:0; max-width:20ch; text-wrap:pretty;
}
.hero-title em { font-style:italic; color:var(--cerise-300); }
.hero-lede {
  max-width:40rem; font-size:1.1875rem; line-height:1.65;
  color:var(--text-on-ink-muted); margin:1.4rem 0 2.2rem;
}
.hero-founder { display:flex; align-items:center; gap:.9rem; }
.hero-founder-name { display:block; font-family:var(--font-serif); font-size:1.25rem; color:var(--ivory-100); }
.hero-founder-role { display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-ink-muted); margin-top:2px; }

/* CV monogram */
.byline-avatar {
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--maroon-800); color:var(--ivory-100);
  font-family:var(--font-serif); font-size:1.05rem; letter-spacing:.02em; flex:none;
  box-shadow:0 0 0 1px var(--cerise-500), 0 0 0 4px rgba(212,42,95,.16);
}
.byline-avatar.lg { width:54px; height:54px; font-size:1.35rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { max-width:var(--wrap); margin:0 auto; padding:4rem 32px; }
.section.band { max-width:none; background:var(--surface-sunken); border-block:1px solid var(--border-subtle); }
.section.band > * { max-width:var(--wrap); margin-inline:auto; }
.section-head { display:flex; flex-direction:column; gap:.55rem; margin-bottom:2rem; }
.section-head h2 {
  font-family:var(--font-serif); font-weight:400; color:var(--text-heading);
  font-size:clamp(2rem,3.2vw,2.5rem); line-height:1.12; letter-spacing:-.01em; margin:0;
}

/* ---------- featured ---------- */
.featured-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:1.5rem; }
.feat-lead {
  position:relative; display:flex; flex-direction:column; padding:2.4rem; border-radius:16px; overflow:hidden;
  background:radial-gradient(130% 130% at 85% 0%, var(--maroon-700) 0%, var(--maroon-900) 60%);
  color:var(--text-on-ink); transition:transform .25s ease, box-shadow .25s ease;
}
.feat-lead:hover { transform:translateY(-3px); box-shadow:0 20px 44px -20px rgba(38,10,15,.65); }
.feat-flag {
  align-self:flex-start; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon-950); background:var(--gold-300); padding:.32rem .6rem; border-radius:100px; margin-bottom:1rem;
}
.feat-lead h3 {
  font-family:var(--font-serif); font-weight:400; font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.08; margin:.7rem 0 .7rem; color:var(--ivory-100);
}
.feat-lead p { color:var(--text-on-ink-muted); margin:0 0 1.6rem; font-size:1.0625rem; max-width:34rem; line-height:1.6; }
.feat-read { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--gold-300); margin-top:auto; }

.feat-side { display:grid; gap:1.5rem; grid-template-rows:1fr 1fr; }
.feat-sub {
  display:flex; flex-direction:column; padding:1.7rem; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:16px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.feat-sub:hover { transform:translateY(-3px); box-shadow:0 16px 32px -22px rgba(38,10,15,.4); border-color:var(--rose-300); }
.feat-sub h4 { font-family:var(--font-serif); font-weight:400; font-size:1.5rem; line-height:1.12; margin:.55rem 0 .8rem; color:var(--text-heading); }
.muted-meta { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--text-muted); }

/* ---------- category directory ---------- */
.catdir { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.5rem; }
.catdir-item {
  display:flex; align-items:flex-start; gap:.9rem; text-align:left; cursor:pointer;
  background:none; border:0; padding:1rem; border-radius:12px; font:inherit; color:inherit; transition:background .2s;
}
.catdir-item:hover { background:var(--ivory-100); }
.catdir-dot { width:11px; height:11px; border-radius:50%; margin-top:.4rem; flex:none; background:var(--maroon-900); }
.catdir-dot.cat-crown{background:var(--gold-700);} .catdir-dot.cat-explain{background:var(--maroon-700);}
.catdir-dot.cat-tested{background:var(--cerise-600);} .catdir-dot.cat-prompt{background:var(--maroon-900);}
.catdir-dot.cat-dontbuy{background:#A62B3D;} .catdir-dot.cat-dramatic{background:var(--gold-600);}
.catdir-dot.cat-stack{background:var(--rose-600);} .catdir-dot.cat-ask{background:var(--cerise-700);}
.catdir-name { font-family:var(--font-serif); font-size:1.2rem; color:var(--text-heading); display:block; }
.catdir-count { font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); border:1px solid var(--border-subtle); border-radius:100px; padding:0 .45rem; margin-left:.35rem; vertical-align:middle; }
.catdir-blurb { display:block; font-size:.9rem; color:var(--text-muted); margin-top:.15rem; }

/* ---------- filter chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.chip {
  font-family:var(--font-sans); font-size:.875rem; cursor:pointer;
  padding:.5rem 1rem; border-radius:100px; border:1px solid var(--rose-300);
  background:var(--surface-card); color:var(--text-body); transition:all .2s;
}
.chip:hover { border-color:var(--cerise-500); color:var(--cerise-600); }
.chip.is-active { background:var(--maroon-900); color:var(--ivory-100); border-color:var(--maroon-900); }

/* ---------- cards ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card {
  display:flex; flex-direction:column; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:16px; padding:1.6rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(38,10,15,.4); border-color:var(--rose-300); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.card-star { color:var(--gold-500); font-size:.9rem; }
.card h3 { font-family:var(--font-serif); font-weight:400; font-size:1.5rem; line-height:1.12; margin:.6rem 0 .55rem; color:var(--text-heading); }
.card p { font-size:.9375rem; color:var(--text-muted); margin:0 0 1.2rem; line-height:1.55; }
.card-foot {
  margin-top:auto; display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; color:var(--rose-500);
  border-top:1px solid var(--border-subtle); padding-top:.8rem;
}
.empty { text-align:center; color:var(--text-muted); padding:2rem 0; }

/* ============================================================
   POST PAGE
   ============================================================ */
.post-body { background:var(--bg-page); }
.post { max-width:44rem; margin:0 auto; padding:2.4rem 32px 3rem; }
.post-head { border-bottom:1px solid var(--border-subtle); padding-bottom:2rem; margin-bottom:2.2rem; }
.post-head .overline { margin-bottom:.9rem; }
.post-head h1 {
  font-family:var(--font-serif); font-weight:400; color:var(--text-heading);
  font-size:clamp(2.4rem,5vw,3.5rem); line-height:1.1; letter-spacing:-.015em; margin:.2rem 0 0;
}
.standfirst { font-family:var(--font-serif); font-style:italic; font-size:1.4rem; line-height:1.4; color:var(--text-body); margin:1.1rem 0 1.6rem; }
.byline { display:flex; align-items:center; gap:.8rem; }
.byline-name { font-weight:600; font-size:.9375rem; color:var(--text-heading); }
.byline-role { display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--text-muted); text-transform:uppercase; }

/* prose */
.prose { font-size:1.1875rem; line-height:1.72; color:var(--text-body); }
.prose > p:first-of-type::first-letter {
  font-family:var(--font-serif); font-size:3.8rem; float:left; line-height:.8;
  padding:.35rem .55rem .1rem 0; color:var(--cerise-600);
}
.prose h2 { font-family:var(--font-serif); font-weight:400; color:var(--text-heading); font-size:1.9rem; line-height:1.15; margin:2.6rem 0 .8rem; letter-spacing:-.01em; }
.prose h3 { font-family:var(--font-serif); font-weight:400; color:var(--text-heading); font-size:1.4rem; margin:2rem 0 .6rem; }
.prose p { margin:0 0 1.3rem; }
.prose strong { font-weight:600; color:var(--text-heading); }
.prose ul { margin:0 0 1.4rem; padding-left:1.2rem; }
.prose li { margin:0 0 .6rem; padding-left:.3rem; }
.prose li::marker { color:var(--cerise-500); }
.prose blockquote {
  margin:1.8rem 0; padding:1.3rem 1.6rem; background:var(--surface-sunken);
  border-left:3px solid var(--cerise-500); border-radius:0 12px 12px 0;
}
.prose blockquote p { margin:0 0 .7rem; font-size:1.0625rem; color:var(--text-body); line-height:1.6; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose blockquote strong { color:var(--maroon-900); }

/* table */
.table-wrap { overflow-x:auto; margin:1.8rem 0; border:1px solid var(--border-subtle); border-radius:12px; }
table { border-collapse:collapse; width:100%; font-family:var(--font-sans); font-size:.95rem; }
thead th {
  background:var(--maroon-900); color:var(--ivory-100); text-align:left; padding:.8rem 1rem;
  font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
tbody td { padding:.75rem 1rem; border-top:1px solid var(--border-subtle); color:var(--text-body); }
tbody tr:nth-child(even) { background:var(--ivory-200); }

/* tags + back */
.post-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--border-subtle); }
.tag { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; color:var(--text-muted); background:var(--ivory-200); border:1px solid var(--border-subtle); padding:.28rem .6rem; border-radius:100px; }
.back-link { display:inline-block; margin-top:1.8rem; font-family:var(--font-sans); font-weight:600; font-size:.9375rem; color:var(--cerise-600); }
.back-link:hover { color:var(--cerise-700); }

/* related */
.related { max-width:var(--wrap); margin:0 auto; padding:1rem 32px 3.5rem; }
.related .overline { display:block; margin-bottom:1.2rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.related-card {
  display:flex; flex-direction:column; gap:.5rem; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:14px; padding:1.4rem;
  transition:transform .2s, border-color .2s;
}
.related-card:hover { transform:translateY(-3px); border-color:var(--rose-300); }
.related-card h3 { font-family:var(--font-serif); font-weight:400; font-size:1.2rem; line-height:1.15; margin:0; color:var(--text-heading); }

/* ============================================================
   SITE FOOTER (matches chrome.jsx SiteFooter)
   ============================================================ */
.site-footer { background:var(--surface-ink); color:var(--text-on-ink); margin-top:2rem; }
.footer-inner { max-width:var(--wrap); margin:0 auto; padding:64px 32px 40px; }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-brand p { margin:1rem 0 0; font-size:14px; line-height:1.65; color:var(--text-on-ink-muted); max-width:320px; }
.footer-col { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-h { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); margin-bottom:4px; }
.footer-col a { color:var(--text-on-ink-muted); transition:color .2s; }
.footer-col a:hover { color:var(--ivory-100); }
.footer-base {
  border-top:1px solid var(--border-ink); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; color:var(--text-on-ink-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .featured-grid { grid-template-columns:1fr; }
  .feat-side { grid-template-rows:none; }
  .catdir { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr 1fr; gap:32px; }
  .nav-cta { display:none; }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:.85rem; }
  .hero-inner { padding:3.4rem 22px 3rem; }
  .section { padding:3rem 22px; }
  .post { padding:2rem 22px 2.5rem; }
  .footer-cols { grid-template-columns:1fr; }
}