/* pieces.css -- shared styling for the published pieces, the calls page and the scorecard.
   Same tokens as the rest of the site. */
:root{color-scheme:dark;
  --serif:"Space Grotesk","Inter",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--paper-text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
/* the board and the data page: three ladders a row on a desktop */
body.wide .wrap{max-width:1180px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.top{position:relative;color:var(--ink-text);overflow:hidden;background:radial-gradient(130% 120% at 20% -20%,rgb(var(--em-rgb) / .14) 0%,var(--ink) 55%) var(--ink);border-bottom:1px solid var(--line-ink)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.nav .home{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--ink-text);padding:8px 16px 8px 11px;border-radius:999px;border:1px solid var(--line-ink);background:rgba(255,255,255,.03)}
.nav .home svg{width:22px;height:22px}
.nav .links{display:flex;gap:6px;flex-wrap:wrap}
.nav .links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--ink-muted);padding:8px 12px;border-radius:999px;border:1px solid transparent}
.nav .links a:hover,.nav .links a.on{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .35)}
.head{padding:36px 0 40px}
.head h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.06;margin:14px 0 14px;max-width:820px}
.head h1 em{font-style:normal;color:var(--brass-soft)}
.head .sub{max-width:680px;color:var(--ink-muted);font-size:17px}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-muted);margin-top:18px}
/* Six stats in one row left about 100px of usable width per tile, which is
   narrower than the numbers that go in them -- 1,331,776 came out as
   '1,331,' over '776'. Two rows of three on anything desktop-shaped, two
   per row on a phone, and the values no longer break mid-number. */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
@media (min-width:620px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{position:relative;background:var(--ink-2);border:1px solid var(--line-ink);border-radius:12px;padding:16px 18px 14px;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--brass);opacity:.6}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.stat .v{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.1vw,25px);letter-spacing:-.01em;margin-top:4px;color:var(--ink-text);overflow-wrap:normal;word-break:normal;hyphens:none}
.stat .n{font-size:12px;color:var(--ink-muted);margin-top:2px}
a.stat{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.stat:hover{border-color:rgb(var(--em-rgb) / .45)}
article{padding:44px 0 20px}
article h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,30px);margin:38px 0 12px;line-height:1.15}
article h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:26px 0 8px}
article p{margin:0 0 16px;max-width:720px;font-size:16.5px}
article p.lead{font-size:18px;color:var(--paper-text)}
article ul{margin:0 0 16px 22px;max-width:700px}
article li{margin-bottom:8px}
article strong{color:var(--ink-text)}
.pull{border-left:3px solid var(--brass);padding:6px 0 6px 18px;margin:22px 0;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink-text);max-width:680px}
.figure{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:18px 18px 12px;margin:24px 0}
.figure h4{font-family:var(--serif);font-weight:600;font-size:16px;margin:0 0 2px}
.figure .sub2{font-size:12.5px;color:var(--paper-muted);margin-bottom:10px;font-family:var(--mono)}
.figure .chart{width:100%;min-height:120px}
.figure .src{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin-top:8px;letter-spacing:.02em}
.vaxis{font-family:var(--mono);font-size:10.5px;fill:var(--paper-muted)}
.vdot{transition:stroke .12s ease}.vdot.on{stroke:var(--text)}
.vlabel{font-family:var(--mono);font-size:11px;fill:var(--ink-text)}
.vbar{transition:opacity .15s}.vbar.on{opacity:.75}
.vlegend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin:0 0 8px}
.vlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.viztip{position:absolute;z-index:50;background:var(--surface-2);border:1px solid var(--line-ink);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--ink-text);pointer-events:none;box-shadow:0 12px 30px -14px rgba(0,0,0,.9);max-width:280px}
.viztip b{display:block;margin-bottom:4px;color:var(--brass-soft)}
.viztip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.viztip .vnote{color:var(--paper-muted)}
details.tview{margin-top:8px}
details.tview summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--paper-muted);text-transform:uppercase}
.vtable,.dt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:8px}
.vtable th,.vtable td,.dt th,.dt td{padding:7px 8px;border-bottom:1px solid var(--line-paper);text-align:right;white-space:nowrap}
.vtable th:first-child,.vtable td:first-child,.dt th:first-child,.dt td:first-child{text-align:left}
.vtable th,.dt th{color:var(--paper-muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.dtwrap{overflow-x:auto;margin:18px 0}
/* the source line under a bare table, same voice as .figure .src */
.dtnote{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin:-8px 0 18px;letter-spacing:.02em}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:99px;border:1px solid var(--line-ink);color:var(--ink-muted);text-transform:uppercase}
.tag.hit{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .45)}
.tag.miss{color:var(--bad);border-color:rgb(var(--bad-rgb) / .45)}
.tag.open{color:var(--market);border-color:rgb(var(--gold-rgb) / .4)}
.method{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:20px 22px;margin:34px 0}
.method h3{margin-top:0}
.method p,.method li{font-size:14.5px;color:var(--paper-muted)}
.method code{font-family:var(--mono);font-size:12.5px;color:var(--ink-text);background:rgba(255,255,255,.05);padding:1px 6px;border-radius:5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:22px 0}
.card{display:block;text-decoration:none;background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:20px 22px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:rgb(var(--em-rgb) / .4)}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.card h3{font-family:var(--serif);font-size:19px;margin:8px 0 8px;line-height:1.2}
.card p{font-size:14px;color:var(--paper-muted);margin:0}
footer{border-top:1px solid var(--line-paper);padding:30px 0 40px;margin-top:40px}
.pillnav{display:flex;flex-wrap:wrap;gap:8px}
.pillnav a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-decoration:none;color:var(--paper-muted);padding:7px 12px;border-radius:999px;border:1px solid var(--line-paper)}
.pillnav a:hover{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .4)}
.disc{font-size:12.5px;color:var(--paper-muted);margin-top:16px;max-width:760px}
/* the hypothetical-results statement (the wording CFTC Rule 4.41(b) prescribes), set right under every
   simulated return: full size and never folded, so it is read with the figure it qualifies */
