:root { --ink:#1b1b22; --paper:#f5f1e9; --cream:#fffaf2; --plum:#2e2238; --wine:#5d3f72; --rose:#80639a; --line:rgba(27,27,34,.18); --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; --serif:"Instrument Serif",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; }
button, a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.skip-link { position:fixed; top:-50px; left:16px; z-index:100; background:var(--cream); padding:10px 14px; border-radius:5px; }.skip-link:focus { top:16px; }
.site-header { position:absolute; z-index:10; inset:0 0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,4vw,68px); color:var(--cream); }
.wordmark { font-size:26px; font-weight:800; letter-spacing:-.09em; text-decoration:none; }.wordmark span { color:var(--rose); }
.site-header nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:700; }.site-header nav a { text-decoration:none; }.site-header nav a:not(.nav-contact):hover { color:#f5a0b0; }.nav-contact { border:1px solid rgba(255,255,255,.5); padding:10px 14px; border-radius:999px; }.nav-contact:hover { background:var(--cream); color:var(--ink); }
.menu-toggle { display:none; background:none; color:inherit; border:0; padding:8px 0; font-weight:700; }
.hero { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,42%); background:var(--plum); color:var(--cream); overflow:hidden; position:relative; }.hero::before { content:""; position:absolute; width:58vw; height:58vw; min-width:600px; min-height:600px; border:1px solid rgba(255,255,255,.11); border-radius:50%; left:-18vw; top:10vh; }.hero-copy { align-self:center; padding:126px clamp(22px,8vw,152px) 78px; position:relative; z-index:1; }.eyebrow { margin:0 0 20px; font:500 10px/1.25 var(--mono); letter-spacing:.13em; text-transform:uppercase; }.hero h1, h2 { font:normal clamp(73px,9vw,144px)/.79 var(--serif); letter-spacing:-.045em; margin:0; }.hero h1 em, h2 em { font-style:italic; }.hero-intro { margin:36px 0 48px; max-width:380px; font-size:16px; line-height:1.65; }.circle-link { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-size:12px; font-weight:800; }.circle-link span { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.56); border-radius:50%; transition:.2s transform; }.circle-link:hover span { transform:translateY(5px); }
.hero-art { position:relative; min-height:100vh; }.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(53,27,49,.33),rgba(0,0,0,.08)); mix-blend-mode:multiply; }.hero-art img { width:100%; height:100%; object-fit:cover; object-position:54% center; filter:saturate(.86); }.hero-art-caption { position:absolute; z-index:2; inset:auto 30px 25px; display:flex; justify-content:space-between; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.hero-side-note { position:absolute; z-index:2; left:clamp(22px,4vw,68px); bottom:30px; margin:0; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.65; writing-mode:vertical-rl; }
.intro { min-height:680px; padding:clamp(74px,11vw,170px) clamp(22px,8vw,152px); display:grid; grid-template-columns:.62fr 1.35fr .62fr; column-gap:clamp(28px,5vw,90px); align-items:start; position:relative; }.intro > div { padding-top:64px; }.intro h2 { font-size:clamp(52px,6.6vw,105px); line-height:.88; }.intro h2 em { display:block; color:var(--wine); }.intro p:not(.eyebrow) { font-size:15px; line-height:1.8; max-width:520px; }.intro p:first-of-type:not(.eyebrow) { margin-top:44px; }.portrait-frame { margin:0; align-self:end; transform:translateY(58px); position:relative; }.portrait-frame img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% center; filter:contrast(.95) saturate(.8); }.portrait-frame::before { content:""; position:absolute; inset:-14px 14px 14px -14px; background:var(--rose); z-index:-1; }.portrait-frame figcaption { font:10px/1.6 var(--mono); margin:14px 0 0; letter-spacing:.08em; text-transform:uppercase; }
.work { background:var(--ink); color:var(--cream); padding:clamp(80px,11vw,160px) clamp(22px,4vw,68px); }.section-heading { display:grid; grid-template-columns:.5fr 1fr .5fr; gap:25px; align-items:end; max-width:1290px; margin:0 auto 74px; }.section-heading h2 { font-size:clamp(61px,7vw,106px); }.section-heading p:last-child { font-size:13px; line-height:1.7; max-width:260px; margin:0 0 7px; color:rgba(255,250,240,.67); }
.work-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:520px; gap:12px; max-width:1400px; margin:auto; }.work-card { position:relative; min-width:0; overflow:hidden; color:var(--cream); border:0; background:var(--plum); text-align:left; }.work-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }.work-card.voice img { object-position:60% center; }.work-card:hover img { transform:scale(1.06); }.card-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,10,17,.86),transparent 65%); }.card-content { position:absolute; inset:auto 21px 20px; }.card-number { font:10px var(--mono); opacity:.68; }.card-content h3 { margin:34px 0 3px; font:normal 38px/.9 var(--serif); }.card-content p { margin:0; font-size:11px; opacity:.75; }.work-open { margin-top:24px; color:inherit; border:0; background:none; padding:0; font:700 11px var(--sans); }.work-open span { margin-left:6px; color:var(--rose); }.work-open:hover { text-decoration:underline; text-underline-offset:5px; }
.feature-strip { background:var(--rose); display:grid; grid-template-columns:1fr 1fr; min-height:700px; }.feature-visual { overflow:hidden; }.feature-visual img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.85) contrast(1.05); }.feature-copy { padding:clamp(70px,9vw,130px); align-self:center; }.feature-copy h2, .worlds h2, .teaching h2 { font-size:clamp(58px,7vw,105px); }.feature-copy > p:not(.eyebrow), .worlds-copy > p:not(.eyebrow) { max-width:410px; line-height:1.8; font-size:14px; margin:35px 0; }.award { display:flex; gap:14px; margin:35px 0; padding:18px 0; border-block:1px solid rgba(23,19,28,.31); }.award span { font-size:23px; }.award p { margin:0; font-size:11px; line-height:1.6; }.text-link { display:inline-block; border:0; padding:0 0 6px; border-bottom:1px solid currentColor; background:none; text-decoration:none; font-size:12px; font-weight:800; }.text-link span { margin-left:7px; }
.teaching { padding:clamp(80px,12vw,178px) clamp(22px,8vw,152px); display:grid; grid-template-columns:1fr 1.4fr .8fr; gap:clamp(35px,6vw,95px); align-items:center; }.teaching h2 { color:var(--wine); }.teaching blockquote { margin:0; font:italic clamp(30px,3.5vw,54px)/1.02 var(--serif); letter-spacing:-.025em; }.teaching-copy { align-self:end; }.teaching-copy p { font-size:13px; line-height:1.8; }.teaching-copy .text-link { margin-top:21px; }
.worlds { min-height:700px; overflow:hidden; position:relative; display:grid; grid-template-columns:1.1fr .9fr; background:#2a2739; color:var(--cream); }.worlds-art { min-height:700px; overflow:hidden; }.worlds-art img { width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:screen; opacity:.73; filter:saturate(.8) contrast(1.05); }.worlds-art::after { content:""; position:absolute; inset:0 50% 0 0; background:linear-gradient(90deg,transparent,rgba(42,39,57,.7)); }.worlds-copy { padding:clamp(80px,12vw,165px) clamp(30px,9vw,145px) 60px clamp(30px,7vw,110px); position:relative; z-index:2; }.worlds-copy strong { color:#ffc970; }.fates-token { position:absolute; z-index:2; width:105px; right:8vw; bottom:55px; mix-blend-mode:screen; opacity:.9; }
.site-footer { padding:clamp(80px,11vw,160px) clamp(22px,8vw,152px) 35px; background:var(--plum); color:var(--cream); }.site-footer h2 { font-size:clamp(74px,10vw,155px); }.footer-links { display:flex; gap:28px; margin:62px 0 98px; flex-wrap:wrap; }.footer-links a { font-size:12px; font-weight:700; text-decoration:none; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.5); }.footer-links a:hover { color:#f5a0b0; }.footer-links span { color:var(--rose); }.footer-credit { font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.work-dialog { border:0; padding:0; max-width:min(900px,calc(100vw - 32px)); background:var(--cream); color:var(--ink); box-shadow:0 20px 80px rgba(0,0,0,.48); }.work-dialog::backdrop { background:rgba(19,12,18,.8); backdrop-filter:blur(5px); }.work-dialog[open] { display:grid; grid-template-columns:.88fr 1fr; }.dialog-image { min-height:480px; background:var(--plum); }.dialog-image img { width:100%; height:100%; display:block; object-fit:cover; }.dialog-copy { padding:clamp(38px,6vw,76px) clamp(30px,5vw,66px); align-self:center; }.dialog-copy h2 { font-size:clamp(54px,6vw,86px); color:var(--wine); }.dialog-copy > p:not(.eyebrow) { font-size:14px; line-height:1.8; }.dialog-detail { border-top:1px solid var(--line); margin:28px 0; padding:17px 0 0; font:10px/1.7 var(--mono); text-transform:uppercase; letter-spacing:.07em; }.dialog-close { position:absolute; z-index:2; top:15px; right:17px; border:0; background:var(--ink); color:var(--cream); border-radius:50%; width:34px; height:34px; font-size:27px; line-height:1; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; min-height:auto; }.hero-copy { min-height:650px; padding-top:140px; }.hero-art { height:57vw; min-height:320px; }.hero-side-note { display:none; }.intro { grid-template-columns:1fr 1.4fr; }.intro > .eyebrow { grid-column:1/-1; }.portrait-frame { max-width:310px; grid-column:2; justify-self:end; transform:translateY(20px); }.work-grid { grid-template-columns:1fr 1fr; grid-template-rows:420px 420px; }.section-heading { grid-template-columns:1fr 1.5fr; }.section-heading p:last-child { display:none; }.teaching { grid-template-columns:1fr 1fr; }.teaching-copy { grid-column:2; }.worlds-copy { padding-left:50px; }.site-header nav { gap:19px; }.site-header { padding-inline:25px; } }
@media (max-width:620px) { .site-header { height:74px; }.menu-toggle { display:block; }.site-header nav { display:none; position:absolute; top:65px; left:15px; right:15px; padding:17px; flex-direction:column; align-items:flex-start; background:var(--cream); color:var(--ink); box-shadow:0 9px 18px rgba(0,0,0,.12); }.site-header nav.is-open { display:flex; }.nav-contact { border-color:var(--line); }.hero-copy { min-height:590px; padding:124px 24px 50px; }.hero h1 { font-size:clamp(72px,23vw,116px); }.hero-art { height:88vw; }.hero-art-caption { left:16px; right:16px; bottom:16px; }.intro { min-height:auto; padding:83px 25px; grid-template-columns:1fr; }.intro > div { padding-top:5px; }.intro p:first-of-type:not(.eyebrow) { margin-top:32px; }.portrait-frame { grid-column:auto; justify-self:start; width:min(76vw,320px); margin-top:30px; }.work { padding:82px 16px; }.section-heading { margin-bottom:42px; display:block; padding:0 10px; }.section-heading .eyebrow { margin-bottom:15px; }.section-heading h2 { font-size:68px; }.work-grid { grid-template-columns:1fr; grid-template-rows:repeat(4,330px); gap:9px; }.card-content h3 { margin-top:22px; }.feature-strip { grid-template-columns:1fr; }.feature-visual { height:72vw; }.feature-copy { padding:70px 25px; }.teaching { grid-template-columns:1fr; padding:82px 25px; }.teaching blockquote { margin:7px 0 10px; }.teaching-copy { grid-column:auto; }.worlds { grid-template-columns:1fr; }.worlds-art { position:absolute; inset:0; min-height:0; }.worlds-art::after { inset:0; background:rgba(42,39,57,.7); }.worlds-copy { padding:92px 25px 135px; }.fates-token { width:72px; right:24px; bottom:26px; }.site-footer { padding:80px 25px 30px; }.footer-links { display:grid; gap:18px; margin:46px 0 72px; }.footer-links a { width:max-content; }.work-dialog[open] { display:block; max-height:calc(100vh - 28px); overflow:auto; }.dialog-image { min-height:270px; height:45vw; }.dialog-copy { padding:39px 25px 45px; } }