@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-display:swap;src:url("/fonts/dm-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url("/fonts/dm-sans-latin-700-normal.woff2") format("woff2")}
:root{--ink:#37352f;--grey:#787774;--rule:#e3e2de;--chip:#efeeeb;--link-line:rgba(55,53,47,.2);--bg:#fff;--hover:#f5f4f2;--soft:#f0efec;color-scheme:light}
html[data-theme=dark]{--ink:#e7e5e0;--grey:#9a9893;--rule:#33332f;--chip:#2b2b28;--link-line:rgba(231,229,224,.28);--bg:#191918;--hover:#232321;--soft:#262624;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);font-size:clamp(15px,.92vw,17px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.55 "DM Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:.3rem}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:var(--bg);padding:.4rem .8rem;border-radius:.3rem;z-index:10}.skip:focus{left:.5rem}

.page{width:min(60rem,100% - 8rem);margin:0 auto;padding:2.6rem 0 2rem}
.mode{position:fixed;top:1rem;right:1rem;z-index:5;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--rule);background:var(--bg);color:var(--grey);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s}
.mode:hover{color:var(--ink);border-color:var(--link-line)}.mode svg{width:1.05rem;height:1.05rem}
html[data-theme=dark] .i-moon,html:not([data-theme=dark]) .i-sun{display:none}

/* intro */
.avatar{width:4.6rem;height:4.6rem;margin-bottom:1rem;display:grid;place-items:center;font-size:3.9rem;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.05)}
h1{font-size:2.3rem;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.sub{margin-top:1rem;font-size:1.25rem;line-height:1.38;font-weight:600;letter-spacing:-.005em;max-width:46rem}
.sub .g{color:var(--grey)}
.para{margin-top:.55rem;max-width:46rem;color:var(--grey)}
.para p+p{margin-top:.7rem}.para a{color:var(--ink);border-bottom:1px solid var(--link-line)}

/* music: one quiet line */
.song{position:relative;display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem}
.sp-btn{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--ink);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.sp-btn:hover{background:var(--ink);color:var(--bg)}
.sp-btn svg{width:.72rem;height:.72rem;grid-area:1/1}
.song .i-pause,.song.on .i-play{display:none}.song.on .i-pause{display:block}
.song.on .sp-btn{background:var(--ink);color:var(--bg)}
.sp-info b{font-size:.92rem;font-weight:500}.sp-info span{font-size:.92rem;color:var(--grey)}.sp-info span::before{content:" \00b7  "}
.bar{display:block;height:1px;margin-top:.25rem;background:transparent;cursor:pointer}.song.on .bar{background:var(--rule)}
.bar u{display:block;height:1px;width:0;background:var(--ink);text-decoration:none}
#ytp{position:absolute;left:0;top:0;width:200px;height:200px;opacity:0;pointer-events:none;z-index:-1}
.spotify{margin-top:1.1rem;max-width:26rem}.spotify iframe{border:0;border-radius:12px}

/* columns */
.cols{margin-top:2.4rem;display:grid;grid-template-columns:12.5rem minmax(0,1fr);gap:2.4rem;align-items:start}
.quick{position:sticky;top:1.5rem}
.quick h3,.ft{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.quick h3{margin-top:1.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}.quick h3:first-child{margin-top:0}
.quick ul{list-style:none;margin-top:.6rem}
.quick a{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;padding:.28rem .5rem;margin:0 -.5rem;border-radius:.4rem;transition:background .15s}
.quick a:hover{background:var(--hover)}
.quick svg{width:1rem;height:1rem;flex:none;color:var(--grey)}
.ft{margin-bottom:.9rem}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.tile{min-width:0;border:1px solid var(--rule);border-radius:.85rem;padding:1.1rem 1.2rem 1.2rem;background:var(--bg);transition:border-color .2s,box-shadow .2s;scroll-margin-top:1rem}
.tile:hover{border-color:var(--link-line);box-shadow:0 2px 12px rgba(55,53,47,.06)}
.tile.wide{grid-column:1/-1}
.ti svg{width:1rem;height:1rem}
.tag{font:500 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.tile h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-size:1.08rem;font-weight:600;letter-spacing:-.005em}.tile h2 .ti{color:var(--grey);display:grid}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{background:var(--chip);border-radius:999px;padding:.22rem .7rem;font-size:.88rem}
.rows{list-style:none}
.rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;border-top:1px solid var(--soft);font-size:.93rem}
.rows li:first-child{border-top:0}
.rows em{color:var(--grey);font-style:normal;text-align:right;white-space:nowrap}
.rows i{font-style:normal}
.rows a:hover,.posts a:hover{border-bottom:1px solid var(--link-line)}
.posts a{font-weight:500}
.st{letter-spacing:.06em;font-size:.82em;white-space:nowrap}
.tile .dim{color:var(--grey);font-size:.9rem;margin-top:.6rem}.tile .dim p+p{margin-top:.4rem}
.tile .dim a{color:var(--ink);border-bottom:1px solid var(--link-line)}

/* pictures */
.strip{max-width:100%;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.6rem;scrollbar-width:thin}
.strip a{flex:none;width:12.5rem;scroll-snap-align:start;position:relative}
.strip img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:.55rem;background:var(--chip);transition:opacity .2s}
.strip.open img{cursor:zoom-in}.strip a:hover img{opacity:.9}
.strip span{display:block;margin-top:.35rem;font-size:.78rem;color:var(--grey)}
.strip .locked img{filter:saturate(.9)}
.lockline{margin-top:.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9rem;color:var(--grey)}
.lockline svg{width:1rem;height:1rem}.lockline[hidden]{display:none}
.ask-btn,.ask button{font-size:.88rem;font-weight:500;background:none;border:1px solid var(--rule);border-radius:999px;padding:.32rem .9rem;cursor:pointer;transition:background .15s,border-color .15s}
.ask-btn:hover,.ask button:hover{background:var(--hover);border-color:var(--link-line)}

.foot{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--rule);color:var(--grey);font-size:.85rem;display:flex;justify-content:space-between;gap:1rem}
.foot a:hover{color:var(--ink)}

