:root { --blue:#1238f2; --cyan:#09a9d6; --ink:#101010; --lime:#d9e0a1; --cream:#f6f2e9; --coral:#fa9363; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Space Grotesk",Arial,sans-serif; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:10; background:white; padding:.75rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:1.45rem 5vw; border-bottom:1px solid var(--ink); }
.wordmark { font-size:1.1rem; font-weight:700; letter-spacing:-.065em; text-decoration:none; } .wordmark span { color:var(--blue); }
.header-link { font-family:"DM Mono",monospace; font-size:.75rem; text-decoration:none; }
.hero { min-height:700px; display:grid; grid-template-columns:1.16fr .84fr; overflow:hidden; border-bottom:1px solid var(--ink); }
.hero-copy { padding:clamp(4rem,9vw,9rem) 5vw 5rem; align-self:center; }
.eyebrow,.project-number { margin:0 0 1rem; font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.055em; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.075em; line-height:.9; }
h1 { font-size:clamp(3.7rem,7.4vw,8rem); margin-bottom:2rem; } h1 em { font-family:Georgia,serif; font-weight:400; }
.intro { max-width:31rem; font-size:1.1rem; line-height:1.45; margin-bottom:2.3rem; }
.button { display:inline-flex; gap:2.2rem; align-items:center; padding:1rem 1.25rem; font-family:"DM Mono",monospace; font-size:.75rem; text-decoration:none; border:1px solid var(--ink); transition:transform .2s; } .button:hover { transform:translate(-3px,-3px); } .button-dark { background:var(--ink); color:white; box-shadow:4px 4px 0 var(--blue); } .button-light { background:var(--cream); box-shadow:4px 4px 0 var(--ink); }
.hero-art { position:relative; min-height:480px; overflow:hidden; background:var(--cyan); } .hero-art .sun { width:62%; aspect-ratio:1; position:absolute; border:clamp(8px,1.8vw,22px) solid var(--ink); background:var(--coral); border-radius:50%; right:-13%; top:11%; }
.shape { position:absolute; background:var(--blue); transform:rotate(-34deg); }.shape-one { width:105%; height:23%; bottom:16%; left:-36%; }.shape-two { width:95%; height:16%; bottom:-4%; left:12%; background:var(--lime); }.hero-art p { position:absolute; bottom:2rem; left:2rem; margin:0; font:500 .68rem/1.3 "DM Mono",monospace; }
.manifesto { padding:clamp(3.5rem,8vw,8.5rem) 14vw; background:var(--blue); color:white; text-align:center; }.manifesto p { font-size:clamp(2rem,4.3vw,4.7rem); letter-spacing:-.07em; line-height:.96; margin:0; }
.projects { padding:clamp(4rem,9vw,9rem) 5vw; }.section-heading { margin-bottom:3.5rem; }.section-heading h2,.support h2 { font-size:clamp(3rem,6vw,6.7rem); margin:0; }
.project { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,7vw,8rem); align-items:center; padding:clamp(3rem,7vw,6.5rem) 0; border-top:1px solid var(--ink); }.project > img { width:100%; aspect-ratio:1.25; object-fit:cover; }.project-copy h3 { font-size:clamp(2.9rem,5vw,5.8rem); margin-bottom:1.7rem; }.project-copy > p:not(.project-number) { max-width:25rem; font-size:1.05rem; line-height:1.45; }.text-link { display:inline-block; margin-top:1rem; font:500 .78rem "DM Mono",monospace; text-underline-offset:.35rem; }
.workshop-images { position:relative; min-height:400px; }.workshop-images img { position:absolute; object-fit:cover; border:1px solid var(--ink); }.wind { width:83%; height:72%; left:0; top:0; }.canal { width:54%; height:45%; right:0; bottom:0; transform:rotate(5deg); }
.support { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:clamp(4rem,8vw,8rem) 5vw; background:var(--lime); }.support .eyebrow { margin-bottom:1.5rem; }
footer { display:grid; grid-template-columns:1fr 1fr 1fr; padding:1.45rem 5vw; align-items:center; font-size:.75rem; }footer p { margin:0; text-align:center; } footer p:last-child { text-align:right; font-family:"DM Mono",monospace; }
@media (max-width:720px) { .hero,.project { grid-template-columns:1fr; }.hero { min-height:0; }.hero-copy { padding:4.7rem 6vw; }.hero-art { min-height:360px; }.project { gap:2.5rem; }.workshop .project-copy { grid-row:1; }.support { align-items:flex-start; flex-direction:column; }.support h2 { font-size:3.6rem; }footer { grid-template-columns:1fr; gap:.8rem; }footer p,footer p:last-child { text-align:left; }.workshop-images { min-height:310px; } }