html.premium-ui {
  color-scheme: dark;
  --background: #050504;
  --foreground: #f4efe6;
  --premium-ink: #050504;
  --premium-paper: #f4efe6;
  --premium-muted: rgba(244, 239, 230, .62);
  --premium-dim: rgba(244, 239, 230, .36);
  --premium-hairline: rgba(244, 239, 230, .16);
  --premium-hairline-strong: rgba(244, 239, 230, .28);
  --premium-brass: #c6aa70;
  --premium-cyan: #9ddde1;
  --premium-panel: rgba(12, 12, 10, .58);
  --premium-panel-quiet: rgba(12, 12, 10, .32);
  --premium-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --premium-ease-move: cubic-bezier(.25, 1, .5, 1);
  --premium-serif: "Times New Roman", "Georgia", serif;
  --premium-sans: "Geist", "Aptos", "Segoe UI", system-ui, sans-serif;
  background: var(--premium-ink);
}

html.premium-ui body {
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(244, 239, 230, .045) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(244, 239, 230, .028) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, #050504 0%, #0b0b09 48%, #040606 100%);
  background-size: 128px 128px, 128px 128px, auto;
  color: var(--premium-paper);
  font-family: var(--premium-sans);
  text-rendering: geometricPrecision;
}

html.premium-ui body::before,
html.premium-ui body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html.premium-ui body::before {
  opacity: .24;
  background-image:
    linear-gradient(115deg, transparent 0 20%, rgba(157, 221, 225, .16) 20.3%, transparent 23%, transparent 69%, rgba(198, 170, 112, .13) 70%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

html.premium-ui body::after {
  opacity: .34;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72), transparent 18%, transparent 76%, rgba(0, 0, 0, .76)),
    linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 18%, rgba(0, 0, 0, .62));
}

html.premium-ui main {
  position: relative;
  isolation: isolate;
}

html.premium-ui main > * {
  z-index: 2;
}

html.premium-ui ::selection {
  background: rgba(198, 170, 112, .34);
  color: #fff;
}

.premium-cursor-lens {
  display: none !important;
}

.premium-admin-hotspot {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  display: none;
  pointer-events: none;
  cursor: default;
  appearance: none;
}

.premium-admin-hotspot:focus {
  outline: none !important;
}

