/* ==========================================================================
   Steel Atlas — shared portal theme
   Brings every portal page in line with the steelatlas.vc site: Butler serif
   at a light weight, warm ink on white, hairline rules, quiet outline buttons.

   Loaded after each page's own inline <style>, so rules here win at equal
   specificity. Only visual properties are overridden (colour, type, borders,
   radii) — layout and responsive behaviour stay with the page.

   <html data-family="…"> scopes the few page-type specific rules:
   portal (root index), investment, memo, reporting.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Butler ships light + bold only. Old pages request 'Playfair Display' by
   name in places, so alias it to Butler too. */
@font-face { font-family: 'Butler'; src: url(fonts/Butler-Light.woff2) format('woff2'); font-weight: 100 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Butler'; src: url(fonts/Butler-Bold.woff2) format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(fonts/Butler-Light.woff2) format('woff2'); font-weight: 100 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(fonts/Butler-Bold.woff2) format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --sa-bg: #ffffff;
  --sa-ink: #2a2926;
  --sa-ink-2: #55534e;
  --sa-muted: #7b7972;
  --sa-faint: #a8a59d;
  --sa-line: #dcdcd6;
  --sa-line-soft: #ecebe6;
  --sa-panel: #f8f7f4;
  --sa-gold: #b8995c;
  --sa-gold-ink: #85692f;
  --sa-gold-tint: rgba(184, 153, 92, 0.12);
  --sa-serif: 'Butler', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sa-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --sa-ease: cubic-bezier(.4, 0, .2, 1);

  /* Remap the old page tokens */
  --navy: var(--sa-ink);
  --navy-dark: var(--sa-ink);
  --navy-light: var(--sa-panel);
  --gold: var(--sa-gold);
  --gold-dark: var(--sa-gold-ink);
  --gold-light: var(--sa-panel);
  --grey: var(--sa-panel);
  --grey-mid: var(--sa-line);
  --text: var(--sa-ink);
  --text-light: var(--sa-ink-2);
  --text-muted: var(--sa-muted);
  --white: #fff;
  --card-border: var(--sa-line);
  --dynamic: var(--sa-ink);
  --dynamic-bg: var(--sa-gold-tint);
  --dynamic-border: var(--sa-gold);
  --serif: var(--sa-serif);
  --sans: var(--sa-sans);
  color-scheme: light;
}
/* Reporting pages use the two grey tokens the other way round */
:root[data-family="reporting"] {
  --bg: var(--sa-bg);
  --bg-dark: var(--sa-ink);
  --text-muted: var(--sa-ink-2);
  --text-light: var(--sa-muted);
  --accent: var(--sa-ink);
  --line: var(--sa-line);
  --card-bg: #fff;
  --invest: var(--sa-ink);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
body { background: var(--sa-bg); color: var(--sa-ink); font-family: var(--sa-sans); }
::selection { background: color-mix(in srgb, var(--sa-gold) 28%, transparent); }
.sa-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Serif emphasis: Butler has no italic, so emphasis goes bold — same as the
   display type on steelatlas.vc */
.hero h1 em, .hero h2 em, .report-hero h1 em, .banner-title em { font-style: normal; font-weight: 700; letter-spacing: -.03em; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: color-mix(in srgb, var(--sa-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--sa-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--sa-line-soft);
}
.header-brand { color: var(--sa-ink); }
/* Gold badge + PNG → the steelatlas.vc wordmark */
.brand-logo {
  width: 150px;
  height: 14px;
  padding: 0;
  border-radius: 0;
  background: var(--sa-ink);
  -webkit-mask: url(wordmark.svg) left center / contain no-repeat;
  mask: url(wordmark.svg) left center / contain no-repeat;
}
.brand-logo img { display: none; }
.brand-sep { background: var(--sa-line); height: 26px; }
.brand-text h1 {
  font-family: var(--sa-serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--sa-ink);
}
.brand-text .subtitle {
  font-family: var(--sa-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--sa-muted);
}

/* Header links + buttons share the site's quiet outline button */
.header-nav a,
.back-link,
.btn-sign-out,
.btn-outline,
.btn-toggle-params,
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: 0 .95rem;
  font-family: var(--sa-sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--sa-ink-2);
  background: transparent;
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  transition: border-color .25s var(--sa-ease), color .25s var(--sa-ease), background-color .25s var(--sa-ease);
}
.header-nav a:hover,
.back-link:hover,
.btn-sign-out:hover,
.btn-outline:hover {
  background: transparent;
  border-color: var(--sa-muted);
  color: var(--sa-ink);
}
.header-nav a.active { color: var(--sa-gold-ink); }
.btn-toggle-params,
.btn-gold { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.btn-toggle-params:hover,
.btn-gold:hover { background: transparent; color: var(--sa-ink); border-color: var(--sa-ink); }

.mobile-nav-toggle { color: var(--sa-ink); }
@media (max-width: 768px) {
  /* Nav lives behind the menu toggle on small screens */
  .header-nav:not(.open) { display: none; }
  .mobile-nav-toggle {
    margin-left: auto;
    margin-right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sa-line);
    border-radius: 6px;
  }
  .mobile-nav-toggle svg { width: 16px; height: 16px; stroke-width: 1.6; }
  .header-nav.open {
    align-items: stretch;
    background: var(--sa-bg);
    border-top: 1px solid var(--sa-line-soft);
    border-bottom: 1px solid var(--sa-line);
    box-shadow: 0 12px 24px rgba(42, 41, 38, .06);
  }
  .header-nav.open a {
    border: 0;
    border-bottom: 1px solid var(--sa-line-soft);
    border-radius: 0;
    padding: 12px 0;
    font-family: var(--sa-serif);
    font-weight: 300;
    font-size: 1.4rem;
    color: var(--sa-ink);
  }
  .header-nav.open a.active { color: var(--sa-gold-ink); }
  .brand-logo { width: 112px; height: 11px; }
}

/* User menu */
.user-menu-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--sa-line);
  color: var(--sa-ink-2);
}
.user-menu-btn:hover { background: transparent; border-color: var(--sa-muted); color: var(--sa-ink); }
.user-menu-btn svg { width: 15px; height: 15px; stroke-width: 1.6; }
.user-menu-dropdown {
  background: var(--sa-bg);
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(42, 41, 38, .08);
}
.user-menu-dropdown a,
.user-menu-dropdown button { color: var(--sa-ink-2); font-family: var(--sa-sans); font-weight: 400; }
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover { background: var(--sa-panel); color: var(--sa-ink); }
.user-menu-dropdown .menu-divider { background: var(--sa-line-soft); }

