/* ==========================================================================
   Stock Insight detail — editorial publication.
   Quiet financial editorial: dark charcoal, warm ivory type, one restrained gold, Newsreader for
   headlines and reading text, sans for metadata and navigation, hairlines instead of cards.
   No gradients, no shadows, no rounded corners.

   Namespace: .sip-*   (templates/insights/stock_insight_detail.html — and only that template).
   Shared CSS (base.css, articles.css, insight_common.css, insights_detail.css) is NOT edited. Where a
   shared component renders inside this page it is re-skinned below under `.sip-page`
   (specificity 0,2,0 beats the components' own 0,1,0 rules):
     · subnav            _stock_subnav.html            (inline pill style → text + underline)
     · follow / save     content_follow_button / save_insight_button (styles live in articles.css)
     · advisory card     _advisory_disclaimer.html     (inline .advz-* gradient card → hairline block)
   The article body deliberately has id="sipContent", not "stockInsightContent": base.css colours
   `#stockInsightContent p/span/li/h2-4` with ID selectors, which would otherwise leak in here.
   ========================================================================== */

.sip-page {
    --sip-bg: #14181b;
    --sip-panel: #1a1f22;
    --sip-ink: #efe7d3;
    --sip-body: #cfc8b6;
    --sip-muted: #918c7d;
    --sip-gold: #c9a766;
    --sip-gold-dim: #a68a55;
    --sip-up: #8fc3a1;
    --sip-down: #d6907f;
    --sip-rule: rgba(239, 231, 211, .14);
    --sip-rule-strong: rgba(239, 231, 211, .3);
    --sip-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sip-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --sip-navbar: 101px;            /* body { padding-top } in base.css: the fixed global navbar */
    width: 100%;
    padding: 34px 0 104px;
    background: var(--sip-bg);
    color: var(--sip-body);
    font-family: var(--sip-sans);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}
.sip-page *, .sip-page *::before, .sip-page *::after { box-sizing: border-box; }
/* base.css sets `p, span { color: var(--text-color) }` directly on the elements: inherit instead */
.sip-page p, .sip-page span { color: inherit; }
.sip-page :focus-visible { outline: 2px solid var(--sip-gold); outline-offset: 3px; }
.sip-shell { width: min(100% - 48px, 1180px); margin: 0 auto; }

/* ---- Breadcrumb (breadcrumb.css hides .seo-breadcrumb-shell; this one is the visible trail) ---- */
.sip-crumbs { margin: 0 0 30px; }
.sip-page .sip-crumbs .breadcrumb { margin: 0; padding: 0; background: none; color: var(--sip-muted); font: 500 .78rem/1.5 var(--sip-sans); letter-spacing: .01em; text-shadow: none; }
.sip-page .sip-crumbs .breadcrumb-item { color: var(--sip-muted); }
.sip-page .sip-crumbs .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; padding: 0 .65rem; color: var(--sip-muted); }
.sip-page .sip-crumbs .breadcrumb a { color: var(--sip-muted); text-decoration: none; }
.sip-page .sip-crumbs .breadcrumb a:hover { color: var(--sip-ink); text-decoration: underline; text-underline-offset: .2em; }
.sip-page .sip-crumbs .breadcrumb-item:nth-child(3) a { color: var(--sip-gold); }
.sip-page .sip-crumbs .icon-home { display: none; }

/* ---- Masthead ---- */
.sip-masthead { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 clamp(36px, 6vw, 88px); align-items: start; padding-bottom: 34px; }
.sip-masthead-main { min-width: 0; }
.sip-page .sip-eyebrow { margin: 0 0 16px; color: var(--sip-gold); font: 700 .72rem/1.2 var(--sip-sans); letter-spacing: .22em; text-transform: uppercase; }
.sip-page .sip-title { max-width: 28ch; margin: 0; color: var(--sip-ink); font: 500 clamp(1.95rem, 1.2vw + 1.55rem, 2.85rem)/1.12 var(--sip-serif); letter-spacing: -.022em; text-wrap: balance; }
.sip-page .sip-standfirst { max-width: 60ch; margin: 20px 0 0; color: var(--sip-muted); font: 400 1.12rem/1.6 var(--sip-sans); }

