/* ============================================================
   Haverstock Investor Portal — shared styles (landing + chrome)
   Dark-first treatment on the web brand pack: the portal reads
   as the gated "inner" counterpart to the marketing site.
   ============================================================ */

@import url("/brand/brand-tokens.css?v=20260612c");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--on-dark);
  background:
    radial-gradient(110% 80% at 80% 0%, rgba(46, 107, 95, 0.28) 0%, transparent 55%),
    linear-gradient(168deg, var(--green-mid) 0%, var(--midnight) 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }  /* class display rules must not override the hidden attribute */
h1, h2, h3, h4, p, address { margin: 0; font-style: normal; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--pine); color: var(--on-dark);
  padding: 0.75rem 1.25rem; font-weight: 700; font-size: 0.85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Portal header ---------- */
.portal-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 31, 26, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.portal-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.logo { display: inline-flex; align-items: center; gap: 0.7rem; }
.logo-mark { width: 38px; height: auto; flex: none; }
.logo-mark polygon { fill: var(--gold); }
.logo-wordmark { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.13em; color: var(--on-dark); }
.logo-sub { font-weight: 400; font-size: 0.55rem; letter-spacing: 0.46em; margin-top: 4px; color: var(--on-dark); opacity: 0.82; }

.portal-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.portal-header-links { display: flex; align-items: center; gap: 1.4rem; }
.portal-header-links a {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-70);
  transition: color 200ms ease;
}
.portal-header-links a:hover { color: var(--gold-bright); }

