@import url('/static/fonts.css');

/* ============================================================
   DIGITAL ASSET ATLAS — design system

   The reference is not a crypto site. It is an architectural
   drawing set: a warm paper ground, hairline rules that do the
   dividing work instead of boxes and shadows, ordinals on every
   section, and one neutral grotesque (Inter) carrying the text
   with a mono (IBM Plex Mono) for labels, tickers and figures.
   Radius is 2px everywhere. Nothing glows. Nothing is neon.
   ============================================================ */

:root{
  /* ground */
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --surface-3:#EDEAE2;
  /* ink */
  --ink:#14161A;
  --ink-2:#3B4048;
  --muted:#767C86;
  --faint:#9BA1AA;
  /* rules */
  --rule:#E3E0D8;
  --rule-2:#CFCBC0;
  --rule-3:#B3AEA1;
  /* accent — blueprint blue, used sparingly */
  --accent:#1E4B7A;
  --accent-2:#2E6BA8;
  --accent-wash:#EBF0F6;
  /* data */
  --up:#1D6B4C;
  --up-wash:#E7F0EB;
  --down:#A03A2E;
  --down-wash:#F6E9E7;
  --ochre:#8A6410;
  --ochre-wash:#F5EFE0;
  --star:#A8811C;
  --shadow:0 1px 0 rgba(20,22,26,.03);
  --r:2px;
  --maxw:1340px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --paper:#121417;
  --surface:#181A1E;
  --surface-2:#1E2126;
  --surface-3:#252930;
  --ink:#E9E7E2;
  --ink-2:#C3C2BD;
  --muted:#949AA3;
  --faint:#767C86;
  --rule:#2A2E35;
  --rule-2:#3A3F47;
  --rule-3:#4C525B;
  --accent:#8AB0DA;
  --accent-2:#A6C4E6;
  --accent-wash:#1B2530;
  --up:#5FB98C;
  --up-wash:#16241D;
  --down:#DE8478;
  --down-wash:#2A1B19;
  --ochre:#C9A24E;
  --ochre-wash:#26200F;
  --star:#C9A24E;
  --shadow:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a.q{color:var(--accent)}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--rule);margin:26px 0}
::selection{background:var(--accent-wash)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.022em;line-height:1.14;color:var(--ink)}
h1{font-size:clamp(29px,3.2vw,42px);letter-spacing:-0.032em}
h2{font-size:clamp(20px,1.9vw,25px);letter-spacing:-0.026em}
h3{font-size:17px;letter-spacing:-0.018em}
h4{font-size:14px;letter-spacing:-0.01em}
p{margin:0 0 14px}
.lede{font-size:17.5px;line-height:1.58;color:var(--ink-2);max-width:62ch;font-weight:400;letter-spacing:-0.006em}
.prose{max-width:70ch}
.prose p{margin:0 0 15px;line-height:1.68;color:var(--ink-2)}
.prose h2{margin:34px 0 12px}
.prose h3{margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2);line-height:1.68}
.prose li{margin:0 0 6px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule-2);text-decoration-thickness:1px}
.prose blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:2px solid var(--rule-2);
  color:var(--ink-2);font-style:normal}
.small{font-size:13px;color:var(--muted)}
.fine{font-size:12px;line-height:1.5;color:var(--faint)}
.mono{font-family:var(--mono);font-feature-settings:"zero" 1}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--muted)}

/* the small-caps label: the site's most repeated device */
.lab{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);display:block}
.lab-ink{color:var(--ink-2)}

/* ---------- masthead ---------- */
.masthead{background:var(--surface);border-bottom:1px solid var(--rule)}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:66px;
  display:flex;align-items:center;gap:20px}
.brand{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:0 0 auto;min-width:auto}
.brand a{display:block;font-size:19px;font-weight:600;letter-spacing:-0.035em;line-height:1.05;
  color:var(--ink);white-space:nowrap}
.brand a:hover{text-decoration:none}
.brand .mk{display:inline-block;border-bottom:2px solid var(--accent);padding-bottom:1px}
.brand .desc{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.mast-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.searchwrap{position:relative;flex:0 1 300px;min-width:120px}
.searchwrap input{width:100%;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:8px 12px 8px 30px;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
.searchwrap input:focus{border-color:var(--accent);background:var(--surface)}
.searchwrap input::placeholder{color:var(--faint)}
.searchwrap .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:13px;pointer-events:none}
.searchresults{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:80;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 10px 34px rgba(20,22,26,.10);overflow:hidden;max-height:64vh;overflow-y:auto}
.searchresults.open{display:block}
.searchresults a{display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--rule);font-size:13.5px}
.searchresults a:last-child{border-bottom:0}
.searchresults a:hover,.searchresults a.sel{background:var(--surface-2);text-decoration:none}
.searchresults .sym{font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--rule);border-radius:var(--r);padding:1px 5px;flex:0 0 auto}
.searchresults .k{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);flex:0 0 auto}
.searchresults .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:none;border:1px solid var(--rule-2);border-radius:var(--r);color:var(--ink-2);
  width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer;padding:0;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}
.savebtn{position:relative;color:var(--star);text-decoration:none}
.savebtn:hover{text-decoration:none}
.favbadge{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:9px;font-weight:600;border-radius:999px;min-width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.burger{display:none;background:none;border:1px solid var(--rule-2);border-radius:var(--r);
  color:var(--ink);width:32px;height:32px;font-size:15px;cursor:pointer;padding:0}

/* ---------- nav rail ---------- */
.navrail{position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--rule-2);box-shadow:var(--shadow)}
.navrail-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;align-items:stretch;gap:2px}
.mainnav{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;min-width:0}
.mainnav>a,.ddbtn{display:inline-flex;align-items:center;padding:0 13px;height:40px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent;background:none;
  border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--mono)}
