/* Blog (/blog/ + posts). Reuses .doc/.prose from site.css; only adds byline, data tables, side list and index cards. */
.blog .by{font:500 12px var(--m);color:var(--mut);margin:0 0 24px;letter-spacing:.02em}
.blog .doc-main h1{max-width:20ch;font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.03em}
.blog .dek{margin-bottom:8px}
.prose .body .note{border-left:4px solid var(--spot);padding:2px 0 2px 14px;font-size:.92em}
.bt{margin:4px 0 1.4em;padding:0}
.bt-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em}
.prose .body .bt-x table{margin:0;min-width:520px}
.prose .body .bt table{font-size:15px}
.prose .body .bt th[scope=row] a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;white-space:nowrap}
.prose .body .bt td{font-feature-settings:"tnum" 1;white-space:nowrap}
.prose .body .bt th small{font:500 10px var(--m);color:var(--mut)}
.bt .bt-sc{font-weight:900}
.bt figcaption{font-size:12.5px;line-height:1.45;color:var(--mut);margin-top:-8px}
.bt figcaption a{color:var(--ink)}
.bt .bt-cmp{font-weight:700;white-space:nowrap}
.btl.xs{width:11px;height:30px;stroke-width:3;flex:none;margin:0}
.bw{margin-top:26px}
.bw h4{margin:0;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding-bottom:8px;border-bottom:3px solid var(--ink)}
.bw ul{list-style:none;margin:0;padding:0}
.bw a{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--ink);text-decoration:none;font-size:14px}
.bw a span{font:500 12px var(--m)}.bw a:hover b{color:var(--spot)}
.fn-note{font-size:12.5px;color:var(--mut);margin:10px 0 0}
.fnotes li>span{min-width:0;overflow-wrap:anywhere}
/* index */
.blogx .crumb{margin:0 0 14px}
.pc{list-style:none;margin:clamp(22px,2.6vw,36px) 0 0;padding:0;border-top:6px solid var(--ink)}
.pc a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--ink);text-decoration:none}
.pc-k{grid-column:1;font:500 12px var(--m);color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.pc b{grid-column:1;font-weight:900;font-size:clamp(22px,2.3vw,32px);line-height:1.08;letter-spacing:-.02em}
.pc-d{grid-column:1;font-size:16px;color:var(--mut);max-width:46em}
.pc-b{grid-column:2;grid-row:1/4;display:flex;gap:6px;align-items:center;color:var(--ink)}
.pc-b .btl.xs{width:14px;height:38px;stroke-width:2.6}
.pc a:hover b{color:var(--spot)}.pc a:hover .pc-b{color:var(--spot)}
@media(max-width:980px){.blog .bw{display:none}}
@media(max-width:640px){.pc a{grid-template-columns:1fr}.pc-b{grid-column:1;grid-row:auto;margin-top:6px}}
/* data tables: fit the 36em column */
.prose .body .bt-x table{min-width:0;font-size:14.5px}
.prose .body .bt-x th,.prose .body .bt-x td{padding:7px 9px}
.prose .body .bt tbody th{border-bottom:1px solid #d7d5cf;font-weight:700;white-space:normal}
.prose .body .bt th[scope=row] a{white-space:normal;line-height:1.2;min-width:120px}
.prose .body .bt thead th{font-size:13px;line-height:1.15;vertical-align:bottom}
.prose .body .bt th small{display:block;font-size:9.5px}
@media(max-width:640px){.prose .body .bt-x table{min-width:560px;font-size:13.5px}.prose .body .bt th[scope=row] a{min-width:104px}}
.blog .doc-g>*,.blog .body{min-width:0}
.blog .prose .body{max-width:38em}
.prose .body .bt-x{max-width:100%}
/* index: design A (magazine) */
.bla{margin-top:clamp(22px,3vw,40px)}
.bla a{text-decoration:none;color:var(--ink)}
.bl-m{display:block;font:500 11.5px var(--m);color:var(--mut);letter-spacing:.04em;text-transform:uppercase}.bl-m b{color:var(--spot);font-weight:600}
.bl-d{display:block;color:var(--mut);font-size:15.5px;line-height:1.45}
.bl-img{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#e8eefc}
.bl-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a:hover .bl-img img{transform:scale(1.03)}
.bl-art{display:flex;justify-content:center;align-items:center;gap:16px;background:#e8eefc;border-radius:18px;padding:26px 16px 22px;aspect-ratio:4/3}
.bl-art .btl{width:26px;height:70px;stroke:var(--spot);stroke-width:1.5;margin:0}
.bla-f{display:grid;gap:18px}
.bla-t{display:grid;gap:8px}.bla-t>b{font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-.025em}
.bl-go{font-weight:700;color:var(--spot);font-size:15px;margin-top:4px}
.bla-g{display:grid;gap:30px;margin-top:38px;padding-top:30px;border-top:1px solid #d7d5cf}
.bla-c{display:grid;gap:8px;align-content:start}.bla-c .bl-img{margin-bottom:6px}.bla-c>b{font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.015em}
.bla-f:hover .bla-t>b,.bla-c:hover>b{color:var(--spot)}
.bx-med a{color:inherit}
@media(min-width:900px){.bla-f{grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}.bla-g{grid-template-columns:repeat(2,1fr);gap:36px}}
/* post hero photo */
.bl-hero{margin:18px 0 20px}
.bl-hero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#e8eefc}
.bl-hero figcaption{font:500 11.5px var(--m);color:var(--mut);margin-top:8px}.bl-hero figcaption a{color:inherit}
.bl-hero .bl-art{padding:44px 16px 36px;aspect-ratio:auto}.bl-hero .bl-art .btl{width:38px;height:102px}
.bla-f .bl-art .btl{width:38px;height:102px}