:root {
  --ink: #080807;
  --ink-soft: #15130f;
  --oxblood: #4b1018;
  --oxblood-deep: #25090d;
  --parchment: #d8c9aa;
  --parchment-pale: #eee6d5;
  --ivory: #f7f3e8;
  --gold: #b9954d;
  --gold-bright: #d6b96f;
  --line: rgb(185 149 77 / 44%);
  --muted-dark: #a9a08e;
  --muted-light: #6c6253;
  --serif: var(--jewelry-bodoni);
  --sans: var(--jewelry-manrope);
  --page: min(92rem, calc(100% - 3rem));
  --section-space: clamp(5rem, 10vw, 10rem);
  --jd-color-text: var(--ink);
  --jd-color-surface: var(--ivory);
  --jd-color-muted: var(--muted-light);
  --jd-color-border: #9b8a6c;
  --jd-color-overlay: rgb(8 8 7 / 78%);
  --jd-color-focus: #f0c96f;
  --jd-color-error: #8d1222;
  --jd-radius: 2px;
}

[data-world-intro-signature="concentric-aperture"] .vault-world-stage::before {
  border: 1px solid rgb(201 166 86 / 42%);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgb(201 166 86 / 8%),
    0 0 0 54px rgb(201 166 86 / 5%);
  content: "";
  height: min(52vw, 680px);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  width: min(52vw, 680px);
  z-index: 4;
}

[data-world-intro-signature="concentric-aperture"] > .world-skip {
  bottom: auto;
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: 5.25rem;
  z-index: 8;
}

html:is([data-world-intro="first"], [data-world-intro="repeat"])
  [data-world-intro-signature="concentric-aperture"]
  .vault-world-stage::before {
  opacity: calc(1 - var(--world-intro-progress, 0));
  transform: translate(-50%, -50%)
    scale(calc(0.72 + (var(--world-intro-progress, 0) * 0.38)));
  will-change: opacity, transform;
}

[data-world-intro-signature="concentric-aperture"] .vault-aperture {
  background: transparent;
  border: 1px solid rgb(230 211 162 / 36%);
  border-radius: 50%;
  height: min(38vw, 510px);
  inset: 50% auto auto 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  width: min(38vw, 510px);
}

[data-world-intro-signature="concentric-aperture"] .vault-aperture-right {
  height: min(24vw, 320px);
  width: min(24vw, 320px);
}

html:is([data-world-intro="first"], [data-world-intro="repeat"])
  [data-world-intro-signature="concentric-aperture"]
  .vault-aperture {
  opacity: calc(0.82 - (var(--world-intro-progress, 0) * 0.82));
  transform: translate(-50%, -50%)
    scale(calc(0.35 + (var(--world-intro-progress, 0) * 0.8)));
  will-change: opacity, transform;
}

[data-world-intro-signature="concentric-aperture"] [data-world-intro-title] {
  color: rgb(238 226 196);
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 30%),
    0 -1px 0 rgb(68 52 24 / 82%);
}

@media (max-width: 48rem) {
  [data-world-intro-signature="concentric-aperture"]
    .vault-world-stage::before {
    height: 76vw;
    width: 76vw;
  }
}

