@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2212,U+00B0,U+00B7,U+2192,U+2191}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+1E00-1EFF,U+20AC}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2026,U+2212}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+1E00-1EFF}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2212,U+00B0,U+2192,U+2191}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B}

/* a ledger on a desk: paper by day, the same ledger under a lamp at night */
:root{--bg:#f1ebdd;--bg2:#e8e0cd;--glass:#fbf8f1;--fg:#1b1f29;--mut:#474a52;--line:#cfc5ae;--line-soft:#ddd4c0;--rule:#a9bad0;
  --ink:#2c3b5c;--kid:#b4511a;--kid-t:#8f3c0d;--alarm:#b0281c;--alarm-t:#8e1d13;--acc:#7c4a06;--link:#7a3d00;--old:#55606f;
  --brass-l:#e8cf93;--brass:#b48a3c;--brass-d:#6e5021;--wood:#5a3a22;--wood-d:#2f1d10;
  --serif:"Newsreader",Georgia,serif;--mono:"PlexMono",ui-monospace,Menlo,monospace;--top:48px;color-scheme:light;--to-top-bg:#f1ebdd;--to-top-fg:#1b1f29}
:root[data-theme=dark]{--bg:#101217;--bg2:#171a21;--glass:#1d2029;--fg:#ece6d8;--mut:#b2b6bf;--line:#2f3440;--line-soft:#21252e;--rule:#2f3b52;
  --ink:#9fb3d6;--kid:#ff9a55;--kid-t:#ffb07a;--alarm:#ff6b57;--alarm-t:#ff8f7e;--acc:#e8bd6a;--link:#f1c77c;--old:#9aa3b2;
  --brass-l:#f0d79c;--brass:#b98f42;--brass-d:#5f441b;--wood:#4b301c;--wood-d:#221509;color-scheme:dark;--to-top-bg:#101217;--to-top-fg:#ece6d8}
*{box-sizing:border-box}[hidden]{display:none!important}svg[hidden]{display:none}
html{scroll-padding-top:calc(var(--top) + 14px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.125rem/1.62 var(--serif)}
:root[data-theme=dark] body{background:radial-gradient(70% 40% at 50% 0%,#1b1e26,var(--bg) 70%) fixed,var(--bg)}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;z-index:99;background:var(--bg);padding:.5rem .8rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.topbar{position:sticky;top:0;z-index:50;height:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) .9rem 0;display:flex;align-items:center;gap:.7rem;background:var(--bg);border-bottom:1px solid var(--line-soft);font:500 .9rem/1 var(--serif)}
.topbar a{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;gap:.5rem;font-style:italic;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-mark{width:20px;height:20px;color:var(--acc);flex:none}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;margin-left:.6rem;color:var(--mut)}.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;font-size:.88rem}.topnav a:hover{color:var(--acc)}
.spacer{flex:1}
.chip{font:500 .78rem/1 var(--mono);padding:.42rem .55rem;border:1px solid var(--line);border-radius:99px;min-height:30px;display:inline-flex;align-items:center}
.chip[aria-current=page]{border-color:var(--acc);color:var(--acc)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:99px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:none}
:root[data-theme=light] .i-moon,:root:not([data-theme=light]) .i-sun{display:none}
@media (max-width:860px){.topnav{display:none}}

/* hero */
.hero{max-width:1200px;margin:0 auto;padding:2.2rem 1rem 2.4rem}
.kicker{font:500 .78rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin:0 0 .6rem}
h1{font:400 clamp(2.3rem,5.4vw,4.1rem)/1.02 var(--serif);font-style:italic;margin:0 0 .9rem;letter-spacing:-.01em;max-width:17ch}
.deck{font-size:1.24rem;line-height:1.48;max-width:41rem;margin:0 0 1.6rem}
.desk{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.4rem;align-items:start}
@media (max-width:900px){.desk{grid-template-columns:1fr}}
.sheet{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:4px;padding:.8rem .6rem .7rem 1.1rem;box-shadow:0 1px 0 var(--line-soft),0 18px 40px -24px rgba(0,0,0,.35)}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:.55rem;width:1px;background:var(--alarm);opacity:.45}
.sheet-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:500 .74rem/1.3 var(--mono);color:var(--mut);margin:0 0 .3rem}
.sheet-head .in{color:var(--fg)}
#ageline{display:block;width:100%;touch-action:pan-y;cursor:ew-resize}
.ctl{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.5rem 0 0}
.ctl label{font:500 .74rem/1.2 var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
#age{flex:1;min-width:180px;accent-color:var(--kid);height:34px}
.btn{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.4rem .85rem;border:1px solid var(--line);border-radius:99px;background:var(--bg);font:500 .82rem/1 var(--mono);cursor:pointer;color:var(--fg);text-decoration:none}
.btn:hover{border-color:var(--acc)}
.btn[data-on]{border-color:var(--kid);color:var(--kid-t)}
.jumps{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 0}
.jumps .btn{min-height:36px;font-size:.78rem}
.read{border-top:3px double var(--line);padding-top:.8rem}
.read .tag{font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:inline-block;padding:.3rem .45rem;border:1px solid currentColor;border-radius:3px;transform:rotate(-2deg);margin:0 0 .5rem}
.read .tag[data-k=kid]{color:var(--kid-t)}.read .tag[data-k=nb]{color:var(--alarm-t)}.read .tag:empty{display:none}
.read .big{font:400 2.6rem/1 var(--serif);font-style:italic;margin:0 0 .5rem}
.read p{margin:.2rem 0 .8rem;font-size:1.05rem;line-height:1.5}
.read b{font-weight:600}
.clear{font:500 .82rem/1 var(--mono);background:none;border:0;color:var(--link);text-decoration:underline;cursor:pointer;padding:.3rem 0;min-height:36px}
.note{font-size:.95rem;color:var(--mut);max-width:44rem}

/* share row */
.share{margin:.9rem 0 .4rem}
.share-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.share-label{font:500 .76rem/1 var(--mono);color:var(--mut);margin-right:.3rem}
.ic{width:40px;height:40px;border-radius:99px;border:1px solid var(--line-soft);background:transparent;color:var(--fg);display:inline-grid;place-items:center;cursor:pointer}
.ic:hover,.ic:focus-visible{border-color:var(--acc);color:var(--acc)}
@media (pointer:coarse){.ic{width:44px;height:44px}}
.share-msg{font:500 .78rem/1.3 var(--mono);color:var(--mut);min-height:1em;margin:.3rem 0 0}

/* story */
.story{max-width:1200px;margin:0 auto;padding:0 1rem}
.chapter{display:grid;grid-template-columns:minmax(0,36rem) minmax(0,1fr);gap:3rem;padding:3.2rem 0;border-top:1px solid var(--line-soft);align-items:start}
.chapter.wide{grid-template-columns:1fr}
@media (max-width:980px){.chapter{grid-template-columns:1fr;gap:1.2rem}}
.chapter h2{font:400 clamp(1.7rem,3vw,2.3rem)/1.12 var(--serif);margin:0 0 1rem;max-width:24ch}
.prose p{margin:0 0 1rem}
.prose{max-width:40rem}
.anchor{opacity:0;margin-left:.4rem;font-size:.7em;text-decoration:none;color:var(--mut)}h2:hover .anchor,.anchor:focus{opacity:1}
.fig{margin:0}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig figcaption{font-size:.92rem;line-height:1.45;color:var(--mut);margin-top:.6rem}
.fig .ax text,.fig text{font:500 13px var(--mono);fill:var(--mut)}
.fig .lab{font:600 13px var(--mono);fill:var(--fg)}
.side{display:grid;gap:2rem}
.fig .kidl{fill:var(--kid-t)}.fig .nbl{fill:var(--alarm-t)}.fig .oldl{fill:var(--old)}.fig .lab.oldl{fill:var(--old)}.fig .lab.kidl{fill:var(--kid-t)}.fig .lab.nbl{fill:var(--alarm-t)}
.k-kid{stroke:var(--kid);fill:none}.k-nb{stroke:var(--alarm);fill:none}.k-old{stroke:var(--old);fill:none}
.d-kid{fill:var(--kid)}.d-nb{fill:var(--alarm)}.d-old{fill:var(--old)}.d-ink{fill:var(--ink)}
.grid line{stroke:var(--line-soft)}
.shade{fill:var(--kid);opacity:.08}
.ev{stroke:var(--fg);stroke-dasharray:3 3;opacity:.7}

/* the form with a birthday in the wrong box */
.form{background:var(--glass);border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem;font:500 .9rem/1.3 var(--mono);max-width:26rem;margin:0 0 1.4rem;position:relative}
.form .row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.form .row:last-child{border-bottom:0}
.form .v{background:var(--bg);border:1px solid var(--line);padding:.3rem .5rem;border-radius:3px;min-width:8.5rem;text-align:center}
.form .row.bad .v{border-color:var(--alarm);color:var(--alarm-t)}
.form .stamp{position:absolute;right:.6rem;bottom:-.9rem;transform:rotate(-6deg);border:2px solid var(--alarm);color:var(--alarm-t);font:700 .78rem/1 var(--mono);letter-spacing:.1em;padding:.35rem .5rem;background:var(--glass);text-transform:uppercase}

/* tables */
.tw{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:.98rem}
table.t th{font:500 .72rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:left;padding:.5rem .5rem;border-bottom:1px solid var(--line)}
table.t td{padding:.5rem .5rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.t td.n{font-family:var(--mono);text-align:right;white-space:nowrap}
.bar{display:block;height:6px;background:var(--kid);border-radius:3px;margin-top:.3rem}
.bar.base{background:var(--ink);opacity:.6;height:4px}
.more{margin-top:.8rem}

.after{max-width:1200px;margin:0 auto;padding:1rem 1rem 3rem;border-top:1px solid var(--line-soft)}
.after .prose{max-width:44rem}
.after h2{font:400 1.7rem/1.2 var(--serif);margin:2.2rem 0 .8rem}
.sources{padding-left:1.1rem;font-size:.96rem}.sources li{margin:.35rem 0}
.site-footer{display:flex;gap:1.2rem;flex-wrap:wrap;font:500 .8rem/1.4 var(--mono);color:var(--mut);margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.site-footer a{color:var(--mut)}

/* reading rail: dots in the right gutter, labels out of the layout */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px}
.rail-dot{position:relative;display:grid;place-items:center;width:24px;height:24px;color:var(--mut)}
.rail-dot .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.rail-dot[aria-current=true] .dot{background:var(--kid);opacity:1;transform:scale(1.4)}
.rail-label{position:absolute;right:28px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .74rem/1 var(--mono);background:var(--bg);border:1px solid var(--line);padding:.3rem .45rem;border-radius:4px;opacity:0;pointer-events:none}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1300px){.rail{display:none}}
@media print{.rail,.topbar,.share{display:none}}
body.sharepage{padding:1.5rem}