/* ============================================================
   BLOG
   Loaded after styles.css and reuses its tokens, .wrap, .btn,
   .eyebrow, .lede, .nav and .foot. Everything here is namespaced
   .blog* / .post* so nothing leaks back into the landing page.

   These pages carry no JavaScript, so nothing below depends on
   the .js class or on the data-fade / data-split hooks that
   app.js reads on the landing page.
   ============================================================ */

.blog-body{background:var(--paper)}

/* The nav is fixed at 78px; the page has to start below it. Same
   figure as .bk in book.css. */
.blog-main{
  padding-top:calc(78px + clamp(2rem,5vw,4.5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  min-height:100svh;
}

/* ---------------- index ---------------- */
.blog__head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.blog__head .lede{margin-top:1.25rem}

.blog__list{border-top:1px solid var(--ink)}
.blog__card{
  border-bottom:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.25rem) 0;
}
.blog__card h2{
  font-weight:900;font-size:clamp(1.375rem,2.6vw,2.125rem);
  line-height:1.05;letter-spacing:-.035em;color:var(--ink);
  margin:0 0 .5rem;
}
.blog__card h2 a{text-decoration:none;transition:color .3s}
.blog__card h2 a:hover{color:var(--accent)}
.blog__card p{margin:0;max-width:62ch;color:var(--ink-soft)}

.blog__date{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .65rem;
}

/* ---------------- article ---------------- */
.post{max-width:68ch;margin-inline:auto}
.post__head{margin-bottom:clamp(2rem,4vw,3rem)}
.post h1{margin-bottom:1.25rem}
.post__lede{max-width:none;margin-bottom:0}

.post h2{
  font-weight:900;font-size:clamp(1.375rem,2.6vw,2rem);
  line-height:1.1;letter-spacing:-.03em;color:var(--ink);
  margin:clamp(2.5rem,5vw,3.75rem) 0 1rem;
}

/* styles.css strips list markers site-wide; prose needs them back. */
.post ul{list-style:disc;padding-left:1.3rem;margin:0 0 1.05em}
.post li{margin-bottom:.4rem}
.post li:last-child{margin-bottom:0}

/* :not(.btn) matters. Without it this rule outranks .btn--solid on
   specificity and paints the button's label in --ink on an --ink
   background, which reads as an empty black pill. */
.post a:not(.btn){
  color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;transition:color .3s;
}
.post a:not(.btn):hover{color:var(--accent)}

.post__note{font-size:.8125rem;color:var(--muted);letter-spacing:.02em}

/* The tables are four columns of prose and do not fit a phone. The
   wrapper scrolls rather than letting the page scroll sideways. */
.post__tablewrap{overflow-x:auto;margin:0 0 1.25rem}
.post table{
  border-collapse:collapse;width:100%;min-width:36rem;
  font-size:.9375rem;line-height:1.4;
}
.post th{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:left;white-space:nowrap;
  padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--ink);
}
.post td{
  padding:.85rem 1rem .85rem 0;vertical-align:top;color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.post th:last-child,.post td:last-child{padding-right:0}
.post td:first-child{font-weight:700;color:var(--ink)}
.post tr:last-child td{border-bottom:1px solid var(--line)}

/* Four columns of prose never fit a phone, and a sideways scroll just
   hides the last one. Below 640px each row becomes a small stacked
   block instead. The values read on their own — a place, a headcount,
   a use — so the headings are not repeated into every row. */
@media (max-width:640px){
  .post__tablewrap{overflow-x:visible}
  .post table{min-width:0}
  .post thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .post table,.post tbody,.post tr,.post td{display:block;width:auto}
  .post tr{border-bottom:1px solid var(--line);padding:1rem 0}
  .post tbody tr:first-child{padding-top:0}
  .post td{border:0;padding:0;font-size:.875rem}
  .post tr:last-child td{border-bottom:0}
  .post td:first-child{font-size:1.0625rem;line-height:1.25;margin-bottom:.4rem}
  .post td:nth-child(3){color:var(--ink);font-weight:600;margin:.2rem 0}
}

/* ---------------- closing call to action ---------------- */
.post__cta{margin-top:1.5rem}

/* ---------------- editor output ----------------
   Posts written in /admin come out of Quill as plain p, h2, ul, ol,
   blockquote and a. The rules above already cover most of it; these
   cover the rest, plus the strip a draft preview shows its owner. */
.post ol{list-style:decimal;padding-left:1.3rem;margin:0 0 1.05em}
.post blockquote{margin:0 0 1.05em;padding-left:1rem;border-left:2px solid var(--accent);color:var(--ink-soft)}
.post img{max-width:100%;height:auto}
.post__draft{font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 1.5rem}