.mainnav>a:hover,.ddbtn:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--rule-3)}
.mainnav>a.cur,.dd.cur .ddbtn{color:var(--ink);border-bottom-color:var(--accent)}
.dd{position:relative;display:flex}
.ddmenu{display:none;position:absolute;top:100%;left:0;min-width:246px;z-index:90;
  background:var(--surface);border:1px solid var(--rule-2);border-top:0;
  box-shadow:0 14px 36px rgba(20,22,26,.11);padding:6px 0}
.ddmenu.open{display:block}
.ddmenu a{display:flex;align-items:baseline;gap:8px;padding:7px 15px;font-size:13.5px;color:var(--ink-2)}
.ddmenu a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.ddmenu a i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);
  width:16px;flex:0 0 auto}
.ddmenu .ddsec{padding:11px 15px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);border-top:1px solid var(--rule);margin-top:5px}
.ddmenu .ddsec:first-child{border-top:0;margin-top:0;padding-top:6px}
.navrail .railright{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.navrail .railright a{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.navrail .railright a:hover{color:var(--ink)}

/* ---------- offcanvas (mobile) ---------- */
.offcanvas{position:fixed;top:0;bottom:0;left:0;width:308px;max-width:88vw;background:var(--surface);
  z-index:110;transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto;
  border-right:1px solid var(--rule-2);padding:16px 18px 40px}
.offcanvas.right{left:auto;right:0;transform:translateX(100%);border-right:0;border-left:1px solid var(--rule-2)}
.offcanvas.open{transform:none}
.oc-backdrop{display:none;position:fixed;inset:0;background:rgba(20,22,26,.34);z-index:100}
.oc-backdrop.open{display:block}
.oc-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;
  border-bottom:1px solid var(--rule);margin-bottom:8px}
.oc-head b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--muted)}
.oc-close{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
.offcanvas details{border-bottom:1px solid var(--rule)}
.offcanvas summary{padding:11px 2px;cursor:pointer;font-weight:500;font-size:14px;list-style:none}
.offcanvas summary::-webkit-details-marker{display:none}
.offcanvas summary::after{content:'+';float:right;color:var(--faint);font-family:var(--mono)}
.offcanvas details[open] summary::after{content:'–'}
.offcanvas details a{display:block;padding:7px 2px 7px 14px;font-size:13.5px;color:var(--ink-2)}
.oc-link{display:block;padding:11px 2px;border-bottom:1px solid var(--rule);font-weight:500;font-size:14px}
.oc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 2px;
  border-bottom:1px solid var(--rule);font-size:13.5px}
.oc-note{padding:12px 0;border-bottom:1px solid var(--rule)}
.oc-note b{display:block;font-size:13.5px;margin-bottom:3px}
.oc-note p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------- page shell ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:26px 22px 60px}
.page-narrow{max-width:900px}
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.crumb a{color:var(--muted)}
.crumb span{color:var(--rule-3)}

/* the page header block: ordinal + title + lede, closed by a hairline */
.phead{border-bottom:1px solid var(--rule-2);padding-bottom:20px;margin-bottom:22px}
.phead .kicker{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;margin-bottom:9px}
.phead .kicker .lab{display:inline}
.phead h1{margin-bottom:10px}
.phead .lede{margin:0}
.phead-row{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.phead-row .grow{flex:1 1 460px;min-width:0}

/* section head: 01 — TITLE ————————— */
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  border-top:1px solid var(--ink);padding-top:9px;margin:44px 0 14px}
.sechead .ord{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted);
  letter-spacing:.06em;flex:0 0 auto}
.sechead h2{flex:1 1 auto;min-width:0}
.sechead .sh-note{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right;
  flex:1 1 200px;min-width:0}
.sechead .sh-note a{color:var(--accent)}
.sechead-lite{border-top-color:var(--rule-2)}
.sec-sum{font-size:14px;color:var(--ink-2);max-width:78ch;margin:0 0 14px;line-height:1.6}

/* ---------- rules & grid helpers ---------- */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1fr) 320px}
.g-side{grid-template-columns:250px minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:12px}
.rowflex{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1 1 auto}

/* ---------- panels ---------- */
.panel{background:transparent;border:0;border-top:1px solid var(--rule-2);border-radius:0;
  padding:14px 0 16px}
.panel-flush{padding:0;border-top:0}
.panel h3{margin-bottom:8px}
.panel-head{display:flex;align-items:baseline;gap:10px;padding:11px 0 8px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.panel-head .lab{display:inline}
.panel-head .more{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.panel-body{padding:13px 0 4px}
.tint{background:var(--surface-2)}
.note{border:0;border-left:2px solid var(--rule-3);background:transparent;
  border-radius:0;padding:4px 0 4px 16px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  margin:16px 0}
.note b{color:var(--ink)}
.note-accent{border-left-color:var(--accent);background:var(--accent-wash)}
.note-warn{border-left-color:var(--ochre);background:var(--ochre-wash)}

/* ---------- the spec list: label / value, hairline separated ---------- */
.spec{border-top:1px solid var(--rule-2)}
.spec .row{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.spec .row:hover{background:var(--surface-2)}
.spec .k{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink-2);display:flex;align-items:baseline;gap:7px}
.spec .k a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:2px;text-decoration-thickness:1px}
.spec .k a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.spec .v{flex:0 1 auto;min-width:0;font-family:var(--mono);font-size:13.5px;
  font-variant-numeric:tabular-nums;font-weight:500;text-align:right;color:var(--ink);
  overflow-wrap:anywhere}
.spec .u{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:5px}
.spec-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.spec-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px}
.spec-2 .row,.spec-3 .row{border-top:0}
.na{color:var(--faint);font-family:var(--mono);font-size:12.5px;font-weight:400;cursor:help;
  border-bottom:1px dotted var(--rule-3)}

/* ---------- figure provenance line (required on every figure) ---------- */
.figmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:7px 0 4px}
.tagmeta{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:var(--r);
  padding:2px 7px;background:var(--surface);white-space:nowrap}
