/* ============================================================
   Vellum blog — shared styles for /blog and /blog/<post>
   Mirrors the marketing site (index.html) design language.
   ============================================================ */

:root {
  --ink:#0E0E0F; --ink-soft:#2A2A2C; --vellum:#F4EFE4; --vellum-2:#ECE6D5;
  --plate:#FFFDF7; --margin-c:#D7D0BF; --margin-strong:#B5AC97;
  --graphite:#5D5D5D; --drafting:#7A2BC9; --drafting-hover:#641FA8; --tracer:#E3563E;
  --serif:"Fraunces","Times New Roman",Times,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --t:160ms cubic-bezier(.2,0,.13,1.5);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--vellum); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga";
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 32px; }
.reading { max-width:720px; margin:0 auto; padding:0 32px; }
.mono { font-family:var(--mono); }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  height:48px; padding:0 22px;
  font-family:var(--sans); font-weight:600; font-size:14px;
  border-radius:6px; border:1px solid var(--ink);
  transition:transform var(--t), background var(--t), color var(--t);
  white-space:nowrap; cursor:pointer;
}
.btn.primary { background:var(--ink); color:var(--vellum); }
.btn.primary:hover { background:var(--ink-soft); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--vellum); }
.btn.sm { height:38px; padding:0 16px; font-size:13px; }
.btn .arrow { transition:transform var(--t); }
.btn:hover .arrow { transform:translate(2px,-2px); }

/* ---- nav (shared with marketing site) ---- */
nav {
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,228,0.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--margin-c);
}
nav .row {
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
nav .brand { display:flex; align-items:center; gap:9px; }
nav .brand .mark { width:24px; height:24px; }
nav .brand .mark svg { width:100%; height:100%; display:block; }
nav .brand .name {
  font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:-0.02em;
}
nav .brand .name .dot { color:var(--drafting); font-style:italic; }
nav .links { display:flex; align-items:center; gap:28px; }
nav .links a.txt {
  font-size:13.5px; color:var(--ink-soft); font-weight:500; transition:color var(--t);
}
nav .links a.txt:hover { color:var(--ink); }
nav .links a.txt.active { color:var(--drafting); }
@media (max-width:680px) { nav .links a.txt { display:none; } }

/* ---- article header ---- */
.post-head { padding:56px 0 0; }
.crumb {
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--graphite); flex-wrap:wrap;
}
.crumb a { color:var(--graphite); transition:color var(--t); }
.crumb a:hover { color:var(--drafting); }
.crumb .sep { color:var(--margin-strong); }
.crumb .here { color:var(--ink); }

.post-cat {
  display:inline-block; margin-top:30px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--drafting);
}
.post-head h1 {
  font-family:var(--serif); font-weight:360;
  font-size:clamp(38px,6.2vw,62px); line-height:1.02;
  letter-spacing:-0.035em; margin:16px 0 22px; text-wrap:balance;
}
.post-head h1 em { font-style:italic; color:var(--drafting); font-weight:360; }
.post-meta {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--graphite);
}
.post-meta .who { color:var(--ink-soft); }
.post-meta .d { width:4px; height:4px; border-radius:50%; background:var(--margin-strong); }

/* ---- article body ---- */
.post-body { padding:44px 0 8px; }
.post-body .lede {
  font-family:var(--serif); font-weight:350; font-size:clamp(21px,3vw,25px);
  line-height:1.45; letter-spacing:-0.01em; color:var(--ink);
  margin-bottom:34px;
}
.post-body p { color:var(--ink-soft); margin:0 0 1.25em; font-size:17px; line-height:1.72; }
.post-body p:last-child { margin-bottom:0; }
.post-body strong { color:var(--ink); font-weight:600; }
.post-body em { font-style:italic; }
.post-body a { color:var(--drafting); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:rgba(122,43,201,0.35); transition:text-decoration-color var(--t); }
.post-body a:hover { text-decoration-color:var(--drafting); }

.post-body h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(27px,4vw,34px); line-height:1.12; letter-spacing:-0.025em;
  color:var(--ink); margin:52px 0 16px;
}
.post-body h2 em { font-style:italic; color:var(--drafting); }
.post-body h3 {
  font-family:var(--serif); font-weight:450; font-size:22px; line-height:1.2;
  letter-spacing:-0.015em; color:var(--ink); margin:36px 0 12px;
}