.hypo{max-width:720px;margin:14px 0 22px;padding:11px 15px 12px 14px;border:1px solid rgb(var(--warn-rgb) / .26);border-left:3px solid var(--warn);border-radius:0 10px 10px 0;background:rgb(var(--warn-rgb) / .045);font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--paper-text)}
.hypo b{display:block;margin:0 0 4px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.head .hypo{margin:14px 0 0}
/* the mark on a call whose claim is a simulated result; it points at the statement */
.hypo-tag{display:inline-block;margin:0 0 0 6px;padding:1px 7px;border:1px solid rgb(var(--warn-rgb) / .45);border-radius:99px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);text-decoration:none;vertical-align:1px;white-space:nowrap}
a.hypo-tag:hover{border-color:var(--warn)}
.hypo.in-row{margin:10px 0 2px}
@media (max-width:640px){.head{padding:26px 0 30px}.stat .v{font-size:22px}article p{font-size:16px}.pull{font-size:18px}.nav .links a{padding:7px 9px}
  /* on a phone the links take their own full-width rows under the home pill instead of a narrow column beside it */
  .nav{flex-wrap:wrap;gap:10px}.nav .links{width:100%;gap:4px}.nav .links a{border-color:rgba(255,255,255,.10)}}

/* hero art: an image with an optional silent loop over it; the figure stays hidden until the poster loads */
.art{margin:0;padding:22px 0 0}
.art .frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-ink);background:var(--ink-2);aspect-ratio:16/9}
.art img,.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art video{opacity:0;transition:opacity .8s ease}.art video.on{opacity:1}
.art .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(var(--bg-rgb) / 0) 55%,rgb(var(--bg-rgb) / .55) 100%)}
.art figcaption{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin-top:8px;letter-spacing:.02em}

/* the live board: each ladder is a card, each bracket a rung */
.ladders{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:14px;margin:22px 0}
.ladder{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:16px 16px 10px;position:relative;overflow:hidden}
.ladder::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brass),transparent 70%);opacity:.7}
.ladder h3{font-family:var(--serif);font-size:16px;margin:0 0 2px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ladder h3 small{font-family:var(--mono);font-size:10.5px;color:var(--paper-muted);font-weight:400;letter-spacing:.06em;white-space:nowrap}
.ladder .obs{font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin-bottom:8px;min-height:16px}
.ladder .obs b{color:var(--brass-soft);font-weight:500}
.rung{display:grid;grid-template-columns:64px minmax(40px,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line-paper);font-family:var(--mono);font-size:12px}
.rung .strike{color:var(--ink-text);white-space:nowrap}
.rung .bar{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.05);overflow:hidden}
.rung .bar i{position:absolute;top:0;bottom:0;left:0;border-radius:5px;background:linear-gradient(90deg,var(--gold-800),var(--market))}
.rung .q{text-align:right;color:var(--paper-muted)}
.rung .q b{color:var(--ink-text);font-weight:500}
.rung .q span{white-space:nowrap}
.rung.dead{opacity:.62}
.rung.dead .strike{text-decoration:line-through;text-decoration-color:rgb(var(--bad-rgb) / .7)}
.rung.dead .bar i{background:linear-gradient(90deg,var(--bad-deep),var(--bad))}
.rung.dead .q{color:var(--bad)}
.rung.settled .strike{color:var(--brass-soft)}
/* the board's rows view: one line per ladder, its brackets as small midpoint bars in strike order
   (ruled out in red), each line opening to the full card; the board's only, like every .lad- rule */
