/* ─────────────────────────────────────────────────────────────────────────
   Rising Tide Management — "Chart Room" brand system
   Single source of truth for design tokens, shared component primitives,
   and the global nav/footer chrome (markup injected by components.js).
   Linked from every page. Page-specific layout lives in each page's
   <style> block but MUST reference the --m- tokens below — never hardcode
   colors or reintroduce a retired palette.

   The visual language: admiralty charts and tide tables. Two paper stocks
   (deep-sea ink and chart paper), a Clarendon display face (Besley), mono
   figures, near-sharp corners, structure from rules instead of cards,
   verdigris as the single accent, buoy red strictly semantic (losses).
   Token NAMES are kept from the previous system so existing pages restyle
   without markup changes; VALUES are Chart Room.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700&family=Sometype+Mono:wght@400;500&display=swap");

:root {
  /* ===== COLOR ===== */
  --m-ink:           #14262C;  /* text on paper */
  --m-ink-soft:      #43585D;
  --m-muted:         rgba(20, 38, 44, 0.55);
  --m-paper:         #EFF1EE;  /* chart paper — cool, not cream */
  --m-paper-2:       #E5E9E4;  /* alternate paper band */
  --m-card:          #F7F8F5;  /* raised surface (legacy cards) */
  --m-stone:         #D9DFD9;
  --m-hairline:      rgba(20, 38, 44, 0.10);
  --m-rule:          rgba(20, 38, 44, 0.18);

  /* Deep-sea stock (heroes, conviction bands, contact, footer) */
  --m-sea:           #0F2B33;
  --m-sea-deep:      #0A1F26;
  --m-paper-on-sea:  #E9EFEA;
  --m-muted-on-sea:  rgba(233, 239, 234, 0.72);
  --m-rule-sea:      rgba(143, 205, 191, 0.28);

  --m-signal:        #2C7A6F;  /* verdigris — the accent on paper */
  --m-signal-soft:   #DFEBE6;
  --m-contour:       #8FCDBF;  /* linework + accent on sea */
  --m-gain:          #2C7A6F;
  --m-gain-soft:     #A8D5C8;
  --m-loss:          #C34A36;  /* buoy red — semantic only, never decorative */
  --m-loss-soft:     #E08A76;
  --m-warning:       #C8A752;

  /* ===== TYPOGRAPHY ===== */
  --m-font-display:  "Besley", "Georgia", "Times New Roman", serif;
  --m-font-body:     "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --m-font-mono:     "Sometype Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --m-size-display-xl:  76px;
  --m-size-display-lg:  58px;
  --m-size-display-md:  42px;
  --m-size-display-sm:  28px;
  --m-track-display:    0;
  --m-leading-display:  1.1;

  --m-size-body-lg:     18px;
  --m-size-body-md:     15px;
  --m-size-body-sm:     13px;
  --m-size-caption:     11px;
  --m-size-micro:       10px;
  --m-leading-body:     1.6;
  --m-track-caption:    0.14em;

  --m-weight-regular:   400;
  --m-weight-medium:    500;
  --m-weight-semibold:  600;
  --m-weight-bold:      700;

  /* ===== SPACING ===== */
  --m-space-1:    4px;
  --m-space-2:    8px;
  --m-space-3:    12px;
  --m-space-4:    16px;
  --m-space-5:    20px;
  --m-space-6:    24px;
  --m-space-7:    28px;
  --m-space-8:    32px;
  --m-space-10:   40px;
  --m-space-12:   48px;
  --m-space-16:   64px;
  --m-space-24:   96px;

  /* ===== RADIUS (near-sharp everywhere) ===== */
  --m-radius-sm:   2px;
  --m-radius-md:   4px;
  --m-radius-lg:   2px;
  --m-radius-pill: 2px;

  /* ===== ELEVATION (rules, not shadows) ===== */
  --m-shadow-card:    0 0 0 1px var(--m-hairline);
  --m-shadow-pop:     0 12px 32px rgba(15, 43, 51, 0.12), 0 0 0 1px var(--m-rule);

  /* ===== MOTION ===== */
  --m-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --m-dur-fast:      120ms;
  --m-dur-base:      180ms;
  --m-dur-slow:      280ms;
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--m-paper);
  color: var(--m-ink);
  font-family: var(--m-font-body);
  font-size: var(--m-size-body-md);
  line-height: var(--m-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Mobile Safari and Chrome Android "boost" the font size of text blocks they
     judge to be long relative to the viewport, so two paragraphs with identical
     CSS render at different sizes on a phone (seen on the RTFRM FAQ, where the
     long "What does it cost?" answer rendered far larger than its neighbour).
     Pin the adjustment so declared sizes are the sizes that ship. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-medium);
  letter-spacing: var(--m-track-display);
  line-height: var(--m-leading-display);
  margin: 0;
}
/* Headline emphasis = italic in the accent, same family. Never a 2nd face. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; color: var(--m-signal); }

a { color: var(--m-signal); text-decoration: none; }

/* Numbers are first-class: mono everywhere */
.m-num, .m-mono { font-family: var(--m-font-mono); font-feature-settings: "tnum" 1; }

