/* ==========================================================================
   Article layout — loaded only by blog posts, on top of site.css.
   1120px page, 1fr/300px sidebar grid at 64px gap above 1000px.
   ========================================================================== */

.post{ background:var(--ground); color:var(--ink); }
.post .wrap{ max-width:1120px; }

/* Available to screen readers, invisible on screen. */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* The header is sticky, so anchored headings need room above them. */
[id]{ scroll-margin-top:84px; }

/* ------------------------------------------------------------- header ---- */
.post__head{ padding-block:40px 0; }
.post__kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
}
.post__kicker .cat{
  color:var(--accent); border:1px solid var(--line-blue); background:var(--ground-tint);
  padding:5px 11px; border-radius:999px;
}
.post__kicker .byline{ color:var(--ink); }

.post h1{
  font-size:clamp(1.8125rem,6.5vw,2.875rem);  /* 29px on phones → 46px */
  font-weight:800; line-height:1.08; letter-spacing:-.035em;
  margin-block:18px 16px;
}
.post__standfirst{
  font-size:clamp(1.0625rem,2.4vw,1.1875rem); line-height:1.6; color:var(--muted);
  max-width:58ch;
}
.post__rule{ border:0; border-top:1px solid var(--line); margin-top:26px; }

/* ------------------------------------------------------------- byline ---- */
.post__byline{
  display:flex; align-items:center; gap:12px; padding-block:18px;
  border-bottom:1px solid var(--line); margin-bottom:28px;
}
.post__byline-avatar{ width:38px; height:38px; border-radius:50%; background:var(--ground-icon); border:1px solid var(--line-blue); flex:0 0 auto; }
.post__byline-name{ font-size:.9063rem; font-weight:700; }
.post__byline-note{ font-size:.8125rem; color:var(--muted-2); }

/* --------------------------------------------------------------- hero ---- */
.post__hero{
  border:1px solid var(--line); border-radius:18px; margin-top:24px; overflow:hidden;
  background:var(--ground-icon);
}
.post__hero img,.post__hero picture{ display:block; width:100%; }
.post__hero img{
  height:auto; aspect-ratio:1200/630; object-fit:cover;
}
.post__hero figcaption{
  border-top:1px solid var(--line); padding:12px 16px;
  font-size:.75rem; letter-spacing:.02em; color:var(--muted-2);
}

/* --------------------------------------------------------------- grid ---- */
.post__grid{ display:grid; gap:36px; padding-block:32px 56px; }
/* A grid item defaults to min-width:auto, so the wide comparison table
   would stretch its column instead of scrolling inside it. */
.post__grid > *{ min-width:0; }

/* ------------------------------------------------------------- article ---- */
.post__body > * + *{ margin-top:20px; }
.post__body p{ font-size:1.0625rem; line-height:1.7; color:var(--muted); max-width:66ch; }
.post__body h2{
  font-size:clamp(1.5rem,4.2vw,1.875rem); font-weight:800; line-height:1.15;
  letter-spacing:-.02em; color:var(--ink); margin-top:48px;
}
.post__body h2:first-child{ margin-top:0; }
.post__body h3{ font-size:1.1875rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-top:8px; }
.post__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* key takeaways ------------------------------------------------------------ */
.takeaways{ border:1px solid var(--line-blue); background:var(--ground-tint); border-radius:16px; margin-top:32px; }
.takeaways__bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border-bottom:1px solid var(--line-blue); padding:16px 20px;
  font-size:1.125rem; font-weight:800; letter-spacing:-.01em;
}
.takeaways__bar span{ color:var(--muted-2); font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:none; }
.takeaways ol{ list-style:none; margin:0; padding:16px 6px; display:grid; gap:14px; }
.takeaways li{ display:flex; gap:12px; align-items:flex-start; padding:0 14px; }
.takeaways li b{
  width:20px; height:20px; border-radius:6px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:.6563rem; font-weight:700; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; margin-top:2px;
}
.takeaways li p{ margin:0; font-size:.9688rem; line-height:1.6; color:#243049; max-width:60ch; }

/* comparison table --------------------------------------------------------- */
.table-scroll{ overflow-x:auto; margin-top:24px; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; }
.post table{ width:100%; border-collapse:collapse; min-width:520px; }
.post th{
  text-align:left; font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:14px 16px; background:var(--ground-soft); border-bottom:1px solid var(--line);
  white-space:nowrap; color:var(--muted-2);
}
.post td{ font-size:.9375rem; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.post tbody tr:last-child td{ border-bottom:0; }
.post td:first-child{ font-weight:600; }
.post__disclosure{
  border-left:3px solid var(--line-blue); padding-left:16px;
  font-size:.875rem; color:var(--muted); margin-top:20px;
}
.post__note{ font-size:.8125rem; color:var(--muted-2); margin-top:12px; }

/* Below 700px the columns stop fitting, so each row becomes a card with
   its own labels. Beats a horizontal scrollbar nobody notices. */
@media (max-width:699px){
  .table-scroll{ overflow-x:visible; border:0; }
  .post table{ min-width:0; }
  .post thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .post tbody tr{ display:block; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:10px; }
  .post tbody tr:first-child{ margin-top:0; }
  .post td{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:5px 0; border-bottom:0; font-size:.9375rem;
  }
  .post td::before{
    content:attr(data-label);
    font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted-2); flex:0 0 auto;
  }
  .post td:first-child{
    font-size:1rem; font-weight:800; padding-bottom:8px;
    border-bottom:1px solid var(--line-soft); margin-bottom:6px;
  }
  .post td:first-child::before{ display:none; }
  .post td:first-child{ display:block; }
}

/* pull quote --------------------------------------------------------------- */
.post blockquote{
  border-left:4px solid var(--accent); padding-left:24px; margin:34px 0;
  font-size:clamp(1.1875rem,3.2vw,1.5rem); font-weight:600; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink); max-width:56ch;
}

