/* PERLAGE — caviar & champagne. Black / ivory, colour only from photographs. */
:root {
  --bk: #0a0a0a; --iv: #efebe3; --wh: #fafafa; --g: #8c8c8c; --g2: #5a5a5a;
  --ln: rgba(255,255,255,.16); --pad: clamp(16px, 2.4vw, 36px); --max: 1800px;
  --e: cubic-bezier(.16,1,.3,1); --io: cubic-bezier(.76,0,.24,1);
  --f: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --m: "Geist Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; scroll-behavior: auto; }
body { margin: 0; overflow-x: clip; background: var(--bk); color: var(--wh); font-family: var(--f); font-size: 16px; line-height: 1.45; letter-spacing: -.01em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--m); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.dim { color: var(--g); }
.lead { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; }
.sec { padding: clamp(80px, 11vw, 180px) 0; position: relative; }
.iv { background: var(--iv); color: var(--bk); --g: #6b675f; --ln: rgba(0,0,0,.14); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 26px; background: var(--bk); color: var(--wh); border: 1px solid var(--bk); font-size: 14px; font-weight: 650; letter-spacing: -.01em; transition: background .35s, color .35s, border-color .35s; white-space: nowrap; }
.btn:hover { background: transparent; color: var(--bk); }
.btn--w { background: var(--wh); color: var(--bk); border-color: var(--wh); } .btn--w:hover { background: transparent; color: var(--wh); }
.btn--wg { background: transparent; color: var(--wh); border-color: rgba(255,255,255,.55); } .btn--wg:hover { background: var(--wh); color: var(--bk); }
.btn--ghost { background: transparent; color: var(--bk); border-color: var(--bk); } .btn--ghost:hover { background: var(--bk); color: var(--wh); }
.sec:not(.iv) .btn:not(.btn--w):not(.btn--wg) { background: var(--wh); color: var(--bk); border-color: var(--wh); }
.sec:not(.iv) .btn:not(.btn--w):not(.btn--wg):hover { background: transparent; color: var(--wh); }
.btn--full { width: 100%; } .btn--sm { padding: 12px 18px; font-size: 13px; }

/* ---------- loader ---------- */
.pre { position: fixed; inset: 0; z-index: 9999; background: var(--bk); display: grid; place-items: center; overflow: hidden; }
html:not(.js) .pre { display: none; }
.pre__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.pre__w { position: relative; font-size: clamp(70px, 15vw, 280px); font-weight: 800; letter-spacing: -.07em; line-height: .8; font-variation-settings: "wght" var(--pw, 100); }
.pre__n { position: absolute; top: var(--pad); right: var(--pad); } .pre__k { position: absolute; bottom: var(--pad); left: var(--pad); }
body.ready .pre { opacity: 0; visibility: hidden; transition: opacity .7s .1s, visibility 0s .8s; }

/* ---------- page transition: a circle poured from the click ---------- */
.pour { position: fixed; inset: 0; z-index: 9000; background: var(--bk); color: var(--wh); pointer-events: none; clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); visibility: hidden; }
.pour__in { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 26px var(--pad); }
.pour__in .mono { opacity: .6; }
.pour__w { align-self: center; max-width: 100%; font-size: clamp(60px, 12vw, 230px); font-weight: 800; letter-spacing: -.065em; line-height: .85; text-transform: uppercase; text-align: center; font-variation-settings: "wght" 200; transform: scale(.9); opacity: 0; }
body.leaving .pour { visibility: visible; pointer-events: auto; clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); transition: clip-path .8s var(--io); }
body.leaving .pour__w { opacity: 1; transform: none; font-variation-settings: "wght" 800; transition: all .9s var(--e) .15s; }
body.arriving .pour { visibility: visible; clip-path: circle(150% at 50% 50%); }
body.arriving .pour__w { opacity: 1; transform: none; font-variation-settings: "wght" 800; }
body.arrived .pour { clip-path: circle(0% at 50% 50%); transition: clip-path .95s var(--io); }
body.arrived .pour__w { opacity: 0; transform: scale(1.15); transition: all .8s var(--io); }

/* ---------- nav: split bar ---------- */
.nv { position: fixed; left: 0; right: 0; top: 0; z-index: 500; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--pad); color: var(--wh); transition: padding .5s var(--e), color .4s, background .4s; }
.nv::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0); transition: transform .8s var(--e), opacity .4s; }
.nv--s { padding-top: 12px; padding-bottom: 12px; } .nv--s::after { opacity: .25; transform: none; }
.nv--lt { color: var(--bk); }
.nv__l { display: flex; gap: 26px; font-size: 14px; font-weight: 600; }
.nv__l a, .nv__res { position: relative; } .nv__l a::after, .nv__res::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e); }
.nv__l a:hover::after, .nv__l a.on::after, .nv__res:hover::after { transform: scaleX(1); transform-origin: left; }
.nv__logo { display: grid; justify-items: center; gap: 3px; } .nv__logo b { font-size: 26px; font-weight: 800; letter-spacing: .16em; line-height: 1; padding-left: .16em; transition: font-size .5s var(--e), letter-spacing .5s var(--e); } .nv__logo .mono { font-size: 9px; opacity: .75; transition: opacity .4s, height .4s; }
.nv--s .nv__logo b { font-size: 20px; letter-spacing: .3em; } .nv--s .nv__logo .mono { opacity: 0; height: 0; overflow: hidden; }
.nv__r { display: flex; justify-content: flex-end; align-items: center; gap: 22px; font-size: 14px; font-weight: 600; }
.nv__bag { display: flex; align-items: center; gap: 8px; } .nv__bag b { min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 13px; font-size: 12px; }
.nv__bag.bump b { animation: bump .6s var(--e); } @keyframes bump { 40% { transform: scale(1.5); } }
.nv__m { width: 46px; height: 46px; display: grid; align-content: center; gap: 6px; justify-items: center; border: 1.5px solid currentColor; border-radius: 50%; } .nv__m i { width: 18px; height: 1.5px; background: currentColor; transition: transform .5s var(--e); } .nv__m:hover i:first-child { transform: translateX(3px); } .nv__m:hover i:last-child { transform: translateX(-3px); }

