/* STRS — Stragedy. One accent color. Measurements carried from the product-page family. */

:root {
  /* Brand */
  --accent:        #DF2C18;
  --accent-hover:  #E63E29;

  /* Surfaces */
  --bg:            #000000;
  --bg-bar:        #0F0F0F;
  --bg-inset:      #121212;   /* barely-there ground behind the reference group */
  --hairline:      #2B2B2B;

  /* Text */
  --text:          #FFFFFF;
  --text-label:    #B8B8B8;
  --text-fine:     #8A8A8A;

  /* Change */
  --up:            #3DD68C;
  --down:          #E3231F;

  /* Type */
  --font: 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* Metrics carried from the reference */
  --container:     1536px;
  --pad-x:         16px;
  --topbar-h:      48px;
  --tab-h:         36px;
  --kpi-title:     16px;
  --kpi-value:     32px;
  --kpi-gap-row:   22px;
  --kpi-gap-col:   100px;
  --stack-gap:     20px;
  --section-pad:   48px;
  --measure:       772px;     /* one reading measure for all article text */
}

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

/* The hidden attribute loses to any author display rule, so restore it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
@media (max-width: 599px) {
  .topnav { gap: 16px; font-size: 13px; }
  .wordmark { font-size: 25px; }
}
@media (min-width: 600px)  { :root { --pad-x: 24px; } }
@media (min-width: 1280px) { :root { --pad-x: 48px; } }

/* Full-bleed row: the horizontal padding moves onto the row's own items so a
   background can run to the viewport edge. */
.container--bleed { padding-inline: 0; }

/* Focus — visible on every interactive element (a11y requirement) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 1. Top bar ---------- */

.topbar {
  background: var(--accent);
  color: #000;
}
.topbar__inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-block;
  text-decoration: none;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}
.wordmark__name { vertical-align: baseline; }

/* Superscript S, where the reference family puts the currency glyph:
   ~1/3 the wordmark size, top-aligned to the cap height of "Stragedy". */
.wordmark__mark {
  display: inline-block;
  width: 0.76em;
  height: 0.76em;
  margin-left: -0.10em;
  vertical-align: baseline;
  transform: translateY(-0.26em);
  color: #000;
  overflow: visible;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Contract address — click to copy. Sits on the accent bar, so it reads black. */
.addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 3px;
  background: transparent;
  color: #000;
  font: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.addr:hover { background: rgba(0,0,0,.09); border-color: rgba(0,0,0,.55); }
.addr__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}
.addr__value { font-size: 13px; font-weight: 600; }
/* Copy glyph: two offset squares. */
.addr__icon {
  position: relative;
  width: 11px; height: 11px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.addr__icon::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px;
  width: 11px; height: 11px;
  border: 1.5px solid currentColor;
  border-right: 0;
  border-bottom: 0;
  border-radius: 2px 0 0 0;
}
.addr__done {
  display: none;
  font-size: 12px;
  font-weight: 700;
}
.addr.is-copied .addr__value,
.addr.is-copied .addr__icon,
.addr.is-copied .addr__label { display: none; }
.addr.is-copied .addr__done { display: inline; }




@media (max-width: 767px) {
  /* The compact bar control does not fit a phone; the full-width contract
     button below the KPIs takes over there. */
  .topbar__inner > .topnav > .addr { display: none; }
}

/* ---------- 2. Ticker tab row ---------- */

/* The ticker strip scrolls horizontally on phones. Without an affordance the
   site's own sections sit off-screen to the right with nothing to suggest
   they exist, so an arrow appears on whichever side has more to reveal. */
.tabbar__wrap { position: relative; overflow: hidden; }