/* dialogs */
.ask,.lb{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:1rem}
.ask{z-index:60;background:rgba(10,10,10,.55)}.lb{z-index:50;background:rgba(10,10,10,.93);padding:2rem}
.ask.open,.lb.open{display:flex}
.ask form{background:var(--bg);border:1px solid var(--rule);border-radius:1rem;padding:1.4rem 1.4rem 1.2rem;max-width:24rem;width:100%;box-shadow:0 12px 50px rgba(0,0,0,.25)}
.ask h3{font-size:1.1rem;font-weight:600;margin-bottom:.3rem}
.ask p{font-size:.9rem;color:var(--grey);margin-bottom:.9rem;line-height:1.45}
.ask input{display:block;width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:.6rem;padding:.55rem .75rem;margin-bottom:.6rem}
.ask input:focus{outline:2px solid var(--ink);outline-offset:1px}
.ask .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask .act{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.4rem}.ask .act[hidden]{display:none}
.ask button.go{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ask .msg{margin:.7rem 0 0;font-size:.85rem}
.lb img{max-width:100%;max-height:100%;border-radius:.4rem;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:.8rem;opacity:.75}.lb button:hover{opacity:1}
.lb .x{top:.6rem;right:1rem}.lb .pv{left:.6rem;top:50%;transform:translateY(-50%)}.lb .nx{right:.6rem;top:50%;transform:translateY(-50%)}
.lb small{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#fff;opacity:.7;font-size:.85rem}

/* posts */
.ptop{width:min(44rem,100% - 3rem);margin:0 auto;padding:2.2rem 0 0}
.back{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--grey)}.back:hover{color:var(--ink)}
.mini{width:2rem;height:2rem;display:grid;place-items:center;font-size:1.6rem}.mini img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.post{width:min(44rem,100% - 3rem);margin:0 auto;padding:2.6rem 0 1rem}
.post h1{font-size:2.3rem}
.post .date{font-size:.9rem;color:var(--grey);margin-top:.4rem}
.post .body{margin-top:1.6rem;font-size:1.06rem}
.body h2{font-size:1.45rem;margin-top:2rem;letter-spacing:-.01em}.body h3{font-size:1.2rem;margin-top:1.6rem}
.body p,.body li{margin-top:.95rem;line-height:1.75}.body ul,.body ol{padding-left:1.3em}
.body a{border-bottom:1px solid var(--link-line)}
.body img{border-radius:.5rem;margin-top:1.2rem}
.body pre{margin-top:1rem;padding:.9rem;background:var(--chip);border-radius:.4rem;overflow:auto;font-size:.85rem}
.body code{font:.88em ui-monospace,Menlo,Consolas,monospace}
.body blockquote{margin-top:1.4rem;border-left:2px solid var(--rule);padding-left:1.2rem;color:var(--ink)}
.body hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
.share{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.share span{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-right:.4rem}
.share a,.share button{font-size:.82rem;font-weight:500;color:var(--grey);background:none;border:1px solid var(--rule);border-radius:999px;padding:.22rem .75rem;cursor:pointer;transition:background .15s,border-color .15s}
.share a:hover,.share button:hover{background:var(--hover);border-color:var(--link-line);color:var(--ink)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.pn a{border:1px solid var(--rule);border-radius:.7rem;padding:.8rem 1rem;font-weight:500;transition:border-color .2s}.pn a:hover{border-color:var(--link-line)}
.pn a.r{text-align:right}.pn small{display:block;font-size:.75rem;color:var(--grey);font-weight:400;text-transform:uppercase;letter-spacing:.06em}
.pfoot{width:min(44rem,100% - 3rem);margin:2rem auto 3rem;color:var(--grey);font-size:.9rem}.pfoot a:hover{color:var(--ink)}
.nf{padding-top:6rem}.nf p{margin-top:.8rem;color:var(--grey)}.nf a{color:var(--ink);border-bottom:1px solid var(--link-line)}

/* find me: a quiet row of icons under the bio */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.1rem}
.social a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--rule);border-radius:999px;padding:.28rem .75rem .28rem .6rem;font-size:.85rem;font-weight:500;color:var(--grey);transition:color .15s,border-color .15s,background .15s}
.social a:hover,.social a:focus-visible{color:var(--ink);border-color:var(--link-line);background:var(--hover)}
.social svg{width:.95rem;height:.95rem}