/* ---------- Landing hero ---------- */
.portal-hero {
  position: relative;
  overflow: hidden;
  padding: calc(68px + clamp(3rem, 2rem + 5vw, 6.5rem)) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.portal-hero > .container { position: relative; z-index: 1; }

/* Signature contour ornament (ported from the website hero) + faint peak mark. */
.portal-ornament { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.portal-contours { position: absolute; inset: -14% 0 -10% 0; width: 100%; height: 130%; }
.portal-contours path {
  fill: none;
  stroke: rgba(244, 239, 231, 0.06);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: portal-draw 2.6s var(--ease-out) forwards;
}
.portal-contours path:nth-child(2) { stroke: rgba(201, 165, 88, 0.10); animation-delay: 0.12s; }
.portal-contours path:nth-child(3) { stroke: rgba(201, 165, 88, 0.20); animation-delay: 0.24s; }
.portal-contours path:nth-child(4) { stroke: rgba(244, 239, 231, 0.06); animation-delay: 0.36s; }
.portal-contours path:nth-child(5) { stroke: rgba(201, 165, 88, 0.11); animation-delay: 0.48s; }
.portal-contours path:nth-child(6) { stroke: rgba(244, 239, 231, 0.05); animation-delay: 0.60s; }
@keyframes portal-draw { to { stroke-dashoffset: 0; } }
.portal-peak {
  position: absolute;
  right: -2%; top: -6%;
  width: min(38vw, 440px);
  color: rgba(244, 239, 231, 0.045);
}
.portal-overline {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.portal-title {
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.portal-title em { color: var(--gold-bright); font-weight: 400; }
.portal-sub {
  margin-top: 1.3rem;
  max-width: 40rem;
  color: var(--on-dark-70);
  font-weight: 300;
  line-height: 1.7;
}

/* ---------- Destination cards ---------- */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.dest {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: 1.6rem 1.6rem 1.45rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(244, 239, 231, 0.04);
  overflow: hidden;
  transition: transform 320ms var(--ease-out), border-color 320ms ease, background-color 320ms ease;
}
.dest:hover { transform: translateY(-5px); border-color: var(--gold-dim); background: rgba(244, 239, 231, 0.07); }
.dest-no {
  position: absolute;
  top: 1rem; left: 1.5rem;
  font-size: clamp(2.1rem, 1.7rem + 1vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  opacity: 0.85;
}
@supports ((-webkit-text-stroke: 1px black)) {
  .dest-no { color: transparent; -webkit-text-stroke: 1.3px var(--gold-dim); }
}
.dest h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.dest p { margin-top: 0.45rem; font-size: 0.86rem; font-weight: 300; color: var(--on-dark-70); line-height: 1.55; max-width: 30rem; }
.dest-cta {
  margin-top: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.dest:hover .dest-cta { color: var(--gold-bright); }

/* Feature card — the deck. Brand contour flourish on the right (no photo). */
.dest-feature {
  grid-column: span 6;
  min-height: 320px;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(201, 165, 88, 0.11), transparent 55%),
    rgba(244, 239, 231, 0.04);
}
.dest-feature-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 26%, #000 72%);
  mask-image: linear-gradient(100deg, transparent 26%, #000 72%);
}
.dest-feature-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dest-feature-art path { fill: none; stroke: rgba(201, 165, 88, 0.22); stroke-width: 1.4; stroke-linecap: round; }
.dest-feature-art path:nth-child(even) { stroke: rgba(244, 239, 231, 0.08); }
.dest-feature > .dest-kicker,
.dest-feature > h2,
.dest-feature > p,
.dest-feature > .dest-cta { position: relative; z-index: 1; }
.dest-feature .dest-no { z-index: 1; }
.dest-feature h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
.dest-feature .dest-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.dest-half { grid-column: span 3; }
.dest-third { grid-column: span 2; }

/* Coming-soon state */
.dest.is-soon { cursor: default; }
.dest.is-soon:hover { transform: none; border-color: var(--line-dark); background: rgba(244, 239, 231, 0.04); }
.dest-soon-tag {
  position: absolute;
  top: 1.15rem; right: 1.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-50);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.dest.is-soon h2, .dest.is-soon .dest-no { opacity: 0.75; }

/* ---------- Portal footer ---------- */
.portal-footer {
  border-top: 1px solid var(--line-dark);
  padding: 1.6rem 0 2rem;
}
.portal-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--on-dark-50);
}
.portal-footer a { color: var(--on-dark-70); }
.portal-footer a:hover { color: var(--gold-bright); }

/* ---------- Reveal motion (landing) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 100ms);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Sign-in gate ---------- */
.gate-main {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(68px + clamp(2rem, 1rem + 4vw, 4rem)) var(--gutter) clamp(2.5rem, 2rem + 3vw, 4rem);
}
.gate-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  animation: gate-in 700ms var(--ease-out) both;
  background: rgba(11, 31, 26, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-dim);
  border-radius: 18px;
  padding: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.gate-overline {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem;
}
.gate-title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.gate-title em { color: var(--gold-bright); font-weight: 400; }
.gate-sub { margin-top: 0.7rem; color: var(--on-dark-70); font-weight: 300; font-size: 0.92rem; line-height: 1.6; }

.gate-step { margin-top: 1.6rem; }
.gate-lead { color: var(--on-dark-70); font-weight: 300; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.2rem; }
.gate-lead b { color: var(--on-dark); font-weight: 600; }

.gate-field { display: block; margin-bottom: 1rem; }
.gate-field > span {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.gate-field input, .gate-field textarea {
  width: 100%;
  font-family: inherit; font-size: 0.95rem; color: var(--on-dark);
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--line-dark); border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.gate-field input::placeholder, .gate-field textarea::placeholder { color: var(--on-dark-50); }
.gate-field input:focus, .gate-field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(244, 239, 231, 0.08);
}
.gate-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
#gate-otp-input { letter-spacing: 0.5em; font-size: 1.3rem; text-align: center; }

.gate-consent { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1.2rem; font-size: 0.82rem; color: var(--on-dark-70); line-height: 1.5; }
.gate-consent input { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.gate-link { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; font: inherit; }
.gate-link:hover { color: var(--gold); }

.gate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.8rem 1rem; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.gate-btn:hover { transform: translateY(-2px); }
.gate-btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
.gate-btn-primary { background: var(--gold); color: var(--midnight); border: 1px solid var(--gold); }
.gate-btn-primary:hover { background: var(--gold-bright); }
.gate-btn-ms { background: rgba(244, 239, 231, 0.95); color: #2f2f2f; border: 1px solid transparent; }
.gate-btn-ms .ms-logo { width: 18px; height: 18px; }

.gate-divider { display: flex; align-items: center; gap: 0.9rem; margin: 1.1rem 0; color: var(--on-dark-50); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.gate-divider::before, .gate-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-dark); }

.gate-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: 0.78rem; }
.gate-error { color: #e3a7a0; font-size: 0.8rem; margin: -0.3rem 0 0.9rem; }

.gate-message { text-align: center; }
.gate-message h2 { font-size: 1.3rem; font-weight: 700; }
.gate-message p { margin-top: 0.6rem; color: var(--on-dark-70); font-weight: 300; line-height: 1.6; }
.gate-message .gate-link { display: inline-block; margin-top: 1.2rem; }

/* Terms modal */
.gate-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.gate-modal[hidden] { display: none; }
.gate-modal-scrim { position: absolute; inset: 0; background: rgba(5, 14, 11, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.gate-modal-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;   /* clip to the radius — scrollbar moves to the body */
  background: var(--midnight); border: 1px solid var(--gold-dim); border-radius: 16px;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
/* The body scrolls (not the panel), so the panel keeps its rounded corners. The
   negative right margin cancels the panel's right padding so the scrollbar sits at
   the panel's edge (not floating ~2rem in); padding-right keeps the text off it.
   The panel's top/bottom padding keeps the scrollbar clear of the rounded corners. */
.gate-modal-body {
  overflow-y: auto; min-height: 0; flex: 1 1 auto;
  margin-right: calc(-1 * clamp(1.5rem, 1.2rem + 1vw, 2.2rem));
  padding-right: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 165, 88, 0.55) transparent;
}
.gate-modal-body::-webkit-scrollbar { width: 11px; }
.gate-modal-body::-webkit-scrollbar-track { background: transparent; }
.gate-modal-body::-webkit-scrollbar-thumb {
  background: rgba(201, 165, 88, 0.5);
  border-radius: 999px;
  border: 3px solid transparent;        /* transparent gutter -> a slim, floating thumb */
  background-clip: padding-box;
}
.gate-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(201, 165, 88, 0.85); background-clip: padding-box; }
.gate-modal-close { position: absolute; top: 0.7rem; right: 1rem; font-size: 1.6rem; line-height: 1; color: var(--on-dark-50); }
.gate-modal-close:hover { color: var(--gold-bright); }
.gate-modal-panel h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; padding-right: 2rem; flex: none; }
.gate-modal-body p { font-size: 0.82rem; font-weight: 300; color: var(--on-dark-70); line-height: 1.65; margin-bottom: 0.8rem; }
.gate-modal-body strong { color: var(--on-dark); font-weight: 600; }

@media (max-width: 560px) {
  .gate-card { max-width: 100%; }
  .gate-row { flex-direction: column-reverse; gap: 0.6rem; align-items: stretch; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 900px) {
  .dest-half, .dest-third { grid-column: span 6; }
  .dest { min-height: 0; padding-top: 3.2rem; }
  .dest-feature { min-height: 280px; }
  .portal-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .portal-contours path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ============================================================
   Investor portal HOME — light treatment
   The sign-in gate stays dark; the post-sign-in home is light
   (warm paper) so it contrasts with the dark website hero and
   the dark deck cover. Intro left, line-separated list right,
   sitting within a single viewport on desktop.
   ============================================================ */
.portal-home {
  color: var(--ink);
  background:
    radial-gradient(120% 92% at 88% -12%, rgba(201, 165, 88, 0.12) 0%, transparent 52%),
    linear-gradient(168deg, var(--paper) 0%, #ece4d6 100%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Header + footer chrome on a light ground */
.portal-home .portal-header { background: rgba(251, 248, 242, 0.78); border-bottom: 1px solid var(--line); }
.portal-home .logo-name,
.portal-home .logo-sub { color: var(--ink); }
.portal-home .portal-header-links a { color: var(--ink-70); }
.portal-home .portal-header-links a:hover { color: var(--gold); }
.portal-home .portal-footer { border-top: 1px solid var(--line); flex: none; }
.portal-home .portal-footer-inner { color: var(--ink-50); }
.portal-home .portal-footer a { color: var(--ink-70); }
.portal-home .portal-footer a:hover { color: var(--gold); }

/* Contour ornament re-tinted to read as faint topo lines on cream. Kept subtle,
   and masked so the rising lines fade out before the destination list (right
   column) rather than cutting across it. */
.portal-home .portal-peak { color: rgba(27, 75, 67, 0.04); }
.portal-home .portal-contours path { stroke: rgba(27, 75, 67, 0.05); }
.portal-home .portal-contours path:nth-child(2) { stroke: rgba(201, 165, 88, 0.09); }
.portal-home .portal-contours path:nth-child(3) { stroke: rgba(201, 165, 88, 0.13); }
.portal-home .portal-contours path:nth-child(4) { stroke: rgba(27, 75, 67, 0.045); }
.portal-home .portal-contours path:nth-child(5) { stroke: rgba(201, 165, 88, 0.09); }
.portal-home .portal-contours path:nth-child(6) { stroke: rgba(27, 75, 67, 0.04); }
/* Desktop: punch a soft hole in the ornament over the destination list only, so
   the lines stay clear of the list text but still show in the margins to its
   right and below. */
@media (min-width: 861px) {
  .portal-home .portal-ornament {
    -webkit-mask-image: radial-gradient(ellipse 32% 46% at 71% 54%, transparent 0, transparent 74%, #000 100%);
    mask-image: radial-gradient(ellipse 32% 46% at 71% 54%, transparent 0, transparent 74%, #000 100%);
  }
}

/* Deck-style "Important information" control in the footer */
.portal-footer-left { display: flex; align-items: center; gap: 0.9rem 1.4rem; flex-wrap: wrap; }
.portal-info-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--gold); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; border-bottom: 1px solid var(--gold-dim); padding-bottom: 1px; cursor: pointer;
}
.portal-info-btn:hover { color: var(--gold-bright); }
.portal-info-btn .info-ico { width: 13px; height: 13px; flex: none; }

/* Layout — fills the band between fixed header and footer */
.home-main {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(68px + clamp(1.5rem, 1rem + 3vw, 3rem)) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.home-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
  width: 100%;
}
.portal-home .portal-overline { color: var(--gold); }
.home-intro .portal-title { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem); }
.portal-home .portal-title em { color: var(--pine); }
.home-intro .portal-title em { font-size: 0.82em; }
.home-intro .portal-sub { color: var(--ink-70); max-width: 34rem; }

/* Line-separated destination list (no cards) */
.home-list { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  padding: clamp(0.9rem, 0.65rem + 0.7vw, 1.35rem) 0.2rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.home-list .row:last-child { border-bottom: 1px solid var(--line); }
.row-no {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  font-weight: 700; letter-spacing: 0.06em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.row-body { min-width: 0; }
.row-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.row-title { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.42rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.row-tag {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-50); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.6rem;
  transform: translateY(-1px);
}
.row-tag.is-featured { color: var(--gold); border-color: var(--gold-dim); }
.row-desc { display: block; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 300; color: var(--ink-70); line-height: 1.5; max-width: 40rem; }
.row-cta {
  font-size: 1.3rem; line-height: 1; color: var(--gold); justify-self: end;
  transition: transform 280ms var(--ease-out), color 280ms ease;
}
.row-link { cursor: pointer; transition: background-color 280ms ease; }
.row-link:hover { background: rgba(201, 165, 88, 0.07); }
.row-link:hover .row-title { color: var(--pine); }
.row-link:hover .row-cta { transform: translateX(5px); color: var(--gold-bright); }
.row.is-soon { grid-template-columns: auto 1fr; }
.row.is-soon .row-title { color: var(--ink-70); }
.row.is-soon .row-no { color: var(--gold-dim); }

/* Stack to a single scrolling column on narrow screens */
@media (max-width: 860px) {
  .home-main { align-items: flex-start; }
  .home-layout { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .home-intro .portal-sub { max-width: 100%; }
}

/* ============================================================
   Newsletter — home (issues + running indices) and reader.
   Inherits the light .portal-home theme.
   ============================================================ */
.nl-main {
  position: relative; flex: 1 0 auto;
  padding: calc(68px + clamp(2rem, 1.5rem + 3vw, 3.5rem)) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
}
.nl-loading, .nl-empty { color: var(--ink-50); font-size: 0.85rem; font-weight: 300; }

/* Home */
.nl-intro { max-width: 760px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem); }
.nl-intro .portal-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.nl-intro .portal-title em { font-size: 0.84em; }
.nl-intro .portal-sub { color: var(--ink-70); max-width: 40rem; }
.nl-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.nl-block-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.4rem; }

.nl-issues { display: flex; flex-direction: column; }
.nl-issue {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.7rem;
  padding: 1.05rem 0.2rem; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background-color 250ms ease;
}
.nl-issues .nl-issue:last-child { border-bottom: 1px solid var(--line); }
.nl-issue-year { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 1.8rem 0 0.2rem; }
.nl-issue-year:first-child { margin-top: 0; }
.nl-issue-year + .nl-issue { border-top: 0; }
.nl-issue:hover { background: rgba(201, 165, 88, 0.06); }
.nl-issue-month { order: 1; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.nl-issue:hover .nl-issue-month { color: var(--pine); }
.nl-new { order: 2; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 0.12rem 0.45rem; }
.nl-issue-meta { order: 3; margin-left: auto; font-size: 0.72rem; color: var(--ink-50); white-space: nowrap; }
.nl-issue-cta { order: 4; font-size: 1.2rem; line-height: 1; color: var(--gold); transition: transform 250ms var(--ease-out); }
.nl-issue:hover .nl-issue-cta { transform: translateX(4px); color: var(--gold-bright); }
.nl-issue-teaser { order: 5; flex-basis: 100%; font-size: 0.9rem; font-weight: 300; color: var(--ink-70); line-height: 1.45; }

/* Aside panels */
.nl-aside { display: flex; flex-direction: column; gap: 2.2rem; }
.nl-panel-sub { font-size: 0.78rem; font-weight: 300; color: var(--ink-70); line-height: 1.5; margin: 0 0 0.6rem; }
.nl-starr-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.3rem; }
.nl-starr-head .nl-block-title { margin-bottom: 0.25rem; }
.nl-starr-head .nl-panel-sub { margin-bottom: 0; }
.nl-starr-lyndsey { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid var(--gold-dim); background: #fff; }
.nl-starr-lyndsey img { position: absolute; top: 50%; left: 50%; width: 132%; height: 132%; transform: translate(-50%, -50%); object-fit: cover; }
.nl-starr-table, .nl-calls, .nl-themes { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.nl-starr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 0.1rem 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.nl-site { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.35rem; color: var(--ink-50); text-decoration: none; transition: color 180ms ease; }
.nl-site:hover { color: var(--gold); }
.nl-globe { width: 13px; height: 13px; display: block; }
.nl-starr-table .nl-starr-row:first-child { border-top: 0; }
.nl-rank { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.nl-starr-text { min-width: 0; }
.nl-starr-head { display: flex; align-items: center; gap: 0.4rem; }
.nl-fav { width: 16px; height: 16px; border-radius: 3px; background: #fff; object-fit: cover; border: 1px solid var(--line); flex: none; display: block; }
.nl-starr-photo { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin: 1.1rem 0 0.2rem; }
.nl-starr-name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.nl-starr-name:hover { color: var(--gold); }
.nl-starr-where { display: block; font-size: 0.7rem; color: var(--ink-50); margin-top: 0.1rem; }
.nl-starr-score { justify-self: end; text-align: right; white-space: nowrap; }
.nl-more { margin-top: 0.9rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-50); cursor: pointer; transition: color 180ms ease; }
.nl-more:hover { color: var(--gold); }
.nl-call, .nl-theme { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.nl-calls .nl-call:first-child, .nl-themes .nl-theme:first-child { border-top: 0; }
.nl-call a { font-weight: 600; font-size: 0.9rem; color: var(--ink); text-decoration: none; }
.nl-theme a { font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; color: var(--ink); text-decoration: none; }
.nl-call a:hover, .nl-theme a:hover { color: var(--gold); }
.nl-call-month, .nl-theme-month { margin-left: auto; font-size: 0.7rem; color: var(--ink-50); white-space: nowrap; }

/* Long/short stance tag (shared: panels + reader) */
.nl-stance { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 999px; vertical-align: middle; }
.nl-stance-long { color: #1b5e3f; background: rgba(27, 94, 63, 0.12); }
.nl-stance-short { color: #9a3412; background: rgba(154, 52, 18, 0.12); }
.nl-stance-watch { color: var(--ink-70); background: rgba(21, 33, 29, 0.08); }

/* Gold rating meter (10-point) */
.nl-meter { position: relative; display: inline-block; font-size: 0.95rem; letter-spacing: 1.5px; line-height: 1; vertical-align: middle; }
.nl-meter-sm { font-size: 0.78rem; letter-spacing: 1px; }
.nl-meter-track { color: rgba(27, 75, 67, 0.16); }
.nl-meter-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--gold); }
.nl-meter-num { margin-left: 0.4rem; font-weight: 700; font-size: 0.85rem; color: var(--pine); vertical-align: middle; }
.nl-meter-num small { font-weight: 400; color: var(--ink-50); }

/* Reader */
.nl-article { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.nl-art-head { margin-bottom: 2.2rem; }
.nl-art-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); margin: 0.4rem 0 0; }
.nl-art-meta { font-size: 0.8rem; color: var(--ink-50); }
.nl-art-metarow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.7rem; }
.nl-pdf {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--pine);
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 0.4rem 0.9rem; transition: all 160ms ease;
}
.nl-pdf:hover { background: var(--pine); color: #fff; border-color: var(--pine); }
.nl-dl { width: 14px; height: 14px; flex: none; }
.nl-sec { scroll-margin-top: 90px; }  /* clear the fixed header when deep-linked */
.nl-sec-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.nl-sec-title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--ink); margin: 0; }
.nl-sec-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--pine); }
.nl-prose { margin-top: 1rem; }
.nl-prose p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.75; font-weight: 300; color: var(--ink-70); }
.nl-prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 0.4rem; }
/* Author lists in newsletter prose: restore the markers/indent the global
   `ul,ol { list-style:none; padding:0 }` reset strips, so a <ul>/<ol> in a
   section body renders as a proper bulleted/numbered list. */
.nl-prose ul, .nl-prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.nl-prose ul { list-style: disc; }
.nl-prose ol { list-style: decimal; }
.nl-prose li { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.75; font-weight: 300; color: var(--ink-70); }
.nl-prose li::marker { color: var(--gold); }
.nl-rule { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
.nl-starr-meta { font-size: 0.8rem; color: var(--ink-50); margin-top: 0.3rem; }
.nl-starr-intro { margin-top: 0.9rem; font-family: var(--font-serif); font-style: italic; color: var(--pine); font-size: 1.05rem; }
.nl-starr-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.nl-starr-web { margin-top: 0.9rem; }
.nl-starr-web a { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.nl-starr-web a:hover { color: var(--gold-bright); }
.nl-take { font-size: 0.85rem; color: var(--ink-70); }
.nl-art-foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nl-disc-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 0.5rem; }
.nl-disc { font-size: 0.72rem; line-height: 1.6; font-weight: 300; color: var(--ink-50); }
.nl-back { display: inline-block; margin-top: 1.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.nl-back:hover { color: var(--gold-bright); }

@media (max-width: 900px) {
  .nl-layout { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* Newsletter "View all" archive modal (light) */
.nl-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.nl-modal[hidden] { display: none; }
.nl-modal-scrim { position: absolute; inset: 0; background: rgba(11, 31, 26, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nl-modal-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.nl-modal-close { position: absolute; top: 0.7rem; right: 1rem; font-size: 1.6rem; line-height: 1; color: var(--ink-50); }
.nl-modal-close:hover { color: var(--gold); }
.nl-modal-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); padding-right: 2rem; }
.nl-modal-controls:not(:empty) { margin-top: 0.9rem; }
.nl-controls-row { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; }
.nl-ctrl-grp { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nl-chip {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-70); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.7rem; cursor: pointer; transition: all 180ms ease;
}
.nl-chip:hover { border-color: var(--gold-dim); color: var(--ink); }
.nl-chip.is-on { background: var(--pine); color: #fff; border-color: var(--pine); }

/* ============================================================
   FACTSHEET (light, on the warm-paper portal ground)
   White "document" cards carrying the charts/tables; every chart
   flips to its table, every table has a copy button.
   ============================================================ */
.fs-main { flex: 1 0 auto; padding: calc(68px + clamp(1.6rem, 1rem + 2vw, 3rem)) 0 clamp(2.5rem, 2rem + 3vw, 5rem); }

/* Local CSS vars scoped to the factsheet */
.fs-main {
  --fs-card: var(--paper);   /* matches the marketing site's Insights ("LinkedIn") section — subtler than white */
  --fs-pos: #2f7d56;
  --fs-neg: #b15441;
  --fs-shadow: 0 1px 2px rgba(21,33,29,0.04), 0 14px 34px -22px rgba(21,33,29,0.28);
}

/* ---- Hero / controls ---- */
.fs-intro {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.8rem);
}
.fs-intro .portal-title { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); }
.fs-period-sub { margin-top: 0.55rem; font-size: 0.82rem; font-weight: 300; color: var(--ink-70); letter-spacing: 0.01em; }
.fs-intro-controls { display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap; }
.fs-period { display: flex; gap: 0.6rem; }
.fs-select-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.fs-select--year { min-width: 5rem; }
.fs-select-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); }
.fs-select {
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--fs-card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 2rem 0.5rem 0.8rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231b4b43' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}
.fs-select:hover { border-color: var(--gold-dim); }
.fs-download {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; background: var(--pine); border: 1px solid var(--pine);
  border-radius: 8px; padding: 0.62rem 1.1rem; transition: background 180ms ease, transform 180ms ease;
}
.fs-download:hover { background: #16403a; transform: translateY(-1px); }
/* Secondary download (Excel) — outline, so PDF reads as the primary action */
.fs-download--alt { background: transparent; color: var(--pine); }
.fs-download--alt:hover { background: rgba(27, 75, 67, 0.06); transform: translateY(-1px); }
.fs-dl-ico { width: 15px; height: 15px; flex: none; }

/* ---- Sections ---- */
.fs-section { margin-bottom: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); }
.fs-section-head { display: flex; align-items: baseline; gap: 0.8rem 1.4rem; flex-wrap: wrap; margin-bottom: 1.3rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.fs-section-title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.fs-section-note { font-size: 0.78rem; font-weight: 300; color: var(--ink-70); flex: 1 1 16rem; }

/* ---- Card grid ---- */
.fs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.7rem + 1vw, 1.6rem); }
.fs-card--full { grid-column: 1 / -1; }
@media (max-width: 760px) { .fs-grid { grid-template-columns: 1fr; } }

.fs-card {
  background: var(--fs-card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--fs-shadow); padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column;
}
.fs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.7rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.fs-card-titles { min-width: 0; flex: 1 1 auto; }
.fs-card-title { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.fs-card-sub { font-size: 0.72rem; font-weight: 300; color: var(--ink-50); margin-top: 0.15rem; }
.fs-card-tools { display: flex; align-items: center; gap: 0.45rem; flex: none; margin-left: auto; }

.fs-flip-btn, .fs-copy {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-70); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.33rem 0.7rem; cursor: pointer; transition: all 160ms ease; white-space: nowrap;
}
.fs-flip-btn:hover, .fs-copy:hover { border-color: var(--gold-dim); color: var(--ink); }
.fs-copy.is-done { background: var(--pine); border-color: var(--pine); color: #fff; }
/* Flip control is icon-only (table/chart + curved arrow) */
.fs-flip-btn { padding: 0.3rem 0.5rem; display: inline-flex; align-items: center; }
.fs-flip-ico { width: 16px; height: 18px; display: block; }

/* ---- Flip body ---- */
.fs-card-body { position: relative; }
.fs-flip-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-card.flipped .fs-flip-inner { transform: rotateY(180deg); }
.fs-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; border-radius: 8px;
}
.fs-front { }
.fs-back { transform: rotateY(180deg); background: var(--fs-card); overflow: auto; }
.fs-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.fs-back-bar { display: flex; justify-content: flex-end; padding: 0 0 0.5rem; position: sticky; top: 0; background: var(--fs-card); }

/* Pure-table cards */
.fs-card-tablebody { overflow: auto; max-height: 420px; }

/* Risk decomposition — proportional-circle chart + legend, and the stacked
   right column (stress tests over historical replays). */
.fs-decomp-svg { display: block; width: 100%; height: 100%; }
/* Linked hover: a satellite and its legend entry accentuate together. A ring
   (not a fill change) avoids clashing with the other close gold shades. */
.fs-decomp-sat { transform-box: fill-box; transform-origin: center; transition: transform 140ms ease; cursor: default; }
.fs-decomp-sat.is-hi { transform: scale(1.1); stroke: #15211d; stroke-width: 2; }
.fs-decomp-li i { transition: transform 140ms ease; }
.fs-decomp-li.is-hi { color: var(--ink); font-weight: 500; }
.fs-decomp-li.is-hi i { transform: scale(1.35); }

/* Entrance: circles pop in (staggered, core first) when the chart scrolls into view. */
.fs-decomp-anim circle { transform-box: fill-box; transform-origin: center; }
.fs-decomp-anim:not(.is-in) circle { opacity: 0; transform: scale(0.3); }
.fs-decomp-anim:not(.is-in) text { opacity: 0; }
.fs-decomp-anim.is-in circle { animation: fsDecompPop 540ms cubic-bezier(0.34, 1.55, 0.6, 1) backwards; }
.fs-decomp-anim.is-in circle:nth-of-type(1) { animation-delay: 240ms; }
.fs-decomp-anim.is-in circle:nth-of-type(2) { animation-delay: 340ms; }
.fs-decomp-anim.is-in circle:nth-of-type(3) { animation-delay: 410ms; }
.fs-decomp-anim.is-in circle:nth-of-type(4) { animation-delay: 480ms; }
.fs-decomp-anim.is-in circle:nth-of-type(5) { animation-delay: 550ms; }
.fs-decomp-anim.is-in circle:nth-of-type(6) { animation-delay: 620ms; }
.fs-decomp-anim.is-in text { animation: fsDecompFade 420ms ease 470ms backwards; }
@keyframes fsDecompPop { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes fsDecompFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fs-decomp-anim:not(.is-in) circle, .fs-decomp-anim:not(.is-in) text { opacity: 1; transform: none; }
  .fs-decomp-anim.is-in circle, .fs-decomp-anim.is-in text { animation: none; }
}
.fs-decomp-legend { display: flex; flex-wrap: wrap; gap: 0.28rem 0.8rem; justify-content: center; margin-top: 0.5rem; font-size: 0.7rem; font-weight: 300; color: var(--ink-70); }
.fs-decomp-li { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; transition: color 140ms ease; cursor: default; }
.fs-decomp-li i { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.fs-risk-right { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }

/* ---- Tables ---- */
.fs-tablewrap { overflow-x: auto; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.fs-table th {
  text-align: left; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-50); padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fs-table td { padding: 0.42rem 0.55rem; border-bottom: 1px solid rgba(27,75,67,0.07); color: var(--ink); white-space: nowrap; }
.fs-table tr:last-child td { border-bottom: 0; }
.fs-table .ta-r, .fs-table th.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.fs-table .pos { color: var(--fs-pos); }
.fs-table .neg { color: var(--fs-neg); }
.fs-table .muted { color: var(--ink-50); }
.fs-table .fs-strong { font-weight: 700; }
.fs-table .fs-empty { color: var(--ink-50); text-align: center; padding: 1rem; }

/* ---- Toggles ---- */
.fs-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fs-toggle-btn {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-70); background: transparent; padding: 0.32rem 0.75rem; cursor: pointer; transition: all 150ms ease;
}
.fs-toggle-btn + .fs-toggle-btn { border-left: 1px solid var(--line); }
.fs-toggle-btn:hover { color: var(--ink); }
.fs-toggle-btn.active { background: var(--pine); color: #fff; }

/* First-visit guide for the MTD/YTD attribution toggle */
.fs-coach-wrap { position: relative; display: inline-flex; }
.fs-toggle.coach-glow { box-shadow: 0 0 0 4px rgba(201, 165, 88, 0.22); border-color: var(--gold); }
.fs-coach {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(280px, 80vw);
  background: rgba(16, 42, 36, 0.98);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  padding: 0.8rem 0.9rem 0.7rem;
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55);
  color: var(--on-dark);
  text-align: left;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.fs-coach.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fs-coach::after {
  content: "";
  position: absolute;
  top: -6px; right: 26px;
  width: 11px; height: 11px;
  transform: rotate(45deg);
  background: rgba(16, 42, 36, 0.98);
  border-left: 1px solid var(--gold-dim);
  border-top: 1px solid var(--gold-dim);
}
.fs-coach p { font-size: 0.82rem; font-weight: 300; line-height: 1.5; color: var(--on-dark-70); }
.fs-coach p b { color: var(--on-dark); font-weight: 600; }
.fs-coach-got {
  margin-top: 0.6rem;
  font: inherit;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer;
}
.fs-coach-got:hover { color: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) {
  .fs-coach { transition: opacity 120ms ease; transform: none; }
  .fs-coach.is-visible { transform: none; }
}

/* ---- Key figures strip (plain stats on the paper background, divided by hairlines) ---- */
.fs-figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem 0;
  margin-bottom: 1.7rem;
}
.fs-fig { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 clamp(1.2rem, 0.8rem + 2vw, 2.6rem); }
.fs-fig:first-child { padding-left: 0; }
@media (min-width: 620px) { .fs-fig:not(:first-child) { border-left: 1px solid var(--line); } }
.fs-fig-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); }
.fs-fig-val { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fs-fig-val.pos { color: var(--fs-pos); }
.fs-fig-val.neg { color: var(--fs-neg); }
.fs-fig-sub { font-size: 0.6rem; font-weight: 300; color: var(--ink-50); }

/* ---- Strategy & team ---- */
.fs-strategy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.2rem, 0.8rem + 2vw, 3rem); align-items: start; }
@media (max-width: 760px) { .fs-strategy { grid-template-columns: 1fr; } }
.fs-strategy-desc p { font-size: 0.95rem; line-height: 1.7; font-weight: 300; color: var(--ink-70); }
.fs-deflist { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; margin: 0; }
.fs-deflist dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-50); align-self: center; }
.fs-deflist dd { margin: 0; font-size: 0.88rem; color: var(--ink); }
.fs-team { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 1.6rem; }
.fs-pm { display: flex; align-items: center; gap: 0.85rem; }
/* Gold circle; the photo is scaled to fill it (mirrors the newsletter author photo) */
.fs-pm-photo { position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--gold); background: var(--pine); }
.fs-pm-photo img { position: absolute; top: 50%; left: 50%; width: 132%; height: 132%; max-width: none; transform: translate(-50%, -50%); object-fit: cover; }
.fs-pm-photo--blank { display: flex; align-items: center; justify-content: center; color: var(--cream); font-weight: 700; font-size: 1.3rem; }
.fs-pm-meta { display: flex; flex-direction: column; }
.fs-pm-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.fs-pm-title { font-size: 0.76rem; font-weight: 300; color: var(--ink-70); }

