/* Storage Baskets UK - blog layer.
   Loaded after store.css and brand.css, on generated blog pages only.
   Uses the shop's existing tokens: warm terracotta, chalk paper, sage accent.

   This shop's brand layer does not define --brass-deep or --line-soft, which
   the blog layer is written against. They are defined here rather than by
   editing the shop's own tokens, because an undefined var() silently falls
   back to the inherited colour - section labels and table headings would have
   rendered in body ink with no error anywhere. */
:root {
  /* A deepened version of the shop's --primary. Measured 6.9:1 on --paper,
     6.2:1 on --tint and 5.6:1 on --tint-deep. --primary itself only reaches
     4.0:1 on paper and 3.2:1 on the deep tint, so it cannot carry body links,
     and --accent drops to 4.4:1 on --tint-deep. */
  --brass-deep: #7A4D28;
  --line-soft: rgba(23, 19, 15, 0.07);
}


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

/* store.css sets padding-top only, so the author box butted straight into the
   next band at 0px. */
.article { padding-bottom: 76px; }

/* Body prose runs at full ink. --ink-soft is fine for captions and meta, but a
   whole page of it reads washed out against the warm chalk paper. */
.article-body { color: var(--ink); }

/* In-body links. --clay reaches only 4.39:1 on paper and 3.75:1 on a tinted
   band; measured, not eyeballed. This keeps the same hue and clears AA on
   every ground a post link actually sits on. */
.article-body a,
.post-faqs a,
.key-points a {
  color: var(--brass-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { text-decoration-thickness: 2px; }
.article-body p { margin: 0 0 1.2em; }

/* A ul with no bottom margin collides with the next h2 at exactly 0px, because
   the heading sets margin-top on itself and the list sets nothing. */
.article-body ul,
.article-body ol { margin: 0 0 1.4em; padding-left: 1.2em; }
.article-body li { margin-bottom: 0.5em; }
.article-body li::marker { color: var(--brass-deep); }

.article-body h2:first-child { margin-top: 0; }

/* ---------- 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; }

/* ---------- what this guide covers -------------------------------------- */

.post-toc {
  margin: 34px 0 40px;
  padding: 26px 30px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.post-toc-h {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-family: var(--font-body);
}
.post-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.post-toc li {
  counter-increment: toc;
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
  font-size: 0.97rem;
  line-height: 1.5;
}
.post-toc li:last-child { margin-bottom: 0; }
.post-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.12em;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--brass-deep);
  opacity: 0.75;
}
.post-toc a {
  color: var(--brass-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(138, 69, 32, 0.35);
  transition: text-decoration-color 0.3s var(--ease, ease);
}
.post-toc a:hover { text-decoration-color: currentColor; }

/* 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 h3:first-of-type { border-top: 0; padding-top: 0; }
.post-faqs p { margin: 0; color: var(--ink); }

/* ---------- author ------------------------------------------------------- */

.author-box .author-role {
  font-size: 0.9rem;
  /* --ink-faint is 3.0:1 here, which fails AA for text this size. */
  color: var(--ink-soft);
  margin-top: -3px;
}

/* ---------- 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 --------------------------------- */

.hub-answer { max-width: 46em; margin-top: 26px; }

.topics { padding: 76px 0; }
.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 ------------------------------------ */

.post-products { padding: 72px 0; }