/* Shared layout for the Writing section. It inherits the site's existing tokens. */
.blog-nav { border-bottom: 1px solid var(--line); }
.blog-nav__inner { max-width: 1180px; margin: 0 auto; padding: 18px var(--px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.blog-nav__links { display: flex; align-items: center; gap: 22px; font: 500 12px var(--mono); color: var(--mut); }
.blog-nav__links a { color: var(--mut); }
.blog-nav__links a:hover { color: var(--ink); }
.blog-shell { max-width: 780px; margin: 0 auto; padding: clamp(64px, 10vw, 130px) var(--px); }
.blog-kicker, .blog-meta { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--mut); text-transform: uppercase; }
.blog-title { margin: 18px 0 24px; font: 400 clamp(42px, 7vw, 78px)/1.05 var(--serif); letter-spacing: -.02em; }
.blog-dek { max-width: 62ch; margin: 0; color: var(--mut); font: 400 clamp(18px, 2.4vw, 22px)/1.55 var(--sans); }
.blog-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.blog-content { margin-top: 42px; font: 400 17px/1.78 var(--sans); }
.blog-content p, .blog-content ul, .blog-content ol { margin: 0 0 24px; }
.quick-answer { margin: 0 0 42px; padding: 24px 26px; border: 1px solid var(--line); background: var(--bg2); font: 400 17px/1.7 var(--sans); }
.quick-answer strong { display: block; margin-bottom: 8px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.blog-content h2 { margin: 52px 0 18px; font: 400 clamp(28px, 4vw, 42px)/1.15 var(--serif); }
.blog-content h3 { margin: 32px 0 12px; font: 600 20px/1.25 var(--sans); }
.blog-content li { margin: 8px 0; }
.blog-content a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 4px; }
.blog-callout { margin: 42px 0; padding: 28px; background: var(--bg2); border-left: 3px solid var(--ink); font: 500 18px/1.55 var(--sans); }
.author-note { margin-top: 54px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--mut); font: 400 15px/1.65 var(--sans); }
.author-note strong { color: var(--ink); }
.author-note a { color: var(--ink); }
.faq { margin-top: 58px; padding-top: 4px; }
.faq details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; color: var(--ink); font: 500 18px/1.4 var(--sans); }
.faq details p { margin: 14px 28px 0 0; color: var(--mut); font: 400 16px/1.7 var(--sans); }
.case-study-header { margin-bottom: 44px; }
.case-study-image { width: 100%; max-height: 520px; object-fit: cover; display: block; margin: 0 0 48px; border: 1px solid var(--line); }
.case-study-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 42px 0; background: var(--line); border: 1px solid var(--line); }
.case-study-facts div { padding: 20px; background: var(--bg); }
.case-study-facts dt { color: var(--mut); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-study-facts dd { margin: 9px 0 0; font: 500 15px/1.45 var(--sans); }
.case-study-quote { margin: 44px 0; padding: 30px; background: var(--bg2); font: 400 24px/1.35 var(--serif); }
.case-study-quote cite { display: block; margin-top: 18px; color: var(--mut); font: 500 11px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.blog-cta { margin-top: 60px; padding: 38px; background: var(--band-bg); color: var(--band-ink); }
.blog-cta h2 { margin: 0 0 12px; font: 400 36px/1.12 var(--serif); }
.blog-cta p { color: var(--band-mut); margin: 0 0 24px; }
.blog-cta .btn-primary { background: var(--band-ink); color: var(--band-bg); border-color: var(--band-ink); }
.blog-footer { max-width: 1180px; margin: 0 auto; padding: 30px var(--px); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--mut); font: 400 12px var(--mono); }
.writing-intro { max-width: 780px; }
.writing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 52px; background: var(--line); border: 1px solid var(--line); }
.writing-card { display: block; min-height: 250px; padding: 28px; background: var(--bg); }
.writing-card:hover { background: var(--bg2); color: var(--ink); }
.writing-card__tag { color: var(--mut); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.writing-card h2 { margin: 42px 0 16px; font: 400 30px/1.12 var(--serif); }
.writing-card p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.55; }
@media (max-width: 620px) { .blog-nav__links { gap: 14px; } .blog-nav__links a:not(:last-child) { display: none; } .writing-grid { grid-template-columns: 1fr; } .blog-cta { padding: 28px; } .blog-footer { flex-direction: column; } .case-study-facts { grid-template-columns: 1fr; } }