:root{
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --bg:#f3efe8; --ink:#141414; --mute:#8a847b; --line:rgba(20,20,20,.14); --acc:#b4533a; --gap:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 14px/1.5 var(--sans);color:var(--ink);background:var(--bg);letter-spacing:.005em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto;background:#e4dfd6}
figure{margin:0}
i,em{font-style:italic}
h4{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px}
.skip:focus{left:8px;z-index:100}
@media (hover:hover) and (pointer:fine){body{cursor:none}a,button{cursor:none}}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;transform-origin:top;transition:transform 1s var(--ease)}
.intro__name{font:400 clamp(40px,8vw,120px)/1 var(--serif);letter-spacing:-.03em;overflow:hidden;padding:.1em 0}
.intro .ch{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards;animation-delay:calc(.15s + var(--n) * .035s)}
.intro .ch.gap{width:.3em}
body.ready .intro{transform:scaleY(0);pointer-events:none}
body.no-intro .intro{display:none}
@keyframes rise{to{transform:none}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);transition:opacity .2s}
.cursor__ring{position:absolute;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);transform:translate(-50%,-50%) scale(1);transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s;display:flex;align-items:center;justify-content:center}
.cursor__label{font:500 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .2s}
.cursor.is-hover .cursor__ring{width:56px;height:56px;background:rgba(20,20,20,.08)}
.cursor.is-label .cursor__ring{width:84px;height:84px;background:var(--ink);border-color:var(--ink)}
.cursor.is-label .cursor__label{opacity:1}
.cursor.is-label .cursor__dot{opacity:0}
.cursor.is-dark .cursor__dot,.cursor.is-dark .cursor__ring{background:var(--bg);border-color:var(--bg)}
.cursor.is-dark .cursor__dot{background:var(--bg)}
.cursor.is-dark .cursor__ring{background:transparent}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:12px;transition:transform .5s var(--ease),opacity .4s;mix-blend-mode:difference;color:#fff}
.hdr.hide{transform:translateY(-100%);opacity:0}
.hdr__home{font:400 20px/1 var(--serif);letter-spacing:-.02em}
.hdr__mid{display:flex;gap:22px}
.hdr__mid a{position:relative;padding:4px 0}
.hdr__mid a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.hdr__mid a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__btn{display:inline-flex;align-items:center;gap:10px;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.burger{width:22px;height:12px;position:relative;display:inline-block}
.burger i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{top:11px}
body.menu-open .burger i:first-child{top:5px;transform:rotate(45deg)}
body.menu-open .burger i:last-child{top:5px;transform:rotate(-45deg)}
@media (max-width:800px){.hdr__mid{display:none}}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;grid-template-columns:1.2fr 1fr;padding:110px 20px 40px;gap:40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.menu[hidden]{display:grid;visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__links a{display:flex;align-items:baseline;gap:18px;font:400 clamp(34px,5.4vw,76px)/1.15 var(--serif);letter-spacing:-.03em;opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;transition-delay:calc(.15s + var(--i) * .06s)}
body.menu-open .menu__links a{opacity:1;transform:none}
.menu__links a:hover{color:var(--acc);font-style:italic}
.menu__num{font:500 11px/1 var(--sans);letter-spacing:.08em;color:var(--mute)}
.menu__side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.menu__preview{width:min(320px,100%);aspect-ratio:3/4;overflow:hidden;opacity:0;transform:scale(.96);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
body.menu-open .menu__preview{opacity:1;transform:none}
.menu__preview img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.menu__meta{display:flex;gap:60px;align-self:stretch;justify-content:flex-end}
.menu__meta a{display:block;font-size:16px;line-height:1.7}
.menu__meta a:hover{font-style:italic}
@media (max-width:800px){.menu{grid-template-columns:1fr;padding-top:90px}.menu__preview{display:none}.menu__meta{justify-content:flex-start;gap:40px}}
body.menu-open{overflow:hidden}

/* ---------- reveal ---------- */
.rv{--d:0s;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease) var(--d)}
.rv img{transform:scale(1.12);transition:transform 1.4s var(--ease) var(--d)}
.rv.in{clip-path:inset(0 0 0 0)}
.rv.in img{transform:none}
.page__text.rv{clip-path:none;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.page__text.rv.in{opacity:1;transform:none}
.ch{display:inline-block}
.split-in .ch{transform:translateY(110%);animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--n) * .03s)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv,.rv img{clip-path:none;transform:none}.ch{transform:none!important}.intro{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:120px;min-height:100vh}
.hero__head{position:relative;z-index:3;padding:0 20px;pointer-events:none;will-change:transform}
.hero__name{font:400 clamp(72px,13.5vw,230px)/.9 var(--serif);letter-spacing:-.045em}
.hero__line{display:block;overflow:hidden;padding-bottom:.08em}
.hero__line--it{margin-left:14vw}
.hero__name .ch{transform:translateY(110%)}
body.ready .hero__name .ch{animation:rise 1s var(--ease) forwards;animation-delay:calc(.2s + var(--n) * .035s)}
.hero__tag{font-size:clamp(15px,1.2vw,19px);max-width:22em;margin:28px 0 0 14vw;opacity:0;transition:opacity 1s var(--ease) 1s}
.hero__scroll{display:inline-flex;gap:8px;align-items:center;margin:20px 0 0 14vw;font-size:11px;letter-spacing:.08em;text-transform:uppercase;pointer-events:auto;opacity:0;transition:opacity 1s var(--ease) 1.2s}
.hero__scroll span{display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
body.ready .hero__tag,body.ready .hero__scroll{opacity:1}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);padding:0 10px 80px;margin-top:-10vw}
.hero__col{display:flex;flex-direction:column;gap:120px;padding-top:var(--off);will-change:transform}
.hero__col figure a{display:block;overflow:hidden}
.hero__col figure img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s}
.hero__col:nth-child(2) figure img,.hero__col:nth-child(4) figure img{aspect-ratio:1/1}
.hero__col figure a:hover img{transform:scale(1.05)!important}
.hero__col figcaption{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:10px}
@media (max-width:700px){
  .hero{padding-top:100px;min-height:0}
  .hero__line--it{margin-left:8vw}
  .hero__tag,.hero__scroll{margin-left:0}
  .hero__grid{grid-template-columns:repeat(2,1fr);margin-top:40px;padding-bottom:40px}
  .hero__col{gap:40px;padding-top:0;transform:none!important}
  .hero__col:nth-child(2){padding-top:100px}
  .hero__col:nth-child(2) figure img{aspect-ratio:3/4}
  .hero__col:nth-child(n+3){display:none}
}

