/* Jolyne — boho rock chic: ecru paper, espresso ink, a rust thread, film grain. Full-bleed openings, 12-col grid below. */
:root{
  --ink:#1B1613; --paper:#F2EDE6; --bone:#E7E0D6; --muted:#8C8278; --line:#DCD3C8; --rust:#8A3B22; --espresso:#1E1814;
  --pad:clamp(16px,3vw,48px);
  --sans:'Instrument Sans',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --io:cubic-bezier(.76,0,.24,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body::after{content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.p{font-size:15px;line-height:1.75;letter-spacing:.005em;text-transform:none;margin:0;max-width:56ch}
.muted{color:var(--muted)}
.serif{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.005em}
.wrap{padding:0 var(--pad)}

/* ---------- header: transparent, always legible via difference blend ---------- */
.hd{position:absolute;inset:0 0 auto 0;z-index:80;display:grid;grid-template-columns:1fr auto;align-items:center;padding:28px var(--pad);color:var(--ink);pointer-events:none;transition:color .6s,transform .9s var(--io)}
.hd.light,.menu-open .hd{color:#F2EDE6}
.hd.away{transform:none}
.menu-open .hd.away{transform:none}
.hd>*{pointer-events:auto}
.hd .logo img{height:46px;width:auto;transition:filter .6s}
.hd.light .logo img,.menu-open .hd .logo img{filter:invert(1)}
.hd-mid{justify-self:center;opacity:.9}
.hd-nav{justify-self:end;display:flex;gap:clamp(36px,4.4vw,72px)}
.hd-nav a{position:relative;padding:4px 0}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--io)}
.hd-nav a:hover::after,.hd-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.menu-btn{justify-self:end;display:none;align-items:center;gap:14px;height:30px}
.mb-roll{display:block;height:1.3em;overflow:hidden;line-height:1.3}
.mb-roll span{display:block;transition:transform .8s var(--io)}
.menu-open .mb-roll span{transform:translateY(-100%)}
.menu-btn i{position:relative;width:26px;height:9px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .8s var(--io),top .8s var(--io)}
.menu-btn i::before{top:0}.menu-btn i::after{top:8px}
.menu-btn:hover i::after{transform:scaleX(.6);transform-origin:right}
.menu-open .menu-btn i::before{top:4px;transform:rotate(14deg)}
.menu-open .menu-btn i::after{top:4px;transform:rotate(-14deg)}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:70;background:var(--espresso);color:#EDE6DC;visibility:hidden;clip-path:inset(0 0 100% 0)}
.menu-pic{position:absolute;right:var(--pad);top:50%;width:min(22vw,320px);aspect-ratio:4/5;transform:translateY(-50%);overflow:hidden;opacity:.9}
.menu-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .9s var(--io),transform 1.6s var(--out);filter:grayscale(.15)}
.menu-pic img.on{opacity:1;transform:scale(1)}
.menu-in{position:absolute;inset:0;padding:120px var(--pad) 32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:16px}
.menu ul{list-style:none;margin:0;padding:0}
.menu-main{grid-column:1/span 6;align-self:center}
.menu-main a,.menu-proj a{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mi{display:inline-flex;align-items:baseline;gap:18px}
.menu-main .mi{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.005em;font-size:clamp(30px,2.8vw,44px);line-height:1.35;transition:color .5s,padding .9s var(--out)}
.mn{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--rust);min-width:22px}
.menu-main:hover .mi{color:#6F655C}
.menu-main a:hover .mi{color:#EDE6DC;padding-left:14px}
.menu-side{grid-column:5/span 3;align-self:center;display:flex;flex-direction:column;gap:18px}
.menu-k{color:var(--muted)}
.menu-proj .mi{font-family:var(--sans);font-style:normal;font-weight:400;font-size:11px;letter-spacing:.14em;line-height:2.4;transition:opacity .5s}
.menu-proj:hover .mi{opacity:.45}.menu-proj a:hover .mi{opacity:1}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#B7B1AA}
.menu-foot a:hover{color:#fff}

/* ---------- transitions / cursor ---------- */
.veil{position:fixed;inset:0;z-index:95;background:var(--ink);pointer-events:none;display:none}
html.js .veil{display:block}
.cur{display:none!important;position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;mix-blend-mode:difference;opacity:0;display:grid;place-items:center;transition:width .6s var(--out),height .6s var(--out),margin .6s var(--out)}
.cur span{font-size:9px;letter-spacing:.16em;color:#000;opacity:0;transition:opacity .3s}
.cur.big{width:84px;height:84px;margin:-42px 0 0 -42px}
.cur.big span{opacity:1}
@media (hover:none){.cur{display:none}}

/* ---------- reveal primitives ---------- */
html.js [data-fade],html.js [data-hero-in]{opacity:0;transform:translateY(20px)}
.line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:inline-block;will-change:transform}
.rv{overflow:hidden;position:relative;background:var(--bone)}
.rv>img{filter:sepia(.06) saturate(.96)}
.rv>img,.rv>video{width:100%;height:100%;object-fit:cover}
html.js .rv[data-reveal]{clip-path:inset(100% 0 0 0)}

/* ---------- sketch intro ---------- */
.sk{display:none}
html.js .sk{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center}
html.js.seen .sk{display:none}
html.js.seen .is-home .sk{display:grid}
.sk-c{width:min(74vh,80vw);height:auto;mix-blend-mode:multiply;opacity:0}
.sk-cap{position:absolute;left:var(--pad);bottom:28px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.sk-cap span:first-child{color:var(--ink)}
.sk-skip{position:absolute;right:var(--pad);bottom:28px;color:var(--muted);transition:color .4s}
.sk-skip:hover{color:var(--ink)}

/* ---------- home hero ---------- */
.is-home{overflow:hidden}
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--bone)}
.hero-pic{position:absolute;inset:0;overflow:hidden}
.hero-art{position:absolute;inset:0;animation:breathe 18s ease-in-out infinite alternate}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:56% 40%}
.hero-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
html.js .hero-pic{clip-path:inset(50% 0 50% 0)}
.hero-meta{position:absolute;left:var(--pad);bottom:32px;display:flex;flex-direction:column;gap:7px}
.muted-l{opacity:.62}
.hero-cta{position:absolute;right:var(--pad);bottom:34px;display:flex;align-items:center;gap:16px}
.hero-cta i{position:relative;width:54px;height:1px;background:currentColor;overflow:hidden}
.hero-cta i::after{content:"";position:absolute;inset:0;background:var(--rust);transform:translateX(-101%);animation:cta 2.8s var(--io) infinite}
@keyframes cta{0%{transform:translateX(-101%)}50%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* ---------- page heads ---------- */
.ph-plain{padding:180px var(--pad) 70px}
.ph .kick{display:flex;justify-content:space-between;margin-bottom:26px}
.ph-plain .kick{color:var(--muted)}
.ph h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.01em;font-size:clamp(38px,4.4vw,72px);line-height:1}
.ph-full{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#F2EDE6;background:var(--espresso)}
.ph-media{position:absolute;inset:0}
.ph-media>img,.ph-media>video{width:100%;height:115%;object-fit:cover;will-change:transform}
.ph-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.3) 0%,rgba(20,14,10,0) 30%,rgba(20,14,10,0) 50%,rgba(20,14,10,.5) 100%);pointer-events:none}
.ph-txt{position:absolute;left:var(--pad);right:var(--pad);bottom:38px;z-index:2;pointer-events:none}
.ph-scroll{position:absolute;right:var(--pad);top:50%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;writing-mode:vertical-rl}
.ph-scroll i{display:block;width:1px;height:46px;background:currentColor;transform-origin:top;animation:sc 2.4s var(--io) infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ph-media[data-play]{cursor:pointer}
.ph-media[data-play]::after{content:"Play with sound";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:15px 24px;border:1px solid rgba(255,255,255,.7);color:#fff;transition:opacity .5s,background .5s}
.ph-media[data-play]:hover::after{background:rgba(255,255,255,.12)}
.ph-media.playing::after{opacity:0}
.ph-full:has(.playing)::after,.ph-full:has(.playing) .ph-txt,.ph-full:has(.playing) .ph-scroll{opacity:0;transition:opacity .6s}

/* ---------- work ---------- */
.works{padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);align-items:start}
.wk{display:flex;flex-direction:column;gap:16px}
.wk:nth-child(2){margin-top:120px}
.wk:nth-child(3){margin-top:240px}
.wk-img{display:block;aspect-ratio:4/5}
.wk-img img{transition:transform 1.8s var(--out),filter 1.2s var(--out)}
.wk:hover .wk-img img{transform:scale(1.06)}
.wk-row{display:flex;align-items:baseline;gap:14px;margin-top:6px}
.wk-n{color:var(--rust)}
.wk-t{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:0;font-size:clamp(22px,1.8vw,28px);line-height:1.05}
.wk-c{display:flex;justify-content:space-between;color:var(--muted)}

/* ---------- project sections ---------- */
.intro{padding:150px var(--pad) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start}
.intro .l{grid-column:1/span 3}
.intro .m{grid-column:4/span 5}
.intro .r{grid-column:10/span 3;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;color:var(--ink)}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;border:1px solid var(--ink);overflow:hidden;isolation:isolate;transition:color .7s var(--io)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .7s var(--io);z-index:-1}
.btn:hover{color:var(--paper)}.btn:hover::before{transform:translateY(0)}
.sec{padding:200px var(--pad) 0}
.sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start;margin-bottom:56px}
.sh .k{grid-column:1/span 3;display:flex;gap:14px}
.sh .k b{font-weight:400;color:var(--rust)}
.sh h2{grid-column:4/span 6;margin:0;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.012em;font-size:clamp(26px,2.3vw,36px);line-height:1.12}
.sh .p{grid-column:4/span 5;margin-top:20px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:16px}
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.cap{display:flex;justify-content:space-between;padding-top:12px;color:var(--muted)}
.quote{padding:240px var(--pad) 40px;text-align:center}
.quote p{margin:0 auto;max-width:980px;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.015em;font-size:clamp(26px,2.6vw,42px);line-height:1.2}