.tabscroll {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 34px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  display: none;               /* shown only where the strip overflows */
}
.tabscroll::after {
  content: "";
  display: block;
  width: 9px; height: 9px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.tabscroll--next { right: 0; }
.tabscroll--next::after { transform: rotate(-45deg); margin-left: 8px; }
.tabscroll--prev { left: 0; }
.tabscroll--prev::after { transform: rotate(135deg); margin-left: 14px; }

/* Fade the strip out under each arrow so items pass beneath rather than
   colliding with it. */
.tabscroll--next { box-shadow: -14px 0 14px -6px var(--bg); }
.tabscroll--prev { box-shadow: 14px 0 14px -6px var(--bg); }

@media (max-width: 767px) {
  .tabscroll.is-on { display: block; }
  /* Room for the arrows at each end of the strip. */
  .tabs { scroll-behavior: smooth; padding-right: 34px; }
}

.tabbar {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: var(--tab-h);
  padding: 0 12px;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  white-space: nowrap;
  border: 0;
  border-bottom: 3px solid transparent;
  transition: color .2s ease-out, border-color .2s ease-out;
}
.tab:hover { color: var(--accent-hover); }
/* Our own sections read white and bold; the reference tickers stay grey.
   (The source page sets these to 400, but its items are grey — at white
   they need the weight to keep the hierarchy right.) */
.tab--grey { color: var(--text); font-weight: 700; }
.tab--grey:hover { color: var(--accent); }

.tab--active,
.tab--grey.tab--active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.tab--pill {
  border-color: var(--hairline);
  border-radius: 999px;
}
/* Caption for the third-party group. Deliberately smaller and lighter than a
   tab so the eye reads it as a label, not another item in the strip. */
.tabs__label {
  flex: 0 0 auto;
  margin-right: 0;
  padding-right: 24px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-fine);
  white-space: nowrap;
  opacity: .85;
}
/* On phones the third-party tickers and their caption are dropped entirely:
   they are a visual reference to the product family this parodies, not
   navigation, and on a narrow strip they push the site's own sections
   off-screen. They stay in the DOM for assistive tech, and the substantive
   disclaimer is the parody notice in the footer of every page — that is what
   does the legal work, not this row. */