.feed{margin-top:2.6rem}
/* writing gets the most room */
.tile.lead h2{font-size:1.3rem}
.plist{list-style:none;margin:0 -.65rem}
.plist li+li{border-top:1px solid var(--soft)}
.plist a{display:flex;align-items:center;gap:1rem;padding:.75rem .65rem;border-radius:.6rem;transition:background .15s}
.plist a:hover,.plist a:focus-visible{background:var(--hover)}
.plist a:active{background:var(--chip)}
.plist .pt{flex:1;min-width:0}
.plist b{display:block;font-size:1.05rem;font-weight:600;line-height:1.35}
.plist .pd{display:block;color:var(--grey);font-size:.9rem;margin-top:.15rem;line-height:1.45}
.plist time{display:block;color:var(--grey);font-size:.8rem;margin-top:.3rem}
.plist .go{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:500;color:var(--grey);border:1px solid var(--rule);border-radius:999px;padding:.28rem .7rem;transition:color .15s,border-color .15s,background .15s}
.plist .go svg{width:.85rem;height:.85rem;transition:transform .15s}
.plist a:hover .go,.plist a:focus-visible .go{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.plist a:hover .go svg{transform:translateX(2px)}/* background: a faint dot grid around the top of the page, fading out before the first card */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:min(80vh,44rem);z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(55,53,47,.085) 1px,transparent 1.25px);background-size:30px 30px;-webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 0,rgba(0,0,0,.4) 45%,transparent 80%);mask-image:radial-gradient(120% 90% at 50% 0,#000 0,rgba(0,0,0,.4) 45%,transparent 80%)}
html[data-theme=dark] body::before{background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1.25px)}/* cards and boxes keep their solid background so text always sits on a clean surface */
.tile,.subbox{background:var(--bg)}

