:root {
  --ivory: #fbf7ef;
  --pearl: #fffdf8;
  --cream: #f4ead9;
  --champagne: #ead6b4;
  --sand: #d7b98b;
  --gold: #b78438;
  --rich-gold: #8e5c1d;
  --rose: #bd7e61;
  --ink: #31241a;
  --ink-soft: #766454;
  --line: rgba(132, 92, 42, 0.22);
  --serif: "Baskerville", "Baskerville Old Face", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --ease-lux: cubic-bezier(.22, 1, .36, 1);
  --header-h: 92px;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ivory);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(244, 213, 157, .22), transparent 30%),
    var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

button,
input,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

img { max-width: 100%; }

::selection { background: var(--champagne); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--rich-gold);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--pearl);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 30px;
  transition: transform .2s;
}

.skip-link:focus { transform: translateY(0); }

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.pointer-glow {
  position: fixed;
  left: var(--mouse-x);
  top: var(--mouse-y);
  width: 32rem;
  height: 32rem;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 232, 190, .13), transparent 65%);
  mix-blend-mode: screen;
}

.eyebrow {
  margin: 0;
  color: var(--rich-gold);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .24em;
  text-transform: uppercase;
}

em { font-weight: 400; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(22px, 3.2vw, 58px);
  border-bottom: 1px solid rgba(133, 92, 42, .13);
  background: linear-gradient(to bottom, rgba(251, 247, 239, .92), rgba(251, 247, 239, .68) 70%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .8s var(--ease-lux), transform .8s var(--ease-lux), color .4s;
}

body.intro-ready .site-header { opacity: 1; transform: none; }

.brand {
  justify-self: start;
  border: 0;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  animation: mark-float 6s ease-in-out infinite;
}

.brand-mark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(183, 132, 56, .65);
}

.brand-mark span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
  border-radius: 70% 25% 70% 25%;
  transform-origin: 100% 100%;
}

.brand-mark span:nth-child(1) { transform: translate(-8px, -8px); }
.brand-mark span:nth-child(2) { transform: rotate(90deg) translate(-8px, -8px); }
.brand-mark span:nth-child(3) { transform: rotate(180deg) translate(-8px, -8px); }
.brand-mark span:nth-child(4) { transform: rotate(270deg) translate(-8px, -8px); }

.brand-type { display: flex; flex-direction: column; align-items: flex-start; }
.brand-type strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: .25em; }
.brand-type small { margin-top: 1px; color: var(--ink-soft); font-size: .48rem; letter-spacing: .2em; }

.header-note {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: .95rem;
  font-style: italic;
  letter-spacing: .03em;
}

.header-actions { justify-self: end; display: flex; align-items: center; gap: 28px; }

.sound-toggle,
.bag-button {
  border: 0;
  padding: 6px 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}

.sound-bars { height: 14px; display: inline-flex; align-items: center; gap: 2px; }
.sound-bars i { width: 1px; height: 4px; background: var(--gold); transition: height .3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: sound 1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: .18s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: .32s; }

.bag-count {
  min-width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: .58rem;
}

.entrance { position: relative; min-height: 100svh; overflow: hidden; }

.prelude {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) 24px 44px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .9), rgba(246, 235, 215, .63) 50%, rgba(232, 207, 168, .4)),
    var(--ivory);
  transition: opacity 1.15s var(--ease-lux), visibility 1.15s;
}

body.worlds-ready .prelude { opacity: 0; visibility: hidden; pointer-events: none; }

.prelude::before,
.prelude::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(27vw, 440px);
  height: 70vh;
  opacity: .42;
  filter: blur(1px);
}

.prelude::before {
  left: -4vw;
  background: radial-gradient(ellipse at left, var(--champagne), transparent 68%);
  transform: translateY(-50%) rotate(-8deg);
}

.prelude::after {
  right: -4vw;
  background: radial-gradient(ellipse at right, rgba(212, 160, 119, .32), transparent 68%);
  transform: translateY(-50%) rotate(8deg);
}

.prelude > * { position: relative; z-index: 2; }

.prelude-kicker { opacity: 0; animation: fade-up .9s .15s var(--ease-lux) forwards; }

.prelude h1 {
  margin: clamp(24px, 4vh, 42px) 0 18px;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 8.2vw, 9rem);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.055em;
  opacity: 0;
  animation: fade-up 1.3s .35s var(--ease-lux) forwards;
}

