/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* ============================================================
   portfolio — skin for the public equity-portfolio dashboard.
   Loaded after app/theme.css (which defines --t-*). Four colours on cream:
     the series are brand.css's DATA SERIES, the same in every chart on the site:
     every series solid, told apart by colour: the fund øresund (the heaviest, bars either side
     of zero) · S&P 500 terracotta · MSCI World slate. No Nasdaq-100 (removed from the data).
     Words and figures are navy with their sign.
   One light theme: the app's dark rules cannot win against :root:root:root.
   Shapes and type follow the COMPONENTS block in brand.css: tabs, segments and
   buttons are pills (44, or 36 inside a segmented group), the period rows are
   choices (radius 12), labels 700 12px at .1em, panels 20px with a 1px edge,
   one framed panel per screen, headings in the three sizes only.
============================================================ */

/* ---------- 1. variable map (once) ---------- */
:root:root:root{
  --font:var(--t-sans);
  --mono:var(--t-mono);
  --bg:var(--t-bg);
  --panel:var(--t-surface);
  --inset:var(--t-sunken);
  --ink:var(--t-ink);
  --ink2:var(--t-ink-2);
  --ink3:var(--t-ink-2);             /* nothing lighter than soft ink: 5.4:1 */
  --line:var(--t-line);
  --line2:var(--t-line-2);
  --accent:var(--t-petrol);
  --accent-soft:var(--t-petrol-soft);
  --pos:var(--t-petrol);
  --neg:var(--t-burgundy);
  --pos-fill:var(--t-petrol);
  --neg-fill:var(--t-burgundy);
  --warn:var(--t-burgundy);
  --cn:var(--t-ink-2);
  --fund:var(--rr-fund);             /* the series, as everywhere on the site (brand.css DATA SERIES) */
  --spx:var(--rr-spx);
  --msci:var(--rr-msci);
  --c1:var(--t-ink);--c2:var(--t-petrol);--c3:var(--t-burgundy);--c4:var(--t-ink-2);
  --c5:var(--t-ink);--c6:var(--t-petrol);--c7:var(--t-burgundy);--c8:var(--t-ink-2);
  --gold:var(--t-burgundy);
  --radius:var(--rr-radius);
  color-scheme:light;
  --lab:var(--rr-label-font);   /* the small uppercase label */
}
html,body{background:var(--t-bg);color:var(--t-ink)}
body{font:15px/1.5 var(--t-sans);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
a{color:var(--t-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--t-ink)}
.pos{color:var(--t-ink)}.neg{color:var(--t-ink)}
.pos,.neg{font-weight:500}
.muted{color:var(--t-ink-2)}
.small{font-size:13px}
button{font-family:var(--t-sans)}

/* ---------- 2. small uppercase labels: Bricolage 600, 12px, soft ink ---------- */
.bar .lbl,.ctrls .lbl,.kicker,.eyebrow,.kpi .k,.stat .k,.panel>h3,.panel h3,.ph h3,th,
.pb.pb-h,.pb.pb-h .pv,.pb.pb-h .pi,.book-h,.pub-h,.pub-s,.facts dt,.pcell .k,.cons-top .k,
.mchips b,.edge .who,.inbook .k,.trades h4,.foot h4,.note-block h4,.pd-side h4,.case .ch,
dl.mandate dt,.edge dt,.lesson .k,.kill .k,.axis2 .ax-x,.axis2 .ax-y,.cons .rt,.lede p.kicker{
  font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase}
.kicker,.kpi .k,th,.pb.pb-h,.pub-h,.book-h,.panel>h3,.panel h3,.ph h3,.pub-s{color:var(--t-ink-2)}
.panel>h3,.panel h3{margin-bottom:6px}
/* the subscription box's title is a panel heading, not a label */

/* ---------- 3. header: the hero number, then the period, then the facts ---------- */
.app{max-width:1240px}
.top{padding-block:34px 20px;align-items:flex-end}
/* the dashboard's name is a heading in the section size: the hero number below is the statement */
.brand h1{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}
#mh-strategy{font:400 1.25rem/1.2 var(--t-serif);letter-spacing:-.01em;color:var(--t-ink);margin-top:4px}
.brand .aum{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 16px;font:500 clamp(4rem,13vw,7.5rem)/.95 var(--t-sans);letter-spacing:-.05em;margin-top:20px;color:var(--t-ink)}
.brand .aum>span{line-height:1}
.aum-k,.brand .aum small{font:500 clamp(1.1rem,2.4vw,1.5rem)/1.1 var(--t-sans);letter-spacing:-.02em;color:var(--t-ink);margin:0}
.brand .aum-sub{font:var(--rr-reading);letter-spacing:0;color:var(--t-ink-2);margin-top:12px}
.brand .aum-sub .pos,.brand .aum-sub .neg{font-weight:500}
.status{font:400 15px/1.3 var(--t-read);color:var(--t-ink-2);letter-spacing:0}
.status .dot{background:var(--t-ink-2)}
.status[data-mode="live"] .dot{background:var(--t-petrol)}
.status[data-mode="loading"] .dot{background:var(--t-ink)}
.status[data-mode="error"] .dot{background:var(--t-burgundy)}
/* refresh: a secondary control, small (it sits in the status line) */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--rr-control-sm);padding:0 16px;border:var(--rr-hair);background:var(--t-surface);color:var(--t-ink);border-radius:var(--rr-pill);font:var(--rr-control-font-sm);letter-spacing:0;text-transform:none}
.btn:hover{background:var(--t-surface);border-color:var(--t-ink)}
.btn[hidden]{display:none}   /* the public build keeps it hidden: nothing to refresh */