@media (max-width: 599px) {
  .tabs__label,
  .tabs__group {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The arrows stay: with the tickers gone the row is shorter, but five items
     can still overflow a narrow phone, and the JS only shows an arrow on a
     side that actually has more to reveal. */
  .tabs { padding-right: 34px; }
}
.tabs__group,
.tabs__own {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
/* Caption + reference tickers share a faintly lighter ground that runs to the
   viewport edge. The tab row is full-bleed (the container's horizontal padding
   is moved onto the row's own items), so the shaded group starts at x=0. */
.tabs__label,
.tabs__group {
  align-self: stretch;
  display: flex;
  align-items: center;
  background: var(--bg-inset);
}
.tabs__label { padding-left: var(--pad-x); }
.tabs__group { padding-right: 12px; }
.tabs__group .tab:last-child { margin-right: 0; }

/* No divider rules: spacing and the accent carry the separation instead. */
.tabs__own { margin-left: 16px; padding-right: var(--pad-x); }
.tabs__own .tab--active { margin-right: 20px; }
/* Third-party tickers: dimmer than our own, and not interactive. */
.tab--ref {
  color: var(--text-fine);
  font-weight: 600;
  cursor: default;
}
.tab--ref:hover { color: var(--text-fine); }


/* ---------- Layout ---------- */

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* Reference content box: padding:24px with an 8px top.
     The horizontal part only applies once the container has room for it. */
  padding: 8px 0 24px;
  align-items: flex-start;
}
@media (min-width: 990px) {
  /* Columns share a height so the button grid can sit on the card's baseline. */
  .layout { align-items: stretch; }
}

.layout__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Single-column: the briefing card is the substantive summary, so it belongs
   directly after the KPIs rather than below six navigation buttons.

   The card and the buttons are in different parents, so ordering them against
   each other means promoting both into one flex flow: .layout__main becomes a
   flex column and the button grid is pushed to the end of the whole layout,
   which puts the card between the KPIs and the buttons. Presentation only —
   the DOM order, and so the reading order for assistive tech, is unchanged. */
@media (max-width: 989px) {
  /* .layout__main carries the 24px gap between its children; display:contents
     discards its box, so the gap moves onto .layout to keep the rhythm. */
  .layout { flex-direction: column; gap: 24px; }
  .layout__main { display: contents; }
  .ctas { order: 3; }
  .layout__aside { order: 2; }
}

/* Sit the button grid on the baseline of the briefing card. */
@media (min-width: 990px) {
  .layout__main > .ctas { margin-top: auto; }
  .layout__main { align-self: stretch; }
}
.layout__aside {
  /* Reference grid: briefing is 4.5/12 at lg, 3.5/12 at xl.
     Card sits 12px below the headline, as in the reference. */
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  padding-top: 12px;
}
@media (min-width: 480px)  { .layout__aside { width: calc(100% * 10 / 12); } }
@media (min-width: 768px)  { .layout__aside { width: calc(100% * 7 / 12); } }
@media (min-width: 990px)  { .layout__aside { width: calc(100% * 5 / 12); max-width: none; } }
@media (min-width: 1280px) { .layout__aside { width: calc(100% * 4 / 12); } }
@media (min-width: 600px) { .layout { padding-inline: 24px; } }
@media (max-width: 989px) {
  /* Briefing card moves below the buttons */
  .layout { flex-direction: column; }
  .layout__aside { flex: 1 1 auto; padding-top: 0; }
}

/* ---------- 3 & 4. Headline and intro ---------- */

.lede { display: block; }
.prose-page .lede,
.prose-page .intro { max-width: var(--measure); }
/* Article pages centre their column; the product page keeps its two-column
   layout flush left. */
.prose-page { margin-inline: auto; max-width: var(--measure); }
.h1 { margin-bottom: 16px; }
.h1 {
  margin: 0;
  font-size: 36px;
  line-height: 54px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent);
}
.h1__shrink { display: block; font-size: 0.75em; }
@media (max-width: 989px) { .h1 { font-size: 30px; line-height: 44px; } }
@media (max-width: 599px) { .h1 { font-size: 26px; line-height: 38px; } }

.intro {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 24px;
}

/* ---------- 5. Stat grid ---------- */

.kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kpi-gap-row) var(--kpi-gap-col);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
/* Reference nests value+delta in their own 6px-gap stack. */
.kpi__value + .kpi__delta { margin-top: -6px; } /* 12px stack gap - 6px = 6px */
@media (min-width: 600px)  { .kpi { width: calc(50% - (var(--kpi-gap-col) / 2)); } }
@media (min-width: 990px)  { .kpi { width: calc(33.33333% - (var(--kpi-gap-col) * 2 / 3)); } }

.kpi__title {
  margin: 0;
  font-size: var(--kpi-title);
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-label);
}
.kpi__value {
  margin: 0;
  font-size: var(--kpi-value);
  line-height: 34px;
  font-weight: 600;
  text-wrap: balance;
}
/* Long non-numeric values ("None scheduled") must not blow out the row rhythm */
.kpi__value:not(:only-child),
.kpi__value { overflow-wrap: break-word; }
@media (max-width: 989px) { .kpi__value { font-size: 28px; } }

.kpi__delta {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.kpi__delta.is-up   { color: var(--up); }
.kpi__delta.is-down { color: var(--down); }

/* Short laptop viewports: tighten just enough to keep the 3x2 grid above the
   fold, without changing the layout. */
@media (min-width: 990px) and (max-height: 820px) {
  :root { --kpi-gap-row: 14px; --kpi-value: 28px; }
  .kpi__value { line-height: 30px; }
  .kpi { gap: 8px; }
  .h1 { font-size: 32px; line-height: 44px; margin-bottom: 12px; }
  .intro { font-size: 16px; line-height: 22px; margin-top: 10px; }
  .layout__main { gap: 18px; }
  .layout { padding-top: 4px; }
}

/* ---------- 6. Button grid ---------- */

/* Full-width button row: fills the content width rather than the main column. */
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding: 0 0 var(--section-pad);
}
.ctas .btn,
.btn-menu {
  width: 100%;
}