/* ---- Disclaimer ---- */
.fs-disclaimer-body p { font-size: 0.72rem; line-height: 1.65; font-weight: 300; color: var(--ink-50); margin: 0 0 0.8rem; }
.fs-disclaimer-body p:last-child { margin-bottom: 0; }

/* ---- States ---- */
.fs-loading, .fs-error, .fs-nodata { font-size: 0.9rem; color: var(--ink-70); padding: 2rem 0; text-align: center; }
.fs-error { color: var(--fs-neg); }
.fs-nodata { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }

/* Footnote superscripts (carried over from the dashboard factsheet) */
sup.fs-fn { font-size: 0.6em; font-weight: 600; color: var(--gold); margin-left: 1px; letter-spacing: 0; vertical-align: super; }
.fs-has-fn { cursor: help; }
/* Footnote hover tooltip */
.fs-fn-tip {
  position: fixed; z-index: 400; max-width: 300px; pointer-events: auto;
  background: #15211d; color: var(--cream); border: 1px solid rgba(201, 165, 88, 0.4);
  font-size: 0.7rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none;
  padding: 0.7rem 0.8rem; border-radius: 8px; box-shadow: 0 14px 36px -14px rgba(11, 31, 26, 0.6);
  display: flex; flex-direction: column; gap: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 130ms ease;
}
.fs-fn-tip-head { color: var(--gold); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(244, 239, 231, 0.16); }
.fs-fn-line { display: flex; gap: 0.5rem; align-items: baseline; }
.fs-fn-num { flex: none; min-width: 0.9rem; color: var(--gold); font-weight: 700; font-size: 0.66rem; }
.fs-fn-txt { color: rgba(244, 239, 231, 0.9); }
.fs-fn-tip-link { color: var(--gold-bright); font-size: 0.66rem; font-weight: 600; text-decoration: none; padding-top: 0.4rem; border-top: 1px solid rgba(244, 239, 231, 0.16); }
.fs-fn-tip-link:hover { text-decoration: underline; }
.fs-disclaimer { scroll-margin-top: 90px; }