/* ---------- 4. tabs, segmented controls, chips: pills ---------- */
.bar{background:var(--t-bg);backdrop-filter:none;border-bottom:2px solid var(--t-ink);padding-block:10px}
/* tabs: full-size pills; the others secondary (surface, edge), the open one selected (petrol) */
.tabs{gap:8px;align-items:center}
.tabs button{display:inline-flex;align-items:center;justify-content:center;height:var(--rr-control);padding:0 20px;font:var(--rr-control-font);letter-spacing:0;text-transform:none;color:var(--t-ink);background:none;border:1px solid transparent;border-radius:var(--rr-pill);white-space:nowrap}
/* tabs are quiet until selected, as in every lab: a sunken fill on hover, petrol when chosen */
.tabs button:hover{background:var(--t-sunken);color:var(--t-ink)}
.tabs button[aria-selected="true"],.tabs button[aria-selected="true"]:hover{background:var(--t-select);color:var(--t-cream);border-color:var(--t-select)}
/* segmented groups: a pill of small (36) pills; the track is as tall as a full control.
   Scoped to the groups, so the range bar's own <i class="seg"> is left alone */
.seg[role="group"]{border:var(--rr-hair);border-radius:calc(var(--rr-control-sm) / 2 + 4px);background:var(--t-surface);padding:3px;gap:2px;overflow:visible}
.bar .seg[role="group"]{overflow-x:auto}
.seg[role="group"] button{display:inline-flex;align-items:center;justify-content:center;height:var(--rr-control-sm);min-height:0;padding:0 14px;font:var(--rr-control-font-sm);letter-spacing:0;text-transform:none;color:var(--t-ink);border:0;border-radius:var(--rr-pill);background:transparent;white-space:nowrap}
.seg[role="group"] button:hover{background:var(--t-sunken);color:var(--t-ink)}
.seg[role="group"] button[aria-pressed="true"],.seg[role="group"] button[aria-pressed="true"]:hover{background:var(--t-select);color:var(--t-cream)}
.ichips button,.chips button,.chip{display:inline-flex;align-items:center;justify-content:center;height:var(--rr-control-sm);padding:0 14px;border:var(--rr-hair);border-radius:var(--rr-pill);background:var(--t-surface);color:var(--t-ink);font:var(--rr-control-font-sm);letter-spacing:0;text-transform:none}
.ichips button:hover,.chips button:hover{background:var(--t-surface);border-color:var(--t-ink)}
.chips button[aria-pressed="true"],.ichips button[aria-pressed="true"]{background:var(--t-select);color:var(--t-cream);border-color:var(--t-select)}
.ichips button[aria-pressed="false"]{opacity:1;color:var(--t-ink-2)}
/* "view as table": a quiet control, a link that acts */
.tablink{font:var(--rr-control-font-sm);color:var(--t-ink);background:none;border:0;border-radius:0;padding:4px 0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tablink:hover{background:none;color:var(--t-ink)}
.ctrls{gap:10px 16px;margin-bottom:14px}
.ctrls .lbl{color:var(--t-ink-2)}

/* ---------- 5. section headings and prose ---------- */
.tabpage{padding-top:30px}
.lede{margin-bottom:20px}
/* each tab opens with its statement: the h1 size */
.lede h2{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls);max-width:26ch;text-wrap:balance}
.lede p.kicker,.kicker{margin:0 0 10px;color:var(--t-ink)}
.lede p:not(.kicker),.panel .sub,.panel>.sub,.prose,.callout,.tagline,.note-block p,.pd p{font:var(--rr-reading);letter-spacing:0;color:var(--t-ink)}
.lede p:not(.kicker){max-width:60ch;margin-top:10px;color:var(--t-ink-2)}
.panel .sub,.panel>.sub{max-width:72ch;margin-bottom:14px;color:var(--t-ink-2)}
.foot-n{font:400 15px/1.5 var(--t-read);letter-spacing:0;color:var(--t-ink-2)}
.foot{border-top:2px solid var(--t-ink);margin-top:56px;padding-top:22px;font-family:var(--t-read);color:var(--t-ink-2)}
.foot p{font:var(--rr-reading);letter-spacing:0;color:var(--t-ink-2);max-width:90ch;margin:0 0 12px}
.foot p b{font-family:var(--t-sans);font-weight:500;color:var(--t-ink);letter-spacing:-.01em}
/* secondary lines under the chart and beside the big number */
.row-between .muted.small{font:400 15px/1.45 var(--t-read);letter-spacing:0}

