:root {
    --ink:#11110f;
    --ink-soft:#1b1b18;
    --paper:#f2f0ea;
    --paper-warm:#e8e4dc;
    --white:#f8f7f3;
    --muted:#77766f;
    --line:rgba(17,17,15,.16);
    --line-light:rgba(255,255,255,.2);
    --sans:"DM Sans",sans-serif;
    --serif:"Instrument Serif",serif;
    --container:1540px;
    --side:clamp(24px,4vw,72px);
    --transition:cubic-bezier(.22,1,.36,1);
}

/* RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}
figure{margin:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}

/* GLOBAL */
.container-wide{
    width:min(100%,var(--container));
    margin:0 auto;
    padding-left:var(--side);
    padding-right:var(--side);
}
.section-pad{padding:clamp(100px,11vw,190px) 0}
.section-pad-dark{
    padding:clamp(100px,11vw,190px) 0;
    background:var(--ink);
    color:var(--white);
}
.eyebrow{
    margin:0;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.eyebrow.light{color:rgba(255,255,255,.67)}
.text-link{
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding-bottom:4px;
    border-bottom:1px solid currentColor;
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    transition:gap .35s var(--transition),opacity .3s ease;
}
.text-link:hover{gap:24px;opacity:.65}
.text-link-light{color:var(--white)}

/* HEADER */
.site-header{
    position:absolute;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    background:var(--ink);
    color:var(--white);
}
.nav-shell{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:0 var(--side);
}
.brand{
    flex-shrink:0;
    font-family:var(--serif);
    font-size:1.8rem;
    line-height:1;
    letter-spacing:-.015em;
    color:var(--white);
}
.desktop-nav{
    display:flex;
    align-items:center;
    gap:clamp(28px,3vw,52px);
}
.desktop-nav a{
    position:relative;
    padding:10px 0;
    color:var(--white);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.desktop-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:5px;
    width:100%;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .35s var(--transition);
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after{
    transform:scaleX(1);
    transform-origin:left;
}
.menu-toggle{
    display:none;
    align-items:center;
    gap:18px;
    border:0;
    background:none;
    color:var(--white);
    cursor:pointer;
    padding:12px 0;
    font-size:.73rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.menu-icon{
    position:relative;
    display:block;
    width:28px;
    height:10px;
}
.menu-icon i{
    position:absolute;
    left:0;
    width:100%;
    height:1px;
    background:var(--white);
    transition:transform .4s var(--transition),top .4s var(--transition);
}
.menu-icon i:first-child{top:1px}
.menu-icon i:last-child{top:9px}
.menu-open .menu-icon i:first-child{top:5px;transform:rotate(45deg)}
.menu-open .menu-icon i:last-child{top:5px;transform:rotate(-45deg)}

/* MENU OVERLAY */
.menu-overlay{
    position:fixed;
    z-index:90;
    inset:0;
    background:var(--ink);
    color:var(--white);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s var(--transition),visibility .5s;
}
.menu-open .menu-overlay{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}
.menu-overlay-inner{
    height:100%;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    padding:150px var(--side) 70px;
}
.overlay-nav{
    display:flex;
    flex-direction:column;
    width:min(900px,75vw);
}
.overlay-nav a{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    border-bottom:1px solid var(--line-light);
    font-family:var(--serif);
    font-size:clamp(3.6rem,7vw,8rem);
    line-height:.95;
    letter-spacing:-.02em;
    padding:10px 0 14px;
    transition:padding-left .35s var(--transition),opacity .3s;
}
.overlay-nav a:hover{padding-left:18px;opacity:.6}
.overlay-nav a span{
    padding-top:12px;
    font-family:var(--sans);
    font-size:.65rem;
    letter-spacing:.12em;
}
.overlay-meta{
    padding-left:70px;
    font-size:.78rem;
    color:rgba(255,255,255,.6);
}
.overlay-meta a{
    display:inline-block;
    margin-top:22px;
    color:var(--white);
    border-bottom:1px solid rgba(255,255,255,.4);
}

/* HERO */
.hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#111;
    color:var(--white);
}
.hero-image,.hero-shade{position:absolute;inset:0}
.hero-image img{transform:scale(1.015)}
.hero-shade{
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.03) 0%,
        rgba(0,0,0,.20) 30%,
        rgba(0,0,0,.54) 62%,
        rgba(0,0,0,.98) 100%
    );
}
.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:135px var(--side) clamp(70px,8vw,120px);
}
.hero h1{
    max-width:1150px;
    margin:22px 0 42px;
    font-size:clamp(4.3rem,9vw,10.5rem);
    line-height:.82;
    letter-spacing:-.025em;
    color:var(--white);
}
.hero h1 em{font-weight:400;color:var(--white)}
.hero-bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
}
.hero-bottom p{
    max-width:410px;
    margin:0;
    color:rgba(255,255,255,.77);
    font-size:clamp(.9rem,1.05vw,1.05rem);
}
.scroll-indicator{
    position:absolute;
    z-index:2;
    bottom:24px;
    left:var(--side);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.55rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}
