@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@400;500;600;700&display=swap');
:root { --cream:#fcf6ec; --green:#1c3e31; --orange:#f36700; --yellow:#ffba00; --ink:#172019; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:'Afacad Flux',Arial,sans-serif; font-size:18px; } a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; gap:2rem; justify-content:space-between; padding:1.25rem clamp(1.25rem,4vw,4.5rem); position:absolute; top:0; width:100%; z-index:3; } .brand { align-items:center; display:flex; font-size:.8rem; font-weight:600; gap:.65rem; line-height:.9; text-transform:uppercase; } .brand-mark { align-items:center; background:var(--orange); border-radius:50%; color:var(--cream); display:flex; font-size:2rem; height:2.2rem; justify-content:center; line-height:1; width:2.2rem; } .nav { display:flex; gap:1.5rem; margin-left:auto; } .nav a,.text-link { font-size:.9rem; font-weight:600; } .nav a:hover,.text-link:hover { color:var(--orange); }
.button { align-items:center; background:var(--green); border-radius:999px; color:var(--cream); display:inline-flex; font-weight:600; gap:.8rem; padding:.85rem 1.25rem; transition:transform .2s,background .2s; } .button:hover { background:var(--orange); transform:translateY(-2px); } .button-small { font-size:.85rem; padding:.65rem 1rem; }
.section-grid { display:grid; gap:clamp(2rem,7vw,9rem); grid-template-columns:minmax(120px,.5fr) minmax(0,2fr); } .hero { background-color:var(--orange); background-image:radial-gradient(circle at 78% 18%,rgba(255,186,0,.9) 0 2.5rem,transparent 2.6rem),radial-gradient(circle at 91% 82%,rgba(28,62,49,.28) 0 1.2rem,transparent 1.3rem); min-height:min(850px,100vh); padding:clamp(8rem,14vw,12rem) clamp(1.25rem,8vw,9rem) 5rem; position:relative; overflow:hidden; } .eyebrow,.section-number { font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .hero .eyebrow { color:var(--green); } h1,h2,h3,p { margin-top:0; } h1,h2 { font-weight:500; letter-spacing:-.06em; line-height:.86; } h1 { font-size:clamp(4.3rem,11vw,11rem); margin:2rem 0; } h1 span,h2 em { color:var(--cream); font-style:normal; } .hero-lede { font-size:clamp(1.25rem,2.3vw,2rem); line-height:1.08; max-width:32rem; } .hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.5rem; } .hero .text-link { border-bottom:1px solid var(--green); }
.hero-art { min-height:30rem; position:relative; } .orbit { border:2px solid var(--green); border-radius:50%; position:absolute; transform:rotate(-20deg); } .orbit-one { height:25rem; right:4%; top:10%; width:14rem; } .orbit-two { border-color:var(--cream); height:30rem; right:15%; top:-5%; width:17rem; } .figure { background:var(--green); border-radius:50% 50% 45% 45%; height:15rem; position:absolute; right:24%; top:22%; transform:rotate(25deg); width:9rem; } .figure:before,.figure:after { background:inherit; border-radius:999px; content:''; height:8rem; position:absolute; top:6rem; width:3rem; } .figure:before { left:-2.2rem; transform:rotate(42deg); } .figure:after { right:-2.2rem; transform:rotate(-42deg); } .figure i { background:var(--orange); border:1rem solid var(--cream); border-radius:50%; display:block; height:4rem; left:2.5rem; position:absolute; top:2rem; width:4rem; } .figure-small { height:6rem; right:5%; top:12%; transform:rotate(-25deg); width:3.5rem; } .figure-small:before,.figure-small:after { height:3rem; top:2.8rem; width:1.3rem; } .figure-small:before { left:-.8rem; } .figure-small:after { right:-.8rem; } .figure-small i { border-width:.5rem; height:1.8rem; left:.85rem; top:.8rem; width:1.8rem; } .figure-yellow { background:var(--yellow); right:3%; top:65%; } .figure-orange { background:var(--cream); right:47%; top:72%; transform:rotate(12deg); } .art-label { bottom:8%; color:var(--cream); font-size:1.1rem; font-weight:600; left:8%; line-height:.9; position:absolute; transform:rotate(-8deg); }
.manifesto,.projects { padding:clamp(5rem,11vw,11rem) clamp(1.25rem,8vw,9rem); } .manifesto h2,.projects h2 { font-size:clamp(3.3rem,7vw,7rem); margin-bottom:2.5rem; } .manifesto em,.projects em { color:var(--orange); } .large-copy { font-size:clamp(1.4rem,3vw,2.5rem); line-height:1.02; max-width:46rem; } .muted-copy { color:#607067; max-width:31rem; line-height:1.35; }
.paths { background:var(--green); color:var(--cream); padding:clamp(5rem,9vw,9rem) clamp(1.25rem,8vw,9rem); } .section-head h2 { font-size:clamp(3.3rem,7vw,7rem); } .paths h2 em { color:var(--yellow); } .path-grid { display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); margin-top:5rem; } .path-card { min-height:22rem; overflow:hidden; padding:1.5rem; position:relative; transition:transform .25s; } .path-card:hover { transform:translateY(-8px) rotate(-1deg); } .path-card h3 { font-size:clamp(2.3rem,4vw,4.8rem); letter-spacing:-.07em; margin:5rem 0 .8rem; } .path-card p { font-size:1.1rem; line-height:1.05; max-width:12rem; } .path-index { font-size:.8rem; font-weight:700; } .card-arrow { bottom:1.5rem; font-size:1.5rem; position:absolute; right:1.5rem; } .path-dark { background:#285c48; } .path-orange { background:var(--orange); } .path-cream { background:var(--cream); color:var(--green); } .path-yellow { background:var(--yellow); color:var(--green); } .mini-person { border-radius:48% 48% 42% 42%; display:block; height:4.2rem; position:absolute; right:1.5rem; top:1.5rem; transform:rotate(14deg); width:2.7rem; } .mini-person:before,.mini-person:after { background:inherit; border-radius:99px; content:''; height:2.2rem; position:absolute; top:1.7rem; width:.9rem; } .mini-person:before { left:-.55rem; transform:rotate(35deg); } .mini-person:after { right:-.55rem; transform:rotate(-35deg); } .mini-person:after { box-shadow:0 2.2rem 0 0 currentColor; } .mini-person:before { box-shadow:0 2.2rem 0 0 currentColor; } .mini-person:after,.mini-person:before { color:inherit; } .mini-person:global { color:inherit; } .mini-person:where(.mini-green) { background:var(--green); color:var(--green); } .mini-cream { background:var(--cream); color:var(--cream); } .mini-orange { background:var(--orange); color:var(--orange); }
.section-title-row { align-items:end; display:flex; gap:2rem; justify-content:space-between; } .project-feature { background:var(--green); color:var(--cream); display:grid; grid-template-columns:1.1fr 1fr; margin-top:3rem; } .project-image { align-items:end; display:flex; min-height:32rem; padding:2rem; } .project-image-reymont { background-image:linear-gradient(180deg,rgba(28,62,49,.05),rgba(16,37,30,.9)),url('./assets/images/reymont-3d-workshop.jpg'); background-position:center; background-size:cover; } .project-image span { font-size:clamp(2rem,5vw,6rem); font-weight:700; line-height:.75; text-shadow:0 2px 14px rgba(0,0,0,.25); } .project-image strong { color:var(--orange); } .project-copy { align-self:center; padding:clamp(2rem,5vw,5rem); } .project-copy h3 { font-size:clamp(2.5rem,4vw,4.5rem); letter-spacing:-.06em; line-height:.9; } .project-copy p { line-height:1.25; max-width:24rem; } .project-copy .text-link { border-bottom:1px solid var(--orange); color:var(--yellow); display:inline-block; margin-top:1rem; }
.invite { background:var(--yellow); padding:clamp(5rem,11vw,11rem) clamp(1.25rem,8vw,9rem); } .invite h2 { font-size:clamp(4rem,9vw,9rem); } .invite em { color:var(--orange); font-style:normal; } .button-light { background:var(--cream); color:var(--green); margin-top:1rem; } .button-light:hover { background:var(--green); color:var(--cream); } .site-footer { background:var(--green); color:var(--cream); display:flex; font-size:.8rem; gap:2rem; justify-content:space-between; padding:1.5rem clamp(1.25rem,4vw,4.5rem); } .site-footer a { color:var(--yellow); }
@media (max-width:800px) { .site-header { position:relative; } .nav { display:none; } .site-header .button-small { margin-left:auto; } .hero { min-height:auto; padding-top:5rem; } .hero-art { min-height:22rem; } .figure { right:30%; } .section-grid { gap:2rem; grid-template-columns:1fr; } .section-number { margin-bottom:0; } .path-grid { grid-template-columns:repeat(2,1fr); } .path-card { min-height:17rem; } .project-feature { grid-template-columns:1fr; } .project-image { min-height:20rem; } .section-title-row { align-items:start; flex-direction:column; gap:0; } .site-footer { flex-direction:column; gap:.5rem; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.path-card { transition:none; } }