@font-face{font-family:InterLocal;src:url('/fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:NotoSansLocal;src:url('/fonts/NotoSansSC.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:NotoSerifLocal;src:url('/fonts/NotoSerifSC.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url('/fonts/InstrumentSerif.woff2') format('woff2');font-display:swap}
:root{--bg:#f4f2ec;--ink:#182337;--muted:#5a6673;--line:#d4d9d8;--accent:#3d7188;--strong:#245d78;--card:#faf9f5;--hover:#fff;--sky:#dce9ed;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#0e1725;--ink:#eef3f5;--muted:#b4c1ca;--line:#334354;--accent:#9fd0df;--strong:#d1edf4;--card:#152337;--hover:#1c2e43;--sky:#17334c;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:InterLocal,NotoSansLocal,system-ui,sans-serif;font-size:16px;line-height:1.7;font-synthesis:none;text-rendering:optimizeLegibility}
a{color:inherit}
a:focus-visible{outline:2px solid var(--strong);outline-offset:4px}
.site-shell{max-width:1240px;margin:auto;padding:0 56px}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-weight:700;text-decoration:none}
.brand span{font-family:InterLocal,NotoSansLocal,sans-serif;font-size:.94em;font-weight:500}
.topbar nav{display:flex;gap:30px}
.topbar nav a{font-size:14px;color:var(--muted);text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--ink)}
section{border-top:1px solid var(--line)}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);align-items:center;gap:20px;min-height:480px;padding:54px 0 60px;isolation:isolate}
.hero-content{position:relative;z-index:1;min-width:0}
.hero h1{margin:0;font-family:NotoSerifLocal,'Noto Serif SC',serif;font-size:clamp(56px,6.2vw,78px);font-weight:600;line-height:1.2;letter-spacing:0;white-space:nowrap;font-feature-settings:'halt' 1}
.hero h1 span{display:inline}
.hero h1 span+span{color:var(--strong)}
.hero-copy{margin:25px 0 19px;color:var(--muted);font-size:17px}
.hero-copy p{margin:0}
.hero-link{display:inline-flex;align-items:center;gap:13px;padding-bottom:4px;border-bottom:1px solid currentColor;text-decoration:none;font-size:15px;font-weight:650}
.hero-link span,.section-action span,.project-meta b{color:var(--strong);font-size:20px;font-weight:400}
.sky{position:relative;display:block;width:min(100%,390px);justify-self:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 52% 48%,var(--sky),transparent 66%);text-decoration:none;cursor:pointer;transition:transform .5s ease}
.sky:hover{transform:scale(1.025)}
.sky-orbit{position:absolute;inset:14%;border:1px solid var(--line);border-radius:50%;transform:rotate(-28deg) scaleY(.7)}
.sky-orbit:after{content:'';position:absolute;inset:15%;border:1px solid var(--line);border-radius:50%}
.sky-star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--strong);box-shadow:0 0 12px 2px var(--accent);animation:twinkle 5s ease-in-out infinite alternate}
.s1{top:15%;left:46%;width:5px;height:5px}.s2{top:27%;left:75%;animation-delay:1s}.s3{top:42%;left:20%;animation-delay:2s}.s4{top:48%;left:58%;width:7px;height:7px}.s5{top:72%;left:32%;animation-delay:3s}.s6{top:79%;left:70%;width:4px;height:4px}.s7{top:33%;left:38%;width:2px;height:2px}.s8{top:61%;left:84%;width:2px;height:2px}.s9{top:65%;left:47%;width:2px;height:2px}
@keyframes twinkle{to{opacity:.3;transform:scale(.7)}}
.projects-section,.writing-section{padding:54px 0 66px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:23px}
.section-heading h2{margin:0;font-family:NotoSerifLocal,'Noto Serif SC',serif;font-size:34px;line-height:1.25}
.section-count{padding-bottom:4px;font:13px InterLocal,ui-monospace,monospace;color:var(--muted)}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
.project-card{position:relative;display:flex;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--card);transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.project-card:hover,.project-card:focus-within{transform:translateY(-3px);background:var(--hover);border-color:var(--accent);box-shadow:0 12px 28px #10203318}
.project-main{position:relative;z-index:1;display:flex;width:100%;min-height:238px;height:100%;flex-direction:column;align-items:flex-start;padding:25px 27px;text-decoration:none;cursor:pointer}
.project-index,.project-meta,.source-link{font-family:InterLocal,ui-monospace,monospace}
.project-index{margin-bottom:16px;font-size:13px;color:var(--strong)}
.project-body{display:block}
.project-title{display:block;font-size:22px;font-weight:750;line-height:1.35;overflow-wrap:anywhere}
.project-title small{font-family:NotoSerifLocal,'Noto Serif SC',serif;font-size:16px;font-weight:500;color:var(--muted)}
.project-desc{display:block;margin-top:10px;font-size:14px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.project-meta{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:16px;font-size:13px;color:var(--strong)}
.project-meta b{display:inline-block;transition:transform .25s ease}
.project-card:hover .project-meta b,.project-card:focus-within .project-meta b{transform:translate(3px,-3px)}
.project-card.featured{grid-column:1/-1;overflow:hidden;background:linear-gradient(110deg,var(--card) 48%,var(--sky))}
.project-card.featured:before{content:'';position:absolute;right:8%;top:12%;width:40%;height:76%;pointer-events:none;background:radial-gradient(circle at 19% 68%,var(--accent) 0 2px,transparent 3px),radial-gradient(circle at 43% 41%,var(--accent) 0 3px,transparent 4px),radial-gradient(circle at 68% 22%,var(--accent) 0 2px,transparent 3px),radial-gradient(circle at 82% 70%,var(--accent) 0 1.5px,transparent 2.5px),radial-gradient(circle at 57% 77%,var(--accent) 0 1.5px,transparent 2.5px)}
.project-card.featured:after{content:'';position:absolute;right:10%;top:18%;width:32%;height:62%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%;transform:rotate(-22deg);pointer-events:none}
.featured .project-main{min-height:206px;padding-right:42%}
.source-link{position:absolute;right:26px;bottom:24px;z-index:2;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.source-link:hover{color:var(--ink)}
.section-action{padding-bottom:5px;font-size:14px;color:var(--muted);text-decoration:none}
.section-action:hover{color:var(--ink)}
.posts{list-style:none;padding:0;margin:0}
.posts li{border-top:1px solid var(--line);padding:18px 0}
.posts li:last-child{border-bottom:1px solid var(--line)}
.posts li a{display:flex;justify-content:space-between;text-decoration:none}
.posts li a span{color:var(--accent)}
.posts time{font-size:13px;color:var(--muted)}
.posts .empty{display:block;padding:16px 0;border:0;color:var(--muted);font-size:15px}
.posts .empty small{display:none}
.footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:22px 0 34px;color:var(--muted);font-size:13px}
.footer a{color:var(--ink);text-decoration:none}
.page-intro{min-height:300px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:62px 0}
.page-intro .eyebrow{font-size:13px;color:var(--muted)}
.page-intro h1{margin:13px 0 10px;font-family:NotoSerifLocal,'Noto Serif SC',serif;font-size:clamp(58px,8vw,92px);line-height:1.18}
.page-intro p{margin:0;color:var(--muted);font-size:17px}
.blog-listing{min-height:0;padding-top:20px;padding-bottom:32px}
@media(max-width:1000px){.site-shell{padding:0 36px}.hero{grid-template-columns:minmax(0,1.5fr) minmax(220px,.75fr);min-height:420px}.hero h1{font-size:clamp(48px,6vw,62px)}.sky{width:min(100%,320px)}}
@media(max-width:760px){.site-shell{padding:0 22px}.topbar{height:72px}.topbar nav{gap:17px}.topbar nav a{font-size:13px}.hero{display:block;min-height:0;padding:52px 0 54px}.hero h1{font-size:clamp(44px,11vw,62px);line-height:1.22;white-space:normal}.hero h1 span{display:block}.hero h1 span+span{margin-left:0}.hero-copy{margin-top:20px;font-size:16px}.sky{display:none}.projects-section,.writing-section{padding:42px 0 54px}.section-heading{margin-bottom:20px}.section-heading h2{font-size:30px}.project-list{grid-template-columns:1fr;gap:12px}.project-main{min-height:205px;padding:22px 23px}.project-title{font-size:21px}.project-title small{font-size:15px}.project-desc{font-size:14px}.project-card.featured{grid-column:auto}.featured .project-main{padding-right:23px;padding-bottom:53px}.project-card.featured:before{right:3%;width:53%;opacity:.48}.project-card.featured:after{right:1%;width:43%;opacity:.48}.source-link{right:23px;bottom:18px}.page-intro{min-height:250px;padding:52px 0}.page-intro h1{font-size:clamp(55px,15vw,76px)}.blog-listing{padding-top:16px;padding-bottom:24px}.footer{font-size:12px}}
@media(max-width:400px){.site-shell{padding:0 18px}.brand{font-size:14px}.topbar nav{gap:13px}.hero h1{font-size:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sky-star{animation:none}.sky,.project-card,.project-meta b{transition:none}}