/* ===== Nayumi — editorial luxury site ===== */
:root{
  --cream:#F4EEE7; --sand:#E9E2D6; --blush:#EFE3DD; --paper:#FBF7F0;
  --ink:#211C17; --ink2:#4A4139; --muted:#8B7E6F;
  --gold:#B79A6B; --gold2:#C9A25E; --line:rgba(120,100,70,.22);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --pad:clamp(1.25rem,6vw,7rem);
  --h1:clamp(2.4rem,4.6vw,4.6rem); --h2:clamp(2.2rem,5.6vw,5rem);
  --h3:clamp(1.4rem,2.4vw,2.1rem); --ey:.72rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1rem,1.04vw,1.12rem); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; cursor:none; transition:background-color .8s ease}
@media (pointer:coarse){body{cursor:auto}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.h-display{font-family:var(--serif); font-weight:600; line-height:.98; letter-spacing:-.015em}
.eyebrow{font-family:var(--sans); font-weight:700; font-size:var(--ey); letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold)}
.line-mask{overflow:hidden; display:block}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:600;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  padding:1.05em 1.9em; border:1px solid var(--ink); border-radius:100px; position:relative;
  overflow:hidden; z-index:0; transition:color .5s}
.btn::after{content:""; position:absolute; inset:0; background:var(--ink); z-index:-1;
  transform:translateY(101%); transition:transform .55s cubic-bezier(.65,0,.35,1)}
.btn:hover{color:var(--cream)} .btn:hover::after{transform:translateY(0)}
.btn.ghost{border-color:var(--line); color:var(--ink2)}
.btn.gold{border-color:var(--gold2)} .btn.gold::after{background:var(--gold2)}
@media (pointer:coarse){.btn{cursor:pointer}}

/* cursor */
.cursor{position:fixed; left:0; top:0; width:8px; height:8px; border-radius:50%; background:var(--ink);
  z-index:9999; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .35s,height .35s,background .35s}
.cursor.lg{width:74px; height:74px; background:rgba(201,162,94,.18); mix-blend-mode:normal; border:1px solid var(--gold2)}
.cursor .l{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--sans);
  font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .3s}
.cursor.lg .l{opacity:1}
@media (pointer:coarse){.cursor{display:none}}

/* preloader */
#preloader{position:fixed; inset:0; z-index:1000; background:var(--paper); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:14px}
#preloader .w{font-family:var(--serif); font-weight:600; font-size:clamp(48px,9vw,90px); color:var(--ink); overflow:hidden}
#preloader .w span{display:inline-block; transform:translateY(105%)}
#preloader .bar{width:min(240px,52vw); height:1px; background:var(--line); overflow:hidden}
#preloader .bar i{display:block; height:100%; background:var(--gold2); transform:scaleX(0); transform-origin:left}
#preloader .num{font-family:var(--sans); font-size:11px; letter-spacing:.3em; color:var(--muted)}
html.ready #preloader{opacity:0; visibility:hidden; transition:opacity .8s .1s, visibility .8s .1s}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:22px var(--pad); mix-blend-mode:difference; color:#fff}
.nav a{color:#fff}
.nav .brand{font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:.01em; line-height:1}
.nav .brand em{font-style:normal; font-family:var(--sans); font-weight:600; font-size:8px; letter-spacing:.28em; display:block; margin-top:2px; opacity:.85; text-transform:uppercase}
.nav .nav-links{display:flex; gap:30px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.nav .nav-links a{opacity:.8; transition:opacity .3s} .nav .nav-links a:hover{opacity:1}
.nav .nav-cta{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; border-bottom:1px solid #fff; padding-bottom:3px}
@media (max-width:820px){ .nav .nav-links{display:none} }

/* hero */
.hero{position:relative; min-height:100svh; display:grid; grid-template-columns:.94fr 1.06fr;
  align-items:center; padding:0 0 0 var(--pad); gap:clamp(1.5rem,4vw,4rem)}
.hero-copy{position:relative; z-index:3; max-width:none; padding-right:1.5rem}
.hero-copy .eyebrow{margin-bottom:22px; display:inline-block}
.hero h1{font-size:var(--h1); color:var(--ink); line-height:.92; letter-spacing:-.02em}
.hero-sub{margin-top:26px; max-width:34ch; color:var(--ink2); font-size:1.05rem}
.hero-copy .btn{margin-top:34px}
.hero-media{position:relative; height:100svh; overflow:hidden; background:var(--sand)}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.hero-gem{position:absolute; left:44%; top:50%; transform:translate(-50%,-50%); width:clamp(150px,17vw,280px); height:clamp(150px,17vw,280px); z-index:4; pointer-events:none}
.hero-gem canvas{display:block; width:100%; height:100%}
.gem-fallback{position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(201,162,94,.5), rgba(244,238,231,0) 66%)}
.hero-scroll{position:absolute; bottom:34px; left:var(--pad); font-family:var(--sans); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; z-index:3}
.hero-scroll i{width:44px; height:1px; background:var(--gold2); display:inline-block; position:relative; overflow:hidden}
.hero-scroll i::after{content:""; position:absolute; inset:0; background:var(--ink); animation:swipe 2.4s ease-in-out infinite}
@keyframes swipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:820px){ .hero{grid-template-columns:1fr; min-height:auto; padding:14vh var(--pad) 5vh; gap:3vh}
  .hero-media{height:54vh; border-radius:6px} .hero-copy{max-width:none; padding-right:0}
  .hero-gem{left:auto; right:7vw; top:auto; bottom:-38px; transform:none; width:120px; height:120px} }

/* marquee */
.marquee{overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; background:var(--paper)}
.marquee__inner{display:inline-flex; gap:3.5rem; will-change:transform; animation:slide 34s linear infinite}
.marquee span{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,2.1rem); color:var(--ink2)}
.marquee b{color:var(--gold2); font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__inner{animation-play-state:paused}

/* ethos */
.ethos{padding:clamp(7rem,17vw,15rem) var(--pad); text-align:center}
.ethos p{font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1.28;
  max-width:20ch; margin:0 auto; color:var(--ink)}
.ethos .word{display:inline-block; opacity:.12}

/* categories */
.categories{position:relative; padding:0 var(--pad)}
.cat-index{display:none; position:sticky; top:0; height:0; z-index:20; pointer-events:none}
.cat-index ul{list-style:none; position:absolute; top:46vh; left:0; display:flex; flex-direction:column; gap:12px}
.cat-index a{pointer-events:auto; display:flex; align-items:baseline; gap:10px; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); opacity:.4; transition:opacity .4s,color .4s}
.cat-index a i{font-style:normal; font-size:.62rem; color:var(--gold2)}
.cat-index a.on{opacity:1; color:var(--ink)}
@media (max-width:1024px){ .cat-index{display:none} }

