/* ==========================================================================
   hustle&passive — article layer
   Loaded after site.css on single-guide pages only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Post header
   -------------------------------------------------------------------------- */
.post-head { padding: 56px 0 30px; max-width: 840px; margin: 0 auto; text-align: center; }
.post-head h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1; letter-spacing: -.02em; margin: 14px 0;
}
.post-head .desc { color: var(--muted); font-size: 17px; }

.post-meta {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; margin-top: 18px; font-size: 13px; color: var(--muted);
  flex-wrap: wrap;
}
/* Bundle alternated green and orange avatars between articles for no stated
   reason. Green everywhere — the byline is one author now. */
.post-meta .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font: 700 11px Inter;
}

/* --------------------------------------------------------------------------
   Article body — sticky table of contents beside the prose
   -------------------------------------------------------------------------- */
.article {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px; max-width: 1020px; margin: 0 auto; padding: 0 24px 64px;
}

.toc {
  position: sticky; top: 90px; align-self: start;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
}
.toc h5 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.toc a {
  display: block; font-size: 13px; color: var(--muted);
  text-decoration: none; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.toc a:last-child { border: none; }
.toc a:hover { color: var(--orange); }
.toc a.toc-active { color: var(--orange); font-weight: 600; }

/* --------------------------------------------------------------------------
   Short articles
   --------------------------------------------------------------------------
   Several guides run only a few hundred words. Beside a full-height sticky
   TOC that reads as a layout bug rather than a short read, so those pages opt
   into a single column with the contents as a horizontal chip row instead.
   -------------------------------------------------------------------------- */
.article--short { grid-template-columns: minmax(0, 1fr); max-width: 780px; gap: 0; }
.article--short .toc {
  position: static; margin-bottom: 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 16px;
}
.article--short .toc h5 { margin: 0 6px 0 0; }
.article--short .toc a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 12px;
}

/* --------------------------------------------------------------------------
   Author box
   -------------------------------------------------------------------------- */
.author-box {
  display: flex; gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; margin: 30px 0;
}
.author-box .av {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font: 700 16px Inter; flex-shrink: 0;
}
.author-box b { font-size: 15px; }
.author-box p { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Related guides
   -------------------------------------------------------------------------- */
.related { background: var(--bg2); padding: 64px 0; }
.related .sec-head { margin-bottom: 30px; }
.related .sec-head h2 { font-size: clamp(28px, 3vw, 38px); margin: 12px 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .article { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; margin-bottom: 32px; }
}