/* Uppercase tracked label — captions only, never headings/body.
   Ration hard: max ~1 per 3 sections. */
.m-caption {
  font-family: var(--m-font-mono);
  font-size: var(--m-size-micro);
  letter-spacing: var(--m-track-caption);
  text-transform: uppercase;
  color: var(--m-muted);
}
/* Datum label — the Chart Room section annotation (verdigris variant) */
.datum-label {
  font-family: var(--m-font-mono);
  font-size: var(--m-size-caption);
  letter-spacing: var(--m-track-caption);
  text-transform: uppercase;
  color: var(--m-signal);
}

/* Heavy ink rule that opens a section or group */
.rule-heavy { border: 0; border-top: 2px solid var(--m-ink); margin: 0 0 14px; }

/* Duotone photo treatment — grayscale + sea screen + contour multiply.
   Wrap an <img> in .duo; the overlays recolor any photo into the palette. */
.duo { position: relative; overflow: hidden; }
.duo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
}
.duo::before {
  content: ""; position: absolute; inset: 0;
  background: var(--m-sea); mix-blend-mode: screen; pointer-events: none;
}
.duo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--m-contour); mix-blend-mode: multiply; pointer-events: none;
}

/* ===== SHARED PRIMITIVES ===== */

/* Card — legacy atomic surface (Chart Room prefers rules; kept for
   pages not yet recomposed) */
.m-card {
  background: var(--m-card);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-card);
  padding: var(--m-space-7);
}

/* Metric tile — recessed surface */
.m-metric {
  background: var(--m-paper);
  border-radius: var(--m-radius-md);
  padding: 14px 16px;
}
.m-metric-label {
  font-family: var(--m-font-mono);
  font-size: var(--m-size-micro);
  letter-spacing: var(--m-track-caption);
  text-transform: uppercase;
  color: var(--m-muted);
}
.m-metric-value {
  font-family: var(--m-font-mono);
  font-weight: var(--m-weight-medium);
  font-size: 26px;
  letter-spacing: -0.02em;
  margin-top: 6px;
  color: var(--m-ink);
}
.m-metric-value.is-gain { color: var(--m-gain); }
.m-metric-value.is-loss { color: var(--m-loss); }

/* Status pill — rectangular tag in Chart Room (no decorative dot) */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-2);
  padding: 6px 12px;
  border-radius: var(--m-radius-sm);
  background: var(--m-signal-soft);
  font-family: var(--m-font-mono);
  font-size: var(--m-size-caption);
  color: var(--m-signal);
}

/* Buttons — rectangular, near-sharp */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-2);
  padding: 12px 22px;
  border-radius: var(--m-radius-sm);
  font-family: var(--m-font-body);
  font-weight: var(--m-weight-semibold);
  font-size: 14px;
  border: none;
  cursor: pointer;
  background: var(--m-ink);
  color: var(--m-paper);
  transition: opacity var(--m-dur-fast) var(--m-ease-out),
              transform var(--m-dur-fast) var(--m-ease-out);
}
.m-btn:hover { opacity: 0.9; }
.m-btn:active { transform: translateY(1px); }
.m-btn-secondary {
  background: transparent;
  color: var(--m-ink);
  border: 1px solid var(--m-rule);
}
.m-btn-secondary:hover { opacity: 1; background: rgba(20, 38, 44, 0.04); }
.m-btn-tertiary {
  background: transparent;
  color: var(--m-signal);
  padding: 0;
  border-radius: 0;
  border: none;
}
.m-btn-tertiary:hover { text-decoration: underline; text-underline-position: from-font; }

/* Allocation bar row */
.m-alloc-row {
  display: grid;
  grid-template-columns: 1fr 60px 38px;
  gap: var(--m-space-3);
  align-items: center;
  padding: 7px 0;
}
.m-alloc-row > span:first-child {
  font-weight: var(--m-weight-medium);
  font-size: var(--m-size-body-sm);
}
.m-alloc-track {
  height: 6px;
  background: var(--m-paper);
  border-radius: var(--m-radius-sm);
  overflow: hidden;
}
.m-alloc-fill { height: 100%; border-radius: var(--m-radius-sm); }
.m-alloc-pct {
  font-family: var(--m-font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--m-ink);
}