.sip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 24px; color: var(--sip-muted); font: 500 .82rem/1.6 var(--sip-sans); }
.sip-page .sip-meta-author { display: inline-flex; align-items: center; gap: 10px; color: var(--sip-ink); font-weight: 600; }
.sip-page .sip-meta-author-name { color: var(--sip-ink); }
.sip-avatar { flex: none; width: 36px; height: 36px; border: 1px solid var(--sip-rule-strong); border-radius: 50%; object-fit: cover; }
.sip-page .sip-avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--sip-panel); color: var(--sip-gold); font: 500 .92rem/1 var(--sip-serif); letter-spacing: .02em; }
.sip-page .sip-meta-sep { color: var(--sip-rule-strong); user-select: none; }
.sip-page .sip-meta-date, .sip-page .sip-meta-read, .sip-page .sip-meta-views { color: var(--sip-muted); font-variant-numeric: tabular-nums; }
.sip-page .sip-meta-quote { display: inline-flex; align-items: baseline; gap: 6px; color: var(--sip-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.sip-page .sip-meta-quote:hover { text-decoration: underline; text-underline-offset: .2em; }
.sip-page .sip-meta-ticker { color: var(--sip-ink); font-weight: 700; letter-spacing: .04em; }
.sip-page .sip-meta-price { color: var(--sip-muted); }
.sip-page .sip-meta-quote.is-up .sip-meta-change { color: var(--sip-up); }
.sip-page .sip-meta-quote.is-down .sip-meta-change { color: var(--sip-down); }
.sip-page .sip-meta-quote.is-flat .sip-meta-change { color: var(--sip-muted); }
.sip-page .sip-meta-change { font-weight: 600; }

/* Follow / Save: text + underline (their markup and behaviour are untouched) */
.sip-meta-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.sip-meta-follow, .sip-meta-save { display: inline-flex; align-items: center; }
.sip-page .sip-meta .content-follow-control, .sip-page .sip-meta .save-insight-control { margin: 0; position: relative; justify-content: flex-start; }
.sip-page .sip-meta .content-follow-button, .sip-page .sip-meta .save-insight-button { gap: 5px; padding: 0 0 1px; border: 0; border-bottom: 1px solid rgba(201, 167, 102, .45); border-radius: 0; background: none; color: var(--sip-gold); font: 600 .82rem/1.5 var(--sip-sans); letter-spacing: 0; text-decoration: none; }
.sip-page .sip-meta .content-follow-button:hover, .sip-page .sip-meta .save-insight-button:hover { border-bottom-color: var(--sip-gold); background: none; color: var(--sip-ink); }
.sip-page .sip-meta .content-follow-button.is-followed, .sip-page .sip-meta .save-insight-button.is-saved { color: var(--sip-gold-dim); border-bottom-color: rgba(201, 167, 102, .25); }
.sip-page .sip-meta .follow-icon, .sip-page .sip-meta .save-icon { color: inherit; font-size: .86rem; }
.sip-page .sip-meta .follow-prefix { opacity: .8; }
.sip-page .sip-meta .follow-tooltip, .sip-page .sip-meta .save-tooltip { font-size: .72rem; }

/* ---- Related stock: a way into the Stock system, not a price board ---- */
.sip-stock { padding-top: 4px; }
.sip-page .sip-stock-label { margin: 0 0 12px; color: var(--sip-muted); font: 600 .72rem/1.3 var(--sip-sans); letter-spacing: .06em; }
.sip-stock-id { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--sip-rule); background: var(--sip-panel); }
.sip-page .sip-stock-symbol { color: var(--sip-ink); font: 500 1.6rem/1 var(--sip-serif); letter-spacing: -.01em; }
.sip-page .sip-stock-name { color: var(--sip-muted); font: 500 .8rem/1.4 var(--sip-sans); }
.sip-page .sip-stock-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px 18px; border: 1px solid var(--sip-gold-dim); color: var(--sip-gold); font: 600 .84rem/1.3 var(--sip-sans); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.sip-page .sip-stock-link:hover { border-color: var(--sip-gold); color: var(--sip-ink); text-decoration: none; }
.sip-page .sip-stock-link span { color: inherit; }
.sip-stock-link svg { flex: none; }

/* ---- Subnav (re-skin of _stock_subnav.html: text + underline, no pills) ---- */
.sip-subnav { margin: 0; }
.sip-page .sip-subnav .ss-subnav { gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--sip-rule); border-bottom: 1px solid var(--sip-rule-strong); }
.sip-page .sip-subnav .ss-subnav a { padding: 8px 18px 7px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--sip-muted); font: 700 .76rem/1.2 var(--sip-sans); letter-spacing: .02em; text-decoration: none; }
.sip-page .sip-subnav .ss-subnav a:hover { color: var(--sip-ink); background: none; text-decoration: none; }
.sip-page .sip-subnav .ss-subnav a.is-active { border-bottom-color: var(--sip-gold); background: none; color: var(--sip-ink); }