.scroll-indicator span{
    display:block;
    width:34px;
    height:1px;
    background:rgba(255,255,255,.45);
}

/* INTRO */
.intro-grid{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(0,3.2fr);
    gap:clamp(50px,8vw,150px);
}
.intro-copy h2{
    max-width:1050px;
    margin:0 0 clamp(65px,8vw,130px);
    font-size:clamp(3.8rem,7vw,8.3rem);
    line-height:.92;
    letter-spacing:-.02em;
}
.intro-copy h2 em{font-weight:400}
.intro-text-grid{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:clamp(45px,8vw,140px);
    align-items:start;
}
.lead-copy{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(1.65rem,2.45vw,2.8rem);
    line-height:1.16;
    letter-spacing:-.01em;
}
.intro-secondary{max-width:470px}
.intro-secondary p{color:#5e5d57}
.intro-secondary .text-link{margin-top:25px}

/* WORK */
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:clamp(65px,8vw,125px);
}
.section-heading h2{
    margin:15px 0 0;
    font-size:clamp(4rem,7vw,8rem);
    line-height:.88;
    letter-spacing:-.02em;
}
.work-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(26px,3vw,54px);
    align-items:start;
}
.work-item figure{display:block}
.work-image{overflow:hidden;background:#252522}
.work-image img{transition:transform 1s var(--transition),filter .5s ease}
.work-item:hover .work-image img{transform:scale(1.025)}
.work-item-large{grid-column:1 / span 7}
.work-item-large .work-image{aspect-ratio:1.15/1}
.work-item-tall{grid-column:9 / span 4;margin-top:clamp(90px,12vw,190px)}
.work-item-tall .work-image{aspect-ratio:.72/1}
.work-item-portrait{grid-column:2 / span 4;margin-top:clamp(80px,10vw,160px)}
.work-item-portrait .work-image{aspect-ratio:.8/1}
.work-item-wide{grid-column:7 / span 6;margin-top:clamp(20px,4vw,70px)}
.work-item-wide .work-image{aspect-ratio:1.2/1}
.work-item figcaption{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:13px;
    font-size:.64rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.52);
}
.work-item figcaption span:first-child{color:rgba(255,255,255,.9)}

/* STUDIO */
.studio{background:var(--paper-warm)}
.studio-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr);
    gap:clamp(60px,10vw,170px);
    align-items:center;
}
.studio-image img{aspect-ratio:.82/1}
.image-caption{
    display:flex;
    justify-content:space-between;
    margin-top:12px;
    font-size:.62rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
}
.studio-content{padding-right:clamp(0px,5vw,70px)}
.studio-content h2{
    margin:20px 0 50px;
    font-size:clamp(3.6rem,6vw,7rem);
    line-height:.92;
    letter-spacing:-.02em;
}
.studio-content h2 em{font-weight:400}
.studio-lead{
    font-family:var(--serif);
    font-size:clamp(1.6rem,2vw,2.3rem);
    line-height:1.2;
    letter-spacing:-.01em;
}
.studio-content>p:not(.eyebrow):not(.studio-lead){max-width:530px;color:#5d5c56}
.studio-content .text-link{margin-top:28px}

/* PROCESS */
.process{background:var(--paper)}
.process-heading{
    display:grid;
    grid-template-columns:1fr 3fr;
    margin-bottom:clamp(70px,9vw,150px);
}
.process-heading h2{
    grid-column:2;
    margin:18px 0 0;
    font-size:clamp(4.5rem,8vw,9rem);
    line-height:.84;
    letter-spacing:-.02em;
}
.process-heading h2 em{font-weight:400}
.process-list{border-top:1px solid var(--line)}
.process-step{
    display:grid;
    grid-template-columns:1fr 1.5fr 1.5fr;
    gap:40px;
    padding:43px 0;
    border-bottom:1px solid var(--line);
}
.process-number{font-size:.66rem;letter-spacing:.16em}
.process-title h3{
    margin:0;
    font-size:clamp(1.9rem,3vw,3.4rem);
    line-height:1.04;
    letter-spacing:-.01em;
}
.process-copy p{
    max-width:480px;
    margin:0;
    color:#66645e;
    font-size:.94rem;
}

/* GALLERY */
.gallery-strip{
    background:var(--ink);
    color:var(--white);
    padding:clamp(70px,8vw,120px) 0 clamp(100px,12vw,190px);
    overflow:hidden;
}
.gallery-track{
    display:flex;
    align-items:center;
    gap:clamp(18px,2vw,32px);
    width:100%;
    margin:0;
    padding:0 var(--side) 10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--side);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    cursor:grab;
}
.gallery-track:active{cursor:grabbing}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px}
.gallery-panel{
    flex:0 0 clamp(420px,42vw,680px);
    width:clamp(420px,42vw,680px);
    height:auto;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}
