/* ==========================================================================
   Article layout — loaded only by blog posts, on top of site.css.
   Numbers follow the design handoff: 1120px page, 1fr/300px grid at 64px,
   H1 68/0.98 at -0.028em, H2 34, body 18/1.65, 2px rules, radius 0.
   ========================================================================== */

.post{
  --ground:#fff;
  --neutral-100:#f8f4f4;
  --neutral-300:#d7d3d3;
  --body:#444141;
  --measure:68ch;

  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:44px 0; }
.post__kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.post__kicker > * + *::before{
  content:'|'; color:var(--neutral-300); margin-right:12px; font-weight:400;
}
.post__kicker .cat{ color:var(--accent); }

.post h1{
  font-size:clamp(2.75rem,7.6vw,4.25rem);  /* 44px on phones → 68px */
  font-weight:800; line-height:.98; letter-spacing:-.028em;
  margin-block:22px 20px;
}
.post__standfirst{
  font-size:clamp(1.0625rem,2.6vw,1.375rem); line-height:1.45; color:var(--body);
  max-width:58ch;
}
.post__rule{ border:0; border-top:2px solid var(--ink); margin-top:30px; }

/* --------------------------------------------------------------- hero ---- */
.post__hero{
  border:2px solid var(--ink); margin-top:32px; overflow:hidden;
  background:var(--neutral-100);
}
.post__hero img{
  /* Covers are generated at 1200x630 and must never be cropped — the artwork
     carries its own frame and a meta row at the bottom edge. contain (not
     cover) keeps an off-ratio image letterboxed on the figure background
     instead of clipped. */
  width:100%; height:auto; aspect-ratio:1200/630; object-fit:contain; display:block;
}
/* Photographs go through grayscale per the design spec; the brand graphic
   above keeps its accent colour. */
.post__hero--photo img{ filter:grayscale(1); }
.post__hero figcaption{
  border-top:2px solid var(--ink); padding:12px 16px;
  font-size:.75rem; letter-spacing:.06em; color:var(--muted);
}

/* --------------------------------------------------------------- grid ---- */
.post__grid{ display:grid; gap:40px; padding-block:36px 64px; }
/* 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:22px; }
.post__body p{ font-size:1.125rem; line-height:1.65; color:var(--body); max-width:var(--measure); }
.post__body h2{
  font-size:clamp(1.6rem,4.6vw,2.125rem); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); margin-top:52px;
}
.post__body h2:first-child{ margin-top:0; }
.post__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* key takeaways ------------------------------------------------------------ */
.takeaways{ border:2px solid var(--ink); background:var(--neutral-100); margin-top:36px; }
.takeaways__bar{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  border-bottom:2px solid var(--ink); padding:14px 18px;
  font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}
.takeaways__bar span{ color:var(--muted); letter-spacing:.12em; font-weight:700; }
.takeaways ol{ list-style:none; margin:0; padding:0; }
.takeaways li{
  display:grid; grid-template-columns:56px 1fr; align-items:start;
  padding:18px; border-bottom:2px solid var(--neutral-300);
}
.takeaways li:last-child{ border-bottom:0; }
.takeaways li b{ color:var(--accent); font-size:1.375rem; font-weight:800; font-variant-numeric:tabular-nums; }
.takeaways li p{ margin:0; font-size:1rem; line-height:1.55; max-width:60ch; }

/* comparison table --------------------------------------------------------- */
.table-scroll{ overflow-x:auto; margin-top:26px; -webkit-overflow-scrolling:touch; }
.post table{ width:100%; border-collapse:collapse; min-width:520px; }
.post th{
  text-align:left; font-size:.8125rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:14px 12px; border-bottom:2px solid var(--ink);
  white-space:nowrap;
}
.post td{ font-size:1rem; padding:16px 12px; border-bottom:2px solid var(--neutral-300); }
.post tbody tr:last-child td{ border-bottom:0; }
.post td:first-child{ font-weight:600; }
.post__disclosure{
  border-left:4px solid var(--neutral-300); padding-left:18px;
  font-size:.9375rem; color:var(--muted); margin-top:26px;
}
.post__note{ font-size:.8125rem; color:var(--muted); margin-top:14px; }

