:root{--bg:#070809;--panel:rgba(13,15,17,.62);--line:rgba(185,193,199,.14);--ink:#e7eaec;
--silver:#b9c1c7;--dim:#7e868d;--green:#2e6b4f;--green-hi:#57a67f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 Inter,system-ui,sans-serif;
-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(60% 45% at 50% -5%,rgba(87,168,127,.11),transparent 70%),
radial-gradient(45% 35% at 85% 0%,rgba(185,193,199,.05),transparent 70%)}
::selection{background:rgba(46,107,79,.45);color:#f2f5f3}
a{color:inherit;text-decoration:none}
.wrap{position:relative;max-width:780px;margin:0 auto;padding:0 24px;z-index:1}
nav{position:sticky;top:0;background:rgba(7,8,9,.82);backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);z-index:10}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand img{height:34px;display:block;filter:invert(.92) brightness(1.08);opacity:.92;transition:opacity .2s}
.brand:hover img{opacity:1}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav ul a{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--dim);padding-bottom:3px;border-bottom:1px solid transparent}
nav ul a:hover,nav ul a.on{color:var(--ink);border-bottom-color:var(--green-hi)}
header.hero{padding:88px 0 48px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.22em;
text-transform:uppercase;color:var(--green-hi);margin:0 0 22px}
h1.name{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(2.6rem,7vw,4.4rem);
line-height:1.04;letter-spacing:-.015em;margin:0 0 26px;
background:linear-gradient(180deg,rgba(87,168,127,.5),rgba(87,168,127,.12) 30%,transparent 52%),
linear-gradient(100deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%),
linear-gradient(168deg,#ffffff 4%,#d7dde1 22%,#9aa4ac 40%,#6c757d 55%,#c3cad0 70%,#f6f8f9 84%,#8a939b 100%);
background-size:100% 100%,260% 100%,100% 100%;background-position:0 0,130% 0,0 0;background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:sheen 7s 1.2s linear infinite}
@keyframes sheen{from{background-position:0 0,130% 0,0 0}to{background-position:0 0,-130% 0,0 0}}
.stage{position:relative;display:inline-block}
.stage::before{content:"";position:absolute;left:50%;top:-70%;transform:translateX(-50%);
width:130%;height:170%;pointer-events:none;filter:blur(26px);z-index:-1;
background:radial-gradient(55% 60% at 50% 18%,rgba(87,168,127,.38),rgba(87,168,127,.1) 55%,transparent 75%)}
@media(prefers-reduced-motion:reduce){h1.name{animation:none}.card{animation:none}}
.lede{font-family:Newsreader,Georgia,serif;font-size:1.22rem;line-height:1.75;color:var(--silver);max-width:660px}
.lede em{color:var(--ink)}
.sig{height:64px;filter:invert(.92) brightness(1.08);opacity:.85;margin-top:30px;display:block}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:26px 26px 14px;margin:0 0 26px;backdrop-filter:blur(8px);
box-shadow:0 24px 70px rgba(0,0,0,.45);animation:rise .55s ease-out both}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:14px 14px 0 0;
background:linear-gradient(90deg,transparent,rgba(185,193,199,.55) 35%,rgba(87,168,127,.6) 65%,transparent)}
.card.d1{animation-delay:.08s}.card.d2{animation-delay:.16s}.card.d3{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h2.sec{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.22em;
text-transform:uppercase;color:var(--green-hi);margin:2px 0 10px}
.rows{list-style:none;margin:0;padding:0}
.rows li{border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows a{display:flex;align-items:baseline;gap:18px;padding:18px 4px;transition:background .18s}
.rows a:hover{background:rgba(46,107,79,.08)}
.rows .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);min-width:78px}
.rows .t{font-family:Newsreader,Georgia,serif;font-size:1.3rem;font-weight:500;color:var(--ink);flex:1}
.rows a:hover .t{color:#fff}
.rows .d{color:var(--dim);font-size:.9rem;max-width:280px}
.rows .arr{color:var(--green-hi);opacity:0;transform:translateX(-6px);transition:all .18s}
.rows a:hover .arr{opacity:1;transform:none}
.embed{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0c0e10;margin-top:6px}
.ext{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--dim);display:inline-block;
margin:16px 0 12px;border-bottom:1px solid transparent}
.ext:hover{color:var(--green-hi);border-bottom-color:var(--green-hi)}
article.essay{padding-bottom:20px}
.essay .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--dim);margin:0 0 34px}
.essay h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:clamp(2rem,5vw,3rem);
line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px}
.essay-body{font-family:Newsreader,Georgia,serif;font-size:1.14rem;line-height:1.85;color:#ccd2d6}
.essay-body p{margin:0 0 1.35em}
.essay-body h2,.essay-body h3{font-family:Newsreader,Georgia,serif;font-weight:600;color:var(--silver);
line-height:1.25;margin:2.2em 0 .7em;padding-top:.9em;border-top:1px solid var(--line)}
.essay-body h2{font-size:1.55rem}.essay-body h3{font-size:1.25rem}
.essay-body blockquote{margin:1.6em 0;padding:2px 0 2px 22px;border-left:2px solid var(--green);
color:var(--silver);font-style:italic}
.essay-body a{color:var(--green-hi);border-bottom:1px solid rgba(87,168,127,.4)}
.essay-body a:hover{border-bottom-color:var(--green-hi)}
.essay-body ul,.essay-body ol{margin:0 0 1.35em;padding-left:1.3em}
.essay-nav{display:flex;justify-content:space-between;gap:20px;margin-top:44px}
footer{border-top:1px solid var(--line);margin-top:64px;padding:34px 0 60px;position:relative;z-index:1}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline}
footer a{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--dim)}
footer a:hover{color:var(--green-hi)}
footer .c{margin-left:auto;font-size:12px;color:#4a5257;font-family:"IBM Plex Mono",monospace}
a:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px;border-radius:2px}
@media(max-width:560px){.rows .d{display:none}header.hero{padding:56px 0 36px}.card{padding:20px 18px 10px}}
.hero-center{text-align:center;padding:76px 0 54px}
.hero-center .sig-top{height:92px;filter:invert(.92) brightness(1.08);opacity:.9;margin:0 auto 6px;display:block}
.hero-center .lede{margin:0 auto;max-width:620px}
.roles{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.24em;
text-transform:uppercase;color:var(--green-hi);margin:14px 0 26px}
.banner{width:100%;border-radius:14px;border:1px solid var(--line);display:block;
box-shadow:0 24px 70px rgba(0,0,0,.45)}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0}
.rel-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
overflow:hidden;backdrop-filter:blur(8px);transition:transform .2s,border-color .2s;animation:rise .55s ease-out both}
.rel-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
background:linear-gradient(90deg,transparent,rgba(185,193,199,.55) 35%,rgba(87,168,127,.6) 65%,transparent)}
.rel-card:hover{transform:translateY(-3px);border-color:rgba(87,168,127,.45)}
.rel-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.rel-card .info{padding:16px 18px 18px}
.rel-card .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--green-hi)}
.rel-card .rt{font-family:Newsreader,Georgia,serif;font-size:1.3rem;font-weight:500;color:var(--ink);margin:6px 0 4px}
.rel-card .listen{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim)}
.rel-card:hover .listen{color:var(--green-hi)}
.star{color:var(--green-hi)}
@media(max-width:640px){.rel-grid{grid-template-columns:1fr}}
.brand{display:flex;align-items:center;gap:12px}
.bsig{height:30px;filter:invert(.92) brightness(1.08);opacity:.9;display:block}
.bname{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:500;letter-spacing:.03em;
background:linear-gradient(168deg,#f4f6f7 8%,#c9d0d5 40%,#8b949b 62%,#e2e6e9 92%);
-webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .2s}
.brand:hover .bname{filter:brightness(1.18)}
@media(max-width:560px){.bsig{height:24px}.bname{font-size:16px}}
.page-sig{height:116px;filter:invert(.92) brightness(1.08);opacity:.92;display:block;margin:4px 0 10px}
.prose{font-family:Newsreader,Georgia,serif;font-size:1.14rem;line-height:1.85;color:#ccd2d6}
.prose p{margin:0 0 1.35em}
.prose a{color:var(--green-hi);border-bottom:1px solid rgba(87,168,127,.4)}

.prose-flow{font-family:Newsreader,Georgia,serif;font-size:1.16rem;line-height:1.9;color:#ccd2d6;
max-width:680px;margin:0 auto;padding:8px 0 20px}
.prose-flow p{margin:0 0 1.5em}
.prose-flow a{color:var(--green-hi);border-bottom:1px solid rgba(87,168,127,.4)}
.prose-flow a:hover{border-bottom-color:var(--green-hi)}