.tagmeta.src{border-style:dashed}
.asof{font-family:var(--mono);font-size:10.5px;color:var(--faint)}

/* ---------- data tables ---------- */
.dtwrap{overflow-x:auto;background:transparent}
.dt{width:100%;border-collapse:collapse;font-size:13.5px}
.dt th{position:sticky;top:0;z-index:2;background:var(--paper);text-align:right;
  padding:9px 11px 8px;border-bottom:1px solid var(--ink);white-space:nowrap;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.dt th:first-child,.dt td:first-child,.dt th.lcol,.dt td.name{text-align:left}
.dt th.nosort{cursor:default}
.dt th:hover{color:var(--ink)}
.dt th .arw{opacity:0;margin-left:3px}
.dt th.asc .arw,.dt th.desc .arw{opacity:1;color:var(--accent)}
.dt th.desc .arw::after{content:'\2193'}
.dt th.asc .arw::after{content:'\2191'}
.dt td{padding:8px 11px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr:hover{background:var(--surface-2)}
.dt tbody tr:last-child td{border-bottom:1px solid var(--rule-2)}
.dt td.name{white-space:nowrap;min-width:186px}
.dt .rk{font-family:var(--mono);font-size:11px;color:var(--faint);width:34px;text-align:right !important}
.dt td.wrap{white-space:normal}
.dt .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;letter-spacing:0}
.dt-compact td,.dt-compact th{padding:6px 9px;font-size:12.5px}
.aname{display:inline-flex;align-items:center;gap:8px;min-width:0}
.alogo{width:19px;height:19px;border-radius:50%;flex:0 0 auto;background:var(--surface-2)}
.aname b{font-weight:500}
.tick{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--rule);border-radius:var(--r);padding:1px 5px;flex:0 0 auto}
.favstar{background:none;border:0;cursor:pointer;font-size:12px;color:var(--rule-3);padding:0 6px 0 0;
  line-height:1;vertical-align:1px}
.favstar.on{color:var(--star)}
.favstar:hover{color:var(--star)}

/* proportion bar inside a cell — hairline, never a block of color */
.bar{position:relative;display:block;height:14px;min-width:52px}
.bar i{position:absolute;left:0;top:3px;height:8px;background:var(--rule-2);display:block}
.bar i.pos{background:var(--up);opacity:.34}
.bar b{position:relative;font-family:var(--mono);font-size:11px;font-weight:500}

/* Emphasis by weight, not by fill. Coloured cell backgrounds turn a table into a
   checkerboard of boxes; a financial table should read as rows of numbers. The only
   place a fill is legitimate is the heat map, where the fill IS the chart. */
.h1u,.h1d{}
.h2u{color:var(--up)}
.h3u{color:var(--up);font-weight:600}
.h2d{color:var(--down)}
.h3d{color:var(--down);font-weight:600}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);padding:7px 14px;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;line-height:1.5}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.cur{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{border-style:dashed}
.btn[disabled],.btn.off{color:var(--faint);border-color:var(--rule);cursor:default}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface-2);color:var(--ink-2);padding:2px 8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.chip.a{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.chip.w{border-color:var(--ochre);color:var(--ochre);background:var(--ochre-wash)}
.stale{border-color:var(--down);color:var(--down);background:var(--down-wash)}

/* ---------- tabs (asset profile) ---------- */
.tabbar{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--rule-2);
  margin:0 0 22px;scrollbar-width:thin}
.tabbar a{flex:0 0 auto;padding:10px 14px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;
  white-space:nowrap}
.tabbar a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--rule-3)}
.tabbar a.cur{color:var(--ink);border-bottom-color:var(--accent)}
.tabbar a .n{font-size:9px;color:var(--faint);margin-left:5px}

/* ---------- KPI / ranked cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2);background:transparent}
.kpi{padding:13px 18px 14px 0;border-right:1px solid var(--rule);min-width:0}
.kpi:last-child{border-right:0;padding-right:0}
.kpi .lab{margin-bottom:5px}
.kpi .v{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;line-height:1.2;display:block}
.kpi .d{font-size:12px;color:var(--muted);margin-top:3px;display:block}
.kpi a{display:block}
.kpi a:hover{text-decoration:none}

.rankcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:4px 30px}
.rankcard{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;
  padding:11px 0 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rankcard .rc-h{display:flex;align-items:baseline;gap:8px}
.rankcard .rc-h .arrow{margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:12px}
.rankcard ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.rankcard li{display:flex;align-items:baseline;gap:9px;padding:5px 0;border-top:1px solid var(--rule);
  font-size:13px;min-width:0}
.rankcard li:first-child{border-top:0}
.rankcard li .i{font-family:var(--mono);font-size:10px;color:var(--faint);flex:0 0 13px}
.rankcard li .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankcard li .vl{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  font-weight:500}
.rankcard .rc-f{margin-top:auto;font-size:11.5px;color:var(--faint);line-height:1.45}

/* ---------- imagery ---------- */
.banner{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface-3);
  margin:0 0 26px;isolation:isolate}
.banner img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.banner .sizer{display:block;width:100%;padding-top:26%}
.banner .ov{position:relative;z-index:2;padding:26px 30px;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:100%;position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,14,17,.72) 0%,rgba(12,14,17,.46) 46%,rgba(12,14,17,.10) 100%)}
.banner .ov .lab{color:rgba(255,255,255,.72)}
.banner .ov h1,.banner .ov h2{color:#fff;margin:6px 0 6px;text-shadow:0 1px 22px rgba(0,0,0,.28)}
.banner .ov p{color:rgba(255,255,255,.88);margin:0;max-width:60ch;font-size:15px;line-height:1.55}
.banner-tall .sizer{padding-top:42%}
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin:0 0 26px;background:var(--surface-3)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .sizer{display:block;padding-top:40%}
.hero .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,5vw,64px);
  background:linear-gradient(90deg,rgba(10,12,15,.80) 0%,rgba(10,12,15,.55) 44%,rgba(10,12,15,.08) 100%)}