html.premium-ui main > button.fixed.bottom-0.right-0.opacity-0,
html.premium-ui main button.fixed.bottom-0.right-0.opacity-0 {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.premium-lightfield,
.premium-frame-lines,
.premium-brand-mark,
.premium-render-stack,
.premium-gallery-issue {
  pointer-events: none;
}

.premium-lightfield {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: .56;
  background:
    linear-gradient(100deg, transparent 0 11%, rgba(157, 221, 225, .12) 11.4%, transparent 13.6%, transparent 82%, rgba(244, 239, 230, .10) 83%, transparent 85%),
    linear-gradient(180deg, transparent, rgba(198, 170, 112, .05) 48%, transparent);
  mix-blend-mode: screen;
}

.premium-frame-lines {
  position: fixed;
  inset: 20px;
  z-index: 4;
  border: 1px solid rgba(244, 239, 230, .08);
  opacity: .86;
}

.premium-frame-lines::before,
.premium-frame-lines::after {
  content: "";
  position: absolute;
  background: rgba(244, 239, 230, .12);
}

.premium-frame-lines::before {
  left: 0;
  right: 0;
  top: 38%;
  height: 1px;
}

.premium-frame-lines::after {
  top: 0;
  bottom: 0;
  left: 64%;
  width: 1px;
}

.premium-brand-mark {
  position: fixed;
  left: 34px;
  bottom: 28px;
  z-index: 35;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
  color: rgba(244, 239, 230, .5);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.premium-brand-mark::before {
  content: "DZ";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(244, 239, 230, .22);
  color: rgba(244, 239, 230, .82);
  font-family: var(--premium-serif);
  font-size: 13px;
  letter-spacing: .08em;
}

.premium-brand-mark::after {
  content: "Daniel Zhang Photography";
  max-width: 240px;
}

.premium-render-stack {
  position: fixed;
  right: clamp(22px, 5vw, 74px);
  top: clamp(98px, 16vh, 150px);
  z-index: 4;
  width: min(20vw, 230px);
  height: min(34vh, 300px);
  transform: perspective(760px) rotateY(-24deg) rotateX(8deg);
  transform-style: preserve-3d;
  opacity: .52;
}

.premium-render-stack span {
  position: absolute;
  inset: calc(var(--i) * 18px) calc(var(--i) * 11px);
  border: 1px solid rgba(244, 239, 230, calc(.2 - var(--i) * .022));
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .07), transparent 34%),
    linear-gradient(180deg, rgba(157, 221, 225, .035), rgba(198, 170, 112, .028));
  transform: translateZ(calc(var(--i) * 18px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html.premium-ui .glass,
html.premium-ui .glass-strong {
  border-color: var(--premium-hairline) !important;
  background: var(--premium-panel) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 22px 70px rgba(0, 0, 0, .36) !important;
}

html.premium-ui .grid-bg {
  opacity: .08 !important;
}

html.premium-ui .scanline-overlay::after {
  opacity: .18 !important;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, .028) 6px, transparent 8px) !important;
}

/* Home */
html.premium-ui main > .fixed.inset-0.overflow-hidden {
  background: #050504 !important;
  overflow: hidden !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .absolute.inset-0:first-child {
  transform: translate3d(calc((var(--premium-x, 50vw) - 50vw) * -.008), calc((var(--premium-y, 50vh) - 50vh) * -.006), 0) scale(1.035);
  transition: transform .7s var(--premium-ease-move);
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .absolute.inset-0:first-child img {
  opacity: .88 !important;
  filter: brightness(.72) contrast(1.08) saturate(1.02) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .absolute.inset-0:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 4, .78), rgba(5, 5, 4, .18) 38%, rgba(5, 5, 4, .58)),
    linear-gradient(180deg, rgba(5, 5, 4, .36), transparent 42%, rgba(5, 5, 4, .76));
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 {
  width: min(1280px, calc(100vw - 48px)) !important;
  min-height: 100svh !important;
  margin-inline: auto !important;
  padding: clamp(88px, 12vh, 132px) 0 clamp(76px, 9vh, 108px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr) !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: center !important;
  gap: 26px 56px !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1 {
  grid-column: 1 / 2 !important;
  align-self: end !important;
  max-width: 780px !important;
  margin: 0 !important;
  padding: 0 0 .11em !important;
  overflow: visible !important;
  color: rgba(244, 239, 230, .96) !important;
  font-family: var(--premium-serif) !important;
  font-size: 7.25rem !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: .045em !important;
  text-wrap: balance;
  text-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > .text-center {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  align-self: center !important;
  max-width: 780px !important;
  margin: 0 !important;
  text-align: left !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > .text-center > .flex {
  justify-content: flex-start !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > .text-center > .flex > div {
  width: 84px !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1 span,
html.premium-ui main > .fixed.inset-0.overflow-hidden h1 div {
  overflow: visible !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1::before {
  content: "Portfolio / Canada - China - Japan";
  display: block;
  margin: 0 0 18px 4px;
  color: rgba(198, 170, 112, .88);
  font-family: var(--premium-sans);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .34em;
  text-transform: uppercase;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1::after {
  content: "";
  display: block;
  width: min(42vw, 440px);
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, rgba(244, 239, 230, .64), rgba(198, 170, 112, .34), transparent);
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1 .premium-title-small {
  display: block;
  margin-top: .04em;
  color: rgba(244, 239, 230, .78);
  font-family: var(--premium-serif);
  font-size: .42em;
  letter-spacing: .12em;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden h1 + p {
  grid-column: 1 / 2 !important;
  max-width: 450px !important;
  margin: -12px 0 0 4px !important;
  color: rgba(244, 239, 230, .58) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  letter-spacing: .08em !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > .text-center p {
  color: rgba(244, 239, 230, .58) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  letter-spacing: .12em !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > button:first-child {
  top: 28px !important;
  left: 0 !important;
  width: auto !important;
  height: 42px !important;
  min-width: 118px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(244, 239, 230, .17) !important;
  border-radius: 0 !important;
  background: rgba(8, 8, 7, .42) !important;
  color: rgba(244, 239, 230, .72) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 180ms var(--premium-ease-enter), border-color 180ms ease, background-color 180ms ease !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > button:first-child:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(198, 170, 112, .45) !important;
  background: rgba(20, 18, 14, .62) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > button:first-of-type:not([aria-hidden="true"]) {
  top: 28px !important;
  left: 32px !important;
  width: auto !important;
  height: 42px !important;
  min-width: 118px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(244, 239, 230, .17) !important;
  border-radius: 0 !important;
  background: rgba(8, 8, 7, .42) !important;
  color: rgba(244, 239, 230, .72) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 180ms var(--premium-ease-enter), border-color 180ms ease, background-color 180ms ease !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > button:first-of-type:not([aria-hidden="true"]):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(198, 170, 112, .45) !important;
  background: rgba(20, 18, 14, .62) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 4 !important;
  align-self: center !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin-left: auto !important;
  padding: 16px 18px 18px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-left: 1px solid rgba(244, 239, 230, .2) !important;
  border-right: 1px solid rgba(244, 239, 230, .07) !important;
  background:
    linear-gradient(90deg, rgba(8, 8, 7, .62), rgba(8, 8, 7, .32)),
    linear-gradient(180deg, rgba(244, 239, 230, .06), transparent 58%, rgba(198, 170, 112, .035)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"]::before {
  content: "Index";
  display: block;
  margin-bottom: 8px;
  color: rgba(198, 170, 112, .82);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button {
  counter-increment: premium-home-index;
  position: relative !important;
  width: 100% !important;
  min-height: 66px !important;
  padding: 11px 0 !important;
  display: grid !important;
  grid-template-columns: 44px 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  border-bottom: 1px solid rgba(244, 239, 230, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  transition: transform 200ms var(--premium-ease-enter), background-color 200ms ease !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] {
  counter-reset: premium-home-index;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button::before {
  content: counter(premium-home-index, decimal-leading-zero);
  grid-column: 1;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(244, 239, 230, .36);
  font-family: var(--premium-serif);
  font-size: 17px;
  letter-spacing: .06em;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 170, 112, .78), rgba(157, 221, 225, .4));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 230ms var(--premium-ease-enter);
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button > div:nth-child(2) {
  grid-column: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(244, 239, 230, .18) !important;
  border-radius: 0 !important;
  background: rgba(244, 239, 230, .045) !important;
  color: rgba(244, 239, 230, .76) !important;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms var(--premium-ease-enter) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button svg {
  width: 17px !important;
  height: 17px !important;
  opacity: .95 !important;
  stroke-width: 1.65 !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button > div:nth-child(3),
html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button > .mt-3 {
  grid-column: 3 !important;
  margin: 0 !important;
  text-align: left !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button p:first-child {
  color: rgba(244, 239, 230, .9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button p:last-child {
  margin-top: 3px !important;
  color: rgba(244, 239, 230, .42) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button:hover {
  transform: translateX(5px) !important;
  background: rgba(244, 239, 230, .035) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button:hover::after {
  transform: scaleX(1);
}

html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button:hover > div:nth-child(2) {
  transform: translateX(2px) !important;
  border-color: rgba(198, 170, 112, .5) !important;
  background: rgba(198, 170, 112, .08) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-hidden [class*="animate-pulse-ring"] {
  display: none !important;
}

/* Snow narrative */
html.premium-snow-active {
  --snow-progress: 0;
  --snow-world-scale: 1.06;
  --snow-x: 0;
  --snow-y: 0;
  --snow-camera-rotate-x: 1;
  --snow-camera-rotate-y: -10;
  --snow-camera-z: 0;
  --snow-mist-x: 0;
  --snow-mist-y: 0;
  --snow-mist-scale: 1.02;
  --snow-caption-opacity: 0;
  --snow-caption-y: 0;
  --snow-index-opacity: 1;
  --snow-index-y: 0;
  --snow-title-opacity: 1;
  --snow-title-y: 0;
  --snow-orbit-opacity: .14;
}

html.premium-snow-active body {
  min-height: 100svh;
  overflow-x: hidden;
}

.premium-snow-scroll-space {
  display: block;
  height: 430svh;
  pointer-events: none;
}

html:not(.premium-snow-active) .premium-snow-scroll-space {
  display: none;
}

html.premium-snow-active main > .fixed.inset-0.overflow-hidden > .absolute.inset-0:first-child {
  opacity: 0 !important;
  transform: none !important;
}

html.premium-snow-active main > .fixed.inset-0.overflow-hidden > .relative.z-10 {
  position: relative !important;
  z-index: 12 !important;
}

html.premium-snow-active .premium-lightfield {
  opacity: .24;
}

html.premium-snow-active .premium-frame-lines {
  border-color: rgba(244, 239, 230, .035);
  opacity: .3;
}

html.premium-snow-active .premium-frame-lines::before,
html.premium-snow-active .premium-frame-lines::after {
  background: rgba(244, 239, 230, .07);
}

html.premium-snow-active .premium-render-stack {
  opacity: .22;
}

.premium-snow-story {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 63% 32%, rgba(117, 148, 158, .24), transparent 32%),
    linear-gradient(180deg, #071018 0%, #030607 58%, #020303 100%);
}

.premium-snow-image-stack {
  position: absolute;
  inset: -7vmax;
  z-index: 0;
  display: none !important;
  overflow: hidden;
  background: #05090b;
  transform: scale(1.02);
}

.premium-snow-image-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 5, .56), transparent 34%, rgba(2, 4, 5, .34) 68%, rgba(2, 4, 5, .68)),
    linear-gradient(180deg, rgba(2, 4, 5, .24), transparent 42%, rgba(2, 4, 5, .7));
  pointer-events: none;
}

.premium-snow-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  opacity: 0;
  filter: brightness(.78) contrast(1.14) saturate(.94);
  transform: scale(1.08);
  transform-origin: 58% 48%;
  transition: opacity 520ms var(--premium-ease-enter);
  will-change: opacity, transform;
}

.premium-snow-image:first-child {
  opacity: .9;
}

.premium-snow-story::before,
.premium-snow-story::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

.premium-snow-story::before {
  left: -14vw;
  right: -14vw;
  top: 42vh;
  height: 34vh;
  opacity: .34;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 18% 54%, rgba(244, 248, 247, .24), transparent 36%),
    radial-gradient(ellipse at 43% 48%, rgba(202, 221, 225, .2), transparent 42%),
    radial-gradient(ellipse at 70% 56%, rgba(255, 250, 230, .17), transparent 38%),
    linear-gradient(94deg, transparent 7%, rgba(210, 226, 230, .13) 39%, transparent 79%);
  filter: blur(24px);
  transform:
    translate3d(calc(var(--snow-mist-x, 0) * .34vw), calc(var(--snow-mist-y, 0) * .08vh), 0)
    rotate(-2deg)
    scaleX(1.08);
}

.premium-snow-story::after {
  left: -12vw;
  right: -12vw;
  top: 59vh;
  height: 28vh;
  opacity: .26;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 30% 48%, rgba(235, 242, 243, .2), transparent 40%),
    radial-gradient(ellipse at 62% 44%, rgba(179, 205, 213, .17), transparent 43%),
    linear-gradient(180deg, transparent 0%, rgba(4, 8, 9, .22) 68%, rgba(3, 5, 5, .48) 100%);
  filter: blur(30px);
  transform:
    translate3d(calc(var(--snow-mist-x, 0) * -.22vw), calc(var(--snow-mist-y, 0) * -.04vh), 0)
    rotate(1deg)
    scaleX(1.12);
}

.premium-snow-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 360ms ease;
}

html.premium-webgl-ready .premium-snow-webgl {
  opacity: 1;
}

html.premium-webgl-failed .premium-snow-webgl {
  opacity: 0;
}

.premium-snow-lightburst,
.premium-snow-ray {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.premium-snow-lightburst {
  left: -10vw;
  top: -14vh;
  z-index: 2;
  width: min(64vw, 820px);
  height: min(64vw, 820px);
  opacity: .62;
  background:
    radial-gradient(circle at 46% 44%, rgba(255, 235, 176, .74), rgba(255, 190, 96, .2) 20%, rgba(142, 190, 210, .12) 38%, transparent 66%);
  filter: blur(16px);
  transform: translate3d(calc(var(--snow-x, 0) * -.28vw), calc(var(--snow-y, 0) * -.2vh), 0);
}

.premium-snow-ray {
  z-index: 3;
  width: 18vw;
  height: 150vh;
  top: -30vh;
  opacity: .27;
  background: linear-gradient(180deg, rgba(255, 238, 186, .48), rgba(166, 216, 230, .08) 46%, transparent 100%);
  filter: blur(18px);
  transform-origin: 50% 0;
}

.premium-snow-ray-a {
  left: 8vw;
  transform: rotate(18deg) translate3d(calc(var(--snow-x, 0) * -.18vw), 0, 0);
}

.premium-snow-ray-b {
  left: 28vw;
  width: 12vw;
  opacity: .16;
  transform: rotate(10deg) translate3d(calc(var(--snow-x, 0) * -.1vw), 0, 0);
}

.premium-snow-ray-c {
  left: 58vw;
  width: 10vw;
  opacity: .1;
  transform: rotate(-13deg) translate3d(calc(var(--snow-x, 0) * .08vw), 0, 0);
}

.premium-snow-cloud {
  position: absolute;
  left: -18vw;
  right: -18vw;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
}

.premium-snow-cloud::before,
.premium-snow-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.premium-snow-cloud-a {
  top: 39vh;
  z-index: 7;
  height: 29vh;
  opacity: .44;
  filter: blur(24px);
  background:
    radial-gradient(ellipse at 12% 65%, rgba(234, 243, 244, .46), transparent 31%),
    radial-gradient(ellipse at 35% 43%, rgba(211, 229, 233, .38), transparent 34%),
    radial-gradient(ellipse at 61% 58%, rgba(240, 246, 244, .42), transparent 32%),
    radial-gradient(ellipse at 86% 46%, rgba(167, 194, 203, .28), transparent 28%);
  transform:
    translate3d(calc(var(--snow-x, 0) * -.42vw), calc(var(--snow-y, 0) * .1vh), 0)
    rotate(-2deg)
    scaleX(1.06);
}

.premium-snow-cloud-a::before {
  background:
    radial-gradient(ellipse at 24% 70%, rgba(255, 255, 255, .22), transparent 24%),
    radial-gradient(ellipse at 54% 50%, rgba(255, 247, 224, .22), transparent 31%),
    radial-gradient(ellipse at 76% 38%, rgba(216, 235, 239, .18), transparent 25%);
}

.premium-snow-cloud-a::after {
  opacity: .56;
  background:
    radial-gradient(ellipse at 34% 68%, rgba(8, 15, 17, .28), transparent 34%),
    radial-gradient(ellipse at 68% 72%, rgba(8, 15, 17, .2), transparent 28%);
}

.premium-snow-cloud-b {
  top: 54vh;
  z-index: 7;
  height: 23vh;
  opacity: .38;
  filter: blur(28px);
  background:
    radial-gradient(ellipse at 8% 48%, rgba(187, 212, 220, .28), transparent 31%),
    radial-gradient(ellipse at 31% 61%, rgba(250, 252, 248, .34), transparent 36%),
    radial-gradient(ellipse at 55% 43%, rgba(205, 224, 228, .34), transparent 33%),
    radial-gradient(ellipse at 78% 57%, rgba(255, 248, 225, .24), transparent 28%);
  transform:
    translate3d(calc(var(--snow-mist-x, 0) * .52vw), calc(var(--snow-mist-y, 0) * -.18vh), 0)
    rotate(1.5deg)
    scaleX(1.12);
}

.premium-snow-cloud-b::before {
  background:
    radial-gradient(ellipse at 23% 42%, rgba(255, 255, 255, .18), transparent 24%),
    radial-gradient(ellipse at 68% 56%, rgba(216, 235, 239, .16), transparent 28%);
}

.premium-snow-cloud-c {
  top: 24vh;
  z-index: 2;
  height: 16vh;
  opacity: .26;
  filter: blur(24px);
  background:
    radial-gradient(ellipse at 24% 58%, rgba(187, 213, 220, .24), transparent 38%),
    radial-gradient(ellipse at 58% 42%, rgba(255, 246, 220, .24), transparent 40%),
    radial-gradient(ellipse at 82% 52%, rgba(224, 239, 240, .22), transparent 36%);
  transform:
    translate3d(calc(var(--snow-x, 0) * .22vw), calc(var(--snow-y, 0) * -.08vh), 0)
    rotate(-5deg)
    scaleX(1.18);
}

.premium-snow-viewport {
  position: absolute;
  inset: -10vmax;
  z-index: 0;
  overflow: hidden;
  perspective: 980px;
  perspective-origin: 58% 48%;
  opacity: 1;
  transition: opacity 260ms ease;
}

.premium-snow-camera {
  position: absolute;
  inset: -8vmax;
  transform:
    translate3d(calc(var(--snow-x, 0) * 1vw), calc(var(--snow-y, 0) * 1vh), calc(var(--snow-camera-z, 0) * 1px))
    rotateX(calc(var(--snow-camera-rotate-x, 0) * 1deg))
    rotateY(calc(var(--snow-camera-rotate-y, 0) * 1deg))
    scale(var(--snow-world-scale, 1.06));
  transform-origin: 58% 52%;
  transform-style: preserve-3d;
}

.premium-snow-plane {
  position: absolute;
  inset: -12vmax;
  background-image: none;
  background-position: center center;
  background-size: cover;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  pointer-events: none;
}

.premium-snow-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .08), transparent 62%);
  opacity: .28;
  mix-blend-mode: screen;
}

.premium-snow-sky {
  clip-path: polygon(0 0, 100% 0, 100% 43%, 70% 46%, 46% 36%, 21% 49%, 0 52%);
  opacity: .94;
  filter: brightness(.72) contrast(1.08) saturate(.95);
  transform: translateZ(-280px) scale(1.18);
}

.premium-snow-back {
  clip-path: polygon(0 48%, 17% 39%, 32% 41%, 50% 24%, 65% 15%, 78% 30%, 100% 41%, 100% 78%, 0 82%);
  opacity: .78;
  filter: brightness(.62) contrast(1.16) saturate(.96);
  transform: translateZ(-92px) translateX(-2vw) scale(1.08);
}

.premium-snow-core {
  clip-path: polygon(34% 47%, 45% 32%, 55% 25%, 65% 13%, 80% 31%, 93% 58%, 78% 80%, 48% 82%, 25% 67%);
  filter: brightness(.92) contrast(1.18) saturate(1.02);
  transform: translateZ(126px) scale(1.01);
}

.premium-snow-ridge {
  clip-path: polygon(0 65%, 22% 58%, 42% 63%, 61% 55%, 76% 60%, 100% 52%, 100% 100%, 0 100%);
  opacity: .92;
  filter: brightness(.48) contrast(1.24) saturate(.9);
  transform: translateZ(238px) translateY(2vh) scale(1.07);
}

.premium-snow-foreground {
  clip-path: polygon(0 82%, 18% 72%, 38% 78%, 61% 69%, 82% 74%, 100% 66%, 100% 100%, 0 100%);
  opacity: .64;
  filter: brightness(.34) contrast(1.35) saturate(.86);
  transform: translateZ(360px) translateY(5vh) scale(1.16);
}

.premium-snow-orbit-grid {
  position: absolute;
  left: 7vw;
  right: 8vw;
  bottom: -26vh;
  z-index: 0;
  height: 56vh;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(157, 221, 225, .18) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(157, 221, 225, .14) 0 1px, transparent 1px 100%),
    radial-gradient(ellipse at 50% 8%, rgba(198, 170, 112, .2), transparent 58%);
  background-size: 58px 58px, 58px 58px, auto;
  transform:
    perspective(900px)
    rotateX(68deg)
    rotateZ(calc(var(--snow-camera-rotate-y, 0) * -.32deg))
    translate3d(calc(var(--snow-x, 0) * -.45vw), 0, 0);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
}

.premium-snow-bg,
.premium-snow-bg::before,
.premium-snow-mist,
.premium-snow-vignette,
.premium-snow-film {
  position: absolute;
  pointer-events: none;
}

.premium-snow-bg {
  inset: -14vmax;
  background-image: none;
  background-position: center center;
  background-size: cover;
  transform: translate3d(calc(var(--snow-x, 0) * 1vw), calc(var(--snow-y, 0) * 1vh), 0) scale(var(--snow-world-scale, 1.06));
  transform-origin: 57% 54%;
}

.premium-snow-bg::before {
  content: "";
  inset: 0;
  background: inherit;
  background-position: inherit;
  background-size: inherit;
  clip-path: polygon(0 44%, 100% 35%, 100% 100%, 0 100%);
  filter: blur(8px) saturate(1.08);
  opacity: .28;
  mix-blend-mode: screen;
  transform: translate3d(-3vw, 5vh, 0) scale(1.08);
}

.premium-snow-mist {
  inset: -18vh -18vw;
  z-index: 4;
  opacity: .5;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--snow-mist-x, 0) * 1vw), calc(var(--snow-mist-y, 0) * 1vh), 0) scale(var(--snow-mist-scale, 1.02));
}

.premium-snow-mist-a {
  background:
    radial-gradient(ellipse at 20% 72%, rgba(244, 248, 250, .26), transparent 42%),
    radial-gradient(ellipse at 66% 58%, rgba(207, 225, 229, .22), transparent 45%),
    linear-gradient(95deg, transparent 18%, rgba(210, 225, 229, .12) 42%, transparent 72%);
  filter: blur(16px);
}

.premium-snow-mist-b {
  opacity: .34;
  background:
    radial-gradient(ellipse at 55% 34%, rgba(255, 255, 255, .16), transparent 38%),
    linear-gradient(180deg, rgba(157, 221, 225, .1), transparent 48%);
  filter: blur(22px);
  transform: translate3d(calc(var(--snow-mist-x, 0) * -.7vw), calc(var(--snow-mist-y, 0) * -.55vh), 0) scale(1.12);
}

.premium-snow-vignette {
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(3, 6, 7, .5), rgba(3, 6, 7, .05) 34%, rgba(3, 6, 7, .22) 68%, rgba(3, 6, 7, .58)),
    linear-gradient(180deg, rgba(2, 4, 5, .22), transparent 38%, rgba(2, 4, 5, .62)),
    radial-gradient(circle at 72% 40%, transparent 0 24%, rgba(3, 6, 7, .2) 67%);
}

.premium-snow-film {
  inset: 0;
  z-index: 6;
  opacity: .11;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px);
  background-size: 25vw 100%, auto;
}

.premium-snow-caption {
  position: absolute;
  right: clamp(44px, 7vw, 110px);
  top: clamp(118px, 21vh, 186px);
  z-index: 11;
  width: min(430px, calc(100vw - 56px));
  padding: 20px 0 0 24px;
  border-left: 1px solid rgba(244, 239, 230, .22);
  color: rgba(244, 239, 230, .68);
  pointer-events: none;
  opacity: var(--snow-caption-opacity, .92);
  transform: translate3d(0, calc(var(--snow-caption-y, 0) * 1px), 0);
}

.premium-snow-caption::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, rgba(198, 170, 112, .9), transparent);
}

.premium-snow-kicker {
  display: block;
  color: rgba(198, 170, 112, .88);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.premium-snow-caption strong {
  display: block;
  margin-top: 16px;
  color: rgba(244, 239, 230, .94);
  font-family: var(--premium-serif);
  font-size: 2.7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.premium-snow-caption p {
  margin: 16px 0 0;
  color: rgba(244, 239, 230, .62);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .08em;
}

.premium-snow-progress {
  position: absolute;
  right: clamp(32px, 5vw, 76px);
  bottom: clamp(30px, 7vh, 74px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}

.premium-snow-progress span {
  width: 28px;
  height: 1px;
  background: rgba(244, 239, 230, .24);
  transform: scaleX(.48);
  transform-origin: center;
  transition: transform 240ms var(--premium-ease-enter), background-color 240ms ease;
}

.premium-snow-progress span.is-active {
  background: rgba(198, 170, 112, .82);
  transform: scaleX(1);
}

html.premium-snow-active main > .fixed.inset-0.overflow-hidden > .relative.z-10 > .text-center {
  opacity: var(--snow-title-opacity, 1) !important;
  transform: translate3d(0, calc(var(--snow-title-y, 0) * 1px), 0) !important;
}

html.premium-snow-active main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] {
  opacity: var(--snow-index-opacity, 1) !important;
  transform: translate3d(0, calc(var(--snow-index-y, 0) * 1px), 0) !important;
}

html.premium-index-gone main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] {
  pointer-events: none !important;
}

/* Gallery */
html.premium-gallery .premium-lightfield,
html.premium-gallery .premium-render-stack,
html.premium-gallery .premium-frame-lines {
  z-index: 0;
}

html.premium-gallery .premium-lightfield {
  opacity: .12;
  background:
    linear-gradient(105deg, transparent 0 13%, rgba(157, 221, 225, .08) 13.3%, transparent 15.2%, transparent 84%, rgba(198, 170, 112, .07) 85%, transparent 87%),
    linear-gradient(180deg, transparent, rgba(198, 170, 112, .035) 48%, transparent);
}

html.premium-gallery .premium-render-stack {
  opacity: .18;
}

html.premium-gallery .premium-frame-lines {
  inset: 32px;
  opacity: .1;
  border-color: rgba(244, 239, 230, .045);
}

html.premium-gallery .premium-frame-lines::before,
html.premium-gallery .premium-frame-lines::after {
  display: none;
}

html.premium-gallery .premium-brand-mark {
  display: none;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 26%, rgba(157, 221, 225, .08), transparent 38%),
    radial-gradient(ellipse at 82% 12%, rgba(198, 170, 112, .08), transparent 34%),
    linear-gradient(90deg, rgba(244, 239, 230, .02) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #050504 0%, #080807 42%, #040504 100%) !important;
  background-size: auto, auto, 132px 132px, auto !important;
  scroll-behavior: smooth;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 4, .18), transparent 34%, rgba(5, 5, 4, .56)),
    radial-gradient(ellipse at 50% 44%, rgba(244, 239, 230, .045), transparent 54%);
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .relative.h-\[50vh\],
html.premium-ui main > .fixed.inset-0.overflow-y-auto > .relative {
  min-height: clamp(340px, 48vh, 520px) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .relative img {
  filter: brightness(.54) contrast(1.08) saturate(.92) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto h1 {
  overflow: visible !important;
  padding-bottom: .09em !important;
  color: rgba(244, 239, 230, .94) !important;
  font-family: var(--premium-serif) !important;
  font-size: 5rem !important;
  font-weight: 400 !important;
  line-height: .96 !important;
  letter-spacing: .12em !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto h1 + div,
html.premium-ui main > .fixed.inset-0.overflow-y-auto h1 ~ div {
  background: linear-gradient(90deg, rgba(198, 170, 112, .75), rgba(244, 239, 230, .15)) !important;
}

.premium-gallery-issue {
  position: absolute;
  right: clamp(22px, 4vw, 54px);
  bottom: clamp(24px, 6vh, 62px);
  z-index: 14;
  width: min(34vw, 320px);
  padding: 16px 0 0;
  border-top: 1px solid rgba(244, 239, 230, .2);
  color: rgba(244, 239, 230, .54);
  text-align: right;
}

.premium-gallery-issue strong {
  display: block;
  color: rgba(244, 239, 230, .92);
  font-family: var(--premium-serif);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: .9;
  letter-spacing: .05em;
}

.premium-gallery-issue span {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky {
  top: 0 !important;
  z-index: 24 !important;
  padding: 16px clamp(16px, 3vw, 42px) 18px !important;
  border-top: 1px solid rgba(244, 239, 230, .055) !important;
  border-bottom: 1px solid rgba(244, 239, 230, .1) !important;
  background:
    linear-gradient(180deg, rgba(6, 6, 5, .92), rgba(7, 8, 7, .78)),
    radial-gradient(ellipse at 50% 0, rgba(198, 170, 112, .075), transparent 58%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  box-shadow: 0 22px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky > div {
  max-width: min(100%, 1040px);
  margin-inline: auto;
  gap: 7px !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky button {
  min-height: 36px !important;
  padding: 8px 15px !important;
  border: 1px solid rgba(244, 239, 230, .12) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(198, 170, 112, .13), transparent 34%),
    rgba(244, 239, 230, .022) !important;
  color: rgba(244, 239, 230, .6) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  transition: transform 170ms var(--premium-ease-enter), border-color 170ms ease, background-color 170ms ease, color 170ms ease, box-shadow 170ms ease !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky button:hover,
html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky button[aria-pressed="true"] {
  transform: translateY(-1px) !important;
  border-color: rgba(198, 170, 112, .45) !important;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(198, 170, 112, .22), transparent 38%),
    rgba(198, 170, 112, .075) !important;
  color: rgba(244, 239, 230, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 28px rgba(0, 0, 0, .26) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto > div[class*="px-4"] {
  padding: clamp(24px, 4vw, 54px) clamp(16px, 4vw, 48px) 96px !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] {
  display: grid !important;
  position: static !important;
  height: auto !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
  columns: auto !important;
  column-count: auto !important;
}

@media (min-width: 640px) {
  html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button,
html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button:nth-child(n) {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(244, 239, 230, .105) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(244, 239, 230, .035), rgba(244, 239, 230, .014)),
    rgba(6, 7, 7, .5) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 280ms var(--premium-ease-enter), border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease !important;
}

html.premium-ready main > .fixed.inset-0.overflow-y-auto [data-premium-card] {
  animation: premium-card-in 680ms var(--premium-ease-enter) both;
  animation-delay: var(--premium-delay, 0ms);
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button > .relative,
html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button:nth-child(n) > .relative {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button > .relative::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 34%, rgba(0, 0, 0, .64)),
    radial-gradient(ellipse at 18% 12%, rgba(244, 239, 230, .11), transparent 34%);
  opacity: .82;
  transition: opacity 360ms ease;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1) !important;
  filter: saturate(.98) contrast(1.08) brightness(.84) !important;
  transition: transform 760ms var(--premium-ease-move), filter 360ms ease !important;
  will-change: transform;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .42;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(0, 0, 0, .7)),
    linear-gradient(115deg, transparent, rgba(198, 170, 112, .12) 58%, transparent 72%);
  transition: opacity 280ms ease;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button h3 {
  position: relative;
  z-index: 4;
  font-family: var(--premium-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: .05em !important;
  color: rgba(244, 239, 230, .9) !important;
  text-shadow: 0 12px 28px rgba(0, 0, 0, .52);
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button h3 + div {
  position: relative;
  z-index: 4;
  color: rgba(244, 239, 230, .5) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button > .relative > .absolute.bottom-0 {
  z-index: 4 !important;
  transform: translateY(0) !important;
  opacity: .92 !important;
  transition: opacity 320ms ease, transform 320ms var(--premium-ease-enter) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(198, 170, 112, .45) !important;
  background: rgba(244, 239, 230, .045) !important;
  box-shadow: 0 28px 74px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button:hover::before {
  opacity: 1;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto [class*="xl:grid-cols-4"] > button:hover img {
  transform: scale(1.045) !important;
  filter: saturate(1.04) contrast(1.1) brightness(.92) !important;
}

html.premium-ui main > .fixed.inset-0.overflow-y-auto footer {
  border-color: rgba(244, 239, 230, .1) !important;
}

/* Modal and about surfaces */
html.premium-ui [role="dialog"] {
  background: rgba(3, 3, 3, .88) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

html.premium-ui [role="dialog"] button,
html.premium-ui main > .fixed.inset-0.overflow-y-auto.z-40 button {
  border-radius: 0 !important;
}

html.premium-ui [role="dialog"] h2,
html.premium-ui main > .fixed.inset-0.overflow-y-auto.z-40 h1 {
  font-family: var(--premium-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
}

/* Motion */
@keyframes premium-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.premium-ui button:focus-visible,
html.premium-ui a:focus-visible {
  outline: 1px solid rgba(198, 170, 112, .8) !important;
  outline-offset: 3px !important;
}

@media (max-width: 900px) {
  .premium-frame-lines {
    inset: 12px;
  }

  .premium-frame-lines::after,
  .premium-render-stack,
  .premium-brand-mark {
    display: none;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 {
    width: min(100vw - 28px, 620px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: end !important;
    gap: 28px !important;
    padding: 84px 0 28px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1 {
    font-size: 4.65rem !important;
    line-height: .96 !important;
    letter-spacing: .035em !important;
  }

  .premium-snow-scroll-space {
    height: 360svh;
  }

  .premium-snow-caption {
    left: 14px;
    right: auto;
    top: 82px;
    width: min(330px, calc(100vw - 34px));
    padding: 12px 0 0 15px;
  }

  .premium-snow-caption strong {
    font-size: 1.48rem;
  }

  .premium-snow-caption p {
    font-size: 11px;
    line-height: 1.65;
  }

  .premium-snow-progress {
    right: 18px;
    bottom: 18px;
  }

  .premium-snow-progress span {
    width: 20px;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1::after {
    width: 72vw;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1 + p {
    margin-top: -20px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button {
    min-height: 56px !important;
    grid-template-columns: 34px 34px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 > [class*="max-w-4xl"] > button > div:nth-child(2) {
    width: 31px !important;
    height: 31px !important;
  }

  .premium-gallery-issue {
    display: none;
  }

  html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky {
    padding: 10px 12px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-y-auto > .sticky button {
    min-height: 31px !important;
    padding: 7px 10px !important;
    font-size: 9px !important;
    letter-spacing: .16em !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  html.premium-ui main > .fixed.inset-0.overflow-hidden h1 {
    font-size: 6rem !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-y-auto h1 {
    font-size: 4.3rem !important;
  }
}

@media (max-width: 520px) {
  html.premium-ui main > .fixed.inset-0.overflow-hidden > .relative.z-10 {
    width: min(100vw - 34px, 520px) !important;
    padding: 78px 3px 28px !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1 {
    max-width: calc(100vw - 36px) !important;
    padding-left: 7px !important;
    font-size: 3.05rem !important;
    letter-spacing: .025em !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1::before {
    margin-left: 1px;
    font-size: .58rem;
    letter-spacing: .25em;
  }

  html.premium-ui main > .fixed.inset-0.overflow-hidden h1 .premium-title-small {
    font-size: .45em;
  }

  .premium-snow-webgl {
    transform: translate3d(-6vw, -8vh, 0) scale(1.16);
    transform-origin: 52% 42%;
  }

  .premium-snow-story::before {
    top: 36vh;
    opacity: .42;
  }

  .premium-snow-story::after {
    top: 55vh;
    opacity: .32;
  }

  .premium-admin-hotspot {
    width: 0;
    height: 0;
  }

  html.premium-ui main > button.fixed.bottom-0.right-0.opacity-0,
  html.premium-ui main button.fixed.bottom-0.right-0.opacity-0 {
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  html.premium-ui main > .fixed.inset-0.overflow-y-auto h1 {
    font-size: 3rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.premium-ui *,
  html.premium-ui *::before,
  html.premium-ui *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}