/* product page (/timepieces/) — black canvas, chapters, left drawers */
body.is-pdp{background:#000}
.pdp{display:block;background:#000;color:var(--cream);overflow:hidden}
.pdp-state{min-height:var(--vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:0 22px}
.pdp-state-t{max-width:640px;font:300 clamp(24px,2.6vw,40px)/1.25 var(--serif)}
.pdp-state .pill{margin-top:4px}
:focus-visible{outline:1px solid var(--cream);outline-offset:4px}

/* header additions: current chapter under the logo */
.chap-btn{position:absolute;left:clamp(18px,2.4vw,36px);top:calc(22px + clamp(118px,9vw,150px) * .1722 + 12px);display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--cream);cursor:pointer;font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:4px 0;pointer-events:auto;opacity:.85;transition:opacity .4s}
.chap-btn:hover{opacity:1}
.chap-btn .chev svg{width:12px;height:12px}
.hdr.on-light .chap-btn{color:#111}
.chev{display:inline-flex;transition:transform .6s var(--ease)}
.chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
[aria-expanded=true]>.chev{transform:rotate(180deg)}

/* circular outline arrows */
.circ{width:46px;height:46px;border-radius:50%;border:1px solid rgba(238,234,227,.45);background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s,opacity .4s}
.circ svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.circ:hover{background:var(--cream);color:#000;border-color:var(--cream)}
.circ:disabled{opacity:.25;cursor:default;background:transparent;color:var(--cream)}

/* left drawers */
.drw{position:fixed;inset:0;z-index:70;pointer-events:none;visibility:hidden;transition:visibility 0s linear .9s}
.drw.on{pointer-events:auto;visibility:visible;transition:none}
.drw-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .8s var(--ease)}
.drw.on .drw-scrim{opacity:1}
.drw-in{position:absolute;top:0;left:0;bottom:0;width:min(50vw,760px);background:#000;border-right:1px solid rgba(238,234,227,.14);display:flex;flex-direction:column;padding:26px clamp(20px,3.4vw,56px);transform:translateX(-101%);transition:transform .9s var(--ease);overflow:auto;overscroll-behavior:contain}
.drw.on .drw-in{transform:none}
.drw-hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:clamp(30px,8vh,90px)}
.drw-t{font:500 9.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.6}
.drw-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(238,234,227,.4);background:none;color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .4s,color .4s}
.drw-x:hover{background:var(--cream);color:#000}
.drw-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.drw-list{list-style:none;border-top:1px solid rgba(238,234,227,.2)}
.drw-list li{border-bottom:1px solid rgba(238,234,227,.2);overflow:hidden}
.drw-list button{width:100%;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);background:none;border:0;color:var(--cream);text-align:left;cursor:pointer;padding:clamp(14px,2.2vh,22px) 0;font:300 clamp(24px,2.6vw,42px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.005em;transform:translateY(110%);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease),padding .5s var(--ease)}
.drw.on .drw-list button{transform:none;opacity:.6}
.drw.on .drw-list button:hover,.drw.on .drw-list .on button,.drw.on .drw-list button:focus-visible{opacity:1;padding-left:10px}
.drw-list i{font:500 9.5px/1 var(--sans);font-style:normal;letter-spacing:.2em;opacity:.6;min-width:20px}
.drw-n{flex:1}
.drw-note{font:500 10px/1 var(--sans);letter-spacing:.14em;opacity:.7;text-transform:uppercase}
body.drawer-open{overflow:hidden}

/* I · introduction (hero) */
.ch-hero{position:relative;height:var(--vh);min-height:560px;overflow:hidden}
.hero-stage{position:absolute;left:0;right:0;top:9vh;bottom:30vh;outline:none}
.cs-it{position:absolute;inset:0;margin:auto;aspect-ratio:1;height:100%;max-width:100%;transition:transform 1.25s var(--ease),opacity 1.1s var(--ease);will-change:transform;cursor:pointer}
.cs-it.on{cursor:default}
.cs-it img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.ch-hero .cs-it img{opacity:0;transform:scale(1.06);transition:opacity 1.6s var(--ease) .1s,transform 2.2s var(--ease) .1s}
.pdp-ready .ch-hero .cs-it img{opacity:1;transform:none}
.ch-hero .circ{position:absolute;top:calc(9vh + (61vh - 46px)/2);z-index:20;opacity:0;transition:opacity 1s var(--ease) 1.1s,background .5s var(--ease),color .5s var(--ease)}
.pdp-ready .ch-hero .circ{opacity:1}
.ch-hero .circ-prev{left:clamp(18px,4vw,64px)}.ch-hero .circ-next{right:clamp(18px,4vw,64px)}
.hero-bot{position:absolute;left:0;right:0;bottom:0;z-index:15;padding:0 clamp(16px,2.4vw,36px) clamp(8px,1.4vw,20px)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:clamp(6px,1.2vh,14px);opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease) 1s,transform 1s var(--ease) 1s}
.pdp-ready .hero-row{opacity:1;transform:none}
.var-btn{display:flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid rgba(238,234,227,.35);color:var(--cream);cursor:pointer;padding:6px 0;font:400 clamp(16px,1.3vw,20px)/1 var(--serif);letter-spacing:.02em}
.var-name{display:inline-block;min-width:4ch}
.model{font:300 clamp(48px,13vw,240px)/.86 var(--serif);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;text-align:center;overflow:hidden}
.model .wd,.huge .wd{display:inline-block;white-space:nowrap}
.model .ch,.huge .ch{display:inline-block;transform:translateY(108%);transition:transform 1.35s var(--ease)}
.pdp-ready .model .ch,.chap-open.in .huge .ch{transform:none}

/* buy blocks */
.buy{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.buy-price{font:500 12px/1 var(--sans);letter-spacing:.14em}.buy-price s{opacity:.5;margin-left:10px}
.buy-stock{font:500 9.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#9fd1b8}.buy-stock.out{color:#d99a86}
.buy-act{display:flex;gap:10px;align-items:center;margin-top:4px}
.buy-add{height:38px;padding:0 22px;border:1px solid var(--cream);border-radius:99px;background:var(--cream);color:#000;font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background .45s var(--ease),color .45s,border-color .45s}
.buy-add:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.buy-add:disabled{opacity:.45;cursor:default;background:var(--cream);color:#000}
.buy-note{min-height:16px;font:400 12px/1.4 var(--sans)}
.buy-qty{border-color:rgba(238,234,227,.35);margin:0;height:38px}
.buy-full{align-items:center;text-align:center;margin:clamp(22px,3vh,34px) 0 clamp(30px,5vh,56px)}
.buy-full .buy-price{font-size:13px}
.buy-full .buy-add{height:48px;padding:0 34px}.buy-full .buy-qty{height:48px}

/* chapter openings */
.ch-text{position:relative;padding-top:clamp(120px,22vh,240px)}
.chap-open{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(16px,2.4vw,36px);margin-bottom:clamp(50px,9vh,110px)}
.roman{position:relative;width:60px;height:60px;display:grid;place-items:center;font:400 16px/1 var(--serif);letter-spacing:.06em;margin-bottom:clamp(26px,4vh,44px)}
.roman svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(238,234,227,.55);stroke-width:1;stroke-dasharray:183;stroke-dashoffset:183;transform:rotate(-90deg);transition:stroke-dashoffset 1.6s var(--ease)}
.roman span{opacity:0;transition:opacity 1s var(--ease) .5s}
.chap-open.in .roman svg{stroke-dashoffset:0}.chap-open.in .roman span{opacity:1}
.kick{font:500 10px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s;margin-bottom:clamp(8px,1.4vh,16px)}
.chap-open.in .kick{opacity:.75;transform:none}
.huge{font:300 clamp(46px,10.5vw,190px)/.88 var(--serif);text-transform:uppercase;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;padding-bottom:.04em;max-width:100%}
.rule{display:block;width:72px;height:1px;background:rgba(238,234,227,.55);margin-top:clamp(26px,4vh,44px);transform:scaleX(0);transition:transform 1.4s var(--ease) .7s}
.chap-open.in .rule{transform:none}

/* narrative: narrow centered column, left-aligned, line-by-line rise */
.narr{width:min(560px,calc(100% - 44px));margin:0 auto;display:flex;flex-direction:column;gap:1.1em;font:300 clamp(19px,1.55vw,24px)/1.5 var(--serif);color:rgba(238,234,227,.92)}
.lines .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.lines .w span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.narr.in .lines .w span{transform:none}

/* edge-to-edge pairs that melt into black */
.duo{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(80px,14vh,170px)}
.duo-it{position:relative;overflow:hidden;aspect-ratio:1}
.duo-it img{width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1.1));opacity:0;transition:opacity 1.6s var(--ease)}
.duo-it.in img{opacity:1}
.duo-it+.duo-it img{transition-delay:.25s}
.duo-blend .duo-it::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0,transparent 22%,transparent 70%,#000 100%);pointer-events:none}
.duo-frame{width:min(1180px,calc(100% - 2*clamp(16px,2.4vw,36px)));margin-left:auto;margin-right:auto;gap:clamp(10px,1.2vw,18px)}
.duo-frame .duo-it{aspect-ratio:1;max-height:640px}

/* transition statement: words light up as you scroll */
.statement{position:relative;height:190vh}
.st-pin{position:sticky;top:0;height:var(--vh);display:grid;place-items:center;padding:0 22px}
.st-q{max-width:820px;text-align:center;font:300 clamp(30px,3.8vw,60px)/1.12 var(--serif);text-transform:uppercase;letter-spacing:-.005em}
.sw{opacity:.14;transition:opacity .7s var(--ease)}.sw.lit{opacity:1}

/* III · features: each its own pace */
.feat{display:flex;flex-direction:column;align-items:center;margin:0 auto clamp(110px,20vh,220px);padding:0 clamp(16px,2.4vw,36px)}
.feat-m{position:relative;overflow:hidden;background:#000;clip-path:inset(12% 10% 12% 10%);transition:clip-path 1.8s var(--ease)}
.feat-m img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transition:transform 2.4s var(--ease)}
.feat.in .feat-m{clip-path:inset(0 0 0 0)}.feat.in .feat-m img{transform:none}
.feat-wide .feat-m{width:min(100%,1320px);aspect-ratio:16/9}
.feat-square .feat-m{width:min(100%,640px);aspect-ratio:1}
.feat-square .feat-m img{object-fit:contain}
.feat-t{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:520px;margin-top:clamp(34px,6vh,64px)}
.count{font:400 13px/1 var(--serif);letter-spacing:.18em;opacity:0;transition:opacity 1s var(--ease) .9s}
.feat-h{overflow:hidden;margin:clamp(14px,2vh,22px) 0 14px;font:300 clamp(28px,3vw,48px)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em}
.feat-h span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease) 1s}
.feat-p{font:300 clamp(17px,1.25vw,20px)/1.55 var(--serif);opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease) 1.3s,transform 1.1s var(--ease) 1.3s;color:rgba(238,234,227,.88)}
.feat.in .count{opacity:.7}.feat.in .feat-h span{transform:none}.feat.in .feat-p{opacity:1;transform:none}
.feat:nth-child(odd) .feat-m{transition-duration:2.1s}