.gallery-panel-landscape{aspect-ratio:1.08/1}
.gallery-panel-portrait{
    flex-basis:clamp(320px,31vw,480px);
    width:clamp(320px,31vw,480px);
    aspect-ratio:.72/1;
}
.gallery-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.1s var(--transition);
}
.gallery-panel:hover img{transform:scale(1.025)}
.gallery-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:26px;
}
.gallery-dot{
    display:block;
    width:5px;
    height:5px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    cursor:pointer;
    transition:width .35s var(--transition),background .35s ease;
}
.gallery-dot.is-active{
    width:24px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
}
.gallery-link-wrap{
    display:flex;
    justify-content:center;
    padding-top:clamp(80px,10vw,150px);
}
.gallery-link{
    position:relative;
    display:grid;
    place-content:center;
    width:clamp(210px,20vw,310px);
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;
    text-align:center;
    transition:background .45s var(--transition),color .45s var(--transition);
}
.gallery-link:hover{background:var(--white);color:var(--ink)}
.gallery-link>span:first-child{
    font-size:.63rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.gallery-link-serif{
    font-family:var(--serif);
    font-size:clamp(2.2rem,3.5vw,4rem);
    line-height:.94;
    letter-spacing:-.01em;
}
.gallery-arrow{position:absolute;top:22%;right:20%;font-size:1rem}

/* CONTACT */
.contact-cta{
    background:#292925;
    color:var(--white);
    padding:clamp(110px,13vw,210px) 0;
}
.contact-cta h2{
    max-width:1200px;
    margin:25px 0 clamp(70px,9vw,145px);
    font-size:clamp(4.3rem,8vw,9.5rem);
    line-height:.86;
    letter-spacing:-.02em;
}
.contact-cta h2 em{font-weight:400}
.contact-bottom{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:60px;
}
.contact-bottom>p{
    max-width:460px;
    margin:0;
    color:rgba(255,255,255,.62);
}
.cta-circle{
    position:relative;
    display:grid;
    place-content:center;
    width:clamp(190px,18vw,270px);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--white);
    color:var(--ink);
    text-align:center;
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:transform .45s var(--transition);
}
.cta-circle:hover{transform:scale(1.04)}
.cta-arrow{position:absolute;right:24%;top:21%;font-size:1rem}

/* FOOTER */
.site-footer{
    padding:clamp(75px,8vw,125px) 0 28px;
    background:var(--ink);
    color:var(--white);
}
.footer-main{
    display:grid;
    grid-template-columns:1.5fr 2fr;
    gap:80px;
    padding-bottom:clamp(80px,10vw,150px);
}
.footer-brand{
    font-family:var(--serif);
    font-size:clamp(4rem,8vw,9rem);
    line-height:.84;
    letter-spacing:-.02em;
}
.footer-columns{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}
.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    font-size:.78rem;
    color:rgba(255,255,255,.68);
}
.footer-column p{margin-bottom:6px}
.footer-column a{margin-bottom:6px;transition:color .2s}
.footer-column a:hover{color:var(--white)}
.footer-label{
    margin-bottom:18px!important;
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--white);
}
.footer-bottom{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:30px;
    padding-top:22px;
    border-top:1px solid var(--line-light);
    font-size:.6rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
}
.footer-bottom p{margin:0}

/* REVEAL */
.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .9s var(--transition),transform .9s var(--transition);
}
.reveal.is-visible{opacity:1;transform:none}

