/* GetRicherTogether: a light, newspaper style. Always light; the page does not follow OS dark mode. */
:root {
  color-scheme: light;
  --paper:#fff1e5;      /* salmon page */
  --paper-2:#f2dfce;    /* darker salmon for panels */
  --paper-3:#fff7ef;    /* light card */
  --ink:#33302e;
  --ink-strong:#1a1817;
  --soft:#66605c;
  --rule:#ccc1b7;
  --rule-strong:#1a1817;
  --link:#0f5499;
  --claret:#990f3d;
  --teal:#0d7680;
  --teal-dark:#0a5e66;
  --warn-bg:#f9e0e3;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.6 var(--serif); }
img { max-width:100% }
a { color:var(--link); text-decoration:none }
a:hover { text-decoration:underline }

/* Top strip */
.topbar { font:13px/1 var(--sans); color:var(--soft); border-bottom:1px solid var(--rule) }
.topbar .in { max-width:1180px; margin:0 auto; padding:9px 16px; display:flex; justify-content:space-between; gap:12px }
.topbar a { color:var(--ink) }

/* Masthead */
.masthead { text-align:center; padding:22px 16px 14px }
.wordmark { font:600 46px/1.05 var(--serif); color:var(--ink-strong); letter-spacing:-.01em; text-decoration:none }
.wordmark:hover { text-decoration:none }
.strap { font:14px/1.4 var(--sans); color:var(--soft); margin-top:6px }

/* Section navigation: scrolls sideways on phones, never the page */
.sections { border-top:2px solid var(--rule-strong); border-bottom:1px solid var(--rule) }
.sections ul { list-style:none; margin:0 auto; padding:0 16px; max-width:1180px; display:flex; gap:2px;
               overflow-x:auto; scrollbar-width:none; justify-content:center }
.sections ul::-webkit-scrollbar { display:none }
.sections a { display:block; padding:11px 12px; font:600 14px/1 var(--sans); color:var(--ink); white-space:nowrap;
              border-bottom:3px solid transparent }
.sections a:hover { text-decoration:none; border-bottom-color:var(--rule) }
.sections a.on { border-bottom-color:var(--claret); color:var(--ink-strong) }
@media (max-width:900px) { .sections ul { justify-content:flex-start } }

/* Article layout */
main { max-width:1180px; margin:0 auto; padding:28px 16px 64px }
.article { max-width:720px; margin:0 auto }
.kicker { font:700 13px/1 var(--sans); color:var(--claret); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px }
.kicker a { color:var(--claret) }
h1 { font:600 42px/1.12 var(--serif); color:var(--ink-strong); margin:0 0 14px; letter-spacing:-.01em }
.standfirst { font-size:21px; line-height:1.45; color:var(--soft); margin:0 0 22px }
h2 { font:600 28px/1.2 var(--serif); color:var(--ink-strong); margin:44px 0 12px; padding-top:14px; border-top:1px solid var(--rule) }
h3 { font:600 21px/1.3 var(--serif); color:var(--ink-strong); margin:30px 0 8px }
p, li { margin:0 0 14px }
ul, ol { padding-left:24px }
strong { color:var(--ink-strong) }
hr { border:0; border-top:1px solid var(--rule); margin:32px 0 }
blockquote { margin:20px 0; padding:4px 0 4px 18px; border-left:3px solid var(--claret); font-style:italic }

table { width:100%; border-collapse:collapse; font:15px/1.45 var(--sans); margin:18px 0 22px; display:block; overflow-x:auto }
thead th, tr:first-child th { border-bottom:2px solid var(--rule-strong) }
th { text-align:left; vertical-align:bottom; font-weight:700; color:var(--ink-strong); padding:8px 10px 6px 0 }
td { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--rule) }

.review { background:var(--warn-bg); color:var(--claret); font:700 11px/1 var(--sans); padding:3px 6px;
          border-radius:2px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; vertical-align:2px }