/* ---- Hero: one shared image for the template (never a company's photo, never featured_image) ---- */
.sip-hero { margin: 30px 0 0; }
.sip-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; object-position: 64% 44%; background: var(--sip-panel); filter: saturate(.86) brightness(.92); }

/* ---- Reading layout ---- */
.sip-layout { display: block; padding-top: 52px; }

/* Table of contents (built from the article's h2/h3 by JS; stays hidden when there are none).
   Quiet index: an eyebrow title, a hairline spine with a gold marker on the section being read, a number column so wrapped titles hang under their text. */
.sip-toc[hidden] { display: none; }
.sip-toc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--sip-rule); border-bottom: 1px solid var(--sip-rule); background: none; color: var(--sip-gold); font: 700 .72rem/1.2 var(--sip-sans); letter-spacing: .2em; text-transform: uppercase; text-align: left; cursor: pointer; }
.sip-page .sip-toc-head span { color: inherit; }
.sip-toc-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.sip-toc.is-open .sip-toc-chevron { transform: rotate(-135deg); }
.sip-toc-body { display: none; padding: 14px 0 4px; }
.sip-toc.is-open .sip-toc-body { display: block; }
.sip-toc-body ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--sip-rule); }
.sip-toc-body li { margin: 0; padding: 0; }
.sip-page .sip-toc-body a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: .35em; align-items: baseline; margin-left: -1px; padding: 7px 4px 7px 15px; border-left: 2px solid transparent; color: var(--sip-muted); font: 500 .78rem/1.4 var(--sip-sans); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.sip-toc-num { color: var(--sip-gold-dim); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; }
.sip-toc-label { min-width: 0; overflow-wrap: break-word; }
/* sub-sections (h3): no number, one step in, lighter */
.sip-toc-body li.is-sub a { grid-template-columns: minmax(0, 1fr); padding-left: calc(15px + 1.95em); padding-top: 4px; padding-bottom: 4px; font-size: .74rem; color: rgba(145, 140, 125, .85); }
.sip-page .sip-toc-body a:hover { color: var(--sip-ink); text-decoration: none; }
.sip-page .sip-toc-body a.is-active { border-left-color: var(--sip-gold); color: var(--sip-ink); }
.sip-page .sip-toc-body a.is-active .sip-toc-num { color: var(--sip-gold); }

.sip-article { min-width: 0; }

/* ---- Prose (RichText from the CMS) ---- */
.sip-prose { color: var(--sip-body); font: 400 clamp(1.06rem, .3vw + 1rem, 1.18rem)/1.78 var(--sip-serif); overflow-wrap: break-word; }
.sip-prose > :first-child { margin-top: 0; }
.sip-prose p { margin: 0 0 1.35em; color: inherit; font: inherit; }
/* Drop cap: a gold serif capital on the article's opening paragraph — the first paragraph, or the paragraph right after a leading h2/h3
   (many articles open with a heading that states the point, then the first paragraph). Never a paragraph that sits deeper in the article. */