.prelude h1 em { color: var(--gold); }

.prelude-copy {
  max-width: 540px;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  opacity: 0;
  animation: fade-up 1s .7s var(--ease-lux) forwards;
}

.skip-intro {
  margin-top: clamp(32px, 6vh, 70px);
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 2px 11px;
  background: none;
  color: var(--rich-gold);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: fade-up .9s 1s var(--ease-lux) forwards;
}

.skip-intro span { display: inline-block; margin-left: 10px; animation: nudge-down 1.5s ease-in-out infinite; }

.prelude-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(61vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .55;
}

.prelude-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(170, 119, 55, .15);
  border-radius: 50%;
  animation: orbit 22s linear infinite;
}

.prelude-orbit i:nth-child(2) { inset: 14%; border-style: dashed; animation-direction: reverse; animation-duration: 30s; }
.prelude-orbit i:nth-child(3) { inset: 29%; animation-duration: 17s; }
.prelude-orbit i::after { content: ""; position: absolute; top: 50%; right: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); }

.worlds-stage {
  min-height: 100svh;
  padding: calc(var(--header-h) + 24px) clamp(18px, 3vw, 52px) 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s .2s var(--ease-lux), transform 1.5s var(--ease-lux);
}

body.worlds-ready .worlds-stage { opacity: 1; transform: none; }

.stage-heading { text-align: center; }
.stage-heading h2 { margin: 7px 0 3px; font-family: var(--serif); font-size: clamp(2rem, 3.3vw, 4rem); line-height: .95; font-weight: 400; letter-spacing: -.03em; }
.stage-heading h2 em { color: var(--gold); }
.stage-heading > p:last-child { margin: 10px 0 0; color: var(--ink-soft); font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }

.worlds {
  width: 100%;
  min-height: min(61vh, 710px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  transition: grid-template-columns 1.1s var(--ease-lux);
}

.worlds:has(.world--traditional:hover),
.worlds:has(.world--traditional:focus-within) { grid-template-columns: 1.24fr .76fr; }

.worlds:has(.world--contemporary:hover),
.worlds:has(.world--contemporary:focus-within) { grid-template-columns: .76fr 1.24fr; }

.world {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 50vw 50vw 18px 18px;
  isolation: isolate;
  box-shadow: 0 26px 70px rgba(108, 73, 33, .12);
}

.world::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 6;
  border: 1px solid rgba(255, 248, 233, .43);
  border-radius: inherit;
  pointer-events: none;
}

.world-image {
  position: absolute;
  inset: -4%;
  z-index: -3;
  background: center 58% / cover no-repeat;
  transform: scale(1.03);
  transition: transform 1.5s var(--ease-lux), filter 1s var(--ease-lux);
}

.world--traditional .world-image { background-image: url("assets/traditional-hero.png"); }
.world--contemporary .world-image { background-image: url("assets/contemporary-hero.png"); }

.world:hover .world-image,
.world:focus-within .world-image { transform: scale(1.1); }

.worlds:hover .world:not(:hover) .world-image { filter: saturate(.55) brightness(1.08); }

.world-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to top, rgba(62, 35, 12, .76) 0%, rgba(103, 65, 28, .2) 48%, rgba(255, 245, 223, .02) 70%);
  transition: opacity .9s var(--ease-lux);
}

.world:hover .world-veil,
.world:focus-within .world-veil { opacity: .82; }

.world-content {
  position: absolute;
  inset: auto 9% 8%;
  z-index: 4;
  width: min(440px, 84%);
  color: var(--pearl);
  transition: transform .9s var(--ease-lux);
}

.world:hover .world-content,
.world:focus-within .world-content { transform: translateY(-5px); }

.world-label { margin: 0 0 7px; color: rgba(255, 248, 232, .75); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.world h3 { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 5.6rem); font-weight: 400; line-height: .92; letter-spacing: -.04em; }
.world-description { max-width: 310px; margin: 12px 0 20px; color: rgba(255, 250, 240, .8); font-family: var(--serif); font-size: clamp(.96rem, 1.25vw, 1.2rem); line-height: 1.3; }