/* Front page */
.lead { display:grid; grid-template-columns:2fr 1fr; gap:32px; padding-bottom:28px; border-bottom:1px solid var(--rule) }
.lead h1 { font-size:46px }
.lead .art { background:var(--paper-2); padding:22px; font:15px/1.5 var(--sans) }
.lead .art ol { margin:0; padding-left:20px }
.lead .art li { margin:0 0 8px }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:6px }
.story { padding:18px 18px 18px 0; border-bottom:1px solid var(--rule) }
.story + .story { padding-left:18px; border-left:1px solid var(--rule) }
.story:nth-child(4n+1) { padding-left:0; border-left:0 }
.story h3 { font-size:20px; margin:0 0 6px }
.story h3 a { color:var(--ink-strong) }
.story p { font-size:15.5px; line-height:1.5; color:var(--soft); margin:0 }
.band { margin-top:34px; border-top:2px solid var(--rule-strong); padding-top:12px }
.band > h2 { margin:0 0 4px; padding:0; border:0; font:700 15px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-strong) }
.panel { background:var(--paper-2); padding:22px 24px; margin-top:16px }
.panel h3 { margin-top:0 }
@media (max-width:900px) {
  .lead { grid-template-columns:1fr }
  .grid { grid-template-columns:repeat(2,1fr) }
  .story:nth-child(4n+1) { padding-left:18px; border-left:1px solid var(--rule) }
  .story:nth-child(2n+1) { padding-left:0; border-left:0 }
}
@media (max-width:560px) {
  body { font-size:17px }
  h1, .lead h1 { font-size:32px }
  .wordmark { font-size:34px }
  .standfirst { font-size:19px }
  .grid { grid-template-columns:1fr }
  .story, .story + .story { padding-left:0; border-left:0 }
}

/* Buttons and forms */
.btn { display:inline-block; background:var(--teal); color:#fff; font:700 15px/1 var(--sans); padding:12px 18px;
       border:0; border-radius:2px; cursor:pointer }
.btn:hover { background:var(--teal-dark); text-decoration:none }
.btn.ghost { background:transparent; color:var(--teal); box-shadow:inset 0 0 0 2px var(--teal) }
.btn[aria-disabled="true"] { opacity:.55; cursor:default }
.soon { font:13px/1.4 var(--sans); color:var(--soft) }