/* subscribe by email */
.subbox{margin-top:1rem;border:1px solid var(--rule);border-radius:.85rem;padding:1.05rem 1.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem}
.subtext b{display:block;font-weight:600}.subtext span{display:block;color:var(--grey);font-size:.88rem}
.subrow{display:flex;gap:.45rem;flex:1 1 20rem;max-width:26rem}
.subrow input[type=email]{flex:1;min-width:0;font:inherit;font-size:.93rem;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:999px;padding:.45rem .9rem}
.subrow input[type=email]:focus{outline:2px solid var(--ink);outline-offset:1px}
.subrow button{flex:none;font-size:.9rem;font-weight:600;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:.45rem 1.05rem;cursor:pointer}
.subrow button:disabled{opacity:.6;cursor:default}
.subbox .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.subbox .msg{flex-basis:100%;margin:0;font-size:.88rem;color:var(--grey)}.subbox .msg:empty{display:none}
.subbox.done .subrow{opacity:.55}
.post .subbox{margin-top:1.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* "Suggest" button in the Reading and Recently watched cards */
.sug-btn{margin-left:auto;font-size:.78rem;font-weight:500;color:var(--grey);background:none;border:1px solid var(--rule);border-radius:999px;padding:.18rem .7rem;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.sug-btn:hover,.sug-btn:focus-visible{color:var(--ink);border-color:var(--link-line);background:var(--hover)}
.sug-btn::before{content:"+ "}
/* currently building */
.sublabel{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:.2rem 0 .45rem}
.sublabel+.chips{margin-top:0}
.build{list-style:none;margin-bottom:.9rem}
.build li{padding:.45rem 0;border-top:1px solid var(--soft)}.build li:first-child{border-top:0;padding-top:0}
.build b{font-weight:600}
.build a{display:inline-flex;align-items:baseline;gap:.25rem}
.build a:hover b{text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px}
.build .arrow{color:var(--grey);font-size:.85em}
.build li>span{display:block;color:var(--grey);font-size:.88rem;margin-top:.05rem}/* books and films are lighter */
.rows.light li{font-size:.9rem;padding:.32rem 0}
.rows small{color:var(--grey);font-size:.82em}
.rows .right{display:flex;gap:.8rem;align-items:baseline;white-space:nowrap}
.rows .right em{font-size:.82rem;min-width:5.5rem}
.rows a{transition:color .15s}.rows a:hover{text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px;border:0}
/* private photos: a small, deliberate preview */
.strip.shut{overflow:visible;gap:.5rem}
.strip.shut a{width:6.2rem}
.strip.shut img{aspect-ratio:1;border-radius:.5rem;cursor:pointer}
.strip .more{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.05rem;font-weight:600;background:rgba(20,20,20,.35);border-radius:.5rem}
.lockline b{color:var(--ink);font-weight:600}
.lockline span::before{content:"\00b7  ";}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intro>*,.cols>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.feed{animation:rise .6s cubic-bezier(.2,.7,.2,1) .22s both}
.sub{animation-delay:.06s!important}.para{animation-delay:.12s!important}.song{animation-delay:.16s!important}.social{animation-delay:.18s!important}
@media (prefers-reduced-motion:reduce){.intro>*,.cols>*,.feed{animation:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  html{font-size:16.5px}
  .page{width:calc(100% - 2.5rem);padding-top:2.4rem}
  .avatar{width:5.2rem;height:5.2rem;font-size:4.6rem}
  h1{font-size:2.1rem}.sub{font-size:1.2rem}
  .cols{grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2.2rem}
  .quick{position:static}
  .quick h3{margin-top:1.4rem}
  .quick ul{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
  .quick a{border:1px solid var(--rule);border-radius:999px;padding:.38rem .8rem .38rem .65rem;margin:0;font-size:.9rem}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .strip a{width:10.5rem}
  .strip.shut a{width:calc((100% - 2rem) / 5)}
  .rows .right em{display:none}
  .plist .go{padding:0;width:2rem;height:2rem;justify-content:center;font-size:0;gap:0}
  .plist .go svg{width:.95rem;height:.95rem}
  .plist b{font-size:1rem}
  .subbox{padding:.8rem .85rem;gap:.55rem;margin-top:.9rem}
  .subtext b{font-size:.95rem}.subtext span{display:none}
  .plist .pd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .plist a{padding:.65rem .65rem}
  .subrow{flex:1 1 100%;max-width:none}
  .subrow input[type=email]{font-size:16px;padding:.38rem .8rem}
  .subrow button{font-size:.85rem;padding:.38rem .9rem}
  .social{gap:.35rem}.social a{font-size:.82rem;padding:.26rem .65rem .26rem .55rem}
  .lockline .ask-btn{margin-left:auto}
  .pn{grid-template-columns:1fr}
  .post h1{font-size:1.9rem}
}