.enter-world {
  border: 0;
  padding: 0;
  background: none;
  color: var(--pearl);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.button-orbit {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  font-size: .9rem;
  transition: transform .6s var(--ease-lux), background .4s, color .4s;
}

.enter-world:hover .button-orbit { transform: rotate(45deg); background: var(--pearl); color: var(--rich-gold); }

.world-index { position: absolute; top: 10%; right: 7%; z-index: 4; color: rgba(255, 251, 241, .65); font-family: var(--serif); font-size: 1rem; font-style: italic; }

.motif { position: absolute; z-index: 2; pointer-events: none; opacity: .45; transition: opacity .8s, transform 1.2s var(--ease-lux); }
.heritage-motif { top: 12%; left: 8%; width: 92px; height: 92px; border: 1px solid rgba(255, 246, 225, .55); border-radius: 50%; animation: orbit 18s linear infinite; }
.heritage-motif span { position: absolute; inset: 20%; border: 1px solid rgba(255, 246, 225, .55); transform: rotate(45deg); }
.heritage-motif span:nth-child(2) { inset: 34%; border-radius: 50%; }
.heritage-motif span:nth-child(3) { inset: 46%; background: var(--pearl); border-radius: 50%; }
.modern-motif { top: 14%; right: 7%; width: 110px; height: 90px; }
.modern-motif span { position: absolute; inset: 0; border: 1px solid rgba(121, 75, 45, .45); border-radius: 50%; transform: rotate(28deg); }
.modern-motif span:nth-child(2) { transform: rotate(-24deg) scale(.72); }
.modern-motif span:nth-child(3) { transform: rotate(68deg) scale(.45); }
.world:hover .motif { opacity: .9; transform: scale(1.1) rotate(10deg); }

.stage-footnote { margin: 0; text-align: center; color: var(--ink-soft); font-family: var(--serif); font-size: .8rem; font-style: italic; }

/* Cinematic journey */
.journey {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s, visibility .6s;
}

.journey.is-active { opacity: 1; visibility: visible; pointer-events: all; }
.journey-bg { position: absolute; inset: 0; background: radial-gradient(circle, var(--pearl), var(--champagne)); }
.journey[data-journey="contemporary"] .journey-bg { background: radial-gradient(circle, var(--pearl), #efd9cb); }

.journey-tunnel { position: absolute; inset: 0; display: none; place-items: center; perspective: 800px; }
.journey[data-journey="traditional"] .journey-tunnel--heritage,
.journey[data-journey="contemporary"] .journey-tunnel--modern { display: grid; }

.journey-tunnel i { position: absolute; border: 2px solid rgba(157, 101, 28, .24); animation: tunnel 2.8s var(--ease-lux) forwards; }
.journey-tunnel i:nth-child(2) { animation-delay: .18s; }
.journey-tunnel i:nth-child(3) { animation-delay: .36s; }
.journey-tunnel i:nth-child(4) { animation-delay: .54s; }
.journey-tunnel--heritage i { width: 22vw; height: 32vw; min-height: 260px; border-radius: 50% 50% 6px 6px; }
.journey-tunnel--modern i { width: 24vw; aspect-ratio: 1; border-color: rgba(182, 113, 82, .26); transform: rotate(45deg); }

.journey-copy { position: relative; z-index: 3; text-align: center; }
.journey-copy p { margin: 12px 0 3px; color: var(--ink-soft); font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; }
.journey-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 400; }
.journey-number { color: var(--gold); font-family: var(--serif); font-style: italic; }
.journey-progress { width: 170px; height: 1px; margin: 28px auto 0; overflow: hidden; background: rgba(128, 85, 34, .18); }
.journey-progress span { display: block; width: 100%; height: 100%; background: var(--gold); transform: translateX(-100%); }
.journey.is-active .journey-progress span { animation: progress 2.55s .1s linear forwards; }

/* Collection */
.collection { background: var(--ivory); }
.collection[hidden] { display: none; }
.collection-hero { position: relative; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; }

.back-button { position: absolute; z-index: 7; top: calc(var(--header-h) + 25px); left: clamp(22px, 4vw, 66px); border: 0; padding: 8px 0; background: none; color: rgba(255, 250, 238, .84); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.back-button span { margin-right: 8px; display: inline-block; transition: transform .35s; }
.back-button:hover span { transform: translateX(-5px); }

.scroll-cue { display: inline-flex; align-items: center; gap: 15px; color: var(--pearl); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.scroll-cue i { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; position: relative; }
.scroll-cue i::after { content: "↓"; position: absolute; inset: 0; display: grid; place-items: center; animation: nudge-down 1.7s ease-in-out infinite; }

/* Editorial collection slider */
.collection-showcase {
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background: #dcc19e;
  isolation: isolate;
  touch-action: pan-y;
}

.slider-viewport,
.slider-track,
.slider-slide { height: 100%; }

.slider-viewport { overflow: hidden; }

.slider-track {
  display: flex;
  will-change: transform;
  transition: transform 1.05s var(--ease-lux);
}

.slider-slide {
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  isolation: isolate;
}

.slider-image {
  position: absolute;
  inset: -2%;
  z-index: -3;
  background-image: var(--slide-image);
  background-position: var(--slide-position, center);
  background-size: var(--slide-size, cover);
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 6.5s ease-out, filter 1s;
}

.slider-slide[aria-hidden="false"] .slider-image { transform: scale(1); }

.slider-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(57, 34, 16, .69), rgba(70, 42, 20, .17) 62%, rgba(255,255,255,.03)),
    linear-gradient(to top, rgba(55, 32, 14, .42), transparent 65%);
}

.collection[data-collection="contemporary"] .slider-shade {
  background:
    linear-gradient(90deg, rgba(73, 43, 32, .61), rgba(103, 69, 51, .13) 62%, rgba(255,255,255,.03)),
    linear-gradient(to top, rgba(64, 39, 29, .34), transparent 65%);
}

.slider-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 7vw, 120px);
  bottom: clamp(90px, 13vh, 140px);
  width: min(630px, 66vw);
  color: var(--pearl);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s .28s, transform .9s .22s var(--ease-lux);
}