@media (min-width: 600px) {
  .ctas .btn, .btn-menu { width: calc(50% - 6px); }
}
@media (min-width: 768px) {
  .ctas .btn, .btn-menu { width: calc(33.33333% - 8px); }
}
@media (min-width: 1280px) {
  /* Three across, two rows — the reference proportion. */
  .ctas .btn, .btn-menu { width: calc(33.33333% - 8px); }
}
.btn-menu > .btn { width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10.4px 24px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 19.2px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease-out;
}
/* Contract address. Outlined in accent so it reads as a control next to the
   solid buttons, not as a seventh destination. */
.btn--ca {
  display: none;               /* phones only — the bar carries it elsewhere */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 16px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
.btn--ca .btn__k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.btn--ca .addr__value { margin-left: auto; font-weight: 600; }
.btn--ca .addr__icon { flex: 0 0 auto; }
.btn--ca .addr__done { font-weight: 700; color: var(--accent); }
.btn--ca:hover { background: rgba(223, 44, 24, .08); }

@media (max-width: 767px) {
  .btn--ca { display: flex; }
}

.btn:hover { background: var(--accent-hover); }

/* Buy button: inverted against the accent bar so it stays the loudest thing.
   Overrides the 44px base height for the compact 48px bar. */
.btn--buy {
  width: auto;
  height: 36px;
  min-height: 0;
  padding: 0 22px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.btn--buy:hover { background: #1a1a1a; }


.btn__chev {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.btn-menu { position: relative; }
.menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--bg-bar);
  border: 1px solid var(--hairline);
}
.menu__item {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  transition: background-color .2s ease-out;
}
.menu__item:hover { background: rgba(255,255,255,.08); }

/* ---------- 7. Briefing card ---------- */

.brief {
  display: block;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease-out;
}
.brief:hover { border-color: var(--accent); }

.brief__page {
  background: #0A0A0A;
  color: var(--text);
  font-family: var(--font-serif);
  padding: 28px 26px 30px;
  /* Let the briefing grow with its copy rather than clipping it.
     min-height keeps the printed-page proportion when copy is short. */
  /* A4 proportion (210 x 297mm), capped so the card never drives the page
     height past the fold on shorter viewports. */
  aspect-ratio: 210 / 297;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Applies between every child, so a small reduction here recovers more room
     than trimming any single element — and the A4 box cannot grow. */
  gap: 5px;
}

/* Below the two-column breakpoint the card is the full page width and its copy
   is what determines the height. Holding the A4 proportion there clips the
   structural note, so the proportion is dropped and the text decides. */
@media (max-width: 989px) {
  .brief__page {
    aspect-ratio: auto;
    height: auto;
  }
}

.brief__ticker {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.brief__kicker {
  margin: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.brief__title {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
}
.brief__designation {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--text-label);
}
.brief__rule {
  display: block;
  width: 56px;
  height: 4px;
  margin: 6px 0 2px;
  background: var(--accent);
}
.brief__body {
  margin: 0;
  font-size: 13px;
  /* Same reasoning as .brief__fine: the card is a fixed A4 box and its copy
     has grown, so leading is where the room comes from rather than the text. */
  line-height: 1.48;
  color: rgba(255,255,255,.85);
}

.brief__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 6px 0 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.cell { background: #0A0A0A; padding: 8px 9px; }
.cell__k {
  margin: 0 0 3px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
}
.cell__v {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.brief__note {
  /* Push the closing fine print to the foot of the A4 page. */
  margin: auto 0 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.brief__fine {
  margin: 0;
  font-size: 12.5px;
  /* The fine print is last in a fixed-proportion box, so it is what gets
     clipped when copy grows — the affiliation disclaimer was losing its final
     line. Tighter leading keeps it inside the card without touching the A4
     proportion or cutting the text. */
  line-height: 1.4;
  color: rgba(255,255,255,.7);
}

.brief__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.brief__ext {
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-left-width: 2px;
  box-shadow: 3px -3px 0 -1px currentColor;
}

/* ---------- 8. Notes and footer ---------- */

.rule {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 24px;
}
.notes p {
  margin: 0;
  font-size: 14px;
  line-height: 22.4px;
  color: rgba(255,255,255,.75);
}
.notes__stamp { font-style: italic; }
/* Get $STRS before there is a pool: present, but it goes nowhere. An anchor
   with no href is already unclickable and out of the tab order; this only
   stops it looking like a live control. */
.btn.is-inert { cursor: default; }
/* Keep whatever background the button already has: the hover state is what
   implies a live control, and the buttons this applies to are not all the
   same colour. */
.btn.is-inert:hover { background: inherit; }
.btn--buy.is-inert:hover { background: #000; }

/* Chart page before the listing: the embed's box is kept so the page holds its
   shape, with a message where the chart will be. */
.embed--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
  border: 1px solid var(--hairline);
}
.embed__pending { max-width: 46ch; padding: 32px; text-align: center; }
.embed__pending-h {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.embed__pending-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-fine);
}
/* "Coming shortly" is prose standing in for a number; at full KPI size it
   reads as a value. */
.kpi__value.is-pending, .cell__v.is-pending {
  font-size: 18px;
  color: var(--text-label);
  font-weight: 600;
}
.notes em { font-style: italic; }

.foot {
  padding: 32px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-fine);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Figure / chart (cortisol page) ---------- */

.fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Figures share the text measure so the column reads as one block. */
.fig,
.fig__head,
.fig__note { max-width: var(--measure); }
.fig__head { margin: 0; }
.fig__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.fig__sub {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-label);
}
.fig__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-fine);
}

.chart {
  background: var(--bg-inset);
  border: 1px solid var(--hairline);
  padding: 16px 12px 8px;
}
.chart svg { display: block; width: 100%; height: auto; max-height: 240px; }

/* Small-multiple panel heading. */
.chart__panel-title {
  margin: 4px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-label);
}
.chart__panel-title + svg { margin-bottom: 10px; }
.chart__panel-title span {
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-fine);
}

