/* ===== 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:auto; 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); 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:auto}
.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:auto}
.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:auto; 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:auto}
.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:auto; 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}
}

/* ============ hero slideshow banner ============ */
.hero-slides{position:relative; height:100svh; overflow:hidden; background:var(--sand)}
.hero-slides canvas{position:absolute; inset:0; width:100%!important; height:100%!important; display:block; z-index:2}
.slide-imgs{position:absolute; inset:0; z-index:1}
.slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 26%; opacity:0; transition:opacity 1.1s ease}
.slide-img.on{opacity:1}
.hero-slides.webgl .slide-imgs{opacity:0}
.slide-scrim{display:none}
.slide-ui{position:absolute; left:0; right:0; bottom:0; z-index:4; padding:clamp(20px,3vw,44px); color:#fff}
.slide-cap{display:flex; flex-direction:column; gap:5px}
.slide-cap .sc-eyebrow{font-family:var(--sans); font-weight:700; font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.slide-cap .sc-cat{font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.2vw,52px); line-height:1; color:#fff}
.sc-link{position:absolute; right:clamp(20px,3vw,44px); top:calc(50% ); transform:translateY(-50%); font-family:var(--sans); font-weight:600;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.55); padding-bottom:3px; cursor:auto}
.sc-link i{font-style:normal; transition:transform .4s; display:inline-block; margin-left:4px} .sc-link:hover i{transform:translateX(5px)}
.slide-dots{display:flex; gap:9px; align-items:center; position:absolute; right:clamp(20px,3vw,44px); bottom:clamp(22px,3vw,44px)}
.dot{width:26px; height:2px; border:0; background:rgba(255,255,255,.35); cursor:auto; padding:0; position:relative; overflow:hidden; border-radius:2px}
.dot span{position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left}
.dot.on span{transform:scaleX(1); transition:transform 4.4s linear}
@media (pointer:coarse){.dot,.sc-link{cursor:pointer}}
@media (max-width:820px){ .hero-slides{height:56vh; border-radius:6px} .slide-cap .sc-cat{font-size:30px} .sc-link{position:static; transform:none; display:none} }

/* ============ expandable categories ============ */
.cat-more{margin-top:clamp(2.2rem,4vw,3.4rem); display:flex; justify-content:center}
.cat-toggle{display:inline-flex; align-items:center; gap:12px; background:none; border:1px solid var(--line); border-radius:100px;
  padding:1.05em 1.9em; font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); cursor:auto; transition:background .45s,color .45s,border-color .45s}