/* IV · gallery rail */
.rail-wrap{padding-bottom:clamp(40px,6vh,70px)}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 clamp(16px,2.4vw,36px);cursor:grab;outline:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}.rail.drag img{pointer-events:none}
.rail-it{flex:0 0 calc((100% - 14px)/2);scroll-snap-align:start;aspect-ratio:1;overflow:hidden;background:#050505;opacity:0;transform:translateX(70px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.rail-wrap.in .rail-it{opacity:1;transform:none}
.rail-it img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.rail-ctl{display:flex;align-items:center;gap:22px;width:min(560px,calc(100% - 44px));margin:clamp(26px,4vh,40px) auto 0}
.track{flex:1;height:1px;background:rgba(238,234,227,.2);overflow:hidden}
.track i{display:block;height:100%;background:var(--cream);transition:transform .3s linear}

/* V · specifications */
.spec{display:flex;flex-direction:column;align-items:center;padding:0 clamp(16px,2.4vw,36px) clamp(110px,18vh,200px)}
.spec-title{font:300 clamp(30px,3.4vw,54px)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em;text-align:center}
.spec-stage{position:relative;width:100%;height:clamp(260px,46vh,520px);margin:clamp(20px,4vh,40px) 0 clamp(10px,2vh,20px);outline:none}
.spec-ctl{display:flex;align-items:center;gap:26px}
.spec-ctl .count{opacity:.75;min-width:70px;text-align:center}
.accs{width:min(640px,100%);border-top:1px solid rgba(238,234,227,.25)}
.acc{border-bottom:1px solid rgba(238,234,227,.25);opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.spec.in .acc{opacity:1;transform:none}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:var(--cream);cursor:pointer;padding:22px 2px;font:400 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.acc-p{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .75s var(--ease),visibility 0s linear .75s}
.acc.open .acc-p{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .75s var(--ease)}
.acc-in{overflow:hidden}
.acc ul{list-style:none;padding:0 2px 24px;display:flex;flex-direction:column;gap:8px;font:300 clamp(17px,1.3vw,20px)/1.4 var(--serif);opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.acc.open ul{opacity:.9;transform:none;transition-delay:.15s}

@media (max-width:760px){
  .chap-btn{left:16px;top:calc(16px + 118px * .1722 + 10px)}
  .drw-in{width:100%;border-right:0;padding:18px 18px 30px}
  .hero-stage{top:13vh;bottom:36vh}
  .ch-hero .circ{top:auto;bottom:calc(36vh - 23px + 2vh);width:40px;height:40px}
  .ch-hero .circ-prev{left:16px}.ch-hero .circ-next{right:16px}
  .hero-row{flex-direction:column;align-items:stretch;gap:12px}
  .hero-row .buy{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px}
  .hero-row .buy-act{margin:0;margin-left:auto}
  .hero-row .buy-note{flex-basis:100%}
  .model{font-size:clamp(44px,17vw,120px)}
  .duo{grid-template-columns:1fr}
  .duo-blend .duo-it+.duo-it{display:none}
  .duo-frame{gap:10px}
  .statement{height:160vh}
  .rail-it{flex-basis:86%}
  .feat-wide .feat-m{aspect-ratio:4/5}
  .buy-full .buy-act{flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .model .ch,.huge .ch,.lines .w span,.feat-h span{transform:none!important}
  .feat-m{clip-path:none!important}.feat-m img,.duo-it img{transform:none!important}
  .roman svg{stroke-dashoffset:0!important}
  .rail-it,.acc,.feat-p,.hero-row,.kick{opacity:1!important;transform:none!important}
  .count,.roman span,.duo-it img,.ch-hero .cs-it img,.ch-hero .circ{opacity:1!important}
  .sw{opacity:1!important}
}