.hero .ov h1{color:#fff;max-width:19ch;margin:0 0 12px;text-shadow:0 2px 30px rgba(0,0,0,.32)}
.hero .ov p{color:rgba(255,255,255,.9);max-width:52ch;font-size:16.5px;line-height:1.6;margin:0 0 18px}
.hero .ov .lab{color:rgba(255,255,255,.68);margin-bottom:12px}
.hero .ov .btn{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.96);color:#14161A}
.hero .ov .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.hero .ov .btn.ghost:hover{border-color:#fff}

/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2);
  margin:0 0 26px}
.trust div{flex:1 1 150px;padding:11px 16px 12px;border-right:1px solid var(--rule);min-width:0}
.trust div:last-child{border-right:0}
.trust .v{font-family:var(--mono);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;
  display:block;line-height:1.25}
.trust .lab{margin-top:3px}

/* ---------- sparkline / charts ---------- */
.spark{display:inline-block;width:78px;height:22px;vertical-align:middle}
.spark path{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.chartbox{border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:0;background:transparent;padding:12px 0 4px}
.chart{width:100%;display:block}
.chart .gl{stroke:var(--rule);stroke-width:1}
.chart .ax{font-family:var(--mono);font-size:9.5px;fill:var(--faint)}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.chart .ar{fill:var(--accent);opacity:.07}
.chart .bar{fill:var(--accent);opacity:.55}
.chart .hov{stroke:var(--rule-3);stroke-width:1;stroke-dasharray:2 2}
.charttip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:10.5px;padding:4px 7px;border-radius:var(--r);white-space:nowrap;
  transform:translate(-50%,-140%);opacity:0;transition:opacity .1s}
.charttip.on{opacity:1}

/* ---------- guided mode ---------- */
.guide{display:none;border:0;border-left:2px solid var(--accent);
  background:transparent;border-radius:0;padding:2px 0 2px 15px;margin:12px 0 18px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:80ch}
body.guided .guide{display:block}
.guide b{color:var(--ink)}
.expert-only{display:block}
body.guided .expert-only{display:none}

/* ---------- forms ---------- */
label.f{display:flex;flex-direction:column;gap:4px}
label.f>.lab{margin-bottom:1px}
input[type=text],input[type=email],input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--r);padding:7px 10px;outline:none;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select{cursor:pointer}
.formbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;background:transparent;
  border:0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  border-radius:0;padding:14px 0;margin:0 0 18px}
.formbar .f input,.formbar .f select{min-width:132px}
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:560px}
.hp{position:absolute;left:-9999px;width:0;height:0;opacity:0}

/* ---------- ask ---------- */
.askbox{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2);
  border-radius:0;background:transparent;padding:18px 0 20px}
#askForm{display:flex;gap:10px}
#askInput{flex:1;font-size:15px;padding:11px 14px}
.ask-out{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px}
.ask-out p{font-size:15px;line-height:1.66;color:var(--ink-2)}
.ex-q{display:block;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--ink-2);
  cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%;
  font-family:inherit}
.ex-q:hover{color:var(--accent)}
.ex-q::before{content:'→';font-family:var(--mono);color:var(--faint);margin-right:8px}

/* ---------- news ---------- */
.newslist{border-top:1px solid var(--rule-2)}
.newsitem{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.newsitem .th{width:112px;height:74px;object-fit:cover;border-radius:var(--r);flex:0 0 auto;
  background:var(--surface-2)}
.newsitem .bd{flex:1 1 auto;min-width:0}
.newsitem h3{font-size:15.5px;font-weight:500;letter-spacing:-0.012em;line-height:1.35;margin:0 0 5px}
.newsitem p{margin:0 0 6px;font-size:13.5px;color:var(--muted);line-height:1.55}
.srcline{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.srcline .pub{color:var(--ink-2)}
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:0 22px}
.newsgrid .newsitem{border-top:0}

/* ---------- learn ---------- */
.trackgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 26px}
.track{border-top:1px solid var(--ink);padding:12px 0 18px}
.track h3{margin:5px 0 6px}
.track p{font-size:13px;color:var(--muted);margin:0 0 9px;line-height:1.55}
.track ol{margin:0;padding:0;list-style:none}
.track li{border-top:1px solid var(--rule);padding:0}
.track li a{display:flex;gap:9px;padding:7px 0;font-size:13.5px;color:var(--ink-2);align-items:baseline}
.track li a:hover{color:var(--accent);text-decoration:none}
.track li .i{font-family:var(--mono);font-size:10px;color:var(--faint);flex:0 0 16px}
.lvl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--rule);border-radius:var(--r);padding:1px 4px;margin-left:auto;
  flex:0 0 auto}

/* glossary */
.gloss-az{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 18px}
.gloss-az a{font-family:var(--mono);font-size:11px;padding:3px 7px;border:1px solid var(--rule);
  border-radius:var(--r);color:var(--ink-2)}
