/* Tokens from DESIGN.md (Dell 1996 inspired). Light-only: the source system has no dark
   palette — a 1996 catalog page had one polarity and the adaptation section adds none.
   No webfonts: Arial Black / Helvetica / Times New Roman ship on every modern OS. */
:root {
  --primary: #e91d2a;          /* reserved: the red CTA panel and the banner callout only */
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --ink: #000000;
  --frame-ink: #000000;
  --yellow-sticker: #fcc20f;
  --purple-stripe: #6a26a4;
  --link: #0000ee;

  /* the eight catalog tints — the page's whole chromatic vocabulary */
  --tint-olive: #8e8a25;
  --tint-sage: #b3bd95;
  --tint-salmon: #d77a7a;
  --tint-peach: #e6915d;
  --tint-lime: #c0d4a7;
  --tint-sky: #9ab6c8;
  --tint-steel: #a5b8c0;
  --tint-periwinkle: #8c9ae0;

  --s-xxs: 2px; --s-xs: 4px; --s-s: 6px; --s-sm: 8px; --s-m: 10px; --s-md: 12px;
  --s-lg: 16px; --s-xl: 20px; --s-xxl: 24px; --s-sec-sm: 32px; --s-sec: 40px;

  --sans: Helvetica, Arial, "Liberation Sans", sans-serif;
  --display: "Arial Black", "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* The phone breakpoint re-declares display on every table element, which would otherwise
   beat the UA stylesheet and un-hide filtered-out rows. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--canvas); }

/* ---------- the page frame: one centred box in an 8px black border on white ---------- */
body {
  margin: 0;
  padding: var(--s-lg);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
}
/* same chrome as the homepage's .page-frame; 1040px is the narrowest the six-column ledger
   holds its layout — below it the fund names start wrapping and every row grows */
.frame {
  max-width: 1040px;
  margin: 0 auto;
  border: var(--s-sm) solid var(--frame-ink);
  background: var(--canvas);
}
.wrap { padding: 0 var(--s-xl); }

/* every figure on the page: sans, tabular, right-aligned */
.num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}
.money { white-space: nowrap; }
.cur { font-size: .85em; margin-left: 3px; }
.dash { font-family: var(--serif); }

a { color: var(--link); }
em { font-style: italic; }

/* ---------- top banner ---------- */
.banner {
  background: var(--frame-ink);
  color: var(--canvas);
  padding: var(--s-md) var(--s-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-lg); flex-wrap: wrap;
}
.banner-title {
  font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.2;
}
.banner-sub {
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.2;
  margin-top: var(--s-xs);
}
.banner-right { display: flex; align-items: center; gap: var(--s-md); }

/* the yellow sticker, bevelled the way a hand-cut GIF was */
.sticker {
  background: var(--yellow-sticker); color: var(--ink);
  border: 1px solid var(--frame-ink);
  box-shadow: 3px 3px 0 var(--canvas);
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  padding: var(--s-xs) var(--s-sm);
  white-space: nowrap;
}
.sticker .stripe {
  background: var(--purple-stripe); color: var(--canvas);
  padding: 1px 3px; margin: 0 1px;
}
/* the 1996 phone callout's slot, carrying the bulletin date instead */
.callout {
  background: var(--frame-ink); color: var(--primary);
  font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1;
  padding: var(--s-xs) var(--s-sm);
  white-space: nowrap;
}

/* ---------- masthead: eyebrow block + the single red panel ---------- */
.masthead {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s-xl);
  /* margin, not padding: .wrap's padding shorthand would zero it */
  margin: var(--s-xl) 0 var(--s-sec-sm);
  align-items: start;
}
.hero { grid-column: 2; grid-row: 1; }
.cta  { grid-column: 1; grid-row: 1; }

.eyebrow-block {
  border: 1px solid var(--frame-ink);
  padding: var(--s-xxl) var(--s-lg);
}
.tint-olive { background: var(--tint-olive); }
.eyebrow-block h1 {
  font-family: var(--display); font-size: 36px; font-weight: 900;
  line-height: 1; margin: 0; color: var(--ink);
}
.lede { margin: var(--s-lg) 0 0; max-width: 64ch; }