/* Calculators */
.calc { background:var(--paper-3); border-top:3px solid var(--teal); padding:22px 24px; margin:22px 0 30px }
.calc h2 { border:0; padding:0; margin:0 0 6px; font-size:24px }
.calc .lede { font-size:16px; color:var(--soft); margin:0 0 16px }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 18px }
.fields label { display:block; font:600 13.5px/1.3 var(--sans); color:var(--ink-strong) }
.fields input, .fields select { display:block; width:100%; margin-top:5px; padding:9px 10px; font:16px/1.2 var(--sans);
       color:var(--ink-strong); background:#fff; border:1px solid var(--rule); border-radius:2px }
.fields input:focus, .fields select:focus { outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal) }
.result { margin-top:18px; padding-top:14px; border-top:1px solid var(--rule); font:15.5px/1.5 var(--sans) }
.big { font:600 34px/1.1 var(--serif); color:var(--ink-strong); display:block; margin:2px 0 4px }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:8px 0 }
.stat { border-left:3px solid var(--rule); padding-left:10px }
.stat .v { font:600 24px/1.15 var(--serif); color:var(--ink-strong); display:block }
.stat .l { font:13px/1.35 var(--sans); color:var(--soft) }
.stat.good { border-left-color:var(--teal) }
.stat.bad { border-left-color:var(--claret) }
.next { background:var(--paper-2); padding:12px 14px; margin-top:12px }
.chart { width:100%; height:auto; margin-top:10px; display:block }
.toc { font:15px/1.6 var(--sans); background:var(--paper-2); padding:14px 18px; margin:0 0 24px }
.toc a { margin-right:14px; white-space:nowrap }
.stat.warn { border-left-color:#c9a27e }
.coach-drop { display:flex; align-items:center; justify-content:center; text-align:center; min-height:120px; padding:18px;
       border:2px dashed var(--rule); background:#fff; cursor:pointer; font:16px/1.5 var(--sans); color:var(--ink-strong) }
.coach-drop.over, .coach-drop:hover { border-color:var(--teal) }
.coach-drop input { position:absolute; width:1px; height:1px; opacity:0 }
.coach-small { font:13.5px/1.45 var(--sans); color:var(--soft) }
.linklike { background:none; border:0; padding:0; font:inherit; color:var(--link); text-decoration:underline; cursor:pointer }
.coach .fields { margin-top:14px }
.coach-source { font:13.5px/1.4 var(--sans); color:var(--soft); margin:0 0 10px }
.coach-next { background:var(--paper-2); border-left:4px solid var(--teal); padding:12px 16px; margin:16px 0 }
.coach-next strong { display:block; font:600 21px/1.25 var(--serif); color:var(--ink-strong); margin:4px 0 }
.coach-next p { margin:0 }
.coach-notes { list-style:none; padding:0; margin:12px 0 }
.coach-notes li { border-left:3px solid var(--rule); padding:4px 0 4px 12px; margin:8px 0 }
.coach-notes li.good { border-left-color:var(--teal) }
.coach-notes li.warn { border-left-color:#c9a27e }
.coach-notes li.bad, .coach-note.bad { border-left-color:var(--claret) }
.coach h3 { font:600 19px/1.3 var(--serif); margin:24px 0 6px; color:var(--ink-strong) }
.coach-table { width:100%; border-collapse:collapse; font:14.5px/1.4 var(--sans); margin:6px 0 }
.coach-table th, .coach-table td { text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--rule); vertical-align:middle }
.coach-table td:nth-child(n+2):not(.barcell), .coach-table th:nth-child(n+2) { white-space:nowrap }
.coach-table select { font:13.5px var(--sans); padding:3px; max-width:100%; background:#fff; border:1px solid var(--rule) }
.coach .bar { display:block; position:relative; height:10px; background:var(--paper-2); min-width:60px }
.coach .bar i { display:block; height:100%; background:var(--claret) }
.coach .bar i.need { background:var(--teal) }
.coach .bar i.debt { background:#0f5499 }
.coach .bar i.saving { background:#c9a27e }
.coach .bar b { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-strong) }
.coach-split > div { margin:8px 0 }
.coach-split .l { display:block; font:600 14px/1.4 var(--sans); margin-bottom:3px }
.coach-split em { font-style:normal; font-weight:400; color:var(--soft) }
@media (max-width:600px) { .coach-lines td:nth-child(3) select { width:120px } .coach-table .barcell { display:none } }
.wizard { font:16px/1.5 var(--sans); color:var(--ink-strong) }
.wz-progress { height:4px; background:var(--paper-2); margin:0 0 12px }
.wz-progress i { display:block; height:100%; background:var(--teal); transition:width .3s }
.wz-count { font:600 12.5px/1 var(--sans); color:var(--soft); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px }
.wizard h2.wz-title { font:600 26px/1.2 var(--serif); margin:0 0 6px; border:0; padding:0 }
.wz-lede { color:var(--soft); margin:0 0 14px }
.wz-q { font-weight:600; margin:18px 0 8px }
.wz-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px }
.wz-choice { display:block; cursor:pointer }
.wz-choice input { position:absolute; opacity:0; width:1px; height:1px }
.wz-choice span { display:block; height:100%; background:#fff; border:1px solid var(--rule); border-radius:2px; padding:12px 14px }
.wz-choice strong { display:block; font-weight:600 }
.wz-choice em { display:block; font-style:normal; font-size:14px; color:var(--soft); margin-top:2px }
.wz-choice input:checked + span { border-color:var(--teal); box-shadow:inset 0 0 0 2px var(--teal); background:#f3fbfb }
.wz-choice input:focus-visible + span { outline:2px solid var(--teal); outline-offset:2px }
.wz-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 18px }
.wz-field { display:block; font:600 13.5px/1.3 var(--sans) }
.wz-field input { display:block; width:100%; box-sizing:border-box; margin-top:5px; padding:10px; font:16px var(--sans); background:#fff; border:1px solid var(--rule); border-radius:2px }
.wz-check { display:block; margin-top:12px; font-size:15px }
.wz-error { color:var(--claret); font-size:14px; min-height:1em; margin:10px 0 0 }
.wz-nav { margin:14px 0 6px }
.wz-nav .btn { margin-right:8px }
.wz-plan { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; margin-top:14px }
.wz-plan h3 { font:600 18px/1.3 var(--serif); margin:16px 0 8px }
.wz-plan h3:first-child { margin-top:0 }
.wz-steps { margin:0; padding-left:22px }
.wz-steps li { margin:4px 0; color:var(--soft) }
.wz-steps li span { font-size:14px }
.wz-steps li.done strong { color:var(--teal) }
.wz-steps li.done strong::after { content:" (done)"; font-weight:400; font-size:13px }
.wz-steps li.now { color:var(--ink-strong); background:var(--paper-2); margin-left:-8px; padding:4px 8px; border-left:3px solid var(--claret) }
.wz-level { font:600 22px/1.2 var(--serif); margin:0 0 4px }
.wz-level span { display:block; font:700 12.5px/1 var(--sans); color:var(--claret); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px }
.wz-links { margin:0; padding-left:18px }
.wz-links li { margin:4px 0 }
@media (max-width:700px) { .wz-plan { grid-template-columns:1fr } }

/* Superinvestor cards */
.card { background:var(--paper-3); border-top:3px solid var(--rule-strong); padding:20px 22px; margin-bottom:22px }
.card.stale { border-top-color:var(--claret) }
.who { font:600 24px/1.2 var(--serif); margin:0 0 2px; border:0; padding:0 }
.firm { color:var(--soft); font:14px/1.4 var(--sans); margin:0 0 12px }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.chip { font:12px/1 var(--sans); border:1px solid var(--rule); border-radius:2px; padding:5px 8px; color:var(--soft) }
.chip.age { color:var(--teal); border-color:var(--teal) }
.chip.stale { color:var(--claret); border-color:var(--claret); font-weight:700 }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.banner { background:var(--paper-2); border-left:3px solid var(--claret); padding:14px 18px; margin:22px 0 30px; font:15.5px/1.6 var(--sans) }
.banner b { color:var(--claret) }
details { margin-top:14px; border-top:1px solid var(--rule); padding-top:12px }
summary { cursor:pointer; color:var(--link); font:15px/1.4 var(--sans); list-style:none }
summary::-webkit-details-marker { display:none }
summary::before { content:"Read the script \203A" }
details[open] summary::before { content:"Hide the script \2039" }
.script h4 { font:700 12px/1 var(--sans); text-transform:uppercase; letter-spacing:.07em; color:var(--soft); margin:22px 0 8px }
.script .say { margin:0 0 12px; padding-left:14px; border-left:2px solid var(--rule) }
.script .note { color:var(--soft); font-size:15px; font-style:italic }

/* Footer */
.sitefoot { border-top:2px solid var(--rule-strong); background:var(--paper-2); margin-top:40px }
.sitefoot .in { max-width:1180px; margin:0 auto; padding:28px 16px 36px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
                font:14px/1.7 var(--sans) }
.sitefoot h4 { font:700 13px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; color:var(--ink-strong) }
.sitefoot a { color:var(--ink); display:block }
.sitefoot .legal { grid-column:1/-1; color:var(--soft); border-top:1px solid var(--rule); padding-top:14px; font-size:13px }
@media (max-width:700px) { .sitefoot .in { grid-template-columns:repeat(2,1fr) } }

/* Figures: our own SVG art, full column width, captioned like a newspaper graphic */
.figure { margin:26px 0 30px; padding:0 }
.figure img { display:block; width:100%; height:auto; border-top:4px solid var(--ink-strong) }
.figure figcaption { font:13px/1.45 var(--sans); color:var(--soft); margin-top:8px }
.figure.cover { max-width:320px }
.figure.cover img { border-top:0 }
.story img { display:block; width:100%; height:auto; margin-bottom:10px }
.grid.two { grid-template-columns:repeat(2,1fr) }
.split { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; padding-top:12px }
.split img { display:block; width:100%; height:auto }
@media (max-width:640px) { .grid.two { grid-template-columns:1fr } .split { grid-template-columns:1fr } .split img { max-width:220px } }

/* Article list */
.grid.articles { grid-template-columns:repeat(3,1fr) }
.grid.articles .story:nth-child(4n+1) { padding-left:18px; border-left:1px solid var(--rule) }
.grid.articles .story:nth-child(3n+1) { padding-left:0; border-left:0 }
.grid.articles img { width:100%; height:auto; display:block; margin-bottom:10px; border:1px solid var(--rule) }
@media (max-width:760px) { .grid.articles { grid-template-columns:1fr } .grid.articles .story { padding-left:0; border-left:0 } }

/* Lead photo: the same under every headline */
.lead-photo { margin:22px 0 30px; padding:0 }
.lead-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.lead-photo figcaption { font:12px/1.4 var(--sans); color:var(--soft); margin-top:6px; text-align:right }
.lead-photo figcaption a { color:var(--soft) }