/* ==========================================================
   DannyBuiltIt.com — article.css
   Everything a blog post needs. Loaded only on /blog/ pages.
   Uses the tokens from style.css. No pastels: white cards,
   ink panels, accent and orange for the loud parts.

   1. Fonts, progress, shell
   2. Post hero: centred title, then the image
   3. Image credits
   4. Contents, on top
   5. Prose: the body copy rhythm
   6. Figures
   7. Lists: checks, the yes/no pair, steps
   8. Pull quote
   9. Callouts
  10. Tables
  11. Bar chart and stat row
  12. Key takeaways
  13. FAQ
  14. CTA, author, related
  15. Blog index cards
  16. Back to top
   ========================================================== */


/* Instrument Serif is already in /fonts but was never declared — the pull
   quote is the only thing that uses it. */
@font-face{
  font-family:'Instrument Serif';
  src:url('../fonts/instrument-serif.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}


/* -- 1. Fonts, progress, shell -------------------------------- */
/* A post has no top band, so the header carries its own hairline
   from the first pixel instead of fading one in on scroll. */
.site-head--post{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.post-shell{padding-top:clamp(30px,3.6vw,50px)}

.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  z-index:60;pointer-events:none;background:transparent;
}
.progress span{
  display:block;height:100%;width:0;
  background:var(--accent);box-shadow:0 0 12px rgba(54,66,239,.55);
}
@media (prefers-reduced-motion:no-preference){
  .progress span{transition:width .08s linear}
}

.post-shell{padding-bottom:var(--s5)}
.post-body{min-width:0;max-width:74ch;margin:0 auto}


/* -- 2. Post hero: the picture first, edge to edge ------------ */
/* Same idea as the Crewli blog: full width photograph directly under
   the nav, the title sitting on it, the credit underneath. */
.post-hero{
  position:relative;isolation:isolate;
  min-height:clamp(420px,64vh,620px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(40px,7vw,86px) var(--pad) clamp(34px,4.6vw,60px);
  background:var(--night);
  overflow:hidden;
}
.post-hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.post-hero::before{                     /* the scrim that keeps type legible */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(10,11,15,.58) 0%,
    rgba(10,11,15,.34) 34%,
    rgba(10,11,15,.72) 78%,
    rgba(10,11,15,.88) 100%);
}
.post-hero-in{
  width:100%;max-width:var(--wrap);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.post-hero .eyebrow{margin-bottom:var(--s2);align-self:center}
.post-hero h1{
  color:#fff;
  font-size:clamp(34px,5vw,66px);
  line-height:1.02;letter-spacing:-.045em;
  max-width:19ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.post-dek{
  margin:18px auto 0;max-width:56ch;
  font-size:clamp(17px,1.4vw,20px);line-height:1.55;
  color:rgba(255,255,255,.82);text-wrap:pretty;
}
.post-meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:9px 14px;margin-top:clamp(20px,2.4vw,30px);
  font-size:14.5px;color:rgba(255,255,255,.72);
}
.post-meta img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.35);
}
.post-meta b{color:#fff;font-weight:600}
.post-meta .sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55)}

/* the credit for the hero photograph sits under the picture, not on it */
.hero-credit{padding-top:11px;text-align:right}
.hero-credit .credit{max-width:none}

/* -- 3. Image credits ------------------------------------------ */
/* Not a caption. Just who the picture belongs to, quiet, under the
   right edge of the image. Every photo on the site gets one. */
.credit{
  display:block;margin-top:9px;
  font-size:12.5px;line-height:1.45;letter-spacing:.005em;
  color:var(--ink-3);text-align:right;
}
.credit a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.credit a:hover{color:var(--ink);border-bottom-color:var(--ink-3)}


