/* ============================================================
   P.S. Investing v1 ("Lit Paper", analysis edition)
   The section index (/investing) and one page per company (/investing/<slug>).
   A company page reads like an essay that shows its work: the answer in three sentences, the numbers that
   carry it, then the business, the moat, the advantage, the people, the financials, the valuation and the
   risks, with every figure footnoted to a numbered source.
   Colour follows the house rules. Ink and bronze draw the charts; orange marks one thing only, the price.
   Every colour is a token from site.css, so all 16 themes hold. Charts are inline SVG from build/charts.py,
   drawn at three widths (.iv-v-s / -m / -l) so axis type stays between 11px and 15px on every screen.
   No motion beyond the house press; reduced motion changes nothing here.
   ============================================================ */

body[data-invest], body.ivx-page { overflow-x: clip; }
body[data-invest] main#main:focus, body.ivx-page main#main:focus { outline: none; }

.iv, .ivx {
  --iv-measure: 640px;
  --iv-wide: min(var(--frame), 100%);
  --iv-fs: clamp(17.5px, calc(.3vw + 15.8px), 19px);
  /* the chart inks: a for the subject, b (bronze) for the second series, c for the context; live is the price */
  --iv-a: color-mix(in srgb, var(--ink) 82%, var(--paper));
  --iv-b: var(--bronze);
  --iv-c: color-mix(in srgb, var(--ink) 52%, var(--paper));
  --iv-live: var(--accent);
  --iv-band: color-mix(in srgb, var(--bronze) 34%, var(--paper));
  --iv-band-edge: var(--bronze);
  --iv-mos: color-mix(in srgb, var(--ink) 7%, transparent);
  --iv-mos-edge: color-mix(in srgb, var(--ink) 55%, var(--paper));
  font-variant-numeric: lining-nums;
}
/* riso and the playroom print their orange a touch deeper so the price dot clears 3:1 on their papers */
:root:is([data-theme="riso"], [data-theme="play"]) :is(.iv, .ivx) { --iv-live: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
/* riso's blue ink is light at half strength: the context ink prints a step deeper to keep 3:1 */
:root[data-theme="riso"] :is(.iv, .ivx) { --iv-c: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
/* the void is pure black and white: the context ink steps up so it still reads as a mark */
:root[data-theme="void"] :is(.iv, .ivx) { --iv-c: color-mix(in srgb, var(--ink) 58%, var(--paper)); }

/* ---------- shared: the advice line, kind chips, source markers ---------- */
.iv-adv {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0;
  font: 400 13px/1.5 var(--sans); color: var(--ink-2);
}
.iv-adv b { font-weight: 500; color: var(--ink); }
.iv-adv time { white-space: nowrap; }
/* R / C / E: reported in a filing, calculated from reported figures, my estimate */
.iv-k {
  display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin-left: .45em;
  padding: 0 3px; border: 1px solid var(--hair-strong); border-radius: 2px; vertical-align: .12em;
  font: 500 11px/1 var(--sans); letter-spacing: .04em; color: var(--ink-2); font-style: normal; cursor: help;
}
.iv-k[data-k="e"] { border-style: dashed; border-color: color-mix(in srgb, var(--bronze) 70%, transparent); color: var(--bronze); }
.iv-fn {
  font: 500 .64em/0 var(--sans); vertical-align: .62em; margin-left: .08em; letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.iv-fn a, a.iv-ref {
  color: var(--bronze); text-decoration: none; padding: 0 .1em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-leave) var(--ease-in);
}
.iv-fn a + a::before { content: ","; content: "," / ""; color: var(--ink-2); margin-right: .1em; }
@media (hover: hover) { .iv-fn a:hover, a.iv-ref:hover { background-size: 100% 1px; transition: background-size var(--d-2) var(--ease-out); } }
.iv-fn a:focus-visible, a.iv-ref:focus-visible { background-size: 100% 1px; }
a.iv-ref { font: 500 1em/1 var(--sans); letter-spacing: .02em; white-space: nowrap; }
/* touch: the superscripts and [n] markers keep their size but take a finger-sized hit area.
   Neighbours share a boundary at the comma, so a tap on 3 never opens 2. */
@media (pointer: coarse) {
  .iv-fn a, a.iv-ref { position: relative; }
  .iv-fn a::after, a.iv-ref::after { content: ""; position: absolute; inset: -16px -6px; }
  .iv-fn a:has(+ a)::after, a.iv-ref:has(+ a.iv-ref)::after { right: 0; }
  .iv-fn a + a::after, a.iv-ref + a.iv-ref::after { left: 0; }
  /* inside a scrolling table a hit area must not widen the scroll range; stacked phone tables keep a vertical one */
  .iv-tw :is(.iv-fn a, a.iv-ref)::after { content: none; }
}
@media (pointer: coarse) and (max-width: 560px) {
  .iv-tw .iv-tbl--text :is(.iv-fn a, a.iv-ref)::after { content: ""; left: 0; right: 0; }
}
.iv-nb { white-space: nowrap; }
.iv-fn a:target, .iv-ref:target { background-size: 100% 1px; }
/* anchors land clear of the sticky bar; a citation reached from its source lands a third of the way down, with its sentence above it */
:where(.iv) :where([id]) { scroll-margin-top: 100px; }
.iv-fn a, a.iv-ref { scroll-margin-top: 30vh; }
.iv-sample {
  margin: 0 auto; padding: 10px var(--gutter); background: var(--ink); color: var(--paper); text-align: center;
  font: 500 var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase;
}

/* ============================================================
   THE COMPANY PAGE
   ============================================================ */
.iv { padding: 0 var(--gutter); }
/* 760 to 1023px: the site's light dial floats at the bottom left and is not hidden while reading; clear its 56px corner */
@media (min-width: 760px) and (max-width: 1023px) { body[data-invest] .iv > *, body.ivx-page .ivx > * { padding-left: 32px; } }
.iv-col { max-width: var(--iv-measure); margin: 0 auto; }
.iv-wide { width: var(--iv-wide); margin-inline: auto; }

/* ---------- the opener: type on paper, the price on an espresso card ---------- */
.iv-open {
  width: min(var(--frame), 100%); margin: 0 auto; padding: clamp(36px, 6vw, 88px) 0 clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); align-items: center;
}
@media (min-width: 960px) { .iv-open { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); } }
.iv-kick {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0 0 clamp(18px, 2.4vw, 28px);
  font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2);
}
.iv-kick > * + *::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%;
  background: currentColor; opacity: .55; vertical-align: .3em;
}
.iv-kick a { color: var(--ink); text-decoration: none; padding: 14.5px 0; margin-block: -2.5px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12.5px) / 100% 1px no-repeat; }
.iv-kick .no { color: var(--bronze); }
@media (max-width: 600px) {
  .iv-kick { gap: 0 16px; }
  .iv-kick > * + *::before { content: none; }
}
.iv-open h1 {
  margin: 0; font: 400 clamp(46px, 7vw, 104px)/.96 var(--serif); letter-spacing: -.032em; color: var(--ink);
  text-wrap: balance; max-width: 12ch;
}
.iv-open h1 .tk { display: block; margin-top: .3em; font: 400 clamp(20px, 2vw, 26px)/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.iv-dek {
  margin: clamp(18px, 2vw, 26px) 0 0; max-width: 34em;
  font: italic 400 var(--fs-lede)/1.5 var(--serif); color: var(--ink-2); text-wrap: pretty;
}
.iv-folio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: clamp(18px, 2.4vw, 26px) 0 0;
  font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (max-width: 600px) {
  .iv-folio { gap: 6px 16px; }
  .iv-kick, .iv-folio { font-size: 12px; letter-spacing: .1em; }
  .iv-kick a { padding-block: 14px; margin-block: -2.8px; background-position: 0 calc(100% - 12px); }
  .iv-kick > *, .iv-folio > * { text-wrap: balance; }
}
.iv-open > .iv-adv { grid-column: 1 / -1; padding-top: 14px; border-top: var(--hair-w) solid var(--hair); }

/* the price card: the one deep ground on the page */
.iv-quote {
  border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 26px);
  box-shadow: var(--elev-2); color: var(--ink);
}
.iv-quote .lbl { color: var(--ink-2); }
.iv-quote-p {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0;
}
.iv-quote-p .stat { font-size: clamp(48px, 5.4vw, 68px); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: lining-nums proportional-nums; }
.iv-quote-d { margin: 6px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.iv-quote-v {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; padding: 12px 0 0;
  border-top: var(--hair-w) solid var(--hair-strong);
}
.iv-quote-v > div { min-width: 0; }
.iv-quote-v dt { font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2); }
.iv-quote-v dd { margin: 4px 0 0; font: 300 clamp(20px, 2vw, 24px)/1.1 var(--stat); letter-spacing: -.02em; color: var(--ink); }
.iv-quote-v .is-base dd { color: var(--bronze); font-weight: 400; }
.iv-quote .iv-mini { display: block; width: 100%; max-width: 420px; height: auto; margin: 16px 0 0; }
.iv-quote-k { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
.iv-quote-k > span { display: inline-flex; align-items: center; gap: 7px; }
.iv-quote-k .iv-sw--dot { width: 9px; height: 9px; box-shadow: none; }
.iv-quote-k .iv-sw--tick { margin: 0 2px; height: 12px; }
.iv-quote-k .iv-sw--sq { width: 14px; height: 8px; }
.iv-quote-r { margin: 10px 0 0; font: 400 14px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.iv-quote-r .mos { color: var(--ink-2); }
.iv-quote-m { margin: 12px 0 0; font: 400 12px/1.45 var(--sans); color: var(--ink-2); }

/* ---------- the key numbers strip ---------- */
.iv-numsec { width: var(--iv-wide); margin: 0 auto clamp(48px, 6vw, 80px); }
.iv-nums {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink); list-style: none; padding: 0;
}
@media (min-width: 700px) { .iv-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .iv-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.iv-nums > li {
  min-width: 0; padding: 16px 14px 18px 0; border-bottom: var(--hair-w) solid var(--hair);
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; align-content: start;
}
@supports not (grid-template-rows: subgrid) { .iv-nums > li { display: flex; flex-direction: column; gap: 8px; } }
.iv-nums .lbl { align-self: end; }
@media (min-width: 1100px) {
  .iv-nums > li { padding: 18px 18px 20px; border-bottom: 0; border-left: var(--hair-w) solid var(--hair); }
  .iv-nums > li:first-child { padding-left: 0; border-left: 0; }
}
.iv-nums .lbl { color: var(--ink-2); }
.iv-nums .v {
  font: 200 clamp(30px, 3.1vw, 40px)/1 var(--stat); letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums; overflow-wrap: anywhere;
}
.iv-nums .m { font: 400 12px/1.45 var(--sans); color: var(--ink-2); }
.iv-nums .m .iv-k { margin-left: 0; margin-right: .5em; }
@media (max-width: 380px) { .iv-nums .v { font-size: 27px; } }

/* ---------- the answer ---------- */
.iv-answer { max-width: var(--iv-measure); margin: 0 auto; }
.iv-h-lbl {
  display: block; margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--ink);
  font: var(--lbl-w) 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.iv-ans { list-style: none; margin: 0; padding: 0; counter-reset: iv-ans; }
.iv-ans > li {
  counter-increment: iv-ans; position: relative; padding-left: 2.1em; margin: 0 0 .7em;
  font: 400 clamp(21px, 2.2vw, 27px)/1.38 var(--serif); letter-spacing: -.008em; color: var(--ink); text-wrap: pretty;
}
.iv-ans > li::before {
  content: counter(iv-ans); content: counter(iv-ans) / ""; position: absolute; left: 0; top: .12em;
  font: 400 .78em/1.38 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums;
}
@media (min-width: 1240px) {
  .iv-ans > li { padding-left: 0; }
  .iv-ans > li::before { left: -2.1em; }
}

/* ---------- six questions, one line each ---------- */
.iv-six { max-width: var(--iv-measure); margin: clamp(40px, 5vw, 64px) auto 0; }
.iv-six .ledger > div { grid-template-columns: minmax(118px, 28%) minmax(0, 1fr); }
.iv-six dd { font-size: 17px; line-height: 1.5; }
.iv-six dd a { color: inherit; text-decoration: underline 1px var(--hair-strong); text-underline-offset: 4px; }
.iv-six dd .go {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; vertical-align: middle;
  margin-left: .3em; font-family: var(--sans); font-size: .9em; color: var(--ink-2); text-decoration: none; padding: 0 .15em;
}
@media (hover: hover) { .iv-six dd a:hover { text-decoration-color: currentColor; } }
@media (max-width: 480px) { .iv-six .ledger > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- the body: the column, with its contents in the left margin on wide screens ---------- */
.iv-body { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.iv-toc {
  max-width: var(--iv-measure); margin: 0 auto clamp(40px, 5vw, 56px);
  font: 400 15px/1.4 var(--sans);
}
.iv-toc .iv-h-lbl { margin-bottom: 6px; }
.iv-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.iv-toc li { min-width: 0; border-bottom: var(--hair-w) solid var(--hair); }
.iv-toc a {
  display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0; color: var(--ink); text-decoration: none;
}
.iv-toc .rn { flex: none; width: 2.2em; font: 400 13px/1 var(--serif); letter-spacing: .08em; color: var(--bronze); font-variant-numeric: lining-nums; }
@media (hover: hover) { .iv-toc a:hover .t { text-decoration: underline 1px currentColor; text-underline-offset: 4px; } }
@media (max-width: 480px) { .iv-toc ol { grid-template-columns: 1fr; } }
@media (min-width: 1240px) {
  .iv-rail { position: absolute; top: 0; bottom: 0; left: calc(50% - var(--iv-measure) / 2 - 48px - 176px); width: 176px; }
  .iv-toc { position: sticky; top: 108px; margin: 0; font-size: 13.5px; }
  .iv-toc ol { grid-template-columns: 1fr; }
  .iv-toc li { border-bottom: 0; }
  .iv-toc a { min-height: 0; padding: 6px 0; gap: 6px; color: var(--ink-2); }
  .iv-toc .rn { width: 2.4em; font-size: 12px; }
  @media (hover: hover) { .iv-toc a:hover { color: var(--ink); } }
}

/* ---------- sections and prose ---------- */
.iv-sec { max-width: var(--iv-measure); margin: 0 auto; color: var(--ink); font: 400 var(--iv-fs)/1.62 var(--serif); }
.iv-sec + .iv-sec { margin-top: clamp(64px, 8vw, 104px); }
.iv-sec > h2 {
  margin: 0 0 24px; font: 400 var(--fs-h2)/1.12 var(--serif); letter-spacing: -.018em; text-wrap: balance; color: var(--ink);
  scroll-margin-top: 100px;
}
.iv-sec > h2 .rn {
  display: table; margin-bottom: 16px; padding-right: 40px;
  font: 400 16px/1 var(--serif); letter-spacing: .14em; color: var(--bronze); font-variant-numeric: lining-nums;
  background: linear-gradient(var(--bronze), var(--bronze)) right 58% / 26px 1px no-repeat;
}
.iv-sec p { margin: 0 0 1lh; hanging-punctuation: first; text-wrap: pretty; font-variant-numeric: lining-nums proportional-nums; }
.iv-sec h3 {
  margin: clamp(36px, 4.4vw, 52px) 0 12px; font: 400 clamp(20px, 2vw, 23px)/1.3 var(--serif); letter-spacing: -.006em;
  color: var(--ink); text-wrap: balance;
}
.iv-sec a:not(.iv-ref):not(.iv-fn a) {
  color: inherit; text-decoration: underline 1px var(--hair-strong); text-underline-offset: 4px; text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--d-1) var(--ease-out);
}
@media (hover: hover) { .iv-sec p a:hover, .iv-sec li a:hover { text-decoration-color: currentColor; } }
.iv-sec strong { font-weight: 700; }
.iv-sec ul, .iv-sec ol:not(.iv-ans) { margin: 0 0 1lh; padding: 0; list-style: none; }
.iv-sec ul > li, .iv-sec ol:not(.iv-ans) > li { position: relative; padding-left: 1.5em; margin: 0 0 .55em; text-wrap: pretty; }
.iv-sec ul > li::before {
  content: ""; position: absolute; left: .2em; top: .68em; width: .36em; height: .36em; background: var(--bronze); border-radius: 1px;
}
.iv-sec ol:not(.iv-ans) { counter-reset: iv-li; }
.iv-sec ol:not(.iv-ans) > li { counter-increment: iv-li; }
.iv-sec ol:not(.iv-ans) > li::before {
  content: counter(iv-li); content: counter(iv-li) / ""; position: absolute; left: 0; top: 0;
  font: 400 .9em/1.8 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums;
}
/* a quotation: under fifteen words, always attributed */
.iv-q { margin: 8px 0 1lh; padding: 2px 0 2px 22px; border-left: 2px solid var(--bronze); }
.iv-q p { margin: 0; font: italic 400 clamp(21px, 2.1vw, 24px)/1.4 var(--serif); color: var(--ink); text-wrap: balance; }
.iv-q footer { margin-top: 10px; font: var(--lbl-w) var(--lbl-s)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* the point: one claim the section turns on */
.iv-point {
  margin: 10px 0 1lh !important; padding: 16px 0 17px; border-top: 1px solid var(--ink); border-bottom: var(--hair-w) solid var(--hair);
  font: 400 clamp(20px, 2vw, 23px)/1.42 var(--serif) !important; color: var(--ink); text-wrap: pretty;
}

/* ---------- figures ---------- */
.iv { counter-reset: iv-fig iv-tbl; }
.iv-fig { margin: clamp(40px, 5vw, 56px) 0; }
.iv-fig:not(.iv-tblfig) { counter-increment: iv-fig; }
.iv-tblfig { counter-increment: iv-tbl; }
.iv-chart { border-top: 1px solid var(--ink); padding-top: 14px; font-family: var(--sans); }
.iv-chart::before {
  content: "Fig. " counter(iv-fig); content: "Fig. " counter(iv-fig) / "";
  display: block; margin-bottom: 16px; font: var(--lbl-w) 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze);
}
.iv .iv-fig-t { margin: 0 0 6px; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.iv-fig-s { margin: 0 0 14px !important; max-width: 56ch; font: 400 13.5px/1.45 var(--sans) !important; color: var(--ink-2); text-wrap: pretty; }
.iv-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 16px !important; padding: 0 !important; list-style: none; }
.iv-key > li { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 !important; padding: 0 !important; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.iv-key > li::before { content: none !important; }
.iv-key b { font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.iv-sw { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 2px; translate: 0 1px; }
.iv-sw--sq.iv-m-a { background: var(--iv-a); }
.iv-sw--sq.iv-m-b { background: var(--iv-b); }
.iv-sw--sq.iv-m-c { background: var(--iv-c); }
.iv-sw--sq.iv-band { background: var(--iv-band); box-shadow: inset 0 0 0 1px var(--iv-band-edge); }
.iv-sw--sq.iv-mos { background: color-mix(in srgb, var(--ink) 9%, var(--paper)); box-shadow: inset 0 0 0 1px var(--iv-mos-edge); }
.iv-sw--sq.iv-m-live { background: var(--iv-live); }
.iv-sw--ln { width: 18px; height: 2px; border-radius: 1px; translate: 0 -3px; }
.iv-sw--ln.iv-m-a { background: var(--iv-a); }
.iv-sw--ln.iv-m-b { background: var(--iv-b); }
.iv-sw--ln.iv-m-c { background: var(--iv-c); }
.iv-sw--lvl { width: 18px; height: 2px; background: var(--ink); translate: 0 -3px; }
.iv-sw--tick { width: 2px; height: 14px; border-radius: 0; background: var(--ink); translate: 0 2px; margin: 0 5px; }
.iv-sw--dot { width: 12px; height: 12px; border-radius: 50%; background: var(--iv-live); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }

.iv-plot { position: relative; }
.iv-svg { display: none; width: 100%; height: auto; overflow: visible; font-variant-numeric: lining-nums tabular-nums; }
.iv-svg text { font-family: var(--num); }
@media (max-width: 480px) { .iv-v-s { display: block; max-width: 368px; } }
@media (min-width: 481px) and (max-width: 760px) { .iv-v-m { display: block; max-width: 600px; } }
@media (min-width: 761px) { .iv-v-l { display: block; } }

/* marks */
.iv-svg .iv-m-a, .iv-mini .iv-m-a { fill: var(--iv-a); }
.iv-svg .iv-m-b { fill: var(--iv-b); }
.iv-svg .iv-m-c { fill: var(--iv-c); }
.iv-svg .iv-ttm { opacity: .62; }
.iv-svg .iv-ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.iv-svg .iv-ln-a { stroke: var(--iv-a); }
.iv-svg .iv-ln-b { stroke: var(--iv-b); }
.iv-svg .iv-ln-c { stroke: var(--iv-c); }
.iv-svg .iv-dot { stroke: var(--paper); stroke-width: 2; }
.iv-svg .iv-lvl { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
:is(.iv-svg, .iv-mini) .iv-grid { stroke: var(--hair); stroke-width: 1; }
:is(.iv-svg, .iv-mini) .iv-base { stroke: var(--hair-strong); stroke-width: 1; }
.iv-svg .iv-tick { stroke: var(--hair-strong); stroke-width: 1; }
.iv-svg .iv-div { stroke: var(--hair-strong); stroke-width: 1; }
.iv-svg .iv-lead { stroke: var(--hair-strong); stroke-width: 1; }
:is(.iv-svg, .iv-mini) .iv-band { fill: var(--iv-band); stroke: var(--iv-band-edge); stroke-width: 1; }
:is(.iv-svg, .iv-mini) .iv-mos { fill: var(--iv-mos); }
.iv-svg .iv-mos-edge { stroke: var(--iv-mos-edge); stroke-width: 1; }
:is(.iv-svg, .iv-mini) .iv-case { stroke: var(--ink); stroke-width: 1.5; }
:is(.iv-svg, .iv-mini) .iv-case--base { stroke: var(--ink); stroke-width: 2.5; }
:is(.iv-svg, .iv-mini) .iv-m-live { fill: var(--iv-live); }
:is(.iv-svg, .iv-mini) .iv-live-dot { stroke: var(--paper); stroke-width: 2.5; }
.iv-svg .iv-live-ln { stroke: var(--iv-live); stroke-width: 1.5; }
.iv-mini .iv-empty { fill: none; stroke: var(--hair-strong); stroke-width: 1; stroke-dasharray: 3 3; }
/* type in the charts: text tokens only, never a series colour */
.iv-svg .iv-t { fill: var(--ink-2); }
.iv-svg .iv-tv { fill: var(--ink); font-weight: 600; letter-spacing: .01em; }
.iv-svg .iv-tl2 { fill: var(--ink); }
.iv-svg .iv-tk { fill: var(--ink-2); font-weight: 500; letter-spacing: .12em; }
.iv-svg .iv-tk--ink { fill: var(--ink); }
.iv-svg .iv-tb { fill: var(--ink); font-family: var(--stat); font-weight: 200; letter-spacing: -.02em; }
.iv-svg .iv-tb--base { font-weight: 400; }
/* the hover layer: a mark under the hand darkens; its native tooltip names it */
@media (hover: hover) {
  .iv-svg path[class^="iv-m-"]:hover, .iv-svg circle.iv-dot:hover { filter: brightness(.86); }
  :root[data-tone="dark"] .iv-svg path[class^="iv-m-"]:hover { filter: brightness(1.18); }
}

.iv-cap { margin: 12px 0 0; font: 400 12.5px/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.iv-cap-n { color: var(--ink); }
.iv-src-k { font-weight: 500; letter-spacing: var(--trk-s); text-transform: uppercase; font-size: var(--lbl-s); color: var(--ink-2); margin-right: .3em; }
/* the table twin */
.iv-data { margin-top: 10px; border-top: var(--hair-w) solid var(--hair); }
.iv-data > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: var(--lbl-w) var(--lbl-s)/1 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink);
}
.iv-data > summary::-webkit-details-marker { display: none; }
.iv-data > summary::after {
  content: ""; width: 9px; height: 9px;
  background: linear-gradient(currentColor, currentColor) center / 9px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 9px no-repeat;
  transition: rotate var(--d-2) var(--ease-out);
}
.iv-data[open] > summary::after { rotate: 45deg; }
.iv-data .iv-tw { margin-bottom: 8px; }

/* ---------- tables ---------- */
.iv-tw {
  position: relative; /* keeps visually hidden chip text inside the scroller */
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 0 1lh;
  /* scroll shadows: a soft edge appears on whichever side has more table */
  background:
    linear-gradient(to left, var(--paper) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 12px 100% no-repeat scroll;
}
.iv-tw:focus-visible { outline-offset: 2px; }
.iv-tbl {
  width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.iv-tbl th, .iv-tbl td { padding: 9px 10px 9px 0; text-align: left; vertical-align: baseline; border-bottom: var(--hair-w) solid var(--hair); }
.iv-tbl :is(th, td):last-child { padding-right: 0; }
.iv-tbl thead th {
  padding-top: 0; border-bottom: 1px solid var(--ink); vertical-align: bottom;
  font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2);
}
.iv-tbl tbody th { font-weight: 400; color: var(--ink); }
.iv-tbl--fin thead th, .iv-tbl--fin tbody th { white-space: nowrap; }
@media (max-width: 600px) { .iv-tbl--fin tbody th { white-space: normal; min-width: 7.5em; max-width: 9em; } }
.iv-tbl--cases tbody th, .iv-tbl--rdcf tbody th { min-width: 8.5em; }
.iv-tbl .n, .iv-tbl td.n { text-align: right; white-space: nowrap; }
/* long numeric column headings wrap instead of widening the table (a six-column table ran to 1118px) */
.iv-tbl:not(.iv-tbl--fin) thead th.n { white-space: normal; min-width: 4.5em; }
/* case assumptions are phrases ("9 GW a year at $40B per GW"): let them wrap so the bull column stays in view */
.iv-tbl--cases td.n { white-space: normal; min-width: 7.5em; }
/* reverse-DCF inputs are phrases too ("my base path: 45.8% in FY2027 ..."): wrap them so short values stay in view */
.iv-tbl--rdcf td.n { white-space: normal; min-width: 7.5em; }
.iv-tbl thead th.n { text-align: right; }
.iv-tbl tr.is-sum > * { border-top: 1px solid var(--ink-2); font-weight: 500; }
.iv-tbl tr.is-sub th { padding-left: 1em; color: var(--ink-2); }
.iv-tbl tr.is-sub td { color: var(--ink-2); }
.iv-tbl tr.is-head > * {
  padding-top: 18px; border-bottom: 1px solid var(--ink);
  font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2);
}
.iv-tbl tbody tr.is-head:first-child > * { padding-top: 0; }
/* the first column stays put while a wide table scrolls on a phone */
.iv-tw .iv-tbl tbody th, .iv-tw .iv-tbl thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.iv-tbl--text td { white-space: normal; min-width: 6em; }
.iv-tbl--text td:not(.n) { text-align: left; }
.iv-tbl--text tbody th { white-space: normal; min-width: 6em; }
/* phones: a text table stacks, one row to a block, each value under its column's name */
@media (max-width: 560px) {
  .iv-tw:has(> .iv-tbl--text) { overflow: visible; background: none; }
  .iv-tbl--text, .iv-tbl--text tbody, .iv-tbl--text tr, .iv-tbl--text th, .iv-tbl--text td { display: block; }
  .iv-tbl--text thead { display: none; }
  .iv-tbl--text tr { padding: 12px 0 13px; border-bottom: var(--hair-w) solid var(--hair); }
  .iv-tbl--text tbody tr:first-child { border-top: 1px solid var(--ink); }
  .iv-tbl--text tbody th { position: static; padding: 0 0 6px; border: 0; font: 400 17px/1.35 var(--serif); background: none; }
  .iv-tbl--text td { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; text-align: left !important; white-space: normal; min-width: 0; }
  .iv-tbl--text td.n { white-space: normal; } /* a numeric column's nowrap would push its label over the value */
  /* phrases in right-aligned columns ("$24.8B (Google Cloud)", "13 points higher") wrap so the last column stays in view */
  .iv-tbl:not(.iv-tbl--fin):not(.iv-tbl--text) td.n { white-space: normal; min-width: 5em; }
  .iv-tbl--text td::before { content: attr(data-label); font: var(--lbl-w) var(--lbl-xs)/1.6 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2); }
  .iv-tbl--text td:has(> .iv-cv:empty), .iv-tbl--text tbody th:empty { display: none; }
  /* a summary row keeps one rule, on the row, with the row's own 12px above its text */
  .iv-tbl--text tr.is-sum { margin-top: calc(-1 * var(--hair-w)); border-top: 1px solid var(--ink-2); }
  .iv-tbl--text tr.is-sum > * { border-top: 0; }
}
/* small phones: tables that missed the column by a few pixels now fit, so no figure is cut under the scroll edge */
@media (max-width: 400px) {
  .iv-tbl:not(.iv-tbl--text) :is(th, td):not(:last-child) { padding-right: 8px; }
  .iv-tbl--cases tbody th, .iv-tbl--rdcf tbody th { min-width: 7.25em; }
  .iv-tbl--cases td.n, .iv-tbl--rdcf td.n { min-width: 6em; }
  .iv-tbl:not(.iv-tbl--fin) thead th.n { min-width: 4em; }
  .iv-tbl:not(.iv-tbl--fin):not(.iv-tbl--text) td.n { min-width: 4.25em; }
}
/* once a wide table scrolls under its pinned first column, the column casts a soft edge */
@supports (animation-timeline: scroll(x)) {
  .iv-tw { scroll-timeline: --iv-tw x; }
  .iv-tw .iv-tbl tbody th::after, .iv-tw .iv-tbl thead th:first-child::after {
    content: ""; position: absolute; top: 0; bottom: -1px; right: -10px; width: 10px; pointer-events: none;
    background: linear-gradient(to right, color-mix(in srgb, var(--ink) 13%, transparent), transparent);
    opacity: 0; animation: iv-pin linear both; animation-timeline: --iv-tw; animation-range: 0 24px;
  }
  @keyframes iv-pin { to { opacity: 1; } }
  @media (max-width: 560px) { .iv-tw .iv-tbl--text tbody th::after { content: none; } }
}
.iv-tblfig { margin: clamp(36px, 4.4vw, 52px) 0; }
.iv-tblfig .iv-chart::before { content: "Table " counter(iv-tbl); content: "Table " counter(iv-tbl) / ""; }
.iv-tblfig .iv-chart { padding-bottom: 2px; }
.iv-tblfig .iv-tw { margin-bottom: 0; }
.iv-tblnote { margin: 10px 0 0 !important; font: 400 12.5px/1.55 var(--sans) !important; color: var(--ink-2); }
.iv-legend-k { margin: 8px 0 0 !important; font: 400 12px/1.5 var(--sans) !important; color: var(--ink-2); }
.iv-legend-k .iv-k { margin: 0 .35em 0 0; }
.iv-legend-k > span + span { margin-left: 1em; }

/* the three cases, with their one-line stories */
.iv-stories { margin: 14px 0 1lh; padding: 0; display: grid; gap: 0; border-top: var(--hair-w) solid var(--hair); }
.iv-stories > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; padding: 11px 0 12px; border-bottom: var(--hair-w) solid var(--hair); }
.iv-stories dt { font: var(--lbl-w) var(--lbl-xs)/1.7 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2); }
.iv-stories dt.is-base { color: var(--ink); }
.iv-stories dd { margin: 0; font: 400 16px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }

/* the margin-of-safety statement */
.iv-mosline {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 10px 0 1lh; padding: 0; list-style: none;
  border-top: 1px solid var(--ink);
}
.iv-mosline > li { min-width: 0; padding: 14px 14px 16px 0; margin: 0 !important; border-bottom: var(--hair-w) solid var(--hair); }
.iv-mosline > li::before { content: none !important; }
.iv-mosline > li + li { padding-left: 14px; border-left: var(--hair-w) solid var(--hair); }
.iv-mosline .lbl { display: block; color: var(--ink-2); }
.iv-mosline .v { display: block; margin-top: 6px; font: 200 clamp(26px, 3vw, 34px)/1 var(--stat); letter-spacing: -.03em; color: var(--ink); }
.iv-mosline .m { display: block; margin-top: 6px; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
.iv-mosline .is-live .v { color: var(--ink); }
.iv-mosline .is-live .lbl::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--iv-live); vertical-align: .05em;
}
@media (max-width: 520px) {
  .iv-mosline { grid-template-columns: 1fr; }
  .iv-mosline > li + li { padding-left: 0; border-left: 0; }
  .iv-mosline > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
  .iv-mosline .v { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- the end: sources, method, the line ---------- */
.iv-end { width: var(--iv-wide); margin: clamp(80px, 10vw, 128px) auto 0; font-family: var(--sans); }
.iv-end .iv-h-lbl { margin-bottom: 4px; }
.iv-sources { list-style: none; margin: 0; padding: 0; counter-reset: none; }
@media (min-width: 900px) { .iv-sources { columns: 2; column-gap: 56px; } }
.iv-sources > li {
  break-inside: avoid; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 8px;
  padding: 12px 0 13px; border-bottom: var(--hair-w) solid var(--hair); scroll-margin-top: 100px;
}
.iv-sources .no { font: 400 15px/1.45 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums tabular-nums; }
.iv-sources .t { font: 400 15.5px/1.45 var(--serif); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.iv-sources .t a { color: inherit; text-decoration: underline 1px var(--hair-strong); text-underline-offset: 3px; }
@media (hover: hover) { .iv-sources .t a:hover { text-decoration-color: currentColor; } }
.iv-sources .meta { grid-column: 2; margin-top: 4px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.iv-sources .type {
  display: inline-block; margin-right: .6em; font: var(--lbl-w) 11px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--bronze);
}
.iv-sources .back { position: relative; display: inline-flex; align-items: center; min-height: 24px; margin-left: .4em; padding: 0 4px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.iv-six dd .go { position: relative; }
@media (pointer: coarse) { .iv-sources .back::after, .iv-six dd .go::after { content: ""; position: absolute; inset: -10px -10px; } }
@media (hover: hover) { .iv-sources .back:hover { color: var(--ink); } }
.iv-sources > li:target { background: color-mix(in srgb, var(--bronze) 9%, transparent); }
.iv-method { margin-top: clamp(40px, 5vw, 56px); display: grid; gap: 28px clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .iv-method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iv-method h3 { margin: 0 0 8px; font: var(--lbl-w) var(--lbl-s)/1.3 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink); }
.iv-method p { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.iv-method p + p { margin-top: 8px; }
.iv-method .iv-k { margin: 0 .25em 0 0; }
.iv-closer { margin-top: clamp(40px, 5vw, 56px); padding-top: 14px; border-top: 1px solid var(--ink); }
.iv-closer .iv-adv { font-size: 14px; }

/* next and previous companies */
.iv-more { width: min(var(--frame), 100% - 2 * var(--gutter)); margin: clamp(64px, 8vw, 104px) auto 0; }
.iv-more-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .iv-more-in { grid-template-columns: 1fr; } }
.iv-more a {
  display: grid; gap: 6px; padding: 20px 22px 22px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--elev-1);
  color: var(--ink); text-decoration: none; transition: translate var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.iv-more a.next { text-align: right; }
.iv-more a.only { grid-column: 1 / -1; max-width: 520px; }
.iv-more .dir { font: var(--lbl-w) var(--lbl-s)/1.3 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2); }
.iv-more .t { font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--serif); letter-spacing: -.012em; }
.iv-more .d { font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
@media (hover: hover) { .iv-more a:hover { translate: 0 -2px; box-shadow: var(--elev-2); } }
.iv-more a:active { scale: .99; }

/* ============================================================
   THE INDEX: /investing
   ============================================================ */
.ivx { padding: 0 var(--frame-pad); }
.ivx-head { padding: clamp(40px, 7vw, 104px) 0 clamp(36px, 5vw, 64px); display: grid; gap: 0 clamp(40px, 6vw, 96px); }
@media (min-width: 1000px) { .ivx-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; } }
.ivx-head .tag { display: block; margin-bottom: clamp(16px, 2vw, 24px); }
.ivx-head h1 {
  margin: 0; font: 400 var(--fs-d2)/1.02 var(--serif); letter-spacing: -.026em; color: var(--ink); text-wrap: balance; max-width: 15ch;
}
.ivx-lede { margin: clamp(18px, 2.2vw, 28px) 0 0; max-width: 36em; font: 400 var(--fs-lede)/1.5 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.ivx-lede b { font-weight: 400; color: var(--ink); }
.ivx-aside { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--ink); }
@media (min-width: 1000px) { .ivx-aside { margin-top: 0; } }
.ivx-aside .ledger { border-top: 0; }
.ivx-aside .ledger > div { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); padding: 10px 0 11px; }
.ivx-aside .ledger dd { font-size: 16px; }
@media (max-width: 480px) { .ivx-aside .ledger > div { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); } }

/* the ledger of companies */
.ivx-list { margin-top: 8px; }
.ivx-cols, .ivx-row {
  display: grid; grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1.6fr) 268px 28px; column-gap: clamp(16px, 2.2vw, 32px); align-items: center;
}
.ivx-cols {
  padding: 0 0 10px; border-bottom: 1px solid var(--ink);
  font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2);
}
.ivx-rows { list-style: none; margin: 0; padding: 0; }
.ivx-rows > li { border-bottom: var(--hair-w) solid var(--hair); }
.ivx-row { padding: 22px 0 24px; color: var(--ink); text-decoration: none; position: relative; }
a.ivx-row { transition: background-color var(--d-2) var(--ease-out); }
@media (hover: hover) {
  a.ivx-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
  a.ivx-row:hover .ivx-go { translate: 3px 0; color: var(--ink); }
  a.ivx-row:hover .ivx-name { text-decoration: underline 1px currentColor; text-underline-offset: 6px; }
}
a.ivx-row:focus-visible { outline-offset: 4px; }
.ivx-no { font: 400 30px/1 var(--serif); color: var(--bronze); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.ivx-co { min-width: 0; display: grid; gap: 6px; }
.ivx-name { font: 400 clamp(24px, 2.4vw, 32px)/1.08 var(--serif); letter-spacing: -.016em; color: var(--ink); text-wrap: balance; }
.ivx-tk { font: var(--lbl-w) var(--lbl-s)/1.3 var(--sans); letter-spacing: var(--trk-s); text-transform: uppercase; color: var(--ink-2); }
.ivx-th { min-width: 0; font: 400 17px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.ivx-rg { min-width: 0; display: grid; gap: 4px; }
.ivx-rg .iv-mini { display: block; width: 100%; max-width: 268px; height: auto; }
.ivx-rg .ivx-rn { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.ivx-rg .ivx-rn b { font-weight: 500; color: var(--ink); }
.ivx-go { font: 400 18px/1 var(--sans); color: var(--ink-2); transition: translate var(--d-2) var(--ease-out); justify-self: end; }
.ivx-row.is-pending .ivx-th { color: var(--ink-2); font-style: italic; }
.ivx-row.is-pending .ivx-go { visibility: hidden; }
.ivx-scale { display: flex; justify-content: space-between; font: 400 12px/1 var(--sans); letter-spacing: .04em; color: var(--ink-2); padding: 0 6px; }
.ivx-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); }
.ivx-key li { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) {
  .ivx-cols, .ivx-row { grid-template-columns: 44px minmax(0, 1fr) 240px 20px; }
  .ivx-cols .c-th { display: none; }
  .ivx-th { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; font-size: 16px; }
  .ivx-no, .ivx-co, .ivx-rg, .ivx-go { grid-row: 1; }
  .ivx-no { font-size: 26px; }
}
@media (max-width: 700px) {
  .ivx-cols { display: none; }
  .ivx-row { grid-template-columns: 40px minmax(0, 1fr) 20px; row-gap: 10px; padding: 20px 0 22px; align-items: start; }
  .ivx-no { grid-column: 1; grid-row: 1; font-size: 24px; padding-top: 2px; }
  .ivx-co { grid-column: 2; grid-row: 1; }
  .ivx-go { grid-column: 3; grid-row: 1; padding-top: 6px; }
  .ivx-th { grid-column: 2 / 4; grid-row: 2; margin: 0; }
  .ivx-rg { grid-column: 2 / 4; grid-row: 3; }
}
.ivx-keyrow { margin-top: 12px; }

/* how the pages work */
.ivx-method {
  margin-top: clamp(64px, 8vw, 112px); padding-top: 14px; border-top: 1px solid var(--ink);
  display: grid; gap: 28px clamp(32px, 4vw, 64px);
}
@media (min-width: 900px) { .ivx-method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ivx-method h2 { margin: 0 0 10px; font: 400 clamp(22px, 2.2vw, 26px)/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.ivx-method p { margin: 0; font: 400 16px/1.6 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.ivx-method p + p { margin-top: 10px; }
.ivx-method .iv-k { margin: 0 .3em 0 0; }
.ivx-fine { margin-top: clamp(48px, 6vw, 72px); padding-top: 14px; border-top: var(--hair-w) solid var(--hair); }

/* ---------- print: the page as a memo ---------- */
@media print {
  .iv-rail, .iv-more, .iv-data > summary, .skip-link { display: none !important; }
  .iv-v-s, .iv-v-m { display: none !important; }
  .iv-v-l { display: block !important; }
  .iv-quote { box-shadow: none; border: 1px solid #999; }
  .iv-fig, .iv-tblfig, .iv-sources > li { break-inside: avoid; }
  .iv-data { display: none; }
}
@media (forced-colors: active) {
  .iv-svg .iv-m-live, .iv-mini .iv-m-live { fill: Highlight; }
  .iv-svg :is(.iv-m-a, .iv-m-b, .iv-m-c) { fill: CanvasText; }
}
.ivx-note { margin: 8px 0 0; max-width: 64ch; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }
.ivx-key .iv-sw--sq { width: 16px; height: 9px; }
.ivx-key .iv-sw--dot { width: 10px; height: 10px; }
.ivx-key .iv-sw--tick { height: 14px; margin: 0 4px; }
/* on the espresso card the margin-of-safety wash needs a little more light to read */
.iv-quote { --iv-mos: color-mix(in srgb, var(--ink) 13%, transparent); }

/* legal information and disclosures */
.iv-disc { margin-top: clamp(48px, 6vw, 72px); }
.iv-disc .iv-h-lbl { margin-bottom: 16px; }
.iv-disc-t p { margin: 0 0 12px; font: 400 13.5px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; break-inside: avoid; }
.iv-disc-t p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .iv-disc-t { columns: 2; column-gap: 56px; } }