/* ============================================================================
   Montis Financial — QUARTERLY COMMENTARY ARCHIVE
   Loaded only by the archived Investment Market Report pages (2022 Q4 – 2024 Q2)
   on top of warm-modernist.css. Adds: the archive banner, inline-SVG chart
   figures, the per-page disclosure footer, and print.

   Every colour used by every chart is declared once, here, in :root. The SVGs
   carry no literal colour values — recolour a series by editing one line below.

   ONE RED, ONE MEANING. --neg is the negative-return signal. It is used by the
   negative figures in the return tables and by the negative bars in the bond
   chart, which are the same signal. No other chart colour is red, and no
   categorical scale below contains red, so a red mark anywhere on these pages
   always means "a loss" and never means "series number three".
   ========================================================================== */

:root {
  /* the loss signal — tables and the bond chart's negative bars, nothing else */
  --neg:      #A32D22;   /* 6.2:1 on --cream */

  /* Categorical chart scale: navy → slate ramp plus a deepened gold. No red, by
     rule. Series separate by lightness as well as hue, so the charts survive
     greyscale printing and the common forms of colour vision deficiency.

     Ratios below are against --cream, since the charts sit directly on the page
     rather than in a panel. Every value clears 3:1 (WCAG 1.4.11, non-text
     graphics). The four marked "text-safe" also clear 4.5:1 and so may be used
     for a label; the three lighter ones may not, which is why the seven-series
     Fed chart labels every line in --ch-ink and lets position, not colour, tie
     a label to its line. */
  --ch-now:   #0A2342;   /* navy        14.0:1  text-safe — highlighted series */
  --ch-b:     #35485E;   /* deep slate   8.3:1  text-safe */
  --ch-d:     #55606E;   /* slate        5.7:1  text-safe */
  --ch-a:     #7C5A16;   /* bronze       5.6:1  text-safe */
  --ch-e:     #6C7F94;   /* light slate  3.7:1  lines and fills only */
  --ch-f:     #78828F;   /* pale slate   3.5:1  lines and fills only */
  --ch-c:     #9E7D2A;   /* deep gold    3.4:1  lines and fills only */

  /* chart furniture */
  /* The paper these charts are actually drawn on. It was cream, matching the
     page background — but the issues now sit on a white sheet (.nl-page), so
     every mark that means "knock a hole through to the paper" was leaving a
     cream mark on white: 27 dirty halos around the dots of the yield curve
     alone. It is the sheet's colour, not the page's, that this has to track. */
  --ch-plot:  #FFFFFF;   /* the sheet's own paper — charts are not panelled */
  --ch-grid:  #E4DCCA;
  --ch-ink:   #0A2342;
  --ch-mute:  #55606E;
  --ch-band:  #C6B489;   /* recessive fill: "everything else". 1.8:1, so it is
                            never asked to carry meaning — it is hairlined at
                            5.7:1 and its value is printed beside it. */
}

/* ---- archive banner: the first thing on the page, not a footnote ---------- */
.arch-banner {
  background: var(--warm);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--hair);
}
.arch-banner .wrap { padding-top: 20px; padding-bottom: 20px; }
.arch-banner .k {
  display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-ink); margin-bottom: 6px;
}
.arch-banner p { font-size: 1.02rem; color: var(--navy); margin: 0; max-width: 78ch; }
.arch-banner p strong { font-weight: 600; }
.arch-banner .arch-pdf {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--navy);
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.arch-banner .arch-pdf:hover { color: var(--gold-ink); }
@media (max-width: 640px) { .arch-banner p { font-size: 0.96rem; } }

/* ---- index-return tables -------------------------------------------------
   Caption, frame and focus ring live in document.css, shared by all eleven
   newsletter pages. Only these seven put their source line in a <tfoot>, so
   only these seven need it styled — at the size and colour of the .tbl-src
   paragraphs the other pages use, so a <tfoot> looks like the rest of the
   newsletters rather than like part of the data. */
