@font-face { font-family: figtree; src: url('/fonts/figtree.woff2') format('woff2'); font-display: swap; font-weight: 300 900; }
@font-face { font-family: cabin; src: url('/fonts/cabin.woff2') format('woff2'); font-display: swap; font-weight: 400 700; }
@font-face { font-family: marginalia; src: url('/fonts/yash-marginalia.ttf') format('truetype'); font-display: swap; }
:root { --surface:#fff; --foreground:#28352e; --muted:#eef0e9; --muted-foreground:#626f60; --primary:#48643a; --selection:#d9e4bf; color-scheme:light; }
.dark { --surface:#141815; --foreground:#e4e8de; --muted:#1d231e; --muted-foreground:#95a091; --primary:#a4c286; --selection:#3a5a2e; color-scheme:dark; }
* { box-sizing:border-box; }
html { background:var(--surface); scroll-behavior:smooth; }
body { margin:0; background:var(--surface); color:var(--foreground); font-family:figtree,Arial,sans-serif; font-size:16px; text-transform:lowercase; -webkit-font-smoothing:antialiased; }
::selection { background:var(--selection); }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:2px solid var(--primary); outline-offset:6px; }
.skip-link { position:fixed; top:-60px; left:20px; z-index:100; padding:12px; background:var(--surface); }
.skip-link:focus { top:10px; }
.site-shell { max-width:1100px; padding:0 48px; margin:auto; min-height:100svh; }
.site-header { position:sticky; top:0; z-index:30; width:100%; max-width:600px; height:100px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(12px); }
.wordmark { font-size:27px; font-weight:600; letter-spacing:-1.2px; }
.header-right { display:flex; align-items:center; gap:26px; }
nav { display:flex; align-items:center; gap:26px; font-family:marginalia,cursive; font-size:26px; color:var(--muted-foreground); }
nav a { display:block; padding:12px 0; white-space:nowrap; }
nav a:hover,nav .active { color:var(--foreground); }
.lights { position:relative; width:32px; height:52px; flex:0 0 auto; padding:0; border:1px solid color-mix(in srgb,var(--foreground) 18%,transparent); border-radius:4px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#fff),color-mix(in srgb,var(--surface) 92%,#000)); box-shadow:0 5px 12px #0002,inset 0 1px #fff2; cursor:pointer; }
.lights:before,.lights:after { content:''; position:absolute; left:50%; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:color-mix(in srgb,var(--foreground) 35%,transparent); }
.lights:before { top:7px; } .lights:after { bottom:7px; }
.lights span { position:absolute; left:11px; top:18px; width:8px; height:15px; border-radius:2px; background:var(--foreground); transform:perspective(20px) rotateX(-28deg); transition:transform .2s; opacity:.8; }
.lights[aria-pressed="true"] span { transform:perspective(20px) rotateX(28deg); }
.projects-main { width:100%; max-width:600px; margin:56px auto 0; }
h1 { font-size:44px; line-height:1.18; font-weight:450; letter-spacing:-1.8px; margin:0 0 27px; }
.name-dot { color:var(--primary); }
.page-intro { color:var(--muted-foreground); font-size:19px; line-height:1.75; margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:56px; }
.project-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:270px; padding:24px; gap:20px; background:var(--muted); border-radius:12px; transition:transform .2s,background .2s; }
.project-card:first-child { grid-column:1/-1; min-height:240px; }
.project-card:hover { transform:translateY(-3px); }
.project-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--primary); font-size:32px; line-height:1; }
.project-icon.bird img { display:block; image-rendering:pixelated; }
.project-card h2 { display:flex; justify-content:space-between; gap:12px; width:100%; font-size:20px; font-weight:500; margin:0; }
.project-card p { color:var(--muted-foreground); font-size:16px; line-height:1.65; margin:0; }
.project-tag { color:var(--primary); font-size:12px; margin-top:auto; }
.site-footer { width:100%; max-width:600px; margin:72px auto 0; padding:0 0 32px; display:flex; flex-wrap:wrap; align-items:center; gap:20px 24px; color:var(--muted-foreground); font-family:cabin,sans-serif; font-size:14px; line-height:1.6; }
.site-footer>span:first-child { flex-basis:100%; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
.footer-links a { padding-block:8px; }
.copyright { margin-left:auto; font-size:12px; }
@media (max-width:700px) { .site-shell{padding:0 24px}.site-header{height:auto;min-height:92px;padding:16px 0;gap:0 20px}.header-right{gap:16px}nav{gap:16px;font-size:22px}.wordmark{font-size:25px}.projects-main{margin-top:32px}.project-grid{gap:16px;margin-top:44px}.project-card{padding:20px}.site-footer{margin-top:52px;padding-bottom:24px}.copyright{margin-left:0;flex-basis:100%} }
@media (max-width:520px) { .site-header{align-items:flex-start;flex-wrap:wrap}.header-right{width:100%;justify-content:space-between}.wordmark{margin-bottom:4px}.project-grid{grid-template-columns:1fr}.project-card:first-child{grid-column:auto;min-height:270px}h1{font-size:37px}nav{gap:14px;font-size:20px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto}.project-card{transition:none} }