/* ---------- 6. cards: surface, bordered, rounded, flat ---------- */
.panel,.kpi{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);box-shadow:none}
.panel{padding:22px 24px}
.panel.flat{padding:0}
.kpis4{gap:16px}
.kpi{padding:20px 22px}
.kpi:first-child{border:var(--rr-frame)}   /* the one panel that matters most on the tab */
.kpi .v{font:500 clamp(2.2rem,4vw,3.1rem)/1 var(--t-sans);letter-spacing:-.05em;margin-top:10px;color:var(--t-ink)}
.kpi .v small{font:500 15px var(--t-sans);letter-spacing:0;color:var(--t-ink-2);margin-left:6px}
.kpi .v .muted{font-size:.55em;font-weight:500;letter-spacing:-.02em}
.kpi .n{font:var(--rr-reading);letter-spacing:0;color:var(--t-ink-2);margin-top:10px}
.kpi .n b,.kpi .n .pos,.kpi .n .neg{font-weight:500}
/* tags: small pills of status or kind */
.tag,.badge{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border-radius:var(--rr-pill);font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;box-sizing:border-box}
.tag{border:var(--rr-hair);background:transparent;color:var(--t-ink)}
.badge{background:var(--t-petrol-soft);color:var(--t-ink)}

/* ---------- 7. the performance panel: headline, legend with line samples ---------- */
.headline{gap:8px 22px;margin:6px 0 10px;align-items:center}
.big2{font:500 clamp(2.4rem,5vw,3.4rem)/1 var(--t-sans);letter-spacing:-.05em}
.headline>.muted{font:var(--rr-reading);color:var(--t-ink-2);letter-spacing:0}
.idxv{font:500 15px var(--t-sans);color:var(--t-ink);letter-spacing:-.01em;gap:8px}
/* line samples: the same stroke as the chart */
.sw.line{height:0!important;width:30px;background:none!important;border:0;border-top:2px solid var(--t-ink);border-radius:0}
.sw.line[style*="--fund"]{border-top:3px solid var(--rr-fund)}
.sw.line[style*="--spx"]{border-top:2px solid var(--rr-spx)}
.sw.line[style*="--msci"]{border-top:2px solid var(--rr-msci)}
.sw.line[style*="--ink3"]{border-top:2px dashed var(--t-ink-2)}
.legend{gap:8px 22px;font:500 14.5px var(--t-sans);color:var(--t-ink);margin:12px 0 0}
.legend .muted{font:400 15px/1.4 var(--t-read);color:var(--t-ink-2)}
/* bar swatches: every series a solid square in its colour */
.sw{width:16px;height:12px;border-radius:0}
.sw[style*="--fund"]:not(.line){background:var(--rr-fund)!important}
.sw[style*="--spx"]:not(.line){background:var(--rr-spx)!important;border:0}
.sw[style*="--msci"]:not(.line){background:var(--rr-msci)!important;border:0}

