/* The Limited Edition — the luxury house pages (Leisure Society now; JMM, T Henri, Fred, Akoni, Dita next).
   Dark, slower, more space. Also styles luxury product pages via body.lux. */
body.lux { background: #0c0b09; color: #f5f0e6; }
body.lux .shop-nav { background: rgba(12, 11, 9, .9); border-bottom: 1px solid rgba(201, 164, 106, .22); }
body.lux .shop-nav__links { color: #cfc6b6; }
body.lux .footer { background: #0c0b09; }
body.lux .gallery__main, body.lux .thumbs button { background: #fff; }
body.lux .panel { background: #14120e; border-color: rgba(201, 164, 106, .25); }
body.lux .opt { background: #1b1813; border-color: rgba(245, 240, 230, .14); color: #f5f0e6; }
body.lux .opt[aria-pressed="true"] { border-color: #c9a46a; background: rgba(201, 164, 106, .12); }
body.lux .swatch { background: transparent; border-color: rgba(245, 240, 230, .25); color: #f5f0e6; }
body.lux .swatch[aria-pressed="true"] { border-color: #c9a46a; background: rgba(201, 164, 106, .14); }
body.lux .form input, body.lux .form select, body.lux .form textarea { background: #1b1813; color: #f5f0e6; }
body.lux .ship { color: #cfc6b6; }
body.lux .crumb, body.lux .fine, body.lux .specs dt { color: #9a9184; }
body.lux .price-big { color: #e2c48f; }

.lux-scarcity { font: italic 300 21px/1.35 var(--serif); color: #e2c48f; margin: 4px 0 8px; }
.lux-warranty { margin: 14px 0 0; font-size: 14.5px; letter-spacing: .02em; }
.lux-warranty b { font-weight: 700; color: #e2c48f; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.lux-story { font: 300 19px/1.6 var(--serif); color: #ebe3d4; margin: 22px 0 6px; max-width: 58ch; }
.lux-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 22px 0 6px; background: rgba(201, 164, 106, .25); border: 1px solid rgba(201, 164, 106, .25); }
.lux-facts div { background: #0c0b09; padding: 14px 16px; }
.lux-facts dt { font: 500 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #c9a46a; margin-bottom: 8px; }
.lux-facts dd { margin: 0; font: 400 18px/1.2 var(--serif); }

/* ---------- Intro: the threshold ---------- */
.threshold { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #070605; color: #f5f0e6; text-align: center; overflow: hidden; }
.threshold__inner { display: grid; justify-items: center; gap: 22px; padding: 24px; }
.threshold__line { width: 0; height: 1px; background: linear-gradient(90deg, transparent, #c9a46a, transparent); animation: line 1.6s .3s var(--ease) forwards; }
.threshold__kicker { font: 500 10px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; color: #c9a46a; opacity: 0; animation: fade 1.2s 1.1s forwards; }
.threshold__title { font: 300 clamp(40px, 8vw, 104px)/1 var(--serif); letter-spacing: .5em; margin-right: -.5em; opacity: 0; animation: settle 2.2s 1.3s var(--ease) forwards; }
.threshold__title em { display: block; font-style: italic; letter-spacing: .04em; margin: 10px -.5em 0 0; font-size: .42em; color: #e2c48f; }
.threshold__sub { max-width: 34ch; font: 300 17px/1.6 var(--serif); color: #cfc6b6; opacity: 0; animation: fade 1.4s 2.6s forwards; }
.threshold__enter { margin-top: 8px; opacity: 0; animation: fade 1.2s 3.2s forwards; }
.threshold__skip { position: absolute; right: 22px; bottom: 20px; font-size: 12px; color: #9a9184; background: none; border: 0; cursor: pointer; letter-spacing: .1em; }
.threshold.is-open { pointer-events: none; }
.threshold.is-open::before, .threshold.is-open::after { content: ""; }
.threshold__door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #070605; transition: transform 1.6s var(--ease); z-index: -1; }
.threshold__door--l { left: 0; } .threshold__door--r { right: 0; }
.threshold.is-open { background: transparent; }
.threshold.is-open .threshold__inner { opacity: 0; transition: opacity .5s; }
.threshold.is-open .threshold__door--l { transform: translateX(-101%); }
.threshold.is-open .threshold__door--r { transform: translateX(101%); }
@keyframes line { to { width: min(320px, 60vw); } }
@keyframes fade { to { opacity: 1; } }
@keyframes settle { from { letter-spacing: .5em; } to { opacity: 1; letter-spacing: .22em; } }
@media (prefers-reduced-motion: reduce) { .threshold * { animation-duration: .01s !important; animation-delay: 0s !important; } .threshold__door { transition: none; } }

/* ---------- The house ---------- */
.lux-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(40px, 7vw, 110px) 0 50px; }
@media (max-width: 860px) { .lux-hero { grid-template-columns: minmax(0, 1fr); } }
.lux-hero__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #fff; }
.lux-hero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 2.4s var(--ease); }
.lux-hero__img:hover img { transform: scale(1); }
.lux-hero h1 { font: 300 clamp(44px, 6vw, 84px)/1 var(--serif); margin: 12px 0 18px; }
.lux-hero h1 em { color: #e2c48f; }
.lux-hero p { color: #cfc6b6; font: 300 19px/1.6 var(--serif); max-width: 46ch; }
.houses { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.house { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(201, 164, 106, .35); font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #e2c48f; background: none; cursor: pointer; }
.house[aria-pressed="true"] { background: #c9a46a; color: #0c0b09; }
.house[disabled] { opacity: .45; cursor: default; }
.warranty-band { margin: 10px 0 40px; padding: 22px 26px; border: 1px solid rgba(201, 164, 106, .3); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; justify-content: space-between; }
.warranty-band b { font: 700 13px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #e2c48f; }
.warranty-band span { font: 300 18px/1.4 var(--serif); color: #ebe3d4; }
.lux-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 30px; }
.lux-tools .tab { border-color: rgba(245, 240, 230, .25); color: #f5f0e6; }
.lux-tools .tab[aria-pressed="true"] { color: #0c0b09; }
.lux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 46px 30px; }
.lux-card { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.lux-card__img { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-radius: 3px; }
.lux-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.4s var(--ease), opacity .8s; }
.lux-card__img img + img { position: absolute; inset: 0; opacity: 0; object-fit: cover; }
.lux-card:hover .lux-card__img img:first-child { transform: scale(1.03); }
.lux-card:hover .lux-card__img img + img { opacity: 1; }
.lux-card__badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; z-index: 1; }
.lux-badge { font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: #0c0b09; color: #e2c48f; }
.lux-card__name { font: 300 26px/1.1 var(--serif); }
.lux-card__meta { display: flex; justify-content: space-between; gap: 12px; color: #9a9184; font-size: 13px; }
.lux-card__meta b { color: #e2c48f; font-weight: 400; }
.lux-card__scarce { font: italic 300 16px/1.3 var(--serif); color: #e2c48f; }