:root{--bg:#fff;--ink:#111;--ink-2:#444;--ink-3:#8a8a8a;--line:#e6e6e2;--soft:#f6f6f3;--max:1180px;--gut:clamp(16px,5vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3,.sans{font-family:"Outfit",sans-serif;font-weight:500;letter-spacing:-.01em;line-height:1.05;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav img{height:34px;width:auto;display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.nav li a{font-family:"Outfit",sans-serif;font-size:15px;letter-spacing:.01em;color:var(--ink-2);position:relative;padding:6px 0}
.nav li a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--ink);transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav li a:hover::after,.nav li a[aria-current]::after{right:0}
.nav li a[aria-current]{color:var(--ink)}
.nav .cta{border:1.5px solid var(--ink);border-radius:999px;padding:9px 18px;color:var(--ink)}
.nav .cta::after{display:none}.nav .cta:hover{background:var(--ink);color:#fff}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}
/* hero */
.hero{padding:clamp(72px,12vh,140px) 0 clamp(56px,8vh,96px)}
.eyebrow{font-family:"Outfit",sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:14px;margin-bottom:28px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--ink-3)}
.hero h1{font-size:clamp(44px,7.2vw,104px);font-weight:400;letter-spacing:-.025em;max-width:16ch}
.hero h1 em{font-style:normal;font-weight:600}
.hero p{font-size:clamp(20px,2.1vw,26px);max-width:34ch;color:var(--ink-2);margin:36px 0 44px;line-height:1.5}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{font-family:"Outfit",sans-serif;font-size:16px;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--soft)}
.btn svg{width:16px;height:16px}
/* reveal */
html.js .r{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.r.d1{animation-delay:.08s}.r.d2{animation-delay:.18s}.r.d3{animation-delay:.3s}.r.d4{animation-delay:.42s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.io{opacity:1}
html.js .io.in{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* sections */
.sec{padding:clamp(56px,9vh,120px) 0;border-top:1px solid var(--line)}
.sec-h{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:48px;align-items:end}
.sec-h h2{font-size:clamp(32px,4.2vw,56px);font-weight:400;letter-spacing:-.02em}
.sec-h .lead{font-size:21px;color:var(--ink-2);max-width:44ch;margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:#fff;padding:36px 32px 40px;position:relative;transition:background .3s}
.cell:hover{background:var(--soft)}
.cell h3{font-size:26px;margin:28px 0 14px;font-weight:500}
.cell p{margin:0;color:var(--ink-2);font-size:18px}
/* big quote */
.quote{padding:clamp(72px,12vh,140px) 0;text-align:center}
.quote p{font-size:clamp(28px,4vw,52px);line-height:1.2;max-width:24ch;margin:0 auto;font-style:italic;font-weight:300}
.quote small{display:block;margin-top:28px;font-family:"Outfit",sans-serif;font-style:normal;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* workshops */
.ws{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{border:1px solid var(--line);border-radius:22px;padding:40px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
.card .tag{font-family:"Outfit",sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.card h3{font-size:clamp(28px,3vw,40px);margin:18px 0 14px;font-weight:500;letter-spacing:-.02em}
.card p{color:var(--ink-2);margin:0 0 28px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-bottom:28px}
.facts div{font-family:"Outfit",sans-serif}
.facts b{display:block;font-size:24px;font-weight:500}
.facts span{font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.card>*{position:relative}
/* seminar strip */
.strip{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.strip h2{font-size:clamp(30px,4vw,54px);font-weight:400;letter-spacing:-.02em}
.strip p{color:#bdbdbd;margin:16px 0 0;font-size:20px}
.strip .date{font-family:"Outfit",sans-serif;text-align:right}
.strip .date b{display:block;font-size:clamp(48px,7vw,96px);font-weight:500;line-height:1;letter-spacing:-.03em}
.strip .date span{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#bdbdbd}
.strip .btn{background:#fff;color:var(--ink);border-color:#fff;margin-top:28px}
/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
footer img{height:30px;width:auto}
footer .meta{font-family:"Outfit",sans-serif;font-size:13px;color:var(--ink-3);margin-top:16px;line-height:1.7}
footer ul{list-style:none;padding:0;margin:0;display:flex;gap:22px;font-family:"Outfit",sans-serif;font-size:14px}
footer li a{color:var(--ink-2)}footer li a:hover{color:var(--ink)}
/* about */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.photo{position:sticky;top:100px;aspect-ratio:4/5;border-radius:24px;background:var(--soft);border:1px dashed #cfcfc8;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-family:"Outfit",sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.prose p{margin:0 0 1.4em;font-size:21px}
.prose p:first-of-type{font-size:clamp(24px,2.4vw,30px);line-height:1.4;font-weight:300}
.timeline{list-style:none;padding:0;margin:48px 0 0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.timeline b{font-family:"Outfit",sans-serif;font-weight:500;font-size:16px;color:var(--ink-3);padding-top:4px}
.timeline p{margin:0;font-size:19px}
/* page head */
.ph{padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,72px)}
.ph h1{font-size:clamp(44px,7vw,96px);font-weight:400;letter-spacing:-.025em}
.ph p{font-size:clamp(20px,2.1vw,26px);color:var(--ink-2);max-width:40ch;margin:28px 0 0;line-height:1.5}
/* workshop detail */
.detail{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px)}
.detail h2{font-size:clamp(32px,4.4vw,60px);font-weight:400;letter-spacing:-.02em}
.detail .lead{font-size:22px;color:var(--ink-2);margin:20px 0 32px}
.steps{list-style:none;padding:0;margin:0}
.steps li{padding:18px 0;border-top:1px solid var(--line)}
.steps b{font-family:"Outfit",sans-serif;font-weight:500;display:block;font-size:19px;margin-bottom:4px}
.steps p{margin:0;color:var(--ink-2);font-size:18px}
.side{border:1px solid var(--line);border-radius:22px;padding:32px;position:sticky;top:100px;font-family:"Outfit",sans-serif}
.side dl{margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.side dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.side dd{margin:4px 0 0;font-size:20px;font-weight:500}
.side .btn{width:100%;justify-content:center}
.note{font-size:14px;color:var(--ink-3);margin-top:14px;text-align:center}
/* contact */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
.ways{list-style:none;padding:0;margin:0}
.ways li{padding:22px 0;border-top:1px solid var(--line)}
.ways b{font-family:"Outfit",sans-serif;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
.ways a{font-family:"Outfit",sans-serif;font-size:22px;border-bottom:1.5px solid transparent;transition:border-color .2s}
.ways a:hover{border-color:var(--ink)}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-family:"Outfit",sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:8px}
input,textarea,select{width:100%;font:inherit;font-size:18px;padding:14px 0;border:0;border-bottom:1.5px solid var(--line);background:transparent;color:var(--ink);outline:none;transition:border-color .2s;border-radius:0}
input:focus,textarea:focus,select:focus{border-color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.consent input{width:18px;height:18px;margin-top:4px;flex:none}
@media(max-width:900px){
 .nav ul{display:none}.burger{display:block}
 .nav ul.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);padding:20px var(--gut) 28px;gap:18px}
 .sec-h,.ws,.strip,.about,.detail,.contact,.f2,footer .wrap{grid-template-columns:1fr}
 .grid3{grid-template-columns:1fr}.strip .date{text-align:left}.photo,.side{position:static}
 .timeline li{grid-template-columns:90px 1fr}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html.js .r,html.js .io{opacity:1;transform:none}}

.about-nophoto{grid-template-columns:1fr;max-width:760px}

input::placeholder,textarea::placeholder{line-height:1.6;overflow:visible}

/* projects: home proof list */
.proof{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.proof li{display:grid;grid-template-columns:280px 1fr auto;gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.proof b{font-family:"Outfit",sans-serif;font-weight:500;font-size:18px;letter-spacing:-.01em}
.proof p{margin:0;color:var(--ink-2);font-size:18px}
.proof span{font-family:"Outfit",sans-serif;font-size:14px;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap;text-align:right}
.proof+.btns{margin-top:36px}
/* projects: detail cards, one tone each (black to light grey) */
.proj{--c-bg:#111;--c-ink:#fff;--c-ink2:rgba(255,255,255,.78);--c-ink3:rgba(255,255,255,.75);--c-line:rgba(255,255,255,.18);
 display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,5vw,80px);padding:clamp(32px,5vw,64px);border-radius:28px;background:var(--c-bg);color:var(--c-ink);margin-bottom:20px}
.proj.t1{--c-bg:#111}
.proj.t2{--c-bg:#2e2e2e}
.proj.t3{--c-bg:#5a5a5a}
.proj.t4{--c-bg:#e9e9e6;--c-ink:#111;--c-ink2:#444;--c-ink3:#666;--c-line:#cfcfc8}
.proj:last-child{margin-bottom:0}
.proj .meta{font-family:"Outfit",sans-serif;position:sticky;top:100px;align-self:start}
.proj .who{font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:26px}
.proj dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.proj dt{font-size:12px;letter-spacing:.14em;color:var(--c-ink3)}
.proj dd{margin:4px 0 0;font-size:17px;font-weight:500}
.proj h2{font-size:clamp(28px,3.4vw,46px);font-weight:400;letter-spacing:-.02em}
.proj .body p.lead{font-size:22px;color:var(--c-ink2);margin:20px 0 12px}
.proj h3{font-size:13px;letter-spacing:.14em;color:var(--c-ink3);font-weight:500;margin:28px 0 8px}
.proj .body p{margin:0;font-size:19px}
.proj .facts{grid-template-columns:repeat(5,1fr);margin:18px 0 0;padding-top:22px;border-top:1px solid var(--c-line)}
.proj .facts b{font-size:26px}
.proj .facts span{color:var(--c-ink3)}
@media(max-width:900px){
 .proof li{grid-template-columns:1fr;gap:6px}.proof span{text-align:left;white-space:normal}
 .proj{grid-template-columns:1fr;gap:28px;border-radius:22px;padding:28px 24px}.proj .meta{position:static}.proj .facts{grid-template-columns:repeat(3,1fr)}
}

/* hero with portrait (home) */
.hero-photo{padding-top:clamp(40px,7vh,88px);padding-bottom:0}
.hero-photo .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,72px);align-items:stretch}
.hero-photo .hero-text{padding:clamp(24px,5vh,56px) 0 clamp(56px,8vh,96px);align-self:center}
.hero-photo h1{font-size:clamp(42px,4.3vw,60px);max-width:none}
.hero-figure{position:relative;background:var(--soft);border-radius:28px 28px 0 0;overflow:hidden;min-height:460px;display:flex;align-items:flex-end;justify-content:center}
.hero-figure img{display:block;height:94%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
@media(max-width:900px){
 .hero-photo .wrap{grid-template-columns:1fr;gap:28px}
 .hero-photo .hero-text{padding-bottom:0}
 .hero-figure{min-height:0;aspect-ratio:1/1;border-radius:22px 22px 0 0;max-width:420px;width:100%;justify-self:center}
 .hero-figure img{height:96%}
}
