:root{
  --bg:#f7f4ee;--surface:#fffdf8;--fg:#1c1a17;--muted:#6b655c;--rule:#e6dfd2;
  --accent:#5b3fe0;--accent-soft:#ebe7fc;--chip:#f0e9dc;--spine-l:52%;
  --shadow:0 1px 2px rgb(28 26 23/.05),0 10px 30px -12px rgb(28 26 23/.14);
  --moon:block;--sun:none;color-scheme:light;
  --display:"Fraunces",Georgia,serif;--serif:"Source Serif 4",Georgia,serif;--ui:"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131217;--surface:#1b1a21;--fg:#ece9f1;--muted:#9c97a6;--rule:#2b2932;
  --accent:#a898ff;--accent-soft:#25213b;--chip:#26242c;--spine-l:62%;
  --shadow:0 1px 2px rgb(0 0 0/.3),0 10px 30px -12px rgb(0 0 0/.6);
  --moon:none;--sun:block;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131217;--surface:#1b1a21;--fg:#ece9f1;--muted:#9c97a6;--rule:#2b2932;
  --accent:#a898ff;--accent-soft:#25213b;--chip:#26242c;--spine-l:62%;
  --shadow:0 1px 2px rgb(0 0 0/.3),0 10px 30px -12px rgb(0 0 0/.6);
  --moon:none;--sun:block;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.narrow{max-width:680px;margin-left:auto;margin-right:auto}

/* header */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:64px;padding-top:8px;padding-bottom:8px}
.brand{font:600 21px/1 var(--display);letter-spacing:-.01em;color:var(--fg);margin-right:auto}
.brand:hover{text-decoration:none}.brand i{font-style:normal;color:var(--accent)}
nav.site{display:flex;flex-wrap:wrap;gap:4px}
nav.site a{font:500 14px/1 var(--ui);color:var(--muted);padding:8px 12px;border-radius:99px}
nav.site a:hover{color:var(--fg);background:var(--chip);text-decoration:none}
nav.site a[aria-current]{color:var(--accent);background:var(--accent-soft)}
.theme{display:grid;place-items:center;width:36px;height:36px;border-radius:99px;border:1px solid var(--rule);
  background:var(--surface);color:var(--fg);cursor:pointer;padding:0}
.theme:hover{border-color:var(--muted)}
.theme .moon{display:var(--moon)}.theme .sun{display:var(--sun)}

main{padding:56px 0 80px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(32px,5vw,44px);line-height:1.1;margin:0 0 12px}
.eyebrow{font:600 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 14px}
.meta{font:14px/1.5 var(--ui);color:var(--muted)}
.chip{display:inline-block;font:600 12px/1.6 var(--ui);background:var(--chip);border-radius:99px;padding:1px 10px;color:var(--fg);vertical-align:middle}
.chip.dnf{background:transparent;border:1px solid var(--rule);color:var(--muted)}

/* hero */
.hero h1{font-size:clamp(38px,7.2vw,76px);line-height:1.02;letter-spacing:-.03em;margin-bottom:36px;overflow-wrap:anywhere}
.dots{color:var(--accent)}
.cursor{display:inline-block;width:.08em;height:.8em;margin-left:.06em;background:var(--accent);vertical-align:-.04em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px 56px;align-items:start}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.tags li{display:flex;gap:7px;font:500 14px/1 var(--ui);padding:9px 14px;border-radius:99px;border:1px solid var(--rule);background:var(--surface)}
.hero .lede{font:500 21px/1.5 var(--serif);margin:0 0 16px}
.hero p{font:18px/1.7 var(--serif);margin:0 0 16px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow)}
.facts{padding:22px 24px}
.facts dl{margin:0 0 16px;display:grid;gap:14px}
.facts dt{font:600 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:5px}
.facts dd{margin:0;font:500 15px/1.4 var(--ui)}
.facts .more{font:500 14px var(--ui)}

/* sections */
.sec{margin-top:72px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--fg);padding-bottom:10px;margin-bottom:4px}
.sec-head h2{font-size:26px;margin:0}
.sec-head a{font:500 14px var(--ui);white-space:nowrap}

/* journal list */
ol.entries{list-style:none;margin:0;padding:0}
ol.entries li{border-bottom:1px solid var(--rule)}
ol.entries a{display:grid;grid-template-columns:120px 1fr auto;gap:4px 20px;align-items:baseline;padding:18px 4px;color:var(--fg)}
ol.entries a:hover{text-decoration:none;background:var(--surface)}
ol.entries a:hover .t{color:var(--accent)}
ol.entries time,ol.entries .rt{font:13px/1.4 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
ol.entries .t{font:500 21px/1.3 var(--display);letter-spacing:-.01em;transition:color .15s}

/* bookshelf */
ul.shelf{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.book a{position:relative;display:flex;flex-direction:column;height:100%;padding:20px 20px 18px 30px;color:var(--fg);overflow:hidden;transition:transform .2s,box-shadow .2s}
.book a::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:hsl(var(--hue) 55% var(--spine-l))}
.book a:hover{text-decoration:none;transform:translateY(-2px)}
.book .bt{font:600 22px/1.2 var(--display);letter-spacing:-.01em;margin-bottom:4px}
.book .ba{font:italic 16px/1.4 var(--serif);color:var(--muted);margin-bottom:22px}
.book .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.score{display:flex;align-items:center;gap:10px;font:600 13px var(--ui)}
.meter{width:72px;height:6px;border-radius:99px;background:var(--chip);overflow:hidden}
.meter i{display:block;height:100%;width:calc(var(--v)*100%);background:var(--accent);border-radius:inherit}

/* posts */
.kicker{display:inline-block;font:600 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
article .byline{margin:0 0 36px;padding-bottom:24px;border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.prose{font:19px/1.75 var(--serif)}
.prose p{margin:0 0 22px}
.prose.drop>p:first-child::first-letter{float:left;font:600 3.4em/.85 var(--display);margin:.08em .1em 0 0;color:var(--accent)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.pager a{padding:16px 18px;color:var(--fg)}
.pager a:hover{text-decoration:none;border-color:var(--accent)}
.pager span{display:block;font:500 12px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.pager b{font:600 17px/1.3 var(--display)}
.pager .older{grid-column:2;text-align:right}
.page-head{margin-bottom:12px}.page-head p{margin:0}

footer{border-top:1px solid var(--rule);padding:28px 0 40px;font:13px var(--ui);color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

@media (max-width:760px){
  main{padding:36px 0 64px}
  nav.site{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;margin-left:-12px}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{margin-bottom:28px}
  ol.entries a{grid-template-columns:1fr auto;padding:16px 2px}
  ol.entries time{grid-column:1/-1;order:-1}
  .pager{grid-template-columns:1fr}.pager .older{grid-column:auto}
  .prose{font-size:18px}
}