/* Long-form articles (/guides/<slug> with kind="article"), 10/9: newspaper-style reading layout on paper, inside the dark
   site chrome. Loaded after guides-v2.css. Headlines Poppins, body Source Serif 4, data in IBM Plex Mono. */
.art{--ink-dim:#3A3F45;--ink-faint:#8A8F93;--paper:#F4F1EA;--paper-2:#EAE5DA;--ink:#16181B;--ink-2:#3A3F45;--ink-3:#6B7075;--rule:#D6CFC2;--accent:#0B6E4F;--bar:#1E2A36;
  background:var(--paper);color:var(--ink);padding:0 0 72px;margin:0;max-width:none}
.art a{color:inherit;text-decoration:underline;text-decoration-color:#9AA39A;text-underline-offset:3px;text-decoration-thickness:1px}
.art a:hover{text-decoration-color:var(--ink)}
.art-col{max-width:680px;margin:0 auto;padding:0 20px}
.art-wide{max-width:1000px;margin:0 auto;padding:0 20px}
.art-head{padding-top:120px;padding-bottom:28px}
.art-kick{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.art-kick a{text-decoration:none}
.art h1{font:600 clamp(34px,5vw,52px)/1.08 Poppins,sans-serif;letter-spacing:-.02em;margin:0;color:var(--ink);max-width:22ch}
.art h1 em{font-style:normal}
.art-dek{font:400 clamp(19px,2.2vw,22px)/1.45 "Source Serif 4",Georgia,serif;color:var(--ink-2);margin:18px 0 0;max-width:40em}
.art-by{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);font:400 14px/1.4 Poppins,sans-serif;color:var(--ink-3)}
.art-by b{font-weight:600;color:var(--ink)}.art-by .who{display:flex;align-items:center;gap:12px}
.art-by .av{display:flex!important;align-items:center;justify-content:center;padding:0!important;width:40px;height:40px;border-radius:50%;background:var(--bar);color:#F4F1EA;font:600 14px/1 Poppins,sans-serif;letter-spacing:.02em;flex:none}
.art-by .who span{display:block}
.share{display:flex;gap:14px;margin-left:auto}.share a,.share button{font:500 13px Poppins,sans-serif;color:var(--ink-2);text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer}
.share a:hover,.share button:hover{color:var(--ink)}
.art-lead{margin:8px auto 0;max-width:1000px;padding:0 20px}
.art-lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;border-radius:2px;background:var(--paper-2)}
.art figcaption,.cap{font:400 14px/1.5 Poppins,sans-serif;color:var(--ink-3);margin:10px 0 0}
.cap .credit,.art figcaption .credit{font-size:12px;color:#8A8F93;margin-left:6px;white-space:nowrap}
.brief{margin:36px 0 8px;padding:20px 0 6px;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.brief h2{font:600 13px/1 "IBM Plex Mono",monospace!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px!important;color:var(--ink)}
.brief p{font:400 18px/1.55 "Source Serif 4",Georgia,serif;margin:0 0 12px;color:var(--ink)}
.brief ul{margin:0 0 14px;padding-left:20px}.brief li{font:400 17px/1.5 "Source Serif 4",Georgia,serif;margin:6px 0;color:var(--ink-2)}
.art-body{font:400 20px/1.65 "Source Serif 4",Georgia,serif;color:var(--ink)}
.art-body p,.art-body li{font:inherit;color:inherit;margin:0 0 1.15em}
.art-body ol,.art-body ul{padding-left:1.3em;margin:0 0 1.2em}.art-body li{margin:0 0 .6em}
.art-body h2{font:600 26px/1.25 Poppins,sans-serif;letter-spacing:-.01em;margin:2.2em 0 .7em;color:var(--ink)}
.art-body h3{font:600 20px/1.3 Poppins,sans-serif;margin:1.6em 0 .5em}
.art-body strong,.art-body b{font-weight:600}
.art-body > p:first-of-type::first-letter{float:left;font:600 4.1em/.86 Poppins,sans-serif;margin:.06em .08em 0 0;color:var(--ink)}
.pull{margin:1.6em 0;padding:18px 0 18px 22px;border-left:4px solid var(--accent);font:500 italic 27px/1.35 "Source Serif 4",Georgia,serif;color:var(--ink)}
.pull cite{display:block;margin-top:10px;font:400 normal 14px Poppins,sans-serif;color:var(--ink-3)}
/* chart */
.chart{margin:2em 0;padding:22px 0 16px;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.chart .ch-t{font:600 20px/1.3 Poppins,sans-serif;margin:0;color:var(--ink)}
.chart .ch-s{font:400 15px/1.45 Poppins,sans-serif;color:var(--ink-3);margin:6px 0 18px}
.bars{list-style:none;padding:0!important;margin:0!important}
.bars li{display:grid;grid-template-columns:minmax(150px,38%) 1fr;gap:6px 16px;align-items:center;margin:0 0 14px!important;font:400 15px/1.3 Poppins,sans-serif!important}
.bars .lab b{font-weight:600}.bars .lab small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.bars .bar{position:relative;display:flex;align-items:center;gap:10px;height:26px}
.bars .bar i{display:block;height:100%;width:calc(var(--v) * 1%);min-width:4px;background:var(--bar);border-radius:1px}
.bars .bar em{font:500 15px "IBM Plex Mono",monospace;font-style:normal;color:var(--ink)}
.bars li.hi .bar i{background:var(--accent)}
.chart .ch-src{font:400 12px/1.5 Poppins,sans-serif;color:var(--ink-3);margin:6px 0 0}
/* table */
.art-body .tbl{margin:2em 0;border-top:3px solid var(--ink)}
.art-body .tbl h3{margin:14px 0 10px}
.art-body table{width:100%;border-collapse:collapse;font:400 16px/1.4 Poppins,sans-serif;background:none}
.art-body th{font:600 13px/1.3 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink);color:var(--ink)}
.art-body td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2);background:none}
.art-body td:first-child{color:#8B3A2E}.art-body td:last-child{color:var(--accent)}
/* demo pair */
.duo{margin:2em -20px}.duo .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duo img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:0 0;border-radius:2px;background:#0B0D10}
.duo figcaption{padding:0 20px}
/* the ask, at the end */
.ask{margin:3em 0 0;padding:28px;background:var(--bar);color:#F1F3F5;border-radius:4px}
.ask .k{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#7FD1A0;margin:0 0 12px}
.ask h2{font:600 26px/1.2 Poppins,sans-serif;margin:0 0 10px;color:#fff}
.ask p{font:400 17px/1.55 Poppins,sans-serif;color:#C9CED3;margin:0 0 16px}
.ask .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0}
.ask a{color:#F1F3F5}.ask .go{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#F1F3F5;color:#07090C;text-decoration:none;font:500 15px Poppins,sans-serif}
.ask .alt{font:400 15px Poppins,sans-serif;display:inline-flex;align-items:center;min-height:44px}
/* end matter */
.end-h{font:600 13px/1 "IBM Plex Mono",monospace!important;letter-spacing:.06em;text-transform:uppercase;margin:3em 0 14px!important;padding-top:16px;border-top:3px solid var(--ink);color:var(--ink)}
.art .faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.art .faq summary{font:500 18px/1.4 Poppins,sans-serif;color:var(--ink);cursor:pointer;list-style:none}
.art .faq summary::-webkit-details-marker{display:none}
.art .faq p{font:400 17px/1.6 "Source Serif 4",Georgia,serif;color:var(--ink-2);margin:10px 0 0}
.srcs{counter-reset:s;list-style:none;padding:0;margin:0}
.srcs li{counter-increment:s;position:relative;padding:0 0 10px 30px;font:400 14px/1.5 Poppins,sans-serif;color:var(--ink-2)}
.srcs li::before{content:counter(s);position:absolute;left:0;top:0;font:500 13px "IBM Plex Mono",monospace;color:var(--ink-3)}
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.more a{text-decoration:none;color:var(--ink)}
.more img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:2px;background:#000}
.more b{display:block;font:600 16px/1.35 Poppins,sans-serif;margin:10px 0 0}
.more a:hover b{text-decoration:underline;text-underline-offset:3px}
.art-meta{font:400 13px/1.5 Poppins,sans-serif;color:var(--ink-3);margin:2.4em 0 0}
@media (max-width:760px){
  .art-head{padding-top:92px;padding-bottom:22px}.art-body{font-size:18.5px}.art-body h2{font-size:23px}
  .share{margin-left:0;width:100%}.pull{font-size:23px}
  .bars li{grid-template-columns:1fr;gap:4px}.more{grid-template-columns:1fr}
  .duo .pair{grid-template-columns:1fr}.art-lead{padding:0}.art-lead figcaption{padding:0 20px}
  .ask{padding:22px;margin-left:-4px;margin-right:-4px}.ask h2{font-size:23px}
  .art-body td,.art-body th{padding-right:8px}.art-body table{font-size:15px}
}