.slider-slide[aria-hidden="false"] .slider-copy { opacity: 1; transform: none; }
.slider-copy .eyebrow { color: var(--champagne); }
.collection[data-collection="contemporary"] .slider-copy .eyebrow { color: #f3c5ad; }
.slider-copy h1,
.slider-copy h2 { margin: 14px 0 18px; font-family: var(--serif); font-size: clamp(3.8rem, 7vw, 7.8rem); font-weight: 400; line-height: .8; letter-spacing: -.055em; }
.slider-slide--hero .slider-copy h1 { font-size: clamp(4.6rem, 10vw, 10.5rem); line-height: .72; }
.slider-copy h1 em,
.slider-copy h2 em { color: #f0c883; }
.collection[data-collection="contemporary"] .slider-copy h1 em,
.collection[data-collection="contemporary"] .slider-copy h2 em { color: #f3c5ad; }
.slider-copy > p:not(.eyebrow) { max-width: 470px; margin: 0; color: rgba(255, 250, 240, .82); font-family: var(--serif); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; }
.slider-slide--hero .slider-copy > p:not(.eyebrow) { font-size: clamp(1.05rem, 1.6vw, 1.4rem); }
.slider-copy .scroll-cue { margin-top: 28px; }
.slider-folio { position: absolute; z-index: 2; top: 11%; right: 5vw; color: rgba(255,255,255,.6); font-family: var(--serif); font-size: 1rem; font-style: italic; }

.slider-chrome {
  position: absolute;
  z-index: 5;
  inset: auto clamp(20px, 5vw, 78px) 35px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  color: var(--pearl);
}

.slider-position { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: .78rem; font-style: italic; }
.slider-position i { width: clamp(45px, 6vw, 90px); height: 1px; background: rgba(255,255,255,.44); }
.slider-dots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.slider-dots button { width: 6px; height: 6px; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.48); cursor: pointer; transition: width .35s var(--ease-lux), border-radius .35s, background .35s; }
.slider-dots button[aria-pressed="true"] { width: 30px; border-radius: 10px; background: var(--pearl); }
.slider-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.slider-actions button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; padding: 0; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--pearl); cursor: pointer; backdrop-filter: blur(6px); transition: background .3s, color .3s, transform .3s; }
.slider-actions button:hover { background: var(--pearl); color: var(--ink); transform: translateY(-2px); }
.slider-actions .slider-pause { width: 34px; height: 34px; margin-right: 5px; }
.pause-icon { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.slider-pause[aria-pressed="true"] .pause-icon { width: 0; height: 0; margin-left: 2px; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.slider-progress { position: absolute; z-index: 5; inset: auto 0 0; height: 2px; overflow: hidden; background: rgba(255,255,255,.16); }
.slider-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--champagne), var(--pearl)); transform: translateX(-100%); }
.collection-showcase.is-playing .slider-progress span { animation: slider-progress 5.5s linear forwards; }
.collection-showcase.is-paused .slider-progress span { opacity: .4; }