/* ---------- menu: the tin opens ---------- */
.tin { position: fixed; inset: 0; z-index: 800; pointer-events: none; visibility: hidden; transition: visibility 0s .9s; }
.tin.open { pointer-events: auto; visibility: visible; transition: none; }
.tin__lid { position: absolute; left: 0; right: 0; height: 50%; display: grid; grid-template-columns: 1fr 1.4fr; overflow: hidden; transition: transform .9s var(--io); }
.tin__lid--t { top: 0; background: var(--bk); color: var(--wh); transform: translateY(-101%); }
.tin__lid--b { bottom: 0; background: var(--iv); color: var(--bk); grid-template-columns: 1.4fr 1fr; transform: translateY(101%); }
.tin.open .tin__lid { transform: none; }
.tin__ph { position: relative; overflow: hidden; } .tin__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1.4s var(--e); } .tin.open .tin__ph img { transform: none; }
.tin__links { display: grid; align-content: center; gap: 0; padding: 70px clamp(24px, 4vw, 70px) 30px; }
.tin__lid--b .tin__links { padding-top: 30px; padding-bottom: 70px; }
.tin__links p { margin-bottom: 10px; opacity: .6; }
.tin__links a { display: flex; align-items: baseline; gap: 16px; font-size: clamp(34px, 4.6vw, 86px); font-weight: 800; letter-spacing: -.055em; line-height: .98; font-variation-settings: "wght" 800; transition: font-variation-settings .5s var(--e), padding .5s var(--e); }
.tin__links a .mono { font-size: 11px; letter-spacing: .1em; font-weight: 400; opacity: .5; }
.tin__links a:hover, .tin__links a.on { font-variation-settings: "wght" 200; padding-left: 14px; }
.tin__x { position: absolute; left: 50%; top: 50%; z-index: 2; width: 96px; height: 96px; margin: -48px; border-radius: 50%; background: var(--wh); color: var(--bk); border: 1px solid var(--bk); font-size: 13px; font-weight: 700; transform: scale(0) rotate(-90deg); transition: transform .7s var(--e); }
.tin.open .tin__x { transform: scale(1) rotate(0); transition-delay: .5s; } .tin__x:hover { background: var(--bk); color: var(--wh); }
.tin__f { position: absolute; left: var(--pad); right: var(--pad); bottom: 20px; z-index: 2; display: flex; gap: 26px; color: var(--bk); opacity: 0; transition: opacity .4s; } .tin.open .tin__f { opacity: .8; transition-delay: .7s; }
body.menu-open { overflow: hidden; }

/* ---------- bag ---------- */
.scrim { position: fixed; inset: 0; z-index: 850; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .5s; } .scrim.on { opacity: 1; pointer-events: auto; }
.bag { position: fixed; top: 0; right: 0; bottom: 0; z-index: 860; width: min(480px, 100%); background: var(--iv); color: var(--bk); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(101%); transition: transform .7s var(--io); }
.bag.open { transform: none; }
.bag__h { display: flex; justify-content: space-between; align-items: center; padding: 26px; border-bottom: 1px solid rgba(0,0,0,.12); } .bag__h h2 { font-size: 34px; letter-spacing: -.05em; font-weight: 800; }
.bag__list { list-style: none; margin: 0; padding: 0 26px; overflow: auto; }
.bag__list li { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.1); } .bag__list img { width: 80px; height: 96px; object-fit: cover; }
.bag__list b { display: block; font-size: 18px; letter-spacing: -.03em; } .bag__list button { margin-top: 6px; text-decoration: underline; }
.bag__q { display: flex; align-items: center; gap: 10px; } .bag__q button { width: 26px; height: 26px; border: 1px solid rgba(0,0,0,.3); border-radius: 50%; margin: 0; text-decoration: none; }
.bag__empty { padding: 40px 0; color: #6b675f; }
.bag__f { padding: 26px; display: grid; gap: 14px; border-top: 1px solid rgba(0,0,0,.12); } .bag__row { display: flex; justify-content: space-between; align-items: baseline; } .bag__row b { font-size: 36px; letter-spacing: -.05em; }
.bag .btn { background: var(--bk); color: var(--wh); }

/* ---------- HERO: triptych that opens ---------- */
.hx { position: relative; height: 260vh; background: var(--bk); }
.hx__st { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; }
.hx__cols { position: absolute; inset: 0; display: flex; gap: 2px; }
.hx__col { position: relative; flex: 0 0 auto; overflow: hidden; height: 100%; }
.hx__col:nth-child(1), .hx__col:nth-child(3) { width: var(--sw, 30vw); }
.hx__col:nth-child(2) { flex: 1 1 auto; }
.hx__col figure { position: absolute; inset: -10% 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--io); transform: translateY(var(--py, 0px)); }
.hx__col figure.on { clip-path: inset(0 0 0 0); z-index: 2; } .hx__col figure.was { clip-path: inset(0 0 0 0); z-index: 1; }
.hx__col img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.15); transition: transform 6s var(--e); }
.hx__col figure.on img { transform: scale(1); }
.hx__col::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.08) 28%, rgba(0,0,0,.08) 60%, rgba(0,0,0,.55)); pointer-events: none; }
.hx__k { position: absolute; left: 0; right: 0; top: 104px; z-index: 5; display: flex; justify-content: space-between; align-items: center; opacity: var(--o, 1); }
.hx__bars { display: flex; gap: 6px; } .hx__bars i { width: 46px; height: 2px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; } .hx__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hx__bars i.on::after { transform: scaleX(1); transition: transform var(--dur, 4.4s) linear; } .hx__bars i.done::after { transform: scaleX(1); }
.hx__w { position: absolute; left: 0; right: 0; top: 50%; z-index: 5; display: flex; justify-content: center; transform: translateY(-50%) scale(var(--ws, 1)); font-size: clamp(80px, 19.5vw, 380px); line-height: .8; letter-spacing: -.06em; font-weight: 800; pointer-events: none; white-space: nowrap; text-shadow: 0 30px 90px rgba(0,0,0,.3); opacity: var(--wo, 1); }
.hx__w span { display: inline-block; font-variation-settings: "wght" var(--wg, 820); transform: translateY(70%); opacity: 0; transition: transform 1.4s var(--e), opacity 1s; }
.ready .hx__w span { transform: none; opacity: 1; }
.hx__w span:nth-child(2) { transition-delay: .05s; } .hx__w span:nth-child(3) { transition-delay: .1s; } .hx__w span:nth-child(4) { transition-delay: .15s; } .hx__w span:nth-child(5) { transition-delay: .2s; } .hx__w span:nth-child(6) { transition-delay: .25s; } .hx__w span:nth-child(7) { transition-delay: .3s; }
.hx__caps { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 5; display: flex; justify-content: space-between; opacity: var(--o, 1); }
.hx__caps span { transition: opacity .4s; } .hx__caps span.sw { opacity: 0; }
.hx__end { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 6; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: var(--e2, 0); transform: translateY(calc((1 - var(--e2, 0)) * 40px)); pointer-events: none; }
.hx__end.on { pointer-events: auto; }
.hx__end h2 { font-size: clamp(46px, 6.6vw, 130px); font-weight: 800; letter-spacing: -.06em; line-height: .88; }
.hx__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- intro ---------- */
.fillt { font-size: clamp(30px, 3.7vw, 70px); font-weight: 700; letter-spacing: -.05em; line-height: 1.04; margin: 26px 0 80px; max-width: 24ch; }
.fillt .w { opacity: .15; transition: opacity .3s; } .fillt .w.on { opacity: 1; }
.cnt { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ln); }
.cnt div { display: grid; gap: 8px; padding-top: 22px; } .cnt b { font-size: clamp(56px, 6.4vw, 124px); font-weight: 800; letter-spacing: -.07em; line-height: .9; } .cnt .mono { color: var(--g); }

