:root { --blue:#40516b; --deep:#35465e; --light:#6c86ad; --white:#f7f7f3; --gutter:clamp(1.25rem, 9vw, 9rem); }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--blue); }
body { color:var(--white); font-family:"Avenir Next", Avenir, "Century Gothic", sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
main { overflow:hidden; }

.hero { min-height:min(57rem, 100svh); padding:clamp(2rem,6vw,5rem) var(--gutter) 3.6rem; position:relative; overflow:hidden; background:#40516b url('/assets/fig/handwritten-texture.png') center/cover; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; background:rgb(64 81 107 / .91); z-index:-1; }
h1 { margin:clamp(8rem,18vh,12rem) 0 0; color:#f6f6f3; font-size:clamp(6rem,19vw,20rem); font-weight:400; font-style:italic; letter-spacing:-.13em; line-height:.72; }
.hero-orbit { position:absolute; top:clamp(3rem,12vw,10rem); right:clamp(2rem,8vw,9rem); width:clamp(8rem,18vw,16rem); aspect-ratio:1; display:grid; place-items:center; border:1px dashed var(--white); border-radius:50%; color:var(--white); font-size:clamp(.65rem,1.4vw,1rem); letter-spacing:.13em; text-align:center; transform:rotate(-42deg); }
.hero-meta { display:flex; justify-content:space-between; align-items:end; margin-top:clamp(9rem,25vh,17rem); font-size:clamp(.75rem,1.35vw,1.15rem); font-weight:800; line-height:.9; text-transform:uppercase; }
.hero-meta p { margin:0; }

.about,.project { padding-left:var(--gutter); padding-right:var(--gutter); }
.about { display:grid; grid-template-columns:minmax(17rem,.85fr) minmax(20rem,1.15fr); min-height:52rem; background:linear-gradient(108deg,#5b769b,#6d86ad 48%,#3c5871 48%); }
.about-copy { max-width:34rem; padding:clamp(4rem,9vw,9rem) 0; align-self:center; }
h2 { margin:0 0 1.5rem; font-size:clamp(3rem,6vw,6rem); line-height:.78; letter-spacing:-.09em; font-weight:800; text-transform:uppercase; }
p { margin:0 0 1.15rem; font-size:clamp(.92rem,1.35vw,1.2rem); line-height:1.02; letter-spacing:-.035em; }
strong { font-weight:800; }
.about-media { min-height:42rem; position:relative; overflow:hidden; }
.about-media .foil { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.about-media .paper-clip { width:84%; position:absolute; top:17%; left:5%; opacity:.9; transform:rotate(-5deg); }
.about-media .portrait { position:absolute; width:62%; height:67%; right:8%; bottom:9%; object-fit:cover; object-position:center 24%; border:1.1rem solid #ebe9e4; box-shadow:0 1.2rem 2rem rgb(0 0 0/.18); }
.about-media .tape { width:28%; position:absolute; top:9%; right:6%; transform:rotate(-6deg); opacity:.9; }

.project { display:grid; grid-template-columns:minmax(17rem,.9fr) minmax(20rem,1.1fr); gap:clamp(2.5rem,10vw,11rem); padding-top:clamp(4rem,9vw,9rem); padding-bottom:clamp(4rem,9vw,9rem); background:linear-gradient(135deg,rgb(255 255 255/.05),transparent 34%),var(--deep); }
.project h2 { font-size:clamp(2.7rem,5vw,5.4rem); font-style:italic; text-transform:none; }
.project-copy { max-width:35rem; }
.daniela-note { width:min(75%,26rem); margin:2.6rem auto 0; max-height:16rem; object-fit:cover; object-position:top; }
.daniela-work,.mauricio-work { min-height:30rem; align-self:start; overflow:hidden; background:#28394e; }
.daniela-work img,.mauricio-work img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.project-mauricio { background:linear-gradient(135deg,rgb(255 255 255/.04),transparent 40%),var(--blue); }
.mauricio-work { max-height:39rem; }

@media (max-width:760px) { :root { --gutter:1.2rem; } .hero { min-height:40rem; } h1 { margin-top:13rem; font-size:clamp(5.5rem,24vw,9rem); } .hero-orbit { top:2rem; right:1rem; width:7.5rem; } .hero-meta { margin-top:12rem; } .about,.project { grid-template-columns:1fr; } .about { padding:0; } .about-copy { padding:4.5rem var(--gutter) 3.5rem; } .about-media { min-height:31rem; } .project { gap:2.5rem; padding-top:4.5rem; padding-bottom:4.5rem; } .daniela-work,.mauricio-work { min-height:26rem; } }