:root {
  --bg: #fbf7f2;
  --browser-chrome: #fae3e0;
  --wave-tint-light: #fae3e0;
  --ink: #60473d;
  --ink-soft: #6f5b50;
  --accent: #e39a97;
  --olive: #bdbd92;
  --olive-strong: #b2b584;
  --peach: #efc7b0;
  --surface: rgba(253, 249, 244, 0.92);
  --shadow: rgba(196, 167, 149, 0.26);
  --player-space: 88px;
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Nunito Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  background: var(--browser-chrome);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(241, 213, 199, 0.54),
      transparent 18%
    ),
    radial-gradient(
      circle at 81% 16%,
      rgba(255, 255, 255, 0.86),
      transparent 22%
    ),
    radial-gradient(
      circle at 50% 78%,
      rgba(251, 229, 221, 0.58),
      transparent 22%
    ),
    linear-gradient(180deg, #fbf7f3 0%, #f9f3ee 100%);
}

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

.page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(244, 221, 210, 0.48),
      transparent 18%
    ),
    radial-gradient(
      circle at 84% 34%,
      rgba(255, 255, 255, 0.7),
      transparent 20%
    ),
    radial-gradient(
      circle at 50% 76%,
      rgba(250, 230, 223, 0.42),
      transparent 24%
    );
  filter: blur(34px);
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.page::before,
.page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--browser-chrome);
}

.page::before {
  top: 0;
  height: env(safe-area-inset-top, 0);
}

.page::after {
  bottom: 0;
  height: env(safe-area-inset-bottom, 0);
}

.page.is-loading {
  visibility: hidden;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(
      circle at 20% 22%,
      rgba(244, 221, 210, 0.52),
      transparent 18%
    ),
    radial-gradient(
      circle at 82% 28%,
      rgba(255, 255, 255, 0.8),
      transparent 20%
    ),
    linear-gradient(180deg, #fbf7f3 0%, #f9f3ee 100%);
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 260ms ease,
    visibility 260ms ease;
}

.loading-card {
  width: min(100%, 300px);
  max-width: min(100%, 280px);
  padding: 18px 22px 16px;
  border-radius: 22px;
  background: rgba(255, 252, 248, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 44px rgba(196, 167, 149, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
  backdrop-filter: blur(14px);
}

.loading-eyebrow,
.loading-title {
  margin: 0;
}

.loading-heart {
  width: 30px;
  margin: 0 auto 10px;
}

.loading-eyebrow {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(111, 91, 80, 0.62);
}

.loading-title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 5.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.loading-progress {
  width: 100%;
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(188, 188, 145, 0.22);
  box-shadow: inset 0 1px 2px rgba(111, 91, 80, 0.1);
}

.loading-progress-fill {
  display: block;
  width: calc(var(--loading-progress, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e6aaa7 0%, #b9bc88 100%);
  transition: width 220ms ease;
}

.loading-percent {
  margin: 8px 0 0;
  color: rgba(111, 91, 80, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soundtrack-player,
.hero,
.copy-block,
.photo-card,
.date-mark {
  position: relative;
  z-index: 2;
}