/* ---------- one grain ---------- */
.gr { position: relative; height: 300vh; background: var(--bk); }
.gr__st { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.gr__img { position: absolute; inset: 0; clip-path: circle(var(--r, 3vmin) at 50% 50%); }
.gr__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 2.6)); }
.gr__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r, 3vmin) * 2 + 34px); height: calc(var(--r, 3vmin) * 2 + 34px); transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; opacity: var(--ro, 1); pointer-events: none; }
.gr__t { position: absolute; left: 0; right: 0; top: 104px; display: grid; gap: 14px; opacity: var(--to, 1); }
.gr__h { display: flex; align-items: baseline; gap: 10px; font-size: clamp(110px, 16vw, 300px); font-weight: 800; letter-spacing: -.07em; line-height: .8; } .gr__h i { font-style: normal; font-size: .2em; letter-spacing: -.02em; font-weight: 500; }
.gr__l { max-width: 340px; font-size: 17px; }
.gr__end { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: var(--e2, 0); transform: translateY(calc((1 - var(--e2, 0)) * 40px)); }
.gr__end h2 { font-size: clamp(46px, 6.6vw, 130px); font-weight: 800; letter-spacing: -.06em; line-height: .88; text-shadow: 0 10px 60px rgba(0,0,0,.4); }
.gr__end .mono { position: absolute; top: -30px; left: var(--pad); }

/* ---------- horizontal caviar ---------- */
.hs { position: relative; background: var(--bk); }
.hs__st { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 100px 0 30px; }
.hs__head { display: flex; justify-content: space-between; margin-bottom: 22px; }
.hs__track { display: flex; gap: 2px; padding-left: var(--pad); will-change: transform; height: 100%; }
.hz { position: relative; flex: 0 0 auto; width: min(78vw, 1180px); height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: #141414; overflow: hidden; }
.hz__ph { position: relative; overflow: hidden; } .hz__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e); } .hz:hover .hz__ph img { transform: scale(1.05); }
.hz__b { display: grid; align-content: space-between; gap: 20px; padding: clamp(22px, 2.6vw, 44px); }
.hz__n { font-size: clamp(48px, 5.4vw, 108px); font-weight: 800; letter-spacing: -.065em; line-height: .86; font-variation-settings: "wght" 800; transition: font-variation-settings .7s var(--e); } .hz:hover .hz__n { font-variation-settings: "wght" 250; }
.hz__m { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ln); padding-top: 16px; } .hz__m span { display: grid; gap: 4px; } .hz__m b { font-size: clamp(26px, 2.4vw, 44px); letter-spacing: -.05em; } .hz__m i { font-style: normal; color: var(--g); }
.hz__d { color: #bdbdbd; max-width: 420px; }
.hz--end { width: min(44vw, 640px); grid-template-columns: 1fr; align-content: end; padding: 44px; background: var(--iv); color: var(--bk); gap: 14px; }
.hz--end b { font-size: clamp(60px, 7vw, 140px); font-weight: 800; letter-spacing: -.07em; line-height: .85; }
.hs__bar { height: 2px; margin: 26px var(--pad) 0; background: rgba(255,255,255,.18); } .hs__bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }

