/* Blog pages (/blog/ and /blog/<slug>/). Loaded after site.css. Generated pages come from build-blog.mjs. */

/* Chrome, as on the home page */
.ws-header nav { display: flex; align-items: center; gap: 1.75rem; }
.ws-header nav a { line-height: 1.4; }
.ws-header .ws-btn { min-height: 2.75rem; padding: 0.6rem 1.25rem; background: transparent; color: var(--ws-ink); }
.ws-header .ws-btn:hover { background: var(--ws-charcoal); color: var(--ws-paper); }
@media (max-width: 40rem) { .ws-header .ws-tel, .ws-header .b-nav-guides { display: none; } }
.h-footer { display: grid; gap: 1rem; }
.h-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.ws-fine a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ws-accent); }

.h-wrap { width: 100%; max-width: 82rem; margin: 0 auto; padding: 0 var(--ws-gutter); }
.h-section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.h-section--warm { background: var(--ws-surface); }
.h-split { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .h-split { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } }
.h-prose { color: var(--ws-muted); max-width: 36rem; margin: 0; }
.ws-t-hero br, .ws-t-title br { display: none; }
@media (min-width: 44rem) { .ws-t-hero br, .ws-t-title br { display: inline; } }

/* Intro */
.b-intro { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.b-intro .ws-t-hero { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.b-answer { margin: 0; font-size: 1.1875rem; line-height: 1.55; max-width: 38rem; }
.b-meta { margin: 1.5rem 0 0; }
.b-intro .ws-actions { margin-top: 2rem; }

.b-figure { margin: 0; }
.b-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 56rem) { .b-figure img { aspect-ratio: 21 / 9; } }
.b-figure figcaption { margin-top: 0.75rem; }

/* Article: contents on the left, text on the right */
.b-article { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem); }
.b-toc { display: none; }
@media (min-width: 56rem) {
  .b-toc { display: block; position: sticky; top: 2rem; }
  .b-toc ol { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--ws-line); }
  .b-toc li { border-bottom: 1px solid var(--ws-line); }
  .b-toc a { display: block; padding: 0.7rem 0; font-size: 0.9375rem; color: var(--ws-muted); text-decoration: none; }
  .b-toc a:hover { color: var(--ws-ink); }
}

.b-body { max-width: 42rem; }
.b-body > :first-child { margin-top: 0; }
.b-body h2 { font-family: var(--ws-display); font-weight: 300; font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15; margin: 3.5rem 0 1rem; scroll-margin-top: 2rem; }
.b-body h3 { font-family: var(--ws-display); font-weight: 400; font-size: 1.375rem; line-height: 1.25; margin: 2rem 0 0.5rem; }
.b-body p { margin: 0 0 1.1rem; }
.b-body a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ws-accent); }
.b-body a:hover { border-bottom-color: var(--ws-accent-ink); }
.b-body strong { font-weight: 500; }
.b-body ul, .b-body ol { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--ws-line); }
.b-body li { padding: 0.75rem 0 0.75rem 1.75rem; border-bottom: 1px solid var(--ws-line); position: relative; }
.b-body ul > li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 0.85rem; height: 1px; background: var(--ws-accent); }
.b-body ol { counter-reset: b-step; }
.b-body ol > li { counter-increment: b-step; }
.b-body ol > li::before { content: counter(b-step, decimal-leading-zero); position: absolute; left: 0; top: 0.95rem; font-size: 0.6875rem; letter-spacing: 0.15em; color: var(--ws-accent-ink); }
.b-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 1rem; }
.b-body th { text-align: left; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; color: var(--ws-muted); padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--ws-line); }
.b-body td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--ws-line); vertical-align: top; }
.b-body td:last-child { white-space: nowrap; }

/* The quiz prompt inside an article */
.b-cta { margin: 2.75rem 0; padding: 1.75rem 0; border-top: 1px solid var(--ws-accent); border-bottom: 1px solid var(--ws-line); }
.b-cta p { margin: 0.5rem 0 1.25rem; font-family: var(--ws-display); font-size: 1.5rem; line-height: 1.3; }

/* Sources */
.b-sources { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ws-line); font-size: 0.9375rem; color: var(--ws-muted); }
.b-sources h2 { font-family: var(--ws-body); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; margin: 0 0 1rem; color: var(--ws-muted); }
.b-sources ol { border-top: 0; }
.b-sources li { padding: 0.4rem 0 0.4rem 1.75rem; border-bottom: 0; }
.b-sources ol > li::before { top: 0.6rem; }

/* Rows: related posts and the index */
.h-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ws-line); }
.h-rows li { display: grid; gap: 0.35rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--ws-line); }
@media (min-width: 44rem) { .h-rows li { grid-template-columns: 1fr 1.4fr; } }
.h-rows h3 { margin: 0; font-family: var(--ws-display); font-weight: 300; font-size: 1.625rem; line-height: 1.2; }
.h-rows h3 a { text-decoration: none; }
.h-rows h3 a:hover { color: var(--ws-accent-ink); }
.h-rows p { margin: 0; color: var(--ws-muted); }
.h-rows .ws-caps { display: block; margin-top: 0.6rem; }

/* Playbook form */
.h-form .ws-field { margin-top: 1.5rem; }
.h-form .ws-input { font-size: 1.125rem; }
.h-done[hidden], .h-form[hidden] { display: none; }
.b-body .ws-btn { color: var(--ws-paper); border: 1px solid var(--ws-charcoal); }
.b-body .ws-btn:hover { color: var(--ws-charcoal); }