.category{padding:clamp(5rem,11vw,9rem) 0; border-top:1px solid var(--line)}
.cat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); flex-wrap:wrap}
.cat-head .cat-num{font-family:var(--serif); font-size:1.2rem; color:var(--gold2)}
.cat-head h2{font-size:var(--h2)}
.cat-head p{max-width:30ch; color:var(--ink2); font-style:italic; font-family:var(--serif); font-size:1.3rem}
.cat-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.4rem,3vw,3rem); align-items:start}
.cat-feature{position:relative; overflow:hidden; border-radius:6px}
.cat-feature .ri{overflow:hidden; border-radius:6px; aspect-ratio:4/5; background:var(--sand)}
.cat-feature img{width:100%; height:100%; object-fit:cover}
.cat-feature figcaption{position:absolute; left:22px; bottom:20px; color:#fff; z-index:2; text-shadow:0 2px 18px rgba(0,0,0,.4)}
.cat-feature figcaption h3{font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1}
.cat-feature figcaption p{font-family:var(--serif); font-style:italic; font-size:1rem; opacity:.9; margin-top:4px; max-width:32ch}
.cat-feature::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,14,10,.5),transparent 45%)}
.cat-cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem)}
.card{position:relative; overflow:hidden; border-radius:6px; background:var(--sand); cursor:none}
.card .ri{aspect-ratio:3/4; overflow:hidden}
.card img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.06)}
.card figcaption{position:absolute; inset:auto 0 0 0; padding:16px 16px 15px; color:#fff; z-index:2;
  transform:translateY(8px); opacity:0; transition:transform .5s,opacity .5s}
.card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,14,10,.62),transparent 46%); opacity:0; transition:opacity .5s}
.card:hover figcaption{transform:none; opacity:1} .card:hover::after{opacity:1}
.card figcaption h4{font-family:var(--serif); font-weight:600; font-size:1.15rem; line-height:1.02}
.card figcaption span{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold2)}
.card .view{position:absolute; top:14px; right:14px; z-index:2; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .5s} .card:hover .view{opacity:.9}
.cat-cta{margin-top:clamp(2rem,4vw,3.4rem)}
@media (max-width:820px){ .cat-grid{grid-template-columns:1fr} .cat-cards{grid-template-columns:1fr 1fr} }

/* featured edit — horizontal */
.edit{overflow:hidden; padding:clamp(5rem,9vw,8rem) 0 0; background:var(--paper); border-top:1px solid var(--line)}
.edit-head{padding:0 var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap}
.edit-head h2{font-size:var(--h2)}
.edit-head p{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.2rem}
.edit__track{display:flex; gap:clamp(1.2rem,2.5vw,2.4rem); padding:0 var(--pad) clamp(4rem,7vw,6rem); will-change:transform}
.edit__card{flex:0 0 clamp(240px,30vw,420px); cursor:none}
.edit__card .ri{aspect-ratio:3/4; overflow:hidden; border-radius:6px; background:var(--sand)}
.edit__card img{width:100%; height:100%; object-fit:cover; transition:transform .9s ease}
.edit__card:hover img{transform:scale(1.05)}
.edit__card h3{font-family:var(--serif); font-weight:600; font-size:1.4rem; margin-top:16px}
.edit__card span{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold2)}
.edit__num{font-family:var(--serif); color:var(--gold2); font-size:1rem}