/* ---------- bubbles ---------- */
.bb { position: relative; height: 120vh; min-height: 720px; overflow: hidden; background: var(--bk); }
.bb__img { position: absolute; inset: 0; } .bb__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(1.15); transform: scale(var(--bs, 1.1)); }
.bb__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb__t { position: absolute; inset: 0; display: grid; align-content: center; gap: 26px; pointer-events: none; }
.bb__w { font-size: clamp(90px, 19vw, 370px); font-weight: 800; letter-spacing: -.065em; line-height: .8; color: transparent; -webkit-text-stroke: 2px #fff; background: linear-gradient(0deg, #fff var(--lv, 0%), transparent var(--lv, 0%)); -webkit-background-clip: text; background-clip: text; }
.bb__l { max-width: 440px; font-size: 18px; }
.bb__n { display: flex; gap: 60px; } .bb__n div { display: grid; gap: 6px; } .bb__n b { font-size: clamp(50px, 5vw, 96px); font-weight: 800; letter-spacing: -.07em; line-height: .9; }

/* ---------- pairing machine ---------- */
.pm { padding: clamp(90px, 10vw, 170px) 0; background: var(--bk); }
.pm__head { display: grid; gap: 16px; margin-bottom: 60px; }
.pm__h { font-size: clamp(54px, 7vw, 140px); font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.pm__g { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: clamp(20px, 3vw, 50px); align-items: center; }
.pm__reel { position: relative; display: grid; justify-items: center; gap: 12px; }
.pm__reel ul { list-style: none; margin: 0; padding: 0; height: calc(3 * 1.1em); overflow: hidden; width: 100%; font-size: clamp(28px, 3vw, 58px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; text-align: center; -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.pm__reel li { transform: translateY(var(--ry, 0)); transition: transform .7s var(--e), font-variation-settings .5s; white-space: nowrap; font-variation-settings: "wght" 200; cursor: pointer; } .pm__reel li.on { font-variation-settings: "wght" 800; }
.pm__ar { width: 54px; height: 54px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 20px; transition: background .3s, color .3s; } .pm__ar:hover { background: #fff; color: #000; }
.pm__mid { display: grid; gap: 22px; justify-items: center; text-align: center; }
.pm__phs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; }
.pm__ph { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #141414; } .pm__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pmIn .9s var(--e); }
@keyframes pmIn { from { clip-path: inset(100% 0 0 0); transform: scale(1.15); } to { clip-path: inset(0); transform: none; } }
.pm__score { display: flex; align-items: baseline; font-size: clamp(90px, 10vw, 190px); font-weight: 800; letter-spacing: -.07em; line-height: .8; margin-top: -.42em; text-shadow: 0 10px 50px rgba(0,0,0,.5); position: relative; } .pm__score i { font-style: normal; font-size: .3em; }
.pm__note { max-width: 420px; color: #cfcfcf; min-height: 3em; }
.pm__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- ritual stack ---------- */
.stack { position: relative; }
.sk { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bk); }
.sk__ph { position: absolute; inset: 0; } .sk__ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.sk__t { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4vw; padding-bottom: 70px; }
.sk__n { font-size: clamp(160px, 26vw, 520px); font-weight: 800; letter-spacing: -.08em; line-height: .76; color: transparent; -webkit-text-stroke: 2px #fff; }
.sk__h { font-size: clamp(60px, 9vw, 180px); font-weight: 800; letter-spacing: -.07em; line-height: .85; margin: 14px 0 18px; }
.sk__l { max-width: 420px; font-size: 18px; }

/* ---------- ticker ---------- */
.tk { overflow: hidden; padding: 40px 0; }
.tk__row { display: flex; white-space: nowrap; will-change: transform; }
.tk__row span { font-size: clamp(60px, 8vw, 150px); font-weight: 800; letter-spacing: -.06em; line-height: 1; padding-right: .5em; color: transparent; -webkit-text-stroke: 1.5px var(--bk); }
.tk__row span:nth-child(3n+1) { color: var(--bk); -webkit-text-stroke: 0; }
.tk__row span::after { content: "·"; padding-left: .5em; color: var(--bk); }

/* ---------- salons: doors ---------- */
.drs__head, .cg__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 40px; margin-bottom: 50px; }
.drs__head .mono, .cg__head .mono { grid-column: 1 / -1; } .drs__head p.dim { max-width: 380px; }
.drs__h { font-size: clamp(46px, 6vw, 120px); font-weight: 800; letter-spacing: -.065em; line-height: .9; }
.drs__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; perspective: 1800px; }
.dr { position: relative; height: 82vh; min-height: 560px; overflow: hidden; background: var(--iv); color: var(--bk); }
.dr__back { position: absolute; inset: 0; display: grid; align-content: center; gap: 18px; padding: 40px 30px 40px 18%; }
.dr__back b { font-size: clamp(24px, 2.2vw, 40px); letter-spacing: -.04em; line-height: 1.05; }
.dr__time b { font-size: clamp(70px, 7vw, 140px); font-weight: 800; letter-spacing: -.07em; line-height: .85; display: block; } .dr__time i { font-style: normal; }
.dr__door { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 1.3s var(--io), filter 1.3s; transform-style: preserve-3d; box-shadow: 30px 0 60px rgba(0,0,0,.35); }
.dr__door img { width: 100%; height: 100%; object-fit: cover; }
.dr__door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6)); }
.dr__name { position: absolute; left: 24px; bottom: 20px; z-index: 1; color: #fff; font-size: clamp(54px, 5.5vw, 110px); font-weight: 800; letter-spacing: -.065em; line-height: .85; }
.dr__knob { position: absolute; right: 26px; top: 50%; z-index: 1; width: 14px; height: 60px; border: 2px solid rgba(255,255,255,.8); border-radius: 8px; }
.dr:hover .dr__door, .dr.open .dr__door { transform: rotateY(-78deg); filter: brightness(.6); }

/* ---------- gifts: engraving ---------- */
.gf__g { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; align-items: center; }
.gf__ph { position: relative; aspect-ratio: 1 / 1; }
.gf__ph > span { position: absolute; display: block; overflow: hidden; }
.gf__a { left: 0; top: 0; width: 62%; height: 74%; } .gf__b { right: 0; bottom: 0; width: 52%; height: 60%; }
.gf__a img, .gf__b img { width: 100%; height: 100%; object-fit: cover; }
.gf__lid { left: 30%; top: 32%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3a3a, #0d0d0d 70%); box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 10px #1c1c1c, inset 0 0 0 11px #444; display: grid !important; place-items: center; color: #d8d8d8; }
.gf__lidt { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18%; } .gf__lidt i { font-style: normal; font-size: 9px; opacity: .7; }
.gf__lidt b { font-size: clamp(18px, 2vw, 34px); font-weight: 300; letter-spacing: .02em; line-height: 1.05; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.25); word-break: break-word; }
.gf__t { display: grid; gap: 22px; } .gf__h { font-size: clamp(54px, 6.4vw, 124px); font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.gf__in { display: grid; gap: 8px; } .gf__in input { width: 100%; padding: 18px 0; border: 0; border-bottom: 2px solid currentColor; background: transparent; font-size: clamp(26px, 2.6vw, 44px); font-weight: 700; letter-spacing: -.04em; outline: none; }
.gf__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- champagne tilt grid ---------- */
.cg__g { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 22vw; gap: 2px; perspective: 1400px; }
.cgi { position: relative; display: block; } .cgi--0 { grid-column: span 3; grid-row: span 2; } .cgi--1, .cgi--2 { grid-column: span 3; } .cgi--3, .cgi--4 { grid-column: span 3; }
.cgi__in { position: absolute; inset: 0; overflow: hidden; transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .5s var(--e); }
.cgi img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e); } .cgi:hover img { transform: scale(1.06); }
.cgi__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7)); }
.cgi__b { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: grid; gap: 6px; } .cgi__b b { font-size: clamp(30px, 3.2vw, 64px); font-weight: 800; letter-spacing: -.06em; line-height: .9; }

