/* front page: virtual showroom, garments dropping top to bottom */
.nav{opacity:1;mix-blend-mode:normal;background:linear-gradient(180deg,rgba(8,8,8,.92),rgba(8,8,8,.6));backdrop-filter:blur(6px)}
.nav .nav-links{gap:clamp(1rem,2.6vw,2.2rem)}
.nav-left{margin-right:auto}
.nav-link{font-size:.78rem}
.hero{position:relative;min-height:100vh;height:100vh;overflow:hidden;opacity:1;transform:none;padding:0;background:#050505;isolation:isolate}
.hero .stage-bg{position:absolute;inset:0;z-index:0}
.hero .hall-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:0;transition:opacity 1.4s ease;filter:saturate(.85) contrast(1.05) brightness(.95)}
.hero .hall-photo.ok{opacity:1}
.hero .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.85) 100%)}
.fall{position:absolute;inset:0;z-index:1;overflow:hidden}
.fall.front{z-index:4}
.fall .gar{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;cursor:pointer;will-change:transform,opacity;
  filter:saturate(.9) drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 26px 26px rgba(0,0,0,.7))}
.fall .gar img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.fall .gar:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.mark{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 1rem}
.mark h1{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--fg);letter-spacing:-.03em;line-height:.85;
  font-size:clamp(5.5rem,26vw,24rem);text-shadow:0 6px 60px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.mark p{margin-top:1.4rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(236,233,216,.75);text-shadow:0 2px 14px #000}
.hero-ctas{position:absolute;z-index:6;left:0;right:0;bottom:clamp(1.4rem,5vh,3rem);display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;padding:0 1rem}
.hero-ctas a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(236,233,216,.4);padding:.9rem 1.5rem;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.hero-ctas a.primary{background:var(--lime);color:var(--bg);border-color:var(--lime);font-weight:700}
.hero-ctas a:hover{opacity:.85}
.hero .card{position:absolute;z-index:7;left:50%;bottom:clamp(5.5rem,13vh,8rem);transform:translateX(-50%);display:flex;align-items:center;gap:1.2rem;background:rgba(8,8,8,.85);border:1px solid rgba(236,233,216,.3);backdrop-filter:blur(8px);padding:.9rem 1.2rem;max-width:min(92vw,520px)}
.hero .card[hidden]{display:none}
.hero .c-name{font-family:var(--serif);font-style:italic;font-size:1.25rem}
.hero .c-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:.2rem}
.hero .c-go{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:.7rem 1rem;font-weight:700;white-space:nowrap}
.hero .c-close{background:none;border:0;color:var(--mute);font-family:var(--mono);font-size:1.1rem;cursor:pointer;padding:.2rem .4rem}
.hero .gate{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;padding:1.5rem;background:rgba(4,4,4,.55);backdrop-filter:blur(3px);transition:opacity .9s ease}
.hero .gate.open{opacity:0;pointer-events:none}
.hero .gate[hidden]{display:none}
.hero .gate .g-note{font-size:.72rem;letter-spacing:.14em;color:rgba(236,233,216,.8);text-transform:uppercase}
.hero .gate .g-btn{background:var(--lime);color:var(--bg);border:0;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;padding:1.1rem 2.8rem;cursor:pointer}
.hero .gate .g-quiet{background:none;border:0;border-bottom:1px solid var(--line);color:var(--mute);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:.2rem 0}
.hero .gate .g-btn:hover{opacity:.88}
.hero .gate .g-quiet:hover{color:var(--fg)}
.mute{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;gap:.7rem;background:rgba(8,8,8,.85);border:1px solid rgba(236,233,216,.3);border-right:0;color:var(--fg);font-family:var(--mono);cursor:pointer;padding:1rem .6rem}
.mute:hover{border-color:var(--lime)}
.mute .m-txt{writing-mode:vertical-rl;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase}
.mute .bars{display:flex;gap:2px;align-items:flex-end;height:16px}
.mute .bars i{display:block;width:3px;background:var(--lime);animation:eq 1s ease-in-out infinite}
.mute .bars i:nth-child(1){height:6px;animation-delay:-.2s}.mute .bars i:nth-child(2){height:14px;animation-delay:-.5s}.mute .bars i:nth-child(3){height:9px;animation-delay:-.8s}
.mute.off .bars i{animation:none;height:3px;background:var(--mute)}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (max-width:700px){.nav-link{font-size:.7rem}.nav .nav-links{gap:.8rem}.nav-right .nav-link:nth-child(n+2){display:none}}
@media (prefers-reduced-motion:reduce){.mute .bars i{animation:none}}

/* slow push-in on the room + drifting haze */
.hero .hall-photo{transform-origin:50% 60%;animation:pushin 36s ease-in-out infinite alternate;filter:saturate(.95) contrast(1.05) brightness(1.05)}
.hero .stage-bg::after{content:"";position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(ellipse 40% 30% at 30% 62%,rgba(255,214,150,.10),transparent 70%),radial-gradient(ellipse 36% 28% at 72% 48%,rgba(255,214,150,.12),transparent 70%);animation:haze 18s ease-in-out infinite alternate}
@keyframes pushin{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes haze{from{transform:translateX(-3%);opacity:.35}to{transform:translateX(3%);opacity:.7}}
@media (prefers-reduced-motion:reduce){.hero .hall-photo,.hero .stage-bg::after{animation:none}}

/* centered wordmark in the header, appears once you scroll past the hero */
.nav-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1;letter-spacing:-.02em;opacity:0;pointer-events:none;transition:opacity .4s ease;color:var(--fg)}
.nav-center.show{opacity:1;pointer-events:auto}
.nav-center::before,.nav-center::after{content:none!important}
@media (max-width:700px){.nav-center{display:none}}

.nav-mark img{display:block;height:clamp(1.7rem,3.6vw,2.4rem);width:auto}
.mark h1 img{display:block;width:clamp(15rem,46vw,42rem);height:auto;filter:drop-shadow(0 6px 50px rgba(0,0,0,.85))}
.nav-center{font-size:0}
.mark p{margin-top:2.4rem}

.jewelry{border-top:1px solid var(--line);padding:clamp(4rem,10vw,8rem) clamp(1.2rem,6vw,6rem);text-align:center}
.jw-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.4rem,7vw,5rem);line-height:1;letter-spacing:-.02em;margin:1.2rem 0 1rem}
.jw-line{color:var(--mute);font-size:.92rem;line-height:1.7;max-width:44ch;margin:0 auto}
.jw-cta{display:inline-block;margin-top:2rem;background:var(--lime);color:var(--bg);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;padding:1rem 2rem}
.jw-cta:hover{opacity:.85}

.jw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;max-width:1100px;margin:2.4rem auto 0}
.jw-grid a{display:block;overflow:hidden;background:#f1f2f3}
.jw-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .6s ease}
.jw-grid a:hover img{transform:scale(1.05)}
@media (max-width:760px){.jw-grid{grid-template-columns:repeat(2,1fr)}.jw-grid a:last-child{grid-column:1/-1;max-width:50%;margin:0 auto}}
