/* The interactive pages: same voice as the index, given a wider room. */
.page.wide{max-width:1180px;padding-top:7vh}
.back{font-family:var(--mono);font-size:11px;color:var(--faint);text-decoration:none;display:inline-block;margin-bottom:14px;transition:color .2s}
.back:hover{color:var(--ink)}
#status{margin:22px 0 34px;font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}
#status.warn{color:#8a7f6a}
.lbl{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.04em;text-transform:lowercase;margin:0 0 6px}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}
.empty-state{color:var(--faint);font-size:13.5px;padding:60px 0;text-align:center}
.fade{animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pill{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--faint);padding:2px 0;transition:color .2s}
.pill:hover{color:var(--dim)}
.pill[aria-pressed="true"]{color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.tip{position:fixed;z-index:5;pointer-events:none;max-width:280px;padding:9px 11px;background:rgba(8,10,14,.92);border:1px solid var(--rule);border-radius:3px;font-size:12.5px;line-height:1.45;color:var(--ink);opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip .lbl{margin:2px 0 0}
input.search{all:unset;box-sizing:border-box;font-family:var(--mono);font-size:11.5px;color:var(--ink);border-bottom:1px solid var(--rule);padding:4px 0;width:200px}
input.search::placeholder{color:var(--faint)}
input.search:focus{border-color:var(--faint)}
:focus-visible{outline:1px solid var(--faint);outline-offset:3px}

/* Then */
.then{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:44px;min-height:440px}
.then .big{font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0}
.then .age{font-family:var(--mono);font-size:11px;color:var(--dim);margin:10px 0 26px}
.then .where{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.then .where svg{flex:none}
.then .where .w1{color:var(--ink);font-size:14px}
.then .where .w2{color:var(--dim);font-size:12.5px}
.then section{margin-bottom:22px}
.then ul{list-style:none;margin:0;padding:0;color:var(--dim);font-size:13.5px}
.then ul li{padding:1px 0}
.then ul li:first-child{color:var(--ink)}
.then .doing{color:var(--ink);font-size:14px;margin:0}
.photo{position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.02);margin-bottom:22px}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.photo img.on{opacity:.92}
.photo .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.quote{font-size:15px;line-height:1.5;color:var(--ink);margin:0}
.quote::before{content:'\201C'}.quote::after{content:'\201D'}
.quote-src{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:8px}
.counts{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.counts b{font-weight:400;color:var(--dim);margin-right:5px}
.scrub{margin-top:30px;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center}
.scrub canvas{width:100%;height:106px;display:block;cursor:ew-resize;touch-action:none}
.scrub canvas:focus{outline:none}
.scrub canvas:focus-visible{outline:1px solid var(--rule)}
.play{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--dim);text-align:left}
.play:hover{color:var(--ink)}
.hint{font-family:var(--mono);font-size:10px;color:var(--faint);margin:10px 0 0 66px}

/* People */
.graph-wrap{position:relative;height:max(380px,calc(100vh - 380px));margin:0 -24px}
.graph-wrap canvas{width:100%;height:100%;display:block}
.window{margin-top:18px;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center}
.window canvas{width:100%;height:58px;display:block;cursor:ew-resize;touch-action:none}
.legend{margin-top:22px}
.legend .pill i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px}
.legend .pill[aria-pressed="false"] i{opacity:.25}
.wlabel{font-family:var(--mono);font-size:11px;color:var(--dim);margin:0 0 0 66px}

/* Interests */
.controls{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.cat{margin-bottom:46px}
.cat h2{font-weight:500;font-size:14px;margin:0 0 4px;display:flex;justify-content:space-between;align-items:baseline}
.cat h2 span{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:400}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 64px;gap:20px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13.5px}
.rows .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows .nm small{color:var(--faint);font-size:12px;margin-left:8px}
.rows .span{position:relative;height:9px}
.rows .span::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(255,255,255,.05)}
.rows .span i{position:absolute;top:3px;height:3px;border-radius:2px;background:rgba(160,220,235,.45)}
.rows .span em{position:absolute;top:-1px;font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--faint);white-space:nowrap;opacity:0;transition:opacity .2s}
.rows li:hover .span em{opacity:1}
.rows .ct{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:right}
.rows li:hover .nm{color:#fff}
.axis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 64px;gap:20px;font-family:var(--mono);font-size:9.5px;color:var(--faint);padding:10px 0 6px}
.axis .yrs{position:relative;height:12px}
.axis .yrs span{position:absolute;top:0}
.axis .yrs span::before{content:'';position:absolute;left:0;top:13px;width:1px;height:3px;background:rgba(255,255,255,.12)}
.more{all:unset;cursor:pointer;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:10px;display:inline-block}
.more:hover{color:var(--ink)}