/* Table / list — no chrome */
.m-list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--m-hairline);
  transition: background var(--m-dur-fast) var(--m-ease-out);
}
.m-list-row:hover { background: rgba(20, 38, 44, 0.025); }

/* Inputs (Contact/forms pattern) */
.m-input, .m-select, .m-textarea {
  width: 100%;
  background: var(--m-card);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-sm);
  padding: 12px 14px;
  font-family: var(--m-font-body);
  font-size: var(--m-size-body-md);
  color: var(--m-ink);
  transition: border-color var(--m-dur-fast) var(--m-ease-out),
              box-shadow var(--m-dur-fast) var(--m-ease-out);
}
.m-input:focus, .m-select:focus, .m-textarea:focus {
  outline: none;
  border-color: var(--m-signal);
  box-shadow: 0 0 0 3px var(--m-signal-soft);
}
.m-field-label {
  display: block;
  font-family: var(--m-font-mono);
  font-size: var(--m-size-caption);
  letter-spacing: var(--m-track-caption);
  text-transform: uppercase;
  color: var(--m-muted);
  margin-bottom: var(--m-space-2);
}

/* FAQ (shared across product pages) */
.m-faq-list {
  margin-top: var(--m-space-8);
  border-top: 2px solid var(--m-ink);
}
.m-faq-item {
  border-bottom: 1px solid var(--m-hairline);
  padding: var(--m-space-6) 0;
}
.m-faq-q {
  font-family: var(--m-font-display);
  font-size: var(--m-size-body-lg);
  font-weight: var(--m-weight-semibold);
  line-height: 1.3;
  color: var(--m-ink);
  margin: 0 0 var(--m-space-3);
}
.m-faq-a {
  font-size: var(--m-size-body-md);
  color: var(--m-ink-soft);
  line-height: var(--m-leading-body);
  margin: 0;
}
.m-faq-a a, .m-faq-a a:visited {
  color: var(--m-signal);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ===== BRAND MARK ===== */
/* Sea square + paper Besley "R" + buoy-red datum dot. Markup in components.js. */
.m-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--m-sea);
  color: var(--m-paper-on-sea);
  border-radius: var(--m-radius-md);
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-bold);
  letter-spacing: 0;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  font-size: 28px;
}
.m-mark::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--m-loss);
  align-self: flex-end;
  margin-left: 2px;
  margin-bottom: 14px;
}
.m-mark--nav  { width: 34px; height: 34px; font-size: 17px; border-radius: var(--m-radius-md); }
.m-mark--nav::after  { width: 4px; height: 4px; margin-bottom: 8px; }
.m-mark--footer { width: 56px; height: 56px; font-size: 28px; background: var(--m-sea); box-shadow: 0 0 0 1px var(--m-rule-sea); }
.m-mark--footer::after { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL NAV — sticky 64px chart-paper bar + bottom rule
   ═══════════════════════════════════════════════════════════════════════ */
#nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--m-paper);
  border-bottom: 1px solid var(--m-rule);
}
#nav .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--m-space-16);
}
@media (max-width: 980px) { #nav .container { padding: 0 var(--m-space-12); } }
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--m-space-8);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-3);
  text-decoration: none;
  color: var(--m-ink);
}
.nav-logo-main {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-bold);
  font-size: 19px;
  letter-spacing: 0;
  color: var(--m-ink);
}
/* Chart Room drops the mono sub-wordmark; markup retained for rollback */
.nav-logo-sub { display: none; }
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--m-space-7);
}
.nav-links > li > a {
  font-family: var(--m-font-body);
  font-weight: var(--m-weight-medium);
  font-size: var(--m-size-body-md);
  color: var(--m-ink-soft);
  text-decoration: none;
  transition: color var(--m-dur-fast) var(--m-ease-out);
}
.nav-links > li > a:hover { color: var(--m-ink); }
.nav-cta {
  color: var(--m-signal) !important;
  font-weight: var(--m-weight-semibold) !important;
}
.nav-cta:hover { text-decoration: underline; text-underline-position: from-font; }

