/* The Hanging Basket Co. - blog layer.
   Loaded after the shop's own CSS, on generated blog pages only.

   Link colour is --forest, not --brass. Measured against this shop's own bands:
   --brass #a07c38 is 3.67:1 on --paper and 3.86:1 on --card, so it fails AA for
   body text everywhere the blog would use it. --forest #1d3a2a is 11.80 / 12.42
   and --moss #3d6b4c is 5.86 / 6.17.

   --brass-deep and --line-soft are defined here rather than in the shop's own
   tokens, because an undefined var() falls back to the inherited colour with no
   error anywhere - section labels would silently render in body ink. */
:root {
  --brass-deep: #6f5626;   /* darkened --brass; 5.9:1 on --paper, 6.2:1 on --card */
  --line-soft: rgba(23, 35, 27, 0.07);
  /* This layer was written against another shop's token names. The shop never
     declares them, and an undefined var() silently kills the whole declaration
     (no border, no background, no radius). Alias them onto the real tokens. */
  --line: var(--hair-2);
  --radius: var(--r-md);
  --tint: var(--paper-2);
  --accent-soft: var(--paper-2);
  --ink-soft: var(--ink-2);
  --font-display: var(--font);
  --font-body: var(--font);
}


/* ---------- article shell ----------------------------------------------- */

.article.post { padding-bottom: clamp(52px, 6vw, 80px); }

/* One left-aligned reading column: crumbs, title, body and author box all share
   the same left edge. site.css centres .prose / .author at 700px, which left
   the header floating in the middle while the body ran elsewhere. */
.post-col { max-width: 820px; }
.post .prose,
.post .author { max-width: none; margin-left: 0; margin-right: 0; }
.post .author { margin-top: clamp(34px, 4vw, 52px); }

.post-head { margin: 0 0 clamp(22px, 2.6vw, 34px); }
.post-head .micro { margin-bottom: 12px; }
.post-head h1 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.post-head .article-meta { margin: 0; }

.post .quick-answer { margin-top: 0; }
.post .toc { margin: 1.6em 0 0.4em; }

.article-body { color: var(--ink); }
.article-body p { margin: 0 0 1.2em; }
.article-body h2[id]:first-child { margin-top: 0; }

.author .author-role { font-size: 0.85rem; color: var(--ink-2); margin-top: -2px; }

/* ---------- the short version ------------------------------------------- */

.key-points {
  margin: 2.4em 0 0;
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: inset 2px 0 0 var(--brass);
}
.prose .key-points h2 {
  margin: 0 0 12px; padding: 0; box-shadow: none;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--brass-deep);
}
.key-points ul { margin: 0; }
.key-points li:last-child { margin-bottom: 0; }

/* ---------- hub ---------------------------------------------------------- */

.hub-answer { max-width: 46em; margin: 22px 0 0; }
/* the hub answer carries its own bold label, so drop the injected one */
.hub-answer::before { content: none; }
.phead .lede { max-width: 60ch; }

/* ---------- comparison tables ------------------------------------------- */

/* Wide tables scroll inside their own box. The page body must never scroll. */
.article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.9em 0;
  font-size: 0.95rem;
  -webkit-overflow-scrolling: touch;
}
.article-body table thead th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  /* 0.68rem lands at 10.9px, which is below the 12px floor this shop keeps
     getting pulled up on. Micro-labels still read as micro-labels at 12. */
  font-size: 0.75rem;
}
.article-body table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink);
}
.article-body table tr:last-child td { border-bottom: 0; }
.article-body table th:last-child,
.article-body table td:last-child { padding-right: 0; }

/* anchored headings sit clear of the fixed header when jumped to */
.article-body h2[id],
.article-body h3[id] { scroll-margin-top: 96px; }

/* ---------- FAQs --------------------------------------------------------- */

.post-faqs { margin-top: 2.4em; }
.post-faqs > h2 { margin-top: 0; }
.post-faqs h3 {
  margin: 1.7em 0 0.5em;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  padding-top: 1.1em;
  border-top: 1px dashed var(--line);
}
.post-faqs h2 + h3 { border-top: 0; padding-top: 0; }
.post-faqs p { margin: 0; color: var(--ink); }

/* ---------- preview bar -------------------------------------------------- */

.preview-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--brass-deep);
  color: #fff;
  text-align: center;
  padding: 11px 18px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.preview-bar strong {
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ---------- hub: answer box + topic list --------------------------------- */


.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  background: var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.topic-list li { margin: 0; }
.topic-list a {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  grid-template-areas:
    "rail name  count"
    "rail blurb count";
  align-items: center;
  gap: 2px 18px;
  background: var(--paper);
  padding: 20px 22px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.topic-list a:hover { background: var(--tint); }
.topic-rail {
  grid-area: rail;
  align-self: stretch;
  border-radius: 2px;
  min-height: 34px;
}
.topic-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.02rem;
}
.topic-blurb {
  grid-area: blurb;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.topic-count {
  grid-area: count;
  color: var(--brass-deep);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .topic-list a {
    grid-template-columns: 3px 1fr;
    grid-template-areas:
      "rail name"
      "rail blurb"
      "rail count";
    padding: 18px;
  }
  .topic-count { margin-top: 6px; }
}

/* ---------- product rail under a post ------------------------------------ */


/* TOC inside .prose: the prose list counter was stacking a second "00" number
   in front of the toc's own 01/02 numbering. */
.prose .toc li { padding-left: 0; margin: 0; }
.prose .toc li::before { content: none; }

/* dark pillar cards: the link inherited body ink and vanished into the green */
.gcard-lead .tlink { color: var(--on-dark); }
.gcard-lead .tlink::after { background: var(--brass-2); }