/* 3funds.fyi — clean modern light
   No framework, no build step. One stylesheet for the whole site. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --bg:         #ffffff;
  --surface:    #f7f8f9;
  --surface-2:  #eef1f4;
  --ink:        #101418;
  --muted:      #5a6472;
  --line:       #e4e7eb;
  --line-soft:  #eef0f3;
  --accent:     #256abf;   /* 5.39:1 on white — links, buttons, focus */
  --accent-ink: #1f5fb0;

  /* categorical series — validated all-pairs, light mode, on #ffffff:
     worst CVD dE 9.2, worst normal-vision dE 24.0.
     --s3 sits at 2.82:1 vs surface, so every segment is directly
     labelled and every chart ships beside a table (relief rule). */
  --s1: #2a78d6;   /* US stocks */
  --s2: #eb6834;   /* International stocks */
  --s3: #1baf7a;   /* Bonds */

  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Instrument Sans", var(--sans);
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r:    12px;
  --r-sm: 8px;
  --wrap: 1120px;
  /* One reading measure for the whole site. Deliberately rem, not ch: a ch
     is relative to the element's own font-size, so prose (17px) and callouts
     (15px) resolved to different widths and their right edges did not line up. */
  --prose: 46rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}
img, svg { max-width: 100%; }

/* Grid and flex children default to min-width:auto, so a wide table or a
   fixed-size SVG inside one pushes its track past the viewport. Opt every
   layout child out of that, and let the donuts scale down with their box. */
.hero__grid > *, .alloc > *, .grid > *, .cards > *,
.reasons > *, .reason > *, .foot__grid > *, .stack > * { min-width: 0; }
.table-scroll { min-width: 0; max-width: 100%; }
[data-donut] svg, #ex-chart svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - 32px, var(--wrap)); } }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); }
.section--tint + .section { border-top: 1px solid var(--line); }
.stack > * + * { margin-top: var(--gap, 20px); }
.prose { max-width: var(--prose); }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -0.035em; }
.h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em; }
.h3 { font-size: clamp(19px, 2vw, 22px); }
.lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--muted); line-height: 1.6; }
.small { font-size: 14px; color: var(--muted); line-height: 1.6; }
.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.ticker {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  letter-spacing: .01em;
  background: var(--surface-2); color: var(--ink);
  padding: 2px 7px; border-radius: 5px;
  white-space: nowrap;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: flex; align-items: center; gap: 28px;
  height: 64px;
}
/* Logo: purely typographic. The "3" is set in Fraunces 900 italic against the
   Instrument Sans wordmark — the contrast between a warm, high-contrast serif
   numeral and the clean geometric sans is the whole identity, and the numeral
   alone doubles as the mark. Every pictorial mark tried before this one either
   read as a chart fragment or lost its meaning at 16px. */
.brand {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  /* Open, not tight. The body display type runs at -0.03em, but the lockup is a
     short string of mixed faces and reads better with air between the letters.
     Tuned against a rendered ladder: 0 is still snug, 0.04em+ goes precious. */
  letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0; line-height: 1;
}
.brand__three {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 900; font-style: italic;
  /* larger than the sans so the numeral's cap reaches the ascenders */
  font-size: 1.2em; line-height: 1;
  color: var(--accent);
  /* the italic leans forward into the "f", so it needs more than the tracking gives */
  margin-right: 4px;
  font-variant-numeric: normal;
}
/* the tld sits a hair looser still, so ".fyi" doesn't crowd the "s" */
.brand__tld { margin-left: 0.5px; }
.brand__tld { color: var(--muted); font-weight: 500; }
.brand:hover .brand__tld { color: var(--ink); }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 7px 11px; border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
@media (max-width: 860px) {
  .site-head__in { height: auto; padding-block: 12px; flex-wrap: wrap; gap: 10px; }
  .nav { margin-left: 0; width: 100%; gap: 2px; }
  .nav a { padding: 6px 9px; font-size: 13.5px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--r-sm);
  text-decoration: none; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--bg); }
.btn--ghost:hover { border-color: var(--muted); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 88px); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- stats strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--bg);
}
.stat { padding: 24px 26px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--display); font-size: clamp(26px, 3vw, 34px);
  font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  display: block; line-height: 1.1;
}
.stat__l { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- generic grids & cards ---------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Cells are columns so the last row (the tickers) can be pinned to the bottom.
   Without it a cell whose body wraps to one fewer line floats its tickers up and
   they stop lining up across the row. */
.grid > .cell { background: var(--bg); padding: 28px; display: flex; flex-direction: column; }
.grid > .cell > :last-child { margin-top: auto; padding-top: 6px; }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card__k { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-family: var(--display); }
.card__more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14.5px; color: var(--accent); font-family: var(--display); }