.cat-toggle em{font-style:normal; font-size:.64rem; color:var(--gold2); background:rgba(201,162,94,.14); border-radius:20px; padding:3px 9px}
.cat-toggle .ct-ic{width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .45s; margin-left:2px}
.cat-toggle:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.cat-toggle[aria-expanded="true"] .ct-ic{transform:rotate(-135deg)}
@media (pointer:coarse){.cat-toggle{cursor:pointer}}
.cat-all{overflow:hidden; height:0; transition:height .75s cubic-bezier(.2,.8,.2,1)}
.cat-all-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:clamp(1rem,2vw,1.8rem); padding:clamp(2rem,4vw,3.2rem) 0 .5rem}
.mini{cursor:auto; position:relative}
.mini-img{overflow:hidden; border-radius:6px; aspect-ratio:3/4; background:var(--sand)}
.mini-img img{width:100%; height:100%; object-fit:cover; transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.mini:hover .mini-img img{transform:scale(1.06)}
.mini figcaption{padding:13px 3px 4px}
.mini figcaption h4{font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--ink); line-height:1.05}
.mini figcaption span{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
@media (pointer:coarse){.mini{cursor:pointer}}

/* ============ logo + adaptive nav ============ */
.nav{ mix-blend-mode:normal; color:#fff; transition:background .45s ease, color .45s ease, padding .4s ease, box-shadow .45s ease; }
.nav a{ color:inherit; }
.nav .brand{ display:inline-flex; align-items:center; line-height:0; mix-blend-mode:normal; }
.nav .brand-logo{ height:30px; width:auto; display:block; filter:drop-shadow(0 2px 12px rgba(20,14,10,.22)); transition:height .4s ease, filter .4s ease; }
.nav .nav-links a, .nav .nav-cta{ text-shadow:0 1px 16px rgba(20,14,10,.38); }
.nav .nav-cta{ border-color:currentColor; }
.nav.scrolled{ background:rgba(251,247,240,.9); -webkit-backdrop-filter:blur(14px) saturate(1.06); backdrop-filter:blur(14px) saturate(1.06); color:var(--ink); padding-top:13px; padding-bottom:13px; box-shadow:0 1px 0 rgba(120,100,70,.16); }
.nav.scrolled .brand-logo{ height:25px; filter:none; }
.nav.scrolled .nav-links a, .nav.scrolled .nav-cta{ text-shadow:none; }
@media (max-width:820px){ .nav .brand-logo{ height:23px; } }
.site-footer .foot-logo{ display:block; height:clamp(46px,6vw,60px); width:auto; margin:0 0 clamp(2rem,4vw,3rem); }

/* ============ WhatsApp order ============ */
.btn-wa{display:inline-flex; align-items:center; gap:10px; background:var(--gold2); color:#1c140e;
  font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:100px; cursor:auto; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(201,162,94,.45); }
@media (pointer:coarse){ .btn-wa{cursor:pointer} }
.cta.order .cta-lead{ max-width:54ch; margin:1.3rem auto 0; color:var(--cream); opacity:.82; font-size:1.05rem; line-height:1.55; }
.order-row{ display:flex; gap:clamp(1.6rem,4vw,3.6rem); align-items:center; justify-content:center; flex-wrap:wrap; margin-top:clamp(2.2rem,4vw,3.2rem); }
.order-qr{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:0; }
.order-qr img{ width:154px; height:154px; display:block; background:#fff; padding:11px; border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.3); }
.order-qr figcaption{ font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); opacity:.66; }
.order-act{ display:flex; flex-direction:column; align-items:center; gap:15px; }
.order-num{ font-family:var(--serif); font-size:1.7rem; letter-spacing:.02em; color:var(--cream); border-bottom:1px solid rgba(244,238,231,.45); padding-bottom:3px; }
.order-num:hover{ border-color:var(--gold2); color:var(--gold2); }
.order-ig{ font-size:.82rem; color:var(--cream); opacity:.7; } .order-ig a{ color:var(--gold2); text-underline-offset:3px; text-decoration:underline; }
.lb-order{ align-self:flex-start; margin-top:20px; }
@media (max-width:560px){ .order-row{ flex-direction:column; } }

/* ============ floating WhatsApp button ============ */
.wa-fab{ position:fixed; right:24px; bottom:24px; z-index:500; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42), 0 3px 10px rgba(0,0,0,.20);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.wa-fab svg{ width:32px; height:32px; display:block; }
.wa-fab:hover{ transform:scale(1.09); box-shadow:0 16px 38px rgba(37,211,102,.55); }
.wa-fab::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1;
  pointer-events:none; animation:waPulse 2.8s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.45 } 70%{ transform:scale(1.55); opacity:0 } 100%{ opacity:0 } }
@media (max-width:820px){ .wa-fab{ width:52px; height:52px; right:16px; bottom:16px; } .wa-fab svg{ width:29px; height:29px; } }
@media (prefers-reduced-motion:reduce){ .wa-fab::before{ animation:none } }
.cta.order .order-terms{ margin-top:2.2rem; font-size:.8rem; color:var(--cream); opacity:.6; }
.cta.order .order-terms a{ color:var(--gold2); text-decoration:underline; text-underline-offset:3px; }

/* ============ standout order button in nav ============ */
.nav .nav-cta{ background:var(--gold2); color:#1c140e; border:0; border-bottom:0; border-radius:100px;
  padding:.72em 1.45em; font-weight:800; letter-spacing:.1em; text-shadow:none;
  box-shadow:0 6px 20px rgba(201,162,94,.4); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s; }