/* tool-section pattern: H2 "N. Tool Name" -> video facade -> prose -------- */
.tool-section{ margin-top:48px; }
.tool-section h2{ margin-top:0 !important; }

/* YouTube facade: a thumbnail + play button; the real iframe is injected on
   click by a small inline script, so the post never pays YouTube's JS cost
   until someone actually wants the video. */
.yt-facade{
  position:relative; margin-top:20px; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:var(--ink); aspect-ratio:16/9; cursor:pointer;
}
.yt-facade img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.yt-facade__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.yt-facade__play span{
  width:64px; height:64px; border-radius:50%; background:rgba(21,84,240,.92);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(11,18,32,.4);
}
.yt-facade__play svg{ margin-left:4px; }
.yt-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-facade__caption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
  font-size:.8125rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.55));
}

/* FAQ ---------------------------------------------------------------------- */
.faq{ margin-top:24px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq__item{ border-bottom:1px solid var(--line-soft); }
.faq__item:last-child{ border-bottom:0; }
.faq__q{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  background:#fff; border:0; cursor:pointer; text-align:left;
  font:700 1rem/1.35 var(--sans); color:var(--ink);
  padding:20px 22px;
}
.faq__q:hover{ color:var(--accent); }
.faq__mark{ color:var(--accent); font-size:1.375rem; font-weight:500; line-height:1; flex:0 0 auto; }
.faq__a{ display:none; padding:0 22px 22px; }
.faq__a p{ font-size:.9375rem; line-height:1.65; color:var(--muted); max-width:66ch; margin:0; }
.faq__item[data-open="true"] .faq__a{ display:block; }

/* CTA ---------------------------------------------------------------------- */
.post__cta{ background:var(--ink); color:#fff; padding:30px; border-radius:18px; margin-top:44px; }
.post__cta h2{ color:#fff; margin:0 0 10px; font-size:clamp(1.375rem,4vw,1.625rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.post__cta p{ color:var(--muted-3); margin:0 0 22px; max-width:52ch; font-size:.9688rem; }
.post__cta a{
  display:inline-block; background:var(--accent); color:#fff; border-radius:10px;
  font-size:.9375rem; font-weight:700;
  padding:14px 24px; text-decoration:none;
}
.post__cta a:hover{ background:var(--accent-mid); color:#fff; text-decoration:none; }

/* ------------------------------------------------------------- sidebar ---- */
.post__side > * + *{ margin-top:32px; }
.side__block--toc{ display:none; }   /* the phone gets .toc-mobile instead */
.side__block{ border-top:1px solid var(--line); padding-top:16px; }
.side__title{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:14px;
}
.side__block ul{ list-style:none; margin:0; padding:0; }
.side__block li + li{ margin-top:10px; }
.side__block a{ font-size:.9063rem; text-decoration:none; color:var(--ink); }
.side__block a:hover{ color:var(--accent); }
.side__author b{ display:block; font-size:.9688rem; font-weight:800; margin-bottom:8px; }
.side__author p{ font-size:.8438rem; line-height:1.55; color:var(--muted); margin:0; }

/* ------------------------------------------------- byline + author box ---- */
.post__author{ border-top:1px solid var(--line); margin-top:44px; padding-top:24px; }
.post__author .author__label{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 14px;
}
.post__author-inner{ display:flex; gap:16px; align-items:flex-start; }
.post__author-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--ground-icon); border:1px solid var(--line-blue); flex:0 0 auto; }
.post__author .author__name{
  font-size:1rem; font-weight:800; color:var(--ink); margin:0 0 8px;
}
.post__author .author__bio{
  font-size:.9063rem; line-height:1.6; color:var(--muted); margin:0; max-width:66ch;
}
.post__author .author__link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-weight:700; font-size:.875rem; color:var(--accent);
}
.post__author .author__link:hover{ color:var(--accent-dark); }

/* On small screens the table of contents becomes a disclosure above the hero
   and the sidebar blocks fall under the article. */
.toc-mobile{ margin-top:20px; border:1px solid var(--line); border-radius:12px; }
.toc-mobile summary{
  cursor:pointer; padding:15px 18px; list-style:none;
  font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
.toc-mobile summary::-webkit-details-marker{ display:none; }
.toc-mobile summary::after{ content:'+'; float:right; color:var(--accent); font-size:1.25rem; line-height:1; }
.toc-mobile[open] summary::after{ content:'\2013'; }
.toc-mobile ul{ list-style:none; margin:0; padding:0 18px 16px; }
.toc-mobile li + li{ margin-top:10px; }
.toc-mobile a{ font-size:.9063rem; text-decoration:none; }

@media (min-width:1000px){
  .post__head{ padding-block:52px 0; }
  .post__grid{ grid-template-columns:1fr 300px; gap:64px; padding-block:40px 88px; }
  .post__side{ position:sticky; top:96px; align-self:start; }
  .toc-mobile{ display:none; }
  .side__block--toc{ display:block; }
  .post__side > .side__block--toc + *{ margin-top:32px; }
  .post__cta{ padding:40px; }
  .takeaways li{ padding:0 22px; }
}