.cta {
  background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--frame-ink);
  padding: var(--s-lg);
}
.cta-head {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  margin-bottom: var(--s-sm);
}
.cta p { margin: 0 0 var(--s-md); }
.cta p:last-child { margin-bottom: 0; }

/* ---------- tabs: square catalog buttons ---------- */
.tabs { display: flex; gap: var(--s-s); border-bottom: 1px solid var(--frame-ink); }
.tab {
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--on-primary); background: var(--frame-ink);
  border: 1px solid var(--frame-ink); border-bottom: 0;
  padding: var(--s-m) var(--s-lg);
  margin-bottom: -1px; cursor: pointer;
}
/* the open tab is white and covers the rule beneath it, so it joins the page below */
.tab[aria-selected="true"] { background: var(--canvas); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- headline figures as ribbon cards ----------
   white title bar + 1px rule + tinted body; one fixed tint per slot. */
.totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
  padding: var(--s-xl) 0 var(--s-lg);
}
/* the four holdings tallies sit 4-up; a 3+1 orphan row breaks the catalog grid */
#hTally { grid-template-columns: repeat(4, 1fr); }
/* subgrid lines every card's title bar, figure and stamp up with its neighbours,
   so a two-line title never pushes one tinted body lower than the next */
.total-block {
  border: 1px solid var(--frame-ink);
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
}
.total-block:nth-child(1) { background: var(--tint-sage); }
.total-block:nth-child(2) { background: var(--tint-salmon); }
.total-block:nth-child(3) { background: var(--tint-periwinkle); }
.total-block:nth-child(4) { background: var(--tint-peach); }
#hTally .total-block:nth-child(1) { background: var(--tint-lime); }
#hTally .total-block:nth-child(2) { background: var(--tint-sky); }
#hTally .total-block:nth-child(3) { background: var(--tint-steel); }
#hTally .total-block:nth-child(4) { background: var(--tint-peach); }

.total-block .eyebrow {
  background: var(--canvas); color: var(--ink);
  border-bottom: 1px solid var(--frame-ink);
  font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase;   /* ribbon-card title bars are always all-caps */
  padding: var(--s-s) var(--s-md);
}
.total-value {
  font-family: var(--sans); font-size: 24px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  padding: var(--s-md) var(--s-lg) 0;
  text-align: right;
}
.total-value.pending { font-family: var(--serif); font-weight: 400; }
.asof {
  font-size: 11px; line-height: 1.35; text-align: right;
  padding: var(--s-s) var(--s-lg) var(--s-md);
}
.asof.with-burst {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-sm);
  padding-top: var(--s-m);
}

/* the NEW! burst, re-cut as the pending badge — tilted only on this one instance */
.burst {
  display: inline-block;
  background: var(--yellow-sticker); color: var(--ink);
  border: 1px solid var(--frame-ink);
  box-shadow: 2px 2px 0 var(--frame-ink);
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  padding: var(--s-xs) var(--s-sm);
  transform: rotate(-6deg);
  margin: 0 var(--s-sm) 0 2px;
}

/* ---------- controls ---------- */
.controls {
  display: flex; gap: var(--s-md); align-items: center; flex-wrap: wrap;
  padding-bottom: var(--s-lg);
}
input[type="search"] {
  font-family: var(--serif); font-size: 14px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--frame-ink); border-radius: 0;
  padding: var(--s-s) var(--s-sm); min-width: 260px;
  -webkit-appearance: none; appearance: none;
}
input[type="search"]:focus { outline: 2px solid var(--frame-ink); outline-offset: -1px; }
select {
  font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--frame-ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  padding: var(--s-s) 24px var(--s-s) var(--s-sm);
}
select:focus { outline: 2px solid var(--frame-ink); outline-offset: -1px; }
.count { font-family: var(--sans); font-size: 12px; font-weight: 700; margin-left: auto; }

/* class filter — square buttons, pressed state is the black fill */
.chips { display: flex; gap: var(--s-s); flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--ink); background: var(--canvas);
  border: 1px solid var(--frame-ink); border-radius: 0;
  text-transform: uppercase;
  padding: var(--s-sm) var(--s-md); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--frame-ink); color: var(--on-primary); }
.chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- the ledger ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.2;
  color: var(--ink); text-align: left; background: var(--canvas);
  text-transform: uppercase;
  padding: var(--s-sm) var(--s-md);
  border-bottom: 1px solid var(--frame-ink);
  white-space: nowrap;
}
thead th.r { text-align: right; }
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th .arrow { font-size: 10px; }

tbody tr { border-bottom: 1px solid var(--frame-ink); }
tbody tr.row { cursor: pointer; }
tbody tr.row:hover { background: var(--tint-sage); }
tbody td { padding: var(--s-m) var(--s-md); vertical-align: baseline; }

.code { font-family: var(--sans); font-size: 14px; font-weight: 700; }
.fname {
  display: block; font-size: 13px; margin-top: 2px;
  max-width: 46ch;
  overflow-wrap: anywhere;   /* a stray unbroken token must never widen the page */
}
.founder { font-size: 13px; white-space: nowrap; }
.val { font-size: 14px; }
.unit { font-size: 13px; }
.date { font-family: var(--sans); font-size: 12px; white-space: nowrap; }

/* the pending badge repeated down the column: sticker chrome, no tilt at 47 rows */
.pill {
  display: inline-block; border-radius: 0; text-transform: uppercase;
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  padding: var(--s-xs) var(--s-sm); white-space: nowrap;
  border: 1px solid var(--frame-ink);
}
.pill-pending { background: var(--yellow-sticker); color: var(--ink); }
.pill-liquidating { background: var(--tint-periwinkle); color: var(--ink); }

/* ---------- expanded fund detail: a tinted ribbon body under the row ---------- */
tr.detail > td { padding: 0; }
.detail-inner {
  display: flex; flex-wrap: wrap; gap: var(--s-sec);
  background: var(--tint-lime);
  border: 1px solid var(--frame-ink); border-top: 0;
  padding: var(--s-md) var(--s-lg);
}
.alloc { min-width: 260px; }
.alloc dl { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-lg); margin: var(--s-sm) 0 0; }
.alloc dt { font-size: 13px; }
.alloc dd {
  margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* section labels inside the detail panel and the holdings tallies */
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase;
}
.meta { font-size: 13px; }
.meta div { margin-bottom: var(--s-xs); }

.empty { padding: var(--s-sec) 0; text-align: center; }

/* ---------- holdings: one table per asset class under a tinted eyebrow ---------- */
.hsec { margin-top: var(--s-sec-sm); }
.hsec:first-child { margin-top: var(--s-lg); }
.hhead {
  border: 1px solid var(--frame-ink);
  padding: var(--s-md) var(--s-lg);
  margin-bottom: var(--s-md);
}
.hsec:nth-of-type(1) .hhead { background: var(--tint-lime); }
.hsec:nth-of-type(2) .hhead { background: var(--tint-sky); }
.hsec:nth-of-type(3) .hhead { background: var(--tint-steel); }
.hsec:nth-of-type(4) .hhead { background: var(--tint-peach); }
.hhead h2 {
  margin: 0; display: inline;
  font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.05;
  text-transform: uppercase;
}
.hhead .n { font-family: var(--sans); font-size: 12px; font-weight: 700; margin-left: var(--s-sm); }
.hhead .gloss { display: block; font-size: 13px; margin-top: var(--s-s); max-width: 78ch; }

.hsec tbody tr:hover { background: var(--tint-sage); }
.hsec td { font-size: 13px; vertical-align: top; }
.hsec .name { overflow-wrap: anywhere; }
.alt { display: block; font-size: 12px; margin-top: 3px; }

/* which of the 47 funds hold it — codes, not amounts */
.holders { display: flex; gap: 3px; flex-wrap: wrap; max-width: 34ch; }
.holders span {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  background: var(--canvas); border: 1px solid var(--frame-ink);
  padding: 1px 4px;
}
.kind {
  display: inline-block; font-size: 12px; white-space: nowrap;
  background: var(--tint-sage); color: var(--ink);
  border: 1px solid var(--frame-ink);
  padding: 0 5px; margin: 0 3px 3px 0;
}

