:root { --ink:#1b1a18; --paper:#f4f0e8; --orange:#ec5a32; --yellow:#f2c94c; --line:rgba(27,26,24,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
.grain { position:fixed; inset:0; opacity:.09; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.site-header { height:82px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:6; }
.brand { font-family:'DM Mono',monospace; color:var(--ink); text-decoration:none; font-size:20px; font-weight:500; letter-spacing:-.1em; }.brand span { color:var(--orange); }
nav { display:flex; gap:32px; margin-left:70px; } nav a,.header-contact { color:var(--ink); font:500 12px 'DM Mono',monospace; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; } nav a:hover,.text-link:hover,.contact-footer a:hover { color:var(--orange); }.header-contact span { color:var(--orange); font-size:18px; }
.hero { min-height:calc(100vh - 82px); padding:7.7vw 5vw 2.3vw; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { font:500 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; margin:0; display:flex; align-items:center; gap:9px; }.eyebrow span { width:7px; height:7px; background:var(--orange); border-radius:50%; display:inline-block; }
.hero-grid { display:grid; grid-template-columns:2.2fr .8fr; align-items:end; gap:30px; margin:11vh 0 6vh; }.hero h1 { font-size:clamp(50px,7.2vw,116px); letter-spacing:-.075em; line-height:.98; margin:0; font-weight:700; }.hero h1 em,.contact h2 em,.about-statement em { font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.07em; }
.hero-aside { max-width:290px; justify-self:end; }.hero-aside p,.about-copy p { font-size:15px; line-height:1.65; margin:0 0 30px; }.circle-link { width:57px; height:57px; border:1px solid var(--ink); border-radius:50%; display:grid; place-items:center; color:var(--ink); text-decoration:none; font-size:22px; transition:.25s; }.circle-link:hover { background:var(--ink); color:var(--paper); transform:translateY(4px); }.hero-footer { border-top:1px solid var(--line); padding-top:15px; display:flex; justify-content:space-between; font:11px 'DM Mono',monospace; text-transform:uppercase; }
.marquee { overflow:hidden; white-space:nowrap; background:var(--orange); color:var(--paper); padding:17px 0 14px; font:600 27px 'DM Mono',monospace; letter-spacing:-.07em; }.marquee div { width:max-content; animation:scroll 22s linear infinite; }.marquee i { color:var(--yellow); font-style:normal; padding:0 20px; } @keyframes scroll { to { transform:translateX(-50%); } }
.section { padding:130px 5vw; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:64px; }.muted { font-size:14px; margin:0; color:#716e67; }.projects { display:grid; grid-template-columns:1fr 1fr; gap:80px 28px; }.project-large { grid-column:span 2; }.project-image { display:block; height:31vw; min-height:340px; position:relative; overflow:hidden; text-decoration:none; }.project-large .project-image { height:43vw; }.image-one { background:#e7e1d5; display:grid; place-items:center; }.project-mark { font:italic 33vw 'Playfair Display',serif; color:#172d2b; line-height:1; transform:translateY(5%); }.image-two { background:#c5a3e8; }.luma-shape { position:absolute; height:145%; width:65%; background:#ff6438; border-radius:50% 50% 0 0; bottom:-52%; left:18%; transform:rotate(29deg); box-shadow:35px -8px 0 #f6d24e; }.image-three { background:#232b64; display:flex; align-items:center; justify-content:center; }.form-word { font-size:clamp(47px,9vw,140px); color:#f9e9a8; font-weight:800; letter-spacing:-.1em; transform:rotate(-10deg); }.image-label { position:absolute; bottom:18px; left:18px; color:#fff; font:10px 'DM Mono',monospace; letter-spacing:.08em; }.image-one .image-label { color:var(--ink); }.project-info { display:flex; justify-content:space-between; padding-top:17px; border-top:1px solid var(--line); }.project-info h2 { font-size:20px; margin:0 0 4px; letter-spacing:-.045em; }.project-info p,.project-info>span { font:11px 'DM Mono',monospace; margin:0; color:#716e67; }.project-image { transition:transform .35s ease; }.project:hover .project-image { transform:scale(.985); }
.about { background:var(--ink); color:var(--paper); }.about-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:8vw; padding-top:55px; }.about-statement { font-size:clamp(32px,4.3vw,68px); line-height:1.05; letter-spacing:-.065em; margin:0; }.about-copy { padding-top:6px; max-width:390px; }.text-link { color:inherit; font:500 12px 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:5px; }.text-link span { color:var(--orange); font-size:17px; margin-left:8px; }
.experience { padding-bottom:150px; }.roles { border-top:1px solid var(--line); }.role { display:grid; grid-template-columns:1fr 2fr 1fr auto; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding:25px 0; transition:.25s; }.role:hover { padding-left:14px; background:rgba(236,90,50,.06); }.role p { font:11px 'DM Mono',monospace; margin:0; color:#716e67; }.role h3 { margin:0; font-size:18px; letter-spacing:-.04em; }.role span { color:var(--orange); font-size:20px; }
.contact { background:var(--yellow); padding:110px 5vw 24px; min-height:600px; display:flex; flex-direction:column; }.contact h2 { font-size:clamp(43px,6.4vw,100px); letter-spacing:-.075em; line-height:1; margin:9vh 0 43px; }.email { align-self:flex-start; font-size:clamp(18px,2.2vw,32px); color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:7px; letter-spacing:-.04em; }.email span { color:var(--orange); }.contact-footer { margin-top:auto; border-top:1px solid rgba(27,26,24,.35); padding-top:17px; display:flex; justify-content:space-between; align-items:center; font:10px 'DM Mono',monospace; text-transform:uppercase; }.contact-footer p { margin:0; }.contact-footer div { display:flex; gap:22px; }.contact-footer a { color:var(--ink); text-decoration:none; }
@media (max-width:700px) { .site-header { height:65px; padding:0 20px; } nav { display:none; }.header-contact { font-size:10px; }.hero { min-height:calc(100vh - 65px); padding:42px 20px 20px; }.hero-grid { grid-template-columns:1fr; margin:75px 0 35px; gap:32px; }.hero h1 { font-size:clamp(49px,13.5vw,78px); }.hero-aside { justify-self:start; }.hero-aside p { font-size:14px; }.hero-footer { font-size:9px; }.marquee { font-size:21px; }.section { padding:75px 20px; }.section-heading { margin-bottom:40px; }.muted { display:none; }.projects { grid-template-columns:1fr; gap:52px; }.project-large { grid-column:auto; }.project-image,.project-large .project-image { height:77vw; min-height:0; }.project-mark { font-size:58vw; }.about-grid { grid-template-columns:1fr; gap:35px; padding-top:37px; }.about-statement { font-size:38px; }.about-copy { max-width:100%; }.role { grid-template-columns:1fr auto; gap:8px; padding:20px 0; }.role h3 { grid-row:2; font-size:16px; }.role p:nth-of-type(2) { grid-row:2; text-align:right; }.role span { display:none; }.contact { min-height:510px; padding:70px 20px 18px; }.contact h2 { margin:72px 0 34px; font-size:47px; }.contact-footer { font-size:9px; }.contact-footer div { gap:12px; }.contact-footer p:last-child { display:none; } }