:root{
  --paper:#F4F5F3;
  --ink:#1C2024;
  --muted:#5A6169;
  --faint:#8A9098;
  --accent:#2C5F4E;
  --navy:#1D3B73;
  --rule:#DCE0DA;
  --measure:600px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:900px;margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
a:focus-visible,.row:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* header */
header{position:sticky;top:0;z-index:10;background:rgba(244,245,243,.86);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color .3s ease;}
header.stuck{border-color:var(--rule);}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;}
.mark{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:.9rem;color:var(--ink);}
nav{font-family:"IBM Plex Sans",sans-serif;font-size:.86rem;font-weight:450;display:flex;gap:22px;}
nav a{color:var(--muted);transition:color .18s ease;}
nav a:hover{color:var(--accent);}
nav a.current{color:var(--ink);}

/* hero + animation */
.hero{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 30px;}
.name{
  position:relative;
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.08;font-weight:500;margin:0;color:var(--ink);
  letter-spacing:0;white-space:nowrap;transition:opacity .26s ease;
}
.name.serif{font-family:"Newsreader",serif;font-weight:400;letter-spacing:-0.015em;}
.name.dissolving .word{opacity:0;}
.name .word{display:inline-block;margin-right:.3em;white-space:nowrap;transition:opacity .24s ease;}
.name .ch{display:inline-block;}
.name .ch.scrambling{color:var(--navy);opacity:.9;}
/* sweeping underline -> contracts into a flickering navy proof square */
.swipe{
  position:absolute;left:0;bottom:-0.03em;
  width:0;height:3px;background:var(--navy);border-radius:1px;
  will-change:left,width,height;
}
.swipe.box{
  border-radius:2px;
  transition:left .3s ease,width .3s ease,height .3s ease,bottom .3s ease;
  animation:blink 2.0s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}
.tag{
  font-family:"IBM Plex Sans",sans-serif;font-size:1.02rem;color:var(--muted);
  margin:26px 0 0;max-width:46ch;opacity:0;transform:translateY(6px);
  transition:opacity .6s ease,transform .6s ease;
}
.tag.in{opacity:1;transform:none;}

/* subpage heading */
.pagehead{padding:44px 0 4px;}
.page-title{
  font-family:"Newsreader",serif;font-weight:400;letter-spacing:-0.015em;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.1;margin:0;color:var(--ink);
}

/* sections */
section{padding:52px 0 8px;}
.head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--rule);}
.head h2{font-family:"IBM Plex Sans",sans-serif;font-size:.92rem;font-weight:600;margin:0;color:var(--ink);}
.head .note{font-family:"IBM Plex Sans",sans-serif;font-size:.82rem;color:var(--faint);}
a.note{transition:color .16s ease;}
a.note:hover{color:var(--accent);}

.prose{max-width:var(--measure);}
.prose p{margin:0 0 16px;}

/* work / writing lists */
.list{max-width:100%;}
.row{display:grid;grid-template-columns:1fr auto;gap:5px 26px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);}
.row:last-child{border-bottom:0;}
.row .title{font-size:1.28rem;font-weight:500;line-height:1.25;transition:color .16s ease;}
.row:hover .title,.row:focus-visible .title{color:var(--accent);}
.row .desc{grid-column:1 / 2;color:var(--muted);font-size:1.02rem;line-height:1.5;margin-top:5px;max-width:56ch;}
.meta{font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;color:var(--faint);text-align:right;white-space:nowrap;display:flex;flex-direction:column;gap:2px;line-height:1.4;}
.meta .kind{color:var(--muted);font-weight:500;}

footer{margin-top:64px;padding:26px 0 46px;border-top:1px solid var(--rule);font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;color:var(--faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

@media (max-width:560px){
  body{font-size:18px;}
  .name{font-size:clamp(1.2rem,6vw,1.9rem);}
  .row{grid-template-columns:1fr;}
  .meta{text-align:left;flex-direction:row;gap:12px;margin-top:8px;}
  nav{gap:15px;}
  .hero{min-height:60vh;}
}
@media (prefers-reduced-motion:reduce){
  .tag{transition:none;}
  .swipe.box{transition:none;animation:none;}
  html{scroll-behavior:auto;}
}