.nav-dropdown { position: relative; }
.nav-dropdown::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 14px; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dropdown-trigger::after {
  content: ""; display: block; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.45; flex-shrink: 0;
  transition: transform var(--m-dur-fast) var(--m-ease-out);
}
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after { transform: rotate(-135deg); opacity: 0.8; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 660px; max-width: calc(100vw - 48px);
  background: var(--m-paper);
  border: 1px solid var(--m-rule);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow-pop);
  padding: var(--m-space-6);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity var(--m-dur-slow) var(--m-ease-out), transform var(--m-dur-slow) var(--m-ease-out);
  display: flex; flex-direction: column; gap: var(--m-space-4);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dd-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--m-space-5); }
.nav-dd-group-label {
  font-family: var(--m-font-mono); font-size: 9px;
  letter-spacing: var(--m-track-caption); text-transform: uppercase;
  color: var(--m-muted);
  padding-bottom: var(--m-space-2); margin-bottom: 10px;
  border-bottom: 1px solid var(--m-hairline);
}
.nav-dd-items { display: flex; gap: var(--m-space-1); }
.nav-dd-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--m-space-2) 10px; text-decoration: none;
  border-radius: var(--m-radius-sm); flex: 1;
  transition: background var(--m-dur-fast) var(--m-ease-out);
}
.nav-dd-item:hover { background: var(--m-paper-2); }
.nav-dd-item-abbr {
  font-family: var(--m-font-mono); font-size: 12px;
  font-weight: var(--m-weight-medium); letter-spacing: 0.04em;
  color: var(--m-signal);
}
.nav-dd-item-name {
  font-size: var(--m-size-caption); color: var(--m-muted);
  line-height: 1.4; margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL FOOTER — full-width deep-sea inversion
   ═══════════════════════════════════════════════════════════════════════ */
footer {
  background: var(--m-sea-deep);
  color: var(--m-paper-on-sea);
  margin-top: var(--m-space-24);
}
footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--m-space-24) var(--m-space-16) var(--m-space-12);
}
@media (max-width: 980px) { footer .container { padding: var(--m-space-16) var(--m-space-12) var(--m-space-10); } }
.footer-inner {
  display: grid;
  /* minmax(0, …) instead of a bare fr: a bare fr floors each column at its
     min-content width, so long product names ("Exceptional Founder Downside
     Protection Fund") pushed the grid wider than the viewport and gave every
     page ~30px of horizontal scroll on phones. */
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--m-space-12);
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-space-10); } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: minmax(0, 1fr); gap: var(--m-space-10); } }
/* Long fund names must wrap rather than dictate the column width */
.footer-links-col { min-width: 0; }
.footer-links-col a { overflow-wrap: break-word; }
.footer-logo {
  font-family: var(--m-font-display);
  font-weight: var(--m-weight-bold);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--m-paper-on-sea);
}
.footer-logo-sub { display: none; }
.footer-tagline {
  font-size: var(--m-size-body-md);
  color: var(--m-muted-on-sea);
  margin: var(--m-space-4) 0 0;
  max-width: 320px;
}
.footer-links-col h4 {
  font-family: var(--m-font-mono);
  font-size: var(--m-size-micro);
  letter-spacing: var(--m-track-caption);
  text-transform: uppercase;
  color: var(--m-contour);
  font-weight: var(--m-weight-regular);
  margin: 0 0 var(--m-space-4);
}
.footer-links-col ul { list-style: none; margin: 0; padding: 0; }
.footer-links-col li { margin-bottom: var(--m-space-3); }
.footer-links-col a {
  font-size: var(--m-size-body-md);
  color: var(--m-muted-on-sea);
  text-decoration: none;
  transition: color var(--m-dur-fast) var(--m-ease-out);
}
.footer-links-col a:hover { color: var(--m-paper-on-sea); }
.footer-bottom {
  margin-top: var(--m-space-16);
  padding-top: var(--m-space-8);
  border-top: 1px solid var(--m-rule-sea);
}
.footer-legal {
  font-family: var(--m-font-body);
  font-size: var(--m-size-caption);
  line-height: 1.6;
  color: rgba(233, 239, 234, 0.55);
  margin: 0 0 var(--m-space-4);
}
.footer-legal a {
  color: rgba(233, 239, 234, 0.75);
  text-decoration: underline;
  text-decoration-color: rgba(233, 239, 234, 0.3);
}
.footer-legal a:hover { color: var(--m-paper-on-sea); }
.footer-copy {
  font-family: var(--m-font-mono);
  font-size: var(--m-size-caption);
  letter-spacing: 0.04em;
  color: rgba(233, 239, 234, 0.4);
  margin: 0;
}