.post-body ul, .post-body ol { margin:0 0 1.4em; padding:0; list-style:none; }
.post-body ul li, .post-body ol li {
  position:relative; padding-left:26px; margin-bottom:12px;
  color:var(--ink-soft); font-size:17px; line-height:1.65;
}
.post-body ul li::before {
  content:"→"; position:absolute; left:0; top:0;
  color:var(--drafting); font-family:var(--mono); font-size:15px;
}
.post-body ol { counter-reset:li; }
.post-body ol li { counter-increment:li; }
.post-body ol li::before {
  content:counter(li); position:absolute; left:0; top:1px;
  color:var(--drafting); font-family:var(--mono); font-size:13px; font-weight:500;
}
.post-body li strong { color:var(--ink); }

.post-body blockquote {
  margin:32px 0; border-left:2px solid var(--drafting); padding:4px 0 4px 24px;
}
.post-body blockquote p {
  font-family:var(--serif); font-weight:350; font-size:22px; line-height:1.4;
  letter-spacing:-0.01em; color:var(--ink);
}

.post-body code {
  font-family:var(--mono); font-size:0.875em; background:var(--vellum-2);
  padding:2px 6px; border-radius:3px; color:var(--ink);
}

/* inline figure / step image placeholder */
.post-body figure { margin:34px 0; }
.post-body figure img { width:100%; height:auto; display:block; border:1px solid var(--margin-c); border-radius:10px; }
.post-body figcaption {
  margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--graphite);
  letter-spacing:0.03em; text-align:center;
}

/* callout / aside */
.callout {
  margin:32px 0; background:var(--plate); border:1px solid var(--margin-c);
  border-radius:10px; padding:22px 24px;
}
.callout .ct {
  font-family:var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--drafting); margin-bottom:10px;
}
.callout p { font-size:15.5px; margin-bottom:0; color:var(--ink-soft); }
.callout p + p { margin-top:10px; }

/* key-takeaways box */
.tldr {
  margin:0 0 36px; border-left:2px solid var(--drafting); padding:4px 0 4px 22px;
}
.tldr .label {
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--drafting); margin-bottom:8px;
}
.tldr p { font-family:var(--serif); font-weight:350; font-size:20px; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); margin:0; }

/* comparison table */
.tbl-wrap { margin:30px 0; overflow-x:auto; }
.cmp {
  width:100%; border-collapse:collapse; font-size:15px;
  background:var(--plate); border:1px solid var(--margin-c); border-radius:10px; overflow:hidden;
}
.cmp th, .cmp td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--margin-c); vertical-align:top; }
.cmp th {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--graphite); font-weight:500; background:var(--vellum-2);
}
.cmp td:first-child { font-weight:600; color:var(--ink); }
.cmp td { color:var(--ink-soft); }
.cmp tr:last-child td { border-bottom:0; }

/* inline CTA strip inside an article */
.inline-cta {
  margin:44px 0; padding:28px 30px; border-radius:12px;
  background:var(--ink); color:var(--vellum);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.inline-cta .t { font-family:var(--serif); font-weight:350; font-size:23px; letter-spacing:-0.015em; line-height:1.2; max-width:34ch; }
.inline-cta .t em { font-style:italic; color:#C49BF0; }
.inline-cta .btn { background:var(--vellum); color:var(--ink); border-color:var(--vellum); flex-shrink:0; }
.inline-cta .btn:hover { background:var(--plate); }

/* author / share row */
.post-foot {
  margin-top:48px; padding-top:26px; border-top:1px solid var(--margin-c);
  display:flex; align-items:center; gap:14px;
}
.post-foot .av {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--drafting); color:var(--vellum);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:19px; font-style:italic;
}
.post-foot .who .n { font-size:14px; font-weight:600; color:var(--ink); }
.post-foot .who .r { font-size:12.5px; color:var(--graphite); margin-top:2px; }

/* ---- related posts ---- */
.related { padding:72px 0; border-top:1px solid var(--margin-c); margin-top:64px; }
.related .sec-label {
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--graphite); display:flex; align-items:baseline; gap:14px; margin-bottom:32px;
}
.related .sec-label .n { color:var(--drafting); }
.related .sec-label::after { content:""; flex:1; height:1px; background:var(--margin-c); }
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--margin-c); border:1px solid var(--margin-c); border-radius:10px; overflow:hidden; }
@media (max-width:760px) { .rel-grid { grid-template-columns:1fr; } }
.rel-card { background:var(--vellum); padding:26px 24px; display:flex; flex-direction:column; gap:10px; transition:background var(--t); }
.rel-card:hover { background:var(--plate); }
.rel-card .rk { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--drafting); }
.rel-card h3 { font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.15; letter-spacing:-0.02em; color:var(--ink); }
.rel-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1; }
.rel-card .go { font-family:var(--mono); font-size:12px; color:var(--drafting); }

