/* ==========================================================================
   HASHTAG SMOKE SHOP — BLOG
   --------------------------------------------------------------------------
   Loaded only by /blog and the post pages, so the rest of the site does not
   carry article styles it never uses. Everything here is built from the
   tokens in tokens.css; no new colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STATUS BANNERS (drafts only — they never reach a published post)
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: var(--s5);
}
.notice svg { flex: none; margin-top: 2px; }
.notice p { margin: 0; font-size: var(--step--1); color: var(--muted); }
.notice p + p { margin-top: var(--s2); }
.notice strong { color: var(--text); }

.notice-draft { border-color: var(--ember); background: rgba(255, 107, 44, .07); }
.notice-draft svg { color: var(--ember-text); }
.notice-hold  { border-color: var(--closed); background: rgba(248, 113, 113, .07); }
.notice-hold svg { color: var(--closed); }

/* --------------------------------------------------------------------------
   2. BLOG INDEX
   -------------------------------------------------------------------------- */

.post-list { display: grid; gap: var(--s5); }

.post-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s5) var(--s6);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.post-card:hover { background: var(--panel-2); border-color: var(--violet-line); }
.post-card h2 { font-size: var(--step-2); margin: var(--s3) 0 var(--s3); }
.post-card p { color: var(--muted); margin: 0; max-width: 68ch; }

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--step--1);
  color: var(--faint);
}
.post-card-more {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--acid);
  font-weight: 600;
  font-size: 13px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.badge-draft { color: var(--ember-text); }
.badge-hold  { color: var(--closed); }

.post-list-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--s7) var(--s6);
  text-align: center;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. POST HEAD
   -------------------------------------------------------------------------- */

.post-head { max-width: 46rem; }
.post-head .hero-title { font-size: var(--step-3); margin-block: var(--s4) var(--s5); }

/* Post titles and article subheads read as prose. The display face is built
   for four or five words of section furniture; a full sentence set in it,
   uppercase, is hard to read. These take the same treatment h3 already has
   everywhere else on the site. The section headings around the article
   ("Keep reading", "Come see us") stay in the display face. */
.post-head .hero-title,
.post-card h2,
.article h2 {
  font-family: var(--font-body);
  font-weight: 650;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  font-size: var(--step--1);
  color: var(--faint);
  margin-bottom: var(--s5);
}
.post-byline b { color: var(--muted); font-weight: 600; }
/* No separator characters: on a narrow screen one always ends up dangling at
   the end of a wrapped line. The gap carries the separation instead. */
.post-byline span + span { padding-left: var(--s4); border-left: 1px solid var(--line); }

/* The 21+ line sits directly under the title on every post. */
.post-age {
  display: flex;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acid);
  border-radius: var(--radius-sm);
  background: var(--panel);
  margin-bottom: var(--s6);
}
.post-age p { margin: 0; font-size: var(--step--1); color: var(--muted); }
.post-age b { color: var(--text); }

/* --------------------------------------------------------------------------
   4. TABLE OF CONTENTS
   -------------------------------------------------------------------------- */

.toc {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s7);
}
.toc p.label { margin: 0 0 var(--s3); }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: var(--s2); }
.toc li { counter-increment: toc; }
.toc a {
  color: var(--muted);
  font-size: var(--step--1);
  display: inline-flex;
  gap: var(--s3);
  align-items: baseline;
  min-height: 28px;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.toc a:hover { color: var(--acid); }

/* --------------------------------------------------------------------------
   5. ARTICLE PROSE
   -------------------------------------------------------------------------- */

.article { max-width: 46rem; }
.article > * + * { margin-top: var(--s5); }

.article h2 {
  font-size: var(--step-2);
  margin-top: var(--s9);
  /* Anchor links land below the sticky header. */
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}
.article h3 { font-size: var(--step-1); margin-top: var(--s7); }
.article p, .article li { color: var(--muted); }
.article strong { color: var(--text); }

.article ul, .article ol { display: grid; gap: var(--s3); padding-left: var(--s5); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { padding-left: var(--s2); }
.article li::marker { color: var(--faint); }

/* Tables scroll sideways on a phone rather than forcing the page to. */
.article-table {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.article-table table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.article-table th, .article-table td {
  padding: var(--s3) var(--s5);
  text-align: left;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.article-table thead th { color: var(--text); font-weight: 650; background: var(--panel); }
.article-table tbody th { color: var(--text); font-weight: 600; }
.article-table td { color: var(--muted); }
.article-table tr:last-child th, .article-table tr:last-child td { border-bottom: 0; }

.article-note {
  font-size: var(--step--1);
  color: var(--faint);
  border-left: 2px solid var(--line);
  padding-left: var(--s4);
}

/* Reserves the space a photo will occupy, so dropping one in later does not
   move the text under it. */
.photo-slot {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  text-align: center;
  color: var(--faint);
  font-size: var(--step--1);
  background: var(--panel);
}

/* --------------------------------------------------------------------------
   6. RELATED + CLOSING BLOCKS
   -------------------------------------------------------------------------- */

.related { display: grid; gap: var(--s4); }
.related-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  transition: background .2s var(--ease);
}
.related-item:hover { background: var(--panel-2); }
.related-item span:first-child { font-weight: 600; }
.related-item .related-kind { color: var(--faint); font-size: var(--step--1); font-weight: 400; }

@media (max-width: 560px) {
  .post-card { padding: var(--s5); }
  .related-item { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}