/* ============================================================================
   Montis Financial - DOCUMENT FURNITURE
   The quarterly commentary sheet, the archive index, the by-subject index, and
   the signup offers that hang off them.

   This layer used to be called option-a.css, which was a misnomer: none of it
   is Option A's layout. It is the styling for pages that are documents rather
   than web copy, and Options B and C reproduce those pages as documents too --
   a quarterly commentary is a quarterly commentary in any layout. Renamed so
   the variants can load it without appearing to load a rival's stylesheet.

   Stays inside the locked Warm Modernist tokens: no new colors, shapes or type.
   ========================================================================== */

/* Newsletter sub-headings run the width of the text column.
   warm-modernist.css caps .sec h2 at 24ch, which is right for a section
   heading at its 2.5rem display size but wrong once .nl-body h2 drops it to
   1.5rem — 24ch is then about 290px, and headings break after four or five
   words for no reason a reader can see. Releasing the cap only for newsletter
   body headings; section headings elsewhere keep their measure. */
.nl-body h2 { max-width: none; }

/* ---- the issue's own headline --------------------------------------------
   Each quarterly carries a title of its own — "The stock market that could…",
   "A Deep Breath" — separate from the h1, which names the report. It opens the
   article rather than the page head, because it belongs to the piece and not
   to the site furniture.

   .lede is only styled under .page-head in warm-modernist.css, so inside the
   article it inherited body type and read as an ordinary first paragraph.
   Setting it in Lora at a size between the h1 and the section h2s makes it
   read as what it is: the title of this issue. */
.nl-body > .lede {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 32px;
  max-width: 26ch;
}

/* ---- the report as a document --------------------------------------------
   These were published as documents and are still read as documents, so the
   article sits on a white sheet over the page's cream rather than running edge
   to edge like web copy. The measure stays at the .article-body 720px — a
   printed page's line length, not the full width of the browser — and the
   sheet carries a page margin around it. No radius: the locked system allows
   it only on imagery and the primary CTA, and square corners read as paper. */
.nl-page {
  max-width: 872px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(10, 35, 66, .05),
              0 22px 48px -16px rgba(10, 35, 66, .13);
  padding: clamp(26px, 4.4vw, 56px) clamp(20px, 4vw, 52px);
}
.nl-page > .narrow { margin-inline: auto; }

/* The disclosure closes the same sheet, so it needs a rule above it rather
   than the gap it had when it sat on its own. */
.nl-page .nl-legal {
  border-top: 1px solid var(--hair);
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 32px);
}

@media (max-width: 620px) {
  .nl-page { border-left: 0; border-right: 0; box-shadow: none; }
}

/* ---- previous / next issue -----------------------------------------------
   Without this every issue is a cul-de-sac: finish one and the only way on is
   back to the index or to the contact page, so fifteen quarters of a
   continuing argument read as fifteen unrelated documents. */
.nl-seq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  border-top: 1px solid var(--hair);
  margin-top: clamp(30px, 4vw, 44px); padding-top: 22px;
}
.nl-seq a {
  display: block; text-decoration: none;
  border: 1px solid var(--hair); padding: 14px 16px;
  transition: border-color .18s ease;
}
.nl-seq a:hover { border-color: var(--rule); }
.nl-seq .k { display: block; margin-bottom: 4px; }
.nl-seq-t { font-family: 'Lora', Georgia, serif; color: var(--navy); font-size: 1.05rem; }
.nl-seq-next { text-align: right; grid-column: 2; }
@media (max-width: 560px) {
  .nl-seq { grid-template-columns: 1fr; }
  .nl-seq-next { text-align: left; grid-column: 1; }
}

/* Opt-in sits unchecked by default — a pre-ticked consent box is the thing
   that makes a signup feel like a trick. */