.sip-prose > p:first-child::first-letter,
.sip-prose > h2:first-child + p::first-letter,
.sip-prose > h3:first-child + p::first-letter,
.sip-prose p.sip-lead::first-letter { float: left; padding: .06em .13em 0 0; color: var(--sip-gold); font: 500 3.7em/.82 var(--sip-serif); text-transform: uppercase; }
.sip-prose h2, .sip-prose h3, .sip-prose h4 { scroll-margin-top: calc(var(--sip-navbar) + 18px); }
.sip-prose h2 { margin: 2.4em 0 .7em; color: var(--sip-ink); font: 500 clamp(1.5rem, 1vw + 1.2rem, 1.9rem)/1.22 var(--sip-serif); letter-spacing: -.015em; }
.sip-prose h3 { margin: 1.9em 0 .55em; color: var(--sip-ink); font: 500 1.28rem/1.3 var(--sip-serif); letter-spacing: -.01em; }
.sip-prose h4 { margin: 1.8em 0 .5em; color: var(--sip-gold); font: 700 .78rem/1.4 var(--sip-sans); letter-spacing: .14em; text-transform: uppercase; }
.sip-prose strong, .sip-prose b { color: var(--sip-ink); font-weight: 600; }
.sip-prose em, .sip-prose i { font-style: italic; }
.sip-prose a { color: var(--sip-gold); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(201, 167, 102, .5); text-underline-offset: .2em; }
.sip-prose a:hover { color: var(--sip-ink); text-decoration-color: var(--sip-gold); }
.sip-prose ul, .sip-prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.sip-prose li { margin: 0 0 .5em; padding-left: .2em; color: inherit; }
.sip-prose li::marker { color: var(--sip-gold-dim); }
.sip-prose blockquote { margin: 2em 0; padding: .1em 0 .1em 1.4em; border-left: 2px solid var(--sip-gold-dim); color: var(--sip-ink); font-size: 1.07em; font-style: italic; }
.sip-prose blockquote p:last-child { margin-bottom: 0; }
.sip-prose hr { height: 0; margin: 2.4em 0; border: 0; border-top: 1px solid var(--sip-rule); background: none; }
.sip-prose img { display: block; max-width: 100%; height: auto; margin: 1.9em 0; }
.sip-prose figure { margin: 2em 0; }
.sip-prose figure img { margin: 0; }
.sip-prose figcaption { margin-top: .7em; color: var(--sip-muted); font: 500 .76rem/1.5 var(--sip-sans); font-style: normal; text-align: left; }
.sip-prose iframe, .sip-prose video { max-width: 100%; }
.sip-prose pre { margin: 0 0 1.35em; padding: 1em 1.1em; overflow-x: auto; border: 1px solid var(--sip-rule); background: var(--sip-panel); color: var(--sip-body); font-size: .86rem; line-height: 1.6; }
.sip-prose code { font-size: .88em; }

/* Tables: wrapped in .sip-table-wrap by the page script so a wide financial table scrolls inside its frame.
   `!important` only where CMS tables carry inline width/border/background that would otherwise win. */
.sip-table-wrap { margin: 2.2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sip-rule); background: var(--sip-panel); scrollbar-width: thin; scrollbar-color: rgba(239, 231, 211, .3) transparent; }
.sip-table-wrap:focus-visible { outline: 2px solid var(--sip-gold); outline-offset: 2px; }
.sip-prose table { width: max-content !important; min-width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; background: none !important; color: var(--sip-body); font: 400 .88rem/1.45 var(--sip-sans); font-variant-numeric: tabular-nums; }
.sip-prose caption { padding: .9rem 1rem .4rem; color: var(--sip-ink); font: 600 .84rem/1.4 var(--sip-sans); text-align: left; caption-side: top; }
.sip-prose th, .sip-prose td { padding: .7rem 1rem; border: 0 !important; border-bottom: 1px solid var(--sip-rule) !important; background: none !important; color: var(--sip-body) !important; text-align: right; vertical-align: top; white-space: nowrap; }
/* label column: readable width, wraps; stays visible while the periods scroll */
.sip-prose th:first-child, .sip-prose td:first-child { position: sticky; left: 0; z-index: 1; min-width: 11rem; max-width: 18rem; background: var(--sip-panel) !important; text-align: left; white-space: normal; }
.sip-prose thead th, .sip-prose tr:first-child th { color: var(--sip-gold-dim) !important; font: 700 .7rem/1.3 var(--sip-sans); letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--sip-rule-strong) !important; }
.sip-prose tbody th { color: var(--sip-ink) !important; font-weight: 500; }
.sip-prose tr:last-child th, .sip-prose tr:last-child td { border-bottom: 0 !important; }
.sip-prose td p, .sip-prose th p { margin: 0; font: inherit; color: inherit; }

.sip-page .sip-tags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2.4em 0 0; padding: 0; list-style: none; }
.sip-page .sip-tags li { margin: 0; padding: 0; }
.sip-page .sip-tags a { color: var(--sip-muted); font: 500 .8rem/1.5 var(--sip-sans); text-decoration: none; }
.sip-page .sip-tags a::before { content: "#"; color: var(--sip-gold-dim); }
.sip-page .sip-tags a:hover { color: var(--sip-ink); text-decoration: underline; text-underline-offset: .2em; }

