/* compare: one editorial column. A sentence holds the picker, a line of narration sits over a
   wide chart, an era timeline scrubs under it, a ledger of results follows, then the bonus round. */
:root {
  color-scheme: light;
  --paper: #fbfbfa;
  --ink: #101215;
  --muted: #686e78;
  --off: #a9adb4;
  --rule: #e4e5e1;
  --spy: #2448ff;
  --buffett: #da950b;
  --sixty_forty: #c34517;
  --three_fund: #3fbf86;
  --all_weather: #9e246b;
  --permanent: #b06ace;
  --up: #2448ff;
  --down: #c34517;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { background: var(--paper); }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--spy); }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.col { max-width: 1240px; margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 28px; padding-block: 24px 0; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.wm { margin-right: auto; font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); text-decoration: none; }

.hero { padding-block: 72px 28px; }
.lede { margin: 0; max-width: 22ch; font-weight: 300; font-size: clamp(38px, 5.4vw, 80px); line-height: 1.08; letter-spacing: -.025em; text-wrap: pretty; }
.lede .nw { white-space: nowrap; }
.lede .spyword { text-decoration: underline; text-decoration-color: var(--spy); text-decoration-thickness: .06em; text-underline-offset: .14em; }
.w {
  --c: var(--ink);
  appearance: none; border: 0; margin: 0; padding: 0 .06em;
  font: inherit; letter-spacing: inherit; color: var(--off);
  background: none; cursor: pointer; border-radius: .1em;
  text-decoration: underline dotted; text-decoration-color: #c5c8cd; text-decoration-thickness: .045em; text-underline-offset: .16em;
  background-image: linear-gradient(color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 16%, transparent));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 38%;
  transition: color .35s, background-size .45s cubic-bezier(.2, .7, .2, 1), text-decoration-color .35s;
}
.w[aria-pressed="true"] { color: var(--ink); text-decoration-style: solid; text-decoration-color: var(--c); background-size: 100% 38%; }
.w:hover { color: var(--ink); }
.w:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.hint { margin: 20px 0 0; font-family: var(--sans); font-size: 14px; color: var(--muted); }

.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding-block: 8px 0; }
.play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s;
}
.play:hover { transform: translateY(-1px); background: #262a31; }
.play:focus-visible { outline: 2px solid var(--spy); outline-offset: 3px; }
.play svg { display: block; }
.play:disabled { opacity: .4; cursor: default; transform: none; }
.dur { font-family: var(--sans); font-size: 13px; color: var(--muted); }

.story { padding-block: 44px 0; }
.narr { position: relative; min-height: 2.7em; max-width: 46ch; font-style: italic; font-weight: 300; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.28; letter-spacing: -.01em; }
.narr span { position: absolute; left: 0; top: 0; right: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.narr span.out { opacity: 0; transform: translateY(-10px); }
.narr span.in { opacity: 0; transform: translateY(10px); }
.drops { display: flex; flex-wrap: wrap; gap: 6px 22px; min-height: 24px; margin: 10px 0 0; padding: 0 96px 0 0; list-style: none; font-family: var(--sans); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.drops li { display: flex; align-items: center; gap: 8px; }
.drops i { width: 8px; height: 8px; border-radius: 50%; }
.drops b { font-weight: 600; color: var(--ink); }

.chart { position: relative; height: clamp(380px, 44vw, 580px); margin-top: 18px; touch-action: pan-y; }
.chart canvas, .bchart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.date { position: absolute; right: 0; top: -30px; font-family: var(--sans); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tags, .btags { position: absolute; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(251, 251, 250, .92); font-family: var(--sans); font-size: 12px; line-height: 1.2; white-space: nowrap; will-change: transform; transition: opacity .35s; }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.tag b { font-weight: 500; }
.tag span { color: var(--muted); font-variant-numeric: tabular-nums; }
.tag.spy { border-color: color-mix(in srgb, var(--spy) 35%, var(--rule)); }
.tag.spy span { color: var(--ink); }

.time { margin-top: 30px; }
.scrub { display: block; width: 100%; height: 28px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--ink) var(--pct, 0%), var(--rule) var(--pct, 0%)); }
.scrub::-moz-range-track { height: 2px; background: var(--rule); }
.scrub::-moz-range-progress { height: 2px; background: var(--ink); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.scrub::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.scrub:focus-visible { outline: 2px solid var(--spy); outline-offset: 4px; }
.eras { display: grid; grid-template-columns: 84fr 216fr 120fr 144fr 57fr; gap: 6px; }
.era { appearance: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; min-height: 52px; padding: 10px 0 0; border: 0; border-top: 2px solid var(--rule); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.era::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: var(--fill, 0%); background: var(--ink); }
.era b { font-family: var(--sans); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.era em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--muted); }
.era:hover em { color: var(--ink); }
.era:focus-visible { outline: 2px solid var(--spy); outline-offset: 3px; }

.ledger { padding-block: 96px 24px; }
h2 { margin: 0 0 6px; font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.sub { margin: 0 0 30px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.rows { border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 12px 36px; align-items: baseline; padding-block: 26px; border-bottom: 1px solid var(--rule); animation: rowIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.row .nm { display: flex; align-items: baseline; gap: 12px; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.row .nm i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); transform: translateY(-3px); }
.row .by { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.row .val { font-weight: 300; font-size: clamp(34px, 3.6vw, 50px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.row .gap { display: block; margin-top: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--muted); }
.row p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: #33373e; }

.bonus { padding-block: 112px 24px; }
.kick { margin: 0 0 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); }
.bonus-lede { margin: 14px 0 0; max-width: 34ch; font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.015em; }
.bonus-read { margin-top: 30px; max-width: 52ch; font-size: clamp(19px, 1.8vw, 24px); min-height: 2.7em; color: #33373e; }
.bonus-read span { position: static; }
.bchart { position: relative; height: clamp(260px, 30vw, 380px); margin-top: 12px; touch-action: pan-y; }
.btag { position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: rgba(251, 251, 250, .92); font-family: var(--sans); font-size: 12px; line-height: 1.25; white-space: nowrap; color: var(--ink); }
.btag b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bfoot { margin-top: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 2px; }
.sw.up { background: var(--up); }
.sw.down { background: var(--down); }
.fine { margin: 22px 0 0; max-width: 72ch; font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.foot { padding-block: 64px 64px; display: grid; gap: 10px; }
.foot p { margin: 0; max-width: 86ch; font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--muted); }

.error { margin: 0; font-family: var(--sans); font-size: 15px; color: var(--ink); }

@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 699px) {
  .hero { padding-block: 44px 20px; }
  .lede { font-size: clamp(28px, 8.4vw, 38px); }
  .narr { min-height: 4.1em; }
  .chart { height: 400px; }
  .era em { display: none; }
  .era b { font-size: 11px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tag { font-size: 11px; padding: 3px 8px 3px 7px; }
  .bonus { padding-block: 80px 16px; }
  .bonus-read { min-height: 4em; }
  .bchart { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .narr span, .w, .row, .tag { transition: none; animation: none; }
}