.tbl tfoot td {
  text-align: left; white-space: normal; font-size: 12.5px; color: var(--slate);
  border-bottom: 0; padding: 9px 0 0;
}
.tbl tbody td.neg { color: var(--neg); }

/* ---- chart figures -------------------------------------------------------
   No frame and no fill. A bitmap of someone else's chart earns a border — it
   is visibly a reproduced artifact. These are drawn in the page's own ink on
   the page's own paper, so a box would only make them look imported. Title and
   subtitle are HTML, set in the article's type, not the chart's. */
.chart-fig { margin: 40px 0; max-width: 100%; }
.chart-fig svg { display: block; width: 100%; height: auto; }
/* No max-width on the title: it should run the full width of the plot beneath
   it and break only where the chart itself ends. Measuring it to 46ch put the
   line break in an arbitrary place that had nothing to do with the drawing. */
.chart-fig .chart-h {
  font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 1.12rem;
  line-height: 1.3; color: var(--navy); margin: 0 0 2px;
}
.chart-fig .chart-sub {
  font-size: 13.5px; color: var(--slate); margin: 0 0 14px;
}
.chart-fig figcaption { font-size: 12.5px; line-height: 1.65; color: var(--slate); margin-top: 12px; }
.chart-fig figcaption .prov { display: block; margin-top: 6px; }

/* The charts stay inside the text column rather than breaking out into the
   gutter. Once the chart's own title block moved into HTML there was enough
   room at column width, and a figure that runs wider than the prose reads as a
   separate object dropped into the page — which is the thing to avoid here. */

/* The normalised Illustrator exports carry their own type size, because each
   one is drawn on its own canvas -- roughly 400 units wide against the 960 the
   hand-authored charts use, so one absolute size cannot serve both. It arrives
   as the custom property --fs and is applied here, as a class rule, so the
   breakpoint below can still override it. Set inline as `font-size` it beat
   every rule in this file and the narrow-screen block did nothing at all on
   seventeen of the twenty-one charts. */
.nl-chart text { font-size: var(--fs); }

/* Narrow screens: the SVG scales with its box, so every label shrinks with it.
   Drop the thinnable x-ticks and size the rest up in user units, which buys
   back roughly half the lost legibility without cropping the chart.

   The hand-authored charts take an absolute size, against their known 960-unit
   canvas. The exports take a multiple of their own --fs, which is the only way
   to say "a third larger" to seventeen charts that do not share a scale. */
@media (max-width: 780px) {
  .chart-fig .c-tick.dense { display: none; }

  /* the hand-authored four, on their known 960-unit canvas. Scoped off the
     exports explicitly: `.chart-fig .c-tick` is two classes and out-specifies
     any selector the exports can match on, so unscoped it captured them too
     and set a 400-unit canvas in 20-unit type.

     Left at the sizes they have always had. Their viewBox is authored by hand
     in charts.py, so unlike the exports it cannot be given room to grow into,
     and at 390px two of the four already push a label 2.5 units past their own
     edge at these sizes. Raising them to match the exports took that to 35.
     Fixing it means redrawing their canvases, which is a change to the four
     charts themselves, not to how the exports are processed. */
  .chart-fig svg:not(.nl-chart) .c-tick   { font-size: 20px; }
  .chart-fig svg:not(.nl-chart) .c-lbl    { font-size: 22px; }
  .chart-fig svg:not(.nl-chart) .c-axname { font-size: 21px; }
  .chart-fig svg:not(.nl-chart) .c-sub    { font-size: 20px; }
  .chart-fig svg:not(.nl-chart) .c-note   { font-size: 25px; }

  /* the exports, each on its own canvas: a multiple of their own --fs is the
     only way to say "half again larger" to seventeen charts of different
     scales.

     Axis ticks only. The viewBox was cropped around the type at its base size,
     and growing type at render time cannot re-crop it -- so anything already
     near an edge is pushed straight through it. Ticks are short, they thin to
     eight, and they sit inside the plot; the series labels are whole sentences
     the designer baked into the artwork ("Amazon, Google, Microsoft, Meta and
     Oracle (hyperscalers) capital expenditure as a percentage of...") which
     already run to the edge and cannot be read at 306 points at any size. They
     stay at their base size, and their content is in the figure's HTML title
     and the SVG <desc> besides. */
  .chart-fig .nl-chart .c-tick { font-size: calc(var(--fs) * 1.5); }
}

