:root {
  --color-ink: #0f2a36;
  --color-teal: #195a7d;
  --color-peach: #fcbd84;
  --color-cream: #f7f1e8;
  --logo-fade-start: clamp(5.5rem, 15vh, 7rem);
  --logo-clear: clamp(11rem, 30vh, 14rem);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-ink);
  overflow: hidden;
}

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Video + overlay + logo: pinned to the viewport, never scrolls */
.hero-fixed {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15, 42, 54, 0.6) 0%, rgba(15, 42, 54, 0.35) 45%, rgba(15, 42, 54, 0.65) 100%);
}

/* Logo: its own fixed layer, stacked above the scrolling text
   so the letter always fades out before it, never over it. */
.hero__logo {
  position: fixed;
  top: clamp(1.25rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: clamp(80px, 18vw, 150px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}

/* Text: its own fixed, independently-scrolling layer.
   The video/overlay/logo layer and the sound button never move.
   Masked at the top so the letter fades to nothing as it nears
   the logo instead of scrolling over it or clipping abruptly. */
.hero__content {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  justify-content: center;
  padding: var(--logo-clear) 1.5rem 6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--logo-fade-start), black var(--logo-clear));
  mask-image: linear-gradient(to bottom, transparent 0, transparent var(--logo-fade-start), black var(--logo-clear));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero__letter {
  max-width: 38rem;
  width: 100%;
  margin: auto 0;
  color: var(--color-cream);
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
  text-align: left;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__letter p {
  margin: 0 0 1.2em;
}

.hero__letter p:last-child {
  margin-bottom: 0;
}

.hero__greeting {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
}

.hero__signoff {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  text-align: center;
}

/* YouTube background-audio player: kept in the DOM but visually hidden */
.yt-audio {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.sound-toggle {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(247, 241, 232, 0.35);
  border-radius: 50%;
  background: rgba(15, 42, 54, 0.55);
  backdrop-filter: blur(6px);
  color: var(--color-cream);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sound-toggle:hover {
  background: rgba(15, 42, 54, 0.75);
}

.sound-toggle:active {
  transform: scale(0.94);
}

.sound-toggle:disabled {
  opacity: 0.5;
  cursor: default;
}

.sound-toggle .icon {
  display: none;
}

.sound-toggle.is-muted .icon-muted,
.sound-toggle:not(.is-muted) .icon-unmuted {
  display: block;
}

/* Mobile phones: bigger, more legible letter text */
@media (max-width: 600px) {
  :root {
    --logo-fade-start: clamp(5.5rem, 16vh, 7rem);
    --logo-clear: clamp(11rem, 32vh, 13.5rem);
  }

  .hero__content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero__letter {
    font-size: 1.2rem;
    line-height: 1.75;
  }

  .hero__greeting {
    font-size: 1.55rem;
  }

  .hero__signoff {
    font-size: 1.35rem;
  }
}