/* ---- After the article: advisory right under the conclusion, then next steps → reading (one voice, hairlines, no competing buttons) ---- */
.sip-end { display: flex; flex-direction: column; gap: 3.25rem; margin-top: 3.5rem; font-family: var(--sip-sans); }
.sip-end > * { margin: 0; }

/* One row language for every "go on from here" list: eyebrow, strong hairline, rows separated by hairlines, arrow or date on the right */
.sip-page .sip-list-title { margin: 0 0 10px; color: var(--sip-gold); font: 700 .72rem/1.3 var(--sip-sans); letter-spacing: .18em; text-transform: uppercase; }
.sip-list ul, .sip-continue-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sip-rule-strong); }
.sip-list li, .sip-continue-list li { margin: 0; padding: 0; border-bottom: 1px solid var(--sip-rule); }
.sip-page .sip-list a, .sip-page .sip-continue-link, .sip-page .sip-hsc-bridge a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 17px 0; text-decoration: none; }
.sip-page .sip-list-item-title, .sip-page .sip-continue-link .sip-continue-text { color: var(--sip-ink); font: 500 1.14rem/1.4 var(--sip-serif); letter-spacing: -.005em; }
.sip-page .sip-hsc-bridge .sip-continue-text { color: var(--sip-body); font: 500 .94rem/1.55 var(--sip-sans); }
.sip-page .sip-list a:hover .sip-list-item-title, .sip-page .sip-continue-link:hover .sip-continue-text, .sip-page .sip-hsc-bridge a:hover .sip-continue-text { color: var(--sip-gold); }
.sip-continue-arrow { flex: none; align-self: center; color: var(--sip-gold-dim); transition: transform .18s ease, color .18s ease; }
.sip-page a:hover > .sip-continue-arrow { color: var(--sip-gold); transform: translateX(4px); }
.sip-page .sip-list .publish-date { flex: none; color: var(--sip-muted); font: 500 .78rem/1.4 var(--sip-sans); font-variant-numeric: tabular-nums; }

/* Previous / next: one bar, hairline above and below, a divider between the two when both exist */
.sip-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sip-rule-strong); border-bottom: 1px solid var(--sip-rule); }
.sip-page .sip-pager-link { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; text-decoration: none; }
.sip-page .sip-pager-link.is-next { grid-column: 2; padding-left: 32px; text-align: right; align-items: flex-end; }
.sip-page .sip-pager-link + .sip-pager-link { border-left: 1px solid var(--sip-rule); }
.sip-page .sip-pager-link:first-child:not(:last-child) { padding-right: 32px; }
.sip-page .sip-pager-label { color: var(--sip-muted); font: 600 .7rem/1.3 var(--sip-sans); letter-spacing: .12em; text-transform: uppercase; }
.sip-page .sip-pager-title { color: var(--sip-ink); font: 500 1.14rem/1.4 var(--sip-serif); letter-spacing: -.005em; }
.sip-page .sip-pager-link:hover .sip-pager-title { color: var(--sip-gold); }

/* Advisory card (re-skin of _advisory_disclaimer.html; markup, links and contact tracking untouched) */
/* Contact + investor note sit right after the article's conclusion, before the "go on from here" lists */
.sip-advisory { margin: 3.25rem 0 0; }
/* Footer of the page: the shared Portfolio Bridge, redesigned for this dark page (see the block further down) */
.sip-bridge { margin-top: 5.5rem; }
.sip-page .sip-advisory .advz-wrap { margin: 0; }
.sip-page .sip-advisory .advz-card { gap: 18px; padding: 20px 22px; border: 1px solid var(--sip-rule); border-radius: 0; background: none; }
.sip-page .sip-advisory .advz-avatar { width: 44px; height: 44px; border: 1px solid var(--sip-gold-dim); border-radius: 0; background: none; color: var(--sip-gold); font: 500 1rem/1 var(--sip-serif); }
.sip-page .sip-advisory .advz-eyebrow { color: var(--sip-gold); }
.sip-page .sip-advisory .advz-desc { color: var(--sip-body); }
.sip-page .sip-advisory .advz-btn { padding: 9px 16px; border-radius: 0; font-size: .82rem; font-weight: 600; }
.sip-page .sip-advisory .advz-btn.is-secondary { border: 1px solid var(--sip-rule-strong); background: none; color: var(--sip-ink); }
.sip-page .sip-advisory .advz-btn.is-primary { border: 1px solid var(--sip-gold-dim); background: none; color: var(--sip-gold); font-weight: 600; }
.sip-page .sip-advisory .advz-btn:hover { border-color: var(--sip-gold); color: var(--sip-ink); text-decoration: none; }
.sip-page .sip-advisory .advz-disclaimer { padding: 2px 0 2px 16px; border-left: 1px solid var(--sip-rule-strong); border-radius: 0; background: none; color: var(--sip-muted); }
.sip-page .sip-advisory .advz-disclaimer strong { color: var(--sip-body); }