/* TABLET / MOBILE NAV */
@media (max-width:900px){
    .desktop-nav{display:none}
    .menu-toggle{display:flex}
    .nav-shell{height:68px}
    .hero-content{padding-top:120px}
    .hero h1{font-size:clamp(4rem,15vw,7rem)}
    .hero-bottom{align-items:flex-start;flex-direction:column}

    .intro-grid,.studio-grid{grid-template-columns:1fr}
    .intro-label{margin-bottom:20px}
    .intro-text-grid{grid-template-columns:1fr;gap:45px}

    .work-grid{gap:60px 24px}
    .work-item-large{grid-column:1 / span 8}
    .work-item-tall{grid-column:9 / span 4}
    .work-item-portrait{grid-column:1 / span 5}
    .work-item-wide{grid-column:6 / span 7}

    .studio-content{padding:20px 0 0}
    .process-heading{grid-template-columns:1fr}
    .process-heading h2{grid-column:1}
    .process-step{grid-template-columns:70px 1fr}
    .process-copy{grid-column:2}

    .gallery-panel{
        flex-basis:clamp(360px,62vw,560px);
        width:clamp(360px,62vw,560px);
    }
    .gallery-panel-portrait{
        flex-basis:clamp(290px,48vw,430px);
        width:clamp(290px,48vw,430px);
    }

    .footer-main{grid-template-columns:1fr;gap:70px}
}

/* MOBILE */
@media (max-width:600px){
    :root{--side:20px}
    .section-pad,.section-pad-dark{padding:90px 0}

    .nav-shell{height:64px}
    .brand{font-size:1.6rem}
    .menu-toggle span:first-child{display:none}

    .hero{min-height:92svh}
    .hero-content{padding:108px var(--side) 68px}
    .hero h1{
        margin:16px 0 34px;
        font-size:clamp(3.9rem,18vw,6.3rem);
        line-height:.86;
        letter-spacing:-.02em;
    }
    .hero-bottom p{font-size:.86rem}
    .scroll-indicator{display:none}

    .menu-overlay-inner{
        grid-template-columns:1fr;
        align-content:end;
        padding:110px var(--side) 40px;
    }
    .overlay-nav{width:100%}
    .overlay-nav a{
        font-size:clamp(3.4rem,17vw,5.5rem);
        letter-spacing:-.015em;
    }
    .overlay-meta{padding:45px 0 0}

    .intro-copy h2{
        font-size:clamp(3.4rem,15vw,5.3rem);
        margin-bottom:65px;
        line-height:.95;
        letter-spacing:-.015em;
    }
    .lead-copy{font-size:1.7rem}

    .section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:30px;
    }
    .section-heading h2{
        font-size:4.1rem;
        line-height:.92;
        letter-spacing:-.015em;
    }

    .work-grid{display:block}
    .work-item{display:block;margin:0 0 70px!important}
    .work-item:nth-child(even){width:82%;margin-left:auto!important}
    .work-item:nth-child(odd){width:93%}
    .work-item figcaption{font-size:.57rem}

    .studio-grid{gap:60px}
    .studio-image{width:93%}
    .studio-content h2{
        font-size:4rem;
        line-height:.94;
        letter-spacing:-.015em;
    }

    .process-heading{margin-bottom:70px}
    .process-heading h2{
        font-size:4.5rem;
        line-height:.88;
        letter-spacing:-.015em;
    }
    .process-step{
        grid-template-columns:45px 1fr;
        gap:25px;
        padding:34px 0;
    }
    .process-title h3{font-size:2.15rem}
    .process-copy{grid-column:2}

    .gallery-track{gap:14px;padding:0 var(--side) 8px}
    .gallery-panel{flex-basis:82vw;width:82vw}
    .gallery-panel-landscape{aspect-ratio:1.05/1}
    .gallery-panel-portrait{
        flex-basis:68vw;
        width:68vw;
        aspect-ratio:.72/1;
    }

    .contact-cta h2{
        font-size:4.3rem;
        line-height:.9;
        letter-spacing:-.015em;
    }
    .contact-bottom{grid-template-columns:1fr;gap:65px}
    .cta-circle{justify-self:end;width:200px}

    .footer-main{gap:60px}
    .footer-brand{font-size:5.1rem;letter-spacing:-.015em}
    .footer-columns{grid-template-columns:1fr 1fr;gap:50px 30px}
    .footer-bottom{grid-template-columns:1fr auto}
    .footer-bottom p:nth-child(2){display:none}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
    .reveal{opacity:1;transform:none}
}