/* Below 700px the four 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; }
  .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-bottom:2px solid var(--ink); padding:14px 0; }
  .post tbody tr:last-child{ border-bottom: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-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); flex:0 0 auto;
  }
  .post td:first-child{
    font-size:1.0625rem; font-weight:800; padding-bottom:10px;
    border-bottom:2px solid var(--neutral-300); margin-bottom:6px;
  }
  .post td:first-child::before{ display:none; }
  .post td:first-child{ display:block; }
}

/* pull quote --------------------------------------------------------------- */
.post blockquote{
  border-left:6px solid var(--accent); padding-left:28px; margin:38px 0;
  font-size:clamp(1.25rem,3.4vw,1.6875rem); font-weight:600; line-height:1.25;
  letter-spacing:-.015em; color:var(--ink); max-width:56ch;
}

/* FAQ ---------------------------------------------------------------------- */
.faq{ margin-top:26px; border-top:2px solid var(--ink); }
.faq__item{ border-bottom:2px solid var(--neutral-300); }
.faq__q{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  background:none; border:0; cursor:pointer; text-align:left;
  font:700 1.0625rem/1.35 var(--sans); color:var(--ink);
  padding:20px 0; letter-spacing:-.01em;
}
.faq__q:hover{ color:var(--accent); }
.faq__mark{ color:var(--accent); font-size:1.375rem; font-weight:700; line-height:1; flex:0 0 auto; }
.faq__a{ display:none; padding-bottom:22px; }
.faq__a p{ font-size:1rem; line-height:1.6; color:var(--body); max-width:66ch; margin:0; }
.faq__item[data-open="true"] .faq__a{ display:block; }

/* CTA ---------------------------------------------------------------------- */
.post__cta{ background:var(--accent); color:#fff; padding:32px; margin-top:48px; }
.post__cta h2{ color:#fff; margin:0 0 12px; font-size:clamp(1.5rem,4.2vw,2rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.post__cta p{ color:#fff; opacity:.92; margin:0 0 24px; max-width:52ch; font-size:1rem; }
.post__cta a{
  display:inline-block; background:#fff; color:var(--accent);
  font-size:.875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 28px; text-decoration:none;
}
.post__cta a:hover{ background:var(--ink); color:#fff; }

/* ------------------------------------------------------------- sidebar ---- */
.post__side > * + *{ margin-top:34px; }
.side__block--toc{ display:none; }   /* the phone gets .toc-mobile instead */
.side__block{ border-top:2px solid var(--ink); padding-top:16px; }
.side__title{
  font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); 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:.9375rem; text-decoration:none; color:var(--ink); }
.side__block a:hover{ color:var(--accent); }
.side__author b{ display:block; font-size:1.0625rem; font-weight:800; margin-bottom:8px; }
.side__author p{ font-size:.875rem; line-height:1.55; color:var(--body); margin:0; }

/* ------------------------------------------------- byline + author box ---- */
/* The kicker byline inherits the row's muted uppercase treatment; the name
   itself steps up to ink, the same move .cat makes with the accent. */
.post__kicker .byline{ color:var(--ink); }
.post__author{ border-top:2px solid var(--ink); margin-top:48px; padding-top:16px; }
.post__author .author__label{
  font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}
.post__author .author__name{
  font-size:1.0625rem; font-weight:800; color:var(--ink); margin:0 0 8px;
}
.post__author .author__bio{
  font-size:.9375rem; line-height:1.6; color:var(--body); margin:0; max-width:66ch;
}

/* On small screens the table of contents becomes a disclosure above the hero
   and the sidebar blocks fall under the article. */
/* Sits directly under .post__rule, so it borrows that line as its top edge. */
.toc-mobile{ margin-top:0; border-bottom:2px solid var(--ink); }
.toc-mobile summary{
  cursor:pointer; padding:15px 0; list-style:none;
  font-size:.75rem; font-weight:800; letter-spacing:.15em; 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 0 16px; }
.toc-mobile li + li{ margin-top:10px; }
.toc-mobile a{ font-size:.9375rem; text-decoration:none; }

@media (min-width:1000px){
  .post__head{ padding-block:56px 0; }
  .post__grid{ grid-template-columns:1fr 300px; gap:64px; padding-block:44px 90px; }
  .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:34px; }
  .post__cta{ padding:40px; }
  .takeaways li{ padding:20px 22px; }
}