@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{color-scheme:light;--paper:#fbf8f2;--ink:#251d29;--muted:#5e5362;--accent:#633d66;--line:#dbd1d9;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
a{color:inherit;text-underline-offset:.23em}
a:focus-visible{outline:3px solid #ad659e;outline-offset:5px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
.frame{width:min(1152px,calc(100% - 96px));margin-inline:auto}
.skip{position:absolute;top:8px;left:8px;background:white;padding:8px;z-index:2;transform:translateY(-150%)}
.skip:focus{transform:none}
.top{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand,nav a,.button,.feature,.footer a{text-decoration:none}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.mark{display:grid;place-items:center;width:36px;height:36px;background:#e9dce9;border-radius:50%;font:600 15px var(--serif);color:#502f55}
nav{display:flex;align-items:center;gap:30px;font-size:.91rem;font-weight:600}
nav a:hover,.footer a:hover{text-decoration:underline}
.nav-contact{border:1px solid var(--line);border-radius:30px;padding:7px 15px}
.hero{display:grid;grid-template-columns:1fr .84fr;gap:clamp(52px,8.5vw,136px);align-items:center;padding-block:70px 82px}
.eyebrow{font-size:.72rem;line-height:1.5;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:600}
h1{font-size:clamp(78px,10.9vw,157px);line-height:.88;letter-spacing:-.075em;margin:24px 0 26px}
h1 em{font-weight:500;color:var(--accent)}
.roles{font-weight:700;font-size:clamp(1rem,1.65vw,1.23rem)}
.intro{color:var(--muted);max-width:405px;margin:12px 0 26px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 19px;border-radius:30px;background:#38233d;color:white;font-size:.9rem;font-weight:700;white-space:nowrap}
.button:hover{background:#603963}
.feature{background:#211b2b;padding:18px;color:white;border-radius:180px 180px 13px 13px;box-shadow:0 20px 45px #392a3b28}
.feature-img{display:block;overflow:hidden;border-radius:165px 165px 4px 4px;background:#101524}
.feature-img img{width:100%;aspect-ratio:1 / 1.04;object-fit:cover;object-position:center 42%;transition:transform .3s}
.feature:hover img{transform:scale(1.035)}
.feature-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 6px 1px}
.feature-caption small,.feature-caption strong{display:block}
.feature-caption small{color:#e2cde6;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}
.feature-caption strong{font:600 1.3rem var(--serif)}
.circle{display:grid;place-items:center;border:1px solid #88768f;border-radius:50%;width:36px;height:36px}
.work{padding-block:70px 76px;background:#eee6ef}
h2{font-size:clamp(41px,6.2vw,76px);line-height:1.03;letter-spacing:-.045em;margin-top:10px}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.project{background:var(--paper);border-radius:12px;overflow:hidden}
.project-art{height:320px;display:grid;place-items:center;padding:25px;overflow:hidden}
.project-art img{width:auto;height:270px;max-height:100%;object-fit:contain;box-shadow:0 10px 23px #1b102c60}
.film{background:#292339}
.book{background:#d8ad83}
.project-text{padding:26px}
h3{font-size:clamp(25px,3.1vw,40px);line-height:1.15;letter-spacing:-.03em;margin:7px 0 12px}
.project-text p:not(.eyebrow),.bio{color:var(--muted)}
.text-link{display:inline-block;font-size:.9rem;font-weight:700;color:#4b2c50;margin-top:13px}
.about{display:grid;grid-template-columns:.9fr 1fr;gap:54px;padding-block:84px}
.bio p+p{margin-top:14px}
.contact{background:#2d2033;color:#fbf8f2}
.contact-inner{padding-block:62px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.contact .eyebrow{color:#e2bae4}
.contact h2{font-size:clamp(40px,5.8vw,70px);margin-bottom:12px}
.contact p:not(.eyebrow){color:#eadfeb}
.light{background:#faf0fc;color:#342137}
.light:hover{background:#e9d5ed}
.footer{display:flex;justify-content:space-between;gap:12px;padding-block:20px;font-size:.87rem;color:var(--muted)}
@media(max-width:800px){
.frame{width:calc(100% - 48px)}
.hero{gap:30px;padding-block:52px 60px}
h1{font-size:clamp(67px,12vw,110px)}
.feature{padding:12px}
.project-art{height:260px;padding:18px}
.project-art img{height:224px}
}
@media(max-width:580px){
.frame{width:calc(100% - 36px)}
.top{height:66px}
.brand{gap:7px;font-size:.85rem}
.mark{width:29px;height:29px;font-size:13px}
nav{gap:12px;font-size:.79rem}
.nav-contact{padding:5px 8px}
.hero,.projects,.about{grid-template-columns:1fr}
.hero{gap:34px;padding-block:38px 50px}
h1{font-size:clamp(78px,18vw,106px)}
.feature{width:min(100%,390px);justify-self:center}
.work,.about{padding-block:49px}
.about{gap:20px}
.contact-inner{align-items:flex-start;flex-direction:column;padding-block:46px}
.project-text{padding:22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.yeabu{background:#704b34}
.yeabu img{max-width:100%;height:auto;max-height:270px;aspect-ratio:1.24}
@media(min-width:980px){.projects{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.yeabu img{max-height:224px}}

.music{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:45px;border-bottom:1px solid var(--line)}
.music h2{font-size:clamp(38px,5vw,58px);margin:0 0 8px}
.tracks{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
@media(max-width:580px){.music{align-items:flex-start;flex-direction:column}.top .brand>span:last-child{display:none}}

.hero-actions{display:flex;align-items:flex-start;flex-direction:column}

.contact-actions{display:flex;flex-wrap:wrap;gap:10px}

.books{padding-block:58px;border-bottom:1px solid var(--line)}
.book-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.book-list article{padding:24px;border:1px solid var(--line);border-radius:12px}
.book-list article p:not(.eyebrow){color:var(--muted)}
.book-list h3{font-size:clamp(24px,3vw,34px)}
@media(max-width:580px){.book-list{grid-template-columns:1fr}nav{gap:8px}.nav-contact{padding-inline:6px}}