@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Mono&display=swap');

:root { --paper:#ffffff; --ink:#25211f; --muted:#817a72; --line:#d6d0c8; --surface:#ebe6de; --serif:"Cormorant Garamond", Georgia, serif; --sans:"DM Mono", ui-monospace, monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
h1, h2, h3, p, a, .eyebrow, .project-meta span { animation: text-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.contact-block a:first-child, .organization p:first-child { animation-delay:.05s; }
.contact-block a:last-child, .organization p:last-child { animation-delay:.12s; }
.identity h1 { animation-delay:.2s; }
.identity .role { animation-delay:.3s; }
.location { animation-name:location-rise; animation-delay:.4s; }
.section-heading > * { animation-delay:.08s; }
.project:nth-child(1) .project-meta, .project:nth-child(1) h3, .project:nth-child(1) p { animation-delay:.12s; }
.project:nth-child(2) .project-meta, .project:nth-child(2) h3, .project:nth-child(2) p { animation-delay:.2s; }
@keyframes text-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes location-rise { from { opacity:0; transform:translate(-50%, 14px); } to { opacity:1; transform:translate(-50%, 0); } }
main, footer { width:min(100% - 144px, 1440px); margin:auto; }
.hero { position:relative; min-height:100vh; min-height:100svh; }
.contact-block { position:absolute; top:75px; left:0; display:flex; flex-direction:column; align-items:flex-start; font-size:clamp(29px, 3.45vw, 43px); line-height:1.05; }
.contact-block a { border-bottom:1px solid transparent; }
.contact-block a:hover { border-color:currentColor; }
.organization { position:absolute; top:75px; right:0; text-align:right; font-size:clamp(29px, 3.45vw, 43px); line-height:1.05; }
.organization p { margin:0; }
.identity { position:absolute; top:50%; left:50%; width:max-content; max-width:100%; transform:translate(-50%, -52%); text-align:center; }
.location { position:absolute; bottom:100px; left:50%; width:max-content; max-width:100%; transform:translateX(-50%); margin:0; text-align:center; font-size:clamp(28px, 3.05vw, 40px); line-height:1.05; }
.eyebrow, .project-meta { margin:0; font-family:var(--sans); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:0 0 10px; font-size:clamp(56px, 6.7vw, 88px); font-weight:500; letter-spacing:-.045em; line-height:.86; }
.role { margin:0; font-size:clamp(34px, 4vw, 52px); line-height:1; }
.work { border-top:1px solid var(--line); padding:24px 0 132px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:48px; }
h2 { margin:0; font-size:clamp(27px, 3.5vw, 48px); font-weight:400; letter-spacing:-.045em; }
.project-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(32px, 5vw, 84px); }
.project-link { display:block; }
figure { aspect-ratio:16 / 10; margin:0 0 16px; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
img { display:block; width:100%; height:100%; object-fit:cover; }
.project-meta { display:flex; justify-content:space-between; margin-bottom:12px; }
h3 { margin-bottom:7px; font-size:clamp(27px, 3vw, 42px); font-weight:500; letter-spacing:-.05em; }
.project .project-stack { margin:0 0 12px; font-family:var(--sans); font-size:14px; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; color:var(--muted); }
.project p { max-width:34rem; margin:0; font-size:18px; line-height:1.42; }
.project-link:hover figure { outline:1px solid var(--ink); outline-offset:5px; }
.project-link:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.stack-section, .leetcode-section { border-top:1px solid var(--line); padding:24px 0 132px; }
.stack-groups { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:340px; gap:clamp(24px, 3vw, 42px); }
.stack-group { border:1px solid var(--line); }
.stack-group > .eyebrow { margin:0; padding:13px 15px; border-bottom:1px solid var(--line); }
.stack-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-content:start; margin:0; padding:0; list-style:none; }
.stack-grid li { min-height:66px; display:flex; align-items:center; gap:12px; padding:15px; font-size:clamp(19px, 1.8vw, 24px); line-height:1; }
.stack-grid img { width:25px; height:25px; flex:0 0 auto; }
.tracker-heading { margin-bottom:30px; }
.tracker-profile { font-family:var(--serif); font-size:clamp(20px, 2.15vw, 30px); font-weight:400; letter-spacing:-.035em; line-height:1; border-bottom:1px solid var(--ink); }
.tracker-summary { padding:28px 0 30px; display:grid; grid-template-columns:1.15fr 1.85fr; gap:36px; }
.tracker-total span { display:block; font-size:clamp(72px, 10vw, 148px); font-weight:500; letter-spacing:-.07em; line-height:.72; }
.tracker-total p, .difficulty-totals dt { margin:16px 0 0; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.difficulty-totals { display:grid; grid-template-columns:repeat(3,1fr); margin:0; align-self:end; }
.difficulty-totals div { padding:0 20px; border-left:1px solid var(--line); }
.difficulty-totals dd { margin:8px 0 0; font-size:clamp(40px, 5vw, 66px); line-height:.9; letter-spacing:-.05em; }
footer { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; padding:22px 0 34px; font-family:var(--sans); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
footer p { margin:0; }
footer a { justify-self:center; color:var(--ink); border-bottom:1px solid var(--ink); }
footer p:last-child { text-align:right; }
@media (max-width:700px) { main, footer { width:min(100% - 40px, 1440px); } .hero { min-height:720px; } .contact-block, .organization { top:30px; font-size:clamp(21px, 7vw, 29px); } .identity { width:100%; transform:translate(-50%, -50%); } .location { bottom:52px; font-size:clamp(22px, 7vw, 31px); } .work, .stack-section, .leetcode-section { padding-bottom:80px; } .section-heading { margin-bottom:30px; } .project-grid { grid-template-columns:1fr; gap:54px; } .project p { font-size:16px; } .stack-groups { grid-template-columns:1fr; grid-auto-rows:auto; gap:22px; } .stack-grid li { min-height:62px; padding:14px; font-size:20px; } .tracker-summary { grid-template-columns:1fr; gap:32px; } .difficulty-totals div { padding:0 10px; } footer { grid-template-columns:1fr; gap:12px; } footer a { justify-self:start; } footer p:last-child { text-align:left; } }
@media (max-width:390px) { h1 { font-size:48px; } .role { font-size:31px; } .hero { min-height:650px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }