/**
 * Strategy Shares ETFs — theme design system
 *
 * Tokens below are pulled directly from the approved Claude Design mockup
 * (Strategy_Shares_Homepage.html, both the 1a Editorial and 1b Utility
 * directions), not the earlier design-handoff prototype — the mockup is the
 * current source of truth for color, type scale and spacing. Two full
 * palettes coexist because the two homepage directions are different brand
 * treatments, not a light/dark toggle of the same one: Editorial reads deep
 * purple-and-teal, Utility reads indigo-and-white. Everything else in the
 * site (fund pages, secondary pages) continues using the --ink/--accent/etc.
 * neutral tokens below the two palettes, which match Editorial's values.
 */

/* ---------------------------------------------------------------------- *
 * 1. Tokens
 * ---------------------------------------------------------------------- */
:root{
	/* Neutral / shared tokens (also Editorial's palette) */
	--ink:#26003d;              /* headings on light backgrounds — deep purple, not black */
	--ink-black:#1a1c22;        /* reserved for places that genuinely need neutral black */
	--body:#57555f;
	--muted:#7d7a85;
	--note:#808285;
	--hairline:#e2dee9;
	--hairline-soft:#eae7ef;
	--wash:#f4f2f7;
	--accent:#2d7abf;           /* link blue */
	--accent-deep:#26003d;
	--accent-bright:#00abba;    /* teal — Editorial's CTA/accent color */
	--accent-violet:#61328d;
	--accent-dark-bg:var(--dark-page);   /* dark panels/bands: the same navy the fund pages sit on */
	--footer-bg:var(--dark-deep);        /* footer: a shade deeper than the page navy, as on the fund pages */
	--positive:#316f51;
	--negative:#ac2a37;

	/* Utility direction palette */
	--ut-brand:#293981;         /* indigo — Utility's primary color */
	--ut-ink:#1d2130;
	--ut-body:#5d6377;
	--ut-muted:#7b8194;
	--ut-hairline:#e0e4ec;
	--ut-hairline-soft:#eceff5;
	--ut-wash:#f2f4f8;
	--ut-accent:#2d7abf;
	--ut-sky:#7fd4e0;

	/* Legacy dark-mode tokens, kept for any secondary-page dark sections */
	--dark-page:#0a1030;
	--dark-card:#141a3a;
	--dark-deep:#070b22;
	--dark-text:#EDEFF4;
	--dark-text-2:#C4C9D4;
	--dark-text-3:#9aa1b0;
	--dark-note:#8b93a6;
	--dark-hairline:rgba(255,255,255,.1);
	--dark-row:rgba(255,255,255,.07);
	--dark-border:rgba(255,255,255,.2);

	--nav-bg:var(--dark-page);   /* nav: the fund pages' navy (was brand purple, which matched nothing else dark) */
	--content-max:1152px;
	--radius-btn:0;              /* the mockup uses sharp corners everywhere, not rounded */
	--radius-card:0;
	--radius-input:0;
	--radius-chip:0;

	--section-y:clamp(48px,7vw,96px);
	--hero-y:clamp(56px,8vw,96px);
}

/* ---------------------------------------------------------------------- *
 * 2. Reset & base
 * ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.strategy-shares{
	margin:0;
	background:#fff;
	color:var(--ink-black);
	font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing:antialiased;
	font-variant-numeric:tabular-nums;
	line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-violet); }
::selection{ background:var(--accent-bright); color:#fff; }
button{ font-family:inherit; }

/* ---------------------------------------------------------------------- *
 * 3. Layout — the one container formula, used everywhere
 * ---------------------------------------------------------------------- */
.ss-section{
	padding-block:var(--section-y);
	padding-inline:max(clamp(16px,5vw,44px), calc((100% - var(--content-max)) / 2));
}
.ss-section--hero{ padding-block:var(--hero-y); }
.ss-section--wash{ background:var(--wash); }
.ss-section--dark{ background:var(--dark-page); color:var(--dark-text); }
.ss-section--nav{ background:var(--nav-bg); }
.ss-section--footer{ background:var(--footer-bg); color:var(--dark-text); }

.ss-inner{ max-width:var(--content-max); margin-inline:auto; }

/* Grids: collapse behaviour matches the design's data-r markers */
.ss-grid{ display:grid; gap:clamp(20px,3vw,32px); }