.lad-rows{margin:12px 0 22px}
.lad-head,.lad-row>summary{display:grid;grid-template-columns:minmax(0,1fr) 48px 54px 40px 42px 10px;gap:7px;align-items:center;padding:0 6px}
.lad-head{font-family:var(--mono);font-size:9.5px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted);align-items:end;padding-bottom:7px;border-bottom:1px solid var(--line-paper)}
.lad-head span:nth-child(n+3){text-align:right}
.lad-row{border-bottom:1px solid var(--line-paper)}
.lad-head.two{display:none}
.lad-row>summary{list-style:none;cursor:pointer;min-height:40px;padding-top:5px;padding-bottom:5px;font-family:var(--mono);font-size:11px;color:var(--paper-muted);transition:background .15s}
.lad-row>summary::-webkit-details-marker{display:none}
.lad-row>summary::after{content:"";justify-self:end;width:6px;height:6px;margin:0 2px 3px 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.lad-row[open]>summary::after{margin:3px 2px 0 0;transform:rotate(-135deg)}
.lad-row>summary:hover{background:rgba(255,255,255,.03)}
.lad-row[open]>summary{background:rgba(255,255,255,.025)}
.lad-row.is-target>summary{box-shadow:inset 3px 0 0 var(--brass-soft)}
.lad-row .lc{display:flex;align-items:center;gap:7px;min-width:0}
.lad-row .lc>span:last-child{min-width:0}
.lad-row .lc b{font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.25;color:var(--ink-text);overflow-wrap:anywhere}
.lad-row .lc small{display:block;font-size:10px;line-height:1.3;letter-spacing:.03em;color:var(--paper-muted)}
.lad-row.closed .lc small{color:var(--warn)}
.lad-row .ll,.lad-row .lo,.lad-row .ls{text-align:right;white-space:nowrap}
.lad-row .ll b,.lad-row .ls b{font-weight:500;color:var(--ink-text)}
.lad-row .ll small{display:none}
.lad-row .lo.x{color:var(--bad)}
.lad-row .ll.y b{color:var(--brass-soft)}
.lad-row .ladder{margin:0 0 12px}
.lad-hl{flex:none;display:inline-block;min-width:17px;height:17px;line-height:15px;text-align:center;border-radius:5px;border:1px solid;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0}
.lad-hl.hi{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .4);background:rgb(var(--em-rgb) / .07)}
.lad-hl.lw{color:var(--market);border-color:rgb(var(--gold-rgb) / .4);background:rgb(var(--gold-rgb) / .07)}
.lad-mini{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:22px}
.lad-mini i{border-radius:2px;background:linear-gradient(0deg,var(--gold-800),var(--market)) bottom/100% var(--m,0%) no-repeat,rgba(255,255,255,.08)}
.lad-mini i.x{background:linear-gradient(0deg,var(--bad-deep),var(--bad)) bottom/100% var(--m,0%) no-repeat,rgb(var(--bad-rgb) / .32)}
.lad-mini i.y{background:var(--brass-soft)}
.lad-mini i.s{background:rgba(255,255,255,.04)}
.lad-rows .vh,.ruled-t .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* a small phone: narrower bars and figures, so the longest city name keeps its line; no chevron under 340 px */
@media (max-width:389px){
  .lad-head,.lad-row>summary{grid-template-columns:minmax(0,1fr) 30px 48px 36px 38px 8px;gap:4px;padding:0 4px}
  .lad-head{font-size:8.5px;letter-spacing:.02em}
  .lad-head span:nth-child(2){justify-self:end;white-space:nowrap}
  .lad-row>summary{font-size:10px}
  .lad-row .lc{gap:5px}
  .lad-row .lc b{font-size:12.5px}
  .lad-mini{gap:1px}
}
@media (max-width:339px){
  .lad-head,.lad-row>summary{grid-template-columns:minmax(0,1fr) 30px 48px 36px 38px}
  .lad-head span:last-child,.lad-row>summary::after{display:none}
}
@media (min-width:760px){
  .lad-rows{max-width:940px}
  .lad-head,.lad-row>summary{grid-template-columns:minmax(0,1fr) 96px 128px 92px 116px 14px;gap:16px;padding:0 12px}
  .lad-head{font-size:10px}
  .lad-row>summary{font-size:12px}
  .lad-row .ll small{display:inline;color:var(--paper-muted)}
  .lad-mini{gap:3px;height:24px}
}
/* a desktop: two columns of lines, filled row by row like the cards (a city's high, then its low) */
@media (min-width:1180px){
  .lad-rows{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
  .lad-head.two{display:grid}
  .lad-head,.lad-row>summary{grid-template-columns:minmax(0,1fr) 72px 100px 58px 66px 12px;gap:10px;padding:0 8px}
}
/* the board's ruled-out brackets, with "ruled out only": one row per bracket */
.ruled-wrap{overflow-x:auto;max-width:760px;margin:12px 0 4px;border:1px solid var(--line-ink);border-radius:12px;background:var(--surface)}
.ruled-t{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.ruled-t caption{caption-side:top;text-align:left;font-size:11px;line-height:1.45;letter-spacing:.02em;color:var(--paper-muted);padding:9px 10px 7px}
.ruled-t th,.ruled-t td{padding:7px 9px;border-top:1px solid var(--line-paper);text-align:right;white-space:nowrap;vertical-align:middle}
.ruled-t thead th{font-size:10px;font-weight:500;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted);vertical-align:bottom}
.ruled-t th:first-child{text-align:left}
.ruled-t td:nth-child(2){text-align:center}
.ruled-t tbody th{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--ink-text)}
.ruled-t tbody th a{color:inherit;text-decoration:none}
.ruled-t tbody th a:hover{color:var(--brass-soft);text-decoration:underline}
.ruled-t small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--paper-muted)}
@media (max-width:760px){.ruled-t th,.ruled-t td{padding:7px 5px}.ruled-t thead th,.ruled-t tbody th{white-space:normal}}
@media (max-width:389px){.ruled-t{font-size:11px}.ruled-t th,.ruled-t td{padding:6px 3px}.ruled-t thead th{font-size:8.5px;letter-spacing:.02em}.ruled-t tbody th{font-size:11.5px}}
.tag.dead{color:var(--bad);border-color:rgb(var(--bad-rgb) / .45)}
.tag.live{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .45)}
.tag.settled{color:var(--paper-muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--paper-muted);margin:14px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted);background:transparent;border:1px solid var(--line-paper);border-radius:999px;padding:7px 12px;cursor:pointer}
.filters button.on,.filters button:hover{color:var(--brass-soft);border-color:rgb(var(--em-rgb) / .45)}
.empty{font-family:var(--mono);font-size:12.5px;color:var(--paper-muted);background:var(--ink-2);border:1px dashed var(--line-ink);border-radius:14px;padding:26px;text-align:center;margin:22px 0}
/* static tables (the retired desk's record) wrap their first column */
.static .dt td:first-child,.static .dt th:first-child{white-space:normal}
/* the owner's desk */
.gate{background:var(--ink-2);border:1px solid var(--line-ink);border-radius:14px;padding:22px 24px;margin:22px 0;max-width:560px}
.gate h3{font-family:var(--serif);font-size:18px;margin:0 0 8px}
.gate p{font-size:14.5px;color:var(--paper-muted);margin:0 0 14px}
.btn{font-family:var(--sans);font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .18s ease,box-shadow .18s ease}
.btn-primary{background:linear-gradient(180deg,var(--gold-400),var(--gold-500));color:var(--on-accent);box-shadow:0 10px 30px -10px rgb(var(--em-rgb) / .55)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-quiet{background:transparent;color:var(--paper-text);border:1px solid var(--line-paper)}
.btn-quiet:hover{border-color:var(--brass);color:var(--brass-soft)}
.ok-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass-soft);box-shadow:0 0 0 4px rgb(var(--em-rgb) / .18);margin-right:8px;vertical-align:1px}
.ok-dot.bad{background:var(--bad);box-shadow:0 0 0 4px rgb(var(--bad-rgb) / .18)}
@media (max-width:480px){.rung{grid-template-columns:56px minmax(36px,1fr) auto;gap:8px;font-size:11px}}

