@font-face{font-family:"Source Serif";src:url(/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:light dark;--bg:#faf7f0;--fg:#1d1b17;--muted:#625d52;--accent:#1f5f5b;--accent-fg:#fff;--alert:#b4472f;--line:#e5dfd0;--card:#f3eee1;--band:rgba(31,95,91,.10);--band-line:rgba(31,95,91,.45);
--serif:"Source Serif",Charter,"Iowan Old Style",Georgia,serif;--display:"Fraunces","Source Serif",Georgia,serif;--ui:system-ui,-apple-system,"Segoe UI",sans-serif;
--step0:clamp(1.0625rem,.98rem + .4vw,1.25rem);--step1:clamp(1.25rem,1.1rem + .7vw,1.6rem);--step3:clamp(2.1rem,1.4rem + 3.4vw,3.6rem);--step4:clamp(2.7rem,1.4rem + 6.4vw,5.6rem);
--spring:linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726 13.48%,1.3643 14.05%,1.3151 16.29%,1.0317 22.36%,.9803 24.2%,.9561 26.1%,.954 27.7%,.9729 31.2%,1.0035 34.9%,1.0072 38.5%,.9992 46%,1);--p:0}
:root[data-theme=dark]{--bg:#14130f;--fg:#ece8dd;--muted:#a8a294;--accent:#7fc8c0;--accent-fg:#10201e;--alert:#f0916f;--line:#2c2a23;--card:#1d1b16;--band:rgba(127,200,192,.10);--band-line:rgba(127,200,192,.5)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14130f;--fg:#ece8dd;--muted:#a8a294;--accent:#7fc8c0;--accent-fg:#10201e;--alert:#f0916f;--line:#2c2a23;--card:#1d1b16;--band:rgba(127,200,192,.10);--band-line:rgba(127,200,192,.5)}}
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .22s ease both}::view-transition-new(root){animation:vt-in .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:var(--step0)/1.72 var(--serif);text-rendering:optimizeLegibility;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
main{flex:1;width:100%;max-width:40rem;margin:0 auto;padding:1rem 1.25rem 3rem;outline:0}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--fg);color:var(--bg);padding:.6rem 1rem;border-radius:8px;z-index:30;font-family:var(--ui)}.skip:focus{top:1rem}
/* press feedback: haptic-feeling squish with spring release */
[data-press],.button,.icon,.pager a,.ask-fab{transition:transform .6s var(--spring),background-color .2s,border-color .2s,filter .2s;touch-action:manipulation}
[data-press]:active,.button:active,.icon:active,.pager a:active{transform:scale(.955);transition-duration:.09s;transition-timing-function:ease-out}
/* reading progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:10;background:linear-gradient(90deg,transparent,var(--line))}
.progress i{display:block;height:100%;background:var(--accent);transform:scaleX(var(--p));transform-origin:0 50%}
@supports(animation-timeline:scroll()){.progress i{transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root)}@keyframes prog{to{transform:scaleX(1)}}}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:40rem;width:100%;margin:0 auto;padding:1.1rem 1.25rem}
.brand{font:600 .95rem/1.15 var(--display);color:var(--fg);text-decoration:none;letter-spacing:-.01em;font-variant-ligatures:none}
.top nav{display:flex;align-items:center;gap:.15rem;font:500 .95rem var(--ui)}
.top nav a{white-space:nowrap;color:var(--muted);text-decoration:none;padding:.65rem .6rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg);background:var(--card)}
.icon{width:44px;height:44px;border:0;background:none;color:var(--muted);border-radius:50%;display:grid;place-items:center;cursor:pointer;font:inherit}.icon:hover{color:var(--fg);background:var(--card)}
@media(min-width:480px){.sm{display:none}}
h1,h2,h3{text-wrap:balance;font-variant-ligatures:none}
h1{font:600 var(--step3)/1.08 var(--display);letter-spacing:-.02em;margin:.2em 0 .35em}
.eyebrow{font:600 .78rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2rem 0 0}.eyebrow a{color:inherit}
.art-head{margin-bottom:1.6rem}.meta{font:.85rem var(--ui);color:var(--muted);margin:.2rem 0 .8rem}.tag{background:var(--card);border-radius:999px;padding:.12rem .55rem;margin-right:.2rem}
.pulse{display:block;width:min(15rem,70%);height:24px;margin-top:.6rem;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pulse path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .25s cubic-bezier(.5,0,.2,1) forwards}
.prose p{margin:0 0 1.25em;hyphens:auto}
.prose>p:first-of-type::first-letter{font:600 3.4em/.85 var(--display);float:left;padding:.08em .1em 0 0;color:var(--accent)}
.prose blockquote{margin:1.5em 0;padding-left:1.1em;border-left:3px solid var(--accent);font-style:italic;color:var(--muted)}.prose blockquote p{margin:0 0 .6em}
.prose img{max-width:100%;height:auto;border-radius:12px}.prose h2,.prose h3{font:600 var(--step1)/1.2 var(--display);margin:2em 0 .5em}
.prose hr.ecg{border:0;height:24px;margin:2.2rem 0;background:no-repeat center/min(14rem,70%) 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath d='M0 12H70l8-8 10 18 9-14 6 4H240' fill='none' stroke='%238a8577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.prose code{font-size:.9em;background:var(--card);padding:.1em .35em;border-radius:5px}.prose pre{background:var(--card);padding:1rem;border-radius:10px;overflow:auto}
.note{font:.85rem/1.4 var(--ui);background:var(--card);border:1px dashed var(--muted);color:var(--muted);padding:.6rem .9rem;border-radius:10px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.5rem;border:0;border-radius:999px;background:var(--accent);color:var(--accent-fg);font:600 1rem var(--ui);text-decoration:none;cursor:pointer}
.button:hover{filter:brightness(1.08)}.button.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.toc,.posts{list-style:none;margin:1.5rem 0 2rem;padding:0;border-top:1px solid var(--line)}.toc li,.posts li{border-bottom:1px solid var(--line)}
.toc a,.posts a{display:flex;gap:1rem;align-items:baseline;padding:1.1rem .25rem;color:var(--fg);text-decoration:none;font:500 var(--step1)/1.3 var(--display);font-variant-ligatures:none;transition:padding .35s var(--spring),color .2s}
.toc a:hover,.posts a:hover{padding-left:.75rem;color:var(--accent)}.empty{padding:1rem .25rem;color:var(--muted)}
.num{font:600 .9rem var(--ui);color:var(--muted);min-width:1.6rem}.sum{display:block;font:400 .95rem/1.5 var(--serif);color:var(--muted);margin-top:.3rem}
.posts a{flex-direction:column;gap:.3rem}.posts time{font:600 .78rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:3rem 0 1rem}
.pager a{display:block;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--fg);font:500 1rem/1.3 var(--display);min-height:44px}
.pager a:hover{border-color:var(--accent)}.pager small{display:block;font:600 .72rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.pager .next{grid-column:2;text-align:right}.pager .prev{grid-column:1}.back{font:.95rem var(--ui)}
.related{margin-top:2.5rem;font:.95rem var(--ui)}.related h2{font:600 .78rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.related ul{padding-left:1.1rem}
/* landing hero */
.hero{padding:clamp(1rem,5vh,3rem) 0 2rem}
.hero h1{font-size:var(--step4);line-height:1;margin-bottom:.1em}
.art-wrap{margin:1.4rem -1.25rem 1.4rem;overflow:hidden}
.art{display:block;width:100%;height:auto;overflow:visible}
.art .band rect{fill:var(--band)}.art .band line{stroke:var(--band-line);stroke-width:1.2;stroke-dasharray:3 6}.art .band text{font:600 15px var(--ui);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.art .ln{fill:none;stroke:url(#fade);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .3s cubic-bezier(.55,0,.2,1) forwards}
.art .dot{fill:var(--alert);opacity:0;animation:pop .5s 2.9s var(--spring) forwards;transform-box:fill-box;transform-origin:center}
.art .ring{fill:none;stroke:var(--alert);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ping 2.4s 3.2s ease-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
/* scroll-reactive hero (scroll-timeline; JS sets --p as fallback) */
.art .trace{transform:translateY(calc(var(--p)*-26px));transform-box:fill-box}.art .band{transform:scaleY(calc(1 + var(--p)*.5));transform-origin:0 175px;transform-box:view-box}
.reactive{font-weight:calc(720 - var(--p)*420);transform:translateY(calc(var(--p)*-22px));letter-spacing:calc(-.02em + var(--p)*.03em);will-change:transform}
@supports(animation-timeline:scroll()){
 .art .trace{transform:none;animation:lift linear both;animation-timeline:scroll(root);animation-range:0 70vh}
 .art .band{transform:none;animation:widen linear both;animation-timeline:scroll(root);animation-range:0 70vh}
 .reactive{font-weight:inherit;transform:none;letter-spacing:inherit;animation:react linear both;animation-timeline:scroll(root);animation-range:0 60vh}
 @keyframes lift{to{transform:translateY(-26px)}}@keyframes widen{to{transform:scaleY(1.5)}}
 @keyframes react{from{font-weight:720;letter-spacing:-.02em}to{font-weight:300;letter-spacing:.01em;transform:translateY(-22px)}}
 .rv{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
 @keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
 .pulse path{animation:draw linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
}
@supports not (animation-timeline:scroll()){.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}}
.eyebrow,.lead,.wl,.login{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.lead{animation-delay:.15s}.wl{animation-delay:.25s}.login{animation-delay:.35s}.is-landing .eyebrow{margin-top:1.2rem}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.lead{font-size:var(--step1);line-height:1.5;color:var(--muted);max-width:32rem}
.wl{margin:2rem 0 1rem;max-width:30rem}.wl label{display:block;font:600 .85rem var(--ui);margin-bottom:.5rem}
.wl input[type=email]{width:100%;min-height:52px;padding:0 1.2rem;font:1rem var(--ui);border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg)}
.wl .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}.wl input::placeholder{color:var(--muted)}
.hp{position:absolute;left:-9999px}#msg{font:.9rem var(--ui);color:var(--muted);min-height:1.5em;margin:.6rem 0 0}.fine{font:.8rem/1.4 var(--ui);color:var(--muted)}.login{font:.95rem var(--ui);color:var(--muted)}
/* reader assistant */
.ask-fab{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:15;border:0;border-radius:999px;min-height:48px;padding:0 1.2rem;background:var(--fg);color:var(--bg);font:600 .9rem var(--ui);box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer}
.ask{border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--fg);width:min(32rem,calc(100vw - 1.5rem));max-height:80dvh;padding:1.2rem;font:1rem/1.5 var(--ui)}.ask::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.ask h2{font:600 1.3rem var(--display);margin:0 0 .3rem}.ask .close{position:absolute;top:.5rem;right:.5rem}
#ask-log{max-height:40dvh;overflow:auto;margin:.8rem 0}#ask-log p{margin:.5rem 0;padding:.6rem .8rem;border-radius:12px;background:var(--card)}#ask-log p.q{background:var(--accent);color:var(--accent-fg);margin-left:2rem}
#ask-form{display:flex;gap:.5rem}#ask-q{flex:1;min-height:48px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:1rem var(--ui)}
footer{max-width:40rem;width:100%;margin:0 auto;padding:1.5rem 1.25rem 5rem;color:var(--muted);font:.8rem var(--ui)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.art .ln,.pulse path{stroke-dashoffset:0!important}.art .dot{opacity:1!important}.rv{opacity:1!important;transform:none!important}.reactive{font-weight:700!important;transform:none!important}@view-transition{navigation:none}}

@media(max-width:440px){.top{gap:.4rem;padding-left:1rem;padding-right:.5rem;flex-wrap:wrap}.top nav{margin-left:auto}.top nav a{padding:.65rem .5rem;font-size:.9rem}.brand{font-size:.9rem}.icon{width:40px}}