/* -- 4. Contents, on top --------------------------------------- */
.post-toc{
  margin:0 0 clamp(30px,3.4vw,42px);
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,28px);
  border:1.5px solid var(--ink);border-radius:var(--r-card);
  background:var(--paper);
}
.post-toc-t{
  font-family:var(--text);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:14px;
}
.post-toc ul{
  display:grid;grid-template-columns:1fr;gap:10px 26px;
  counter-reset:toc;
}
@media (min-width:620px){ .post-toc ul{grid-template-columns:1fr 1fr} }
.post-toc li{counter-increment:toc}
.post-toc a{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;
  text-decoration:none;color:var(--ink-2);
  font-size:15.5px;line-height:1.4;
  transition:color .16s var(--ease);
}
.post-toc a::before{
  content:counter(toc);
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid rgba(54,66,239,.3);background:rgba(54,66,239,.07);
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.02em;
  color:var(--accent);
  transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.post-toc a:hover{color:var(--ink)}
.post-toc a:hover::before{background:var(--accent);border-color:var(--accent);color:#fff}


/* -- 5. Prose: the body copy rhythm ---------------------------- */
.prose{font-size:18.5px;line-height:1.72;color:var(--ink-2)}
.prose > * + *{margin-top:1.35em}

.prose h2{
  font-size:clamp(26px,2.7vw,34px);letter-spacing:-.038em;line-height:1.12;
  color:var(--ink);margin-top:2.1em;scroll-margin-top:110px;text-wrap:balance;
}
.prose h3{
  font-size:clamp(19px,1.7vw,23px);color:var(--ink);
  margin-top:1.9em;scroll-margin-top:110px;
}
.prose h2 + p,.prose h3 + p{margin-top:.7em}
.prose h2 + h3{margin-top:1.1em}

.prose p{color:var(--ink-2);text-wrap:pretty}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose a{
  color:var(--accent);text-decoration:none;
  box-shadow:inset 0 -1px 0 0 rgba(54,66,239,.35);
  transition:box-shadow .15s var(--ease);
}
.prose a:hover{box-shadow:inset 0 -2px 0 0 var(--accent)}

/* The first paragraph carries the answer. It reads a size larger and
   sits under a heavy rule, so the eye starts there. */
.prose > p.intro{
  position:relative;
  font-size:21.5px;line-height:1.6;color:var(--ink);
  padding-top:26px;
}
.prose > p.intro::before{
  content:"";position:absolute;top:0;left:0;
  width:58px;height:4px;border-radius:2px;background:var(--accent);
}

.prose ul.bullets,.prose ol.numbers{display:flex;flex-direction:column;gap:.6em;padding-left:1.15em}
.prose ul.bullets{list-style:disc}
.prose ol.numbers{list-style:decimal}
.prose ul.bullets li,.prose ol.numbers li{padding-left:.25em}
.prose ul.bullets li::marker{color:var(--ink-3)}
.prose ol.numbers li::marker{color:var(--ink);font-weight:600}

.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;background:var(--paper-2);color:var(--ink);
  padding:.14em .42em;border-radius:5px;border:1px solid var(--line);
}


/* -- 6. Figures ------------------------------------------------ */
/* the browser default for figure and blockquote is `margin:1em 40px`,
   which style.css never resets — every one of these needs its own. */
.figure{margin:2.2em 0}
.figure img{
  width:100%;height:auto;border-radius:var(--r-card);background:var(--paper-2);
}
/* a 16:9 crop so posts stay consistent no matter what shape the photo
   arrives in. Never wider than the copy — the hero is the only full
   width picture on a post. */
.figure--wide img{aspect-ratio:16/9;object-fit:cover}
.figure-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:2.2em 0}
.figure-duo figure{margin:0}
.figure-duo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-card)}
@media (max-width:560px){ .figure-duo{grid-template-columns:1fr} }


/* -- 7. Lists: checks, the yes/no pair, steps -------------------- */
.checks{display:flex;flex-direction:column;gap:14px;margin:1.8em 0}
.checks li{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:13px;align-items:start;
  font-size:17.5px;line-height:1.6;color:var(--ink-2);
}
.checks li b{color:var(--ink);font-weight:600}
.checks .mk{
  width:24px;height:24px;border-radius:7px;flex:0 0 auto;
  display:grid;place-items:center;margin-top:3px;
  background:var(--accent);color:#fff;
}
.checks .mk svg{display:block}
.checks--no .mk{background:var(--orange)}