/* Recessive grid and axes, per the mark specs. */
.chart .grid line {
  stroke: var(--hairline);
  stroke-width: 1;
}
.chart .axis text {
  fill: var(--text-fine);
  font-family: var(--font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Purchase marker */
.chart .event {
  stroke: var(--text-fine);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.chart .event__label {
  fill: var(--text-label);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Single series: 2px line, no legend needed — the title names it. */
.chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .area { fill: var(--accent); opacity: .12; }
.chart .dot {
  fill: var(--accent);
  stroke: var(--bg-inset);
  stroke-width: 2;
}
.chart .peak {
  fill: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Prose (article pages) ---------- */

.prose { max-width: var(--measure); }
.prose h2 {
  margin: 36px 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.prose h2:first-child { margin-top: 0; }
.prose:not(:first-child) h2 { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }
.prose p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
}
.prose ul { margin: 0; padding-left: 20px; }
.prose li { margin-bottom: 6px; font-size: 17px; line-height: 1.6; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-hover); }

/* Clinical reference line on the cortisol figure. */
.chart .ref {
  stroke: var(--text-fine);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.chart .ref__label {
  fill: var(--text-fine);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .04em;
}

/* Two-series indexed chart: second hue validated against the dark surface. */
:root { --series-price: #2E7FC2; }

.chart .base {
  stroke: var(--text-label);
  stroke-width: 1;
}
.chart .line--cort  { stroke: var(--accent); }
.chart .line--price { stroke: var(--series-price); }
.chart .dot--cort   { fill: var(--accent); }
.chart .dot--price  { fill: var(--series-price); }
.chart .peak--price { fill: var(--text-label); }

/* Legend: required for two or more series, so identity is never colour-alone. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 10px 56px;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-label);
}
.legend__swatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
}
.legend__swatch--cort  { background: var(--accent); }
.legend__swatch--price { background: var(--series-price); }

/* Assay ceiling on the volatility figure. */
.chart .ceiling {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .5;
}

/* ---------- Reference table (article pages) ---------- */

.tbl {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.tbl caption {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-label);
  text-align: left;
}
.tbl th,
.tbl td {
  padding: 9px 12px 9px 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.tbl th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-label);
  border-bottom-color: var(--text-fine);
}
.tbl td:last-child { color: var(--text-label); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- Definition list (provenance metadata) ---------- */

.meta {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 8px 20px;
  margin: 0 0 18px;
  max-width: var(--measure);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.meta dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-label);
  padding-top: 2px;
}
.meta dd { margin: 0; }
.meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.meta a:hover { color: var(--accent-hover); }

/* Dynamically drawn treasury chart (classes set from JS). */
#tre-chart .grid-l { stroke: var(--hairline); stroke-width: 1; }
#tre-chart .ax {
  fill: var(--text-fine);
  font-family: var(--font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#tre-chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#tre-chart .dot { fill: var(--accent); stroke: var(--bg-inset); stroke-width: 2; }
/* Cumulative acquired: same hue, recessive, so the held balance stays the
   figure the eye lands on. Dashed as a second cue for anyone who cannot
   separate the two by weight alone. */
#tre-chart .line--ghost {
  stroke: var(--text-fine);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
#tre-chart .pk {
  fill: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#tre-chart .pk--ghost { fill: var(--text-fine); font-weight: 400; }

/* ---------- Third-party chart embed ---------- */

/* The chart needs more width than the reading measure allows. */
/* The chart breaks out of the centred reading column. */
.fig--wide { max-width: none; }
@media (min-width: 990px) {
  .prose-page > .fig--wide {
    width: min(1100px, calc(100vw - 2 * var(--pad-x)));
    margin-inline: calc((var(--measure) - min(1100px, calc(100vw - 2 * var(--pad-x)))) / 2);
  }
}
.fig--wide .fig__head,
.fig--wide .fig__note { max-width: var(--measure); }

.embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  background: var(--bg-inset);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 767px) {
  .embed { aspect-ratio: 3 / 4; min-height: 460px; }
}
.fig__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fig__note a:hover { color: var(--accent-hover); }

/* ---------- Chart page: the embed fills the viewport ---------- */

.chart-page {
  display: flex;
  flex-direction: column;
  /* Fill what is left under the top bar and tab row (48 + 48). */
  min-height: calc(100vh - 96px);
  padding: 0;
  max-width: none;
}
.embed--full {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
}
.notes--compact {
  padding: 10px 0 14px;
  gap: 0;
}
.notes--compact p { font-size: 12px; line-height: 1.5; }

@media (max-width: 767px) {
  .chart-page { min-height: calc(100vh - 96px); }
  .embed--full { min-height: 420px; }
}

/* Terms table: label column, no header row. */
.tbl--terms th[scope="row"] {
  width: 34%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-label);
  border-bottom-color: var(--hairline);
  padding-right: 20px;
}
.tbl--terms td { color: var(--text); }

/* Capital stack: our own row stands out. */
.tbl--stack .stack__tick { font-weight: 700; font-variant-numeric: tabular-nums; }
.tbl--stack .stack__own td { color: var(--accent); font-weight: 700; }
.tbl--stack .stack__own .stack__tick { color: var(--accent); }

/* Load-failure message on data-backed pages. */
.status {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-label);
}