/* Asymmetric column ratios the plain .g2/.g3/.g4 classes (equal-width only)
   can't express — used on the Utility homepage's hero and content-split
   sections. Previously these ratios were set inline, which (like .g2/.g3/
   .g4 when duplicated inline elsewhere) permanently overrode any responsive
   behavior regardless of viewport. */
.ss-util-split-hero{ grid-template-columns:minmax(0,1fr) minmax(0,620px); }
.ss-util-split-15{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
@media (max-width:900px){
	.ss-util-split-hero, .ss-util-split-15{ grid-template-columns:minmax(0,1fr); }
}
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.gstat{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:980px){
	.g2{ grid-template-columns:minmax(0,1fr); }
	.g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.gstat{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px){
	.g3, .g4{ grid-template-columns:minmax(0,1fr); }
	.gstat{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablewrap table{ min-width:34rem; }
.fittable table{ width:100%; }
.scrollx{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scrollx::-webkit-scrollbar{ display:none; }

/* ---------------------------------------------------------------------- *
 * 4. Type scale (secondary pages — the mockup's homepage sets its own
 *    larger, direction-specific sizes inline in home-editorial.php /
 *    home-utility.php rather than through these shared classes)
 * ---------------------------------------------------------------------- */
h1,h2,h3,h4,.ss-h1,.ss-h2,.ss-h3{
	font-family:'Source Sans 3', sans-serif;
	font-weight:700;
	margin:0 0 .5em;
	color:inherit;
}
.ss-h1{ font-size:clamp(30px,5vw,60px); line-height:1; letter-spacing:-.035em; }
.ss-ticker{ font-size:clamp(38px,9vw,190px); line-height:.78; letter-spacing:-.055em; font-weight:900; }
.ss-h2{ font-size:clamp(21px,2.4vw,30px); letter-spacing:-.025em; }
.ss-statement{ font-size:clamp(24px,3.4vw,40px); line-height:1.12; font-weight:700; letter-spacing:-.03em; }
.ss-h3{ font-size:clamp(18px,2vw,22px); letter-spacing:-.02em; }
.ss-lead{ font-size:clamp(16px,2vw,20px); line-height:1.5; color:var(--body); }
.ss-body{ font-size:16px; line-height:1.6; color:var(--body); }
.ss-eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--accent); }
.ss-kicker{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--accent-violet); }
.ss-footnote{ font-size:11.5px; line-height:1.7; color:var(--note); }
table{ border-collapse:collapse; width:100%; }
th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; text-align:left; color:var(--muted); }
td,th{ padding:12px 10px; font-size:14.5px; border-bottom:1px solid var(--hairline-soft); }

/* ---------------------------------------------------------------------- *
 * 5. Components
 * ---------------------------------------------------------------------- */

/* Buttons */
.ss-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	padding:14px 26px; border-radius:var(--radius-btn); border:1px solid transparent;
	cursor:pointer; min-height:44px; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ss-btn--primary{ background:var(--accent-bright); color:#04262a; }
.ss-btn--primary:hover{ background:#00939f; color:#04262a; }
.ss-btn--outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.ss-btn--outline:hover{ background:var(--ink); color:#fff; }
.ss-btn--outline-light{ background:transparent; border-color:rgba(255,255,255,.32); color:#fff; }
.ss-btn--outline-light:hover{ background:#fff; color:var(--ink); }
.ss-btn--ghost{ background:transparent; color:var(--accent); padding:0; min-height:0; text-transform:none; letter-spacing:0; font-weight:700; }

/* Chips */
.ss-chip{
	display:inline-flex; align-items:center; min-height:38px; padding:0 20px;
	border-radius:var(--radius-chip); border:1px solid var(--hairline); background:#fff;
	font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--body); cursor:pointer; white-space:nowrap;
}
.ss-chip.is-active,.ss-chip[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Cards */
.ss-card{ background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-card); padding:clamp(20px,2.6vw,30px); }
.ss-card--dark{ background:var(--dark-card); border:1px solid var(--dark-hairline); color:var(--dark-text); }

/* Stat cell */
.ss-stat{ display:flex; flex-direction:column; gap:4px; }
.ss-stat .value{ font-size:clamp(20px,2.4vw,28px); font-weight:700; letter-spacing:-.02em; }
.ss-stat .label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ss-stat.is-accent .value{ color:var(--accent); }
.ss-positive{ color:var(--positive); }
.ss-negative{ color:var(--negative); }

/* Badge */
.ss-badge{ display:inline-flex; padding:5px 11px; border-radius:var(--radius-chip); font-size:10.5px; font-weight:700; letter-spacing:.1em; background:var(--accent-deep); color:#fff; text-transform:uppercase; }

/* Disclosure block */
.ss-disclosures{ background:var(--wash); border-top:1px solid var(--hairline); }
.ss-disclosures p{ margin:0 0 14px; }
.ss-disclosures .ss-footnote{ font-size:15px; line-height:1.65; }
.ss-disclosures p:last-child{ margin-bottom:0; }

/* Forms */
.ss-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.ss-field label{ font-size:13px; font-weight:600; color:var(--ink); }
.ss-field input, .ss-field select, .ss-field textarea{
	font-family:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--hairline);
	border-radius:var(--radius-input); background:#fff; color:var(--ink); min-height:44px;
}
.ss-field textarea{ min-height:120px; resize:vertical; }
.ss-field input:focus, .ss-field select:focus, .ss-field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.ss-subscribe-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ss-subscribe-row input{ flex:1; min-width:220px; }

/* ---------------------------------------------------------------------- *
 * 6. Header / nav (secondary pages — the homepage's own nav bar is styled
 *    per-direction in home-editorial.php / home-utility.php, since Editorial
 *    and Utility use two different navs; other pages use this shared one,
 *    matching Editorial's since that's the deeper site's dominant style)
 * ---------------------------------------------------------------------- */
.ss-header{ position:relative; z-index:100; }
.ss-nav{ position:relative; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px max(clamp(16px,5vw,44px), calc((100% - var(--content-max)) / 2)); background:var(--nav-bg); }

/* The nav and footer use the same navy as the dark fund pages (--dark-page for
   the nav, one shade deeper --dark-deep for the footer — the relationship the
   fund pages' own disclosures band already has), so the site chrome is one
   colour everywhere. These used to be brand purple, with a fund-page-only
   override to swap in navy; the defaults now simply are that navy. */
.ss-logo{ display:flex; align-items:baseline; gap:9px; color:#fff; font-size:23px; letter-spacing:-.02em; }
.ss-logo strong{ font-weight:900; color:var(--accent-bright); }
.ss-logo span{ font-weight:300; }
.ss-nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.ss-nav-links a{ color:#c8bcd4; font-size:15px; font-weight:400; letter-spacing:.02em; }
.ss-nav-links a:hover, .ss-nav-links a.current{ color:#fff; font-weight:600; }
.ss-nav-cta{ display:flex; align-items:center; gap:14px; }
.ss-nav-toggle{ display:none; position:relative; width:38px; height:34px; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; padding:0; cursor:pointer; }
.ss-nav-toggle__bar{
	position:absolute; left:50%; width:18px; height:2px; background:currentColor;
	transform:translateX(-50%);
	transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.ss-nav-toggle__bar:nth-child(1){ top:12px; }
.ss-nav-toggle__bar:nth-child(2){ top:17px; }
.ss-nav-toggle__bar:nth-child(3){ top:22px; }
/* Hamburger -> X: aria-expanded is already set correctly by the existing
   toggle JS, so this needs no script changes — purely a CSS state change
   keyed off the same attribute screen readers already rely on. */
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bar:nth-child(1){ top:17px; transform:translateX(-50%) rotate(45deg); }
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bar:nth-child(2){ opacity:0; }
.ss-nav-toggle[aria-expanded="true"] .ss-nav-toggle__bar:nth-child(3){ top:17px; transform:translateX(-50%) rotate(-45deg); }
@media (max-width:980px){
	.ss-nav-links{ display:none; }
	.ss-nav-toggle{ display:inline-flex; }
	.ss-nav.is-open .ss-nav-links{
		display:flex; flex-direction:column; align-items:flex-start; gap:14px;
		position:absolute; top:100%; left:0; right:0; z-index:100;
		background:rgba(7,11,34,.95);
		backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
		box-shadow:0 20px 40px rgba(0,0,0,.35);
		padding:20px max(clamp(16px,5vw,44px), calc((100% - var(--content-max)) / 2)) 26px;
		border-top:1px solid rgba(255,255,255,.1);
	}
	/* Utility homepage is light-on-white, not dark like Editorial/the shared
	   header — the dark glass panel above would be the wrong scheme
	   entirely here, not just a shade off. */
	#ss-primary-nav-utility.is-open .ss-nav-links{
		background:rgba(255,255,255,.96);
		box-shadow:0 20px 40px rgba(15,23,42,.14);
		border-top-color:rgba(0,0,0,.08);
	}
}

/* ---------------------------------------------------------------------- *
 * 7. Footer (secondary pages — matches Editorial; the homepage's own
 *    footer is styled per-direction since Utility's footer is indigo)
 * ---------------------------------------------------------------------- */
.ss-footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:48px; }
@media (max-width:980px){ .ss-footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .ss-footer-top{ grid-template-columns:1fr; } }
.ss-footer h4{ color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; }
.ss-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ss-footer a{ color:var(--footer-link, #8f83a0); font-size:14px; }
.ss-footer a:hover{ color:#fff; }
.ss-footer-widget{ margin-bottom: 4px; }
.ss-footer-bottom{ margin-top:36px; padding-top:24px; border-top:1px solid var(--dark-hairline); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#8f83a0; }

/* ---------------------------------------------------------------------- *
 * 8. Utility
 * ---------------------------------------------------------------------- */
.ss-em-dash{ color:var(--note); }
.ss-review-banner{ background:#fff6e5; border:1px solid #f0c869; color:#7a5b00; padding:14px 18px; font-size:13.5px; margin-bottom:24px; }
.ss-avail-yes{ color:var(--positive); font-weight:700; }
.ss-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.ss-visually-hide-empty:empty{ display:none; }

/* Utility homepage's fund table rows — a class (not inline style) so the
   filter script's item.style.display = '' correctly falls back to this
   grid layout instead of the browser's inline-element default. */
.ss-util-row{
	display:grid;
	grid-template-columns:76px minmax(180px,1.6fr) 88px 84px 92px 108px 88px 104px;
	gap:16px; padding:20px 24px; border-bottom:1px solid #eceff5;
	align-items:center; text-decoration:none; min-width:900px;
}
.ss-util-head{
	display:grid;
	grid-template-columns:76px minmax(180px,1.6fr) 88px 84px 92px 108px 88px 104px;
	gap:16px; padding:14px 24px; background:#f2f4f8; border-bottom:1px solid #e0e4ec;
	align-items:center; min-width:900px;
}

/* ---------------------------------------------------------------------- *
 * 9. Admin-only homepage-direction preview bar (mirrors the Claude Design
 *    mockup's own 1a/1b review toggle, but gated to logged-in admins — see
 *    functions.php ss_homepage_preview_bar(). Never shown to site visitors.
 * ---------------------------------------------------------------------- */
.ss-preview-bar{
	position:sticky; top:0; z-index:200; background:#1a1c22; color:#fff;
	padding:10px max(clamp(16px,5vw,44px), calc((100% - var(--content-max)) / 2));
	display:flex; align-items:center; gap:14px; flex-wrap:wrap;
	font-family:'Source Sans 3', sans-serif; font-size:12.5px;
}
.ss-preview-bar strong{ font-weight:700; }
.ss-preview-bar .ss-preview-note{ color:#9aa1b0; }
.ss-preview-bar .ss-preview-links{ margin-left:auto; display:flex; gap:8px; }
.ss-preview-bar a{
	font-size:11.5px; font-weight:700; letter-spacing:.05em; padding:6px 12px;
	border-radius:999px; border:1px solid rgba(255,255,255,.22); color:#fff;
}
.ss-preview-bar a.is-active{ background:var(--accent-bright); border-color:var(--accent-bright); color:#0a1030; }

/* ---------------------------------------------------------------------- *
 * Research: library cards, link-chips, pager, and the article layout
 * (template-parts/research-article.php). The article body is clean HTML
 * converted from the production pages, so every rule here is scoped to
 * .ss-article__content rather than leaning on inline styles.
 * ---------------------------------------------------------------------- */
a.ss-chip{ text-decoration:none; }
.ss-card--link{ display:block; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease; }
.ss-card--link:hover,.ss-card--link:focus-visible{ border-color:var(--accent-violet); box-shadow:0 2px 14px rgba(38,0,61,.08); }
.ss-pager{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }

.ss-article__inner{ max-width:760px; margin-inline:auto; }
.ss-article__back{ font-size:13px; font-weight:700; margin:0 0 22px; }
.ss-article__back a{ color:var(--accent); text-decoration:none; }
.ss-article__back a:hover{ text-decoration:underline; }
.ss-article__back--end{ margin:40px 0 0; }
.ss-article__title{ font-size:clamp(28px,4.2vw,46px); line-height:1.08; margin-top:10px; }
.ss-article__subtitle{ font-size:clamp(18px,2.2vw,22px); line-height:1.45; color:var(--body); margin:16px 0 0; }
.ss-article__meta{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:18px 0 0; font-size:13px; color:var(--muted); }
.ss-article__meta span + span::before{ content:"·"; margin-right:18px; color:var(--hairline); }
.ss-article__hero{ margin:28px 0 0; }
.ss-article__hero img{ width:100%; height:auto; display:block; }

.ss-article__content{ margin-top:32px; font-size:17px; line-height:1.7; color:var(--body); overflow-wrap:anywhere; }
.ss-article__content > *{ margin-top:0; margin-bottom:0; }
.ss-article__content > * + *{ margin-top:1.15em; }
.ss-article__content h2{ margin-top:2.1em; font-size:clamp(22px,2.6vw,30px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.ss-article__content h3{ margin-top:1.9em; font-size:clamp(18px,2vw,22px); line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.ss-article__content h2 + *, .ss-article__content h3 + *{ margin-top:.7em; }
.ss-article__content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.ss-article__content a.ss-btn{ text-decoration:none; }
.ss-article__content strong{ color:var(--ink); }
.ss-article__content ul,.ss-article__content ol{ padding-left:1.35em; }
.ss-article__content li + li{ margin-top:.55em; }
.ss-article__content sup{ font-size:.7em; line-height:0; }
.ss-article__content sup a{ text-decoration:none; }
.ss-article__content hr{ border:0; border-top:1px solid var(--hairline); margin:2em 0; }
.ss-article__content .ss-lede{ font-size:clamp(19px,2.3vw,22px); line-height:1.55; color:var(--ink); }
.ss-article__content .ss-footnote,.ss-article__content p[id^="fn"]{ font-size:12.5px; line-height:1.65; color:var(--note); }
.ss-article__content p[id^="fn"]{ margin-top:.7em; }
.ss-article__content .ss-article__cta{ margin-top:1.6em; }

.ss-figure{ margin:1.7em 0; }
.ss-figure img{ display:block; width:100%; max-width:100%; height:auto; margin-inline:auto; }

/* Tables scroll inside their own box on narrow screens, never the page. */
.ss-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); }
.ss-table-wrap table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.5; overflow-wrap:normal; word-break:normal; }
.ss-table-wrap th,.ss-table-wrap td{ min-width:112px; padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline-soft); }
.ss-table-wrap th{ background:var(--wash); color:var(--ink); font-size:12px; letter-spacing:.04em; }
.ss-table-wrap tr:last-child td{ border-bottom:0; }
/* Pros / Cons tables: two equal columns, with the bullet lists sitting tight inside the cells. */
.ss-table-wrap--split th,.ss-table-wrap--split td{ width:50%; }
.ss-table-wrap td > ul{ margin:0; padding-left:1.15em; }
.ss-table-wrap td > ul > li + li{ margin-top:.6em; }

/* Components from the MPLY piece (stat strip, callouts, pull-quote, stat cards). */
.ss-stat-strip{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.ss-stat-strip li{ background:#fff; padding:16px 18px; margin:0; }
.ss-stat-strip strong{ display:block; font-size:clamp(22px,3vw,30px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.ss-stat-strip span{ display:block; margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--muted); }
.ss-callout{ background:var(--wash); border-left:4px solid var(--accent-bright); padding:20px 24px; }
.ss-callout p{ margin:0; }
.ss-callout__lead{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-violet); margin-bottom:6px !important; }
.ss-callout__big{ font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; color:var(--accent-violet) !important; margin-right:.35em; }
.ss-pullquote{ margin-inline:0; padding:24px 28px; border-left:4px solid var(--accent-violet); background:var(--wash); }
.ss-pullquote p{ margin:0; font-size:clamp(19px,2.4vw,24px); line-height:1.35; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.ss-stat-cards{ list-style:none; padding:0; margin:1.2em 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ss-stat-card{ margin:0 !important; padding:20px; border:1px solid var(--hairline); background:#fff; }
.ss-stat-card p{ margin:0; }
.ss-stat-card__co{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-violet); }
.ss-stat-card__stat{ margin-top:8px !important; font-size:clamp(32px,4vw,44px); font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.ss-stat-card__label{ margin-top:8px !important; font-size:13.5px; line-height:1.45; }
.ss-stat-card__weight{ margin-top:14px !important; padding-top:12px; border-top:1px solid var(--hairline-soft); font-size:13px; display:flex; justify-content:space-between; gap:12px; }
.ss-chip-list{ list-style:none; padding:0; margin:1.2em 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.ss-chip-list li{ margin:0; padding:7px 14px; border:1px solid var(--hairline); font-size:13px; color:var(--muted); }
.ss-chip-list li + li{ margin-top:0; }
.ss-chip-list strong{ color:var(--ink); }
.ss-footnotes{ font-size:12.5px; line-height:1.6; color:var(--note); padding-left:1.4em; }

@media (max-width:760px){
	.ss-stat-strip{ grid-template-columns:repeat(2,1fr); }
	.ss-stat-cards{ grid-template-columns:1fr; }
	.ss-article__content{ font-size:16px; }
	.ss-article__meta span + span::before{ margin-right:12px; }
	.ss-article__meta{ gap:4px 12px; }
}

/* The article's generic list rules (indent, spacing between items) out-rank the
   component lists' own resets by specificity, so the components are reset at
   the same scope. */
.ss-article__content .ss-stat-strip,
.ss-article__content .ss-stat-cards,
.ss-article__content .ss-chip-list{ padding:0; }
.ss-article__content .ss-stat-strip li + li,
.ss-article__content .ss-stat-cards li + li,
.ss-article__content .ss-chip-list li + li{ margin-top:0; }
.ss-article__content .ss-kicker{ margin-top:2.4em; }
.ss-article__content .ss-kicker + h2{ margin-top:.35em; }

/* Wide comparison tables (6+ columns) break out of the reading column on large
   screens; everywhere else they scroll inside their own box. */
@media (min-width:1100px){
	.ss-table-wrap:has(th:nth-child(6)){ position:relative; left:50%; transform:translateX(-50%); width:min(1040px, calc(100vw - 96px)); }
}

/* ---------------------------------------------------------------------- *
 * Mega menu (inc/nav.php). A top-level item with children opens a
 * full-width panel under the nav bar on desktop: an intro column on the
 * left, a card per child on the right. Open state is the .is-open class
 * (set by theme.js with a short close delay, so the pointer can cross the
 * gap to the panel) or keyboard focus inside the item. Colours come from
 * variables so the same markup suits the navy nav (everywhere dark, including
 * the Signal fund pages) and Utility's white one.
 * ---------------------------------------------------------------------- */
.ss-nav{
	--mega-bg:var(--dark-deep); --mega-edge:rgba(255,255,255,.11); --mega-ink:#fff;
	--mega-body:#c8bcd4; --mega-muted:#a193b4; --mega-card:rgba(255,255,255,.035);
	--mega-card-hover:rgba(0,171,186,.1); --mega-accent:var(--accent-bright);
	--mega-shadow:0 34px 70px rgba(2,4,16,.65);
}
#ss-primary-nav-utility{
	--mega-bg:#fff; --mega-edge:#e0e4ec; --mega-ink:#1d2130; --mega-body:#3b4256;
	--mega-muted:#7b8194; --mega-card:#f6f7fb; --mega-card-hover:#fff;
	--mega-accent:#293981; --mega-shadow:0 34px 70px rgba(15,23,42,.16);
}

.ss-nav-item{ list-style:none; }
.ss-nav-links .ss-nav-item > a{ display:inline-flex; align-items:center; gap:7px; }
.ss-nav-caret{
	width:6px; height:6px; margin-top:-3px; flex:none; opacity:.65;
	border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
	transform:rotate(45deg); transition:transform .22s ease, opacity .22s ease;
}
.ss-nav-item.has-mega.is-open > a .ss-nav-caret,
.ss-nav-item.has-mega:focus-within > a .ss-nav-caret{ transform:rotate(225deg) translate(-1px,-1px); opacity:1; }

.ss-mega{
	position:absolute; left:0; right:0; top:100%; z-index:99;
	padding:36px max(clamp(16px,5vw,44px), calc((100% - var(--content-max)) / 2)) 42px;
	background:var(--mega-bg); border-top:1px solid var(--mega-edge); box-shadow:var(--mega-shadow);
	opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
	transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
/* a thin accent edge along the bottom of the panel */
.ss-mega::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:2px; opacity:.75;
	background:linear-gradient(90deg, transparent 0%, var(--mega-accent) 50%, transparent 100%);
}
.ss-nav-item.has-mega.is-open > .ss-mega,
.ss-nav-item.has-mega:focus-within > .ss-mega{
	opacity:1; visibility:visible; pointer-events:auto; transform:none;
	transition:opacity .24s ease, transform .24s ease, visibility 0s;
}
/* Escape closes it even though focus is still inside */
.ss-nav-item.has-mega.is-dismissed > .ss-mega{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px); transition-delay:0s; }

.ss-mega__inner{ display:grid; grid-template-columns:minmax(220px, 300px) minmax(0,1fr); gap:44px; align-items:stretch; }
.ss-mega__intro{ padding-right:40px; border-right:1px solid var(--mega-edge); display:flex; flex-direction:column; align-items:flex-start; }
.ss-mega__kicker{ margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--mega-accent); }
.ss-mega__title{ margin:0; font-size:clamp(22px,2.1vw,28px); line-height:1.12; font-weight:700; letter-spacing:-.025em; color:var(--mega-ink); }
.ss-mega__text{ margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--mega-muted); }
.ss-nav-links .ss-mega__all{
	margin-top:auto; padding-top:22px; font-size:14px; font-weight:700; letter-spacing:.02em;
	color:var(--mega-accent); text-decoration:none; border-bottom:0;
}
.ss-nav-links .ss-mega__all:hover{ color:var(--mega-accent); font-weight:700; text-decoration:underline; text-underline-offset:4px; }

.ss-mega__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
.ss-mega__grid > li{
	margin:0; opacity:0; transform:translateY(12px);
	transition:opacity .22s ease, transform .22s ease;
}
.ss-nav-item.has-mega.is-open .ss-mega__grid > li,
.ss-nav-item.has-mega:focus-within .ss-mega__grid > li{
	opacity:1; transform:none; transition-delay:calc(70ms + var(--i, 0) * 55ms);
}
.ss-nav-item.has-mega.is-dismissed .ss-mega__grid > li{ opacity:0; transform:translateY(12px); transition-delay:0s; }

.ss-nav-links .ss-mega-card{
	position:relative; display:flex; flex-direction:column; gap:9px; height:100%; overflow:hidden;
	padding:22px 22px 18px; text-decoration:none; font-weight:400; letter-spacing:0;
	color:var(--mega-body); background:var(--mega-card);
	border:1px solid var(--mega-edge); border-radius:var(--radius-card);
	transition:transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.ss-nav-links .ss-mega-card::before{
	content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--mega-accent);
	transition:width .32s ease;
}
.ss-nav-links .ss-mega-card:hover,
.ss-nav-links .ss-mega-card:focus-visible{
	color:var(--mega-body); font-weight:400; transform:translateY(-4px);
	border-color:var(--mega-accent); background:var(--mega-card-hover);
	box-shadow:0 14px 30px rgba(0,0,0,.22);
}
#ss-primary-nav-utility .ss-mega-card:hover, #ss-primary-nav-utility .ss-mega-card:focus-visible{ box-shadow:0 14px 30px rgba(41,57,129,.16); }
.ss-nav-links .ss-mega-card:hover::before,
.ss-nav-links .ss-mega-card:focus-visible::before{ width:100%; }
.ss-nav-links .ss-mega-card:focus-visible{ outline:2px solid var(--mega-accent); outline-offset:2px; }

.ss-mega-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ss-mega-card__ticker{ font-size:30px; font-weight:900; line-height:1; letter-spacing:-.025em; color:var(--mega-ink); transition:color .2s ease; }
.ss-mega-card:hover .ss-mega-card__ticker,
.ss-mega-card:focus-visible .ss-mega-card__ticker{ color:var(--mega-accent); }
.ss-mega-card__tag{
	padding:3px 8px; font-size:10.5px; font-weight:700; letter-spacing:.12em; line-height:1.3; white-space:nowrap;
	color:var(--mega-accent); border:1px solid var(--mega-accent);
	border-color:color-mix(in srgb, var(--mega-accent) 45%, transparent);
}
.ss-mega-card__name{ font-size:14.5px; font-weight:600; line-height:1.3; color:var(--mega-ink); }
.ss-mega-card__name--lg{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.ss-mega-card__desc{ font-size:13px; line-height:1.5; color:var(--mega-muted); }
.ss-mega-card__cta{
	margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
	color:var(--mega-accent);
}
.ss-mega-card__cta span{ display:inline-block; transition:transform .22s ease; }
.ss-mega-card:hover .ss-mega-card__cta span,
.ss-mega-card:focus-visible .ss-mega-card__cta span{ transform:translateX(5px); }

@media (prefers-reduced-motion:reduce){
	.ss-mega, .ss-mega__grid > li, .ss-nav-links .ss-mega-card, .ss-nav-caret, .ss-mega-card__cta span{ transition:none !important; }
	.ss-nav-links .ss-mega-card:hover{ transform:none; }
}

/* Between the full mega menu and the mobile menu: collapse to a 2-column grid. */
@media (max-width:1180px) and (min-width:981px){
	.ss-mega__inner{ grid-template-columns:1fr; gap:26px; }
	.ss-mega__intro{ padding-right:0; border-right:0; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 24px; }
	.ss-mega__kicker{ width:100%; margin-bottom:0; }
	.ss-nav-links .ss-mega__all{ margin:0 0 0 auto; padding-top:0; }
	.ss-mega__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* Mobile: no hover panel — the children simply sit indented under the
   parent in the stacked menu. */
@media (max-width:980px){
	.ss-nav-caret{ display:none; }
	.ss-nav-item{ width:100%; }
	.ss-mega, .ss-nav-item.has-mega.is-dismissed > .ss-mega{
		position:static; padding:8px 0 4px 16px; background:none; border:0; box-shadow:none;
		opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
	}
	.ss-mega::after, .ss-mega__intro{ display:none; }
	.ss-mega__inner{ display:block; }
	.ss-mega__grid{ display:flex; flex-direction:column; gap:2px; }
	.ss-mega__grid > li, .ss-nav-item.has-mega.is-dismissed .ss-mega__grid > li{ opacity:1; transform:none; transition:none; }
	.ss-nav-links .ss-mega-card{
		flex-direction:row; align-items:baseline; gap:10px; padding:6px 0; background:none; border:0; box-shadow:none; transform:none;
	}
	.ss-nav-links .ss-mega-card::before, .ss-mega-card__desc, .ss-mega-card__cta, .ss-mega-card__tag{ display:none; }
	.ss-mega-card__top{ display:inline; }
	.ss-mega-card__ticker{ font-size:15px; font-weight:700; letter-spacing:0; color:#fff; }
	.ss-mega-card__name, .ss-mega-card__name--lg{ font-size:14px; font-weight:400; color:var(--mega-body); letter-spacing:0; }
	#ss-primary-nav-utility .ss-mega-card__ticker{ color:#293981; }
}

/* keep the parent link lit while its panel is open (the pointer is down in the panel, not on the link) */
.ss-nav-links .ss-nav-item.has-mega.is-open > a:not(.current),
.ss-nav-links .ss-nav-item.has-mega:focus-within > a:not(.current){ color:#fff; }
#ss-primary-nav-utility .ss-nav-item.has-mega.is-open > a:not(.current){ color:#293981 !important; }

/* Homepage hero background (assets/js/hero-motion.js). Its positioning and fade
   mask are inline on the <canvas> in template-parts/home-editorial.php, so a stale
   cached copy of this file can never leave it as a stray default-size box; this
   only adds the phone override (!important because the inline width wins). */
@media (max-width:640px){ .ss-hero-motion{ width:100% !important; } }

/* The 40px nav logo is ~142px wide and never shrinks (inline flex:none on its
   link, so it can't be squeezed out of proportion). That takes room from the rest
   of the row, so at the two tightest spots — just above the point where the menu
   links appear, and very small phones — the row gets a little tighter. */
@media (min-width:981px) and (max-width:1180px){
	.ss-nav{ gap:16px; }
	.ss-nav-links{ gap:20px; }
}
@media (max-width:420px){
	.ss-nav{ gap:10px; }
	.ss-nav-cta{ gap:8px; }
	.ss-nav-cta .ss-btn{ padding-inline:12px; font-size:12px; letter-spacing:.04em; }
	.ss-nav-cta > a:not(.ss-btn){ padding:0 12px !important; font-size:12px !important; }
}
@media (min-width:981px) and (max-width:1180px){ #ss-primary-nav-utility .ss-nav-links{ gap:20px !important; } }
@media (max-width:350px){
	.ss-nav-cta .ss-btn, .ss-nav-cta > a:not(.ss-btn){ padding:0 8px !important; font-size:11px !important; letter-spacing:0 !important; }
}