/* ============================================================
   BLOG — /blog and /blog/<post>
   ─────────────────────────────────────────────────────────
   Two page shapes share this file: the index, which is a list of
   cards, and a post, which is a column of prose beside a sticky
   contents list.

   Nearly all of it is descendant selectors under .b-body, because
   the post body is Markdown — there are no classes to hang styles
   on and there should not be. An <h2> in a post is an <h2>.

   The hero block is the same one every page-level template uses;
   it is repeated here rather than shared for the same reason it is
   repeated in guides.css and parties.css — each page loads exactly
   one stylesheet after main.css and nothing else.
============================================================ */

/* ============================================================
   HERO
============================================================ */
.page-hero {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse at 80% 50%, rgba(74,184,232,.2) 0%, transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 100% 100%, 150px 150px, 220px 220px;
  background-position: center, 20px 30px, 80px 70px;
  padding: 60px 20px 52px; text-align: center; color: #FFF;
}
.page-hero-eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 12px;
}
.page-hero-title {
  font-family: var(--font-display); font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  line-height: 1.15; margin-bottom: 16px;
}
.page-hero-sub {
  font-size: .97rem; font-weight: 600; color: rgba(255,255,255,.72);
  max-width: 640px; margin: 0 auto 22px; line-height: 1.65;
}

/* Index only: the invitation to name a topic or a guest. */
.b-ask {
  font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.72);
}
.b-ask a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

/* The blog's own name, linked back to the index. */
.page-hero-eyebrow a { text-decoration: underline; text-underline-offset: 3px; }
.page-hero-eyebrow a:hover { color: #FFF; }

/* Byline. Sits above the category line and outranks it: guest
   contributors are the point of this blog, so who wrote a post is
   more important than when it went up. */
.b-byline {
  font-size: .92rem; font-weight: 700; color: rgba(255,255,255,.8);
  margin-bottom: 10px;
}
.b-byline strong { color: var(--yellow); font-weight: 900; }

/* Category · date · reading time. */
.b-meta {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  font-size: .8rem; font-weight: 800; letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
.b-meta > span:first-child { color: var(--sky); }
.b-updated {
  margin-top: 8px; font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.5);
}

/* ============================================================
   STANDING-INTEREST NOTE

   Sits directly under the hero on every post, and says who wrote
   this and what they sell before the reader weighs the advice.
   The guides carry the same block for the same reason. It is not
   decoration — do not quietly drop it to save space.
============================================================ */
.b-note { background: var(--bg-alt); border-bottom: 2px solid var(--border); }
.b-note-inner {
  max-width: 780px; margin: 0 auto; padding: 22px 20px;
  display: flex; gap: 12px; align-items: flex-start;
}
.b-note-icon { font-size: 1.15rem; line-height: 1.5; flex-shrink: 0; }
.b-note p {
  font-size: .87rem; font-weight: 600; line-height: 1.7; color: var(--text-2);
}

/* ============================================================
   LAYOUT — prose beside a sticky contents list
============================================================ */
.b-layout { display: grid; grid-template-columns: 216px 1fr; gap: 44px; align-items: start; }

.b-toc {
  position: sticky; top: 92px;
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.b-toc-label {
  font-size: .7rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.b-toc-link {
  display: block; padding: 6px 0;
  font-size: .82rem; font-weight: 700; line-height: 1.4;
  color: var(--text-2); transition: color var(--transition);
}
.b-toc-link:hover { color: var(--sky); }

/* ============================================================
   THE POST BODY

   Markdown, so everything below is a bare element selector.
   Measure is capped at 68ch: long-form prose across a 900px
   column is genuinely harder to read, and this article is long.
============================================================ */
.b-body { max-width: 68ch; font-size: 1.02rem; line-height: 1.78; color: var(--text-2); }

.b-body > * + * { margin-top: 1.15em; }

.b-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 3.4vw, 1.72rem); line-height: 1.25;
  color: var(--heading); margin-top: 2.2em; padding-top: .5em;
  border-top: 2px solid var(--border);
}
.b-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.b-body h3 {
  font-size: 1.08rem; font-weight: 900; color: var(--text-1);
  margin-top: 1.9em;
}

.b-body strong { color: var(--text-1); font-weight: 800; }
.b-body em { color: var(--text-2); }
.b-body a { color: var(--sky); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Markdown lists need their bullets back — main.css strips them
   site-wide because every other list on the site is navigation. */
.b-body ul, .b-body ol { padding-left: 1.35em; }
.b-body ul { list-style: disc; }
.b-body ol { list-style: decimal; }
.b-body li { margin-top: .5em; }
.b-body li::marker { color: var(--sky); font-weight: 800; }
.b-body ol li::marker { color: var(--orange); }

/* Tables carry a lot of this article. They scroll rather than
   squash: a five-column age table at 360px wide is unreadable
   either way, and a horizontal scroll at least keeps the numbers
   legible. */
.b-body table {
  display: block; width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: .88rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
}
.b-body thead { background: var(--bg-alt); }
.b-body th {
  text-align: left; padding: 10px 14px; font-weight: 900;
  color: var(--text-1); white-space: nowrap;
}
.b-body td {
  padding: 10px 14px; border-top: 1px solid var(--border);
  vertical-align: top; font-weight: 600;
}
.b-body tbody tr:nth-child(even) { background: rgba(27,44,91,.025); }

/* Photographs. Full width of the prose column, and no wider: the
   column is already capped at 68ch, and an image that breaks out of
   it past the sticky contents list on the left looks like a bug. */
.b-figure { margin: 2em 0; }
.b-figure img {
  width: 100%; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--bg-alt);
}
.b-figure figcaption {
  margin-top: 10px; font-size: .84rem; font-weight: 700;
  line-height: 1.6; color: var(--text-muted);
  border-left: 3px solid var(--sky); padding-left: 12px;
}
.b-body blockquote {
  border-left: 3px solid var(--sky); padding-left: 16px;
  font-style: italic; color: var(--text-2);
}

/* The two callouts the posts use, matching the party FAQ's
   note/warn pair so the site has one visual language for
   "worth knowing" and "be careful". */
.b-body .blog-note,
.b-body .blog-warn {
  padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 700; line-height: 1.65;
}
.b-body .blog-note {
  background: var(--bg-alt); border-left: 3px solid var(--sky); color: var(--text-2);
}
.b-body .blog-warn {
  background: rgba(242,140,30,.1); border-left: 3px solid var(--orange); color: var(--text-1);
}
.b-body .blog-note strong,
.b-body .blog-warn strong { color: var(--text-1); }

.b-body hr { border: none; border-top: 2px solid var(--border); margin: 2.2em 0; }

/* ============================================================
   FAQ — the same shape as the party FAQ, one level simpler
============================================================ */
.b-faq { max-width: 780px; margin: 0 auto; }
.b-faq-item {
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden;
}
.b-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 15px 18px; font-weight: 800; font-size: .95rem;
  color: var(--text-1); display: flex; justify-content: space-between;
  align-items: center; gap: 14px;
}
.b-faq-item summary::-webkit-details-marker { display: none; }
.b-faq-chevron {
  color: var(--sky); font-size: .7rem; flex-shrink: 0;
  transition: transform var(--transition);
}
.b-faq-item[open] .b-faq-chevron { transform: rotate(180deg); }
.b-faq-answer {
  padding: 0 18px 16px; font-size: .9rem; font-weight: 600;
  line-height: 1.7; color: var(--text-2);
}

