:root { --paper:#f2efe5; --ink:#1d2b24; --green:#405c32; --lichen:#91a36c; --clay:#c56445; --yellow:#edbd36; --bark:#5a3b2b; --mono:'DM Mono',monospace; --serif:'Fraunces',serif; --sans:'DM Mono',monospace; }
body { background: var(--paper); color: var(--ink); }
.approach-header { min-height: 86px; display:flex; align-items:center; justify-content:space-between; padding:1.3rem 5vw; border-bottom:1px solid #aab3a0; }
.back-link { color:var(--ink); font:.68rem var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.back-link:hover { color:var(--clay); }
.approach-hero { min-height:calc(100vh - 86px); padding:11vw 10vw 7vw; display:grid; align-content:center; gap:2rem; background:var(--green); color:var(--paper); }
.approach-hero h1, .approach-section h2, .principles h2, .collaborators h2, .cv-snapshot h2, .approach-contact h2 { font:500 clamp(3.4rem,8vw,8.8rem)/.9 var(--serif); letter-spacing:0; margin:0; }
.approach-hero h1 em, .approach-contact h2 em { color:var(--yellow); }
.hero-summary { width:min(100%, 720px); display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; font-size:1.1rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.button-outline { background:transparent; border:1px solid currentColor; color:var(--paper); }
.button-outline:hover { background:var(--paper); color:var(--green); box-shadow:4px 4px 0 var(--yellow); }
.approach-facts { padding:4rem 10vw; background:var(--yellow); }
.approach-facts dl { margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; }
.approach-facts dt, .cv-grid span { font:.62rem var(--mono); letter-spacing:.08em; }
.approach-facts dd { margin:.7rem 0 0; font:500 1.1rem/1.25 var(--serif); }
.approach-section, .principles, .collaborators, .cv-snapshot, .approach-contact { padding:9rem 10vw; }
.approach-section h2 { max-width:820px; font-size:clamp(3rem,6vw,6.8rem); margin:.7rem 0 3rem; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:4rem; max-width:900px; font-size:1.08rem; }
.principles { background:#d9d7ba; }.principles > h2 { display:none; }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:3rem; border-top:1px solid #77866c; }
.principle-grid article { min-height:310px; padding:1.3rem 1.3rem 1.3rem 0; border-right:1px solid #77866c; }.principle-grid article+article { padding-left:1.3rem; }
.principle-grid span { font:.65rem var(--mono); }.principle-grid h2 { font-size:2.3rem; margin:3rem 0 1rem; letter-spacing:-.05em; }
.collaborators { background:var(--bark); color:var(--paper); overflow:hidden; }.collaborator-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; }.collaborators h2 { font-size:clamp(3rem,5.7vw,6.3rem); margin-top:.5rem; }
.collaborator-intro { max-width:540px; margin:2rem 0 0; }.carousel-controls { display:flex; gap:.5rem; }.carousel-controls button { width:2.7rem; height:2.7rem; border:1px solid var(--paper); border-radius:50%; background:transparent; color:var(--paper); font-size:1.1rem; cursor:pointer; }.carousel-controls button:hover { color:var(--ink); background:var(--yellow); }
.collaborator-carousel { overflow-x:auto; scroll-snap-type:x mandatory; margin:3rem -10vw -1.3rem; padding:0 10vw 1.5rem; cursor:grab; scrollbar-width:thin; }.collaborator-carousel.dragging { cursor:grabbing; user-select:none; scroll-snap-type:none; }.collaborator-track { display:flex; gap:1rem; width:max-content; }.collaborator-track article { width:clamp(245px,29vw,355px); min-height:280px; padding:1.4rem; display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); background:var(--yellow); scroll-snap-align:start; transform:rotate(-1deg); }.collaborator-track article:nth-child(2n) { background:#a8bdc8; transform:rotate(1deg); }.collaborator-track article:nth-child(3n) { background:#d9d7ba; }.collaborator-track article:nth-child(4n) { background:#d5987d; }.collaborator-track span { font:.62rem var(--mono); letter-spacing:.08em; }.collaborator-track h3 { margin:2rem 0 .7rem; font:500 2rem/.95 var(--serif); letter-spacing:-.04em; }.collaborator-track p { margin:0; font-size:.88rem; }
.cv-snapshot { background:var(--paper); }.cv-snapshot h2 { font-size:clamp(3rem,5.7vw,6.3rem); margin:.6rem 0 3rem; }.cv-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #77866c; margin-bottom:1.5rem; }.cv-grid>div { padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid #77866c; }.cv-grid>div+div { padding-left:1.4rem; }.cv-grid p { font:500 1.25rem/1.3 var(--serif); }
.approach-contact { background:var(--green); color:var(--paper); }.approach-contact h2 { font-size:clamp(3.3rem,7vw,7.6rem); margin:.8rem 0 2.5rem; }.approach-contact .email { color:var(--paper); }
.approach-footer { display:flex; justify-content:space-between; padding:1.2rem 5vw; background:var(--green); color:var(--paper); border-top:1px solid #aab3a0; font:.63rem var(--mono); letter-spacing:.06em; }.approach-footer a { color:inherit; text-decoration:none; }
@media(max-width:760px) { .approach-header { min-height:72px; padding:1rem 7vw; }.approach-hero { min-height:680px; padding:8rem 7vw 4rem; }.hero-summary,.two-column { grid-template-columns:1fr; gap:1rem; }.approach-facts,.approach-section,.principles,.collaborators,.cv-snapshot,.approach-contact { padding:5rem 7vw; }.approach-facts dl,.principle-grid,.cv-grid { grid-template-columns:1fr; }.approach-facts dl { gap:1.5rem; }.principle-grid article,.cv-grid>div { min-height:0; padding:1.4rem 0; border-right:0; border-bottom:1px solid #77866c; }.principle-grid article+article,.cv-grid>div+div { padding-left:0; }.principle-grid h2 { margin:1.2rem 0 .6rem; }.collaborator-head { align-items:start; flex-direction:column; }.collaborator-carousel { margin-left:-7vw; margin-right:-7vw; padding-left:7vw; padding-right:7vw; }.collaborator-track article { width:74vw; }.approach-footer { padding:1.1rem 7vw; } }