/* the two-column yes / no pair: white cards, one rule of colour each */
.verdict{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--s2);margin:2.2em 0;
}
.verdict-col{
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r-card);
  border:1.5px solid var(--line);background:var(--paper);
}
.verdict-col h4{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;
  margin-bottom:16px;
}
.verdict .checks{margin:0;gap:12px}
.verdict .checks li{font-size:16.5px;grid-template-columns:22px minmax(0,1fr);gap:11px}
.verdict .checks .mk{width:22px;height:22px;border-radius:6px}
.verdict--yes .checks .mk{background:var(--accent);color:#fff}
.verdict--no .checks .mk{background:var(--orange);color:#fff}

/* numbered steps with a rule down the side */
.steps{counter-reset:st;display:flex;flex-direction:column;margin:2.2em 0}
.steps li{counter-increment:st;position:relative;padding:0 0 26px 54px}
.steps li::before{
  content:counter(st);
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 8px 18px -10px rgba(54,66,239,.9);
}
.steps li::after{
  content:"";position:absolute;left:16.5px;top:42px;bottom:6px;width:1.5px;background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h4{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:6px;padding-top:5px;
}
.steps p{font-size:17px;line-height:1.6;margin:0}


/* -- 8. Pull quote ---------------------------------------------- */
/* No rule down the side. A quotation mark sets it off instead, and the
   type is Sora like every other headline on the site. */
.pullquote{
  position:relative;margin:3em 0;padding:58px 0 0;text-align:center;
}
.pullquote::before{
  content:"\201C";
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:700;
  font-size:88px;line-height:1;color:var(--line);
  pointer-events:none;
}
.pullquote p{
  position:relative;margin:0 auto;max-width:26ch;
  font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.4vw,31px);line-height:1.24;letter-spacing:-.04em;
  color:var(--ink);text-wrap:balance;
}
.pullquote cite{
  display:block;margin-top:20px;font-style:normal;
  font-size:14.5px;font-weight:600;color:var(--ink-3);
}
.pullquote cite span{font-weight:400}

.pullquote--dark{
  padding:clamp(30px,3.6vw,46px);border-radius:var(--r-card);
  background:var(--night);overflow:hidden;
}
.pullquote--dark::before{
  top:6px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.18);
}
.pullquote--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
}
.pullquote--dark p{padding-top:34px;max-width:30ch}
.pullquote--dark p,.pullquote--dark cite{position:relative;z-index:1}
.pullquote--dark p{color:#fff}
.pullquote--dark cite{color:var(--on-night-2)}


/* -- 9. Callouts ------------------------------------------------ */
/* White card, one thick rule of colour, a solid icon chip. */
.callout{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:15px;
  margin:2.2em 0;padding:clamp(19px,2.1vw,25px);
  border:1.5px solid var(--line);
  border-radius:var(--r-card);background:var(--paper);
  box-shadow:0 18px 40px -34px rgba(10,12,18,.55);
}
.callout .ci{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:var(--ink);
}
.callout .ci svg{display:block}
.callout h4{
  font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.03em;
  margin-bottom:5px;
}
.callout p{font-size:16.5px;line-height:1.6;margin:0}
.callout p + p{margin-top:.7em}

.callout--warn .ci{background:var(--orange)}

/* the loud one: ink, for the thing that must not be missed */
.callout--strong{
  background:var(--night);border-color:var(--night);color:var(--on-night);
}
.callout--strong h4{color:#fff}
.callout--strong p{color:var(--on-night-2)}
.callout--strong .ci{background:#fff;color:var(--night)}


/* -- 10. Tables -------------------------------------------------- */
.tablewrap{
  margin:2.4em 0;border:1.5px solid var(--ink);border-radius:var(--r-card);
  overflow:hidden;background:var(--paper);
  box-shadow:0 24px 50px -40px rgba(10,12,18,.6);
}
.table-t{
  padding:18px clamp(16px,1.8vw,22px) 16px;
  font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.032em;
  color:var(--ink);border-bottom:1.5px solid var(--ink);
}
/* contain:inline-size stops the table's min-width from widening the whole
   page instead of scrolling inside this box. */
.tablescroll{overflow-x:auto;contain:inline-size;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.5}
/* wide enough to stay readable, and it scrolls sideways inside .tablescroll.
   Below 641px a plain table shrinks to fit and a .stack table becomes cards. */
@media (min-width:641px){ table.t{min-width:520px} }

table.t th,table.t td{
  padding:15px clamp(14px,1.6vw,20px);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
table.t thead th{
  font-family:var(--text);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:#fff;white-space:nowrap;border-bottom:0;
}
table.t tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
table.t td{color:var(--ink-2)}
table.t tbody tr:last-child th,table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover td,table.t tbody tr:hover th{background:var(--paper-2)}
table.t .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);font-weight:500}
table.t .yes{color:var(--ink);font-weight:600}
table.t .no{color:var(--ink-3)}
/* the recommended column reads as recommended by weight and a grey
   ground, not by a stripe of colour */
table.t tbody .pick{background:var(--paper-2)}
table.t tbody td.pick{color:var(--ink);font-weight:600}
.table-note{
  padding:13px clamp(14px,1.6vw,20px);border-top:1.5px solid var(--ink);
  background:var(--paper-2);font-size:14px;line-height:1.5;color:var(--ink-3);margin:0;
}

/* on phones the comparison table stacks into cards */
@media (max-width:640px){
  table.t.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.t.stack tbody tr{display:block;border-bottom:1.5px solid var(--ink);padding:8px 0}
  table.t.stack tbody tr:last-child{border-bottom:0}
  table.t.stack tbody th{display:block;border:0;padding-bottom:6px;font-size:17px}
  table.t.stack tbody td{
    display:flex;justify-content:space-between;gap:16px;
    border:0;padding-top:6px;padding-bottom:6px;box-shadow:none;
  }
  table.t.stack tbody td::before{
    content:attr(data-label);
    font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);flex:0 0 auto;
  }
  table.t.stack tbody td.pick::before{color:var(--ink)}
}


/* -- 11. Bar chart and stat row ---------------------------------- */
.chart{
  margin:2.4em 0;padding:clamp(20px,2.4vw,28px);
  border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--paper);
  box-shadow:0 24px 50px -40px rgba(10,12,18,.6);
}
.chart-t{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.032em;color:var(--ink)}
.chart-s{font-size:14.5px;color:var(--ink-3);margin-top:4px}
.bars{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.bar{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:14px;align-items:center}
.bar-k{font-size:15px;font-weight:500;color:var(--ink-2)}
.bar-track{position:relative;height:34px;border-radius:8px;background:var(--paper-2);overflow:hidden}
.bar-fill{
  height:100%;width:var(--w,0%);border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:flex-end;padding-right:11px;
  color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  transform-origin:0 50%;
}
@media (prefers-reduced-motion:no-preference){
  .chart .bar-fill{transform:scaleX(0);transition:transform .8s var(--ease)}
  .chart.in .bar-fill{transform:scaleX(1)}
  .chart.in .bar:nth-child(2) .bar-fill{transition-delay:.09s}
  .chart.in .bar:nth-child(3) .bar-fill{transition-delay:.18s}
  .chart.in .bar:nth-child(4) .bar-fill{transition-delay:.27s}
  .chart.in .bar:nth-child(5) .bar-fill{transition-delay:.36s}
}
.bar--alt .bar-fill{background:var(--ink)}
.bar--quiet .bar-fill{background:var(--ink-3)}
.bar--warm .bar-fill{background:var(--orange)}
.chart-note{margin-top:18px;font-size:14px;line-height:1.5;color:var(--ink-3)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s2);margin:2.4em 0}
.stat{padding:clamp(18px,2vw,24px);border-radius:var(--r-card);border:1.5px solid var(--line);background:var(--paper)}
.stat .n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,3.4vw,42px);line-height:1;letter-spacing:-.05em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat .l{margin-top:9px;font-size:15px;line-height:1.45;color:var(--ink-2)}