/* Presence */
.presence-avatar { background: var(--sa-panel); color: var(--sa-ink-2); border-color: var(--sa-bg); font-family: var(--sa-sans); font-weight: 500; box-shadow: 0 0 0 1px var(--sa-line); }
.presence-avatar--self { background: var(--sa-gold); color: #fff; border-color: var(--sa-bg); }
.presence-overflow { background: var(--sa-line-soft); color: var(--sa-ink-2); border-color: var(--sa-bg); }
.presence-tooltip,
.presence-overflow .presence-tooltip { background: var(--sa-ink); color: #fff; border-radius: 4px; font-family: var(--sa-sans); }
.presence-tooltip::before { border-top-color: var(--sa-ink); }
.presence-tooltip::before,
.presence-overflow .presence-tooltip::before { border-bottom-color: var(--sa-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer,
[data-family="reporting"] footer {
  background: var(--sa-bg);
  color: var(--sa-muted);
  border-top: 1px solid var(--sa-line);
}
.footer-brand,
.site-footer .footer-brand,
[data-family="reporting"] footer .footer-logo {
  font-family: var(--sa-serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--sa-ink);
}
.footer-links a { color: var(--sa-muted); }
.footer-links a:hover { color: var(--sa-ink); }
.footer-disclaimer { color: var(--sa-faint); }
.site-footer p { color: var(--sa-muted); }
[data-family="reporting"] footer p { color: var(--sa-muted); }
[data-family="reporting"] footer a { color: var(--sa-ink-2); border-bottom-color: var(--sa-line); }
[data-family="reporting"] footer a:hover { color: var(--sa-gold-ink); }

/* ==========================================================================
   Sign-in
   ========================================================================== */
.auth-overlay {
  background: color-mix(in srgb, var(--sa-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.auth-modal {
  background: var(--sa-bg);
  border: 1px solid var(--sa-line);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(42, 41, 38, .08);
}
.auth-logo .brand-logo { margin-left: auto; margin-right: auto; width: 170px; height: 16px; }
.auth-logo h2 { font-family: var(--sa-serif); font-weight: 300; font-size: 30px; letter-spacing: -.015em; color: var(--sa-ink); }
.auth-subtitle { color: var(--sa-muted); }
.auth-modal input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--sa-sans);
  font-size: 15px;
  color: var(--sa-ink);
}
.auth-modal input::placeholder { color: var(--sa-faint); }
.auth-modal input:focus { border-color: var(--sa-gold); box-shadow: none; outline: none; }
.auth-btn {
  background: var(--sa-ink);
  color: #fff;
  border: 1px solid var(--sa-ink);
  border-radius: 6px;
  font-family: var(--sa-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.auth-btn:hover { background: transparent; color: var(--sa-ink); }
.auth-toggle { color: var(--sa-muted); }
.auth-toggle a { color: var(--sa-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sa-gold); text-underline-offset: 3px; }
.auth-error { border-radius: 4px; }
.access-pending h3 { font-family: var(--sa-serif); font-weight: 300; }

/* ==========================================================================
   Shared buttons / controls in page bodies
   ========================================================================== */
.scroll-top,
.back-to-top {
  background: var(--sa-bg);
  color: var(--sa-ink);
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  box-shadow: none;
}
.scroll-top:hover,
.back-to-top:hover { border-color: var(--sa-muted); background: var(--sa-bg); }

/* ==========================================================================
   Comment panel (Steel Atlas team only)
   ========================================================================== */
.sa-comment-btn {
  background: var(--sa-ink);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(42, 41, 38, .18);
}
.sa-comment-btn:hover { background: var(--sa-gold-ink); }
.sa-comment-panel {
  background: var(--sa-bg);
  color: var(--sa-ink);
  border-left: 1px solid var(--sa-line);
  box-shadow: -16px 0 40px rgba(42, 41, 38, .06);
}
.sa-panel-header { border-bottom: 1px solid var(--sa-line-soft); }
.sa-panel-header h3 { font-family: var(--sa-serif); font-weight: 300; font-size: 20px; color: var(--sa-ink); }
.sa-panel-close { color: var(--sa-muted); }
.sa-panel-close:hover { color: var(--sa-ink); }
.sa-panel-filters { border-bottom: 1px solid var(--sa-line-soft); }
.sa-filter-btn,
.sa-panel-filters button { background: transparent; border: 1px solid var(--sa-line); color: var(--sa-ink-2); border-radius: 6px; }
.sa-filter-btn.active,
.sa-panel-filters button.active { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.sa-panel-filters button:hover { border-color: var(--sa-muted); color: var(--sa-ink); }
.sa-comments-list::-webkit-scrollbar-thumb { background: var(--sa-line); }
.sa-comment-thread { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.sa-comment-thread:hover { border-color: var(--sa-line); }
.sa-comment-quote { color: var(--sa-gold-ink); background: var(--sa-gold-tint); border-left: 1px solid var(--sa-gold); border-radius: 0; }
.sa-comment-page { color: var(--sa-muted); }
.sa-comment-avatar { background: var(--sa-gold); color: #fff; }
.sa-comment-author { color: var(--sa-ink); }
.sa-comment-time { color: var(--sa-faint); }
.sa-comment-body { color: var(--sa-ink-2); }
.sa-comment-actions button { color: var(--sa-muted); }
.sa-comment-actions button:hover { color: var(--sa-gold-ink); background: var(--sa-gold-tint); }
.sa-resolved-badge { color: #3f7a4f; }
.sa-new-comment { background: var(--sa-bg); border-top: 1px solid var(--sa-line-soft); }
.sa-new-comment textarea { background: var(--sa-bg); border: 1px solid var(--sa-line); border-radius: 4px; color: var(--sa-ink); }
.sa-new-comment textarea:focus { border-color: var(--sa-gold); }
.sa-new-comment textarea::placeholder { color: var(--sa-faint); }
.sa-submit-btn { background: var(--sa-ink); color: #fff; border-radius: 6px; font-weight: 500; }
.sa-submit-btn:hover { background: var(--sa-gold-ink); }
.sa-submit-btn:disabled { opacity: .4; }
.sa-empty-state { color: var(--sa-muted); }

/* ==========================================================================
   Admin dashboard (portal root + memo pages)
   ========================================================================== */
.admin-dashboard { background: var(--sa-bg); color: var(--sa-ink); }
.admin-header { border-bottom: 1px solid var(--sa-line); padding-bottom: 24px; }
.admin-title { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.7rem); letter-spacing: -.015em; color: var(--sa-ink); }
.admin-header .admin-subtitle { color: var(--sa-muted); }
.admin-live-dot { background: #3f9a5b; }
.admin-live-text { color: #3f7a4f; font-weight: 500; letter-spacing: .16em; font-size: 11px; }
.admin-card {
  background: var(--sa-bg);
  border: 0;
  border-top: 1px solid var(--sa-line);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.admin-card-label { color: var(--sa-muted); font-size: .7rem; font-weight: 500; letter-spacing: .16em; }
.admin-card-value { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -.02em; color: var(--sa-ink); }
.admin-card-sub { color: var(--sa-faint); }
.admin-panel,
.admin-mgmt { background: var(--sa-bg); border: 1px solid var(--sa-line); border-radius: 4px; }
.admin-panel-title { font-family: var(--sa-serif); font-weight: 300; font-size: 22px; letter-spacing: -.01em; color: var(--sa-ink); }
.admin-table thead th,
.admin-mgmt-table thead th {
  background: var(--sa-bg);
  color: var(--sa-muted);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  border-bottom: 1px solid var(--sa-line);
}
.admin-table tbody td,
.admin-mgmt-table tbody td { border-bottom: 1px solid var(--sa-line-soft); color: var(--sa-ink-2); }
.admin-table tbody tr:hover,
.admin-mgmt-table tbody tr:hover { background: var(--sa-panel); }
.admin-table .user-name { color: var(--sa-ink); font-weight: 500; }
.admin-table .user-email { color: var(--sa-muted); }
.status-badge { border-radius: 4px; font-weight: 500; }
.status-online { background: rgba(63, 154, 91, .1); color: #3f7a4f; }
.status-offline { background: var(--sa-line-soft); color: var(--sa-muted); }
.admin-feed-item { border-bottom: 1px solid var(--sa-line-soft); }
.admin-feed-text { color: var(--sa-ink-2); }
.admin-feed-text strong { color: var(--sa-ink); font-weight: 500; }
.admin-feed-time { color: var(--sa-faint); }
.admin-feed-empty { color: var(--sa-muted); }
.feed-icon-open { background: rgba(63, 154, 91, .1); color: #3f7a4f; }
.feed-icon-close { background: rgba(176, 72, 60, .08); color: #a5473b; }
.feed-icon-view,
.feed-icon-auth { background: var(--sa-gold-tint); color: var(--sa-gold-ink); }
.feed-icon-param { background: rgba(110, 96, 160, .1); color: #6a5f9a; }
.admin-mgmt-add { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.admin-mgmt-add input:not([type="checkbox"]),
.admin-search input {
  background: var(--sa-bg);
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  color: var(--sa-ink);
  font-family: var(--sa-sans);
}
.admin-mgmt-add input:not([type="checkbox"])::placeholder,
.admin-search input::placeholder { color: var(--sa-faint); }
.admin-mgmt-add input:focus,
.admin-search input:focus { border-color: var(--sa-gold); outline: none; }
.admin-mgmt-add label { color: var(--sa-ink-2); }
.admin-search svg { color: var(--sa-faint); }
.admin-search-count { color: var(--sa-muted); }
.wl-identity { color: var(--sa-muted); }
.admin-mgmt-table tbody td:first-child { color: var(--sa-ink); }
.admin-mgmt-add input[type="checkbox"],
.admin-mgmt-table input[type="checkbox"],
.company-access-item input[type="checkbox"] { accent-color: var(--sa-ink); }
.admin-mgmt-btn { background: var(--sa-ink); color: #fff; border: 1px solid var(--sa-ink); border-radius: 6px; font-weight: 500; }
.admin-mgmt-btn:hover { background: transparent; color: var(--sa-ink); }
.admin-mgmt-btn-danger { color: #a5473b; border: 1px solid var(--sa-line); border-radius: 6px; }
.admin-mgmt-btn-danger:hover { background: rgba(176, 72, 60, .06); border-color: #a5473b; }
.admin-mgmt-btn-companies { color: var(--sa-gold-ink); border: 1px solid var(--sa-line); border-radius: 6px; }
.admin-mgmt-btn-companies:hover { background: var(--sa-gold-tint); border-color: var(--sa-gold); }
.company-access-panel { background: var(--sa-panel); border-top: 1px solid var(--sa-line-soft); border-radius: 4px; }
.company-access-panel h4 { color: var(--sa-gold-ink); font-weight: 500; letter-spacing: .16em; }
.company-access-item { color: var(--sa-ink-2); }
.company-access-item .ca-fund-tag,
.company-count-badge { background: var(--sa-line-soft); color: var(--sa-muted); }

/* Memo-page admin extras */
.param-item { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.param-item.param-changed { border-color: var(--sa-gold); background: var(--sa-gold-tint); }
.param-item.param-output { border-color: rgba(110, 96, 160, .3); background: rgba(110, 96, 160, .05); }
.param-label { color: var(--sa-muted); }
.param-value { color: var(--sa-ink); }
.param-changed .param-label,
.param-changed .param-value { color: var(--sa-gold-ink); }
.param-default-note { color: var(--sa-faint); }
.admin-passphrase-modal { background: var(--sa-bg); color: var(--sa-ink); border: 1px solid var(--sa-line); border-radius: 4px; }
.admin-passphrase-modal input { background: var(--sa-bg); color: var(--sa-ink); border: 1px solid var(--sa-line); border-radius: 6px; }

/* ==========================================================================
   Portal home
   ========================================================================== */
[data-family="portal"] .hero {
  background: var(--sa-bg);
  color: var(--sa-ink);
  text-align: left;
  padding-left: max(32px, calc((100% - 1100px) / 2));
  padding-right: max(32px, calc((100% - 1100px) / 2));
  border-bottom: 1px solid var(--sa-line);
}
[data-family="portal"] .hero::before { display: none; }
[data-family="portal"] .hero-label { color: var(--sa-muted); font-size: .7rem; letter-spacing: .16em; }
[data-family="portal"] .hero h2 {
  font-family: var(--sa-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
[data-family="portal"] .hero-subtitle {
  margin: 0;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  line-height: 1.6;
  color: var(--sa-ink-2);
}
[data-family="portal"] .portal-content .section + .section { border-top: 1px solid var(--sa-line); }
.section-title { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.015em; line-height: 1.08; }
.section-link { color: var(--sa-ink-2); font-weight: 400; }
.section-link:hover { color: var(--sa-gold-ink); }

.fund-tab {
  border-radius: 6px;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .02em;
  background: transparent;
  border: 1px solid var(--sa-line);
  color: var(--sa-ink-2);
}
.fund-tab:hover { border-color: var(--sa-muted); color: var(--sa-ink); }
.fund-tab.active { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }

/* Cards become hairline-ruled entries, like the index rows on steelatlas.vc */
.investment-card,
.report-card,
.resource-card,
.update-card,
.company-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sa-line);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .5s var(--sa-ease);
}
.investment-card:hover,
.report-card:hover,
.resource-card:hover,
.update-card:hover,
.company-card:hover {
  border-color: var(--sa-gold);
  box-shadow: none;
  transform: none;
}
[data-family="portal"] .investment-card,
[data-family="portal"] .report-card,
[data-family="portal"] .resource-card { padding-left: 0; padding-right: 0; }

.badge {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
}
.badge + .badge { padding-left: .7rem; border-left: 1px solid var(--sa-line); margin-left: .1rem; }
.badge-fund { background: transparent; color: var(--sa-gold-ink); }
.badge-spv { background: transparent; color: var(--sa-ink); }
.badge-research { background: transparent; color: var(--sa-ink-2); }
.badge-stage { background: transparent; color: var(--sa-muted); }
.card-arrow { color: var(--sa-faint); transition: color .3s var(--sa-ease), transform .45s var(--sa-ease); }
.investment-card:hover .card-arrow { color: var(--sa-gold-ink); }
.card-company { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(1.45rem, 2vw, 1.75rem); letter-spacing: -.01em; line-height: 1.15; }
.card-oneliner { color: var(--sa-muted); font-size: .95rem; line-height: 1.55; }
.card-meta { border-top: 1px solid var(--sa-line-soft); color: var(--sa-muted); }
.card-meta-label { color: var(--sa-faint); font-weight: 500; letter-spacing: .16em; }
.card-meta-value { color: var(--sa-ink-2); font-weight: 400; }

.report-quarter { font-family: var(--sa-serif); font-weight: 300; font-size: 1.7rem; letter-spacing: -.01em; }
[data-family="portal"] .report-date { color: var(--sa-muted); }
.report-desc { color: var(--sa-muted); }
.report-arrow { color: var(--sa-ink-2); font-weight: 400; }
.report-card:hover .report-arrow { color: var(--sa-gold-ink); }

.resource-icon { border-radius: 4px; }
.resource-icon-timeline,
.resource-icon-portfolio { background: var(--sa-panel); color: var(--sa-gold-ink); border: 1px solid var(--sa-line-soft); }
.resource-info h4 { font-family: var(--sa-serif); font-weight: 300; font-size: 1.35rem; letter-spacing: -.01em; }
.resource-info p { color: var(--sa-muted); }

/* ==========================================================================
   Investment pages
   ========================================================================== */
.company-hero { background: var(--sa-bg); border-bottom: 1px solid var(--sa-line); }
.company-hero .company-name { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; }
.company-description { color: var(--sa-ink-2); }
.company-meta-label { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; font-size: .68rem; }
.company-meta-value { color: var(--sa-ink); font-weight: 400; }
.action-buttons { background: var(--sa-bg); border-bottom: 1px solid var(--sa-line); }
.action-btn {
  border-radius: 6px;
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .02em;
  transition: border-color .25s var(--sa-ease), color .25s var(--sa-ease), background-color .25s var(--sa-ease);
}
.action-btn-primary { background: var(--sa-ink); color: #fff; border: 1px solid var(--sa-ink); }
.action-btn-primary:hover { background: transparent; color: var(--sa-ink); }
.action-btn-secondary { background: transparent; color: var(--sa-ink-2); border: 1px solid var(--sa-line); }
.action-btn-secondary:hover { border-color: var(--sa-muted); color: var(--sa-ink); box-shadow: none; }
.company-info-title,
.updates-title { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.015em; line-height: 1.08; }
[data-family="investment"] .company-info-inner > h3 { font-family: var(--sa-serif); font-weight: 300 !important; font-size: 1.5rem !important; letter-spacing: -.01em; }
.company-link { border-radius: 6px; font-weight: 400; color: var(--sa-ink-2); background: transparent; border: 1px solid var(--sa-line); }
.company-link:hover { border-color: var(--sa-muted); color: var(--sa-ink); box-shadow: none; }
.team-card { background: var(--sa-bg); border: 0; border-top: 1px solid var(--sa-line); border-radius: 0; padding-left: 0; padding-right: 0; }
.team-card:hover { border-color: var(--sa-gold); box-shadow: none; }
.team-name { font-family: var(--sa-serif); font-weight: 300; font-size: 1.35rem; letter-spacing: -.01em; }
.team-role { color: var(--sa-gold-ink); font-weight: 400; }
.team-bio { color: var(--sa-muted); }
.team-linkedin { color: var(--sa-ink-2); font-weight: 400; }
.team-linkedin:hover { color: var(--sa-gold-ink); }
[data-family="investment"] .update-card { padding-left: 0; padding-right: 0; }
.update-quarter { font-family: var(--sa-serif); font-weight: 300; font-size: 1.5rem; letter-spacing: -.01em; }
.update-date { color: var(--sa-muted); }
.update-arrow { color: var(--sa-ink-2); font-weight: 400; }
.update-card:hover .update-arrow { color: var(--sa-gold-ink); }
.no-updates { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; color: var(--sa-muted); }
.access-denied { background: var(--sa-bg); border: 1px solid var(--sa-line); border-radius: 4px; }
.access-denied h2 { font-family: var(--sa-serif); font-weight: 300; }
.access-denied a { color: var(--sa-ink); text-decoration: underline; text-decoration-color: var(--sa-gold); text-underline-offset: 3px; }
/* A few badges carry inline colours from the old palette */
.company-badges .badge[style] { background: transparent !important; color: var(--sa-ink-2) !important; }

/* ==========================================================================
   Memo pages
   ========================================================================== */
[data-family="memo"] body { background: var(--sa-bg); }
.sidebar { background: var(--sa-bg); border-right: 1px solid var(--sa-line); }
.sidebar-section { border-bottom: 1px solid var(--sa-line-soft); }
.sidebar-section h3 { font-family: var(--sa-serif); font-weight: 300; font-size: 1.15rem; letter-spacing: -.005em; color: var(--sa-ink); }
.param-group label { color: var(--sa-ink-2); }
.param-group .param-desc { color: var(--sa-faint); }
.param-row .param-value { color: var(--sa-ink); }
.param-group input[type="range"] { accent-color: var(--sa-ink); }
.scenario-btn { border: 1px solid var(--sa-line); border-radius: 6px; background: transparent; color: var(--sa-ink-2); font-weight: 400; }
.scenario-btn:hover:not(.active) { border-color: var(--sa-muted); color: var(--sa-ink); }
.scenario-btn.active { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.results-panel { background: var(--sa-panel); color: var(--sa-ink); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.result-item .result-label { color: var(--sa-muted); font-weight: 500; letter-spacing: .14em; }
.result-item .result-value { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); letter-spacing: -.01em; }
.result-item .result-sub { color: var(--sa-muted); }
.btn-fullscreen { border: 1px solid var(--sa-line); border-radius: 6px; background: transparent; color: var(--sa-ink-2); font-weight: 400; }
.btn-fullscreen:hover { border-color: var(--sa-muted); color: var(--sa-ink); background: transparent; }
.legend-bar { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; color: var(--sa-ink-2); }
.legend-swatch { border-radius: 2px; background: var(--sa-gold-tint); border-bottom: 1px solid var(--sa-gold); }
.toc-list a { border-radius: 4px; color: var(--sa-ink-2); }
.toc-list a:hover,
.toc-list a.active { background: var(--sa-panel); color: var(--sa-ink); }

.memo-container { background: var(--sa-bg); border-radius: 0; box-shadow: none; color: var(--sa-ink); }
.memo-container h1 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.02em; color: var(--sa-ink); }
.memo-container h2 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.012em; color: var(--sa-ink); border-bottom: 1px solid var(--sa-line); }
.memo-container h3 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.01em; color: var(--sa-ink); }
.memo-container h4 { color: var(--sa-ink); }
.memo-container p { color: var(--sa-ink); }
.memo-container em { color: var(--sa-ink-2); }
.memo-container a { color: var(--sa-ink); text-decoration-color: var(--sa-gold); }
.memo-container a:hover { color: var(--sa-gold-ink); }
.memo-container img { border-radius: 2px; box-shadow: none; }
.memo-container blockquote { border-left: 1px solid var(--sa-gold); background: transparent; border-radius: 0; color: var(--sa-ink-2); }
.memo-container table { border-radius: 0; }
.memo-container thead th { background: transparent; color: var(--sa-ink); border-bottom: 1px solid var(--sa-ink); font-weight: 500; }
.memo-container tbody td { border-bottom: 1px solid var(--sa-line-soft); }
.memo-container tbody tr:nth-child(even) { background: var(--sa-panel); }
.memo-container tbody tr:hover { background: var(--sa-line-soft); }
.memo-container table:not(:has(thead)) td:first-child { color: var(--sa-ink); }
.dynamic-value { background: var(--sa-gold-tint); border-bottom: 1px solid var(--sa-gold); border-radius: 2px; color: var(--sa-ink); }
.dynamic-value.flash { background: rgba(184, 153, 92, .35); }
.footnotes { border-top: 1px solid var(--sa-line); color: var(--sa-muted); }
sup a { color: var(--sa-gold-ink); }

/* Charts */
.chart-container { border-radius: 4px; box-shadow: none; border: 1px solid var(--sa-line-soft); }
.chart-container .chart-title { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.chart-container .chart-subtitle { color: var(--sa-muted); }
.rev-chart,
.margin-chart { border-bottom: 1px solid var(--sa-line); }
.rev-bar,
.margin-bar { border-radius: 2px 2px 0 0; }
.rev-bar-navy,
.margin-bar-navy,
.ap-fill-navy,
.tam-bar-1 { background: var(--sa-ink); }
.rev-bar-gold { background: var(--sa-gold); }
.margin-gm-val { color: var(--sa-ink); }
.margin-ebitda-val { color: var(--sa-faint); }

/* Full-screen model */
.fs-overlay { background: var(--sa-bg); }
.fs-header { background: var(--sa-bg); color: var(--sa-ink); border-bottom: 1px solid var(--sa-line); }
.fs-header h2 { font-family: var(--sa-serif); font-weight: 300; }
.fs-header h2 span { color: var(--sa-gold-ink); }
.fs-close { background: transparent; border: 1px solid var(--sa-line); color: var(--sa-ink-2); border-radius: 6px; }
.fs-close:hover { border-color: var(--sa-muted); color: var(--sa-ink); }
.fs-params { background: var(--sa-bg); border-color: var(--sa-line); }
.fs-results { background: var(--sa-bg); }
.fs-results-inner { background: var(--sa-panel); color: var(--sa-ink); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.fs-results-inner .fs-results-title { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.fs-result-item .fs-result-label { color: var(--sa-muted); }
.fs-result-item .fs-result-value { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.fs-result-item .fs-result-sub { color: var(--sa-muted); }
.sidebar-overlay { background: rgba(42, 41, 38, .25); }
.sidebar.open { box-shadow: 16px 0 40px rgba(42, 41, 38, .08); }

/* ==========================================================================
   Reporting — quarterly letters, archive, portfolio
   ========================================================================== */
.report-hero .quarter-label { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; font-size: .7rem; }
.report-hero h1 { font-family: var(--sa-serif); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--sa-ink); }
.report-hero .report-date { color: var(--sa-muted); }
.report-toc { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.report-toc h3 { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; }
.report-toc a { color: var(--sa-ink-2); }
.report-toc a:hover { color: var(--sa-ink); border-color: var(--sa-gold); }

/* Letter body reads like the site's prose: sans, warm ink, gold-underlined links */
.report-content p,
.opening-letter p,
.company-section p,
.parting-words p,
.highlight-box p { font-family: var(--sa-sans); color: var(--sa-ink-2); }
.report-content p strong,
.company-section p strong,
.highlight-box strong { color: var(--sa-ink); font-weight: 600; }
.report-content a,
.opening-letter a,
.company-section a,
.parting-words a {
  color: var(--sa-ink);
  text-decoration: underline;
  text-decoration-color: var(--sa-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--sa-ease);
}
.report-content a:hover,
.opening-letter a:hover,
.company-section a:hover,
.parting-words a:hover { color: var(--sa-gold-ink); }
.opening-letter,
.parting-words { border-color: var(--sa-line); }
.salutation,
.signoff { font-family: var(--sa-serif); font-weight: 300; font-size: 1.15rem; color: var(--sa-ink); }
.company-section h2,
.essay-section h2,
.parting-words h2 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.015em; color: var(--sa-ink); }
.company-subtitle,
.essay-subsection,
.parting-words h3 { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-muted); }
.section-divider,
.report-divider { background: var(--sa-line); }
.highlight-box { background: var(--sa-panel); border: 1px solid var(--sa-line-soft); border-radius: 4px; }
.company-image,
.section-image { border-radius: 2px; box-shadow: none; }
.company-image:hover,
.section-image:hover { box-shadow: none; }
.image-caption { color: var(--sa-muted); font-style: normal; }
[data-family="reporting"] blockquote { border-left: 1px solid var(--sa-gold); font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink-2); }
.report-intro { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink-2); }
.report-footer-nav a { color: var(--sa-ink-2); font-weight: 500; }
.report-footer-nav a:hover { color: var(--sa-gold-ink); }

/* Archive + portfolio */
[data-family="reporting"] .report-card { background: transparent; }
.report-card-quarter { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.01em; }
.report-card-date { color: var(--sa-muted); }
.report-card-desc { color: var(--sa-muted); }
.report-card-arrow { color: var(--sa-ink-2); border-bottom-color: var(--sa-gold); }
.report-card:hover .report-card-arrow { color: var(--sa-gold-ink); }
.company-meta-item { border-radius: 4px; }
.meta-next { border-color: var(--sa-line); color: var(--sa-ink-2); }
.stack-layer-header { border-bottom: 1px solid var(--sa-line); }
.stack-layer-title { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; }
[data-family="reporting"] .company-card { background: transparent; }
[data-family="reporting"] .company-card .company-name { font-family: var(--sa-serif); font-weight: 300; }
.company-tag { background: var(--sa-panel); color: var(--sa-ink-2); border-radius: 4px; }
.company-date { color: var(--sa-muted); }
.company-card-arrow { border-radius: 6px; border-color: var(--sa-line); color: var(--sa-faint); }
.company-card:hover .company-card-arrow { border-color: var(--sa-gold); color: var(--sa-gold-ink); }
.report-content .report-toc a,
.report-content .report-footer-nav a { text-decoration: none; }
.report-content p.salutation,
.report-content p.signoff,
.report-content p.company-subtitle,
.opening-letter p.salutation,
.parting-words p.signoff { font-family: var(--sa-serif); font-weight: 300; font-style: normal; font-size: 1.15rem; }
.report-content p.salutation,
.report-content p.signoff,
.opening-letter p.salutation,
.parting-words p.signoff { color: var(--sa-ink); }
.report-content p.company-subtitle { color: var(--sa-muted); }

/* Fund I timeline */
:root[data-family="reporting"] {
  --essay: #85692f;
  --milestone: #4f6b4a;
  --fund: #5f5683;
  --report: #9a9088;
}
[data-family="reporting"] .hero-logo { color: var(--sa-muted); letter-spacing: .16em; }
[data-family="reporting"] .hero h1 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.025em; color: var(--sa-ink); }
[data-family="reporting"] .hero-subtitle { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink-2); }
[data-family="reporting"] .hero-meta { color: var(--sa-muted); letter-spacing: .16em; }
[data-family="reporting"] .hero-meta span strong { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.scroll-hint { color: var(--sa-muted); letter-spacing: .16em; }
.filter-bar { background: color-mix(in srgb, var(--sa-bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sa-line-soft); }
.filter-bar.scrolled { box-shadow: none; border-bottom-color: var(--sa-line); }
.filter-label,
.filter-scroll-hint-text { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; }
.filter-btn { border-radius: 6px; font-weight: 400; border: 1px solid var(--sa-line); color: var(--sa-ink-2); }
.filter-btn:hover { border-color: var(--sa-muted); color: var(--sa-ink); }
.filter-btn.active { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.filter-fade-right { background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 70%); }
.filter-fade-left { background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 70%); }
.progress-fill { background: var(--sa-gold); }
.year-marker h2 { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.03em; color: var(--sa-ink); }
.timeline-line,
.fund-closing-line { background: var(--sa-line); }
.event-date,
.event-company-tag,
.legend-item,
.closing-stat-label,
.closing-as-of { color: var(--sa-muted); font-weight: 500; letter-spacing: .16em; }
.event-tag { border-radius: 4px; font-weight: 500; }
.event-tag.investment { background: var(--sa-ink); color: #fff; }
.event-tag.essay { background: var(--essay); color: #fff; }
.event-tag.milestone { background: var(--milestone); color: #fff; }
.event-tag.fund { background: var(--fund); color: #fff; }
.event-tag.report { background: var(--report); color: #fff; }
.event-title { font-family: var(--sa-serif); font-weight: 300; letter-spacing: -.01em; color: var(--sa-ink); }
.event-description { color: var(--sa-ink-2); }
.event-link { color: var(--sa-ink); border-bottom-color: var(--sa-gold); }
.event-link:hover { color: var(--sa-gold-ink); border-color: var(--sa-gold-ink); }
.timeline-event .event-inner { border-radius: 4px; }
.timeline-event:hover .event-inner { background: var(--sa-panel); box-shadow: none; }
.fund-closing h2,
.closing-quote,
.no-results p { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.closing-quote,
.no-results p { color: var(--sa-ink-2); }
.closing-stat-value { font-family: var(--sa-serif); font-weight: 300; color: var(--sa-ink); }
.latest-report-banner a { background: var(--sa-ink); color: #fff; border-radius: 4px; }
.latest-report-banner a:hover { box-shadow: 0 16px 40px rgba(42, 41, 38, .14); }
.banner-label { color: rgba(255, 255, 255, .55); font-weight: 500; letter-spacing: .16em; }
.banner-title { font-family: var(--sa-serif); font-weight: 300; color: #fff; }
.banner-arrow { border-radius: 6px; border-color: rgba(255, 255, 255, .25); }
.fanfare-btn { background: var(--sa-ink); color: #fff; border-radius: 6px; font-weight: 400; letter-spacing: .04em; }
.moic-number { background: var(--sa-ink); color: #fff; border-radius: 4px; }
.moic-number .moic-value { font-family: var(--sa-serif); font-weight: 300; color: #fff; }
.moic-number .moic-label { color: rgba(255, 255, 255, .55); }
.fixed-logo img { border-radius: 4px; }

/* Companies also held in the Select Fund */
.badge.badge-select {
  color: var(--sa-gold-ink);
  border: 1px solid var(--sa-gold);
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: .1rem;
}
.badge + .badge.badge-select { border-left: 1px solid var(--sa-gold); padding-left: 6px; }
.badge.badge-select + .badge { border-left: 0; }