.gloss-az a:hover{border-color:var(--ink);text-decoration:none}
.gloss-az a.off{color:var(--rule-3);border-color:var(--rule);pointer-events:none}
.glist{columns:2;column-gap:34px}
.gitem{break-inside:avoid;border-top:1px solid var(--rule);padding:9px 0}
.gitem a{font-weight:500;font-size:14px}
.gitem p{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- footer ---------- */
.megafoot{border-top:1px solid var(--ink);margin-top:56px;background:var(--surface)}
.megafoot-in{max-width:var(--maxw);margin:0 auto;padding:28px 22px 8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:26px}
.megafoot h2{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--faint);margin:0 0 9px;letter-spacing:.12em}
.megafoot a{display:block;font-size:13px;color:var(--ink-2);padding:3px 0}
.footer{background:var(--surface);border-top:1px solid var(--rule)}
.footer-in{max-width:var(--maxw);margin:0 auto;padding:22px 22px 40px}
.f-family{font-size:12.5px;color:var(--muted);padding:14px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.f-family a{color:var(--ink-2);font-weight:500}
.f-sub{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:16px 0}
.f-sub input{min-width:230px}
.f-legal{padding-top:14px;border-top:1px solid var(--rule)}
.f-legal p{font-size:11.5px;line-height:1.6;color:var(--faint);margin:0 0 8px;max-width:none}
.f-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.f-bottom{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-family:var(--mono);
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-top:6px}

/* ---------- misc ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin:22px 0 0;flex-wrap:wrap}
.pager a,.pager span{font-family:var(--mono);font-size:11px;padding:5px 10px;border:1px solid var(--rule);
  border-radius:var(--r);color:var(--ink-2)}
.pager .cur{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pager .gap{border:0}
.emptystate{border:1px dashed var(--rule-2);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--muted);font-size:13.5px}
.dl-inline{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--muted)}
.dl-inline b{color:var(--ink)}
.scrollx{overflow-x:auto}
.hidden{display:none !important}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .mainnav>a,.ddbtn{padding:0 9px;font-size:10.5px;letter-spacing:.07em}
  .navrail .railright{gap:10px}
}
@media (max-width:1020px){
  .g-main,.g-side{grid-template-columns:minmax(0,1fr)}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glist{columns:1}
}
@media (max-width:900px){
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .mainnav,.navrail .railright{display:none}
  .navrail-in{padding:0}
  .navrail{border-bottom:0}
  .mast-in{height:58px;padding:0 14px;gap:12px}
  .brand a{font-size:17px}
  .brand .desc{display:none}
  .page{padding:18px 14px 46px}
  .g-2,.g-3{grid-template-columns:minmax(0,1fr)}
  .spec-2,.spec-3{grid-template-columns:minmax(0,1fr)}
  .trust div{flex:1 1 50%;border-bottom:1px solid var(--rule)}
  .hero .sizer{padding-top:64%}
  .hero .ov{background:linear-gradient(180deg,rgba(10,12,15,.34) 0%,rgba(10,12,15,.82) 62%)}
  .hero .ov h1{max-width:none;font-size:26px}
  .hero .ov p{font-size:14.5px}
  .banner .sizer{padding-top:44%}
  .banner .ov{padding:18px 18px;background:linear-gradient(180deg,rgba(12,14,17,.3) 0%,rgba(12,14,17,.8) 66%)}
  .sechead{margin-top:34px;flex-wrap:wrap}
  .sechead .sh-note{margin-left:0;text-align:left;flex-basis:100%}
  .megafoot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .newsitem .th{width:84px;height:60px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{border-bottom:1px solid var(--rule)}
  .kpi:nth-child(2n){border-right:0}
}
@media (max-width:560px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .kpi{border-right:0}
  .megafoot-in{grid-template-columns:minmax(0,1fr)}
  .searchwrap{flex:1 1 auto}
}
@media print{
  .navrail,.masthead,.megafoot,.offcanvas,.oc-backdrop,.btnrow{display:none}
  body{background:#fff}
  .page{max-width:none;padding:0}
}

/* ============================================================
   TICKER TAPE — a thin live strip under the section rail.
   It scrolls because a tape scrolls; it pauses on hover, and it
   stops entirely for readers who ask for reduced motion.
   ============================================================ */
.tape{border-bottom:1px solid var(--rule);background:var(--surface);overflow:hidden;
  position:relative}
.tape-in{max-width:none;display:flex;width:max-content;
  animation:tape-roll 150s linear infinite}
.tape:hover .tape-in{animation-play-state:paused}
.tape a{display:inline-flex;align-items:baseline;gap:7px;padding:7px 16px;white-space:nowrap;
  border-right:1px solid var(--rule);font-size:12.5px;color:var(--ink-2)}
.tape a:hover{background:var(--surface-2);text-decoration:none}
.tape .tk{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.tape .px{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.tape .ch{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
@keyframes tape-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tape{overflow-x:auto}
  .tape-in{animation:none;width:auto}
  .tape-in .tape-dup{display:none}
}
@media (max-width:900px){.tape a{padding:6px 12px;font-size:12px}}

/* ============================================================
   HEAT MAP — the one place a filled block is the right answer,
   because here the fill IS the chart: area is size, color is
   direction. The palette is muted on purpose; it is a map, not
   an alarm.
   ============================================================ */
.heat{position:relative;width:100%;padding-top:56%;background:var(--surface-2);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2);overflow:hidden}
.heat-sm{padding-top:38%}
.heat-tile{position:absolute;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;line-height:1.15;
  border:1px solid var(--paper);padding:2px 3px;color:var(--ink);text-decoration:none}
.heat-tile:hover{outline:1.5px solid var(--ink);outline-offset:-1.5px;text-decoration:none;z-index:3}
.heat-tile b{font-size:11px;font-weight:600;letter-spacing:-0.01em;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.heat-tile span{font-family:var(--mono);font-size:10px;font-variant-numeric:tabular-nums;
  opacity:.86}
.heat-tile.t-lg b{font-size:17px}.heat-tile.t-lg span{font-size:12.5px}
.heat-tile.t-md b{font-size:13px}.heat-tile.t-md span{font-size:11px}
.heat-tile.t-xs b{font-size:9px}.heat-tile.t-xs span{display:none}
.heat-band{position:absolute;display:flex;align-items:center;padding:0 7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--paper);overflow:hidden;white-space:nowrap;z-index:2}
.hm-d4{background:#B4463A;color:#fff}
.hm-d3{background:#C9705F;color:#fff}
.hm-d2{background:#DEA095}
.hm-d1{background:#EFCDC6}
.hm-0 {background:#E8E5DC}
.hm-u1{background:#C6DCCB}
.hm-u2{background:#95C2A2}
.hm-u3{background:#5C9E73;color:#fff}
.hm-u4{background:#2E7A4C;color:#fff}
.hm-na{background:var(--surface-3);color:var(--muted)}
[data-theme="dark"] .hm-d1{background:#4A2B27}
[data-theme="dark"] .hm-d2{background:#6B3A32;color:#F0DAD5}
[data-theme="dark"] .hm-0{background:#2A2E35}
[data-theme="dark"] .hm-u1{background:#25412F}
[data-theme="dark"] .hm-u2{background:#2F5A3F;color:#DCEEE2}
[data-theme="dark"] .heat-tile{border-color:var(--paper)}
[data-theme="dark"] .heat-band{background:var(--paper)}
.heat-legend{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:10px 0 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.heat-legend i{display:inline-block;width:34px;height:11px}
.heat-legend b{font-weight:400;padding:0 8px}
@media (max-width:900px){
  .heat{padding-top:120%}
  .heat-sm{padding-top:86%}
  .heat-tile b{font-size:9.5px}
  .heat-tile.t-lg b{font-size:13px}
}

/* ============================================================
   MOBILE PASS
   The hard problem on a phone is a fifteen-column financial
   table. The answer is not to hide the data: it is to let the
   table scroll sideways, pin the asset name so a reader never
   loses their place, and show a shadow at the edge so it is
   obvious there is more to the right.
   ============================================================ */
@media (max-width:900px){
  body{font-size:14.5px}

  /* horizontal-scroll shadows, CSS only — no script, no library */
  .dtwrap, .tabbar, .btnrow, .heat-legend{
    background:
      linear-gradient(to right, var(--paper) 26%, rgba(251,250,247,0)) left center/32px 100% no-repeat,
      linear-gradient(to left, var(--paper) 26%, rgba(251,250,247,0)) right center/32px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(20,22,26,.13), rgba(20,22,26,0)) left center/13px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(20,22,26,.13), rgba(20,22,26,0)) right center/13px 100% no-repeat;
    background-attachment:local, local, scroll, scroll;
  }
  .btnrow, .heat-legend{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .btnrow::-webkit-scrollbar,.tabbar::-webkit-scrollbar,.dtwrap::-webkit-scrollbar{height:0}
  .btnrow .btn{flex:0 0 auto}

  /* the rank column is the first thing to go; the name is the last */
  .dt .rk{display:none}
  .dt{font-size:12.5px}
  .dt th,.dt td{padding:7px 9px}
  .dt td.name,.dt th.pri{
    position:sticky;left:0;z-index:3;background:var(--paper);
    min-width:0;max-width:44vw;box-shadow:1px 0 0 var(--rule)}
  .dt th.pri{z-index:4}
  .dt tbody tr:hover td.name{background:var(--surface-2)}
  .dt td.name .aname{max-width:42vw;overflow:hidden}
  .dt td.name .aname b{overflow:hidden;text-overflow:ellipsis}
  .dt .tick{display:none}
  .dt th{font-size:9px;letter-spacing:.06em;padding-top:8px;padding-bottom:7px}

  /* header: the theme toggle also lives in the reading-options panel */
  .mast-in{gap:8px;padding:0 12px}
  .mast-tools{gap:6px}
  .mast-tools .js-theme{display:none}
  .searchwrap{flex:1 1 auto;min-width:0}
  .searchwrap input{padding:7px 10px 7px 26px;font-size:13px}
  .searchwrap .mag{left:8px}
  .brand a{font-size:16px;letter-spacing:-0.03em}

  .tape a{padding:6px 11px;font-size:11.5px;gap:5px}
  .tape .tk{font-size:9.5px}

  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:12px 12px 13px 0;border-bottom:1px solid var(--rule)}
  .kpi:nth-child(2n){border-right:0;padding-right:0}
  .kpi .v{font-size:18px}
  .kpis>.kpi:nth-last-child(-n+2){border-bottom:0}

  .trust div{flex:1 1 46%;padding:10px 12px 11px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .rankcards{gap:0 20px}
  .formbar{gap:10px 14px}
  .formbar .f{flex:1 1 46%}
  .formbar .f input,.formbar .f select{width:100%;min-width:0}
  .spec .row{gap:10px}
  .spec .v{font-size:13px}
  .prose{max-width:none}
  .lede{font-size:16px}
  .page-narrow{max-width:none}
  .glist{columns:1}
  .heat{padding-top:132%}
  .heat-sm{padding-top:104%}
  .heat-band{font-size:8px;letter-spacing:.04em;padding:0 4px}
  #askForm{flex-direction:column}
  #askForm .btn{align-self:flex-start}
  .newsitem{gap:12px}
  .sechead .ord{font-size:10px}
}

@media (max-width:640px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .kpi{border-right:0;padding-right:0}
  .kpis>.kpi:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .kpis>.kpi:last-child{border-bottom:0}
  .trust div{flex:1 1 100%}
  .formbar .f{flex:1 1 100%}
  .rankcards{grid-template-columns:minmax(0,1fr)}
  .heat{padding-top:158%}
  .heat-sm{padding-top:124%}
  .heat-tile b{font-size:8.5px}
  .heat-tile.t-lg b{font-size:12px}
  .heat-tile.t-md span{display:none}
  .dt td.name,.dt th.pri{max-width:40vw}
  .sparkcell{display:none}
  .banner .sizer{padding-top:62%}
  .banner .ov{padding:16px 14px}
  .banner .ov h1{font-size:23px}
  .banner .ov p{font-size:13.5px}
}

[data-theme="dark"] .dt td.name{background:var(--paper)}
[data-theme="dark"] .dtwrap,[data-theme="dark"] .tabbar,[data-theme="dark"] .btnrow{
  background:
    linear-gradient(to right, var(--paper) 26%, rgba(18,20,23,0)) left center/32px 100% no-repeat,
    linear-gradient(to left, var(--paper) 26%, rgba(18,20,23,0)) right center/32px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center/13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center/13px 100% no-repeat;
  background-attachment:local, local, scroll, scroll;
}

/* ============================================================
   PHONE FIT
   Measured on a 390px viewport: the masthead ran to 469px and
   pushed the whole document sideways. A long wordmark cannot
   share one row with a search field and three buttons, so on a
   phone the search takes a row of its own — which also makes it
   easier to hit.
   ============================================================ */
html{overflow-x:clip}              /* clip, not hidden: hidden would break sticky */

@media (max-width:700px){
  .mast-in{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 12px 10px;gap:8px 10px;
    align-items:center}
  .brand{flex:1 1 auto;min-width:0;order:1}
  .brand a{display:block;font-size:16.5px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:100%}
  .brand .mk{border-bottom-width:2px;display:inline}
  .mast-tools{order:2;flex:0 0 auto;margin-left:0;gap:6px}
  .searchwrap{order:3;flex:1 0 100%;min-width:0;max-width:100%}
  .searchwrap input{width:100%;font-size:16px;padding:9px 12px 9px 28px}  /* 16px: iOS
      zooms the page in when a focused input is smaller than 16px */
  .searchwrap .mag{left:9px}
  .searchresults{width:auto}
  .burger{order:0;flex:0 0 auto}
  .iconbtn{width:34px;height:34px}
}

@media (max-width:420px){
  .page{padding:16px 12px 40px}
  .megafoot-in{padding:22px 12px 8px;gap:16px}
  .footer-in{padding:18px 12px 34px}
  .mast-in{padding:8px 10px 10px}
  .brand a{font-size:15.5px}
  .brand .desc{display:none}
  h1{font-size:24px}
  .lede{font-size:15px}
  .hero .ov{padding:0 18px}
  .hero .ov h1{font-size:23px}
  .hero .ov p{font-size:13.5px}
  .hero .ov .btnrow{gap:5px}
  .hero .ov .btn{padding:6px 11px;font-size:9.5px;letter-spacing:.07em}
  .trust div{padding:9px 10px 10px 0}
  .trust .v{font-size:15px}
  .sechead{gap:9px}
  .sechead h2{font-size:19px}
  .rankcard li{font-size:12.5px}
  .newsitem .th{width:70px;height:52px}
  .newsitem h3{font-size:14.5px}
  .f-sub input{min-width:0;flex:1 1 100%}
  .f-bottom{gap:7px 12px;font-size:9.5px}
  .tape a{padding:6px 10px}
}

/* every horizontally scrolling region gets momentum scrolling on iOS */
.dtwrap,.tabbar,.btnrow,.scrollx,.heat-legend,.tape{-webkit-overflow-scrolling:touch}

/* The search input lives inside .mast-tools, so `flex:1 0 100%` was 100% of that
   box rather than of the row. Dissolving .mast-tools on a phone makes its children
   direct flex items of the masthead, which is what the wrap rules assume. */
@media (max-width:700px){
  .mast-tools{display:contents}
  .searchwrap{order:3;flex:1 0 100%;margin-top:2px}
  .savebtn,.mast-in .iconbtn{order:2}
  .burger{order:0}
  .brand{order:1;margin-right:auto}
  /* a provenance line is a sentence, not a token: let it wrap instead of setting
     the width of the whole document */
  .figmeta{gap:5px 8px}
  .tagmeta{white-space:normal;line-height:1.45}
  .fig-wrap,.asof{white-space:normal}
}

@media (max-width:700px){
  /* a label and a long qualifier do not belong on one line on a phone */
  .spec .row{flex-wrap:wrap;gap:2px 12px}
  .spec .v{flex:1 1 100%;text-align:left;white-space:normal}
  .spec .k{flex:1 1 100%}
  .spec-2 .row,.spec-3 .row{padding:8px 0}
}

/* Touch targets. Apple's guidance is 44pt; a 30px pill is a miss on a phone. */
@media (max-width:900px) and (pointer:coarse){
  .btn{padding:11px 15px;min-height:42px}
  .tabbar a{padding:13px 14px}
  .iconbtn,.burger{width:40px;height:40px}
  .mainnav>a,.ddbtn{height:44px}
  .ddmenu a{padding:11px 15px}
  .oc-link,.offcanvas summary{padding:13px 4px}
  .offcanvas details a{padding:11px 4px 11px 14px}
  .favstar{padding:6px 8px 6px 0;font-size:15px}
  .ex-q{padding:13px 0}
  .dt td.name a{display:inline-block;padding:3px 0}
  .pager a,.pager span{padding:10px 14px}
  .gloss-az a{padding:8px 11px}
  input,select,textarea{font-size:16px;min-height:42px}   /* 16px stops iOS zooming in */
  .searchwrap input{min-height:40px}
}

/* ============================================================
   PHONE HEADER BEHAVIOUR
   Two rows at the top of the page so the search is full width and
   easy to hit; once the reader scrolls, it compacts to a single
   sticky row so navigation and search stay reachable a hundred
   rows down a table.
   ============================================================ */
@media (max-width:700px){
  .masthead{position:sticky;top:0;z-index:70}
  .masthead.shrunk .mast-in{min-height:0;padding-top:6px;padding-bottom:6px}
  .masthead.shrunk .brand{flex:0 1 auto;max-width:34%;margin-right:8px}
  .masthead.shrunk .brand a{font-size:14.5px}
  .masthead.shrunk .searchwrap{order:2;flex:1 1 auto;margin-top:0}
  .masthead.shrunk .searchwrap input{padding:7px 10px 7px 26px}
  .masthead.shrunk .searchwrap .mag{left:8px}
  .masthead.shrunk .savebtn,.masthead.shrunk .mast-in .iconbtn{order:3}
  .favstar{display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;min-width:26px;padding:0 6px 0 0;vertical-align:middle}
}

/* One heat map per breakpoint: the coarse one is readable on a phone, the dense
   one needs a screen. Both are server-rendered; CSS only chooses. */
.heat-phone{display:none}
@media (max-width:700px){
  .heat-full{display:none}
  .heat-phone{display:block;padding-top:132%}
  .heat-phone.heat-sm{padding-top:112%}
  .heat-phone .heat-tile b{font-size:12px}
  .heat-phone .heat-tile span{font-size:10.5px}
  .heat-phone .heat-tile.t-lg b{font-size:16px}
  .heat-phone .heat-tile.t-lg span{font-size:12px}
  .heat-phone .heat-tile.t-xs b{font-size:10px}
  .heat-phone .heat-tile.t-xs span{display:none}
  .heat-band{font-size:9px;letter-spacing:.05em}
}
.heat-phone-note{display:none}
@media (max-width:700px){
  .heat-phone-note{display:block;margin:8px 0 2px}
  .heat-phone{padding-top:118%}
  .heat-phone.heat-sm{padding-top:96%}
  .heat-phone .heat-tile b{font-size:13px}
  .heat-phone .heat-tile span{font-size:11px}
  .heat-phone .heat-tile.t-xs b{font-size:11px}
  .heat-phone .heat-tile.t-xs span{display:block;font-size:9.5px}
}

/* Phone tiles are small, so the label has to scale with the tile rather than sit
   at one size and get cut to a single letter. */
@media (max-width:700px){
  .heat-phone .heat-tile{padding:1px 2px}
  .heat-phone .heat-tile b{font-size:11.5px;letter-spacing:-0.02em}
  .heat-phone .heat-tile span{font-size:10px}
  .heat-phone .heat-tile.t-md b{font-size:13px}
  .heat-phone .heat-tile.t-lg b{font-size:19px}
  .heat-phone .heat-tile.t-lg span{font-size:13px}
  .heat-phone .heat-tile.t-xs b{font-size:9.5px;letter-spacing:-0.04em}
  .heat-phone .heat-tile.t-xs span{font-size:8.5px;display:block}
}

/* In the compacted state everything sits on one row, so the wordmark must stop
   absorbing the free space that the search field needs. */
@media (max-width:700px){
  .masthead.shrunk .brand{margin-right:8px;flex:0 1 auto;min-width:0}
  .masthead.shrunk .searchwrap{order:2;flex:1 1 auto;margin-top:0;min-width:90px}
  .masthead.shrunk .mast-in{flex-wrap:nowrap}
  .masthead.shrunk .savebtn,.masthead.shrunk .mast-in .iconbtn{order:3;flex:0 0 auto}
  .masthead{transition:none}
}

/* The search icon only exists in the compacted phone header. */
.searchbtn{display:none}
@media (max-width:700px){
  .masthead.shrunk .searchbtn{display:inline-flex;order:2}
  .masthead.shrunk .brand{flex:1 1 auto;margin-right:6px;min-width:0}
  .masthead.shrunk .brand a{font-size:15px}
  .masthead.shrunk .searchwrap{display:none}
  .masthead.shrunk.searching .searchwrap{display:block;order:5;flex:1 0 100%;margin-top:6px}
  .masthead.shrunk.searching .mast-in{flex-wrap:wrap;padding-bottom:8px}
  .masthead.shrunk .savebtn,.masthead.shrunk .mast-in .iconbtn{order:3}
  .masthead.shrunk .searchbtn{order:2}
  .masthead.shrunk .mast-in{flex-wrap:nowrap}
}

/* An earlier max-width was still capping the compacted wordmark at 34% of the
   viewport while 48px of the row sat unused. */
@media (max-width:700px){
  .masthead.shrunk .brand{max-width:none;flex:1 1 auto;min-width:0;margin-right:6px}
  .masthead.shrunk .brand a{font-size:14.5px;letter-spacing:-0.035em}
  .masthead.shrunk .mast-in{gap:6px}
}

/* ============================================================
   PHONE: the top of the page earns its space
   The coverage counts and the market KPIs are context, not the
   point. On a phone both collapse to a running line of small
   text — value first, short label after — so the asset table
   arrives within the first screen instead of the second.
   ============================================================ */
.lab-short,.d-short{display:none}

@media (max-width:700px){
  /* .kpi .d and .trust .lab are two-part selectors, so a bare .d-long loses to them
     on specificity no matter where it sits in the file */
  .lab-long,.d-long,.kpi .d-long,.kpi .lab-long,.trust .lab-long,.trust .d-long{display:none}
  .lab-short,.kpi .lab-short,.trust .lab-short{display:inline}

  .trust,.kpis{display:block;padding:6px 0 7px;margin:0 0 12px;line-height:1.85;
    border-top:1px solid var(--ink);border-bottom:1px solid var(--rule-2)}
  .trust div,.kpi{display:inline;flex:none;border:0;padding:0;min-width:0}
  .trust div::after,.kpi::after{content:' · ';white-space:pre;color:var(--rule-3)}
  .trust,.kpis{overflow-wrap:anywhere}
  .trust div:last-child::after,.kpi:last-child::after{content:''}
  .trust .v,.kpi .v{display:inline;font-size:12px;font-weight:600;line-height:inherit}
  .trust .lab-short,.kpi .lab-short{display:inline;font-size:10px;margin:0 0 0 4px;
    letter-spacing:.04em;color:var(--muted)}
  .kpi a{display:inline}
  .kpi .d-short{display:inline;font-size:10.5px;margin-left:4px;color:var(--muted)}

  /* provenance under a one-line KPI run is reference, not headline */
  .kpis + .figmeta{margin:-6px 0 10px}
  .kpis + .figmeta .tagmeta{font-size:9px;padding:1px 6px}
  .kpis + .figmeta .asof{font-size:9.5px}
  .hero{margin-bottom:14px}
}

/* the photography switch, in the panel and in the footer */
.oc-row.imgswitch{align-items:center}
.f-imgset{display:inline-flex;gap:5px;align-items:center}
.f-imgset a{text-decoration:underline;text-underline-offset:2px}
.f-imgset a.cur{color:var(--ink);font-weight:600;text-decoration:none}