/* -- 12. Key takeaways -------------------------------------------- */
.takeaways{
  margin:2.8em 0;padding:clamp(24px,2.8vw,34px);
  border:1.5px solid var(--ink);border-radius:var(--r-card);
  background:var(--paper);
  box-shadow:0 24px 50px -40px rgba(10,12,18,.6);
}
.takeaways-t{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;
}
.takeaways ol{counter-reset:tk;display:flex;flex-direction:column;gap:18px}
.takeaways li{
  counter-increment:tk;
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:15px;align-items:start;
  font-size:17.5px;line-height:1.55;color:var(--ink-2);
}
.takeaways li::before{
  content:counter(tk);
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.02em;
}
.takeaways li b{color:var(--ink);font-weight:600}


/* -- 13. FAQ ------------------------------------------------------ */
.post-faq{margin-top:2.8em}
.post-faq h2{margin-bottom:.3em}
.post-faq .qa summary{font-size:17.5px;padding:22px 44px 22px 0}
.post-faq .qa .a{padding-bottom:24px}
.post-faq .qa .a p{font-size:16.5px}


/* -- 14. CTA, author, related -------------------------------------- */
.post-cta{
  margin:var(--s4) 0 var(--s3);
  padding:clamp(24px,2.6vw,34px);
  border-radius:var(--r-card);background:var(--night);color:#fff;
  position:relative;overflow:hidden;isolation:isolate;
}
/* The photograph IS the background: it covers the whole panel and a
   gradient darkens all of it evenly. */
