:root { color-scheme: light; --bg:#f7f7f5; --surface:#efefeb; --ink:#171716; --muted:#74746e; --line:#ddddd6; --accent:#e8ff76; --shadow:0 14px 30px rgba(24,24,20,.07); }
[data-theme="dark"] { color-scheme:dark; --bg:#151515; --surface:#222220; --ink:#f3f3ee; --muted:#aaa9a2; --line:#383835; --accent:#d6ed64; --shadow:0 16px 30px rgba(0,0,0,.25); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } a { color:inherit; } button { font:inherit; }
.container { width:min(1152px,calc(100% - 56px)); margin-inline:auto; }.skip-link { position:fixed; z-index:5; top:12px; left:12px; padding:10px 14px; color:var(--ink); background:var(--accent); transform:translateY(-150%); }.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; align-items:center; justify-content:space-between; padding-block:27px; border-bottom:1px solid var(--line); }.brand { font-size:17px; font-weight:700; letter-spacing:-.06em; text-decoration:none; }.brand span { color:var(--muted); }.header-actions,.header-actions nav { display:flex; align-items:center; }.header-actions { gap:24px; }.header-actions nav { gap:19px; }.header-actions nav a,.site-footer a { color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; text-decoration:none; transition:color .2s ease; }.header-actions nav a:hover,.site-footer a:hover { color:var(--ink); }.theme-toggle { display:grid; width:30px; height:30px; padding:0; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; transition:transform .2s ease,border-color .2s ease; }.theme-toggle:hover { border-color:var(--ink); transform:rotate(20deg); }
.intro { padding:clamp(74px,11vw,132px) 0; }.kicker { margin:0 0 22px; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; } h1 { max-width:780px; margin:0; font-size:clamp(48px,7.1vw,91px); font-weight:700; letter-spacing:-.085em; line-height:.94; } h1 em { position:relative; font-style:normal; font-weight:500; } h1 em::after { position:absolute; right:1%; bottom:.04em; left:0; height:.16em; z-index:-1; background:var(--accent); content:""; }.lede { max-width:475px; margin:35px 0 0; color:var(--muted); font-size:15px; line-height:1.75; }
.projects-section { padding-bottom:clamp(88px,12vw,140px); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:21px; border-bottom:1px solid var(--line); }h2 { margin:0; font-size:17px; letter-spacing:-.04em; }h2 span { margin-left:4px; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; font-weight:400; vertical-align:middle; }.section-heading p { margin:0; color:var(--muted); font-size:12px; }.projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; padding-top:31px; }.project-card { display:flex; flex-direction:column; min-width:0; color:inherit; text-decoration:none; }.project-image { position:relative; display:grid; overflow:hidden; aspect-ratio:16 / 9; place-items:center; border:1px solid var(--line); border-radius:7px; background:var(--surface); }.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.75,.25,1); }.project-card:hover .project-image img { transform:scale(1.045); }.image-placeholder { width:100%; height:100%; }.project-info { position:relative; padding:17px 2px 0; }.project-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }h3 { margin:0; font-size:16px; letter-spacing:-.04em; }.project-arrow { color:var(--muted); font-size:17px; transition:transform .2s ease,color .2s ease; }.project-card:hover .project-arrow { color:var(--ink); transform:translate(3px,-3px); }.project-description { min-height:42px; margin:9px 0 14px; color:var(--muted); font-size:12px; line-height:1.65; }.tags { display:flex; flex-wrap:wrap; gap:6px; }.tag { padding:5px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-family:"DM Mono",monospace; font-size:9px; }
.site-footer { display:flex; justify-content:space-between; padding:24px 0 31px; border-top:1px solid var(--line); color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; }.site-footer p { margin:0; }.site-footer a span { color:var(--ink); font-size:14px; }
@media (min-width:900px) { .projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:620px) { .container { width:min(100% - 36px,1152px); }.site-header { padding-block:20px; }.header-actions { gap:13px; }.header-actions nav { gap:12px; }.header-actions nav a { font-size:10px; }.intro { padding-block:83px 88px; } h1 { font-size:clamp(46px,13vw,70px); }.section-heading { display:block; }.section-heading p { margin-top:8px; }.projects-grid { grid-template-columns:1fr; gap:34px; }.project-description { min-height:auto; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }