:root { --ink:#29291f; --paper:#ebe6d5; --paper-deep:#d5cbb3; --sage:#737a64; --moss:#4d5747; --red:#ae5f4b; --line:rgba(41,41,31,.22); }
* { box-sizing:border-box; } figure { margin:0; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.topbar { height:78px; padding:0 clamp(24px,5vw,78px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:absolute; width:100%; z-index:2; color:#fffdf4; }
.brand { font:42px/1 "Instrument Serif",serif; letter-spacing:-2px; }.brand span { color:#dba082; }
nav { display:flex; gap:28px; font:500 10px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.hero { min-height:clamp(780px,92svh,900px); display:grid; grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr); position:relative; overflow:hidden; background:var(--moss); }
.hero-image { min-height:clamp(780px,92svh,900px); display:flex; justify-content:center; background:#80908b; }
.painting-frame { position:relative; height:100%; max-width:100%; }
.painting-frame img { display:block; width:auto; max-width:100%; height:100%; object-fit:contain; }
.art-credit { position:absolute; left:10px; bottom:12px; margin:0; color:rgba(255,253,244,.8); font:400 8px/1.35 "DM Mono",monospace; letter-spacing:.04em; text-shadow:0 1px 8px rgba(26,31,24,.8); }
.art-credit span { opacity:.84; }
.hero-copy { align-self:center; padding:110px clamp(28px,7vw,110px) 112px 7vw; color:#fffdf4; position:relative; z-index:1; }
.eyebrow { margin:0 0 20px; font:500 10px/1.5 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
h1,h2 { font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.045em; line-height:.93; margin:0; }
h1 { font-size:clamp(66px,8.1vw,128px); } h1 em { font-weight:400; color:#d9c58d; }.hero h1 { font-size:clamp(48px,6vw,76px); }
.intro { max-width:350px; margin:28px 0 35px; font-size:16px; color:rgba(255,253,244,.86); }
.button { display:inline-flex; align-items:center; gap:24px; padding:15px 18px; color:#fffdf4; border:1px solid rgba(255,253,244,.75); border-radius:100px; font:500 10px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; transition:.2s; }.button:hover { background:#fffdf4; color:var(--moss); }.button span { font-size:15px; }
.hero-note { position:absolute; right:7vw; bottom:39px; margin:0; color:rgba(255,253,244,.68); font:10px/1.5 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.hero-crp { color:rgba(255,253,244,.56); white-space:nowrap; }
.section { display:grid; grid-template-columns:44% 56%; padding:138px 7vw; border-bottom:1px solid var(--line); }.section h2 { font-size:clamp(50px,6vw,91px); }.about-text { max-width:500px; padding-top:11px; }.about-text p { margin:0 0 21px; font-size:17px; }.about-text .manifesto { max-width:360px; margin-top:38px; color:var(--red); font:italic 25px/1.13 "Instrument Serif",serif; letter-spacing:-.02em; }
.credentials { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:55px 7vw 67px; background:#dfd7c2; }.credentials div { min-height:150px; padding:0 35px; border-left:1px solid var(--line); }.credentials div:first-child { padding-left:0; border-left:0; }.credentials div:last-child { padding-right:0; }.credentials span { color:var(--red); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.credentials p { margin:13px 0 0; font-size:14px; line-height:1.7; }
.care { background:#f1ede1; grid-template-columns:38% 62%; }.care-list { border-top:1px solid var(--line); }.care-list details { border-bottom:1px solid var(--line); padding:17px 0; }.care-list summary { cursor:pointer; display:flex; justify-content:space-between; gap:15px; list-style:none; font:20px/1.35 "Instrument Serif",serif; }.care-list summary::-webkit-details-marker { display:none; }.care-list summary span { font:17px/1.3 Manrope,sans-serif; color:var(--red); }.care-list details[open] summary span { transform:rotate(45deg); }.care-list p { max-width:470px; margin:12px 42px 2px 0; font-size:13px; line-height:1.65; }.care-manifesto { max-width:285px; margin:30px 0 0; color:var(--sage); font:21px/1.2 "Instrument Serif",serif; }
.contact { display:grid; grid-template-columns:44% 56%; min-height:650px; background:var(--moss); color:#fffdf4; }.contact-art { position:relative; overflow:hidden; background:#697460; }.contact-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:22% 72%; opacity:.78; }.contact-copy { padding:112px 8vw 70px; display:flex; flex-direction:column; align-items:flex-start; }.contact h2 { max-width:720px; font-size:clamp(48px,5.5vw,82px); line-height:.98; }.contact h2 em { color:#d9c58d; }.button-light { margin:37px 0 auto; }.contact-links { display:flex; flex-direction:column; gap:6px; font:10px/1.7 "DM Mono",monospace; letter-spacing:.03em; }.contact-links a:hover { color:#d9c58d; }
footer { padding:22px 7vw; display:flex; justify-content:space-between; background:#29291f; color:#d8d2bf; font:10px/1.4 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:760px) { .topbar { height:65px; }.topbar nav { gap:14px; }.hero { display:flex; flex-direction:column; min-height:0; }.hero-image { min-height:440px; height:min(68svh,620px); }.hero-copy { min-height:640px; display:flex; flex-direction:column; justify-content:flex-end; padding:105px 26px 95px; }.hero-note { left:26px; right:auto; bottom:33px; }.hero-crp { display:block; margin-top:2px; white-space:normal; }.art-credit { left:10px; bottom:10px; }.section { display:block; padding:84px 26px; }.about-text { padding-top:33px; }.credentials { display:block; padding:28px 26px; }.credentials div { min-height:0; padding:22px 0; border-left:0; border-bottom:1px solid var(--line); }.credentials div:first-child { padding-left:0; }.credentials div:last-child { border:0; }.care-heading { margin-bottom:48px; }.contact { display:block; }.contact-art { height:270px; }.contact-copy { padding:70px 26px 48px; min-height:530px; } footer { gap:10px; padding:20px 26px; font-size:8px; } }