/* Clock */
.clock{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.heat{position:relative}
.heat canvas{width:100%;display:block}
.side .radial{width:300px;height:300px;display:block}
.side p{color:var(--dim);font-size:13px;margin:16px 0 0}
.side .stat{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:22px;line-height:1.9}
.side .stat b{font-weight:400;color:var(--ink)}

@media (max-width:900px){
  .then{grid-template-columns:1fr;gap:10px}
  .clock{grid-template-columns:1fr}
  .rows li,.axis{grid-template-columns:minmax(0,1fr) 90px 50px}
}

/* ---- Final-revision pages ---- */
[hidden]{display:none!important}
.page.mid{max-width:860px;padding-top:7vh}
.serif{font-family:'EB Garamond',Georgia,serif}
.bar{position:sticky;top:0;z-index:3;margin:0 -24px 30px;padding:12px 24px 12px;background:linear-gradient(rgba(5,7,10,.94),rgba(5,7,10,.82));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.bar .pills+.pills{margin-top:8px}
.pill .mark{margin-right:2px}
.pill small{color:var(--faint);margin-left:4px;font-size:10px}
.pill[aria-pressed="true"] small{color:var(--dim)}
.summary{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:0 0 26px}
.summary b{font-weight:400;color:var(--dim)}

/* Constellation */
.sky{position:relative;height:max(420px,calc(100vh - 360px));margin:0 -24px}
.sky canvas{width:100%;height:100%;display:block;touch-action:none}
.yearbar{margin-top:14px;display:grid;grid-template-columns:52px 1fr 40px;gap:14px;align-items:center}
.yearbar canvas{width:100%;height:40px;display:block;cursor:ew-resize;touch-action:none}
.yearbar canvas:focus{outline:none}
.tip .who{color:var(--ink)}
.tip .rel{color:var(--dim);font-size:11.5px;margin-top:6px}

/* Questions */
.ends{margin:0 0 46px}
.end{padding:0 0 0 0;margin:0}
.end .q{font-size:22px;font-weight:300;line-height:1.35;letter-spacing:-.01em;margin:6px 0 8px;color:var(--ink)}
.end .m{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.stream{list-style:none;margin:0;padding:0}
.stream li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:7px 0;font-size:14px;color:var(--dim);line-height:1.5}
.stream li:hover{color:var(--ink)}
.stream .m{font-family:var(--mono);font-size:10px;color:var(--faint);padding-top:3px;line-height:1.5}
.stream .m span{display:block}
.stream li.yr{display:block;padding:34px 0 8px;font-family:var(--mono);font-size:11px;color:var(--dim);border-bottom:1px solid var(--rule);margin-bottom:8px;scroll-margin-top:110px}
.stream li.yr small{color:var(--faint);margin-left:10px}
.stream .q{overflow-wrap:anywhere}
.last-wrap{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule)}

/* Promises */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ledger li{display:grid;grid-template-columns:96px minmax(0,1fr) 112px;gap:20px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ledger .m{font-family:var(--mono);font-size:10px;color:var(--faint);padding-top:3px;line-height:1.6}
.ledger .m span{display:block}
.ledger .tx{font-size:15px;color:var(--ink);line-height:1.45;margin:0}
.ledger .tx::before{content:'\201C'}.ledger .tx::after{content:'\201D'}
.ledger .nt{color:var(--dim);font-size:13px;margin:7px 0 0;line-height:1.5}
.ledger .oc{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:right;padding-top:3px;white-space:nowrap}
.ledger .oc svg{vertical-align:-1px;margin-right:8px}
.mark{display:inline-block;vertical-align:-1px}

/* Letters */
.letters{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;scrollbar-width:thin}
.toc button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;color:var(--dim);line-height:1.4}
.toc button .m{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-bottom:1px}
.toc button:hover{color:var(--ink)}
.toc button[aria-current="true"]{color:var(--ink)}
.toc button[aria-current="true"] .m{color:var(--dim)}
.letter{max-width:620px}
.letter h2{font-family:'EB Garamond',Georgia,serif;font-weight:400;font-size:30px;line-height:1.2;margin:0 0 10px;letter-spacing:-.005em}
.letter .hd{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:0 0 6px}
.letter .hd b{font-weight:400;color:var(--dim)}
.letter .ctx{color:var(--dim);font-size:13px;margin:0 0 30px;line-height:1.55}
.letter .text{font-family:'EB Garamond',Georgia,serif;font-size:19px;line-height:1.62;color:#dddcd6;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding-top:26px;border-top:1px solid var(--rule)}
.letter .nav{display:flex;justify-content:space-between;margin-top:44px;font-family:var(--mono);font-size:10.5px}
.letter .nav>span{max-width:46%}.letter .nav>span:last-child{text-align:right}
.letter .nav button{all:unset;cursor:pointer;color:var(--faint);line-height:1.5}
.letter .nav button:hover{color:var(--ink)}

/* Builds */
.builds-axis,.build{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:center}
.builds-axis{font-family:var(--mono);font-size:9.5px;color:var(--faint);padding:0 0 8px;border-bottom:1px solid var(--rule)}
.builds-axis .yrs{position:relative;height:12px}
.builds-axis .yrs span{position:absolute;top:0;transform:translateX(-1px)}
.blist{list-style:none;margin:0;padding:0;position:relative}
.build{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.03);cursor:default}
.build .nm{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build .nm small{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-left:7px}
.build:hover .nm{color:#fff}
.build svg{display:block;width:100%;height:30px;overflow:visible}
.build.dim{opacity:.25}

/* Map */
.mapwrap{position:relative;margin:0 -24px}
.mapwrap canvas{width:100%;height:min(66vh,620px);min-height:300px;display:block;touch-action:none}
.journey{margin-top:10px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:baseline}
.readout{min-height:44px}
.readout .d{font-family:var(--mono);font-size:11px;color:var(--ink)}
.readout .d span{color:var(--faint);margin-left:10px}
.readout .w{color:var(--dim);font-size:13px;margin-top:3px}
.steps{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0 66px}
.steps button{all:unset;cursor:pointer;width:14px;height:14px;display:flex;align-items:center;justify-content:center}
.steps button i{width:4px;height:4px;border-radius:50%;background:var(--faint);transition:background .2s}
.steps button.past i{background:rgba(160,220,235,.4)}
.steps button[aria-current="true"] i{background:#dff3f7;width:6px;height:6px}

/* Soundtrack */
.eras-strip{position:relative;height:30px;margin:0 0 44px}
.eras-strip button{all:unset;cursor:pointer;position:absolute;top:8px;height:6px;border-radius:1px;background:rgba(160,220,235,.18);transition:background .2s}
.eras-strip button:hover,.eras-strip button.on{background:rgba(190,232,242,.55)}
.eras-strip span{position:absolute;top:20px;font-family:var(--mono);font-size:9.5px;color:var(--faint);transform:translateX(-50%)}
.era{margin-bottom:46px;scroll-margin-top:30px}
.era h2{font-weight:500;font-size:14px;margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.era h2 span{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:400;white-space:nowrap}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tracks li{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:4px 18px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tracks a{text-decoration:none;font-size:14px;color:var(--ink)}
.tracks a .ar{color:var(--dim)}
.tracks a:hover,.tracks a:hover .ar{color:#fff}
.tracks a::after{content:' \2197';color:var(--faint);font-size:11px}
.tracks .pl{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:right;padding-top:3px}
.tracks .why{grid-column:1/-1;color:var(--faint);font-size:12.5px;line-height:1.5}

/* Years */
.ynav{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.ynav .arrows{font-family:var(--mono);font-size:11px;display:flex;gap:16px}
.ynav .arrows button{all:unset;cursor:pointer;color:var(--faint)}
.ynav .arrows button:hover{color:var(--ink)}
.ynav .arrows button:disabled{opacity:.3;cursor:default}
.yearcard{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:44px;min-height:460px;touch-action:pan-y}
.yearcard .big{font-size:64px;font-weight:300;letter-spacing:-.03em;line-height:1;margin:0}
.yearcard .age{font-family:var(--mono);font-size:11px;color:var(--dim);margin:12px 0 22px}
.yearcard .head{font-size:19px;line-height:1.35;font-weight:400;margin:0 0 24px;color:var(--ink)}
.yearcard section{margin-bottom:22px}
.yearcard ul{list-style:none;margin:0;padding:0;color:var(--dim);font-size:13.5px}
.yearcard ul li{padding:1px 0}
.yearcard ul li:first-child{color:var(--ink)}
.yearcard .moment{color:var(--dim);font-size:13.5px;margin:0;line-height:1.55}
.yearcard .counts{flex-direction:column;gap:5px}
.yearcard .counts>span{display:grid;grid-template-columns:68px 1fr 56px;gap:10px;align-items:center}
.yearcard .counts i{display:block;height:1px;background:rgba(160,220,235,.4)}
.yearcard .counts b{text-align:right;margin:0}
.ydots{display:flex;gap:6px 14px;flex-wrap:wrap}

@media (max-width:900px){
  .letters{grid-template-columns:1fr;gap:30px}
  .toc{position:static;max-height:260px}
  .yearcard{grid-template-columns:1fr;gap:6px}
  .builds-axis,.build{grid-template-columns:120px minmax(0,1fr);gap:12px}
}
@media (max-width:600px){
  .stream li{grid-template-columns:1fr;gap:0}
  .stream .m span{display:inline;margin-right:10px}
  .ledger li{grid-template-columns:1fr;gap:6px}
  .ledger .oc{text-align:left;order:-1}
  .ledger .m span{display:inline;margin-right:10px}
  .end .q{font-size:19px}
  .yearcard .big{font-size:48px}
  .letter h2{font-size:25px}
  .letter .text{font-size:17.5px}
  .build{grid-template-columns:1fr;gap:0}
  .builds-axis{grid-template-columns:0 minmax(0,1fr);gap:0}
  .steps{margin-left:0}
  .journey{grid-template-columns:44px minmax(0,1fr)}
  .bar{position:static}
  .mapwrap canvas{height:400px;min-height:0}
  .sky{height:520px}
}
.edition,#status{display:none!important}