/* the signature: a gold ladder before each section head === */
main h2:not(.vh):not(.no-rung)::before{
  content:"";display:inline-block;width:13px;height:12px;margin:0 10px 0 0;vertical-align:.02em;opacity:.9;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/1px 100% no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 4px/62% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 8px/84% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 11px/48% 1px no-repeat}
main h2:not(.vh):not(.no-rung){padding-left:23px;text-indent:-23px}   /* 23px = the mark's 13px + its 10px gap */
main h2:not(.vh):not(.no-rung)>*{text-indent:0}
/* card titles and the day navigator's date are labels, not section heads */
main .pc h2:not(.vh):not(.no-rung)::before,main .daynav h2:not(.vh):not(.no-rung)::before{content:none}
main .pc h2:not(.vh):not(.no-rung),main .daynav h2:not(.vh):not(.no-rung){padding-left:0;text-indent:0}

/* tiles ================================================== */
.stat{background:linear-gradient(180deg,rgb(var(--em-rgb) / .07),rgb(var(--em-rgb) / 0) 62%),var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.stat::after{width:2px;background:linear-gradient(180deg,var(--gold),rgb(var(--gold-rgb) / .12));opacity:1}
/* a gold corner tick, top right (the home panel's brackets, made quiet) */
.stat::before{content:"";position:absolute;right:8px;top:8px;width:8px;height:8px;
  border-top:1px solid rgb(var(--gold-rgb) / .55);border-right:1px solid rgb(var(--gold-rgb) / .55)}
.stat .k{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--muted)}
@media (max-width:640px){.stat .k{letter-spacing:.1em}}
/* compact tiles: an empty float keeps the key's first line out of the tick's corner */
.dstats .stat .k::before{content:"";float:right;width:10px;height:8px}
.stat .v{color:var(--text);font-variant-numeric:tabular-nums}
a.stat:hover{border-color:rgb(var(--gold-rgb) / .45);box-shadow:var(--sh-1),var(--glow-gold)}