/* ---------- 8. "every period at a glance": rows with bars and signed numbers ---------- */
table,.num,.pb .pv,.pb .pi,.pub-r .n,.kpi .v,.stat .v,.aum,.pb .pl{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* each row is a choice (a button of more than one line): radius 12; the hairline between rows is
   painted, so it stays straight under the rounded corners */
.pbars{margin-inline:-8px}
.pb{border:0;border-radius:var(--rr-radius-sm);min-height:56px;font-family:var(--t-sans);color:var(--t-ink);padding:12px 8px;gap:14px;background:linear-gradient(var(--t-line),var(--t-line)) left bottom/100% 1px no-repeat}
.pb:last-child{background-image:none}
.pb:hover{background-color:var(--t-sunken)}
.pb.on,.pb.on:hover{background:var(--t-sunken)}
.pb.pb-h{min-height:0;border-radius:0;border-bottom:2px solid var(--t-ink);padding-block:6px 8px;background:none}
.pb.pb-h:hover{background:none}
.pb{grid-template-columns:minmax(84px,120px) minmax(0,1fr) 96px repeat(var(--ni,1),96px)}
/* the column heads: labels that wrap by word, right-aligned over their numbers; a word longer than its
   column reaches left, into empty space, never right into the next head */
.pb.pb-h .pv,.pb.pb-h .pi{display:flex;justify-content:flex-end;align-items:flex-end;white-space:normal;text-align:right;font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);color:var(--t-ink-2);text-transform:uppercase}
.pb .pl{font:500 16px var(--t-sans);letter-spacing:-.015em;color:var(--t-ink)}
.pb .pv{font:500 19px var(--t-sans);letter-spacing:-.03em}
.pb .pi{font:500 15.5px/1.3 var(--t-sans);color:var(--t-ink)}
.pb .pi small{font:500 13.5px var(--t-sans);letter-spacing:0}
.pb.on .pi small:not(.pos):not(.neg){color:var(--t-ink)}
/* the fund bar: solid øresund either side of zero, thick; the indices: thinner, solid in their colour */
.pb .pt .z{width:2px;margin-left:-1px;background:var(--t-ink);opacity:.75}
.pb .pt .b{height:7px;border-radius:0;box-sizing:border-box}
.pb .pt .you,.pb .pt .you[style*="right:50%"]{height:10px;border-radius:0;background:var(--rr-fund);box-shadow:none}
.pb .pt .idx{opacity:1}
.pb .pt .idx[style*="--spx"]{background:var(--rr-spx)!important;border:0}
.pb .pt .idx[style*="--msci"]{background:var(--rr-msci)!important;border:0}

/* ---------- 9. tables: tabular figures, roomy rows, hairlines ---------- */
th,td{font-family:var(--t-sans);font-size:15px;padding:12px 12px;border-bottom:1px solid var(--t-line);color:var(--t-ink)}
th{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2);border-bottom:2px solid var(--t-ink);white-space:nowrap}
td{font-weight:500}
tbody tr:hover,.pos-row:hover{background:var(--t-sunken)}
.tbl-wrap tbody tr.sel,.scoreboard td.sel,.scoreboard th.sel,table.cmp tr.sel td,table.ret tr.sel td,.posn.open .pos-row{background:var(--t-sunken)}
tfoot td{background:var(--t-sunken);border-top:2px solid var(--t-ink)}
.table-twin,.chart table{max-height:420px}

