/* articles */
/* Self-contained breadcrumb. Deliberately not inherited from the chrome: the
   hub has no crumb of its own, so there was nothing to inherit. Same visual
   language as _dev/breadcrumbs.py, on a dark band. */
.artband .bcr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
 margin:0 0 14px;padding:0;list-style:none;font-family:'IBM Plex Mono',ui-monospace,monospace;
 font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.artband .bcr li{display:flex;align-items:center;gap:8px}
.artband .bcr a{color:#EFF5F2;opacity:.66;text-decoration:none;padding:5px 0;min-height:26px;
 display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.artband .bcr a:hover{opacity:1;border-bottom-color:currentColor}
.artband .bcr .sep{opacity:.36;color:#EFF5F2}
.artband .bcr [aria-current]{opacity:.95;font-weight:600;color:#F6C560}
@media (pointer:coarse){.artband .bcr a{min-height:32px}}
.art{padding:0 0 10px}
.artband{background:linear-gradient(135deg,#141712,#1E241C 52%,#2C6350);color:#EFF5F2;
 padding:30px 0 34px}
.artband .in{max-width:1180px;margin:0 auto;padding:0 26px;display:grid;
 grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:32px;align-items:center}
.artband .kick{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.4px;
 letter-spacing:.13em;text-transform:uppercase;color:#F6C560;margin:0 0 11px}
.artband h1{font-family:Fraunces,Georgia,serif;font-size:clamp(26px,3.5vw,40px);
 line-height:1.07;font-weight:600;letter-spacing:-.022em;color:#fff;margin:0 0 13px;max-width:19ch}
.artband h1 em{font-style:normal;color:#F6C560}
.artband .dek{font-size:15.2px;line-height:1.72;color:rgba(255,255,255,.86);margin:0;max-width:56ch}
.artmeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;
 font-family:'IBM Plex Mono',monospace;font-size:10.4px;letter-spacing:.06em;
 text-transform:uppercase;color:rgba(255,255,255,.62)}
.artfig{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18);border-radius:16px;
 padding:20px 22px}
.artfig b{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(30px,4vw,44px);
 line-height:1;color:#F6C560}
.artfig span{display:block;font-size:12.4px;line-height:1.55;color:rgba(255,255,255,.72);
 margin-top:9px}
.artwrap{max-width:1180px;margin:0 auto;padding:30px 26px 10px;display:grid;
 grid-template-columns:210px minmax(0,1fr);gap:38px;align-items:start}
.artnav{position:sticky;top:18px}
.artnav b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.4px;
 letter-spacing:.12em;text-transform:uppercase;color:#8A8477;margin-bottom:10px}
.artnav a{display:block;font-size:12.8px;line-height:1.45;color:#5D574C;text-decoration:none;
 padding:7px 0 7px 11px;border-left:2px solid #E4DCC8}
.artnav a:hover{color:#2C6350}
.artnav a.on{color:#17271F;font-weight:600;border-left-color:#2C6350}
/* Grid children default to min-width:auto, so a wide child - here a table with
   nowrap figure cells - pushes the whole track past the viewport. Measured at
   390px: the .artwrap grid was 394px inside a 338px column. Both children need
   min-width:0 before max-width means anything. */
.artnav,.artbody{min-width:0}
.artbody{max-width:70ch}
.artbody h2{font-family:Fraunces,Georgia,serif;font-size:clamp(20px,2.3vw,26px);font-weight:600;
 letter-spacing:-.018em;margin:32px 0 12px;scroll-margin-top:22px}
.artbody h2:first-child{margin-top:0}
.artbody p{font-size:15.6px;line-height:1.78;color:#2A2620;margin:0 0 16px}
.artbody p b{font-weight:600}
.artbody ul{margin:0 0 16px;padding-left:20px}
.artbody li{font-size:15.2px;line-height:1.72;color:#2A2620;margin-bottom:8px}
.artbody sup a{color:#2C6350;font-weight:600;text-decoration:none;font-size:11px}
.pull{border-left:3px solid #F6C560;padding:4px 0 4px 18px;margin:22px 0}
.pull b{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(24px,3vw,34px);
 line-height:1;color:#2C6350}
.pull span{display:block;font-size:13px;line-height:1.6;color:#5D574C;margin-top:8px;max-width:44ch}
.quote{background:#FFFDF6;border:1px solid #E4DCC8;border-left:3px solid #2C6350;
 border-radius:0 12px 12px 0;padding:16px 18px;margin:22px 0}
.quote p{font-size:14.4px;line-height:1.7;margin:0;color:#2A2620}
.quote cite{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
 font-size:10.6px;letter-spacing:.06em;text-transform:uppercase;color:#8A8477;margin-top:9px}
/* A data table that will not fit a phone should scroll, not overflow. This is
   the same .tw wrapper the tax page uses, and nowrap-audit deliberately skips
   anything inside a real horizontal scroll container - a wide table behind a
   scroll bar is a design decision, an overflowing one is a bug. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0;max-width:100%}
.tw .tbl{margin:0;min-width:420px}
.tbl{width:100%;border-collapse:collapse;margin:20px 0;background:#FFFDF6;
 border:1px solid #E4DCC8;border-radius:12px;overflow:hidden;font-size:14.2px}
.tbl th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:9.8px;letter-spacing:.1em;
 text-transform:uppercase;color:#8A8477;padding:10px 13px;border-bottom:1px solid #E4DCC8}
.tbl td{padding:10px 13px;border-bottom:1px solid #E4DCC8;line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n{font-family:Fraunces,Georgia,serif;font-size:16px;color:#2C6350;white-space:nowrap}
.arttool{background:linear-gradient(135deg,#1E4436,#2C6350);color:#EFF5F2;border-radius:16px;
 padding:24px 26px;margin:30px 0 8px}
.arttool b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;color:#fff;
 margin-bottom:8px}
.arttool p{font-size:13.8px;line-height:1.68;color:rgba(255,255,255,.85);margin:0 0 15px;
 max-width:58ch}
.arttool a{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;
 border-radius:11px;background:#F6C560;color:#2A2010;font-weight:800;font-size:14px;
 text-decoration:none}
.artsrc{margin:34px 0 0;padding-top:20px;border-top:1px solid #E4DCC8}
.artsrc h2{font-family:Fraunces,Georgia,serif;font-size:19px;margin:0 0 12px}
.artsrc ol{margin:0;padding-left:22px}
.artsrc li{font-size:13px;line-height:1.66;color:#5D574C;margin-bottom:10px}
.artsrc li a{color:#2C6350;font-weight:600}
.artsrc .disc{font-size:12.4px;line-height:1.65;color:#8A8477;margin:16px 0 0;max-width:66ch}
.artnext{border-top:1px solid #E4DCC8;margin-top:30px;padding-top:22px}
.artnext b{font-family:'IBM Plex Mono',monospace;font-size:9.8px;letter-spacing:.12em;
 text-transform:uppercase;color:#8A8477;display:block;margin-bottom:12px}
.artnext .g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.artnext a{background:#FFFDF6;border:1px solid #E4DCC8;border-radius:12px;padding:15px 16px;
 text-decoration:none;display:block}
.artnext a:hover{border-color:#2C6350}
.artnext a i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9.6px;
 letter-spacing:.09em;text-transform:uppercase;color:#2C6350;font-weight:600}
.artnext a strong{display:block;font-family:Fraunces,Georgia,serif;font-size:15.5px;
 font-weight:600;line-height:1.28;margin-top:5px;color:#17271F}
@media (max-width:900px){
  .artband .in{grid-template-columns:1fr}
  .artwrap{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .artnav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
  .artnav b{display:none}
  .artnav a{border-left:0;border-bottom:2px solid #E4DCC8;white-space:nowrap;padding:7px 2px}
  .artnav a.on{border-bottom-color:#2C6350}
  .artnext .g{grid-template-columns:1fr}
}