@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root{--charcoal:#1A1A1A;--mustard:#C9A86A;--mustard-2:#C89B3C;--navy:#16202F;--walnut:#4A3428;--steel:#2A2E32;--concrete:#B8B3A8;--cream:#F7F3EE;--paper:#FFFCF7;--line:rgba(26,26,26,0.08)}
*{margin:0;padding:0;box-sizing:border-box}
html{overscroll-behavior:none}
body{background:var(--cream);color:var(--charcoal);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.serif{font-family:'Cormorant Garamond',serif;font-weight:300}
.display{font-family:'Instrument Serif',serif;font-weight:400}
.tiny{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;font-weight:500;opacity:0.6}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
#progress{position:fixed;top:0;left:0;height:1px;background:var(--charcoal);z-index:1000;transform-origin:left;will-change:transform}
#progress::after{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:var(--mustard);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 0.9s cubic-bezier(0.22,1,0.36,1)}
nav#topnav{position:fixed;top:0;left:0;right:0;height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 48px;z-index:900;mix-blend-mode:normal;color:var(--charcoal)}
nav#topnav .wordmark{font-family:'Instrument Serif',serif;letter-spacing:0.12em;font-size:18px;font-weight:700}
nav#topnav .links{display:flex;gap:40px;align-items:center}
nav#topnav .links a{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;opacity:0.8;transition:opacity .6s;position:relative;font-weight:700}
nav#topnav .links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .6s cubic-bezier(0.22,1,0.36,1)}
nav#topnav .links a:hover{opacity:1}
nav#topnav .links a:hover::after{width:100%}
#chapter-ind{position:fixed;bottom:40px;left:48px;z-index:900;display:flex;gap:16px;align-items:baseline}
#chapter-ind .cur{font-family:'Instrument Serif';font-size:48px;line-height:1}
#chapter-ind .meta{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;opacity:0.5;line-height:1.4}
#counter{position:fixed;bottom:40px;right:48px;z-index:900;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;opacity:0.4}
#scroller{height:100vh;width:100vw;overflow:hidden;position:relative}
#track{display:flex;height:100vh;width:500vw;will-change:transform}
.chapter{width:100vw;height:100vh;flex-shrink:0;position:relative;overflow:hidden;background:var(--cream);display:flex}
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1.4s cubic-bezier(0.22,1,0.36,1), transform 1.4s cubic-bezier(0.22,1,0.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-slow{transition-duration:1.8s;transition-delay:0.2s}
.img-reveal{overflow:hidden;position:relative}
.img-reveal img{transform:scale(1.12);transition:transform 2.8s cubic-bezier(0.22,1,0.36,1)}
.img-reveal.in img{transform:scale(1)}
/* Chapter specific */
.ch1 .hero{position:absolute;inset:0 0 0 28vw}
.ch1 .hero img{object-position:60% center}
.ch1 .type{position:absolute;left:5vw;top:22vh;z-index:2}
.ch1 .type h1{font-size:11vw;line-height:0.85;letter-spacing:-0.03em}
.ch1 .type .tag{margin-top:5vh;max-width:22ch;font-size:14px;line-height:1.7;opacity:0.6}
.ch1 .floating-num{position:absolute;right:4vw;top:14vh;font-family:'Instrument Serif';font-size:18vw;opacity:0.04;line-height:1;pointer-events:none}
.ch1 .ch1-passage{position:absolute;left:16vw;bottom:6vh;max-width:24ch;line-height:1.6;text-wrap:balance;z-index:3}

.ch2{background:var(--paper)}
.ch2 .left-img{position:absolute;left:0;top:0;width:46vw;height:100vh}
.ch2 .right-content{margin-left:52vw;width:42vw;padding-top:18vh}
.ch2 .kraft{position:absolute;left:20vw;top:74vh;width:22vw;background:#E8DDD0;padding:28px 24px;transform:rotate(-1.2deg);box-shadow:0 24px 80px rgba(0,0,0,0.08);z-index:3}
.ch2 .kraft p{font-family:'Cormorant Garamond';font-size:18px;line-height:1.3}

.ch3{background:var(--cream)}
.ch3 .look{position:absolute;will-change:transform}
.ch3 .look-1{left:6vw;top:16vh;width:22vw;height:68vh}
.ch3 .look-2{left:32vw;top:10vh;width:18vw;height:58vh}
.ch3 .look-3{left:54vw;top:22vh;width:20vw;height:64vh}
.ch3 .look-4{left:78vw;top:8vh;width:22vw;height:74vh}
.ch3 .look-meta{position:absolute;bottom:-28px;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline}
.ch3 .look-meta h4{font-family:'Instrument Serif';font-size:22px}
.ch3 .look-meta span{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;opacity:0.5}

.ch4{background:#101010;color:var(--cream)}
.ch4 .macro{position:absolute;left:0;top:0;width:62vw;height:100vh}
.ch4 .details{position:absolute;left:66vw;top:18vh;width:30vw}
.ch4 .ditem{border-top:1px solid rgba(247,243,238,0.12);padding:18px 0;display:flex;gap:24px}
.ch4 .ditem .n{font-size:10px;opacity:0.4;margin-top:4px}
.ch4 .ditem h5{font-family:'Instrument Serif';font-size:20px;font-weight:400}
.ch4 .ditem p{font-size:13px;opacity:0.5;line-height:1.6;margin-top:6px}

.ch5{background:var(--paper);overflow:hidden}
.ch5 .boutique-scroll{width:100%;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;outline:none;padding-top:72px}
.boutique-intro{padding:72px 5vw 48px}
.boutique-intro h2{font-size:5vw;line-height:.95;margin-top:14px}
.boutique-intro p{max-width:46ch;margin-top:20px;font-size:14px;line-height:1.8;opacity:.6}
.boutique-panel{display:grid;grid-template-columns:1fr 1fr;min-height:82vh;border-top:1px solid var(--line)}
.boutique-panel>img{height:82vh}
.boutique-info{padding:10vh 6vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.boutique-panel.reverse .boutique-info{padding-left:10vw}
.boutique-info h3{font-size:4vw;line-height:1;margin-top:16px}
.boutique-info>p{max-width:46ch;margin-top:24px;font-size:14px;line-height:1.85;opacity:.65}
.services{margin-top:32px}
.services ul{list-style:none;margin-top:12px;font-size:13px;line-height:2;opacity:.68}
.services li::before{content:'— ';}
.boutique-info .btn{margin-top:34px}
.boutique-static{cursor:default;opacity:.65}
.boutique-footer{padding:90px 5vw 110px;text-align:center}
.boutique-footer .display{font-size:28px;opacity:.55}
.boutique-footer .btn{margin-top:28px}


.btn{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;border:1px solid currentColor;padding:14px 24px;display:inline-block;transition:all .6s cubic-bezier(0.22,1,0.36,1)}
.btn:hover{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.btn-ghost{border-bottom:1px solid currentColor;padding-bottom:3px;font-size:10px;letter-spacing:0.2em;text-transform:uppercase}

#drawer{position:fixed;top:0;right:0;width:460px;max-width:94vw;height:100vh;background:var(--walnut);color:var(--cream);z-index:1001;transform:translateX(100%);transition:transform .9s cubic-bezier(0.22,1,0.36,1)}
#drawer.open{transform:translateX(0)}
#drawer header{padding:28px 32px;display:flex;justify-content:space-between;border-bottom:1px solid rgba(247,243,238,0.12)}
#drawer .body{flex:1;overflow:auto;padding:24px 32px;height:calc(100vh - 160px)}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,0.28);z-index:1000;opacity:0;pointer-events:none;transition:opacity .6s}
#overlay.show{opacity:1;pointer-events:auto}
.cart-item{display:flex;gap:16px;margin-bottom:20px}

.wheel-hint{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:900;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0.4;transition:opacity .6s}
.wheel-hint.hide{opacity:0}
.wheel-hint .mouse{width:22px;height:34px;border:1px solid var(--charcoal);border-radius:11px;position:relative}
.wheel-hint .mouse::after{content:'';position:absolute;left:50%;top:8px;width:2px;height:6px;background:var(--charcoal);border-radius:1px;transform:translateX(-50%);animation:wheelMove 2.2s infinite}
@keyframes wheelMove{0%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,10px);opacity:0}}

@media(max-width:900px){
 body{overflow:auto}
 #scroller{height:auto;overflow:visible}
 #track{flex-direction:column;width:100vw !important;transform:none !important;height:auto}
 .chapter{width:100vw !important;height:auto;min-height:100vh;flex-direction:column}
 .ch1 .hero{position:relative;inset:auto;width:100vw;height:80vh}
 .ch1 .type{position:relative;left:auto;top:auto;padding:8vw}
 .ch1 .ch1-passage{left:8vw;bottom:4vh;max-width:28ch}
 .ch2 .left-img{position:relative;width:100vw;height:70vh}
 .ch2 .right-content{margin-left:0;width:100vw;padding:8vw}
 .ch2 .kraft{position:relative;left:auto;top:auto;width:86vw;margin:0 7vw;transform:none}
 .ch3 .look{position:relative;left:auto !important;top:auto !important;width:86vw !important;height:70vh !important;margin:4vh 7vw}
 .ch4 .macro{position:relative;width:100vw;height:70vh}
 .ch4 .details{position:relative;left:auto;top:auto;width:86vw;margin:6vw 7vw}
 .ch5{min-height:100vh}
 .ch5 .boutique-scroll{height:auto;overflow:visible;padding-top:72px}
 .boutique-intro{padding:12vw 7vw 10vw}
 .boutique-intro h2{font-size:13vw}
 .boutique-panel,.boutique-panel.reverse{grid-template-columns:1fr;min-height:0}
 .boutique-panel>img{height:62vh}
 .boutique-panel.reverse .boutique-info{order:2}
 .boutique-info{padding:14vw 8vw}
 .boutique-info h3{font-size:12vw}
 nav#topnav{padding:0 24px;background:rgba(247,243,238,0.9);mix-blend-mode:normal;color:var(--charcoal)}
 #chapter-ind{bottom:20px;left:24px}
 #counter{bottom:20px;right:24px}
}

/* Fix: allow vertical scroll on non-home pages */
body.page-scroll, body.shop-page, html.page-scroll{overflow:auto !important;height:auto !important}
#track{width:500vw}