/* ---- Footer: the shared Portfolio Bridge, redesigned for the dark publication page ----
   Same component (markup, copy, destination and its own misty-landscape <img>, i.e. the same picture as every other stock-page footer). The shared
   stylesheet makes a light "paper" block, 620px+ tall; here it becomes a closing band (~470px) with NO background colour of its own — it is the article's
   background, between two hairlines, on the reading grid: the statement on the left with its single action on the right, then the three questions as one
   ruled row. The landscape is a transparency effect: it is masked so that it dissolves into the page background on the left (where the text is) and at
   the top and bottom — no box, no cut edge, the band's own colour stays the page colour — and is clearly legible only in the middle-right. (A mask fade, not a
   decorative gradient fill.) No other image is referenced from this stylesheet.
   The shared CSS reads var(--ink|--body|--muted|--gold|--rule-strong), so the theme is applied by re-pointing those tokens (specificity 0,2,0 beats its
   0,1,0) — no !important needed, and the CTA keeps its own contrast through a local --ink. */
.sip-bridge .stp-portfolio-bridge { --ink: var(--sip-ink); --body: var(--sip-body); --muted: var(--sip-muted); --gold: var(--sip-gold); --rule-strong: var(--sip-rule-strong); min-height: 0; padding: 56px 0 50px; border: 0; border-top: 1px solid var(--sip-rule-strong); border-bottom: 1px solid var(--sip-rule); background: var(--sip-bg); }
.sip-bridge .stp-portfolio-art { opacity: 1; mix-blend-mode: normal; filter: brightness(.3) contrast(1.25) sepia(.3) saturate(.8); object-position: 66% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 10%, rgba(0, 0, 0, .6) 46%, #000 80%), linear-gradient(to bottom, transparent 0, #000 32%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 10%, rgba(0, 0, 0, .6) 46%, #000 80%), linear-gradient(to bottom, transparent 0, #000 32%, #000 70%, transparent 100%); mask-composite: intersect; }
.sip-bridge .stp-portfolio-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 72px); align-items: end; }
.sip-bridge .stp-portfolio-eyebrow { grid-column: 1; grid-row: 1; align-self: start; }
.sip-bridge .stp-portfolio-bridge h2 { grid-column: 1; grid-row: 2; max-width: 21em; margin-top: 16px; font-size: clamp(1.8rem, 1.2vw + 1.3rem, 2.35rem); line-height: 1.1; letter-spacing: -.028em; }
.sip-bridge .stp-portfolio-lede { grid-column: 1; grid-row: 3; max-width: 62ch; font-size: 1rem; }
.sip-bridge .stp-portfolio-cta { --ink: var(--sip-gold); grid-column: 2; grid-row: 2 / span 2; align-self: end; min-width: 0; margin-top: 0; padding: 14px 22px; border: 1px solid var(--sip-gold-dim); background: rgba(20, 24, 27, .82); font-weight: 600; transition: border-color .15s ease; }
.sip-bridge .stp-portfolio-cta:hover { --ink: var(--sip-ink); border-color: var(--sip-gold); background: rgba(20, 24, 27, .95); }
.sip-bridge .stp-portfolio-questions { --muted: var(--sip-body); grid-column: 1 / -1; grid-row: 4; margin-top: 34px; border-top: 1px solid var(--sip-rule-strong); }
.sip-bridge .stp-portfolio-questions article { padding-top: 24px; }
.sip-bridge .stp-portfolio-questions article + article { border-left-color: var(--sip-rule); }
.sip-bridge .stp-portfolio-questions article::before, .sip-bridge .stp-portfolio-questions article + article::before { top: -1px; }
.sip-bridge .stp-portfolio-questions h3 { max-width: 20ch; font-size: clamp(1.18rem, .6vw + 1rem, 1.38rem); line-height: 1.15; }

