:root { --ink:#121212; --paper:#f2f0ea; --acid:#d9ff36; --line:rgba(18,18,18,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; z-index:10; opacity:.075; pointer-events:none; 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='.6'/%3E%3C/svg%3E"); }
.topbar { height:88px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:36px; padding:0 3.5vw; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.wordmark { font-weight:800; letter-spacing:-.11em; font-size:25px; width:max-content; }.wordmark span { color:#f33d27; }
.location,.eyebrow,.menu-toggle,.site-nav,.hero-meta,.project-number,.project-type,.contact-footer { font:11px/1.35 'DM Mono',monospace; letter-spacing:.04em; }
.location { margin:0; text-align:right; }.location span { color:rgba(18,18,18,.58); }
.menu-toggle { padding:0; border:0; background:none; cursor:pointer; }.menu-toggle span { margin-left:6px; font-size:15px; }
.site-nav { position:absolute; right:3.5vw; top:67px; display:grid; gap:5px; padding:14px; background:var(--ink); color:var(--paper); transform:translateY(-9px); pointer-events:none; opacity:0; transition:.25s ease; }.site-nav.open { transform:none; pointer-events:auto; opacity:1; }.site-nav a:hover { color:var(--acid); }
.hero { min-height:calc(100vh - 88px); padding:4.5vw 3.5vw 3vw; display:flex; flex-direction:column; position:relative; isolation:isolate; overflow:hidden; }
.hero-meta { position:relative; z-index:2; }.hero h1 { font-size:clamp(4.4rem,11.2vw,12.3rem); line-height:.78; letter-spacing:-.095em; margin:auto 0 3vw -0.07em; position:relative; z-index:2; font-weight:800; }.hero h1 em { font-family:Georgia,serif; font-size:1.05em; font-weight:400; letter-spacing:-.12em; }.move-line { display:inline-flex; gap:.12em; position:relative; overflow:visible; }.move-word { display:inline-block; position:relative; opacity:0; transform-origin:50% 75%; }.move-word::after { content:attr(data-echo); position:absolute; inset:0; color:#f33d27; z-index:-1; opacity:0; pointer-events:none; }.move-that { animation:that-arrives 1.05s cubic-bezier(.16,.85,.24,1) .22s forwards; }.move-move { animation:move-arrives 1.05s cubic-bezier(.16,.85,.24,1) .36s forwards; }.move-that::after { animation:echo-left 1.25s cubic-bezier(.16,.85,.24,1) .22s forwards; }.move-move::after { animation:echo-right 1.25s cubic-bezier(.16,.85,.24,1) .36s forwards; }.period { color:#f33d27; display:inline-block; animation:period-pop .42s cubic-bezier(.16,.85,.24,1) 1.22s backwards; }.hero-footer { display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; }.hero-footer p { font-size:15px; line-height:1.45; margin:0; font-weight:500; }.scroll-cue { font:11px 'DM Mono',monospace; letter-spacing:.02em; }.scroll-cue span { display:inline-block; font-size:18px; margin-left:8px; animation:jump 1.5s infinite; }
.orbital-system { position:absolute; inset:0; z-index:1; pointer-events:none; }.orbit { position:absolute; border-radius:50%; border:1px solid rgba(18,18,18,.32); }.orbit-one { width:min(62vw,800px); aspect-ratio:1; right:-9vw; top:15%; border-right-color:transparent; border-bottom-color:rgba(18,18,18,.48); animation:orbit-turn 18s linear infinite; }.orbit-two { width:min(43vw,550px); aspect-ratio:1; right:10vw; top:29%; border-color:rgba(18,18,18,.15); border-top-color:rgba(243,61,39,.72); animation:orbit-turn 11s linear infinite reverse; }.signal-origin { position:absolute; right:28vw; top:32%; width:13px; height:13px; animation:signal-drift 4.8s cubic-bezier(.45,0,.55,1) infinite; }.cursor-dot { position:absolute; inset:0; width:13px; height:13px; background:#f33d27; border-radius:50%; box-shadow:0 0 0 8px rgba(243,61,39,.14); }.signal-pulse { position:absolute; inset:50%; width:12px; height:12px; border:1px solid #f33d27; border-radius:50%; transform:translate(-50%,-50%) scale(.5); opacity:0; }.pulse-one { animation:signal-pulse 2.6s ease-out infinite; }.pulse-two { animation:signal-pulse 2.6s ease-out 1.3s infinite; }.orbit-tag,.orbit-readout { position:absolute; font:10px/1.2 'DM Mono',monospace; letter-spacing:.08em; }.orbit-tag { opacity:0; animation:label-in .7s ease 1.25s forwards; }.tag-one { right:4.4vw; top:18%; writing-mode:vertical-rl; }.tag-two { right:25.5vw; top:70%; color:#f33d27; }.orbit-readout { right:4vw; bottom:12%; display:grid; grid-template-columns:auto auto; gap:3px 12px; align-items:center; padding:10px 0; border-top:1px solid rgba(18,18,18,.38); border-bottom:1px solid rgba(18,18,18,.38); opacity:0; animation:label-in .7s ease 1.45s forwards; }.orbit-readout span:last-child { grid-column:1 / -1; color:rgba(18,18,18,.6); }.orbit-readout b { font:22px/1 Georgia,serif; font-weight:400; color:#f33d27; }
.statement { padding:12vw 12vw 13vw 28vw; border-top:1px solid var(--line); }.statement-copy { max-width:800px; font-size:clamp(2rem,4.7vw,5.3rem); line-height:1.05; letter-spacing:-.07em; margin:30px 0 0; font-weight:700; }.statement-copy i { font-family:Georgia,serif; font-weight:400; }
.work,.approach { padding:3.5vw; border-top:1px solid var(--line); }.section-heading { display:grid; grid-template-columns:25% 1fr; }.section-heading h2 { font-size:clamp(3.2rem,7vw,8rem); line-height:.84; margin:0; letter-spacing:-.085em; }.projects { margin-top:10vw; }.project { min-height:205px; display:grid; grid-template-columns:7% 35% 1fr 40px; align-items:center; border-top:1px solid var(--line); position:relative; overflow:hidden; transition:padding .4s ease,background .4s ease; }.project:last-child { border-bottom:1px solid var(--line); }.project:hover { background:var(--acid); padding:0 1.5vw; }.project-title { font-size:clamp(2rem,4vw,4.6rem); line-height:.82; font-weight:800; letter-spacing:-.08em; z-index:1; }.project-arrow { font-size:28px; text-align:right; z-index:1; }.project-mark { position:absolute; font-family:Georgia,serif; font-size:12rem; right:13%; top:50%; transform:translateY(-46%); opacity:0; transition:.35s ease; }.project:hover .project-mark { opacity:.14; }
.approach { background:var(--ink); color:var(--paper); }.approach-list { margin:10vw 0 0 25%; }.approach-list article { display:grid; grid-template-columns:8% 42% 1fr; align-items:baseline; padding:22px 0; border-top:1px solid rgba(242,240,234,.28); }.approach-list article:last-child { border-bottom:1px solid rgba(242,240,234,.28); }.approach-list span { font:11px 'DM Mono',monospace; }.approach-list h3 { margin:0; font-size:clamp(1.7rem,3vw,3.5rem); letter-spacing:-.07em; }.approach-list p { font-size:14px; line-height:1.5; margin:0; max-width:240px; }
.contact { min-height:92vh; padding:3.5vw; display:flex; flex-direction:column; background:var(--acid); }.contact h2 { margin:auto 0 7vw; max-width:1000px; font-size:clamp(3.5rem,9vw,10rem); line-height:.82; letter-spacing:-.095em; }.contact h2 a { text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:.1em; }.contact h2 span { font:35% 'DM Mono',monospace; vertical-align:top; margin-left:7px; }.contact-footer { padding-top:18px; border-top:1px solid rgba(18,18,18,.5); display:grid; grid-template-columns:auto auto 1fr; gap:30px; }.contact-footer p { margin:0 0 0 auto; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }
@keyframes jump { 50% { transform:translateY(5px); } }
@keyframes that-arrives { 0% { opacity:0; transform:translateX(-.72em) skewX(14deg); } 62% { opacity:1; transform:translateX(.06em) skewX(-2deg); } 100% { opacity:1; transform:translateX(0) skewX(0); } }
@keyframes move-arrives { 0% { opacity:0; transform:translateX(1em) scaleX(1.16); } 60% { opacity:1; transform:translateX(-.045em) scaleX(.98); } 100% { opacity:1; transform:translateX(0) scaleX(1); } }
@keyframes echo-left { 0% { opacity:0; transform:translateX(-.7em); } 20% { opacity:.85; } 100% { opacity:0; transform:translateX(.22em); } }
@keyframes echo-right { 0% { opacity:0; transform:translateX(.95em); } 20% { opacity:.85; } 100% { opacity:0; transform:translateX(-.18em); } }
@keyframes period-pop { 0% { opacity:0; transform:scale(0) rotate(-40deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes orbit-turn { to { rotate:360deg; } }
@keyframes signal-pulse { 0% { opacity:.8; transform:translate(-50%,-50%) scale(.5); } 100% { opacity:0; transform:translate(-50%,-50%) scale(7); } }
@keyframes signal-drift { 0%,100% { transform:translate(0,0); } 25% { transform:translate(28px,18px); } 50% { transform:translate(9px,46px); } 75% { transform:translate(-22px,28px); } }
@keyframes label-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.move-word,.move-word::after,.period,.scroll-cue span,.orbit,.signal-origin,.signal-pulse,.orbit-tag,.orbit-readout { animation:none; }.move-word { opacity:1; transform:none; }.move-word::after,.signal-pulse { opacity:0; }.orbit-tag,.orbit-readout { opacity:1; } }
@media (max-width:650px) { .topbar { height:70px; gap:16px; padding:0 20px; }.location { display:none; }.topbar { grid-template-columns:1fr auto; }.site-nav { right:20px; top:55px; }.hero { min-height:calc(100svh - 70px); padding:30px 20px 20px; }.hero h1 { font-size:19vw; margin:auto 0 35px -.07em; }.hero-footer p { font-size:12px; }.orbit-one { width:110vw; right:-34vw; top:21%; }.orbit-two { width:75vw; right:-6vw; top:35%; }.signal-origin { right:29vw; top:27%; }.tag-one { right:14px; top:14%; }.tag-two { right:13vw; top:63%; }.orbit-readout { right:20px; bottom:20%; font-size:8px; }.statement { padding:90px 20px; }.statement-copy { font-size:10.2vw; }.work,.approach,.contact { padding:25px 20px; }.section-heading { display:block; }.section-heading h2 { margin-top:25px; font-size:15vw; }.projects { margin-top:80px; }.project { min-height:155px; grid-template-columns:13% 1fr 26px; }.project-type { display:none; }.project-arrow { grid-column:3; grid-row:1; }.project-mark { font-size:9rem; right:18%; }.approach-list { margin:80px 0 0; }.approach-list article { grid-template-columns:12% 1fr; gap:5px; padding:20px 0; border-top:1px solid rgba(242,240,234,.28); }.approach-list p { grid-column:2; font-size:13px; margin-top:5px; }.contact { min-height:82svh; }.contact h2 { font-size:16vw; margin:auto 0 70px; }.contact-footer { grid-template-columns:1fr 1fr; gap:13px; }.contact-footer p { grid-column:1 / -1; margin:12px 0 0; } }