/* buttons, chips, links =================================== */
.btn{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);min-height:44px;padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn-primary{background:linear-gradient(180deg,var(--gold-400),var(--gold-500));color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 10px 28px -12px rgb(var(--gold-rgb) / .6)}
.btn-primary:hover{background:linear-gradient(180deg,var(--gold-300),var(--gold-400));transform:translateY(-1px)}
.btn-secondary{background:var(--em-900);color:var(--on-emerald);border-color:rgb(var(--gold-rgb) / .55)}
.btn-secondary:hover{background:var(--em-800);border-color:var(--gold)}
.btn-quiet{background:transparent;color:var(--text-2);border-color:var(--line-2)}
.btn-quiet:hover{border-color:rgb(var(--em-rgb) / .55);color:var(--em-300)}
.chip{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;min-height:32px;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer}
.chip:hover{color:var(--em-300);border-color:rgb(var(--em-rgb) / .45)}
.chip[aria-pressed="true"]{color:var(--on-accent);background:var(--em-300);border-color:var(--em-300);font-weight:600}
.prose a,article p a,.fold-body a,.sub a,.note a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgb(var(--em-rgb) / .5);text-underline-offset:3px}
.prose a:hover,article p a:hover,.fold-body a:hover,.sub a:hover,.note a:hover{color:var(--link-hover);text-decoration-color:currentColor}

/* tables ================================================== */
.vtable,.dt{font-variant-numeric:tabular-nums}
.vtable th,.dt th{color:var(--muted)}
.vtable thead th,.dt thead th{border-bottom:1px solid rgb(var(--gold-rgb) / .45)}
.vtable tbody tr:hover td,.dt tbody tr:hover td,.dt tbody tr:hover th{background:rgb(var(--em-rgb) / .06)}
.dtwrap,details.tview>div{overflow-x:auto}          /* also fixes the phone overflow in pieces' "the numbers" */

/* chart panel, pull quote, folds ========================= */
.figure{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 rgb(var(--gold-rgb) / .38),var(--sh-1)}
.figure h4{color:var(--text)}
.vlegend{color:var(--text-2)}
/* reliability() whiskers (the only round-capped lines in a chart): the lighter emerald on screen */
@media screen{.figure .chart svg line[stroke-linecap="round"]{stroke:var(--em-400)}}                       /* legend text wears text tokens; the swatch carries the colour */
.pull{border-left:2px solid var(--gold);background:linear-gradient(90deg,rgb(var(--gold-rgb) / .06),transparent 70%)}
details.fold{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-2)}
details.fold>summary{min-height:44px}

/* the 4.41(b) box: hatched rule + label, never colour alone */
.hypo{position:relative;border:1px solid rgb(var(--warn-rgb) / .32);border-left:0;padding-left:18px;background:rgb(var(--warn-rgb) / .045)}
.hypo::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;border-radius:2px 0 0 2px;
  background:repeating-linear-gradient(135deg,var(--warn) 0 3px,rgb(var(--warn-rgb) / .15) 3px 6px)}
.hypo b{color:var(--warn)}
.hypo-tag{color:var(--warn);border-color:rgb(var(--warn-rgb) / .45);min-height:24px;display:inline-flex;align-items:center}