/* Performance chart tooltip — small table (MTD/YTD/ITD x fund/benchmark) */
.fs-perf-tip {
  position: fixed; z-index: 400; pointer-events: none;
  background: #15211d; border: 1px solid rgba(201, 165, 88, 0.45); color: var(--cream);
  border-radius: 8px; padding: 0.55rem 0.65rem; box-shadow: 0 12px 32px -12px rgba(11, 31, 26, 0.6);
  opacity: 0; visibility: hidden; transition: opacity 120ms ease; font-size: 0.72rem;
}
.fs-perf-tip-head { font-weight: 700; font-size: 0.78rem; color: var(--cream); margin-bottom: 0.45rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(244, 239, 231, 0.18); }
.fs-perf-tip-note { color: rgba(244, 239, 231, 0.7); }
.fs-perf-tip-tbl { border-collapse: collapse; }
.fs-perf-tip-tbl th, .fs-perf-tip-tbl td { padding: 0.16rem 0.45rem; text-align: right; font-variant-numeric: tabular-nums; }
.fs-perf-tip-tbl thead th { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(244, 239, 231, 0.65); font-weight: 600; }
.fs-perf-tip-tbl tbody th { text-align: left; color: rgba(244, 239, 231, 0.65); font-weight: 600; }
.fs-perf-tip-tbl td.pos { color: #7fc4a0; }
.fs-perf-tip-tbl td.neg { color: #e0987f; }
.fs-perf-tip-tbl td.muted { color: rgba(244, 239, 231, 0.5); }

/* Attribution: factor donut beside the stacked contributors/detractors pair.
   The donut card stretches to the pair's height (grid default) and its body
   flex-fills, so the chart uses the space rather than leaving a gap below it. */
.fs-attrib-stack { display: flex; flex-direction: column; gap: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); min-width: 0; }

/* Pure tables on the paper background (non-flipping content). Only charts that
   flip to a table keep card chrome; tables read as editorial content. */
.fs-block { display: flex; flex-direction: column; min-width: 0; }
.fs-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding-bottom: 0.55rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.fs-block-title { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); min-width: 0; }
.fs-block-tools { display: flex; align-items: center; gap: 0.45rem; flex: none; }
.fs-block-body { overflow-x: auto; }
.fs-block .fs-table thead th { border-bottom: none; padding-top: 0; }
.fs-block .fs-table td { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Performance flip table — even, right-aligned month columns */
.fs-table--perf { table-layout: fixed; min-width: 680px; }
.fs-table--perf th, .fs-table--perf td { text-align: right; padding-left: 0.3rem; padding-right: 0.3rem; }
.fs-table--perf th:first-child, .fs-table--perf td:first-child { text-align: left; width: 3.2rem; }

/* Sortable table headers (top-10 exposures) */
.fs-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color 140ms ease; }
.fs-th-sort:hover { color: var(--ink); }
.fs-table th.is-sorted { color: var(--pine); }
.fs-sort-ind { font-size: 0.8em; }