.nav .nav-cta:hover{ transform:translateY(-1px); color:#1c140e; background:#d8b26e; box-shadow:0 12px 30px rgba(201,162,94,.55); }
.nav.scrolled .nav-cta{ box-shadow:0 6px 18px rgba(201,162,94,.32); }

/* ============ nav link brand colour (legible on light + dark) ============ */
.nav .nav-links a{ color:var(--gold2); text-shadow:0 1px 10px rgba(20,14,10,.55); opacity:1; font-weight:700; }
.nav .nav-links a:hover{ color:#e7c17c; opacity:1; }
.nav.scrolled .nav-links a{ color:var(--ink); text-shadow:none; }
.nav.scrolled .nav-links a:hover{ color:var(--gold2); }

/* ============ normal OS cursor (custom cursor removed) ============ */
.cursor{ display:none !important; }
a,button,[data-magnetic],.btn,.btn-wa,.wa-fab,.nav-cta,.nav-links a,.cat-toggle,.dot,.sc-link,.mini,.card,.edit__card,.cat-feature,.lb-thumbs img,.lb-close,.order-num,.tc-back,.tc-cta{ cursor:pointer; }

/* ============ lightbox gallery + zoom ============ */
.lb-media{ position:relative; overflow:hidden; }
.lb-stage{ position:relative; width:100%; height:100%; overflow:hidden; cursor:zoom-in; background:var(--sand); }
.lb-stage.zoomed{ cursor:zoom-out; }
.lb-main{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; display:block; transition:transform .35s ease; will-change:transform; user-select:none; -webkit-user-drag:none; touch-action:none; }
.lb-zoomhint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:rgba(24,18,13,.62); color:#fff; font-family:var(--sans); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 13px; border-radius:20px; pointer-events:none; transition:opacity .3s; }
.lb-thumbs img{ cursor:pointer; opacity:.55; transition:opacity .3s, border-color .3s, transform .3s; }
.lb-thumbs img.on{ opacity:1; border-color:var(--gold2); }
.lb-thumbs img:hover{ opacity:1; transform:translateY(-2px); }

/* ============ mobile hamburger menu ============ */
.nav-toggle{ display:none; }
@media (max-width:820px){
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0; background:none; border:0; cursor:pointer; z-index:120; margin-left:14px; }
  .nav-toggle span{ display:block; width:24px; height:2px; background:var(--gold2); border-radius:2px; transition:transform .35s, opacity .3s, background .3s; }
  .nav.scrolled .nav-toggle span, .nav.nav-open .nav-toggle span{ background:var(--ink); }
  .nav .nav-links{ display:flex; position:fixed; top:0; right:0; height:100dvh; width:min(80vw,330px); flex-direction:column; justify-content:center; align-items:flex-start; gap:1.7rem; padding:0 2rem; background:rgba(251,247,240,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:-24px 0 70px rgba(20,14,10,.22); transform:translateX(105%); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
  .nav.nav-open .nav-links{ transform:translateX(0); }
  .nav .nav-links a{ color:var(--ink)!important; text-shadow:none!important; font-size:1.15rem; letter-spacing:.14em; opacity:1; }
  .nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
  .nav .nav-cta{ margin-left:auto; padding:.62em 1.15em; font-size:.68rem; }
  .lb-main{ aspect-ratio:1/1; }
  .cat-grid{ grid-template-columns:1fr; }
  .cat-all-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .order-row{ flex-direction:column; }
}

/* ============ mobile swipeable Favourites strip ============ */
.edit__track.edit-scroll-x{ transform:none!important; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:1rem; padding:0 var(--pad) 1.5rem; }
.edit__track.edit-scroll-x > *{ scroll-snap-align:center; flex:0 0 78%; }
@media (max-width:820px){ .edit{ height:auto!important; } }

/* hero carousel: legible caption/dots without a dark overlay */
.slide-cap .sc-cat, .slide-cap .sc-eyebrow, .sc-link{ text-shadow:0 2px 16px rgba(20,14,10,.65), 0 1px 3px rgba(20,14,10,.5); }
.slide-dots .dot{ box-shadow:0 1px 6px rgba(20,14,10,.45); }
.slide-dots .dot{ background:rgba(255,255,255,.55); }

/* ============================================================
   SLIDESHOW — bright CSS crossfade + gentle Ken Burns
   ============================================================ */
.slide-img{ transition:opacity 1.3s ease; will-change:opacity, transform; }
.slide-img.on{ opacity:1; animation:slideZoom 7s ease-out both; }
@keyframes slideZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .slide-img.on{ animation:none; } }

/* ============================================================
   MOBILE-FIRST RESPONSIVE
   ============================================================ */
html, body{ overflow-x:hidden; max-width:100%; }
img, svg, video{ max-width:100%; }
* { -webkit-tap-highlight-color:transparent; }

@media (max-width:820px){
  :root{ --pad:20px; }

  /* HERO: bright image banner on top, copy beneath */
  .hero{ display:flex; flex-direction:column; min-height:auto; padding:86px var(--pad) 46px; gap:24px; }
  .hero-slides{ order:1; width:100%; height:46vh; min-height:320px; border-radius:12px; }
  .hero-copy{ order:2; padding-right:0; z-index:3; }
  .hero h1{ font-size:clamp(2.5rem,12vw,3.4rem); line-height:.97; }
  .hero-sub{ margin-top:18px; max-width:none; font-size:1rem; }
  .hero-copy .btn{ margin-top:26px; }
  .hero-scroll{ display:none; }
  .slide-img{ object-position:50% 30%; }
  .slide-cap .sc-cat{ font-size:25px; }
  .sc-link{ display:none; }
  .slide-dots{ right:15px; bottom:15px; }
  .dot{ width:20px; }

  .nav{ padding:15px var(--pad); }
  .ethos p{ font-size:clamp(1.4rem,6vw,2rem); }

  /* CATEGORIES */
  .cat-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .cat-grid{ grid-template-columns:1fr; gap:22px; }
  .cat-cards{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-all-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .cat-more{ margin-top:1.8rem; }
  .cat-toggle{ width:100%; justify-content:center; }

  /* EDIT / CRAFT / STATS */
  .edit-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .craft-media .ri{ aspect-ratio:4/3; }
  .stats{ flex-wrap:wrap; gap:1.6rem; }

  /* ORDER */
  .cta{ padding:clamp(4rem,13vw,6rem) var(--pad); }
  .order-row{ flex-direction:column; gap:1.8rem; }
  .cta.order .cta-lead{ font-size:1rem; }
  .order-num{ font-size:1.4rem; }

  /* FOOTER */
  .foot-top{ flex-direction:column; gap:2rem; }
  .foot-word{ font-size:27vw; }
  .foot-legal{ flex-direction:column; gap:.5rem; }
  .site-footer .foot-logo{ height:46px; }

  /* LIGHTBOX: full-screen, image on top, scrollable */
  .lightbox{ padding:0; }
  .lb-inner{ grid-template-columns:1fr; width:100%; max-width:none; height:100dvh; max-height:100dvh; border-radius:0; overflow-y:auto; transform:translateY(0); }
  .lb-main{ aspect-ratio:1/1; }
  .lb-body{ padding:1.5rem 1.4rem 2.6rem; justify-content:flex-start; }
  .lb-close{ position:fixed; top:12px; right:12px; background:rgba(24,18,13,.55); z-index:10; }
  .lb-thumbs img{ width:52px; height:66px; }

  /* WhatsApp FAB respects safe area; hide when mobile menu open */
  .wa-fab{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
  .nav.nav-open ~ .wa-fab{ opacity:0; pointer-events:none; }
}

@media (max-width:560px){
  .hero-slides{ height:42vh; min-height:290px; }
  .cat-cards{ grid-template-columns:1fr; }
  .btn, .btn-wa{ width:100%; justify-content:center; }
  .nav .nav-cta{ width:auto; }
  .foot-word{ font-size:30vw; }
  .lb-main{ aspect-ratio:4/5; }
}

@media (max-width:380px){
  :root{ --pad:16px; }
  .hero h1{ font-size:2.2rem; }
  .nav .brand-logo{ height:22px; }
  .slide-cap .sc-cat{ font-size:22px; }
}

/* ============================================================
   ADD-TO-CART + CART DRAWER
   ============================================================ */
.card, .mini, .cat-feature, .edit__card{ position:relative; }
.add-cart{ position:absolute; top:12px; right:12px; z-index:5; width:42px; height:42px; border-radius:50%;
  background:rgba(251,247,240,.94); color:var(--ink); border:1px solid var(--line); display:grid; place-items:center;
  cursor:pointer; opacity:0; transform:translateY(-6px) scale(.9); transition:opacity .3s, transform .3s, background .3s, color .3s, border-color .3s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:0 6px 18px rgba(20,14,10,.12); }
.add-cart svg{ width:19px; height:19px; }
.card:hover .add-cart, .mini:hover .add-cart, .cat-feature:hover .add-cart, .edit__card:hover .add-cart{ opacity:1; transform:none; }
.add-cart:hover{ background:var(--gold2); color:#1c140e; border-color:var(--gold2); transform:scale(1.06); }
.add-cart.added{ background:#25D366; color:#fff; border-color:#25D366; }
@media (pointer:coarse){ .add-cart{ opacity:1; transform:none; width:38px; height:38px; } }

/* nav cart button + badge */
.nav .nav-cart{ display:inline-flex; align-items:center; gap:8px; }
.nav .nav-cart svg{ width:18px; height:18px; }
.nav .nav-cart .cart-label{ }
.cart-count{ min-width:20px; height:20px; padding:0 5px; border-radius:20px; background:#1c140e; color:var(--gold2);
  font-family:var(--sans); font-weight:800; font-size:.62rem; display:inline-flex; align-items:center; justify-content:center; }
.nav-cart.pop{ animation:cartPop .48s ease; }
@keyframes cartPop{ 0%,100%{ transform:scale(1); } 42%{ transform:scale(1.14); } }
@media (max-width:820px){ .nav .nav-cart .cart-label{ display:none; } }

/* overlay + drawer */
.cart-overlay{ position:fixed; inset:0; z-index:1490; background:rgba(20,14,10,.5); opacity:0; visibility:hidden;
  transition:opacity .45s, visibility .45s; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.cart-overlay.on{ opacity:1; visibility:visible; }
.cart{ position:fixed; top:0; right:0; z-index:1500; width:min(430px,94vw); height:100dvh; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; transform:translateX(102%); transition:transform .5s cubic-bezier(.2,.8,.2,1); box-shadow:-30px 0 80px rgba(20,14,10,.28); }
.cart.on{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,4vw,30px); border-bottom:1px solid var(--line); }
.cart-head .eyebrow{ color:var(--gold2); }
.cart-close{ background:none; border:0; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; padding:0 4px; }
.cart-scroll{ flex:1 1 auto; overflow-y:auto; padding:clamp(16px,3vw,24px) clamp(20px,4vw,30px); -webkit-overflow-scrolling:touch; }
.cart-empty{ text-align:center; color:var(--muted); padding:16vh 1rem; }
.cart-empty p{ font-family:var(--serif); font-size:1.5rem; color:var(--ink2); margin-bottom:8px; }
.cart-empty span{ font-size:.9rem; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.ci-img{ width:64px; height:80px; border-radius:6px; overflow:hidden; background:var(--sand); }
.ci-img img{ width:100%; height:100%; object-fit:cover; }
.ci-info h4{ font-family:var(--serif); font-weight:600; font-size:1.1rem; line-height:1.05; color:var(--ink); }
.ci-code{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin:3px 0 8px; }
.ci-qty{ display:inline-flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:100px; padding:3px 6px; }
.ci-qty button{ width:22px; height:22px; border:0; background:none; font-size:15px; color:var(--ink); cursor:pointer; line-height:1; }
.ci-qty span{ min-width:14px; text-align:center; font-weight:600; font-size:.9rem; }
.ci-remove{ background:none; border:0; font-size:19px; color:var(--muted); cursor:pointer; align-self:flex-start; padding:2px 4px; }
.ci-remove:hover{ color:var(--ink); }
.cart-foot{ flex:0 0 auto; border-top:1px solid var(--line); padding:clamp(16px,3vw,22px) clamp(20px,4vw,30px) calc(clamp(16px,3vw,22px) + env(safe-area-inset-bottom)); background:var(--cream); }
.cart-sum{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cart-sum b{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.cart-sum small{ color:var(--muted); font-size:.72rem; }
.cart-terms{ font-size:.72rem; color:var(--ink2); margin:10px 0 16px; line-height:1.5; }
.cart-terms a{ color:var(--gold2); text-decoration:underline; text-underline-offset:2px; }
.cart-proceed, .cart-order{ width:100%; justify-content:center; }
.cart.checkout .cart-proceed{ display:none; }
.cart:not(.checkout) .cart-form{ display:none; }
.cart-form{ margin-top:6px; }
.cf-row{ margin-bottom:11px; }
.cf-row label{ display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.cf-row label small{ text-transform:none; letter-spacing:0; }
.cf-row input, .cf-row textarea{ width:100%; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  font-family:var(--sans); font-size:.95rem; color:var(--ink); outline:none; transition:border-color .3s; }
.cf-row input:focus, .cf-row textarea:focus{ border-color:var(--gold2); }
.cf-row textarea{ resize:vertical; }
.cf-agree{ display:flex; gap:9px; align-items:flex-start; font-size:.78rem; color:var(--ink2); margin:6px 0 14px; line-height:1.45; }
.cf-agree input{ margin-top:2px; accent-color:var(--gold2); }
.cf-agree a{ color:var(--gold2); text-decoration:underline; }
.cf-hint{ font-size:.68rem; color:var(--muted); margin-top:10px; text-align:center; }