/* ---- Desktop: article + sticky table of contents ---- */
@media (min-width: 992px) {
    .sip-layout.has-toc { display: grid; grid-template-columns: minmax(0, 740px) 260px; grid-template-areas: "article aside"; column-gap: clamp(48px, 7vw, 112px); }
    .sip-layout:not(.has-toc) .sip-article { max-width: 740px; }
    .sip-layout.has-toc .sip-article { grid-area: article; }
    .sip-layout.has-toc .sip-aside { grid-area: aside; }
    .sip-toc { position: sticky; top: calc(var(--sip-navbar) + 24px); max-height: calc(100vh - var(--sip-navbar) - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(239, 231, 211, .25) transparent; }
    .sip-toc-head { padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--sip-gold-dim); cursor: default; pointer-events: none; }
    .sip-toc-chevron { display: none; }
    .sip-toc-body { display: block; padding-top: 16px; }
}

/* ---- Tablet / mobile ---- */
@media (max-width: 991.98px) {
    .sip-masthead { grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
    .sip-stock { max-width: 420px; }
    .sip-toc { margin-bottom: 30px; }
    .sip-bridge .stp-portfolio-content { display: block; }
    .sip-bridge .stp-portfolio-cta { margin-top: 26px; }
    .sip-bridge .stp-portfolio-questions { margin-top: 30px; }
}
@media (max-width: 767.98px) {
    .sip-page { padding: 22px 0 72px; }
    .sip-shell { width: min(100% - 32px, 1180px); }
    .sip-crumbs { margin-bottom: 22px; }
    .sip-masthead { padding-bottom: 26px; }
    .sip-hero { margin-top: 24px; }
    /* Follow / Save drop to their own row on narrow screens (no dangling separator at the end of the line above) */
    .sip-meta-actions { flex-basis: 100%; margin-top: 4px; }
    .sip-page .sip-meta-sep-actions { display: none; }
    .sip-hero-img { aspect-ratio: 16 / 10; object-position: 70% 50%; }
    .sip-layout { padding-top: 34px; }
    .sip-prose > p:first-child::first-letter, .sip-prose > h2:first-child + p::first-letter, .sip-prose > h3:first-child + p::first-letter, .sip-prose p.sip-lead::first-letter { font-size: 3.5em; }
    .sip-page .sip-subnav .ss-subnav a { padding: 8px 14px 7px; }
    .sip-advisory { margin-top: 2.5rem; }
    .sip-bridge { margin-top: 3.75rem; }
    .sip-bridge .stp-portfolio-bridge { padding: 40px 0 34px; }
    .sip-bridge .stp-portfolio-art { opacity: 1; }
    .sip-bridge .stp-portfolio-bridge h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
    .sip-bridge .stp-portfolio-questions article, .sip-bridge .stp-portfolio-questions article + article { padding: 20px 0 18px; }
    .sip-bridge .stp-portfolio-questions h3 { font-size: 1.2rem; }
    .sip-bridge .stp-portfolio-cta { width: 100%; justify-content: space-between; }
    .sip-end { gap: 2.75rem; margin-top: 2.75rem; }
    .sip-pager { grid-template-columns: minmax(0, 1fr); }
    .sip-page .sip-pager-link, .sip-page .sip-pager-link:first-child:not(:last-child) { padding: 18px 0; }
    .sip-page .sip-pager-link.is-next { grid-column: auto; padding-left: 0; text-align: left; align-items: flex-start; }
    .sip-page .sip-pager-link + .sip-pager-link { border-left: 0; border-top: 1px solid var(--sip-rule); }
    .sip-page .sip-list a { flex-direction: column; gap: 4px; }
    .sip-page .sip-continue-link, .sip-page .sip-hsc-bridge a { flex-direction: row; gap: 16px; }
    .sip-prose th:first-child, .sip-prose td:first-child { min-width: 9rem; max-width: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sip-page *, .sip-page *::before, .sip-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}