/* Strategy & team — two columns, AUM-vs-capacity bar */
/* Plain columns (no cards) with a vertical hairline between PMs and details */
.fs-strat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.fs-strat-panel { min-width: 0; }
.fs-strat-cols > .fs-strat-panel:first-child { padding-right: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (min-width: 761px) {
  .fs-strat-cols > .fs-strat-panel:nth-child(2) { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 1rem + 3vw, 4rem); }
}
@media (max-width: 760px) {
  .fs-strat-cols { grid-template-columns: 1fr; gap: 2.2rem; }
  .fs-strat-cols > .fs-strat-panel:first-child { padding-right: 0; }
}
.fs-strat-subtitle { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); padding-bottom: 0.6rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.fs-strat-panel .fs-team { flex-direction: column; flex-wrap: nowrap; gap: 1.05rem; margin-top: 0; }
.fs-strat-desc { margin-top: 1.2rem; font-size: 0.9rem; line-height: 1.7; font-weight: 300; color: var(--ink-70); max-width: 60ch; }

.fs-aum { margin-top: 1.3rem; }
.fs-aum-label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 0.5rem; }
.fs-aum-track { position: relative; height: 48px; border-radius: 9px; background: rgba(27, 75, 67, 0.08); overflow: hidden; }
.fs-aum-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--pine); }
.fs-aum-val { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fs-aum-cap { display: block; margin-top: 0.45rem; font-size: 0.68rem; color: var(--ink-50); }
.nl-modal-body { margin-top: 1rem; overflow-y: auto; }
.nl-modal-list { margin-top: 0; }
.nl-year { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 1.3rem 0 0.2rem; }
.nl-year:first-child { margin-top: 0; }