.collection-intro { min-height: 68vh; display: grid; grid-template-columns: 1fr minmax(300px, 2.2fr) 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(90px, 15vw, 210px) clamp(24px, 7vw, 120px); background: radial-gradient(circle at 60% 50%, rgba(233, 207, 166, .28), transparent 32%); }
.collection-intro > .eyebrow { align-self: start; margin-top: 12px; }
.collection-statement { margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4.5vw, 5.5rem); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.craft-note { align-self: end; border-top: 1px solid var(--line); padding-top: 18px; }
.craft-note span { color: var(--gold); font-family: var(--serif); font-style: italic; }
.craft-note p { color: var(--ink-soft); font-size: .72rem; line-height: 1.7; }
.craft-note strong { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }

.shop-section { padding: 70px clamp(18px, 4.6vw, 84px) 140px; background: #fffaf2; }
.shop-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.shop-toolbar h2 { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .9; font-weight: 400; letter-spacing: -.04em; }
.shop-toolbar h2 em { color: var(--gold); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filter { border: 1px solid var(--line); border-radius: 100px; padding: 10px 17px; background: transparent; color: var(--ink-soft); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filter:hover,
.filter.is-active { background: var(--ink); color: var(--pearl); border-color: var(--ink); }

.product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.2vw, 34px); padding-top: clamp(34px, 6vw, 80px); }
.product-card { grid-column: span 4; min-width: 0; opacity: 0; transform: translateY(25px); animation: card-in .75s var(--ease-lux) forwards; }
.product-card:nth-child(2) { animation-delay: .08s; }
.product-card:nth-child(3) { animation-delay: .16s; }
.product-card:nth-child(4) { animation-delay: .05s; }
.product-card:nth-child(5) { animation-delay: .12s; }
.product-card:nth-child(6) { animation-delay: .19s; }
.product-card.is-hidden { display: none; }
.product-card:nth-child(2),
.product-card:nth-child(5) { padding-top: clamp(0px, 4vw, 70px); }

.product-visual { position: relative; aspect-ratio: .78; overflow: hidden; background: var(--cream); cursor: pointer; }
.product-image { position: absolute; inset: 0; background-image: var(--product-image); background-size: 160%; background-position: var(--product-position, 50% 62%); transition: transform 1.1s var(--ease-lux); }
.product-card:nth-child(2n) .product-image { background-size: 190%; }
.product-card:nth-child(3n) .product-image { background-size: 135%; }
.product-visual:hover .product-image { transform: scale(1.07); }
.product-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(74, 44, 22, .18), transparent 40%); pointer-events: none; }
.product-badge { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 10px; border-radius: 100px; background: rgba(255, 252, 244, .78); backdrop-filter: blur(8px); color: var(--rich-gold); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }
.quick-view { position: absolute; z-index: 3; inset: auto 14px 14px; width: calc(100% - 28px); border: 0; padding: 14px 18px; background: rgba(255, 252, 244, .88); backdrop-filter: blur(10px); color: var(--ink); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transform: translateY(80px); transition: transform .5s var(--ease-lux); }
.product-visual:hover .quick-view,
.quick-view:focus { transform: none; }
.product-info { display: flex; justify-content: space-between; gap: 16px; padding: 17px 3px 0; }
.product-info h3 { margin: 0 0 4px; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-weight: 500; }
.product-info p { margin: 0; color: var(--ink-soft); font-size: .62rem; letter-spacing: .06em; }
.product-price { flex: none; color: var(--rich-gold) !important; font-family: var(--serif); font-size: .95rem !important; }