/* ---------- journal ---------- */
.jr__g { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4vw; }
.jr__f, .jr__i { display: grid; gap: 10px; align-content: start; } .jr__f b { font-size: clamp(34px, 3.6vw, 66px); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.jr__ph { display: block; overflow: hidden; } .jr__ph img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.2s var(--e); } a:hover .jr__ph img { transform: scale(1.05); }
.jr__l { display: grid; gap: 40px; align-content: start; } .jr__i { grid-template-columns: 1fr 1.2fr; gap: 20px; } .jr__i b { display: block; margin-top: 8px; font-size: clamp(22px, 2vw, 34px); letter-spacing: -.045em; line-height: 1.02; } .jr__i .jr__ph img { aspect-ratio: 1; }

/* ---------- reserve band ---------- */
.rb { position: relative; height: 100vh; min-height: 620px; overflow: hidden; color: #fff; }
.rb__img { position: absolute; inset: 0; } .rb__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--rs, 1.15)); }
.rb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent 60%); }
.rb__t { position: absolute; inset: 0; z-index: 1; display: grid; align-content: end; gap: 22px; padding-bottom: 70px; }
.rb__h { font-size: clamp(60px, 9vw, 180px); font-weight: 800; letter-spacing: -.07em; line-height: .85; }

/* ---------- page head that opens ---------- */
.ph { position: relative; height: 175vh; background: var(--bk); }
.ph__st { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.ph__img { position: absolute; inset: 0; clip-path: inset(var(--ct, 20vh) var(--cx, 24vw) var(--cb, 20vh) var(--cx, 24vw)); }
.ph__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(var(--ps, 1.2)); }
.ph__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); }
.ph__t { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 1; display: grid; gap: 18px; }
.ph__h { font-size: clamp(70px, 12vw, 240px); font-weight: 800; letter-spacing: -.07em; line-height: .82; font-variation-settings: "wght" var(--pw, 800); overflow-wrap: anywhere; }
.ph__row { display: flex; justify-content: space-between; align-items: end; gap: 30px; } .ph__l { max-width: 460px; font-size: 17px; }
body:not([data-page="home"]) .ph__h { max-width: 14ch; }

/* ---------- catalogue ---------- */
.fl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 26px; margin-bottom: 40px; border-bottom: 1px solid var(--ln); }
.fl__g { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fl button { font-size: clamp(20px, 1.6vw, 28px); font-weight: 700; letter-spacing: -.04em; font-variation-settings: "wght" 300; transition: font-variation-settings .4s; } .fl button.on, .fl button:hover { font-variation-settings: "wght" 800; }
.fl button.on { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.tls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 2px; } .tls--3 { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
.tl { display: grid; gap: 16px; align-content: start; } .tl.hide { display: none; }
.tl__ph { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: #ddd; }
.tl__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e), clip-path .9s var(--io); }
.tl__alt { clip-path: inset(100% 0 0 0); } .tl:hover .tl__alt { clip-path: inset(0); } .tl:hover .tl__ph img:first-child { transform: scale(1.06); }
.tl__b { display: grid; gap: 12px; padding: 0 4px; } .tl__b a { display: grid; gap: 6px; }
.tl__n { font-size: clamp(38px, 4vw, 80px); font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.tls--3 .tl__n { font-size: clamp(28px, 2.6vw, 50px); }
.tl__p { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ln); }
.tl__add { font-weight: 700; font-size: 14px; } .tl__add:hover, .tl__add.ok { text-decoration: underline; }
.scale__g { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.scale__i { display: grid; justify-items: center; gap: 10px; text-align: center; }
.scale__d { width: calc(var(--s) * 3.4vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777, #111 65%); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .6s var(--e); } .scale__i:hover .scale__d { transform: scale(1.1); }
.scale__i b { font-size: clamp(30px, 3vw, 56px); letter-spacing: -.06em; }
.gb__g { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.gb__calc { display: grid; gap: 22px; } .gb__calc label { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .gb__calc input { accent-color: #fff; } .gb__calc label b { font-size: 34px; letter-spacing: -.05em; min-width: 2ch; }
.gb__opt { display: flex; gap: 18px; flex-wrap: wrap; } .gb__opt button { font-size: 22px; font-weight: 700; letter-spacing: -.04em; font-variation-settings: "wght" 300; } .gb__opt button.on { font-variation-settings: "wght" 800; text-decoration: underline; text-underline-offset: 6px; }
.gb__r { display: flex; align-items: baseline; font-size: clamp(110px, 13vw, 250px); font-weight: 800; letter-spacing: -.08em; line-height: .8; } .gb__r i { font-style: normal; font-size: .3em; }
.dos__g { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--ln); }
.dos__i { position: relative; display: grid; grid-template-columns: 120px 1fr; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ln); overflow: hidden; }
.dos__i b { position: relative; z-index: 1; font-size: clamp(26px, 2.6vw, 48px); letter-spacing: -.05em; }
.dos__i::before { content: ""; position: absolute; left: 120px; top: 0; bottom: 0; width: calc((100% - 120px) * var(--d) + 6px); background: rgba(255,255,255,.1); transition: background .4s; } .dos__i:hover::before { background: rgba(255,255,255,.25); }

/* ---------- product ---------- */
.pd { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; background: var(--bk); }
.pd__ph { position: relative; min-height: 100vh; overflow: hidden; } .pd__ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pdIn 1.6s var(--e) both; }
@keyframes pdIn { from { clip-path: inset(0 0 100% 0); transform: scale(1.15); } to { clip-path: inset(0); transform: none; } }
.pd__alt { position: absolute; right: 24px; bottom: 24px; width: 28%; aspect-ratio: 3/4; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); } .pd__alt img { width: 100%; height: 100%; object-fit: cover; }
.pd__b { display: grid; align-content: center; gap: 22px; padding: 130px clamp(24px, 4vw, 80px) 60px; }
.pd__h { font-size: clamp(60px, 7.4vw, 150px); font-weight: 800; letter-spacing: -.07em; line-height: .84; }
.pd__l { font-size: 19px; max-width: 520px; }
.pd__sz { display: flex; gap: 2px; flex-wrap: wrap; } .pd__sz button { padding: 14px 20px; border: 1px solid rgba(255,255,255,.3); font-weight: 650; transition: background .3s, color .3s; } .pd__sz button.on, .pd__sz button:hover { background: #fff; color: #000; }
.pd__buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .pd__buy b { font-size: clamp(54px, 5vw, 96px); font-weight: 800; letter-spacing: -.07em; line-height: .9; }
.pd .btn { background: #fff; color: #000; border-color: #fff; } .pd .btn:hover { background: transparent; color: #fff; }
.spec { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ln); }
.spec div { display: grid; gap: 8px; padding: 24px 0; } .spec b { font-size: clamp(54px, 6vw, 118px); font-weight: 800; letter-spacing: -.07em; line-height: .88; }
.tst { margin-top: 60px; display: grid; gap: 20px; } .tst__w { display: flex; flex-wrap: wrap; gap: 0 .4em; font-size: clamp(50px, 7vw, 140px); font-weight: 800; letter-spacing: -.065em; line-height: .95; }
.tst__w span { font-variation-settings: "wght" 800; transition: font-variation-settings .5s; } .tst__w span:nth-child(2) { font-variation-settings: "wght" 200; } .tst__w span:hover { font-variation-settings: "wght" 450; }
.tst__w span:not(:last-child)::after { content: ","; }
.dbar { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: 40px; } .dbar i { position: relative; height: 2px; background: rgba(0,0,0,.2); } .dbar i::after { content: ""; position: absolute; top: 50%; left: calc(var(--d) * 100%); width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--bk); }
.pp__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; }
.pp__i { position: relative; height: 70vh; min-height: 460px; overflow: hidden; } .pp__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e); } .pp__i:hover img { transform: scale(1.06); }
.pp__i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 35%, transparent 55%, rgba(0,0,0,.7)); }
.pp__s { position: absolute; left: 22px; top: 18px; z-index: 1; display: flex; align-items: baseline; font-size: clamp(60px, 6vw, 110px); font-weight: 800; letter-spacing: -.07em; line-height: .9; } .pp__s i { font-style: normal; font-size: .35em; }
.pp__b { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: grid; gap: 6px; } .pp__b b { font-size: clamp(28px, 2.6vw, 50px); font-weight: 800; letter-spacing: -.055em; line-height: .92; }

