:root{--bg:#f7f4ee;--ink:#1a1714;--mid:#6e6560;--dim:#bdb5ae;--accent:#b33a28;--rule:#ddd8d0;--fd:"Fraunces", Georgia, serif;--fm:"DM Mono", "Courier New", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--fm);-webkit-font-smoothing:antialiased;min-height:100dvh;font-size:12px;line-height:1.75}a{color:inherit;text-decoration:none}.page{max-width:680px;margin:0 auto;padding:3.5rem 2rem 8rem}.nav{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:baseline;margin-bottom:5rem;padding-bottom:1.5rem;animation:.5s both rise;display:flex}.nav-mark{letter-spacing:.1em;color:var(--mid);font-size:.72rem}.nav-domain{letter-spacing:.06em;color:var(--dim);font-size:.6rem}.hero{margin-bottom:0;animation:.5s 70ms both rise}.hero-name{font-family:var(--fd);letter-spacing:-.025em;font-optical-sizing:auto;font-variation-settings:"opsz" 144, "WONK" 1;color:var(--ink);margin-bottom:2.5rem;font-size:clamp(4.75rem,17vw,9rem);font-style:italic;font-weight:700;line-height:.88}.hero-sub{letter-spacing:.13em;text-transform:uppercase;color:var(--mid);flex-wrap:wrap;align-items:center;row-gap:.25em;font-size:.62rem;display:flex}.hero-sep{color:var(--dim);padding:0 .65em;font-style:normal}.section{border-top:1px solid var(--rule);padding:2.75rem 0}.section-label{grid-template-columns:2.75rem 1fr;align-items:baseline;margin-bottom:1.75rem;display:grid}.section-num{letter-spacing:.1em;color:var(--dim);font-size:.5rem}.section-title{letter-spacing:.24em;text-transform:uppercase;color:var(--mid);font-size:.5rem}.about{color:var(--mid);max-width:54ch;font-size:.79rem;line-height:1.95}.entry{border-bottom:1px solid var(--rule);grid-template-columns:1fr auto;align-items:start;gap:.1rem 1.5rem;padding:1rem 0;transition:opacity .12s;display:grid}.entry:last-child{border-bottom:none}.entry:hover{opacity:.65}.entry-company{color:var(--ink);flex-wrap:wrap;align-items:baseline;gap:.65rem;font-size:.8rem;display:flex}.entry-badge{letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent);flex-shrink:0;padding:.1em .4em;font-size:.45rem;line-height:1.8}.entry-role{font-family:var(--fd);font-optical-sizing:auto;font-variation-settings:"opsz" 18, "WONK" 0;color:var(--dim);margin-top:.1rem;font-size:.9rem;font-style:italic}.entry-dates{color:var(--dim);letter-spacing:.06em;white-space:nowrap;padding-top:.25rem;font-size:.55rem}.project{border-bottom:1px solid var(--rule);cursor:pointer;grid-template-columns:2rem 1fr auto;align-items:baseline;gap:0 1rem;padding:.9rem 0;display:grid}.project:last-child{border-bottom:none}.project-idx{color:var(--dim);letter-spacing:.05em;font-size:.5rem;transition:color .12s}.project-name{color:var(--ink);font-size:.8rem;transition:color .12s}.project-desc{font-family:var(--fd);font-optical-sizing:auto;font-variation-settings:"opsz" 14, "WONK" 0;color:var(--dim);text-align:right;font-size:.85rem;font-style:italic}.project:hover .project-name,.project:hover .project-idx{color:var(--accent)}.connect{flex-direction:column;gap:.9rem;display:flex}.connect-row{grid-template-columns:4.5rem 1fr;align-items:baseline;gap:1rem;display:grid}.connect-key{letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-size:.5rem}.connect-val{color:var(--mid);font-size:.73rem;transition:color .12s}.connect-val:hover{color:var(--accent)}.footer{border-top:1px solid var(--rule);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);justify-content:space-between;margin-top:4rem;padding-top:1.25rem;font-size:.5rem;animation:.5s .42s both rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.section:first-of-type{animation:.5s .13s both rise}.section:nth-of-type(2){animation:.5s .2s both rise}.section:nth-of-type(3){animation:.5s .27s both rise}.section:nth-of-type(4){animation:.5s .34s both rise}@media (width<=520px){.project{grid-template-columns:1.5rem 1fr}.project-desc{display:none}.entry{grid-template-columns:1fr}.entry-dates{display:none}.connect-row{grid-template-columns:3.5rem 1fr}}@media (width<=360px){.hero-name{letter-spacing:-.03em}}