/* chart text — sized in user units against each chart's own viewBox */
.c-sub    { font-family: 'Work Sans', sans-serif; fill: var(--ch-mute); }
.c-tick   { font-family: 'Work Sans', sans-serif; fill: var(--ch-mute); }
.c-axname { font-family: 'Work Sans', sans-serif; fill: var(--ch-mute); }
.c-note   { font-family: 'Work Sans', sans-serif; font-weight: 600; fill: var(--ch-ink); }
.c-grid   { stroke: var(--ch-grid); stroke-width: 1; }
.c-zero   { stroke: var(--ch-mute); stroke-width: 1.25; }
.c-line   { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.c-line.is-now  { stroke-width: 3.4; }
.c-line.is-dash { stroke-dasharray: 9 5; }
/* Series labels default to ink; only charts whose every series colour is
   text-safe override this with an l-* class. */
.c-lbl    { font-family: 'Work Sans', sans-serif; font-weight: 600; fill: var(--ch-ink); }

.s-now  { stroke: var(--ch-now); } .l-now  { fill: var(--ch-now); }
.s-a    { stroke: var(--ch-a);   } .l-a    { fill: var(--ch-a);   }
.s-b    { stroke: var(--ch-b);   } .l-b    { fill: var(--ch-b);   }
.s-c    { stroke: var(--ch-c);   } .l-c    { fill: var(--ch-c);   }
.s-d    { stroke: var(--ch-d);   } .l-d    { fill: var(--ch-d);   }
.s-e    { stroke: var(--ch-e);   } .l-e    { fill: var(--ch-e);   }
.s-f    { stroke: var(--ch-f);   } .l-f    { fill: var(--ch-f);   }

.b-pos  { fill: var(--ch-now); }
.b-neg  { fill: var(--neg);    }
/* The "rest of the index" fill is a light tan, reproduced as published, and at
   2:1 it is too low to delineate itself. Its value is stated in text beside it,
   so the fill carries no information on its own — but the object's boundary
   still has to be perceivable, hence a 6.2:1 hairline on all four edges. */
.b-band { fill: var(--ch-band); stroke: var(--ch-mute); stroke-width: 1.25; }
.f-a    { fill: var(--ch-e); } .f-b { fill: var(--ch-d); } .f-c { fill: var(--ch-now); }
.c-dot  { stroke: var(--ch-plot); stroke-width: 1.5; }

/* Body sub-headings: the .sec h2 24ch cap is released in document.css, so all
   eleven newsletter pages get it rather than only these seven. */

/* ---- provenance for the rebuilt charts ----------------------------------
   Kept at the foot of the article, not under each figure: how a chart was
   reconstructed is a record-keeping matter, and in the middle of the
   commentary it interrupts the read. */
.nl-chartnote { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair); }
.nl-chartnote h2 { font-size: 1rem; margin: 0 0 10px; max-width: none; }
.nl-chartnote p { font-size: 12.5px; line-height: 1.7; color: var(--slate); margin: 0 0 10px; }
.nl-chartnote p:last-child { margin-bottom: 0; }
.nl-chartnote strong { color: var(--navy); font-weight: 600; }

/* ---- footnote source list (Q2 2024) ------------------------------------- */
.nl-sources { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hair); }
.nl-sources h2 { font-size: 1rem; margin: 0 0 10px; }
.nl-sources ol { font-size: 13px; color: var(--slate); margin: 0; padding-left: 2.2em; }
.nl-sources li { padding: 2px 0; }

/* ---- per-page disclosure footer ----------------------------------------- */
.nl-legal { margin-top: 52px; border-top: 3px solid var(--gold); padding-top: 22px; }
.nl-legal h2 {
  font-family: 'Work Sans', sans-serif; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin: 0 0 4px;
}
.nl-legal .scope { font-size: 12.5px; color: var(--slate); margin: 0 0 16px; }
.nl-legal p { font-size: 12.5px; line-height: 1.72; color: var(--slate); margin: 0 0 14px; }
.nl-legal .addr { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--navy); }
.nl-legal a { color: var(--navy); border-bottom: 1px solid var(--gold); }

/* ==========================================================================
   PRINT — a clean copy of one issue: banner, commentary, charts, tables,
   disclosures. Everything that is navigation or marketing comes off.
   ========================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  :root {
    --ch-plot: #FFFFFF;
    --ch-grid: #D8D8D8;
  }

  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; font-size: 10.5pt; line-height: 1.5; }

  /* The scroll-reveal animation starts sections at opacity 0. A section the
     reader has not scrolled past would otherwise print blank. */
  .js .reveal, .js .reveal.in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  .proto, .site-head, .skip, .lightbox,
  .sec.cta, .sec.warm-band, .crumbs, .site-foot .foot-grid,
  .arch-banner .arch-pdf, .nl-popout { display: none !important; }

  main, .sec { padding: 0 !important; border: 0 !important; }
  .wrap, .wrap-wide { max-width: none; padding: 0; }
  .narrow, .article-body, .nl-body { max-width: none; }

  .page-head { padding: 0 0 10pt !important; }
  .page-head h1 { font-size: 20pt; max-width: none; }

  /* the archive notice must survive printing — it is the whole point */
  .arch-banner {
    background: transparent; border-top: 2pt solid #000; border-bottom: 1pt solid #000;
    padding: 8pt 0; margin-bottom: 14pt;
  }
  .arch-banner .wrap { padding: 0; }
  .arch-banner p { font-size: 10pt; color: #000; }

  /* the sheet is a screen device; on paper the page is already the sheet */
  .nl-page { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .nl-body > .lede { font-size: 16pt; margin: 0 0 14pt; color: #000; }
  .nl-body h2 { font-size: 13pt; margin-top: 18pt; }
  .nl-body p, .nl-bullets li { color: #000; }
  .nl-quote { border: 1.5pt solid #000; color: #000; font-size: 12pt;
              padding: 8pt 10pt; margin: 12pt 0; }
  .nl-body .tbl caption { position: static; width: auto; height: auto;
              margin: 0; clip: auto; clip-path: none; overflow: visible; }

  /* SVG fills are content, not background — but say so explicitly, because the
     bond chart's whole point is which bars are red. */
  .chart-fig svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .chart-fig, .tbl-wrap, figure, table { break-inside: avoid; page-break-inside: avoid; }
  .nl-body .chart-fig { width: auto; }
  .chart-fig .chart-h { color: #000; font-size: 12pt; }
  .chart-fig .chart-sub, .chart-fig figcaption { color: #000; font-size: 8.5pt; }
  .tbl-wrap { overflow: visible; }

  .tbl { font-size: 9.5pt; }
  .tbl th, .tbl td { padding: 5pt 7pt; border-bottom: 1px solid #BBB; }
  .tbl thead th { color: #000; border-bottom: 1px solid #000; }
  .tbl tbody td.neg { color: #000; font-weight: 600; }
  .tbl tbody td.neg::after { content: " (loss)"; font-size: 7.5pt; font-weight: 400; }
  .tbl tbody tr:hover { background: none; }
  .tbl caption, .tbl tfoot td { color: #000; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  .nl-legal { break-before: page; page-break-before: always; border-top: 2pt solid #000; }
  .nl-legal h2, .nl-legal p, .nl-legal .scope { color: #000; }
  .nl-legal p { font-size: 8.5pt; line-height: 1.5; }

  .site-foot { border-top: 1px solid #999; padding: 8pt 0 0; }
  .site-foot .legal p { font-size: 8pt; color: #000; }
  .site-foot .legal .links { display: none; }

  a { color: #000; text-decoration: none; }
  .arch-banner a[href]::after,
  .nl-legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}