/* ---------- marquee ---------- */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;white-space:nowrap}
.mq__track{display:inline-flex;align-items:baseline;gap:28px;font:400 clamp(28px,3.4vw,52px)/1 var(--serif);letter-spacing:-.02em;animation:mq 28s linear infinite;padding-right:28px}
.mq:hover .mq__track{animation-play-state:paused}
.mq .it{font-style:italic}
.mq__dot{color:var(--acc)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- statement ---------- */
.stmt{padding:180px 20px 200px}
.stmt__p{font:400 clamp(44px,7vw,128px)/1.02 var(--serif);letter-spacing:-.03em;max-width:12em}
.stmt .w{color:#cbc5bb;transition:color .5s}
.stmt .w:first-child{margin-left:12vw}
.stmt .w.on{color:var(--ink)}
@media (max-width:700px){.stmt{padding:100px 20px 120px}.stmt .w:first-child{margin-left:0}}

/* ---------- portfolio list ---------- */
.pl{position:relative;padding:0 20px 140px}
.pl__head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:16px}
.pl h2{font:400 clamp(48px,6vw,96px)/1 var(--serif);letter-spacing:-.03em}
.pl__sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pl__body{display:grid;grid-template-columns:1fr minmax(260px,32%);gap:60px;align-items:start}
.pl__preview{position:sticky;top:110px}
.pl__frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:#e4dfd6}
.pl__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.pl__frame img.on{opacity:1;transform:none}
.pl__label{display:block;margin-top:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pl__main{display:flex;flex-direction:column;gap:8px}
.pl__row{display:grid;grid-template-columns:50px 1fr 100px 40px;align-items:center;gap:20px;padding:34px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
.pl__row.rv{clip-path:none;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease) var(--d),transform .8s var(--ease) var(--d),padding .5s var(--ease)}
.pl__row.rv.in{opacity:1;transform:none}
.pl__num{font-size:11px;letter-spacing:.08em;color:var(--mute)}
.pl__title{font:400 clamp(30px,4.2vw,64px)/1 var(--serif);letter-spacing:-.03em;transition:transform .5s var(--ease),font-style .2s}
.pl__desc{color:var(--mute);font-size:14px}
.pl__count{font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.pl__arrow{font-size:22px;text-align:right;transform:translateX(-10px);opacity:0;transition:all .5s var(--ease)}
.pl__row:hover{padding-left:16px}
.pl__row:hover .pl__title{font-style:italic;transform:translateX(6px)}
.pl__row:hover .pl__arrow{opacity:1;transform:none}
.pl__mobile{display:none}
.btn{display:inline-flex;gap:10px;align-items:center;margin-top:56px;padding:14px 22px;border:1px solid var(--ink);border-radius:999px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:none}
.btn span{transition:transform .4s var(--ease)}
.btn:hover span{transform:translateX(4px)}
@media (max-width:800px){
  .pl__body{grid-template-columns:1fr}
  .pl__preview{display:none}
  .pl__row{grid-template-columns:40px 1fr 90px;grid-template-areas:"n t c" "img img img";row-gap:6px;padding:22px 0}
  .pl__num{grid-area:n}.pl__main{grid-area:t}.pl__count{grid-area:c}.pl__arrow{display:none}
  .pl__mobile{display:block;grid-area:img;width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:14px}
  .pl__row:hover{padding-left:0}
}

/* ---------- galleries ---------- */
.gal,.page{padding:130px 20px 120px}
.gal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gal__title{font:400 clamp(64px,11vw,200px)/.9 var(--serif);letter-spacing:-.045em;overflow:hidden;padding-bottom:.08em}
.gal__title .ch{transform:translateY(110%);animation:rise .9s var(--ease) forwards;animation-delay:calc(.1s + var(--n) * .04s)}
.gal__meta{font-size:12px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;padding-bottom:1.2em}
.gal__meta a{color:var(--ink);border-bottom:1px solid currentColor}
.gal__nav{display:flex;gap:6px;flex-wrap:wrap;margin:28px 0 48px}
.gal__nav a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:12px;transition:all .3s}
.gal__nav a:hover,.gal__nav a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.masonry{columns:3;column-gap:var(--gap)}
.masonry figure{break-inside:avoid;margin-bottom:var(--gap);--d:calc(var(--n) * .08s)}
.masonry button{display:block;width:100%;overflow:hidden}
.masonry img{width:100%;transition:transform 1.2s var(--ease),filter .5s}
.masonry button:hover img{transform:scale(1.04)!important}
@media (max-width:900px){.masonry{columns:2}}
@media (max-width:500px){.masonry{columns:1}}

/* ---------- text pages ---------- */
.page__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:40px}
.page__text{font-size:clamp(18px,1.6vw,26px);line-height:1.45;max-width:30em}
.page__text p{margin-bottom:1em}
.big{font:400 clamp(40px,5vw,90px)/1.02 var(--serif);letter-spacing:-.03em;margin-bottom:.5em!important}
.big-link{font-size:clamp(22px,2.4vw,40px);background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:background-size .4s var(--ease)}
.big-link:hover{background-size:0 1px}
@media (max-width:800px){.page__grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--bg);padding:80px 20px 16px;overflow:hidden}
.ftr h4{color:rgba(243,239,232,.5)}
.ftr__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.ftr__lines{font:400 clamp(34px,4.4vw,72px)/1.02 var(--serif);letter-spacing:-.03em}
.ftr__cta{display:inline-flex;gap:12px;align-items:center;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-top:28px;padding-bottom:6px;border-bottom:1px solid rgba(243,239,232,.4)}
.ftr__cta span{transition:transform .4s var(--ease)}
.ftr__cta:hover span{transform:translateX(6px)}
.ftr__col a{display:block;font-size:15px;line-height:1.8;opacity:.85;transition:opacity .3s,transform .3s}
.ftr__col a:hover{opacity:1;transform:translateX(4px)}
.ftr__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:140px}
.ftr__mark{font:400 clamp(44px,8.6vw,150px)/.8 var(--serif);letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(243,239,232,.7);transition:color .6s var(--ease)}
.ftr__mark:hover{color:var(--bg)}
.ftr small{font-size:10px;opacity:.6;white-space:nowrap}
@media (max-width:800px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__lines{grid-column:1/-1}.ftr__bottom{flex-direction:column;align-items:flex-start;margin-top:80px}.ftr__mark{font-size:12vw}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;background:rgba(20,20,20,.96);display:flex;align-items:center;justify-content:center;padding:60px 70px;color:var(--bg);opacity:0;transition:opacity .4s}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb figure{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;background:none;transition:opacity .3s,transform .5s var(--ease)}
.lb img.swap{opacity:0;transform:scale(.98)}
.lb__close{position:absolute;top:14px;right:22px;font-size:36px;line-height:1}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);font:400 26px/1 var(--serif);padding:20px;opacity:.7;transition:opacity .3s,transform .3s}
.lb__nav:hover{opacity:1}
.lb__prev{left:10px}.lb__next{right:10px}
.lb__prev:hover{transform:translate(-4px,-50%)}.lb__next:hover{transform:translate(4px,-50%)}
.lb__count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.1em;opacity:.7}
@media (max-width:700px){.lb{padding:50px 10px}.lb__nav{padding:10px;font-size:20px}}

section:focus,section:focus-visible{outline:none}