:root{
  --ink:#2B2622; --ink2:#6F6459; --ink3:#A2978B;
  --cream:#F3EBE0; --cream2:#FBF7F1; --line:#E3D8CA;
  --gold:#A98F72; --gold2:#C9A88A;
  --night:#17130F; --night2:#231D18;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:#8a6d50}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.nav a{pointer-events:auto}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.32em;font-weight:500}
.nav-shop{font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:1px solid rgba(255,255,255,.7);
  padding:7px 14px;border-radius:999px}

/* type */
.eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.display{font-family:var(--serif);font-weight:400;font-size:clamp(76px,24vw,180px);line-height:.9;letter-spacing:-.02em}
.display.sm{font-size:clamp(46px,13vw,96px);line-height:1}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,8.6vw,60px);line-height:1.08;letter-spacing:-.01em}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,5.4vw,28px);margin-top:14px;color:var(--ink2)}
.sub{font-size:13.5px;color:var(--ink2);margin-top:14px;letter-spacing:.01em}
.light{color:#F6EFE6}
.eyebrow.light{color:var(--gold2)}
.sub.light{color:rgba(246,239,230,.72)}
.h2.light em{color:#E5CFB3}

/* scroll scenes: 바깥 높이로 스크롤 길이를, 안쪽 sticky 로 화면을 고정 */
.scene{position:relative}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene-dark{background:radial-gradient(120% 80% at 50% 45%,var(--night2),var(--night) 70%)}
.scene-cream{background:radial-gradient(120% 80% at 50% 50%,var(--cream2),var(--cream) 75%)}
.scene-wrist,.scene-hero{background:#d9cbb8}

.seq,.seq-poster,.fx{position:absolute;inset:0;width:100%;height:100%}
.seq-poster{object-fit:cover;transition:opacity .4s}
.seq-poster.hide{opacity:0}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,235,224,.55),rgba(243,235,224,0) 38%,rgba(243,235,224,0) 62%,rgba(243,235,224,.5));pointer-events:none}
.veil-bottom{background:linear-gradient(180deg,rgba(20,15,10,.25),rgba(20,15,10,0) 30%,rgba(20,15,10,0) 45%,rgba(20,15,10,.62))}
.photo-veil{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(243,235,224,0) 50%,rgba(243,235,224,.92) 88%)}
.reveal-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,transform}

/* captions — app.js 가 data-in/out 으로 투명도·위치를 준다 */
.cap{position:absolute;left:0;right:0;padding:0 22px;text-align:center;opacity:0;will-change:opacity,transform;pointer-events:none}
.cap-hero{top:calc(17vh + env(safe-area-inset-top))}
.cap-mid{top:50%;transform:translateY(-50%)}
.cap-top{top:calc(13vh + env(safe-area-inset-top))}
.cap-bottom{bottom:calc(11vh + env(safe-area-inset-bottom))}
.scene-hero .h2{color:var(--ink)}

.scroll-hint{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{width:1px;height:38px;background:linear-gradient(var(--ink),transparent);animation:drip 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* lineup */
.scene-lineup{background:var(--cream2)}
.lineup-head{position:absolute;top:calc(11vh + env(safe-area-inset-top));left:22px;right:22px}
.track{position:absolute;left:0;top:calc(11vh + 120px);display:flex;gap:16px;padding:0 22px;will-change:transform}
.card{flex:0 0 auto;width:min(74vw,340px)}
.card-img{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--cream)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.04)}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;gap:10px}
.card-name{font-family:var(--serif);font-size:23px}
.card-price{font-size:13px;color:var(--ink2);letter-spacing:.04em;white-space:nowrap}
.card-note{font-size:12.5px;color:var(--ink3);margin-top:3px}
.card-set .card-price{color:var(--gold);font-weight:600}
.progress{position:absolute;left:22px;right:22px;bottom:calc(6vh + env(safe-area-inset-bottom));height:1px;background:var(--line)}
.progress span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
@media (max-height:700px){.track{top:calc(8vh + 104px)}.card{width:min(64vw,300px)}.lineup-head{top:calc(7vh + env(safe-area-inset-top))}}

/* promise */
.promise{background:var(--cream);padding:90px 22px}
.promise-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:42px 22px}
.pr{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.pr.on{opacity:1;transform:none}
.pr-k{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:20px;margin-bottom:6px}
.pr h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.15;margin-bottom:8px}
.pr p{font-size:13.5px;color:var(--ink2)}
@media (min-width:860px){.promise-grid{grid-template-columns:repeat(4,1fr)}}

/* cta */
.cta{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--night)}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.08)}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(23,19,15,.15),rgba(23,19,15,.75))}
.cta-in{position:relative;z-index:1;padding:0 22px;color:#F6EFE6}
.cta .eyebrow{color:var(--gold2)}
.btn{display:inline-block;margin-top:30px;background:#F6EFE6;color:var(--ink);padding:16px 30px;border-radius:999px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;transition:transform .3s,background .3s}
.btn:hover{transform:translateY(-2px);background:#fff}
.fine{font-size:12px;color:rgba(246,239,230,.6);margin-top:16px}
.foot{display:flex;justify-content:space-between;padding:22px 22px calc(22px + env(safe-area-inset-bottom));font-size:12px;color:var(--ink3);background:var(--night)}
.foot a{color:var(--ink3)}

@media (min-width:900px){
  .cap-top{top:12vh}
  .track{gap:28px;padding:0 6vw}
  .lineup-head{left:6vw}
  .progress{left:6vw;right:6vw}
}
@media (prefers-reduced-motion:reduce){.scroll-hint span{animation:none}}