/* story / craft */
.story{padding:clamp(6rem,12vw,11rem) var(--pad)}
.story-head{max-width:22ch; margin-bottom:clamp(3rem,6vw,5rem)}
.story-head h2{font-size:var(--h2); margin-top:18px}
.craft{display:grid; gap:clamp(3rem,6vw,6rem)}
.craft-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center}
.craft-row:nth-child(even) .craft-media{order:2}
.craft-media{overflow:hidden; border-radius:6px}
.craft-media .ri{overflow:hidden; aspect-ratio:5/4; background:var(--sand)}
.craft-media img{width:100%; height:100%; object-fit:cover}
.craft-txt .n{font-family:var(--serif); font-size:1.1rem; color:var(--gold2)}
.craft-txt h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.8rem); margin:6px 0 14px}
.craft-txt p{max-width:40ch; color:var(--ink2)}
@media (max-width:820px){ .craft-row{grid-template-columns:1fr} .craft-row:nth-child(even) .craft-media{order:0} }
.stats{display:flex; gap:clamp(2rem,6vw,6rem); flex-wrap:wrap; margin-top:clamp(4rem,7vw,6rem); border-top:1px solid var(--line); padding-top:clamp(2.5rem,4vw,3.5rem)}
.stats .stat b{font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,5vw,3.8rem); color:var(--ink); display:block; line-height:1}
.stats .stat span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* cta */
.cta{position:relative; padding:clamp(6rem,12vw,10rem) var(--pad); text-align:center; background:var(--ink); color:var(--cream); overflow:hidden}
.cta .eyebrow{color:var(--gold2)}
.cta h2{font-size:var(--h2); margin:16px 0 30px; color:var(--cream)}
.cta .bg{position:absolute; inset:0; display:flex; align-items:center; opacity:.06; pointer-events:none}
.cta .bg span{font-family:var(--serif); font-size:22vw; white-space:nowrap; color:var(--cream)}
.subscribe{display:flex; gap:0; max-width:440px; margin:0 auto; border-bottom:1px solid rgba(244,238,231,.4)}
.subscribe input{flex:1; background:none; border:0; color:var(--cream); font-family:var(--sans); font-size:1rem; padding:14px 4px; outline:none}
.subscribe input::placeholder{color:rgba(244,238,231,.5)}
.subscribe button{background:none; border:0; color:var(--gold2); font-family:var(--sans); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; cursor:none; padding:0 6px}
.subscribe.done{opacity:.7}
@media (pointer:coarse){.subscribe button{cursor:pointer}}

/* footer */
.site-footer{background:var(--paper); color:var(--ink); padding:clamp(4rem,8vw,7rem) var(--pad) 2rem; border-top:1px solid var(--line)}
.foot-top{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(3rem,7vw,6rem)}
.foot-col h5{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.foot-col a,.foot-col p{display:block; font-family:var(--serif); font-size:1.15rem; color:var(--ink2); margin-bottom:6px}
.foot-col a:hover{color:var(--gold2)}
.foot-word{font-family:var(--serif); font-weight:600; font-size:clamp(4rem,20vw,17rem); line-height:.85; color:var(--ink); letter-spacing:-.02em}
.foot-word .line-mask span{display:inline-block; transform:translateY(101%)}
.foot-legal{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2rem; font-size:.68rem; letter-spacing:.08em; color:var(--muted)}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:500; background:rgba(24,18,13,.82); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:5vw; opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s}
.lightbox.on{opacity:1; visibility:visible}
.lb-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); max-width:1000px; width:100%;
  background:var(--paper); border-radius:8px; overflow:hidden; transform:translateY(20px); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lightbox.on .lb-inner{transform:none}
.lb-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.lb-body{padding:clamp(1.6rem,3vw,3rem) clamp(1.6rem,3vw,3rem) clamp(1.6rem,3vw,3rem) 0; display:flex; flex-direction:column; justify-content:center}
.lb-body .eyebrow{color:var(--gold2)}
.lb-body h3{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4vw,3rem); margin:12px 0}
.lb-body .st{font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--ink2)}
.lb-body .nt{color:var(--muted); margin-top:14px; font-size:.95rem}
.lb-thumbs{display:flex; gap:10px; margin-top:22px}
.lb-thumbs img{width:56px; height:74px; object-fit:cover; border-radius:4px; border:1px solid var(--line); cursor:none}
.lb-sku{margin-top:22px; font-size:.66rem; letter-spacing:.2em; color:var(--muted)}
.lb-close{position:absolute; top:26px; right:34px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(244,238,231,.5);
  background:none; color:var(--cream); font-size:20px; cursor:none; transition:transform .4s,background .3s}
.lb-close:hover{background:var(--gold2); transform:rotate(90deg)}
@media (max-width:820px){ .lb-inner{grid-template-columns:1fr; max-height:88vh; overflow-y:auto}
  .lb-body{padding:1.6rem} .lb-media img{aspect-ratio:16/10} }
@media (pointer:coarse){.lb-close,.lb-thumbs img{cursor:pointer}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.1ms!important}
  .marquee__inner{animation:none}
}