/* ============================================================
   KEEP READING + INDEX CARDS
============================================================ */
.b-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.b-more-card {
  display: block; background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-md); padding: 20px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.b-more-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky);
}
.b-more-icon { display: block; font-size: 1.6rem; margin-bottom: 10px; }
.b-more-title {
  display: block; font-family: var(--font-display); font-size: 1.02rem;
  color: var(--heading); margin-bottom: 6px; line-height: 1.3;
}
.b-more-text { display: block; font-size: .86rem; font-weight: 600; color: var(--text-2); line-height: 1.6; }

.b-index { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.b-index-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.b-index-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky);
}
.b-index-icon {
  font-size: 2.1rem; line-height: 1; flex-shrink: 0;
  background: var(--bg-alt); border-radius: var(--radius-md); padding: 14px;
}
.b-index-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.b-index-meta > span:first-child { color: var(--orange); }
.b-index-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.35rem); color: var(--heading);
  line-height: 1.25; margin-bottom: 8px;
}
.b-index-text { font-size: .92rem; font-weight: 600; color: var(--text-2); line-height: 1.65; }
.b-index-link {
  display: inline-block; margin-top: 12px;
  font-size: .85rem; font-weight: 900; color: var(--sky);
}

/* ============================================================
   NARROW SCREENS

   The contents list stops being sticky and moves above the prose.
   A sticky box that eats a third of a phone screen is worse than
   no box at all.
============================================================ */
@media (max-width: 900px) {
  .b-layout { grid-template-columns: 1fr; gap: 26px; }
  .b-toc { position: static; max-height: none; }
  .b-toc-link { display: inline-block; margin-right: 14px; }
  .b-body { max-width: none; font-size: .98rem; }
}

@media (max-width: 560px) {
  .b-index-card { flex-direction: column; gap: 14px; padding: 20px; }
  .b-index-icon { font-size: 1.7rem; padding: 11px; }
  .b-note-inner { padding: 18px 20px; }
}