@font-face{font-family:'Fraunces';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/fraunces-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}

:root{
  --paper:#fdfcf5; --card:#fffefa; --ink:#111; --ink2:#4a4a46; --muted:#85817a;
  --rule:#e4e0d3; --band:#f4f1e6; --gold:#a8822e; --goldbg:#f6eedb;
  --mine:#e0622a; --voo:#1d2433; --qqq:#2a78d6;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --col:700px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--goldbg)}

/* ---- frame ---- */
.site-head,.site-nav,main,.site-foot{width:100%;max-width:calc(var(--col) + 3rem);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.site-head{position:relative;z-index:2;padding-top:1.5rem;padding-bottom:.6rem;overflow:visible}
.wordmark{position:relative;display:inline-block;font:500 clamp(2.4rem,10vw,3.7rem)/1.05 var(--serif);letter-spacing:-.03em;text-decoration:none;color:var(--ink);transform-origin:0 0;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* the colour layer: one wide strip that slides on the GPU and tints only the ink. With lighten, cream stays cream as long as
   no gradient channel is brighter than the paper (253,252,245), so every stop is kept at or below those values */
/* padding gives the glyphs room (nothing is clipped); the colour strip is clipped a few pixels inside the
   cream box so its edges never meet the box edge, where they would show as a thin coloured line */
.wordmark{background:var(--paper);padding:.14em .2em;margin:-.14em -.2em;backface-visibility:hidden}
.wm-clip{position:absolute;inset:4px;overflow:hidden;pointer-events:none}
.wm-wash{position:absolute;top:0;bottom:0;left:0;width:400%;pointer-events:none;opacity:0;mix-blend-mode:lighten;will-change:transform,opacity;
  background:linear-gradient(90deg,#6f5cf5 0%,#12b8c9 20%,#f0b84a 40%,#fd7eb6 60%,#fd9d5c 80%,#6f5cf5 100%);background-size:50% 100%;background-repeat:repeat-x}
#below{will-change:transform}
.site-nav{display:flex;gap:1.5rem;padding-top:.7rem;padding-bottom:.8rem;border-bottom:1px solid var(--ink);font-size:.78rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.site-nav a{text-decoration:none;color:var(--ink2);padding:.2rem 0;border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
main{padding-top:2.6rem;padding-bottom:4rem;min-height:60vh}
.site-foot{padding-top:1.4rem;padding-bottom:3rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink2)}
.site-foot p{margin:.2rem 0}
.fine{font-size:.8rem;color:var(--muted)}

/* ---- type ---- */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.018em;line-height:1.15;margin:0}
.kicker{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.kicker a{text-decoration:none}
.page-head h1,.hero h1{font-size:clamp(2.1rem,6.2vw,3.3rem);line-height:1.08;letter-spacing:-.025em}
.lede{font-size:1.2rem;line-height:1.55;color:var(--ink2);margin:1.1rem 0 0;max-width:36rem}
.page-head{margin-bottom:2.4rem}
.sublede{font-size:1.05rem;line-height:1.6;color:var(--ink2);margin:.7rem 0 0;max-width:36rem}
.sublede a{color:var(--ink)}
.portrait{margin:1.8rem 0 0;max-width:520px}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:var(--band)}
.prose h2{font-size:1.65rem;margin:3rem 0 .8rem}
.prose h3{font-size:1.2rem;margin:2rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin:1.8rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--gold);font:400 1.3rem/1.45 var(--serif);color:var(--ink)}
.prose blockquote p{margin:0}
.callout{margin:1.8rem 0;padding:1rem 1.2rem;background:var(--goldbg);border:1px solid var(--gold);border-radius:4px;font-size:.95rem}
.callout p{margin:0}
.prose .closer{margin-top:1.8rem;font:500 1.35rem/1.4 var(--serif);letter-spacing:-.01em}

/* ---- home / lists ---- */
.hero{padding:1rem 0 3rem}
.btn{display:inline-block;margin-top:1.6rem;padding:.7rem 1.25rem;background:var(--ink);color:var(--paper);border-radius:4px;font-size:.88rem;font-weight:500;text-decoration:none}
.btn:hover{background:#2c2c2a}
.sec{font:600 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.plist{list-style:none;margin:0 0 2rem;padding:0}
.plist li{display:grid;grid-template-columns:5.2rem 1fr;gap:.2rem 1rem;padding:1.1rem 0;border-top:1px solid var(--rule)}
.plist time{font-size:.8rem;color:var(--muted);padding-top:.35rem;font-variant-numeric:tabular-nums}
.plist h3{font-size:1.3rem}
.plist h3 a{text-decoration:none}
.plist h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.plist p{margin:.3rem 0 0;font-size:.95rem;color:var(--ink2)}
.tag{display:inline-block;margin:.5rem .4rem 0 0;padding:.1rem .55rem;border:1px solid var(--rule);border-radius:99px;font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--ink2);text-decoration:none}
.tag:hover{border-color:var(--ink)}
.year{font:500 1.5rem/1 var(--serif);margin:2.2rem 0 .3rem}
.catlist{list-style:none;padding:0;margin:0}
.catlist li{display:flex;justify-content:space-between;padding:.9rem 0;border-top:1px solid var(--rule);font:500 1.25rem var(--serif)}
.catlist a{text-decoration:none}.catlist span{font:400 .85rem var(--sans);color:var(--muted)}

/* ---- native charts ---- */
.chart{margin:2.2rem 0;padding:1.25rem 1.3rem 1.1rem;background:var(--card);border:1px solid var(--rule);border-radius:4px}
.chart-head h3{font-size:1.3rem}
.chart-head p{margin:.35rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink2)}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;list-style:none;margin:.9rem 0 0;padding:0;font-size:.8rem;color:var(--ink2)}
.legend li{display:flex;align-items:center;gap:.4rem;line-height:1.35}
.legend i{width:.7rem;height:.7rem;border-radius:2px;display:inline-block}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.8rem 0}
.tile{padding:.9rem .9rem .8rem;background:var(--card);border:1px solid var(--rule);border-radius:4px}
.tile.hero{padding:.9rem .9rem .8rem;background:var(--goldbg);border-color:var(--gold)}
.tile-name{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.tile-name i{width:.6rem;height:.6rem;border-radius:2px;flex:none}
.tile strong{display:block;margin-top:.6rem;font:500 clamp(1.6rem,6vw,2.4rem)/1.05 var(--serif);letter-spacing:-.02em}
.tile-sub{display:block;font-size:.75rem;color:var(--muted);margin-top:.2rem}
.tile-rate{display:block;margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--rule);font-size:.85rem;font-weight:600}

.growth .plot{position:relative;height:clamp(230px,52vw,330px);margin:1.6rem 3.5rem 0 0;touch-action:pan-y}
.growth .grid{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--rule)}
.growth .grid.zero{border-top-color:var(--ink);opacity:.55}
.growth .grid span{position:absolute;left:0;top:-1.3em;font-size:.72rem;color:var(--muted)}
.growth svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line{fill:none;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.line.mine{stroke:var(--mine);stroke-width:3.2}.line.voo{stroke:var(--voo)}.line.qqq{stroke:var(--qqq)}
.line.best{stroke:var(--gold);stroke-width:2;stroke-dasharray:7 5}.line.dep{stroke:var(--muted);stroke-width:2;stroke-dasharray:1.5 4.5}
.growth .grid.ref{border-top:1px dashed var(--gold);opacity:.7}
.legend .lg-best i{background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 6px)!important;height:2px;width:1rem;border-radius:0}
.legend .lg-dep i{background:repeating-linear-gradient(90deg,var(--muted) 0 2px,transparent 2px 4px)!important;height:2px;width:1rem;border-radius:0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--rule)}
.fact strong{display:block;font:500 1.5rem/1.1 var(--serif);letter-spacing:-.02em}
.fact span{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.4;color:var(--ink2)}
.fact:first-child strong{color:var(--mine)}
.wealth .plot{margin-top:1.2rem}
.prose .legend{padding:0;margin:.9rem 0 0}.prose .legend li{margin:0}
.dot{position:absolute;left:100%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--card)}
.end{position:absolute;left:calc(100% + 9px);transform:translateY(-50%);font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.xaxis{position:relative;height:1.5rem;margin:.5rem 3.5rem 0 0}
.xaxis span{position:absolute;transform:translateX(-50%);font-size:.74rem;color:var(--muted)}
.xaxis span.first{transform:none}
.cross{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);opacity:.35;pointer-events:none}
.tip{position:absolute;top:6px;z-index:3;padding:.5rem .7rem;background:#fff;border:1px solid var(--ink);border-radius:3px;font-size:.78rem;line-height:1.55;white-space:nowrap;pointer-events:none}
.tip b{display:block;font-weight:600;margin-bottom:.1rem}
.tip i{display:inline-block;width:.55rem;height:.55rem;border-radius:2px;margin-right:.4rem}
.tip .v{float:right;margin-left:1rem;font-weight:600;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.bars .bgroup{margin-top:1rem}
.blabel{font-size:.8rem;font-weight:600;letter-spacing:.03em;margin-bottom:.3rem}
.blabel small{font-weight:400;color:var(--muted);letter-spacing:0}
.brow{margin:3px 0}
.btrack{position:relative;height:15px}
.bar{position:absolute;top:0;height:100%;border-radius:2px;display:block}
.bzero{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink);opacity:.45}
.bval{position:absolute;top:50%;transform:translateY(-50%);font-size:.76rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink2)}
.brow.me .bval{font-weight:700;color:var(--ink)}
.bars.named .brow{display:grid;grid-template-columns:6.6rem 1fr;align-items:center;gap:.5rem;margin:.55rem 0}
.bars.named .btrack{height:22px}
.bname{font-size:.85rem}.named .me .bname{font-weight:600}