.next{display:block;margin-top:240px;border-top:1px solid var(--line);padding:40px var(--pad) 80px;overflow:hidden}
.next .k{display:flex;justify-content:space-between;color:var(--muted)}
.next .t{display:block;margin-top:26px;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.025em;font-size:clamp(34px,3.8vw,60px);line-height:1;transition:transform 1.2s var(--out)}
.next:hover .t{transform:translateX(2vw)}
.next .arrow{display:inline-block;transition:transform 1.2s var(--out)}
.next:hover .arrow{transform:translateX(14px)}

.ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;padding:26px var(--pad) 30px;border-top:1px solid var(--line);color:var(--muted)}
.ft a:hover{color:var(--ink)}

/* by hand */
.plaque{display:inline-flex;flex-direction:column;gap:3px;background:#FBFAF7;border:1px solid #E6E2DA;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:5px 8px 6px}
.plaque b{font-weight:400;font-size:9px;letter-spacing:.08em}
.plaque i{font-style:normal;font-size:7.5px;letter-spacing:.1em;color:#8A8A8A}
.wall{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.wall .row{display:flex;justify-content:center;align-items:flex-start;gap:1.6%}
.wall figure{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.wall figure img{width:100%;height:auto;transition:transform 1.2s var(--out)}
.wall figure:hover img{transform:translateY(-8px)}

/* about */
.about{min-height:100svh;padding:170px var(--pad) 110px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start}
.about .pic{grid-column:1/span 5;aspect-ratio:4/5;position:sticky;top:110px}
.about .txt{grid-column:7/span 5;display:flex;flex-direction:column;gap:36px}
.about h1{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:clamp(36px,3.6vw,58px);line-height:1.02}
.about .links{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:22px;border-top:1px solid var(--line)}
.about .links a{position:relative}
.about .links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--io)}
.about .links a:hover::after{transform:scaleX(1);transform-origin:left}

@media (max-width:820px){
  .hd{grid-template-columns:1fr auto}
  .hd-mid{display:none}
  .hd-nav{display:none}
  .menu-btn{display:flex}
  .hd .logo img{height:36px}
  .menu-pic{display:none}
  .menu-in{display:flex;flex-direction:column;justify-content:center;gap:40px;padding-top:100px}
  .menu-foot{flex-direction:column;margin-top:auto}
  .menu-main,.menu-side{align-self:stretch}
  .hero-img{object-position:58% 40%}
  .hero-coord{display:none}
  .hero-cta{left:var(--pad);right:auto;bottom:auto;top:96px}
  .hero-meta{flex-direction:column;gap:6px}
  .works{grid-template-columns:1fr;gap:56px}
  .wk:nth-child(n){margin-top:0}
  .intro .l,.intro .m,.intro .r,.sh .k,.sh h2,.sh .p{grid-column:1/-1;margin-top:14px}
  .grid>*{grid-column:1/-1!important}
  .five{grid-template-columns:1fr 1fr}
  .sec{padding-top:130px}
  .about .pic,.about .txt{grid-column:1/-1;position:static;margin-top:24px}
  .wall .row{flex-wrap:wrap;gap:24px}.wall figure{width:86%!important}
  .ph-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.js [data-fade],html.js [data-hero-in]{opacity:1;transform:none}
  html.js .rv[data-reveal]{clip-path:none}
  html.js .hero-name .ch>span{transform:none}
  html.js .sk{display:none}
}

/* ---------- sketchbook flip book ---------- */
.sb{position:relative}
.sb-pin{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:80px var(--pad) 24px;overflow:hidden}
.book{--bw:min(88vw,calc((100vh - 190px) * 1876 / 1098));position:relative;width:var(--bw);aspect-ratio:1876/1098;transform:scale(.6) translateX(-25%);transform-origin:50% 50%;cursor:pointer;flex:none}
.b-base,.leaf{position:absolute;top:0;left:50%;width:50%;height:100%}
.b-base{box-shadow:0 30px 60px -30px rgba(40,25,15,.45),0 2px 6px rgba(40,25,15,.18)}
.b-base img,.face img{width:100%;height:100%;display:block;object-fit:cover}
.leaf{transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.leaf:not(.cover){top:1.366%;height:95.9%;width:48.03%}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#F7F5F0}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sh,0);background:linear-gradient(90deg,rgba(30,20,12,.55),rgba(30,20,12,.08) 45%,rgba(30,20,12,0))}
.face.back::after{background:linear-gradient(270deg,rgba(30,20,12,.55),rgba(30,20,12,.08) 45%,rgba(30,20,12,0))}
.cover .face{box-shadow:0 30px 60px -30px rgba(40,25,15,.45),0 2px 6px rgba(40,25,15,.18);border-radius:0 3px 3px 0}
.cover .face.back{border-radius:3px 0 0 3px}
.spiral{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:400}
.spiral .rg{fill:none;stroke:url(#gold);stroke-width:5.5;stroke-linecap:round}
.spiral .rh{fill:none;stroke:rgba(255,240,205,.55);stroke-width:1.4;stroke-linecap:round}
.spiral .hl{opacity:var(--open,0)}
.sb-cap{width:var(--bw,80vw);max-width:100%;display:flex;justify-content:space-between;gap:16px;color:var(--muted)}
.sb-n{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:820px){.book{--bw:94vw}.sb-hint{display:none}}

/* ---------- paintings: hung on the wall, viewing room on click ---------- */
.pt-open{display:block;width:100%;cursor:zoom-in}
.pt-open img{width:100%;height:auto;display:block;transition:transform 1.2s var(--out),filter 1.2s var(--out)}
.pt-open:hover img{transform:translateY(-8px);filter:drop-shadow(0 22px 18px rgba(40,25,15,.18))}
.wall figure:hover img{transform:none}
.vr{position:fixed;inset:0;z-index:150;display:none;color:#EDE6DC}
.vr.on{display:block}
.vr-bg{position:absolute;inset:0;background:var(--espresso)}
.vr-stage{position:absolute;inset:0;display:grid;place-items:center;padding:90px var(--pad) 120px}
.vr-img{max-width:80vw;height:min(calc(100vh - 220px),860px);width:auto;object-fit:contain;transform-origin:0 0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.vr-cap{position:absolute;left:var(--pad);bottom:34px;display:flex;flex-direction:column;gap:6px}
.vr-cap b{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:0;font-size:28px;line-height:1}
.vr-cap span{color:#A89C90}
.vr-nav{position:absolute;right:var(--pad);bottom:34px;display:flex;align-items:center;gap:26px}
.vr-n{font-variant-numeric:tabular-nums;color:#A89C90}
.vr button{color:inherit;padding:6px 0}
.vr-x{position:absolute;right:var(--pad);top:28px}
.vr button:hover{color:#fff}

.book .ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:350}

/* ---------- work index: names, hover reveals the image ---------- */
.wx{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center;padding:110px var(--pad) 60px}
.wx-l{grid-column:1/span 5;display:flex;flex-direction:column;gap:30px}
.wx-k{color:var(--muted)}
.wx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wx-list li{border-bottom:1px solid var(--line)}
.wx-list a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;transition:opacity .6s var(--io)}
.wx-t{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.005em;font-size:clamp(28px,2.5vw,40px);line-height:1.1;transition:transform .9s var(--out)}
.wx-t em{font-size:.55em;color:var(--muted);letter-spacing:0}
.wx-y{color:var(--muted);font-variant-numeric:tabular-nums}
.wx-list:hover a{opacity:.3}
.wx-list a:hover,.wx-list a.on{opacity:1}
.wx-list a:hover .wx-t{transform:translateX(12px)}
.wx-pic{grid-column:7/span 6;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bone)}
.wx-pic>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1.1s var(--io),transform 1.6s var(--out)}
.wx-pic>.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.wx-pic>.out{clip-path:inset(0 0 0 0);z-index:1}
@media (max-width:820px){
  .wx{display:flex;flex-direction:column-reverse;justify-content:center;gap:34px;padding-top:100px}
  .wx-pic{width:100%}
  .wx-l{width:100%}
}

.ph-bh{padding:140px var(--pad) 0}
.ph-bh+.sb .sb-pin{padding-top:20px}

/* ---------- project opening film: full 16:9, never cropped ---------- */
.ph-v{padding:56px var(--pad) 0}
.pv{padding:88px var(--pad) 0;display:flex;flex-direction:column;align-items:center}
.pv-media{position:relative;width:min(100%,calc((100vh - 150px) * 16 / 9));aspect-ratio:16/9;background:#0b0a09;overflow:hidden}
html.js .pv-media{clip-path:inset(0 50% 0 50%)}
.pv-media video{width:100%;height:100%;object-fit:contain;display:block}
.pv-foot{width:min(100%,calc((100vh - 150px) * 16 / 9));display:flex;justify-content:space-between;align-items:center;padding-top:16px;color:var(--muted)}
.pv-scroll{display:flex;align-items:center;gap:12px}
.pv-scroll i{display:block;width:1px;height:28px;background:currentColor;transform-origin:top;animation:sc 2.4s var(--io) infinite}

.pv-sound{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(20,16,13,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#F2EDE6;transition:background .4s,transform .6s var(--out)}
.pv-sound:hover{background:rgba(20,16,13,.6);transform:scale(1.06)}
.pv-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pv-sound .spk{fill:currentColor;stroke:none}
.pv-sound .x{display:none}
.pv-sound.is-muted .w1,.pv-sound.is-muted .w2{display:none}
.pv-sound.is-muted .x{display:block}
.pv-sound .w1,.pv-sound .w2{animation:wave 1.6s ease-in-out infinite}
.pv-sound .w2{animation-delay:.2s}
@keyframes wave{0%,100%{opacity:.35}50%{opacity:1}}
.sec-tight{padding-top:110px}

/* four civilisations: one stage, four names, auto-advancing */
.cv{display:flex;flex-direction:column;gap:18px;width:min(100%,calc((100svh - 330px) * 16 / 9));margin:0 auto}
.cv-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bone)}
.cv-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 100%);transform:scale(1.06);transition:clip-path 1.2s var(--io),transform 2s var(--out)}
.cv-stage img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.cv-stage img.out{clip-path:inset(0 0 0 0);z-index:1}
.cv-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cv-tab{display:flex;flex-direction:column;gap:14px;text-align:left;color:#A79D93;transition:color .5s}
.cv-tab span{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(24px,2.1vw,34px);transition:transform .9s var(--out)}
.cv-tab.on span{transform:translateX(6px)}
.cv-tab:hover,.cv-tab.on{color:var(--ink)}
.cv-tab i{display:block;height:3px;background:#DDD4C9;position:relative;overflow:hidden}
.cv-tab i b{position:absolute;inset:0;background:var(--rust);transform:scaleX(0);transform-origin:left}

/* sketch timelapses: large stage framed on the drawing, thumbnails below */
.tx{display:flex;flex-direction:column;align-items:center;gap:26px}
.tx-stage{position:relative;width:100%;height:min(56vh,calc((100vw - 2 * var(--pad)) * .45));overflow:hidden;background:var(--paper)}
.tx-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transition:opacity .9s var(--io)}
.tx-stage video.on{opacity:1}
.tx-thumbs{display:flex;gap:16px}
.tx-b{display:flex;flex-direction:column;gap:8px;width:clamp(70px,6.5vw,110px);opacity:.45;background:var(--paper);transition:opacity .5s var(--io)}
.tx-b img{width:100%;aspect-ratio:1/1;object-fit:cover;mix-blend-mode:multiply;display:block}
.tx-b i{display:block;height:2px;background:var(--line);position:relative;overflow:hidden}
.tx-b i b{position:absolute;inset:0;background:var(--rust);transform:scaleX(0);transform-origin:left}
.tx-b:hover,.tx-b.on{opacity:1}
@media (max-width:820px){.tx-stage{height:80vw}.cv-tabs{grid-template-columns:1fr 1fr}}

/* ---------- Vacheron: a night-sky opening that fades into paper ---------- */
.vz{--night:#000000;color:#EDE6DC;position:relative;padding-bottom:420px;
  background:linear-gradient(180deg,var(--night) 0,var(--night) calc(100% - 420px),#120c08 calc(100% - 344px),#2b1c12 calc(100% - 269px),#5a3e27 calc(100% - 202px),#9b7a55 calc(100% - 134px),rgba(210,188,155,.75) calc(100% - 67px),rgba(236,226,210,.3) calc(100% - 25px),rgba(242,237,230,0) 100%)}
.vz .pv{height:100vh;height:100svh;min-height:520px;padding:0;justify-content:center;position:relative;background:#000}
.vz .pv-media{width:min(100vw,calc(100svh * 16 / 9));background:transparent}
.vz .pv-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;width:auto;color:#8F857B}
.vz .ph .kick,.vz .intro .r,.vz .intro .l{color:#8F857B}
.vz .ph-v{padding-top:90px}
.vz .btn{border-color:#EDE6DC;color:#EDE6DC}.vz .btn::before{background:#EDE6DC}.vz .btn:hover{color:var(--night)}

.tx+.next,.sec:has(.tx)+.next{margin-top:110px}

/* surfaces sitting on the page keep the same fixed texture so it reads as one sheet */


/* ================= PURE ================= */
.pp{padding:0;height:100vh;height:100svh;min-height:520px;position:relative;justify-content:center}
.pp-hm{position:absolute;inset:0;width:100%;height:100%}
.pp-hm svg{display:block;width:100%;height:100%}
.pp .pv-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;width:auto;color:#5E6B70}
/* moodboard: tiles arrive one by one, then the cream is spread */
.mbx{position:relative;aspect-ratio:2200/1560;background:#fff;width:min(100%,calc((100svh - 230px) * 2200 / 1560));margin:0 auto}
.mt{position:absolute;display:block;overflow:hidden}
.mt img{position:absolute;max-width:none;height:auto;display:block}
html.js .mt{clip-path:inset(100% 0 0 0)}
.mbx canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* logo: aubergine / white split, follows the cursor */
.lg{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:ew-resize;--x:50%;touch-action:pan-y;width:min(100%,calc((100svh - 280px) * 16 / 9));margin:0 auto}
.lg>img,.lg-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lg-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.lg-h{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:rgba(255,255,255,.75);mix-blend-mode:difference}
.lg-h i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:1px solid currentColor;color:#fff}
.lg-cap{display:flex;justify-content:space-between;padding-top:12px;color:var(--muted);width:min(100%,calc((100svh - 280px) * 16 / 9));margin:0 auto}
/* products: the room takes the colour of the bottle */
.pp-pr{--tint:#F4DADC;background:var(--tint);transition:background 1.2s var(--io);padding:clamp(24px,4vw,64px);display:flex;flex-direction:column;gap:28px}
.pp-stage{position:relative;aspect-ratio:3/2;overflow:hidden}
.pp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05) translateY(2%);transition:opacity 1.1s var(--io),transform 1.8s var(--out)}
.pp-stage img.on{opacity:1;transform:none}
.pp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pp-tab{display:flex;flex-direction:column;gap:14px;text-align:left;color:rgba(27,22,19,.45);transition:color .5s}
.pp-tab span{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(24px,2.1vw,34px);transition:transform .9s var(--out)}
.pp-tab.on,.pp-tab:hover{color:var(--ink)}
.pp-tab.on span{transform:translateX(6px)}
.pp-tab i{display:block;height:3px;background:rgba(27,22,19,.12);position:relative;overflow:hidden}
.pp-tab i b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
/* colour: bars that open onto the brand's images */
.pal{display:flex;gap:10px;height:min(64vh,620px)}
.pb{position:relative;flex:1;background:var(--c);overflow:hidden;transition:flex 1s var(--io);color:var(--ink)}
.pb.dark{color:#F2EDE6}
.pb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s var(--io),transform 1.6s var(--out)}
.pb-cap{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:4px;z-index:2}
.pb-cap b{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:22px}
.pb:hover{flex:3.2}
.pb:hover img{opacity:1;transform:scale(1)}
.pb:hover .pb-cap{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
/* typography */
.ty{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ty-r{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line);transition:opacity .6s}
.ty:hover .ty-r{opacity:.35}.ty .ty-r:hover{opacity:1}
.ty-k{grid-column:1/span 3;color:var(--muted)}
.ty-img,.ty-pop,.ty-tea{grid-column:4/span 9;margin:0}
.ty-img{width:100%;height:auto}
.ty-pop{font-family:'Poppins',sans-serif;font-style:italic;font-weight:600;text-transform:none;letter-spacing:-.01em;font-size:clamp(34px,4.4vw,72px);line-height:1;color:#3F3239}
.ty-tea{font-family:'Teachers',sans-serif;text-transform:none;letter-spacing:0;font-size:clamp(18px,1.6vw,24px);line-height:1.5;max-width:40ch;color:#3F3239}
/* app */
.ph3s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ph3{margin:0}
.ph3-i{background:#EDF1F2;overflow:hidden}
.ph3-i img{width:100%;height:auto;display:block;transition:transform 1.4s var(--out)}
.ph3:hover .ph3-i img{transform:translateY(-3%) scale(1.03)}
@media (max-width:820px){.pal{flex-direction:column;height:auto}.pb{min-height:90px}.ph3s{grid-template-columns:1fr}.ty-k,.ty-img,.ty-pop,.ty-tea{grid-column:1/-1}.ty-k{margin-bottom:14px}}

.pg-pure .sec{padding-top:130px}
.pg-pure .sec-tight{padding-top:90px}
.ph-pure{padding:34px var(--pad) 0}
.ph-pure+.intro{padding-top:46px}
.lg-cap{padding-bottom:0}
/* products: three tall frames drifting at different speeds */
.pc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;padding-bottom:40px;width:min(100%,calc((100svh - 420px) * 2.25 + 32px));margin:0 auto}
.pc{margin:0;display:flex;flex-direction:column;gap:14px;will-change:transform}
.pc:nth-child(2){margin-top:50px}
.pc-i{aspect-ratio:3/4;overflow:hidden}
.pc-i img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.04);transition:transform 1.8s var(--out),filter 1s var(--io)}
.pc figcaption{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:24px;color:var(--muted);transition:color .5s}
.pc3:hover .pc-i img{filter:saturate(.6) brightness(1.02)}
.pc3 .pc:hover .pc-i img{transform:scale(1.1);filter:none}
.pc3 .pc:hover figcaption{color:var(--ink)}
/* app film */
.apx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:stretch}
.apv{grid-column:1/span 8;aspect-ratio:16/9;overflow:hidden;background:#F3F2F0}
.apx-r{grid-column:9/span 4;display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:0}
.apx-i{overflow:hidden;background:#EDF1F2;min-height:0;position:relative}
.apx-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1.6s var(--out)}
.apx-z img{transform:scale(1)}
.apx-i:not(.apx-z) img{transform:scale(1)}
.apx-i:hover img{transform:scale(1.06)}
.apx-z:hover img{transform:scale(1.06)}
@media (max-width:820px){.apx{display:flex;flex-direction:column;gap:16px}.apx-r{grid-template-rows:none;grid-template-columns:1fr 1fr}.apx-i{aspect-ratio:3/4}}
.apv video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.pc3{grid-template-columns:1fr}.pc:nth-child(2){margin-top:0}}

.sh-k{margin-bottom:28px}
.pg-pure .next{margin-top:110px}

/* ================= ABOUT ================= */
.ab{min-height:100svh;padding:150px var(--pad) 120px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:start}
.ab-pic{grid-column:2/span 5;justify-self:center;aspect-ratio:4/5;height:min(calc(100svh - 230px),calc((100vw - 2 * var(--pad)) * .5 * 1.25));overflow:hidden}
.ab-pic{position:relative}.ab-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ab-col{opacity:0;transition:opacity 1.2s var(--io)}.ab-pic:hover .ab-col{opacity:1}
html.js .ab-pic{clip-path:inset(100% 0 0 0)}
.ab-txt{grid-column:8/span 4;display:flex;flex-direction:column;gap:30px;padding-bottom:6px}
.ab-txt .k{color:var(--muted)}
.ab-lead{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.015em;font-size:clamp(34px,3.2vw,52px);line-height:1.12}
.ab-txt .p{max-width:34ch}
.ab-ct{display:flex;flex-direction:column;gap:14px;margin-top:10px;padding-top:26px;border-top:1px solid var(--line)}
.ab-mail{position:relative;text-transform:none;align-self:flex-start;font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.01em;line-height:1.1}
.ab-mail i{position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .9s var(--io)}
.ab-mail:hover i{transform:scaleX(1);transform-origin:left}
.ab-note{position:relative;height:1.4em;overflow:hidden;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ab-note span{position:absolute;left:0;top:0;transition:transform .7s var(--out),opacity .5s}
.ab-note .b{transform:translateY(110%);opacity:0}
.ab-ct.done .ab-note .a{transform:translateY(-110%);opacity:0}
.ab-ct.done .ab-note .b{transform:none;opacity:1}
@media (max-width:820px){.ab{display:flex;flex-direction:column;align-items:stretch;gap:40px;padding-top:110px}.ab-pic{height:auto;width:100%}}

/* ================= BONDED ================= */
.bz{--night:#0E0907;--cream:#EDE3D4;--cu:#C27A4A;color:var(--cream);position:relative;padding-bottom:620px;
  background:linear-gradient(180deg,var(--night) 0,var(--night) calc(100% - 760px),#140A07 calc(100% - 680px),#221009 calc(100% - 600px),#36170C calc(100% - 520px),#4E2011 calc(100% - 440px),#6A2D18 calc(100% - 365px),#8A4026 calc(100% - 295px),#A85C3C calc(100% - 230px),#C2805F calc(100% - 172px),#D6A287 calc(100% - 120px),#E4C2AE calc(100% - 76px),#ECDACB calc(100% - 38px),#F2EDE6 100%)}
.bz .intro .l,.bz .intro .r{color:#9A8B7C}
.bz .btn{border-color:var(--cream);color:var(--cream)}.bz .btn::before{background:var(--cream)}.bz .btn:hover{color:var(--night)}
.bz .btns{color:var(--cream)}
.bh{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.bh-img{position:absolute;inset:0}
.bh-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;will-change:transform}
.bh::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,9,7,.45) 0,rgba(14,9,7,0) 22%,rgba(14,9,7,0) 70%,var(--night) 100%)}
.bh-th{position:absolute;inset:0;display:flex;z-index:2;pointer-events:none}
.bh-th span{flex:1;background:var(--night);transform-origin:50% 0;position:relative}
.bh-th span::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:38%;background:linear-gradient(180deg,rgba(194,122,74,0),#C27A4A);opacity:.9}
html:not(.js) .bh-th{display:none}
.bh-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;z-index:3;display:flex;justify-content:space-between;color:#B9AA98}
.bz-t{padding-top:110px}
.bz-t h1{margin:0}
.bz-by{display:block;margin-top:14px;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:clamp(20px,1.8vw,28px);color:var(--cu)}
.bm{padding:220px var(--pad) 40px;text-align:center}
.bm-p{margin:0 auto;max-width:1100px;font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:clamp(36px,5vw,84px);line-height:1.04}
.bm-p em{color:var(--cu)}
.bm-p .w{opacity:.14}
.bm-s{display:block;margin-top:40px;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:24px;color:var(--cu)}
.pg-bonded .k{display:flex;gap:14px}.pg-bonded .k b{font-weight:400;color:var(--rust)}
/* identity */
.bi-s{padding-top:120px}
.bi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bl svg{display:block;width:100%;height:auto}
.bl-a{grid-column:1/span 8}
.bl-b{grid-column:9/span 4;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.thr{position:absolute;left:0;top:auto;bottom:-120px;width:100%;height:440px;display:block;overflow:visible;z-index:0;pointer-events:none}
.thr path{fill:none;stroke:#8A3B22;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
/* five bonds */
.b5{--bg:#552C1E;--fg:#fff;background:var(--bg);color:var(--fg);margin-top:200px;transition:background-color .9s var(--io),color .9s var(--io)}
.b5-pin{position:relative;overflow:hidden;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;padding:110px var(--pad) 60px;align-items:center}
.b5-l{grid-column:1/span 6;position:relative;z-index:3;display:flex;flex-direction:column;gap:40px}
.b5 .k{color:var(--fg);opacity:.75}.b5 .k b{color:var(--fg)}
.b5-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.b5-list li{display:grid;grid-template-columns:44px auto 1fr;align-items:baseline;gap:18px;padding:6px 0;opacity:.42;transition:opacity .7s var(--out);cursor:pointer}
.b5-list li.on{opacity:1}
.b5-n{font-size:11px}
.b5-w{font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:clamp(40px,5vw,84px);line-height:1;color:var(--fg);transition:transform .9s var(--out),color 1.1s var(--io)}
.b5-w i{font-size:.45em;letter-spacing:0;margin-right:.15em;vertical-align:.35em}
.b5-list li.on .b5-w{transform:translateX(18px)}
.b5-s{opacity:0;transition:opacity .6s;justify-self:end;color:#fff}
.b5-list li.on .b5-s{opacity:.85}
.b5-p{max-width:40ch;font-size:14px;line-height:1.7;letter-spacing:.005em;text-transform:none;margin:0;color:rgba(255,255,255,.85)}
.b5-r{position:absolute;top:0;right:0;bottom:0;width:50%;z-index:1}
.b5-img{position:absolute;inset:0;overflow:hidden}
.b5-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path .9s var(--io),transform 1.6s var(--out)}
.b5-img img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.b5-img img.was{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
/* the agency: a free slider */
.mz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;padding:200px var(--pad) 0;align-items:stretch}
.mz-l{grid-column:1/span 4;display:flex;flex-direction:column;gap:26px;padding-right:20px}
.mz-h{margin:0;font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.015em;font-size:clamp(30px,2.8vw,46px);line-height:1.05}
.mz-addr{margin:0;color:var(--muted);line-height:1.8}
.mz-cap{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.mz-list{list-style:none;margin:0;padding:0;position:relative;height:1.35em;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:clamp(30px,3vw,48px);line-height:1.1;overflow:hidden}
.mz-list li{position:absolute;left:0;top:0;line-height:1.35;white-space:nowrap;transform:translateY(110%)}
.mz-list li.on{transform:none}
.mz-n b{font-weight:400;color:var(--rust)}
.mz-nav{display:flex;gap:10px}
.mz-nav button{width:52px;height:52px;border:1px solid var(--ink);border-radius:50%;font-size:16px;letter-spacing:0;transition:background .5s,color .5s}
.mz-nav button:hover{background:var(--ink);color:var(--paper)}
.mz-stage{grid-column:5/span 8;position:relative;aspect-ratio:16/10;overflow:hidden;background:#1a120d;cursor:grab;touch-action:pan-y;user-select:none}
.mz-stage.drag{cursor:grabbing}
.mz-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.1s var(--io),transform 1.8s var(--out);pointer-events:none}
.mz-stage img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.mz-stage img.was{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
.mz-stage.back img{clip-path:inset(0 0 100% 0)}
.mz-stage.back img.on,.mz-stage.back img.was{clip-path:inset(0 0 0 0)}
.mz-dots{grid-column:5/span 8;display:flex;gap:6px;margin-top:16px}
.mz-dots{padding:6px 0}.mz-dots button{flex:1;height:22px;position:relative}
.mz-dots button::after{content:"";position:absolute;left:0;right:0;top:10px;height:1px;background:var(--line);transform-origin:50% 50%;transition:background .5s,transform .4s var(--out)}
.mz-dots:hover button::after{transform:scaleY(3)}
.mz-dots button:hover::after{background:var(--muted)}
.mz-dots button.on::after{background:var(--rust);transform:scaleY(3)}
/* objects: the gifts open around the card */
.ob{background:#140C09;color:var(--cream);margin-top:180px}
.ob-pin{height:100vh;height:100svh;position:relative;padding:100px var(--pad) 40px;display:flex;flex-direction:column}
.ob-h{display:flex;flex-direction:column;gap:16px}
.ob .k{color:#9A8B7C}.ob .k b{color:var(--cu)}
.ob-h h2{margin:0;color:var(--cream)!important;opacity:1!important;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.015em;font-size:clamp(28px,2.6vw,42px)}
.ob-stage{position:relative;flex:1;margin-top:20px}
.ob-t,.ob-card{position:absolute;margin:0;will-change:transform}
.ob-t img,.ob-card img{width:100%;height:auto;display:block;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ob-t figcaption{margin-top:10px;color:#9A8B7C}
.ob-0{left:0;top:2%;width:28%}
.ob-1{right:0;top:0;width:33%}
.ob-2{left:4%;bottom:0;width:15%}
.ob-3{left:22%;bottom:0;width:17%}
.ob-4{right:2%;bottom:2%;width:30%}
.ob-card{left:50%;top:40%;width:min(30%,420px);transform:translate(-50%,-50%);z-index:5}
/* experiences: one chapter */
.chs{padding-top:200px}
.chs-h{padding:0 var(--pad);margin-bottom:40px}
.ch{position:relative;background:#0E0907}
.ch-bg{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ch-bg>img{width:100%;height:100%;object-fit:cover;will-change:transform}
.ch-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,9,7,.25),rgba(14,9,7,.05) 40%,rgba(14,9,7,.7))}
.ch-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,6vh,70px);z-index:2;color:var(--paper);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:end}
.ch-n{grid-column:1/span 3;padding-bottom:12px}
.ch-cap h3{grid-column:4/span 6;margin:0;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.025em;font-size:clamp(54px,8vw,140px);line-height:.95}
.ch-cap p{grid-column:10/span 3;margin:0;padding-bottom:12px;font-size:14px;line-height:1.6;letter-spacing:.005em;text-transform:none;max-width:30ch}
.ch-body{position:relative;z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:18vh;padding:16vh var(--pad) 30vh;margin-top:-10vh}
.ch-f{grid-column:var(--c);margin:var(--m) 0 0;display:flex;flex-direction:column;gap:10px;color:rgba(242,237,230,.85)}
.ch-i{overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.35)}
.ch-i img{width:100%;height:100%;object-fit:cover}
.fin{position:relative;height:120vh;height:120svh;overflow:hidden;display:grid;place-items:center;background:#0E0907}
.fin-img{position:absolute;inset:0}
.fin-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.fin::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(14,9,7,.15),rgba(14,9,7,.75))}
.fin-q{position:relative;z-index:2;margin:0;padding:0 var(--pad);max-width:1100px;text-align:center;color:var(--paper);font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:clamp(34px,4.6vw,76px);line-height:1.06}
.fin-q em{color:#E3A06E}
.fin-q .w{opacity:.12}
.bw{padding-top:180px}
@media (max-width:820px){
  .bz{padding-bottom:300px}
  .bm{padding-top:130px}
  .bl-a,.bl-b{grid-column:1/-1}
  .b5-pin{grid-template-columns:1fr;align-content:start;row-gap:24px;padding-top:90px}
  .b5-l,.b5-r{grid-column:1/-1}.b5-l{gap:20px}
  .b5-p,.b5-s{display:none}
  .b5-w{font-size:clamp(30px,9vw,44px)}
  .b5-list li{grid-template-columns:30px auto}
  .b5-img{aspect-ratio:4/3;max-height:38svh}
    .ob-pin{height:auto}
  .ob-stage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .ob-t,.ob-card{position:static;width:auto!important;transform:none}
  .ob-card{grid-column:1/-1;order:-1}
  .ch-cap{grid-template-columns:1fr;row-gap:10px}.ch-n,.ch-cap h3,.ch-cap p{grid-column:1/-1}
  .ch-body{display:flex;flex-direction:column;row-gap:7vh;padding-bottom:24vh}
  .ch-f{margin-top:0!important}
}
.pg-bonded .ob h2{color:#EDE3D4!important}

.bz-wm{margin:0;line-height:0}
.bz-wm img{width:clamp(220px,24vw,400px);height:auto}
html.js .bz-wm img{clip-path:inset(0 100% 0 0)}
.bz-by b{font-weight:400;color:#81D8D0}
.bl{overflow:hidden}
.bl .rv img{transition:transform 1.4s var(--out)!important}
.bl:hover .rv img{transform:scale(1.06)!important}
@media (max-width:820px){.bz{padding-bottom:380px}}
.bi-s{position:relative;padding-bottom:260px}.bi-s>*:not(.thr){position:relative;z-index:1}.pg-bonded .b5{position:relative;z-index:2}
.bl .rv{outline:1px solid rgba(138,59,34,.22);outline-offset:-1px;box-shadow:0 18px 40px -22px rgba(60,30,15,.35)}
.bl{overflow:visible}.bl .rv{overflow:hidden}
.ob-pin{overflow:hidden}
.ob-thr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ob-thr path{fill:none;stroke:#C27A4A;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.11}
.ob-h,.ob-stage{position:relative;z-index:1}
@media (max-width:820px){.mz{display:flex;flex-direction:column;gap:22px;padding-top:120px}.mz-stage{aspect-ratio:4/3}.mz-l{gap:14px}
.b5-r{position:relative;width:auto;height:40svh}}
.ch-dim{position:absolute;inset:0;background:#0E0907;opacity:0;z-index:1;pointer-events:none}
.ch-cap{z-index:2}
.fin-q{text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.ch-f figcaption{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ch-i{background:#1a120d}.pg-bonded .bl .rv{background:#E4DACB}
.ab-sk{margin:-8px 0 0;max-width:46ch;color:var(--muted);font-size:10px;line-height:1.9;letter-spacing:.12em}
.ab-pic img{object-position:50% 50%}
.ab-pic{margin-top:50px}@media (max-width:820px){.ab-pic{margin-top:0}}
/* ---------- mobile polish ---------- */
@media (max-width:820px){
  .hd{padding:24px 24px}
  .mb-roll{display:none}
  .menu-btn{width:44px;height:44px;justify-content:flex-end;gap:0}
  .menu-btn i{background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;transition:background-size .5s var(--io)}
  .menu-open .menu-btn i{background-size:0 1px}
  .is-home .hero-cta{display:none}
  /* objects: the same opening, in a smaller stage */
  .ob-pin{height:auto;padding-bottom:70px}
  .ob-stage{display:block;position:relative;flex:none;height:132vw;margin-top:28px}
  .ob-t,.ob-card{position:absolute!important}
  .ob-t figcaption{display:none}
  .ob-0{left:0;top:0;width:52%!important}
  .ob-1{right:0;top:6%;bottom:auto;width:44%!important}
  .ob-card{left:50%;top:40%;width:64%!important;transform:translate(-50%,-50%)}
  .ob-2{left:0;bottom:4%;top:auto;width:30%!important}
  .ob-3{left:34%;bottom:0;top:auto;width:30%!important}
  .ob-4{right:0;bottom:12%;top:auto;width:34%!important}
}

/* section titles sit close to their visuals on Vacheron */
.pg-vach .sh{margin-bottom:22px}
.pg-vach .sec-tight+.sec{padding-top:0}
.pg-vach .sec:has(.tx){padding-top:110px}

/* objects: tiles sized by the stage height too, so short screens never stack them */
@media (min-width:821px){
  .ob-stage{--H:calc(100svh - 250px)}
  .ob-0{width:min(28%,calc(var(--H) * .58))}
  .ob-1{width:min(33%,calc(var(--H) * 1.1))}
  .ob-2{width:min(15%,calc((var(--H) * .4 - 30px) * .94))}
  .ob-3{left:21%;width:min(17%,calc((var(--H) * .4 - 30px) * 1.27))}
  .ob-4{width:min(30%,calc((var(--H) * .4 - 30px) * 2.09))}
  .ob-card{top:38%;width:min(30%,420px,calc(var(--H) * .62))}
}