/* Narrow reading column: the thank-you page (/playbook), articles, 404, privacy and terms. Tokens and fonts come from site.css. */
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .wrap { max-width: 760px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) main { padding-top: 64px; padding-bottom: 80px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) h2 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 12px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .terminal { margin: 40px 0; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .terminal .bar { padding: 10px 14px; font: 12px var(--mono); color: var(--muted); }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .terminal ol { margin: 0; padding: 20px 20px 20px 40px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .terminal li { margin-bottom: 12px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .terminal li:last-child { margin-bottom: 0; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) code { font: 13px var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) pre { font: 13px/1.5 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
                     padding: 12px 14px; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .watch { margin: 0 0 40px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .watch p { margin: 0 0 16px; }
/* The cover until a click, then the YouTube player in its place (video.js), same 16:9 box. */
.video { display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.video:hover { border-color: var(--accent); }
.video picture, .video img, .video iframe { display: block; width: 100%; height: 100%; border: 0; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .nudge { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 28px; }
:is(.page-playbook, [class^="page-article"], .page-404, .page-privacy, .page-terms) .nudge ul { margin: 0 0 20px; padding-left: 20px; }

/* Articles: the short answer first, a byline, a table that scrolls sideways on a phone. */
[class^="page-article"] .byline { font: 13px var(--mono); color: var(--muted); margin: 0 0 32px; }
.article .answer { border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 0 0 32px; }
.article .answer p { margin: 0; }
.article h2 { margin: 40px 0 12px; }
.article ul, .article ol { padding-left: 20px; }
.article li { margin-bottom: 6px; }
.article .table { overflow-x: auto; margin: 0 0 16px; }
.article table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
.article th, .article td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article th { background: var(--bg-2); font-weight: 600; }
.article + .nudge { margin-top: 48px; }
.posts { display: grid; gap: 16px; }

/* Legal pages: numbered sections, tables that scroll sideways on a phone. */
.legal-doc h2 { margin: 40px 0 12px; font-size: 20px; }
.legal-doc p, .legal-doc li { color: var(--muted); }
.legal-doc b, .legal-doc strong { color: var(--fg); font-weight: 600; }
.legal-doc ul { padding-left: 20px; }
.legal-doc .table { overflow-x: auto; margin: 0 0 16px; }
.legal-doc table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.legal-doc th, .legal-doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--muted); }
.legal-doc th { color: var(--fg); background: var(--bg-2); font-weight: 600; }
.legal-doc .updated { font: 12px var(--mono); color: var(--muted); }