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

:root { --ink:#f8f3ed; --muted:#b8ada5; --bg:#161317; --panel:#221c22; --line:rgba(248,243,237,.16); --coral:#e57373; --mint:#9bd3bd; --yellow:#f6d76a; --blue:#83bde7; --max:1180px }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; color:var(--ink); background:var(--bg); font:15px/1.55 Manrope,sans-serif; overflow-x:hidden }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(120deg,transparent 0 130px,rgba(255,255,255,.018) 131px 132px) }
a { color:inherit; text-decoration:none }
.wrap { width:min(calc(100% - 48px),var(--max)); margin:auto }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); width:min(calc(100% - 48px),var(--max)); margin:auto; position:relative; z-index:3 }
.brand { display:flex; align-items:center; gap:12px; font:700 20px 'Space Grotesk',sans-serif; letter-spacing:.08em }.brand img { width:38px; height:38px; object-fit:contain }.brand em { color:var(--coral); font-style:normal }
.site-nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:13px }.site-nav a:hover { color:var(--ink) }.nav-cta { border:1px solid var(--line); padding:10px 15px; color:var(--ink); border-radius:3px }.nav-cta span { color:var(--yellow); margin-left:7px }
.hero { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; padding:92px 0 120px }.eyebrow { color:var(--yellow); font:11px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; margin:0 0 21px }.eyebrow i { display:inline-block; width:7px; height:7px; background:var(--coral); border-radius:50%; margin-right:9px; box-shadow:0 0 14px var(--coral) }
h1,h2,h3 { font-family:'Space Grotesk',sans-serif; line-height:.95; letter-spacing:-.03em }h1 { font-size:clamp(62px,8vw,112px); margin:0 0 28px }h1 em,h2 em { color:var(--mint); font-style:normal }.lede { color:var(--muted); font-size:17px; max-width:485px }.hero-actions { display:flex; align-items:center; gap:25px; margin-top:35px }.button { background:var(--coral); color:#261517; padding:14px 19px; border-radius:3px; font-weight:700; font-size:13px }.button span,.text-link span { color:var(--yellow); margin-left:8px }.text-link { border-bottom:1px solid var(--line); padding-bottom:4px; font-size:13px }.hero-meta { display:flex; gap:18px; flex-wrap:wrap; margin-top:58px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase }.hero-meta b { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--mint); margin:0 6px 1px 0 }
.hero-art { position:relative; isolation:isolate }.hero-art:after { content:''; position:absolute; inset:-8% 5% -8% 6%; background:var(--blue); opacity:.16; z-index:-1; transform:skewY(-5deg) }.hero-art img { display:block; width:100%; box-shadow:18px 18px 0 rgba(229,115,115,.14) }.art-note { position:absolute; right:-25px; top:-37px; width:126px; height:126px; padding:14px; background:var(--yellow); color:#231a1b; transform:rotate(5deg); font:10px 'DM Mono',monospace }.art-note strong { display:block; font:700 46px 'Space Grotesk'; line-height:1; margin-top:7px }.art-note small { display:block; margin-top:10px }
.intro { padding:100px 0 135px; max-width:850px }.intro h2,.projects h2 { font-size:clamp(42px,5vw,70px); margin:0 0 24px }.intro p:last-child { color:var(--muted); max-width:640px; font-size:17px }
.projects { padding-bottom:145px }.section-top { display:flex; justify-content:space-between; align-items:end; margin-bottom:50px }.section-top p { color:var(--muted); max-width:280px; margin:0 }.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }.project-card { background:var(--panel); border-top:3px solid var(--coral); padding:19px; transition:transform .3s,background .3s }.project-card:hover { transform:translateY(-7px); background:#2b2229 }.project-card.simple { border-color:var(--mint) }.project-card.play { border-color:var(--yellow) }.project-card img { width:100%; aspect-ratio:1.8; object-fit:cover; display:block; margin:18px 0 22px; filter:saturate(1.08) }.project-meta { display:flex; justify-content:space-between; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase }.project-card h3 { font-size:27px; margin:0 0 10px }.project-card h3 span { color:var(--coral) }.project-card p { color:var(--muted); font-size:14px; min-height:112px }.card-link { display:inline-block; color:var(--yellow); font:11px 'DM Mono',monospace; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:4px }
.garden { background:var(--mint); color:#17221e; transform:skewY(-2deg); margin:0 -2%; padding:92px 0 }.garden-inner { transform:skewY(2deg); display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }.garden .eyebrow { color:#356451 }.garden h2 { font-size:clamp(42px,5vw,68px); margin:0 }.garden h2 em { color:var(--coral) }.garden p { color:#356451; max-width:440px }.garden-link { display:inline-block; margin-top:18px; color:#17221e; border-bottom:1px solid rgba(23,34,30,.4); padding-bottom:5px; font-weight:700 }.garden-mark { justify-self:end; width:min(100%,390px); border:1px solid rgba(23,34,30,.35); padding:28px; font:12px 'DM Mono',monospace }.garden-mark strong { display:block; font:700 clamp(50px,7vw,90px) 'Space Grotesk'; line-height:.9; margin-bottom:13px }.garden-mark span { color:#356451 }
.closing { text-align:center; padding:145px 0 125px }.closing img { width:58px; margin-bottom:24px }.closing h2 { font-size:clamp(48px,7vw,88px); margin:0 0 34px }.site-footer { border-top:1px solid var(--line); padding:23px 0 30px; display:flex; justify-content:space-between; color:var(--muted); font:11px 'DM Mono',monospace }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease }.reveal.visible { opacity:1; transform:none }.delay-1 { transition-delay:.12s }.delay-2 { transition-delay:.24s }
@media (max-width:760px) { .wrap { width:min(calc(100% - 30px),var(--max)) }.site-header { width:calc(100% - 30px); height:70px }.site-nav { gap:13px; font-size:11px }.site-nav a:not(.nav-cta) { display:none }.nav-cta { padding:8px 10px }.hero { display:block; padding:70px 0 105px }.hero-copy { margin-bottom:77px }h1 { font-size:clamp(57px,16vw,82px) }.lede { font-size:15px }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px }.hero-meta { margin-top:40px; gap:9px 14px }.art-note { right:-3px; top:-27px; transform:scale(.82) rotate(5deg); transform-origin:top right }.intro { padding:75px 0 95px }.section-top { display:block; margin-bottom:30px }.section-top p { margin-top:20px }.projects { padding-bottom:100px }.project-grid { grid-template-columns:1fr }.project-card p { min-height:0 }.garden { padding:70px 0 }.garden-inner { display:block }.garden-mark { margin-top:38px }.closing { padding:105px 0 95px }.site-footer { flex-wrap:wrap; gap:12px }.site-footer span:nth-child(2) { width:100%; order:3 } }