.opt-in { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.opt-in input { margin-top: 3px; }
.opt-in label { font-size: .9rem; }

/* ---- end-of-report signup popout -----------------------------------------
   A corner panel, not a full-screen interruption. It appears once the reader
   has reached the foot of the report (or on exit intent), and covering the
   page someone is still reading, on a fiduciary firm's commentary, would cost
   more trust than an address is worth. It never blocks the page: no overlay,
   no scroll lock, Esc closes it, and dismissing is remembered. */
.nl-popout {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: min(384px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 48px -14px rgba(10, 35, 66, .30);
  padding: 22px 24px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease;
  /* The signup gained a name field on 8 September, taking the card from roughly
     250px to roughly 310px. That fits a phone held upright and does not fit one
     held sideways -- and a fixed card taller than the viewport does not scroll
     with the page, so the button would simply be unreachable. Cap it and let the
     card scroll instead. dvh first, because the mobile address bar is exactly the
     60px that decides this. The cap is worth keeping whatever the card holds:
     the failure it prevents is silent and total. */
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
}
@supports not (height: 100dvh) {
  .nl-popout { max-height: calc(100vh - 44px); }
}
.nl-popout.in { opacity: 1; transform: none; }
.nl-popout .k { margin: 0 0 6px; }
.nl-popout > p { margin: 0 0 12px; font-size: .96rem; }
.nl-popout .hint { font-size: .82rem; margin-top: 10px; }
.nl-popout-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: 4px 8px;
  color: var(--slate);
}
.nl-popout-x:hover { color: var(--navy); }
.nl-popout-x:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

@media (max-width: 620px) {
  .nl-popout {
    right: 0; left: 0; bottom: 0; width: auto;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nl-popout { transition: none; transform: none; }
}

/* ---- "read it as originally distributed" ---------------------------------
   The offer asks, it does not gate: the issue is already readable on the page
   and the direct link sits inside the dialog, so nobody trades an address for
   something they can already read.

   It opens as a dialog rather than expanding in place. As a <details> panel it
   unfolded into a block the size of the article and shoved the page down; the
   offer should be the size of the offer. */
.arch-pdf-open {
  display: inline-block; margin-top: 12px;
  font-size: .92rem; font-weight: 600; color: var(--gold-ink);
  text-decoration: none;
}
.arch-pdf-open:hover { text-decoration: underline; }
.arch-pdf-open:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.nl-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--rule); background: #fff;
  padding: 26px 28px 24px;
  box-shadow: 0 24px 60px -16px rgba(10, 35, 66, .38);
}
.nl-dialog::backdrop { background: rgba(10, 35, 66, .42); }
.nl-dialog h2 { font-size: 1.3rem; margin: 0 0 8px; max-width: none; }
.nl-dialog > p { font-size: .95rem; margin: 0 0 12px; }
.nl-dialog .nl-dialog-link { font-weight: 600; }
.nl-dialog .form { border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 16px; }
.nl-dialog label { display: block; margin-bottom: 6px; font-size: .92rem; }
.nl-dialog .opt-in label { display: inline; margin: 0; }
.nl-dialog .hint { font-size: .82rem; }
.nl-dialog-x { position: absolute; top: 6px; right: 8px; }
.nl-dialog-x button {
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: 4px 8px; color: var(--slate);
}
.nl-dialog-x button:hover { color: var(--navy); }
.nl-dialog-x button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* ---- pull-quote callouts -------------------------------------------------
   Every callout is a sentence lifted out of the article itself, so it needs to
   read as a deliberate marker rather than as new copy. warm-modernist.css
   rules it on the left edge only; carrying that same 3px gold all the way
   round closes it into a box, which reads as a device and not as a paragraph
   that happens to be indented. */
.nl-body .nl-quote {
  border: 3px solid var(--gold);
  padding: 22px 26px;
  margin: 38px 0;
}

/* The caption names the table and labels its scroll region, so it has to stay
   in the markup for screen readers and for the keyboard-reachable overflow.
   It is not shown: every return table already sits under a heading that names
   it ("U.S. Equities") above a column headed INDEX, so printing "U.S. equity
   index returns" between them says the same thing a third time. */
.nl-body .tbl caption {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- newsletter return tables -------------------------------------------
   Shared by all eleven newsletter pages.

   The <caption> names the table and labels its scroll region. In the site's
   default table styling it renders gold uppercase, which stacks a second gold
   uppercase line directly above the gold uppercase header row and makes the
   table read as a panel pasted onto the page; in Lora navy it reads as a
   figure title, matching the chart titles, and competes with nothing. */
.tbl caption {
  caption-side: top; text-align: left;
  font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 1.02rem;
  line-height: 1.3; color: var(--navy); padding: 0 0 11px;
}

/* No frame. warm-modernist.css declares .tbl-wrap twice — line 290 sets
   `border: 1px solid var(--hair)` and line 405 redeclares the selector without
   a border, which does not reset it, so every table on the site is currently
   boxed. That box is what makes a table look dropped onto the page. */
.nl-body .tbl-wrap { border: 0; }

/* .tbl-wrap scrolls on narrow screens, so it carries tabindex to make the
   overflow keyboard-reachable — which means it needs a visible focus ring. */
.tbl-wrap:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* The archive extras that used to sit here -- .nl-extras / .nl-years, the
   by-subject teaser and the compiled-year downloads -- were cut from
   newsletters.html in round 4, so their rules went with them rather than
   waiting to be found as dead weight later. newsletter-topics.html still
   exists and .topic below still styles it; nothing on the site links to it
   now, so it is reachable only from the reviewer gallery. */
.topic { margin-bottom: clamp(34px, 4vw, 48px); }
.topic h2 { margin-bottom: 6px; }
.topic .body { margin-bottom: 14px; max-width: 62ch; }