/* ---------- pairings ---------- */
.mx { overflow-x: auto; margin-top: 30px; }
.mx table { width: 100%; min-width: 900px; border-collapse: collapse; }
.mx th { font-size: 13px; font-weight: 650; letter-spacing: -.01em; text-align: left; padding: 10px 8px; vertical-align: bottom; }
.mx thead th { height: 120px; } .mx thead th a { display: block; writing-mode: vertical-rl; transform: rotate(180deg); }
.mx td { position: relative; height: 64px; padding: 0; border: 1px solid var(--iv); background: rgba(10,10,10, calc(var(--v) * .85)); text-align: center; cursor: pointer; transition: transform .3s var(--e); }
.mx td span { font-weight: 800; font-size: 18px; letter-spacing: -.04em; color: var(--bk); mix-blend-mode: normal; } .mx td[style*="--v:0.7"] span, .mx td[style*="--v:0.8"] span, .mx td[style*="--v:0.9"] span, .mx td[style*="--v:1"] span { color: #fff; }
.mx td.best { background: var(--bk); outline: 3px solid var(--bk); } .mx td.best span { color: #fff; }
.mx td:hover, .mx td.on { transform: scale(1.12); z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mx__out { margin-top: 26px; font-size: clamp(22px, 2vw, 34px); font-weight: 700; letter-spacing: -.04em; min-height: 2.4em; }
.bps { display: grid; gap: 2px; margin-top: 40px; }
.bp { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; background: #141414; }
.bp__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .bp__ph a { overflow: hidden; } .bp__ph img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; transition: transform 1.2s var(--e); } .bp:hover .bp__ph img { transform: scale(1.05); }
.bp__b { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding: clamp(22px, 3vw, 50px); }
.bp__s { display: flex; align-items: baseline; font-size: clamp(80px, 8vw, 160px); font-weight: 800; letter-spacing: -.08em; line-height: .8; } .bp__s i { font-style: normal; font-size: .3em; }
.bp__b > div { display: grid; gap: 14px; justify-items: start; } .bp__n { font-size: clamp(20px, 1.7vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }

/* ---------- experiences / booking ---------- */
.bk__g { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3vw; margin-top: 50px; align-items: start; }
.exs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ex { position: relative; display: grid; text-align: left; overflow: hidden; height: 520px; color: #fff; }
.ex__ph { position: absolute; inset: 0; } .ex__ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) grayscale(.4); transition: filter .6s, transform 1.2s var(--e); }
.ex:hover .ex__ph img, .ex.on .ex__ph img { filter: brightness(.75); transform: scale(1.04); }
.ex__b { position: relative; z-index: 1; align-self: end; display: grid; gap: 10px; padding: 24px; } .ex__b b { font-size: clamp(30px, 2.8vw, 54px); font-weight: 800; letter-spacing: -.06em; line-height: .92; } .ex__b .dim { color: #d0d0d0; }
.ex.on::after { content: "Selected"; position: absolute; right: 18px; top: 18px; z-index: 1; padding: 8px 12px; background: #fff; color: #000; font: 500 11px var(--m); letter-spacing: .1em; text-transform: uppercase; }
.bk__card { position: sticky; top: 100px; display: grid; gap: 14px; padding: clamp(22px, 2.6vw, 40px); background: var(--iv); color: var(--bk); }
.bk__card .mono { margin-top: 6px; color: #6b675f; }
.bk__opts { display: flex; gap: 2px; flex-wrap: wrap; } .bk__opts button { padding: 12px 18px; border: 1px solid rgba(0,0,0,.25); font-weight: 650; } .bk__opts button.on { background: var(--bk); color: #fff; border-color: var(--bk); }
.cal__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cal__h b { font-size: 20px; letter-spacing: -.03em; } .cal__h button { width: 36px; height: 36px; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal__g span { font: 500 10px var(--m); text-align: center; color: #888; padding: 6px 0; }
.cal__g button { aspect-ratio: 1; font-weight: 650; font-size: 14px; background: rgba(0,0,0,.05); } .cal__g button:disabled { opacity: .25; cursor: default; } .cal__g button.on { background: var(--bk); color: #fff; } .cal__g button:not(:disabled):hover { outline: 1px solid var(--bk); }
.bk__gs { display: flex; align-items: center; gap: 20px; } .bk__gs button { width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.3); border-radius: 50%; font-size: 20px; } .bk__gs b { font-size: 40px; letter-spacing: -.05em; min-width: 2ch; text-align: center; }
.bk__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.15); } .bk__sum b { font-size: clamp(40px, 4vw, 70px); font-weight: 800; letter-spacing: -.07em; }
.bk__ok, .rs__ok, .ft__ok { display: none; } .sent .bk__ok, .sent .rs__ok, .sent .ft__ok { display: block; }

/* ---------- gifts page ---------- */
.gis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 2px; }
.gi { display: grid; gap: 18px; } .gi__ph { overflow: hidden; } .gi__ph img { width: 100%; aspect-ratio: 5/4; object-fit: cover; transition: transform 1.2s var(--e); } .gi:hover .gi__ph img { transform: scale(1.05); }
.gi__b { display: grid; gap: 10px; padding: 0 4px; } .gi__n { font-size: clamp(40px, 4.4vw, 86px); font-weight: 800; letter-spacing: -.065em; line-height: .88; }
.gi__p { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--ln); } .gi__p > span { font-size: 34px; font-weight: 800; letter-spacing: -.05em; }

/* ---------- faq ---------- */
.faq__g { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; }
.fq { border-top: 1px solid var(--ln); } .fq:last-child { border-bottom: 1px solid var(--ln); }
.fq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 50px 1fr 30px; align-items: center; gap: 10px; padding: 26px 0; font-size: clamp(20px, 1.7vw, 30px); font-weight: 650; letter-spacing: -.035em; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary i { position: relative; width: 22px; height: 22px; } .fq summary i::before, .fq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: currentColor; transition: transform .4s var(--e); } .fq summary i::after { transform: rotate(90deg); } .fq[open] summary i::after { transform: none; }
.fq p { margin: 0 0 26px 60px; max-width: 620px; font-size: 17px; line-height: 1.5; color: var(--g); }

/* ---------- salons ---------- */
.sl { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 100vh; } .sl--r { grid-template-columns: 1fr 1.3fr; } .sl--r .sl__ph { order: 2; }
.sl:nth-child(even) { background: var(--iv); color: var(--bk); --g: #6b675f; }
.sl:nth-child(even) .btn--w { background: var(--bk); color: #fff; border-color: var(--bk); }
.sl__ph { position: relative; overflow: hidden; } .sl__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e); } .sl:hover .sl__ph img { transform: scale(1.04); }
.sl__b { display: grid; align-content: center; gap: 20px; padding: 60px clamp(24px, 4vw, 80px); justify-items: start; } .sl__b .dim { max-width: 460px; font-size: 18px; }
.sl__h { font-size: clamp(70px, 9vw, 180px); font-weight: 800; letter-spacing: -.07em; line-height: .84; }
.sr__g { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.sr__ph { position: relative; aspect-ratio: 1; } .sr__ph span { position: absolute; display: block; overflow: hidden; } .sr__ph span:first-child { left: 0; top: 0; width: 72%; height: 78%; } .sr__ph span:last-child { right: 0; bottom: 0; width: 46%; height: 52%; } .sr__ph img { width: 100%; height: 100%; object-fit: cover; }
.mn { display: grid; margin: 30px 0; border-top: 1px solid var(--ln); } .mn__i { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 20px 0; border-bottom: 1px solid var(--ln); } .mn__i b { font-size: clamp(24px, 2.2vw, 40px); letter-spacing: -.05em; } .mn__i .mono { grid-row: span 2; align-self: center; font-size: 14px; }
.os { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; margin-top: 30px; }
.os__i { display: grid; gap: 10px; } .os__i img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .os__i b { font-size: clamp(28px, 2.6vw, 50px); letter-spacing: -.055em; line-height: .95; padding: 0 4px; } .os__i .mono { padding: 0 4px; }

/* ---------- house ---------- */
.ht__g { display: flex; gap: 2px; overflow-x: auto; cursor: grab; margin: 40px 0 16px; scrollbar-width: none; } .ht__g::-webkit-scrollbar { display: none; } .ht__g.drag { cursor: grabbing; }
.ht__i { flex: 0 0 min(420px, 80vw); display: grid; gap: 14px; align-content: start; padding: 30px; background: #141414; user-select: none; }
.ht__i b { font-size: clamp(80px, 8vw, 150px); font-weight: 800; letter-spacing: -.08em; line-height: .85; } .ht__i h3 { font-size: 28px; letter-spacing: -.04em; }
.hf__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; } .hf__i { display: grid; gap: 14px; align-content: start; } .hf__i img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } .hf__i b { font-size: clamp(34px, 3vw, 58px); letter-spacing: -.06em; }

/* ---------- article / reserve / 404 ---------- */
.ar__g { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6vw; } .ar__b p { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; letter-spacing: -.02em; margin-bottom: 1.2em; } .ar__b p:first-child::first-letter { float: left; font-size: 5.2em; line-height: .8; font-weight: 800; margin: .04em .1em 0 0; }
.ar__s { display: grid; gap: 16px; align-content: start; position: sticky; top: 110px; }
.rs__g { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6vw; }
.rs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; } .rs__tabs { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; } .rs__tabs button { font-size: clamp(24px, 2.2vw, 40px); font-weight: 800; letter-spacing: -.05em; font-variation-settings: "wght" 250; } .rs__tabs button.on { font-variation-settings: "wght" 800; text-decoration: underline; text-underline-offset: 8px; }
.rs label { display: grid; gap: 8px; } .rs__w, .rs .btn, .rs__ok { grid-column: 1 / -1; }
.rs input, .rs select, .rs textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1.5px solid currentColor; background: transparent; font-size: 20px; outline: none; border-radius: 0; }
.rs__side { display: grid; gap: 2px; align-content: start; } .rs__s { display: grid; gap: 6px; padding: 26px; background: var(--bk); color: #fff; } .rs__s > b { font-size: 40px; letter-spacing: -.06em; }
.nf { position: relative; height: 100vh; overflow: hidden; } .nf__img { position: absolute; inset: 0; } .nf__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.nf__t { position: absolute; inset: 0; display: grid; align-content: center; gap: 20px; } .nf__h { font-size: clamp(70px, 11vw, 220px); font-weight: 800; letter-spacing: -.07em; line-height: .84; }

/* ---------- footer: the word fills like a poured glass ---------- */
.ft { background: var(--bk); padding-top: clamp(80px, 9vw, 150px); overflow: hidden; }
.ft__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6vw; }
.ft__lead { display: grid; gap: 20px; align-content: start; } .ft__h { font-size: clamp(30px, 2.8vw, 52px); font-weight: 750; letter-spacing: -.05em; line-height: 1.02; max-width: 16ch; }
.ft__form { display: flex; border-bottom: 1.5px solid #fff; max-width: 480px; } .ft__form input { flex: 1; background: none; border: 0; padding: 16px 0; font-size: 18px; outline: none; } .ft__form button { font-weight: 700; }
.ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ft__cols div { display: grid; gap: 10px; align-content: start; } .ft__cols a { font-size: 15px; transition: opacity .3s; } .ft__cols a:hover { opacity: .6; } .ft__cols a b { opacity: .6; margin-left: 4px; }
.ft__word { position: relative; margin-top: 80px; font-size: calc((min(100vw, var(--max)) - 2 * var(--pad)) / 4.55); font-weight: 800; letter-spacing: -.07em; line-height: .76; text-align: center; white-space: nowrap; padding-bottom: .05em; }
.ft__o { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.ft__f { position: absolute; left: 0; right: 0; top: 0; color: #fff; clip-path: inset(calc((1 - var(--lv, 0)) * 100%) 0 0 0); }
.ft__f::before { content: ""; }
.ft__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; color: var(--g); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nv__l, .nv__res { display: none; } .nv { grid-template-columns: auto 1fr; } .nv__logo { justify-items: start; }
  .tin__lid, .tin__lid--b { grid-template-columns: 1fr; } .tin__ph { display: none; }
  .tin__links a { font-size: clamp(30px, 8.5vw, 56px); }
  .tin__x { width: 74px; height: 74px; margin: -37px; }
  .tin__f { flex-wrap: wrap; gap: 6px 16px; }
  .hx__k span:nth-child(3), .hx__caps span:nth-child(3) { display: none; }
  .hx__end, .gr__end { flex-direction: column; align-items: start; }
  .cnt, .spec { grid-template-columns: 1fr 1fr; }
  .hz { width: 86vw; grid-template-columns: 1fr; grid-template-rows: 45% 1fr; } .hz--end { width: 70vw; }
  .pm__g { grid-template-columns: 1fr 1fr; } .pm__mid { grid-column: 1 / -1; grid-row: 1; }
  .sk__t { grid-template-columns: 1fr; gap: 0; } .sk__n { font-size: 40vw; }
  .drs__g { grid-template-columns: 1fr; } .dr { height: 70vh; } .drs__head, .cg__head { grid-template-columns: 1fr; }
  .gf__g, .jr__g, .gb__g, .bk__g, .faq__g, .sr__g, .ar__g, .rs__g, .ft__top { grid-template-columns: 1fr; }
  .cg__g { grid-template-columns: 1fr 1fr; grid-auto-rows: 60vw; } .cgi--0 { grid-column: span 2; grid-row: span 1; } .cgi--1, .cgi--2, .cgi--3, .cgi--4 { grid-column: span 1; }
  .tls, .gis { grid-template-columns: 1fr; } .tls--3 { grid-template-columns: 1fr 1fr; }
  .pd, .sl, .sl--r { grid-template-columns: 1fr; } .pd__ph { min-height: 70vh; } .sl--r .sl__ph { order: 0; } .sl__ph { min-height: 60vh; }
  .pp__g, .hf__g { grid-template-columns: 1fr; } .pp__i { height: 60vh; }
  .bp, .bp__b { grid-template-columns: 1fr; } .exs { grid-template-columns: 1fr; } .ex { height: 380px; }
  .bk__card { position: static; } .ar__s { position: static; }
  .rs { grid-template-columns: 1fr; } .ft__cols { grid-template-columns: 1fr 1fr; }
  .jr__i { grid-template-columns: 1fr 1.4fr; }
  .scale__d { width: calc(var(--s) * 6vw); }
}
@media (max-width: 600px) {
  .nv__bag span { display: none; } .nv__logo b { font-size: 20px; } .nv__logo .mono { display: none; }
  .hx__col:nth-child(1), .hx__col:nth-child(3) { width: var(--sw, 22vw); }
  .hx__k { top: 90px; } .hx__k span:first-child { display: none; }
  .pm__reel ul { font-size: 7vw; } .tls--3 { grid-template-columns: 1fr; }
  .fq summary { grid-template-columns: 36px 1fr 26px; } .fq p { margin-left: 46px; }
  .ph__row { flex-direction: column; align-items: start; }
  .bb__n { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- the night: window between words ---------- */
.nw { position: relative; height: 320vh; background: var(--bk); }
.nw__st { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.nw__k { position: absolute; left: 0; right: 0; top: 104px; z-index: 3; display: flex; justify-content: space-between; opacity: var(--o, 1); }
.nw__line { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--ww0, 16vw) + 7vw); width: 100%; font-size: clamp(80px, 15vw, 290px); font-weight: 800; letter-spacing: -.07em; line-height: .8; white-space: nowrap; }
.nw__a, .nw__b { position: relative; z-index: 2; top: .04em; font-variation-settings: "wght" var(--nwg, 820); transform: translateX(var(--nx, 0)); opacity: var(--o, 1); }
.nw__a { --nx: calc(var(--sp, 0) * -1); } .nw__b { --nx: var(--sp, 0); }
.nw__win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: var(--ww, 16vw); height: var(--wh, .8em); overflow: hidden; }
.nw__win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: 0; transform: scale(1.08); transition: opacity .5s, transform 1.2s var(--e); }
.nw__win img.on { opacity: 1; transform: none; }
.nw__end { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 3; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: var(--e2, 0); transform: translateY(calc((1 - var(--e2, 0)) * 40px)); pointer-events: none; }
.nw__end.on { pointer-events: auto; }
.nw__end h2 { font-size: clamp(46px, 6.4vw, 124px); font-weight: 800; letter-spacing: -.06em; line-height: .88; text-shadow: 0 10px 60px rgba(0,0,0,.4); }
@media (max-width: 1000px) { .nw__end { flex-direction: column; align-items: start; } }