/* ---- blog index ---- */
.blog-hero { padding:84px 0 56px; }
.blog-hero .eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--graphite); display:flex; align-items:center; gap:10px; margin-bottom:26px;
}
.blog-hero .eyebrow .dot { width:7px; height:7px; background:var(--drafting); border-radius:50%; }
.blog-hero h1 {
  font-family:var(--serif); font-weight:340; font-size:clamp(46px,8vw,84px);
  line-height:0.98; letter-spacing:-0.04em; max-width:16ch; text-wrap:balance;
}
.blog-hero h1 em { font-style:italic; color:var(--drafting); font-weight:340; }
.blog-hero .sub { margin-top:26px; font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:52ch; }

.post-list { border-top:1px solid var(--margin-c); }
.post-row {
  display:grid; grid-template-columns:160px 1fr auto; gap:32px; align-items:start;
  padding:34px 0; border-bottom:1px solid var(--margin-c); transition:background var(--t);
}
.post-row:hover { background:var(--vellum-2); }
.post-row .rmeta { font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; color:var(--graphite); line-height:1.7; }
.post-row .rmeta .cat { color:var(--drafting); text-transform:uppercase; letter-spacing:0.1em; display:block; margin-bottom:6px; }
.post-row .rbody { min-width:0; }
.post-row h2 { font-family:var(--serif); font-weight:380; font-size:clamp(24px,3.2vw,30px); line-height:1.1; letter-spacing:-0.025em; color:var(--ink); margin-bottom:10px; }
.post-row:hover h2 { color:var(--drafting); }
.post-row p { font-size:15.5px; color:var(--ink-soft); line-height:1.55; max-width:60ch; }
.post-row .go { align-self:center; font-family:var(--mono); font-size:18px; color:var(--drafting); transition:transform var(--t); }
.post-row:hover .go { transform:translate(3px,-3px); }
@media (max-width:720px) {
  .post-row { grid-template-columns:1fr; gap:10px; padding:28px 0; }
  .post-row .go { display:none; }
}

/* ---- final cta (shared) ---- */
.final { text-align:center; padding:104px 0; border-top:1px solid var(--ink); }
.final h2 { font-family:var(--serif); font-weight:350; font-size:clamp(36px,6vw,64px); line-height:1.04; letter-spacing:-0.03em; margin-bottom:30px; }
.final h2 em { font-style:italic; color:var(--drafting); }
.final .btn { height:54px; padding:0 28px; font-size:15px; }

/* ---- footer (shared with marketing site) ---- */
footer { background:var(--ink); color:var(--vellum); padding:64px 0 56px; }
footer .top { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
footer .brand { display:flex; align-items:center; gap:10px; }
footer .brand .mark { width:28px; height:28px; color:var(--vellum); }
footer .brand .mark svg { width:100%; height:100%; }
footer .brand .name { font-family:var(--serif); font-size:22px; letter-spacing:-0.02em; }
footer .tag { font-family:var(--serif); font-style:italic; font-weight:300; font-size:18px; color:rgba(244,239,228,0.7); margin-top:10px; }
footer .cols { display:flex; gap:56px; flex-wrap:wrap; }
footer .col h5 { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,239,228,0.45); margin-bottom:14px; font-weight:500; }
footer .col a { display:block; font-size:14px; color:rgba(244,239,228,0.82); padding:5px 0; transition:color var(--t); }
footer .col a:hover { color:var(--vellum); }
footer .legal {
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(244,239,228,0.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em; color:rgba(244,239,228,0.5);
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto; } }