/* reason list — rules, not shadow boxes */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
/* Each item carries its own top rule, so the list needs a closing rule or it
   reads as unterminated. It goes on the last row's items, not the container —
   a container border would run through the gutter that every other rule breaks at. */
.reasons > :nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 780px) {
  .reasons { grid-template-columns: 1fr; gap: 0; }
  /* Single column: only the true last item closes the list, or the second-to-last
     would double up against the last one's top rule. */
  .reasons > :nth-last-child(-n+2) { border-bottom: 0; }
  .reasons > :last-child { border-bottom: 1px solid var(--line); }
}
.reason { padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 30px 1fr; gap: 16px; }
.reason__i { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.reason h3 { font-size: 17.5px; margin-bottom: 6px; }
.reason p { font-size: 15px; color: var(--muted); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; padding: 16px 20px 0; font-size: 13.5px; color: var(--muted); caption-side: top; }
th, td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface); }
/* nowrap: a range like "50–60%" was breaking after the en dash onto two lines. */
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.t-note { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: var(--prose); }

/* Fund tables stack two or three deep on the institution pages. Auto layout
   sized each one independently off its own content, so the same four columns
   landed in different places from one table to the next — on the ETF page the
   third column moved by 99px. Fixed layout pins them to a shared grid. */
.t-funds { table-layout: fixed; min-width: 680px; }
.t-funds th:nth-child(1), .t-funds td:nth-child(1) { width: 20%; }
.t-funds th:nth-child(2), .t-funds td:nth-child(2) { width: 35%; }
.t-funds th:nth-child(3), .t-funds td:nth-child(3) { width: 31%; }
.t-funds th:nth-child(4), .t-funds td:nth-child(4) { width: 14%; }

/* swatch dot for series identity next to a label */
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }

/* ---------- allocation explorer ---------- */
.alloc {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 56px);
  align-items: start;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(24px, 4vw, 40px); background: var(--bg);
}
@media (max-width: 900px) { .alloc { grid-template-columns: 1fr; } }
.alloc__chart { display: grid; justify-items: center; gap: 20px; }
/* Balanced rather than a hard 34ch cap, which was orphaning the last word. */
.chart-cap { text-align: center; max-width: 40ch; text-wrap: balance; }
.field { display: block; }
.field + .field { margin-top: 26px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.field__lab { font-family: var(--display); font-weight: 600; font-size: 15px; }
.field__val { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 500; }
.field__help { font-size: 13px; color: var(--muted); margin-top: 8px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: var(--surface-2); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--surface-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
  margin-top: -7.5px; transition: transform .12s;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent);
  background: var(--bg); transition: transform .12s;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }

.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.preset {
  font-family: var(--display); font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: all .15s;
}
.preset:hover { border-color: var(--muted); color: var(--ink); }
.preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.alloc__out { width: 100%; }
.alloc__out table { font-size: 15px; }
.alloc__out td:first-child { display: flex; align-items: center; gap: 10px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 40px 22px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent); }
.faq__a { padding: 0 48px 24px 0; color: var(--muted); font-size: 15.5px; max-width: var(--prose); }
.faq__a p + p { margin-top: 12px; }

/* ---------- callouts ---------- */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: 18px 22px;
  background: var(--surface); font-size: 15px; color: var(--muted);
  /* Callouts are prose and hold the same measure as prose. Without this they
     ran the full 1120px — about 110 characters a line — and their right edge
     disagreed with every paragraph above them. */
  max-width: var(--prose);
}
.note strong { color: var(--ink); font-weight: 600; }
.note--warn { border-left-color: var(--s2); }
/* The exception: a note that captions a full-width table matches the table. */
.note--wide { max-width: none; }
.note + .note { margin-top: 14px; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); padding-block: 56px 40px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__grid h4 { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.foot__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot__grid a { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.foot__grid a:hover { color: var(--accent); text-decoration: underline; }
.foot__bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.disclaimer { font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 78ch; }

/* ---------- page header (interior pages) ---------- */
.pagehead { padding-block: clamp(48px, 6vw, 76px) clamp(32px, 4vw, 48px); }
.crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

/* fund spec list on institution pages */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec > div { background: var(--bg); padding: 18px 20px; }
.spec dt { font-size: 11.5px; letter-spacing: .085em; text-transform: uppercase; color: var(--muted); font-weight: 600; font-family: var(--display); margin-bottom: 6px; }
.spec dd { margin: 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--bg); }

.next-prev { display: flex; flex-wrap: wrap; gap: 12px; }