@media (max-width: 30rem) {
  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    .vault-world-stage {
    --vault-opening-media-height: 40svh;
  }

  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    :is([data-jewelry-world-poster], [data-jewelry-world-canvas]) {
    height: var(--vault-opening-media-height);
  }

  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    .vault-world-stage::after {
    height: var(--vault-opening-media-height);
  }

  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    .vault-hero-copy {
    min-height: calc(100svh - var(--vault-opening-media-height));
  }

  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    [data-world-fallback="aperture"] {
    grid-template-rows: minmax(9rem, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-world-intro-signature="concentric-aperture"] .vault-world-stage::before,
  [data-world-intro-signature="concentric-aperture"] .vault-aperture {
    opacity: 0;
    transform: none;
    will-change: auto;
  }
}

.hero {
  --hero-focal-x: 50%;
  --hero-focal-y: 50%;
}

.hero-image {
  object-position: var(--hero-focal-x) var(--hero-focal-y);
}

.product-media,
.quickview-image,
.vault-world [data-world-fallback] {
  overflow: hidden;
}

.product-media {
  --product-focal-x: 50%;
  --product-focal-y: 50%;
}

.crop-emerald {
  --product-focal-x: 0%;
  --product-focal-y: 50%;
}

.crop-drops {
  --product-focal-x: 86%;
  --product-focal-y: 32%;
}

.crop-ruby {
  --product-focal-x: 49%;
  --product-focal-y: 50%;
}

.crop-torque {
  --product-focal-x: 15%;
  --product-focal-y: 28%;
}

.crop-bracelet {
  --product-focal-x: 100%;
  --product-focal-y: 62%;
}

.crop-cuff {
  --product-focal-x: 87%;
  --product-focal-y: 50%;
}

.product-media img {
  object-position: var(--product-focal-x) var(--product-focal-y);
}

.quickview-image {
  --quick-view-focal-x: 50%;
  --quick-view-focal-y: 50%;
}

.quickview-image:has(img[src*="vesper-emerald-signet"]) {
  --quick-view-focal-x: 0%;
  --quick-view-focal-y: 50%;
}

.quickview-image:has(img[src*="nocturne-diamond-drops"]) {
  --quick-view-focal-x: 86%;
  --quick-view-focal-y: 32%;
}

.quickview-image:has(img[src*="ardent-ruby-brooch"]) {
  --quick-view-focal-x: 49%;
  --quick-view-focal-y: 50%;
}

.quickview-image:has(img[src*="archive-gold-torque"]) {
  --quick-view-focal-x: 15%;
  --quick-view-focal-y: 28%;
}

.quickview-image:has(img[src*="verdant-line-bracelet"]) {
  --quick-view-focal-x: 100%;
  --quick-view-focal-y: 62%;
}

.quickview-image:has(img[src*="lucent-diamond-cuff"]) {
  --quick-view-focal-x: 87%;
  --quick-view-focal-y: 50%;
}

.quickview-image img {
  object-position: var(--quick-view-focal-x) var(--quick-view-focal-y);
}

.vault-world [data-world-fallback="aperture"] {
  --fallback-focal-x: 50%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback="provenance"] {
  --fallback-focal-x: 48%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback="collection"] {
  --fallback-focal-x: 18%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback] img {
  object-position: var(--fallback-focal-x) var(--fallback-focal-y);
}

@media (max-width: 64rem) {
  .hero {
    --hero-focal-x: 56%;
    --hero-focal-y: 50%;
  }

  .quickview-image {
    --quick-view-focal-x: 52%;
    --quick-view-focal-y: 48%;
  }
}

@media (max-width: 48rem) {
  .hero {
    --hero-focal-x: 62%;
    --hero-focal-y: 50%;
  }

  .vault-world-copy h1,
  .hero h1 {
    max-inline-size: 100%;
    font-size: clamp(2.75rem, 13cqi, 4.75rem);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .hero-actions {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .hero-actions :is(a, button) {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .quickview-image {
    --quick-view-focal-x: 54%;
    --quick-view-focal-y: 46%;
  }

  .vault-world [data-world-fallback="aperture"] {
    --fallback-focal-x: 62%;
    --fallback-focal-y: 50%;
  }
}

.vault-world .world-fallback-status {
  position: relative;
  z-index: 6;
  max-width: 38rem;
  margin: 0 auto;
  border-left: 2px solid var(--gold-bright);
  padding: 0.75rem 1rem;
  background: var(--ink-soft);
  color: var(--ivory);
  font: 0.78rem/1.55 var(--sans);
}

.vault-world:is([data-world-state="static"], [data-world-state="failed"])
  > .world-fallback-status {
  margin: calc(5rem + 0.75rem) auto 0;
}

.vault-world [data-world-fallback] {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  color: var(--parchment-pale);
  grid-template-rows: minmax(15rem, 1fr) auto;
}

.vault-world [data-world-fallback] img {
  width: 100%;
  height: 100%;
  max-height: 30rem;
  object-fit: cover;
}

.vault-world [data-world-fallback] figcaption {
  border-top: 1px solid var(--line);
  padding: 0.9rem 1rem;
  font: 0.72rem/1.5 var(--sans);
}

.vault-world[data-world-state="static"] [data-world-fallback],
.vault-world[data-world-state="failed"] [data-world-fallback] {
  display: grid;
  opacity: 1;
  transform: none;
}

.vault-world:is([data-world-state="static"], [data-world-state="failed"])
  [data-jewelry-world-chapter] {
  position: relative;
  top: auto;
  display: grid;
  min-height: auto;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100% - 80rem) / 2));
}

.vault-world
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  .vault-world:is([data-world-state="static"], [data-world-state="failed"])
    > .world-fallback-status {
    margin: calc(4.5rem + 0.75rem) auto 0;
    width: calc(100% - 2rem);
  }

  .vault-world [data-jewelry-world-chapter] {
    position: relative;
    top: auto;
    display: grid;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-block: 4.5rem;
  }

  .vault-world [data-world-fallback] {
    position: relative;
    grid-row: 1;
    width: 100%;
    max-width: none;
  }

  .vault-world [data-world-copy] {
    position: relative;
    grid-row: 2;
    width: 100%;
    max-width: 36rem;
  }

  .vault-world [data-world-controls] {
    position: relative;
    min-height: 44px;
  }

  .vault-world [data-world-heading] {
    max-inline-size: 100%;
    font-size: 3.5rem;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-world [data-jewelry-world-canvas] {
    display: none;
    pointer-events: none;
  }

  .vault-world [data-world-fallback] {
    display: grid;
    animation: none !important;
    transform: none !important;
    transition-duration: 0.22s;
    transition-property: opacity;
  }

  .vault-world [data-jewelry-world-chapter],
  .vault-world .vault-world-stage {
    perspective: none;
    transform: none !important;
  }
}

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

body {
  background: var(--ivory);
  font-family: var(--sans);
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}

h2 {
  font-size: clamp(2.5rem, 5.2vw, 5.8rem);
  line-height: 0.98;
}

.site-header {
  align-items: center;
  border-bottom: 1px solid rgb(247 243 232 / 25%);
  color: var(--ivory);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  left: 0;
  min-height: 5rem;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.wordmark {
  align-items: center;
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1.1rem;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  width: fit-content;
}

.wordmark-mark {
  align-items: center;
  border: 1px solid var(--gold);
  display: inline-flex;
  font-family: var(--sans);
  font-size: 0.6rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.desktop-nav {
  align-items: center;
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.desktop-nav a,
.header-action {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  text-decoration: none;
}

.desktop-nav a {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.desktop-nav a::after {
  background: var(--gold-bright);
  bottom: 7px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
  width: 100%;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: end;
}

.bag-trigger {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.bag-count {
  align-items: center;
  border: 1px solid rgb(247 243 232 / 42%);
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  min-width: 1.5rem;
}

.menu-trigger {
  display: none;
  font-size: 0.75rem;
}

.hero {
  background: var(--ink);
  color: var(--ivory);
  min-height: max(42rem, 94svh);
  overflow: hidden;
  position: relative;
}

.hero::after {
  background: rgb(8 8 7 / 16%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

.hero-image-stage {
  inset: 0;
  position: absolute;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  min-height: max(42rem, 94svh);
  padding: 7rem 0 5rem;
  position: relative;
  width: var(--page);
  z-index: 2;
}

.eyebrow {
  color: var(--gold-bright);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(4.8rem, 11vw, 10.5rem);
  line-height: 0.78;
  margin-bottom: 2rem;
  max-width: 8ch;
}

.hero-copy {
  color: #d8d0c1;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-gold {
  background: var(--gold-bright);
  color: var(--ink);
}

.button-gold:hover {
  background: var(--ivory);
}

.button-ghost {
  background: rgb(8 8 7 / 25%);
  border-color: rgb(247 243 232 / 52%);
  color: var(--ivory);
}

.button-ghost:hover {
  background: var(--ivory);
  color: var(--ink);
}

.button-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.button-dark:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

.hero-scroll {
  align-items: center;
  bottom: 2rem;
  color: #d9cfbc;
  display: flex;
  font-size: 0.67rem;
  min-height: 44px;
  gap: 0.75rem;
  position: absolute;
  right: 4vw;
  text-decoration: none;
  z-index: 3;
}

.vault-world {
  background: #050505;
  color: var(--ivory);
  min-height: 300svh;
  overflow: visible;
}

.vault-world[data-world-state="ready"] [data-jewelry-world-canvas] {
  opacity: 1;
}

.vault-world-stage {
  background: #050505;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 0;
}

.vault-world-stage::after {
  background: rgb(5 5 5 / 18%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.vault-world [data-jewelry-world-poster] > img {
  object-position: center;
}

.vault-world-chapters {
  margin-top: -100svh;
  position: relative;
  z-index: 4;
}

.vault-chapter {
  align-items: flex-end;
  display: flex;
  min-height: 100svh;
  padding: 0 max(1.5rem, calc((100% - 92rem) / 2));
  pointer-events: none;
  position: relative;
  top: auto;
}

.vault-hero-copy {
  border-left: 1px solid rgb(214 185 111 / 72%);
  margin-bottom: clamp(3.5rem, 8vh, 7rem);
  max-width: 31rem;
  padding: 0.5rem 0 0.75rem 1.5rem;
  pointer-events: auto;
  position: relative;
}

.vault-hero-copy h1 {
  font-size: 7rem;
  line-height: 0.82;
  margin-bottom: 1.75rem;
  max-width: 7ch;
}

.vault-hero-copy > p:not(.eyebrow) {
  color: #d8d0c1;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  max-width: 27rem;
}

.vault-chapter-inscription {
  align-items: center;
  border-bottom: 1px solid rgb(247 243 232 / 18%);
  border-top: 1px solid rgb(214 185 111 / 58%);
  color: #d8d0c1;
  display: grid;
  font-family: var(--serif);
  grid-template-columns: 2.5rem 1fr;
  margin: 0 0 4rem;
  padding: 1rem 0;
  width: min(19rem, 70vw);
}

.vault-chapter-inscription span:first-child {
  color: var(--gold-bright);
  font-family: var(--sans);
  font-size: 0.65rem;
}

.vault-chapter-inscription span:last-child {
  font-size: 1.5rem;
}

.vault-chapter-provenance {
  justify-content: flex-end;
}

.vault-provenance-panel {
  background: rgb(5 5 5 / 78%);
  border-left: 1px solid rgb(214 185 111 / 58%);
  box-sizing: border-box;
  margin-bottom: clamp(7rem, 14vh, 9rem);
  padding: 0 0 0 1.5rem;
  pointer-events: auto;
  width: min(34rem, 43vw);
}

.vault-provenance-panel .vault-chapter-inscription {
  margin-bottom: 0;
  width: 100%;
}

.vault-provenance-intro {
  color: #bdb5a5;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 1rem 0 1.25rem;
  max-width: 27rem;
}

.vault-provenance-ledger {
  border-bottom: 1px solid rgb(247 243 232 / 16%);
  margin: 0;
}

.vault-provenance-ledger div {
  border-top: 1px solid rgb(247 243 232 / 16%);
  display: grid;
  gap: 1rem;
  grid-template-columns: 4.5rem 1fr;
  padding: 0.7rem 0;
}

.vault-provenance-ledger dt {
  color: var(--gold-bright);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.vault-provenance-ledger dd {
  color: #e2dbcc;
  font-family: var(--serif);
  font-size: 0.88rem;
  margin: 0;
  text-shadow: 0 -1px 0 #000;
}

.vault-collection-transition {
  align-items: end;
  display: grid;
  grid-template-areas: "vitrine chapter";
  grid-template-columns: minmax(19rem, 0.58fr) minmax(18rem, 0.42fr);
  margin-bottom: clamp(7rem, 14vh, 9rem);
  width: 100%;
}

.vault-collection-transition .vault-chapter-inscription {
  grid-area: chapter;
  justify-self: end;
  margin: 0;
}

.vault-vitrine-hint {
  align-items: stretch;
  background: rgb(5 5 5 / 84%);
  border: 1px solid rgb(214 185 111 / 44%);
  display: grid;
  grid-area: vitrine;
  grid-template-columns: 9rem minmax(0, 1fr);
  max-width: 29rem;
  pointer-events: auto;
}

.vault-vitrine-hint img {
  aspect-ratio: 4 / 5;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.vault-vitrine-hint > div {
  align-self: center;
  padding: 1rem;
}

.vault-vitrine-hint p {
  color: var(--gold-bright);
  font-size: 0.58rem;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.vault-vitrine-hint h2 {
  color: var(--ivory);
  font-size: 1.35rem;
  line-height: 1.08;
  margin: 0 0 0.7rem;
}

.vault-vitrine-hint button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ivory);
  cursor: pointer;
  font-size: 0.65rem;
  min-height: 44px;
  padding: 0;
}

@media (min-width: 48.001rem) {
  .vault-chapter-collection .vault-chapter-inscription {
    margin-bottom: 0;
  }
}

.world-skip {
  border-bottom: 1px solid rgb(247 243 232 / 42%);
  bottom: 2rem;
  color: #d8d0c1;
  font-size: 0.68rem;
  min-height: 44px;
  padding-top: 0.8rem;
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  text-decoration: none;
  z-index: 6;
}

.vault-world .vault-aperture {
  z-index: 5;
}

.section-dark {
  background: var(--ink);
  color: var(--ivory);
}

.section-light {
  background: var(--ivory);
  color: var(--ink);
}

.section-parchment {
  background: var(--parchment);
  color: var(--ink);
}

.section-oxblood {
  background: var(--oxblood);
  color: var(--ivory);
}

.stone-index,
.collection,
.provenance,
.private-viewing {
  padding: var(--section-space) max(1.5rem, calc((100% - 92rem) / 2));
}

.section-heading {
  max-width: 68rem;
}

.section-heading > p:last-child {
  color: var(--muted-dark);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 38rem;
}

.stone-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  margin-top: clamp(3rem, 7vw, 7rem);
}

.stone-stage {
  --stone-ambient: #1e684d;
  --stone-position: 10% center;
  aspect-ratio: 16 / 11;
  background: var(--ink-soft);
  border: 1px solid var(--stone-ambient);
  box-shadow:
    inset 0 0 6rem rgb(30 104 77 / 24%),
    0 0 0 1px rgb(185 149 77 / 10%);
  overflow: hidden;
  position: relative;
  transition:
    border-color 550ms ease,
    box-shadow 550ms ease;
}

.stone-stage > img {
  height: 100%;
  object-fit: cover;
  object-position: var(--stone-position);
  transition:
    object-position 600ms cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 450ms ease;
  width: 100%;
}

.stone-stage[data-stone="ruby"] {
  box-shadow:
    inset 0 0 6rem rgb(129 23 38 / 26%),
    0 0 0 1px rgb(185 149 77 / 10%);
}

.stone-stage[data-stone="diamond"] {
  box-shadow:
    inset 0 0 6rem rgb(194 203 204 / 18%),
    0 0 0 1px rgb(185 149 77 / 10%);
}

@media (min-width: 64.001rem) {
  .stone-stage[data-stone="ruby"] + .stone-details {
    translate: 0 -6.5rem;
  }
}

.stone-collection-label {
  background: rgb(8 8 7 / 82%);
  border: 1px solid var(--line);
  bottom: 1rem;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 0.95rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: absolute;
}

.stone-details {
  align-self: center;
}

.stone-tabs {
  border-bottom: 1px solid var(--line);
  display: grid;
  margin-bottom: 2.5rem;
}

.stone-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--muted-dark);
  cursor: pointer;
  display: grid;
  font-family: var(--serif);
  font-size: 1.4rem;
  grid-template-columns: 2.5rem 1fr;
  min-height: 4.5rem;
  padding: 0;
  text-align: left;
  transition:
    color 400ms ease,
    padding-left 400ms ease;
}

.stone-tabs button span {
  font-family: var(--sans);
  font-size: 0.62rem;
}

.stone-tabs button[aria-selected="true"] {
  color: var(--gold-bright);
  padding-left: 0.75rem;
}

.stone-kicker {
  color: var(--gold-bright);
  font-size: 0.7rem;
  margin-bottom: 1rem;
}

.stone-panel h3 {
  font-size: clamp(2.3rem, 4vw, 4.6rem);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.stone-panel > p:not(.stone-kicker) {
  color: var(--muted-dark);
  font-family: var(--serif);
  line-height: 1.7;
}

.text-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ivory);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  gap: 1.5rem;
  margin-top: 1.25rem;
  min-height: 44px;
  padding: 0;
  text-decoration: none;
}

.split-heading {
  align-items: end;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  max-width: none;
}

.split-heading > p:last-child {
  color: var(--muted-light);
}

.product-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 7rem);
}

.collection-vitrines {
  --jd-color-border: #8d7a55;
  --jd-color-muted: #aca392;
  --jd-color-surface: #080807;
  --jd-color-text: #f7f3e8;
  background: #070706;
  border-top: 1px solid rgb(214 185 111 / 28%);
  box-shadow: inset 0 1.5rem 4rem rgb(0 0 0 / 44%);
  color: var(--ivory);
}

.collection-vitrines .split-heading > p:last-child {
  color: #aca392;
}

.collection-vitrines .product-grid {
  border: 1px solid rgb(214 185 111 / 24%);
}

.collection-vitrines .product-card {
  background: #0a0a09;
  border: 1px solid rgb(214 185 111 / 20%);
  box-shadow: inset 0 0 2.5rem rgb(0 0 0 / 56%);
}

.collection-vitrines .product-media {
  background: #050505;
  border-bottom: 1px solid rgb(214 185 111 / 20%);
}

.collection-vitrines .product-copy {
  background: #0a0a09;
  color: var(--ivory);
}

.collection-vitrines .product-material,
.collection-vitrines .product-price {
  color: #aca392;
}

.collection-vitrines .product-action {
  border-bottom-color: var(--gold);
  color: var(--ivory);
}

.product-card {
  background: #d6ccb9;
  min-width: 0;
}

.product-media {
  aspect-ratio: 4 / 5;
  background: var(--ink-soft);
  overflow: hidden;
  position: relative;
}

.product-media img {
  height: 100%;
  object-fit: cover;
  transition:
    transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1),
    scale 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
  width: 100%;
}

.product-card:hover .product-media img,
.product-card:focus-within .product-media img {
  scale: 1.025;
}

.crop-emerald img {
  object-position: 0% center;
}

.crop-drops img {
  object-position: 86% 32%;
  transform: scale(1.6);
}

.crop-ruby img {
  object-position: 49% center;
}

.crop-torque img {
  object-position: 15% 28%;
  transform: scale(1.5);
}

.crop-bracelet img {
  object-position: 100% 62%;
}

.crop-cuff img {
  object-position: 87% center;
}

.favorite-button,
.quick-view,
.viewing-label {
  position: absolute;
}

.favorite-button {
  align-items: center;
  background: rgb(8 8 7 / 78%);
  border: 1px solid rgb(247 243 232 / 36%);
  color: var(--ivory);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.3rem;
  height: 44px;
  justify-content: center;
  right: 0.75rem;
  top: 0.75rem;
  width: 44px;
}

.favorite-button[aria-pressed="true"] {
  background: var(--oxblood);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.quick-view {
  background: rgb(8 8 7 / 84%);
  border: 1px solid rgb(247 243 232 / 36%);
  bottom: 0.75rem;
  color: var(--ivory);
  cursor: pointer;
  font-size: 0.7rem;
  left: 0.75rem;
  min-height: 44px;
  padding: 0 1rem;
}

.viewing-label {
  background: var(--oxblood);
  color: var(--ivory);
  font-size: 0.65rem;
  left: 0.75rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  top: 0.75rem;
}

.product-copy {
  background: var(--parchment-pale);
  min-height: 13.5rem;
  padding: 1.5rem;
}

.product-material {
  color: var(--muted-light);
  font-size: 0.65rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.product-copy h3 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.product-price {
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

.product-action {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.7rem;
  min-height: 44px;
  padding: 0;
}

.provenance-grid {
  border-bottom: 1px solid rgb(8 8 7 / 25%);
  border-top: 1px solid rgb(8 8 7 / 25%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -1px 0 rgb(86 65 32 / 18%);
  display: grid;
  gap: clamp(3rem, 7vw, 8rem);
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.provenance-grid h2,
.record-list dd {
  text-shadow: 0 1px 0 rgb(255 255 255 / 32%);
}

.provenance-copy {
  align-self: end;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
}

.record-list {
  border-bottom: 1px solid rgb(8 8 7 / 25%);
  grid-column: 1 / -1;
  margin: 0;
}

.record-list div {
  align-items: start;
  border-top: 1px solid rgb(8 8 7 / 25%);
  display: grid;
  gap: 2rem;
  grid-template-columns: 3rem 1fr;
  padding: 1.5rem 0;
}

.record-list dt {
  color: var(--oxblood);
  font-size: 0.68rem;
}

.record-list dd {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  margin: 0;
}

.craft-section {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
}

.craft-image {
  min-height: 42rem;
}

.craft-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.craft-copy {
  align-self: center;
  padding: var(--section-space) clamp(2rem, 7vw, 7rem);
}

.craft-copy p:not(.eyebrow) {
  color: var(--muted-dark);
  font-family: var(--serif);
  line-height: 1.7;
}

.private-viewing {
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(22rem, 1.15fr);
}

.viewing-intro p:not(.eyebrow) {
  color: #d4c8ba;
  font-family: var(--serif);
  line-height: 1.7;
  max-width: 33rem;
}

.viewing-form {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.form-grid {
  display: grid;
  gap: 0 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-span {
  grid-column: 1 / -1;
}

.viewing-form .jd-form-field label {
  color: #d8cbbc;
  font-size: 0.68rem;
}

.viewing-form .jd-form-field :is(input, select, textarea) {
  background: rgb(8 8 7 / 18%);
  border-color: rgb(247 243 232 / 38%);
  color: var(--ivory);
}

.viewing-form .jd-form-field select option {
  color: var(--ink);
}

.viewing-form .jd-field-error,
.viewing-form [data-jd-form-error] {
  color: #ffd6cf;
}

.form-note {
  color: #c2b4a8;
  display: inline-block;
  font-size: 0.66rem;
  margin: 0 0 0 1rem;
}

.form-success {
  color: inherit;
  font-size: 0.8rem;
  margin: 1rem 0 0;
  min-height: 1.2rem;
}

.journal {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
}

.journal-image {
  min-height: 38rem;
}

.journal-image img {
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  width: 100%;
}

.journal-copy {
  align-self: center;
  padding: var(--section-space) clamp(2rem, 7vw, 7rem);
}

.journal-copy p:not(.eyebrow) {
  color: var(--muted-light);
  font-family: var(--serif);
  line-height: 1.7;
}

.dark-link {
  color: var(--ink);
}

.prefooter-cta {
  background: var(--ink-soft);
  color: var(--ivory);
  padding: clamp(5rem, 9vw, 8rem) 1.5rem;
  text-align: center;
}

.prefooter-cta h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 16ch;
}

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  color: var(--ivory);
  display: grid;
  gap: 4rem;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 5rem max(1.5rem, calc((100% - 92rem) / 2)) 7rem;
}

.footer-brand > p {
  color: var(--muted-dark);
  font-family: var(--serif);
  line-height: 1.6;
  margin-top: 1.5rem;
  max-width: 22rem;
}

.site-footer nav {
  display: grid;
  gap: 0.75rem;
}

.site-footer nav p {
  color: var(--gold-bright);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.site-footer nav a,
.site-footer nav button {
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  cursor: pointer;
  font-size: 0.78rem;
  justify-self: start;
  min-height: 2.75rem;
  min-width: 44px;
  padding: 0;
  text-decoration: none;
}

.footer-meta {
  border-top: 1px solid var(--line);
  color: var(--muted-dark);
  display: flex;
  font-size: 0.65rem;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 1rem;
}

.mobile-menu > *,
.bag-drawer > *,
.quickview-dialog > *,
.consultation-dialog > * {
  border-radius: 0;
}

.mobile-menu-inner,
.bag-inner {
  background: var(--ivory);
  color: var(--ink);
}

.layer-header {
  align-items: center;
  border-bottom: 1px solid #c9b998;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.layer-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0;
}

.mobile-menu nav {
  border-bottom: 1px solid #c9b998;
  display: grid;
  margin: 3rem 0;
}

.mobile-menu nav a {
  border-top: 1px solid #c9b998;
  font-family: var(--serif);
  font-size: 1.7rem;
  padding: 1rem 0;
  text-decoration: none;
}

.bag-drawer > * {
  max-width: min(34rem, 100vw);
  padding: 1.5rem;
}

.bag-items article {
  border-bottom: 1px solid #c9b998;
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: 1fr auto;
  padding: 1rem 0;
}

.bag-items article p {
  margin-bottom: 0;
}

.bag-items article input {
  background: transparent;
  border: 1px solid #9b8a6c;
  font: inherit;
  padding: 0.5rem;
  width: 4.5rem;
}

.bag-items article button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
}

.bag-subtotal {
  border-bottom: 1px solid #c9b998;
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 0;
}

.checkout-form {
  padding-top: 2rem;
}

.checkout-form h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.checkout-form > p {
  color: var(--muted-light);
  font-size: 0.75rem;
  line-height: 1.5;
}

.checkout-form .jd-form-field textarea {
  min-height: 6rem;
}

.consent-field {
  align-items: start;
  display: grid;
  font-size: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: 1.5rem 1fr;
  line-height: 1.4;
  margin: 1rem 0 0;
}

.consent-field input {
  height: 1.25rem;
  margin: 0;
  width: 1.25rem;
}

.quickview-dialog > *,
.consultation-dialog > * {
  max-width: min(64rem, 100%);
}

.quickview-inner,
.consultation-inner {
  position: relative;
}

.dialog-close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

.quickview-dialog .jd-product-detail {
  gap: clamp(1.5rem, 4vw, 4rem);
}

.quickview-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.quickview-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.quickview-copy {
  align-self: center;
  padding: 2rem 1rem 2rem 0;
}

.quickview-copy h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.quickview-price,
.quickview-materials {
  color: var(--muted-light);
  font-size: 0.78rem;
}

.quickview-copy > p:not(.eyebrow, .quickview-price, .quickview-materials) {
  font-family: var(--serif);
  line-height: 1.65;
}

.consultation-inner {
  max-width: 38rem;
}

.consultation-inner > h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 1rem;
}

.consultation-inner > p:not(.eyebrow) {
  color: var(--muted-light);
  font-family: var(--serif);
  line-height: 1.6;
}

.vault-aperture {
  background: var(--ink);
  inset-block: 0;
  pointer-events: none;
  position: absolute;
  width: 50%;
  z-index: 3;
}

.vault-aperture-left {
  left: 0;
  transform: translateX(-101%);
}

.vault-aperture-right {
  right: 0;
  transform: translateX(101%);
}

.cinema-active .vault-aperture-left {
  animation: vault-aperture-left var(--cinema-duration, 920ms)
    cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.cinema-active .vault-aperture-right {
  animation: vault-aperture-right var(--cinema-duration, 920ms)
    cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-title-line {
  display: block;
  overflow: hidden;
}

.cinema-active .hero-title-line[data-cinema-visible="true"] {
  transition-delay: calc(var(--cinema-index, 0) * 25ms);
}

.stone-stage[data-cinema-light="gemstone"]::after {
  background: linear-gradient(
    112deg,
    transparent 45%,
    rgb(255 244 204 / 0.5) 50%,
    transparent 55%
  );
  inset: -15% -20%;
  transform: translateX(-120%) rotate(8deg);
}

.cinema-active
  .stone-stage[data-cinema-light="gemstone"][data-cinema-visible="true"]::after {
  animation: aurelia-gemstone-light 780ms ease-out both;
}

.stone-stage.is-gem-changing > img {
  opacity: 0.72;
}

.archive-folio {
  position: relative;
}

.archive-folio::before {
  border: 1px solid rgb(133 100 49 / 24%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0.7rem, 0.7rem, 0);
  transition: transform var(--cinema-duration, 920ms) ease;
}

.cinema-active .archive-folio:not([data-cinema-visible="true"])::before {
  transform: translate3d(1.25rem, 1.25rem, 0);
}

.product-card {
  box-shadow: 0 0.35rem 1.1rem rgb(47 12 22 / 12%);
}

.cinema-active .product-card[data-cinema-visible="true"] {
  box-shadow: 0 0.65rem 1.45rem rgb(47 12 22 / 18%);
  transition:
    box-shadow var(--cinema-duration, 920ms) ease,
    clip-path var(--cinema-duration, 920ms) var(--cinema-ease, ease);
}

.cinema-active .product-card.mask-from-right:not([data-cinema-visible="true"]) {
  clip-path: inset(0 0 0 100%);
}

@keyframes vault-aperture-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-101%);
  }
}

@keyframes vault-aperture-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(101%);
  }
}

@keyframes aurelia-gemstone-light {
  to {
    transform: translateX(120%) rotate(8deg);
  }
}

@media (max-width: 68rem) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .menu-trigger {
    display: inline-flex;
  }

  .stone-layout {
    grid-template-columns: 1fr;
  }

  .stone-details {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .private-viewing {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  html {
    --cinema-duration: 620ms !important;
  }

  [data-cinema-depth] {
    transform: none !important;
  }

  :root {
    --page: calc(100% - 2rem);
    --section-space: 5.5rem;
  }

  h2 {
    font-size: 3.6rem;
  }

  .site-header {
    min-height: 4.5rem;
    padding: 0 1rem;
  }

  .site-header .wordmark > span:last-child {
    font-size: 0.95rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .header-action {
    font-size: 0.68rem;
  }

  .vault-world-stage {
    min-height: 100svh;
  }

  .vault-world[data-world-state="ready"] [data-jewelry-world-canvas] {
    opacity: 1;
  }

  .vault-world [data-jewelry-world-poster],
  .vault-world [data-jewelry-world-canvas] {
    bottom: auto;
    height: 62svh;
  }

  .vault-world-stage::after {
    bottom: auto;
    height: 62svh;
  }

  .vault-chapter {
    padding: 0;
  }

  .vault-hero-copy {
    background: #080807;
    border-left: 0;
    border-top: 1px solid rgb(214 185 111 / 58%);
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    min-height: 38svh;
    padding: 1.25rem 1rem max(2rem, env(safe-area-inset-bottom));
    width: 100%;
  }

  .vault-hero-copy .eyebrow {
    margin-bottom: 0.65rem;
  }

  .vault-hero-copy h1 {
    font-size: 3.75rem;
    line-height: 0.88;
    margin-bottom: 0.8rem;
    max-width: none;
  }

  .vault-hero-copy > p:not(.eyebrow) {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    max-width: 22rem;
  }

  .vault-hero-copy .button {
    min-height: 2.75rem;
  }

  .vault-chapter-inscription {
    background: #080807;
    box-sizing: border-box;
    margin: 0;
    min-height: 38svh;
    padding: 1.5rem 1rem;
    width: 100%;
  }

  .vault-provenance-panel,
  .vault-collection-transition {
    background: #080807;
    border-left: 0;
    border-top: 1px solid rgb(214 185 111 / 58%);
    box-sizing: border-box;
    margin: 0 0 4.5rem;
    min-height: calc(38svh - 4.5rem);
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
    width: 100%;
  }

  .vault-provenance-panel .vault-chapter-inscription,
  .vault-collection-transition .vault-chapter-inscription {
    background: transparent;
    min-height: 0;
    padding: 0.55rem 0;
    width: 100%;
  }

  .vault-provenance-intro {
    display: none;
  }

  .vault-provenance-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-provenance-ledger div {
    align-content: start;
    gap: 0.3rem;
    grid-template-columns: 1fr;
    padding: 0.55rem 0.75rem 0.55rem 0;
  }

  .vault-provenance-ledger dd {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .vault-collection-transition {
    display: grid;
    grid-template-areas:
      "chapter"
      "vitrine";
    grid-template-columns: 1fr;
  }

  .vault-collection-transition .vault-chapter-inscription {
    justify-self: stretch;
  }

  .vault-vitrine-hint {
    grid-template-columns: 7rem minmax(0, 1fr);
    max-width: 100%;
  }

  .vault-vitrine-hint > div {
    padding: 0.7rem;
  }

  .vault-vitrine-hint h2 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
  }

  .vault-vitrine-hint p {
    margin-bottom: 0.3rem;
  }

  .world-skip {
    bottom: auto;
    right: 1rem;
    top: 4.75rem;
  }

  .hero,
  .hero-content {
    min-height: max(40rem, 92svh);
  }

  .hero-image {
    object-position: 62% center;
    opacity: 0.62;
  }

  .hero::after {
    background: rgb(8 8 7 / 25%);
  }

  .hero-content {
    justify-content: end;
    padding-bottom: 6rem;
  }

  .hero h1 {
    font-size: 5.5rem;
    line-height: 0.82;
    margin-bottom: 1.5rem;
  }

  .hero-copy {
    font-size: 1rem;
    max-width: 27rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    max-width: 22rem;
  }

  .hero-scroll {
    bottom: 1.25rem;
    right: 1rem;
  }

  .stone-index,
  .collection,
  .provenance,
  .private-viewing {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .stone-stage {
    aspect-ratio: 4 / 5;
  }

  .stone-details,
  .split-heading,
  .provenance-grid,
  .craft-section,
  .journal {
    grid-template-columns: 1fr;
  }

  .stone-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stone-tabs button {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    justify-content: center;
    min-width: 0;
    padding: 0.5rem;
    text-align: center;
  }

  .stone-tabs button[aria-selected="true"] {
    padding-left: 0.5rem;
  }

  .stone-tabs button span {
    display: block;
    margin-bottom: 0.25rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-copy {
    min-height: 12.5rem;
  }

  .provenance-grid {
    gap: 2rem;
  }

  .record-list {
    margin-top: 1.5rem;
  }

  .craft-image,
  .journal-image {
    min-height: 0;
  }

  .craft-image {
    aspect-ratio: 4 / 5;
  }

  .journal-image {
    aspect-ratio: 1 / 1;
  }

  .craft-copy,
  .journal-copy {
    padding: var(--section-space) 1rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-span {
    grid-column: auto;
  }

  .form-note {
    display: block;
    margin: 1rem 0 0;
  }

  .site-footer {
    gap: 2.5rem;
    grid-template-columns: 1fr;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .footer-meta {
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .quickview-dialog {
    align-items: end;
    padding: 0;
  }

  .quickview-dialog > * {
    max-height: 92svh;
    padding: 1rem;
  }

  .quickview-image {
    aspect-ratio: 16 / 9;
  }

  .quickview-copy {
    padding: 0.5rem 0;
  }

  .quickview-copy h2 {
    font-size: 2.4rem;
    padding-right: 2.5rem;
  }

  .consultation-dialog {
    align-items: end;
    padding: 0;
  }

  .consultation-dialog > * {
    max-height: 94svh;
    padding: 1.25rem;
  }

  .crestline-demo-return {
    z-index: 90;
  }
}

@media (max-width: 30rem) {
  .vault-provenance-panel,
  .vault-collection-transition {
    margin-bottom: 7.25rem;
    min-height: calc(38svh - 7.25rem);
  }

  .vault-vitrine-hint {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .vault-world[data-world-state="static"] .vault-aperture-left,
  .vault-world .vault-aperture-left {
    transform: translateX(-101%) !important;
  }

  .vault-world[data-world-state="static"] .vault-aperture-right,
  .vault-world .vault-aperture-right {
    transform: translateX(101%) !important;
  }

  .product-media img,
  .stone-stage > img,
  .stone-stage,
  .button,
  .desktop-nav a::after {
    transition: none;
  }

  .product-card:hover .product-media img,
  .product-card:focus-within .product-media img,
  .button:hover {
    transform: none;
    scale: none;
  }

  .stone-stage[data-cinema-light="gemstone"]::after {
    animation: none !important;
  }
}

/* Keep live containment and crop contracts after all legacy art-direction rules. */
.vault-world [data-jewelry-world-poster] {
  --hero-focal-x: 50%;
  --hero-focal-y: 50%;
}

.vault-world [data-jewelry-world-poster] > img {
  object-position: var(--hero-focal-x) var(--hero-focal-y);
}

.product-media.crop-emerald,
.quickview-image:has(img[src*="vesper-emerald-signet"]) {
  --product-focal-x: 0%;
  --product-focal-y: 50%;
}

.product-media.crop-drops,
.quickview-image:has(img[src*="nocturne-diamond-drops"]) {
  --product-focal-x: 86%;
  --product-focal-y: 32%;
}

.product-media.crop-ruby,
.quickview-image:has(img[src*="ardent-ruby-brooch"]) {
  --product-focal-x: 49%;
  --product-focal-y: 50%;
}

.product-media.crop-torque,
.quickview-image:has(img[src*="archive-gold-torque"]) {
  --product-focal-x: 15%;
  --product-focal-y: 28%;
}

.product-media.crop-bracelet,
.quickview-image:has(img[src*="verdant-line-bracelet"]) {
  --product-focal-x: 100%;
  --product-focal-y: 62%;
}

.product-media.crop-cuff,
.quickview-image:has(img[src*="lucent-diamond-cuff"]) {
  --product-focal-x: 87%;
  --product-focal-y: 50%;
}

.product-media img,
.quickview-image img {
  object-position: var(--product-focal-x) var(--product-focal-y);
}

.vault-world [data-world-fallback="aperture"] {
  --fallback-focal-x: 50%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback="provenance"] {
  --fallback-focal-x: 48%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback="collection"] {
  --fallback-focal-x: 18%;
  --fallback-focal-y: 50%;
}

.vault-world [data-world-fallback] img {
  object-position: var(--fallback-focal-x) var(--fallback-focal-y);
}

@media (max-width: 64rem) {
  .vault-world [data-jewelry-world-poster] {
    --hero-focal-x: 50%;
    --hero-focal-y: 50%;
  }
}

@media (max-width: 48rem) {
  .vault-world [data-jewelry-world-poster] {
    --hero-focal-x: 50%;
    --hero-focal-y: 50%;
  }

  .vault-world [data-world-heading] {
    max-inline-size: 100%;
    font-size: clamp(2.75rem, 13cqi, 4.75rem);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .vault-hero-copy [data-world-controls] {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (max-width: 48.125rem) {
  .vault-world [data-jewelry-world-poster] {
    --hero-focal-x: 50%;
    --hero-focal-y: 50%;
  }

  .vault-world [data-world-heading] {
    max-inline-size: 100%;
    font-size: clamp(2.75rem, 13cqi, 4.75rem);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .vault-hero-copy [data-world-controls] {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.vault-world[data-world-state="ready"] [data-jewelry-world-canvas] {
  pointer-events: auto;
}

.vault-world[data-world-state="ready"] .vault-world-chapters {
  pointer-events: none;
}

.vault-world[data-world-state="ready"] [data-world-copy] {
  pointer-events: none;
}

.vault-world[data-world-state="ready"]
  .vault-world-chapters
  :is(a, button, input, select, textarea) {
  pointer-events: auto;
}

/* Product-first collection framing: the complete piece stays readable. */
:root {
  --jewelry-inspection-ratio: 16 / 10;
}

.collection-vitrines .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-vitrines .product-media,
.quickview-image {
  aspect-ratio: var(--jewelry-inspection-ratio);
}

.collection-vitrines .product-media img,
.quickview-image img {
  filter: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .collection-vitrines .product-card:hover .product-media img,
  .collection-vitrines .product-card:focus-within .product-media img {
    scale: 1.015;
  }
}

@media (max-width: 47.999rem) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-vitrines .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-vitrines .product-media,
  .quickview-image {
    aspect-ratio: var(--jewelry-inspection-ratio);
  }

  .product-card:hover .product-media img,
  .product-card:focus-within .product-media img {
    scale: none;
  }
}

@media (max-width: 48rem) {
  [data-world-intro-signature="concentric-aperture"] > .world-skip {
    display: none !important;
  }
}