/* ---------- footer band ---------- */
footer {
  border-top: 1px solid var(--frame-ink);
  margin-top: var(--s-sec);
  padding: var(--s-lg) 0 var(--s-xxl);
  font-size: 12px;
}
.notes p { margin: 0 0 var(--s-sm); max-width: 78ch; }

.iconnav {
  display: flex; gap: var(--s-xxl); flex-wrap: wrap;
  border-top: 1px solid var(--frame-ink);
  margin-top: var(--s-lg); padding-top: var(--s-lg);
}
.iconnav a {
  display: block; text-align: center; text-decoration: none;
  padding: var(--s-sm) var(--s-xs); min-width: 64px;
}
.iconnav .ico {
  display: block; margin: 0 auto var(--s-s);
  width: 44px; height: 44px; line-height: 42px;
  background: var(--tint-steel); color: var(--ink);
  border: 1px solid var(--frame-ink);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
}
.iconnav .lbl {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--link); text-decoration: underline;
}
.fineprint { margin: var(--s-md) 0 0; font-size: 11px; line-height: 1.35; }

/* ---------- responsive: the frame narrows, nothing else softens ---------- */
@media (max-width: 768px) {
  body { padding: var(--s-sm); }
  .frame { border-width: var(--s-xs); }
}
@media (max-width: 480px) {
  body { padding: 0; }
  .frame { border-width: var(--s-xxs); }
}

@media (max-width: 860px) {
  .totals, #hTally { grid-template-columns: 1fr 1fr; }
  .col-founder, .col-unit { display: none; }
  .fname { max-width: 30ch; }
  .masthead { grid-template-columns: 1fr; }
  .hero, .cta { grid-column: 1; }
  .hero { grid-row: 1; }
  .cta  { grid-row: 2; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 var(--s-md); }
  .banner { padding: var(--s-m) var(--s-md); }
  .banner-title { font-size: 14px; }
  .banner-right { width: 100%; justify-content: flex-start; }
  .eyebrow-block { padding: var(--s-lg) var(--s-md); }
  .eyebrow-block h1 { font-size: 28px; }
  .hhead h2 { font-size: 20px; }

  /* a 6-column ledger cannot fit 375px without horizontal scroll, so each row becomes a
     stacked block with its column header carried inline as a label. */
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr.row { padding: var(--s-md) 0; }
  tbody tr.row td { padding: 0; }
  tbody tr.row td[data-label] {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s-lg); padding-top: var(--s-s);
  }
  tbody tr.row td[data-label]::before {
    content: attr(data-label);
    font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase;
    flex: none;
  }
  .fname { max-width: none; }
  .num { text-align: right; }

  .detail-inner { gap: var(--s-xl); }
  .alloc { min-width: 0; width: 100%; }

  .controls { gap: var(--s-sm); }
  input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .count { margin-left: 0; }

  .tabs { gap: var(--s-xs); }
  .tab { padding: var(--s-sm) var(--s-md); }

  /* four tallies stacked one per row push the list off the first screen */
  .totals { grid-template-columns: 1fr; }
  #hTally { grid-template-columns: 1fr 1fr; gap: var(--s-md); }
  #hTally .total-value { font-size: 20px; padding: var(--s-sm) var(--s-md) 0; }
  #hTally .eyebrow { font-size: 12px; }
  #hTally .asof { padding: var(--s-xs) var(--s-md) var(--s-sm); }

  .hsec tbody tr { padding: var(--s-md) 0; }
  .hsec tbody td { padding: 0; }
  .hsec tbody td[data-label] {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s-lg); padding-top: var(--s-s);
  }
  .hsec tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase;
    flex: none;
  }
  .holders { max-width: none; justify-content: flex-end; }
  /* the 1996 footer nav stays 4-up at every width; the labels shrink instead */
  .iconnav { gap: var(--s-sm); flex-wrap: nowrap; }
  .iconnav a { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
  .iconnav .lbl { font-size: 11px; }
}