:root { color-scheme: dark; --ivory: #eee9dc; --muted: #bbb6ac; --line: #5b5749; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #000; }
body { color: var(--ivory); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.landing { position: relative; isolation: isolate; height: 100svh; min-height: 500px; width: 100%; overflow: hidden; background: #000; }
.brand { position: absolute; z-index: 2; left: 50%; top: 7.6%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 100%; }
h1 { margin: 0; width: clamp(240px, 21.2vw, 610px); line-height: 0; }
.wordmark { display: block; width: 100%; height: auto; }
.rule { display: block; height: 1px; width: clamp(30px, 2.55vw, 74px); background: var(--line); }
.brand .rule { margin-top: clamp(22px, 2vw, 58px); }
.announcement { margin: clamp(14px, 1.05vw, 30px) 0 0; padding-left: .43em; font-size: clamp(10px, .8vw, 23px); line-height: 1.5; font-weight: 600; letter-spacing: .43em; text-transform: uppercase; color: var(--muted); }
.jewel { position: absolute; margin: 0; left: 50%; top: 54.5%; width: min(36vw, 61vh); aspect-ratio: 1; transform: translate(-59%, -50%); }
.jewel-render { position: relative; width: 100%; height: 100%; transform: scale(.5); transform-origin: 59% 50%; }
.diamond { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.gem-lighting { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gem-lighting.ready { opacity: 1; }
.locations { position: absolute; z-index: 2; bottom: max(5.6%, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.locations .rule { margin-bottom: clamp(16px, 1.1vw, 32px); }
.locations ul { display: flex; align-items: center; gap: clamp(36px, 4vw, 115px); margin: 0; padding: 0 0 0 .5em; list-style: none; }
.locations li { color: var(--muted); text-transform: uppercase; white-space: nowrap; font-size: clamp(10px, .8vw, 23px); line-height: 1.5; font-weight: 600; letter-spacing: .5em; }
.motion-toggle { position: absolute; bottom: max(19px, env(safe-area-inset-bottom)); right: 20px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #716d63; font-size: 12px; cursor: pointer; transition: color .3s, border-color .3s; }
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: #5b5749; color: var(--ivory); outline: none; }
@media (max-width: 600px) {
  .landing { min-height: 540px; }
  .brand { top: max(10.5%, calc(env(safe-area-inset-top) + 35px)); }
  h1 { width: clamp(255px, 74vw, 410px); }
  .brand .rule { width: 34px; margin-top: 25px; }
  .announcement { margin-top: 17px; font-size: 12px; letter-spacing: .38em; }
  .jewel { top: 53%; width: min(112vw, 65svh); }
  .locations { bottom: max(9%, calc(env(safe-area-inset-bottom) + 28px)); width: 100%; }
  .locations .rule { width: 34px; margin-bottom: 22px; }
  .locations ul { gap: clamp(22px, 7vw, 42px); }
  .locations li { font-size: 11px; letter-spacing: .3em; }
  .motion-toggle { bottom: max(10px, env(safe-area-inset-bottom)); right: 9px; }
}
@media (min-width: 601px) and (max-aspect-ratio: 1/1) {
  h1 { width: 40vw; }
  .jewel { width: 72vw; }
  .announcement, .locations li { font-size: 12px; }
  .locations { bottom: 7%; }
}
@media (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .landing { min-height: 320px; }
  .brand { top: 7%; }
  h1 { width: 180px; }
  .brand .rule { margin-top: 14px; }
  .announcement { margin-top: 10px; font-size: 9px; }
  .jewel { top: 57%; width: 64vh; }
  .locations { bottom: 5%; }
  .locations .rule { margin-bottom: 10px; }
  .locations li { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .gem-lighting { transition: none; }
  .motion-toggle { display: none; }
}