.maison-note { position: relative; overflow: hidden; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px; text-align: center; background: linear-gradient(135deg, #ecdbc0, #fffaf1 50%, #efd8c7); }
.maison-note h2 { margin: 16px 0 24px; font-family: var(--serif); font-size: clamp(3.6rem, 7vw, 8rem); font-weight: 400; line-height: .82; letter-spacing: -.05em; }
.maison-note h2 em { color: var(--rose); }
.maison-note > p:not(.eyebrow) { max-width: 520px; margin: 0 0 30px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.maison-ring { position: absolute; width: min(56vw, 750px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(161, 100, 46, .19); border-radius: 50%; animation: orbit 25s linear infinite; }
.maison-ring::before,
.maison-ring::after { content: ""; position: absolute; inset: 10%; border: 1px dashed rgba(161, 100, 46, .16); border-radius: 50%; }
.maison-ring::after { inset: 30%; border-style: solid; }
.maison-ring span { color: rgba(170, 109, 60, .13); font-family: var(--serif); font-size: 8rem; }
.maison-note > *:not(.maison-ring) { position: relative; z-index: 2; }

.text-link { border: 0; border-bottom: 1px solid var(--line); padding: 7px 0 10px; background: none; color: var(--rich-gold); font-size: .62rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.text-link span { margin-left: 8px; display: inline-block; transition: transform .35s; }
.text-link:hover span { transform: translate(4px, -4px); }

.site-footer { padding: 70px clamp(24px, 5vw, 90px) 34px; background: #efe0ca; text-align: center; }
.site-footer[hidden] { display: none; }
.footer-brand { color: var(--rich-gold); font-family: var(--serif); font-size: clamp(3rem, 7vw, 7rem); letter-spacing: .25em; text-indent: .25em; }
.site-footer > p { font-family: var(--serif); font-style: italic; }
.site-footer > div:nth-of-type(2) { margin: 28px 0 50px; display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; }
.site-footer a,
.site-footer button { border: 0; background: none; color: var(--ink); font-size: .6rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.site-footer small { color: var(--ink-soft); font-size: .57rem; }

/* Product dialog and panels */
.product-dialog { width: min(1040px, calc(100vw - 36px)); max-height: calc(100vh - 36px); border: 0; padding: 0; overflow: hidden; color: var(--ink); background: var(--pearl); box-shadow: 0 30px 100px rgba(70, 43, 20, .24); }
.product-dialog::backdrop { background: rgba(79, 55, 35, .42); backdrop-filter: blur(8px); }
.product-dialog[open] { animation: dialog-in .7s var(--ease-lux); }
.dialog-layout { display: grid; grid-template-columns: 1.05fr .95fr; min-height: min(700px, calc(100vh - 36px)); }
.dialog-image { min-height: 500px; background: center 64% / cover no-repeat; }
.dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 80px); }
.dialog-copy h2 { margin: 13px 0 6px; font-family: var(--serif); font-size: clamp(2.9rem, 5vw, 5rem); font-weight: 400; line-height: .85; }
.dialog-price { color: var(--rich-gold); font-family: var(--serif); font-size: 1.2rem; }
.dialog-copy > p:not(.eyebrow, .dialog-price) { color: var(--ink-soft); font-family: var(--serif); line-height: 1.55; }
.dialog-copy dl { margin: 30px 0; border-top: 1px solid var(--line); }
.dialog-copy dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .66rem; }
.dialog-copy dt { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.dialog-copy dd { margin: 0; text-align: right; }
.dialog-copy .text-link { align-self: center; margin-top: 15px; }
.dialog-close { position: absolute; z-index: 5; top: 18px; right: 18px; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 252, 246, .78); font-family: var(--serif); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.primary-button { width: 100%; border: 0; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--pearl); font-size: .6rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: background .3s, transform .3s; }
.primary-button:hover { background: var(--rich-gold); transform: translateY(-2px); }

.selection-panel,
.appointment-card { position: fixed; inset: 0; z-index: 400; visibility: hidden; pointer-events: none; }
.selection-panel.is-open,
.appointment-card.is-open { visibility: visible; pointer-events: auto; }
.selection-backdrop,
.appointment-backdrop { position: absolute; inset: 0; background: rgba(73, 48, 29, .38); opacity: 0; backdrop-filter: blur(7px); transition: opacity .5s; }
.selection-panel.is-open .selection-backdrop,
.appointment-card.is-open .appointment-backdrop { opacity: 1; }
.selection-sheet { position: absolute; top: 0; right: 0; width: min(480px, 100%); height: 100%; overflow-y: auto; padding: 90px clamp(26px, 5vw, 56px) 40px; background: var(--pearl); transform: translateX(100%); transition: transform .7s var(--ease-lux); }
.selection-panel.is-open .selection-sheet { transform: none; }
.selection-sheet h2,
.appointment-form h2 { margin: 12px 0 30px; font-family: var(--serif); font-size: 3.7rem; font-weight: 400; line-height: .85; }
.selection-sheet h2 em,
.appointment-form h2 em { color: var(--gold); }
.selection-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-block: 1px solid var(--line); }
.selection-empty[hidden] { display: none; }
.empty-gem { color: var(--gold); font-family: var(--serif); font-size: 4.5rem; }
.selection-empty p { margin: 8px 0; font-family: var(--serif); font-size: 1.5rem; }
.selection-empty span { max-width: 260px; color: var(--ink-soft); font-size: .7rem; line-height: 1.6; }
.selection-items { display: grid; gap: 14px; }
.selection-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 15px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.selection-thumb { width: 90px; aspect-ratio: .9; background: center 65% / cover; }
.selection-item h3 { margin: 0 0 3px; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.selection-item p { margin: 0; color: var(--rich-gold); font-family: var(--serif); font-size: .85rem; }
.remove-item { border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.enquiry-button { margin-top: 28px; }
.enquiry-button:disabled { opacity: .4; cursor: not-allowed; }

.appointment-card { display: grid; place-items: center; padding: 18px; }
.appointment-form { position: relative; z-index: 2; width: min(540px, 100%); max-height: 95vh; overflow-y: auto; padding: clamp(36px, 6vw, 70px); background: var(--pearl); box-shadow: 0 30px 100px rgba(70,43,20,.2); opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .5s, transform .65s var(--ease-lux); }
.appointment-card.is-open .appointment-form { opacity: 1; transform: none; }
.appointment-form > p:not(.eyebrow) { color: var(--ink-soft); font-family: var(--serif); line-height: 1.5; }
.appointment-form label { display: block; margin: 18px 0; color: var(--ink-soft); font-size: .57rem; letter-spacing: .14em; text-transform: uppercase; }
.appointment-form input,
.appointment-form select { width: 100%; margin-top: 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 2px; background: transparent; color: var(--ink); font-family: var(--serif); font-size: 1rem; outline: none; }
.appointment-form input:focus,
.appointment-form select:focus { border-color: var(--gold); }

.toast { position: fixed; z-index: 500; right: 26px; bottom: 26px; max-width: min(360px, calc(100vw - 40px)); padding: 15px 20px; background: var(--ink); color: var(--pearl); font-size: .68rem; letter-spacing: .04em; transform: translateY(100px); opacity: 0; transition: transform .5s var(--ease-lux), opacity .4s; }
.toast.is-visible { transform: none; opacity: 1; }

.reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-lux), transform 1.1s var(--ease-lux); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }

/* Animations */
@keyframes fade-up { to { opacity: 1; transform: none; } }
@keyframes card-in { to { opacity: 1; transform: none; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes mark-float { 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes nudge-down { 50% { transform: translateY(4px); } }
@keyframes sound { 0%, 100% { height: 4px; } 50% { height: 13px; } }
@keyframes progress { to { transform: none; } }
@keyframes hero-arrive { to { transform: scale(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes slider-progress { to { transform: translateX(0); } }
@keyframes tunnel { 0% { opacity: 0; transform: translateZ(-600px) scale(.15); } 24% { opacity: 1; } 100% { opacity: 0; transform: translateZ(800px) scale(3.6); } }
.journey-tunnel--modern i { animation-name: tunnel-modern; }
@keyframes tunnel-modern { 0% { opacity: 0; transform: translateZ(-600px) scale(.15) rotate(45deg); } 24% { opacity: 1; } 100% { opacity: 0; transform: translateZ(800px) scale(3.6) rotate(135deg); } }

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .site-header { grid-template-columns: 1fr auto; }
  .header-note,
  .sound-toggle span:last-child { display: none; }
  .header-actions { gap: 18px; }
  .worlds-stage { padding-inline: 12px; }
  .worlds { grid-template-columns: 1fr 1fr; }
  .worlds:has(.world--traditional:hover),
  .worlds:has(.world--traditional:focus-within),
  .worlds:has(.world--contemporary:hover),
  .worlds:has(.world--contemporary:focus-within) { grid-template-columns: 1fr 1fr; }
  .world { border-radius: 45vw 45vw 14px 14px; }
  .collection-showcase { height: 100svh; min-height: 650px; }
  .slider-copy { width: min(600px, 74vw); }
  .collection-intro { grid-template-columns: 1fr 2fr; }
  .collection-intro > .eyebrow { grid-column: 1; }
  .collection-statement { grid-column: 2; }
  .craft-note { grid-column: 2; }
  .product-card { grid-column: span 6; }
  .dialog-layout { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .pointer-glow { display: none; }
  .site-header { padding-inline: 17px; background: rgba(251, 247, 239, .86); }
  .brand { gap: 8px; }
  .brand-mark { width: 28px; height: 28px; transform: scale(.8); }
  .brand-type strong { font-size: .9rem; }
  .brand-type small { display: none; }
  .sound-toggle { display: none; }
  .bag-button > span:first-child { display: none; }

  .prelude h1 { font-size: clamp(3.5rem, 18vw, 5.5rem); line-height: .82; }
  .prelude-copy { max-width: 330px; }
  .prelude-orbit { width: 112vw; }

  .worlds-stage { height: auto; min-height: 100svh; padding: calc(var(--header-h) + 18px) 10px 14px; gap: 14px; }
  .stage-heading h2 { font-size: 2.25rem; }
  .stage-heading > p:last-child { display: none; }
  .worlds { min-height: 950px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 9px; }
  .worlds:has(.world--traditional:hover),
  .worlds:has(.world--traditional:focus-within),
  .worlds:has(.world--contemporary:hover),
  .worlds:has(.world--contemporary:focus-within) { grid-template-columns: 1fr; }
  .world { border-radius: 46vw 46vw 14px 14px; }
  .world-image { background-position: center 66%; }
  .world-content { inset: auto 8% 7%; }
  .world h3 { font-size: 3rem; }
  .world-description { margin: 8px 0 13px; }
  .enter-world { font-size: .55rem; }
  .button-orbit { width: 31px; height: 31px; }
  .motif { transform: scale(.7); transform-origin: top left; }

  .journey-tunnel--heritage i { width: 42vw; height: 68vw; }
  .journey-tunnel--modern i { width: 48vw; }

  .collection-hero { height: 92svh; min-height: 650px; }
  .back-button { top: calc(var(--header-h) + 13px); left: 18px; }

  .collection-showcase { height: 92svh; min-height: 650px; }
  .slider-copy { left: 22px; bottom: 115px; width: calc(100% - 44px); }
  .slider-copy h1,
  .slider-copy h2 { font-size: clamp(3.3rem, 15vw, 4.1rem); line-height: .82; }
  .slider-slide--hero .slider-copy h1 { font-size: clamp(3.3rem, 16vw, 4.3rem); line-height: .8; }
  .slider-copy > p:not(.eyebrow) { max-width: 320px; font-size: .95rem; }
  .slider-folio { top: 13%; right: 22px; }
  .slider-chrome { inset: auto 20px 30px; grid-template-columns: 1fr auto; }
  .slider-position { display: none; }
  .slider-dots { justify-content: flex-start; }
  .slider-actions button { width: 38px; height: 38px; }
  .slider-actions .slider-pause { width: 34px; height: 34px; margin-right: 0; }
  .slider-slide:nth-child(n) .slider-image { background-size: var(--slide-size); }

  .collection-intro { min-height: 0; grid-template-columns: 1fr; gap: 25px; padding: 90px 24px; }
  .collection-intro > .eyebrow,
  .collection-statement,
  .craft-note { grid-column: 1; }
  .collection-statement { font-size: 2.65rem; }
  .craft-note { max-width: 300px; }

  .shop-section { padding: 65px 14px 90px; }
  .shop-toolbar { display: block; }
  .filters { justify-content: flex-start; margin-top: 24px; }
  .filter { padding: 9px 12px; font-size: .52rem; }
  .product-grid { gap: 34px 10px; }
  .product-card { grid-column: span 6; }
  .product-card:nth-child(2),
  .product-card:nth-child(5) { padding-top: 30px; }
  .product-visual { aspect-ratio: .72; }
  .product-image { background-size: 180%; }
  .quick-view { transform: none; padding: 11px 8px; font-size: .48rem; }
  .product-info { display: block; padding-top: 10px; }
  .product-info h3 { font-size: 1.2rem; }
  .product-info p { font-size: .55rem; }
  .product-price { margin-top: 4px !important; }

  .maison-note { min-height: 70vh; }
  .maison-note h2 { font-size: 4rem; }
  .maison-ring { width: 110vw; }
  .footer-brand { font-size: 2.7rem; }

  .dialog-layout { display: block; max-height: calc(100vh - 36px); overflow-y: auto; }
  .dialog-image { min-height: 38vh; }
  .dialog-copy { padding: 32px 25px 40px; }
  .dialog-copy h2 { font-size: 3rem; }
  .selection-sheet { padding-top: 80px; }
  .appointment-form { padding: 45px 26px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .pointer-glow { display: none; }
  .prelude { display: none; }
  .worlds-stage,
  .site-header { opacity: 1; transform: none; }
}