/* ---------- 10. the public book: pick rows ---------- */
.pub-wrap{gap:18px}
.pub-h,.pub-r{padding-inline:24px;grid-template-columns:minmax(150px,1.5fr) minmax(120px,1.3fr) 116px 76px 84px 90px}
.pub-h span:nth-child(n+4){text-align:right}
.pub-h{border-bottom:2px solid var(--t-ink);padding-block:14px 10px}
.pub-r{border-bottom:1px solid var(--t-line);font:500 15px/1.3 var(--t-sans);letter-spacing:-.005em;padding-block:14px;color:var(--t-ink)}
.pub-r:hover{background:var(--t-sunken)}
.pub-r:last-of-type{border-bottom:0}
.pub-r .nm b{font:500 19px var(--t-sans);letter-spacing:-.035em}
.pub-r .tk{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);color:var(--t-ink-2)}
.pub-r .n{font-weight:500;font-size:16px}
.pub-r .n b{font-weight:500}
.pub-r .muted{font-weight:500;color:var(--t-ink-2)}
.book-f{padding:14px 24px 18px;border-top:1px solid var(--t-line)}
.panel.flat .foot-n{font-size:14px}

/* 12-month range: bear = burgundy diamond, bull = petrol circle, weighted outcome = ink tick; each carries its signed label */
/* the 12-month range: the bear, weighted and bull cases as three tags on a line — bear burgundy,
   bull petrol, the weighted outcome ink — each a 26px tag like every other tag on the site */
.rng{height:var(--rr-tag)}
.rng .seg{top:calc(var(--rr-tag) / 2 - 1px);height:2px;background:var(--t-ink-2);border:0;border-radius:0}
.rng .ball{text-transform:uppercase;font-style:normal;height:var(--rr-tag);min-width:40px;padding:0 5px;border-radius:var(--rr-pill);font:var(--rr-tag-font);letter-spacing:0;background:var(--t-surface);border:1px solid currentColor}
.rng .ball.bear{color:var(--t-ink)}
.rng .ball.bull{color:var(--t-ink)}
.rng .ball.mid{color:var(--t-ink);background:var(--t-sunken)}
.rp{height:40px}
.rp .t,.legend .tick{background:var(--t-ink);width:4px;margin-left:-2px;border-radius:0;top:2px;height:14px}
.rp .d{width:12px;height:12px;margin-left:-6px;top:2px;box-sizing:border-box;border:2px solid var(--t-ink)}
.rp .d.bull{background:var(--t-petrol);border-radius:0}
.rp .d.bear{background:var(--t-burgundy);border-radius:0;width:10px;height:10px;margin-left:-5px;top:3px;transform:rotate(45deg)}
.legend .dot.neg-bg{background:var(--t-burgundy)}
.legend .dot.pos-bg{background:var(--t-petrol)}

/* ---------- 11. charts ---------- */
.chart text{font:500 12.5px var(--t-sans);fill:var(--t-ink-2);font-variant-numeric:tabular-nums}
.chart text[style*="--ink2"]{fill:var(--t-ink)!important;font-weight:500}
.chart .gl{stroke:var(--t-line);stroke-width:1}
.chart .base{stroke:var(--t-ink);stroke-width:1.5;opacity:.8}
.chart .xh{stroke:var(--t-ink);stroke-width:1.5;opacity:.9}
/* the fund: the hero line, øresund, solid, heaviest; its area a tint of it */
.chart svg path[stroke="var(--fund)"]{stroke:var(--rr-fund);stroke-width:3;stroke-dasharray:none}
.chart svg path[fill="var(--fund)"]{fill:var(--rr-fund)}
.chart svg path[fill="var(--fund)"][opacity="0.08"]{opacity:.12}     /* performance area: a tint under the line */
.chart svg path[fill="var(--fund)"][opacity="0.11"]{opacity:.1}      /* outlook fan, 9 in 10 */
.chart svg path[fill="var(--fund)"][opacity="0.2"]{opacity:.18}      /* outlook fan, middle half */
/* the indices: solid, in their colour, the same in every chart (their median in the outlook too) */
.chart svg path[stroke="var(--spx)"]{stroke:var(--rr-spx);stroke-width:2;stroke-dasharray:none}
.chart svg path[stroke="var(--msci)"]{stroke:var(--rr-msci);stroke-width:1.5;stroke-dasharray:none}
.chart svg path[stroke="var(--ink3)"]{stroke:var(--t-ink-2);stroke-width:1.75;stroke-dasharray:10 3 2 3}   /* money in */
.chart svg circle[fill="var(--fund)"]{fill:var(--rr-fund)}
.chart svg circle[fill="var(--spx)"]{fill:var(--rr-spx)}
.chart svg circle[fill="var(--msci)"]{fill:var(--rr-msci)}
.chart svg circle{stroke:var(--t-surface);stroke-width:2.5;r:5px}
.chart svg circle[id^="xd"]{r:6.5px}   /* the dots that follow the pointer */
.chart svg rect[fill="var(--accent-soft)"]{fill:var(--t-petrol-soft)}
.chart svg line[stroke="var(--ink3)"]{stroke:var(--t-ink-2);stroke-width:1.5}
.chart table{font-size:14px}