.post-cta-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.post-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,rgba(10,11,15,.9) 0%,rgba(12,16,58,.84) 52%,rgba(24,32,150,.8) 100%);
}
.post-cta > *:not(.post-cta-bg){position:relative;z-index:1}
.post-cta-k{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:10px;
}
.post-cta h3{
  color:#fff;font-size:clamp(23px,2.4vw,31px);letter-spacing:-.04em;
  line-height:1.1;max-width:18ch;
}
.post-cta p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.55;margin-top:11px;max-width:48ch}
.post-cta-facts{
  display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:18px;
  font-size:15px;font-weight:600;color:#fff;
}
.post-cta-facts li{display:flex;align-items:center;gap:8px}
.post-cta-facts svg{display:block;flex:0 0 auto;opacity:.9}
.post-cta-do{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.post-cta-do .btn{
  padding:.8rem 1.5rem;font-size:.9375rem;
  background:#fff;color:var(--accent-deep);border-color:#fff;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
}
.post-cta-do .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.post-cta-do .note{font-size:14.5px;color:rgba(255,255,255,.72);margin:0}
@media (min-width:760px){
  .post-cta{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(24px,2.8vw,44px);align-items:center;
  }
  .post-cta-k,.post-cta h3,.post-cta p,.post-cta-do{grid-column:1}
  .post-cta-facts{
    grid-column:2;grid-row:1 / span 4;align-self:center;
    flex-direction:column;gap:13px;margin:0;
    padding-left:clamp(22px,2.4vw,34px);
    border-left:1px solid rgba(255,255,255,.3);
  }
  .post-cta-facts li{font-size:15.5px}
}

.author{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;
  padding:clamp(22px,2.4vw,30px);
  border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--paper);
}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--line)}
.author-k{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
.author h4{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.035em}
.author p{font-size:16px;line-height:1.6;margin-top:8px;max-width:56ch}
.author-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.author-links a{
  display:inline-flex;align-items:center;gap:9px;
  height:44px;padding:0 20px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  border:1.5px solid transparent;
  transition:background-color .15s var(--ease),color .15s var(--ease),
             box-shadow .15s var(--ease),transform .12s ease;
}
.author-links a svg{display:block;flex:0 0 auto}
.author-links a:hover{transform:translateY(-1px)}

.author-links .is-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 10px 24px -12px rgba(54,66,239,.95);
}
.author-links .is-primary:hover{background:var(--accent-deep)}

/* LinkedIn in its own blue, with the mark in a white tile so it reads as
   the logo and not as a grey glyph */
.author-links .is-in{background:#0A66C2;color:#fff;box-shadow:0 10px 24px -12px rgba(10,102,194,.95)}
.author-links .is-in:hover{background:#084F98}
.author-links .in-mark{
  width:22px;height:22px;border-radius:5px;flex:0 0 auto;
  display:grid;place-items:center;background:#fff;color:#0A66C2;
}
.author-links .in-mark svg{width:12px;height:12px}
@media (max-width:520px){
  .author{grid-template-columns:1fr;gap:16px}
}

.related{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
.related h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.035em;margin-bottom:var(--s3)}


/* -- 15. Blog index cards (shared with /blog/) ---------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px)}
.card{
  display:flex;flex-direction:column;
  border:1.5px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);overflow:hidden;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 30px 60px -34px rgba(10,12,18,.5)}
/* height:auto matters — the width/height attributes on an <img> are
   presentational hints, so without it the attribute height wins and
   aspect-ratio is ignored. */
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)}
.card-in{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
.card-k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.card h4{font-family:var(--display);font-weight:700;font-size:19.5px;letter-spacing:-.032em;line-height:1.25;color:var(--ink)}
.card p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.card-m{margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--ink-3)}
/* three across inside the reading column, stacked on a phone */
@media (min-width:660px){
  .related .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .related .card h4{font-size:17.5px}
  .related .card p{font-size:14.5px}
  .related .card-in{padding:16px 17px 19px}
}


/* -- 16. Back to top ------------------------------------------------ */
.totop{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);
  z-index:55;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--ink);color:#fff;border:0;
  box-shadow:0 10px 30px -10px rgba(10,12,18,.7);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .22s var(--ease),transform .22s var(--ease),
             visibility .22s var(--ease),background-color .15s var(--ease);
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--accent)}
.totop:active{transform:translateY(1px)}
.totop svg{display:block}

/* -- 15b. Category labels on cards ----------------------------------
   One solid colour per category so a row of cards reads as a set of
   different things at a glance. Saturated, never pastel, white text. */
.card-k[class*="card-k--"]{
  display:inline-block;align-self:flex-start;
  padding:5px 9px;border-radius:4px;
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.12em;
}
.card-k--pricing{background:#0F7B3B}
.card-k--hiring {background:#B3261E}
.card-k--start  {background:#6D28D9}
.card-k--trades {background:#B45309}
.card-k--clinics{background:#0B69C7}
.card-k--food   {background:#BE1259}
.card-k--content{background:#0E7490}