.segs{display:flex;margin-top:1.1rem;border-radius:3px;overflow:hidden;min-height:104px}
.seg{display:flex;flex-direction:column;justify-content:space-between;padding:.9rem 1rem;min-width:0}
.seg strong{font:500 clamp(1.5rem,5vw,2rem)/1 var(--serif)}
.seg span{font-size:.82rem;font-weight:500;line-height:1.3;margin-top:1.2rem}

@media (max-width:520px){
  main{padding-top:2rem}
  .chart{padding:1rem .95rem .9rem;margin-left:-.4rem;margin-right:-.4rem}
  .tiles{gap:.45rem;margin-left:-.4rem;margin-right:-.4rem}
  .tile{padding:.75rem .6rem .65rem}
  .tile-name{font-size:.62rem;letter-spacing:.02em;gap:.3rem}
  .tile-rate{font-size:.74rem}
  .plist li{grid-template-columns:1fr}
  .plist time{padding-top:0}
  .bars.named .brow{grid-template-columns:5.3rem 1fr}
  .facts{grid-template-columns:1fr 1fr;gap:.9rem .8rem}
}
@media (prefers-reduced-motion:no-preference){a,.btn,.tag{transition:background .15s,border-color .15s}}
@media print{.site-head nav,.site-foot{display:none}}