:root { --ink:#172022; --paper:#f2eee5; --acid:#d9ff3f; --blue:#6b74ec; --rose:#f19a82; --line:rgba(23,32,34,.24); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; line-height:1.45; } a { color:inherit; } .skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; padding:.7rem; background:var(--acid); z-index:10; }
.topbar { height:82px; display:flex; gap:24px; align-items:center; padding:0 clamp(22px,4vw,64px); border-bottom:1px solid var(--line); } .brand-lockup { display:inline-flex; align-items:center; gap:13px; min-width:max-content; text-decoration:none; }.brand-mark { font:600 33px/.8 Fraunces,Georgia,serif; letter-spacing:-.19em; padding-right:7px; }.brand-name { font:600 13px/1 Inter,Arial,sans-serif; letter-spacing:.02em; }.brand-lockup:hover .brand-name { text-decoration:underline; text-underline-offset:5px; }.eyebrow,.section-kicker,.project-type,.status,footer { font-family:"DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; font-size:11px; } nav { display:flex; gap:clamp(14px,3vw,38px); margin-left:auto; } nav a { text-decoration:none; font-size:14px; } nav a:hover,.arrow-link:hover,.project-copy a:hover { text-decoration-thickness:2px; }
.hero { min-height:calc(100vh - 82px); padding:clamp(34px,7vw,112px) clamp(22px,8vw,132px) 44px; display:flex; flex-direction:column; position:relative; overflow:hidden; border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 clamp(36px,8vh,94px); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Fraunces,Georgia,serif; font-weight:600; line-height:.94; letter-spacing:-.045em; } h1 { font-size:clamp(58px,10.2vw,166px); max-width:1100px; margin:0; position:relative; z-index:1; } h1 em { font-weight:400; } .hero-bottom { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-top:auto; padding-top:70px; position:relative; z-index:1; } .hero-bottom p { max-width:430px; font-size:16px; margin:0; } .arrow-link { font-family:"DM Mono",monospace; font-size:12px; text-underline-offset:5px; white-space:nowrap; } .arrow-link span { font-size:22px; margin-left:8px; } .hero-shape { position:absolute; width:380px; height:380px; border:1px solid var(--ink); border-radius:50%; right:9%; top:22%; opacity:.8; animation:orbit-drift 72s linear infinite; } .hero-shape:before,.hero-shape:after { content:""; position:absolute; border:1px solid var(--ink); border-radius:50%; inset:28px; } .hero-shape:after { inset:75px; } .hero-shape i { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--acid); } .hero-shape i:nth-child(1){top:2%;left:48%}.hero-shape i:nth-child(2){right:4%;top:49%;background:var(--rose)}.hero-shape i:nth-child(3){bottom:9%;left:20%;background:var(--blue)}.hero-shape i:nth-child(4){top:26%;left:7%;background:var(--ink)}.hero-shape i:nth-child(5){bottom:26%;right:16%;background:var(--acid)}@keyframes orbit-drift{to{transform:rotate(360deg)}}
.manifesto { background:var(--ink); color:var(--paper); padding:clamp(72px,11vw,160px) clamp(22px,16vw,258px); } .section-kicker { margin-bottom:42px; } .large-copy { font-family:Fraunces,Georgia,serif; letter-spacing:-.035em; font-size:clamp(30px,4vw,61px); line-height:1.04; max-width:1000px; } .small-copy { border-left:1px solid var(--acid); padding-left:20px; max-width:480px; margin:48px 0 0 auto; color:#d5d7d0; font-size:15px; }
.work { padding:clamp(72px,11vw,150px) clamp(22px,8vw,132px); } .work-intro { display:grid; grid-template-columns:1fr 2fr 1.15fr; gap:32px; align-items:start; border-bottom:1px solid var(--line); padding-bottom:56px; } .work-intro h2,.about h2 { font-size:clamp(44px,5.5vw,82px); margin:0; } .work-intro > p:last-child { margin:12px 0 0; font-size:15px; max-width:320px; }.projects { display:grid; grid-template-columns:repeat(2,1fr); } .project { border-bottom:1px solid var(--line); min-height:540px; padding:32px 0; display:grid; grid-template-rows:1fr auto; } .project:nth-child(odd) { border-right:1px solid var(--line); padding-right:clamp(22px,5vw,76px); } .project:nth-child(even) { padding-left:clamp(22px,5vw,76px); }.project-art { min-height:295px; position:relative; overflow:hidden; }.project-copy { padding-top:24px; }.project-type { color:#485052; margin-bottom:16px; }.project h3 { font-size:clamp(34px,3.4vw,52px); margin-bottom:16px; }.project-copy > p:not(.project-type) { max-width:420px; font-size:15px; }.project-copy a { font-family:"DM Mono",monospace; text-underline-offset:5px; font-size:12px; }.status { display:inline-block; padding:7px 9px; border:1px solid var(--line); border-radius:20px; }.bad-mentors { background:var(--rose); display:flex; align-items:center; justify-content:center; font-family:Fraunces,serif; font-size:clamp(82px,11vw,160px); letter-spacing:-.12em; padding-right:.15em; }.bad-mentors:before {content:"";height:80%;width:62%;border:2px solid var(--ink);border-radius:50%;position:absolute;transform:rotate(25deg);}.bad-mentors i { position:absolute; height:150%; width:2px; background:var(--ink); transform:rotate(35deg); }.bad-mentors i:nth-of-type(2){transform:rotate(-35deg)}.bad-mentors i:nth-of-type(3){height:200%;transform:rotate(90deg)}.basement { background:var(--blue); color:var(--paper); padding:20px; display:flex; flex-direction:column; justify-content:space-between; }.basement span { font-family:"DM Mono",monospace; font-size:12px; }.basement b {font-family:Fraunces,serif;font-size:clamp(48px,6.2vw,92px);line-height:.78;letter-spacing:-.07em;}.mindframe { background:#c8d1d0; display:flex; align-items:center; justify-content:center; font-family:"DM Mono",monospace; font-size:clamp(38px,5vw,72px); line-height:.83; text-align:center; }.mindframe i { position:absolute; border:1px solid var(--ink); border-radius:50%; width:68%; aspect-ratio:1; }.mindframe i:nth-of-type(2){width:42%}.mindframe i:nth-of-type(3){width:14%;background:var(--acid);}.systems { background:var(--acid); display:grid; grid-template-columns:1fr 1fr; align-content:center; justify-items:center; gap:22px; font-family:Fraunces,serif; font-size:clamp(54px,7vw,104px); }.systems span { line-height:.7; }
.about { background:var(--rose); padding:clamp(72px,11vw,150px) clamp(22px,8vw,132px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,12vw,190px); }.about-copy { max-width:495px; padding-top:62px; }.about-copy p { font-size:clamp(17px,1.55vw,22px); }.button { background:var(--ink); color:var(--paper); display:inline-flex; gap:24px; margin-top:22px; padding:14px 17px; font-family:"DM Mono",monospace; font-size:12px; text-decoration:none; }.button:hover { background:var(--paper); color:var(--ink); } footer { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:114px; padding:22px clamp(22px,4vw,64px); background:var(--ink); color:var(--paper); } footer p { margin:0; } .footer-mark { font-family:Fraunces,serif; font-size:34px; letter-spacing:-.17em; padding-right:8px; text-decoration:none; }
@media (max-width:720px) { .topbar { height:auto; min-height:108px; flex-wrap:wrap; gap:12px 20px; padding-top:16px; padding-bottom:13px; } nav { width:100%; margin-left:0; justify-content:space-between; }.brand-name { font-size:12px; }.hero { min-height:calc(100vh - 108px); }.hero-shape { width:230px;height:230px;right:-54px;top:18%;opacity:.45; }.hero-bottom,.work-intro,.about { display:block; }.hero-bottom { margin-top:120px; }.hero-bottom .arrow-link { display:inline-block;margin-top:32px; }.work-intro > p:last-child { margin-top:28px; }.projects { display:block; }.project,.project:nth-child(odd),.project:nth-child(even) { border-right:0; padding:32px 0; min-height:0; }.project-art { min-height:260px; }.about-copy { padding-top:40px; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-shape{animation:none;} }
.homepage .manifesto,.homepage .work,.homepage .about { display:none; }.routes { padding:clamp(72px,10vw,145px) clamp(22px,8vw,132px); display:grid; grid-template-columns:.76fr 1.24fr; gap:clamp(30px,6vw,100px); }.routes h2 { font-size:clamp(46px,5.5vw,82px); margin:0; }.portrait { margin:0; grid-row:span 2; max-width:430px; }.portrait img { width:100%; aspect-ratio:9/16; object-fit:cover; object-position:center; display:block; filter:contrast(1.05) saturate(.8); }.portrait figcaption { margin-top:8px; font:11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }.route-list { border-top:1px solid var(--line); align-self:start; }.route-list a { display:grid; grid-template-columns:45px 1fr; column-gap:18px; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; }.route-list span { font:11px "DM Mono",monospace; padding-top:4px; }.route-list b { font:600 clamp(26px,3vw,42px)/1 Fraunces,serif; letter-spacing:-.04em; }.route-list i { grid-column:2; font-style:normal; color:#4a5153; font-size:14px; margin-top:8px; }.route-list a:hover b { text-decoration:underline; text-underline-offset:5px; }
.technical-hero { background:var(--blue); min-height:580px; padding:clamp(72px,11vw,160px) clamp(22px,8vw,132px); position:relative; overflow:hidden; }.technical-hero:after { content:"{}"; font-family:"DM Mono",monospace; font-size:min(45vw,600px); color:var(--acid); position:absolute; right:-.08em; bottom:-.37em; line-height:1; opacity:.92; }.technical-hero h1 { max-width:1150px; position:relative; z-index:1; }.technical-dek { font-size:clamp(17px,2vw,24px); max-width:560px; margin:60px 0 0; position:relative; z-index:1; }.technical-grid { padding:clamp(72px,10vw,150px) clamp(22px,8vw,132px); display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(48px,10vw,160px); }.technical-grid h2 { font-size:clamp(44px,5.5vw,82px); margin:0; }.link-list { border-top:1px solid var(--line); }.link-list>a,.pending-link { display:grid; grid-template-columns:45px 1fr; column-gap:18px; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; }.link-list span { font-family:"DM Mono",monospace; font-size:11px; padding-top:4px; }.link-list b { font:600 clamp(26px,3vw,42px)/1 Fraunces,serif; letter-spacing:-.04em; }.link-list i { grid-column:2; font-style:normal; color:#4a5153; font-size:14px; margin-top:8px; }.link-list>a:hover b { text-decoration:underline; text-underline-offset:5px; }.pending-link { opacity:.65; }.technical-note { padding:clamp(72px,10vw,140px) clamp(22px,20vw,300px); background:var(--ink); color:var(--paper); }.technical-note p { font:400 clamp(27px,4vw,58px)/1.05 Fraunces,serif; letter-spacing:-.04em; margin:0; }.technical-page footer { border-top:1px solid #4a5153; }
@media (max-width:720px) { .technical-hero { min-height:520px; }.technical-grid { display:block; }.link-list { margin-top:48px; } }
@media (max-width:720px) { .routes { display:flex; flex-direction:column; }.portrait { order:3; max-width:430px; }.route-list { width:100%; } }
.resume-hero { padding:clamp(72px,11vw,155px) clamp(22px,16vw,258px); background:#d4d8cf; min-height:590px; }.resume-hero h1 { margin:0; }.resume-hero>p:not(.eyebrow) { max-width:580px; font-size:clamp(18px,2vw,27px); margin:55px 0 0; }.resume-summary { display:grid; grid-template-columns:.8fr 1.3fr; gap:clamp(40px,12vw,190px); padding:clamp(72px,10vw,145px) clamp(22px,16vw,258px); }.resume-summary>p:not(.section-kicker) { max-width:640px; font:400 clamp(24px,3vw,43px)/1.12 Fraunces,serif; letter-spacing:-.035em; margin:0; }.resume-summary>p:last-child { font:400 16px/1.6 Inter,sans-serif; letter-spacing:0; margin-top:22px; }.resume-page footer { border-top:1px solid #4a5153; } @media (max-width:720px) { .resume-summary { display:block; }.resume-summary>p:not(.section-kicker) { margin-top:35px; } }
.brand-mark,h1,h2,h3,.large-copy,.bad-mentors,.basement b,.systems,.footer-mark,.route-list b,.link-list b,.technical-note p,.resume-summary>p:not(.section-kicker){font-family:Newsreader,Georgia,serif!important;}
.contact-hero{min-height:560px;padding:clamp(72px,11vw,155px) clamp(22px,16vw,258px);background:var(--acid)}.contact-hero h1{margin:0}.contact-hero>p:not(.eyebrow){max-width:580px;margin:55px 0 0;font-size:clamp(18px,2vw,27px)}.contact-note{padding:clamp(72px,10vw,145px) clamp(22px,28vw,420px);background:var(--ink);color:var(--paper)}.contact-note>p:not(.section-kicker){font:400 clamp(27px,3.5vw,52px)/1.08 Newsreader,Georgia,serif;letter-spacing:-.04em;margin:0}