/* tooltip: ink on surface, a 2px ink border */
#tip{background:var(--t-surface);color:var(--t-ink);border:var(--rr-frame);border-radius:var(--rr-radius-sm);box-shadow:none;padding:12px 14px;font:500 14px/1.35 var(--t-sans);max-width:320px}
#tip:not(.on){visibility:hidden}   /* faded out is gone: no stale figures left for a reader to find */
#tip .th{font:500 13px var(--t-sans);letter-spacing:.02em;text-transform:none;color:var(--t-ink-2);margin-bottom:6px}
#tip .tr{gap:18px;margin-top:4px}
#tip .tr b{font:500 15px var(--t-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--t-ink)}
#tip .tr span{color:var(--t-ink);font-weight:500}

/* ---------- 12. subscribe: the call to action ---------- */
.pub-side{border:var(--rr-frame);border-radius:var(--rr-radius);padding:24px}   /* the one framed panel on this tab */
/* subscribe: the primary control, full width */
.pub-cta{display:flex;align-items:center;justify-content:center;height:var(--rr-control);box-sizing:border-box;background:var(--t-action);color:var(--t-cream);border:1px solid var(--t-action);border-radius:var(--rr-pill);font:var(--rr-control-font);letter-spacing:0;text-transform:none;padding:0 20px;margin-top:6px}
.pub-cta:hover{background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover);filter:none}
.pub-sec{font:500 14px var(--t-sans);gap:14px}
.pub-s{margin-top:0}
.pub-side .pub-cta{margin-top:22px}
/* each sector: name and share on one line, a bar (width = share) under it on a faint track */
.pub-sec div{color:var(--t-ink);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "i i";gap:4px 12px;background:linear-gradient(var(--t-line),var(--t-line)) left bottom/100% 8px no-repeat}
.pub-sec div>span{grid-area:n}
.pub-sec div>b{grid-area:v}
.pub-sec i{grid-area:i;background:var(--rr-fund);height:8px;border-radius:0}
.pub-sec b{font-weight:500}

/* ---------- 13. components of the owner's private build (rendered from the same variables) ---------- */
.callout,.mchips span,.pcell{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
.axis2 .q{border-radius:var(--rr-radius-sm)}
.axis2 .q.good{background:var(--t-petrol-soft);color:var(--t-ink)}
.axis2 .q.bad{background:var(--t-burgundy-soft);color:var(--t-ink)}
.case.bull,.cases .case.bull{border-color:var(--t-petrol);border-width:3px}
.case.bear,.cases .case.bear{border-color:var(--t-burgundy);border-width:3px}
.cons .rt.pos{background:var(--t-petrol-soft);color:var(--t-ink);border-color:var(--t-petrol)}
.cons .rt.neg{background:var(--t-burgundy-soft);color:var(--t-ink);border-color:var(--t-burgundy)}
.kill{background:var(--t-surface);border:var(--rr-hair);border-left:5px solid var(--t-burgundy);border-radius:var(--rr-radius-sm)}
.kill em{color:var(--t-ink);border-color:var(--t-burgundy);border-radius:0}
.dv .l i,.mvb i.n,.wf-row .t i.n,.sdot.neg,.li.st .sb i,.tgt .bearline{background:var(--t-burgundy)}
.dv .r i,.mvb i.p,.wf-row .t i.p,.sdot.pos{background:var(--t-petrol)}
.dv .mid{border-left:2px solid var(--t-ink)}
.wf-row.end .t i,.tgt .mk.now{background:var(--t-ink)}
.hm div{color:var(--t-ink)}
ol.flow li::before{background:var(--t-petrol-soft);color:var(--t-ink);border:1.5px solid var(--t-petrol)}
.jump b,.bh .bn{background:var(--t-ink);color:var(--t-cream);font-family:var(--t-sans)}
details.fold summary{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls);color:var(--t-ink)}
.chev{border-color:var(--t-ink)}
.pos-d{background:var(--t-petrol-soft)}
.stats,.kpis{border-top:2px solid var(--t-ink)}
.stat .v{font:500 1.4rem var(--t-sans);letter-spacing:-.04em}
section.block+section.block{border-top:2px solid var(--t-ink)}
.empty{font:var(--rr-reading);color:var(--t-ink-2)}
.rng-m{font-family:var(--t-read)!important;font-size:15px!important}

/* ---------- 14. small screens ---------- */
@media (max-width:860px){
  .pub-h,.pub-r{grid-template-columns:minmax(0,1.4fr) 58px 70px 76px;padding-inline:12px;gap:8px}
  .pub-r{font-size:14px}
  .pub-r .nm{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  .pub-r .n{font-size:15px}
  .pub-r .nm b{font-size:17px}
  /* the column heads stay labels; a long one may reach left into the gap, never right past its numbers */
  .pub-h span:nth-child(n+4){display:flex;justify-content:flex-end;text-align:right}
}
@media (max-width:640px){
  .app{padding-inline:16px}
  .top{padding-block:24px 14px}
  .brand .aum{font-size:clamp(4rem,23vw,5.6rem)}
  .brand .aum-sub{font-size:15.5px}
  .panel{padding:18px 16px}
  .kpi{padding:16px 16px}
  .kpis4{gap:12px}
  .kpi .v{font-size:2.1rem}
  .kpi .v small{display:block;margin:2px 0 0}
  .kpi .n{font-size:1rem;line-height:1.4}
  .tabs{gap:6px}
  .tabs button{padding:0 16px}
  .seg[role="group"] button{padding:0 12px}
  .ctrls{gap:10px}
  .headline{gap:6px 14px}
  .idxv{font-size:14px}
  /* the glance table: bars give way to the numbers */
  /* the rows reach a little into the panel's padding, so the four number columns can hold their heads */
  .pbars{margin-inline:-12px}
  .pb{grid-template-columns:minmax(0,1fr) 58px repeat(var(--ni,1),66px);gap:4px;padding-inline:6px}
  .pb .pl{font-size:14px;white-space:normal}
  .pb .pv{font-size:15px}
  .pb .pi{font-size:13.5px}
  .pb .pi small{font-size:12.5px}
  .pub-side{padding:20px}
  .foot p{font-size:15px}
  th,td{padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- v3 (brand kit, October 2026): every figure in Plex Mono, tabular ---------- */
.num,.pb .pv,.pb .pi,.pub-r .n,#tip .tr b,td.n,td.num{font-family:var(--t-mono);font-weight:500}
/* display figures (the cards, the headline, the hero) are Space Grotesk, tabular, like every large figure on the site */
.kpi .v,.stat .v,.big2,.brand .aum{font-family:var(--t-sans);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* at display size Plex Mono's full-width stop opens a gap ("+29 . 4%"): the hero figure is Space Grotesk, tabular */
.brand .aum{font-family:var(--t-sans);font-weight:500;letter-spacing:-.045em}
.chart text{font:400 12px var(--t-mono)!important;fill:var(--t-ink-2)}
/* the outlook's figures and signs: 500, the heaviest weight served */
:root:root:root .vd,:root:root:root .sg{font-weight:500}
/* small figures beside a bar (sector weights, the Outlook comparisons) are table numbers: Plex Mono, like every other */
:root:root:root .pub-sec b,:root:root:root .dr b{font-family:var(--rr-mono);font-weight:500;font-variant-numeric:tabular-nums}