/* Preserve the architectural scenes while keeping their text readable. */
.open-letter-scene {
  min-height: 100svh;
  padding: 88px 24px 48px;
}
.open-letter-head { margin-bottom: 0; }
.envelope-stage { width: min(520px, calc(100vw - 48px)); perspective: none; }
.letter-animated .envelope-stage { margin-top: clamp(96px, 18vh, 164px); }
.paper-letter-card { min-height: 270px; padding: 24px 28px; }
.paper-letter-card h4 { font-size: 18px; line-height: 1.3; }
.paper-letter-card p { font-size: 15px; line-height: 1.6; }
.corner-cube { translate: var(--pointer-x, 0px) var(--pointer-y, 0px); }

/* Reading remains possible before scripts load or if animation is unavailable. */
.open-letter-scene:not(.letter-animated) {
  min-height: auto;
  padding-block: 96px 72px;
  gap: 36px;
}
.open-letter-scene:not(.letter-animated) .open-letter-title {
  color: #eadfc9;
  -webkit-text-stroke: 0;
}
.open-letter-scene:not(.letter-animated) .open-letter-title-fill { display: none; }
.open-letter-scene:not(.letter-animated) .envelope-stage {
  height: auto;
  aspect-ratio: auto;
  padding-bottom: 56px;
  margin-block: 0;
}
.open-letter-scene:not(.letter-animated) .envelope-paper-track {
  position: relative;
  inset: auto;
  width: 92%;
  margin-inline: auto;
  clip-path: none;
  z-index: 7;
}
.open-letter-scene:not(.letter-animated) .paper-letter-card {
  min-height: 0;
  transform: none;
}
.open-letter-scene:not(.letter-animated) .envelope-top-flap { display: none; }
.open-letter-scene:not(.letter-animated) .envelope-back,
.open-letter-scene:not(.letter-animated) .envelope-front-pocket {
  inset: auto 0 0;
  height: 90px;
}

.marquee { position: relative; }
.marquee-track { animation-duration: 28s; animation-play-state: paused; }
.marquee.ribbon-ready .marquee-track { animation-play-state: running; }
.marquee-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  min-width: 84px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--text);
  font: 600 12px var(--font-sans);
  cursor: pointer;
}
.marquee-toggle:hover { background: var(--bg-elev-2); }
.marquee-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.marquee-toggle:disabled { cursor: default; }
.marquee.is-paused .marquee-track,
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.process-step.stack-static { position: relative; top: auto; transform: none !important; opacity: 1 !important; }

@media (max-width: 768px) {
  .open-letter-scene { padding: 88px 16px 40px; gap: 0; }
  .envelope-stage { width: min(360px, calc(100vw - 40px)); }
  .letter-animated .envelope-stage { margin-top: clamp(96px, 17vh, 136px); }
  .paper-letter-card { min-height: 250px; padding: 18px 20px; }
  .paper-letter-card h4 { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
  .paper-letter-card p { font-size: 14px; line-height: 1.6; }
  .open-letter-scene:not(.letter-animated) { gap: 28px; }
  .marquee-toggle { min-width: 78px; right: 8px; }
}
@media (max-height: 620px) {
  .process-step { position: relative; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .process-step { position: relative; top: auto; transform: none !important; opacity: 1 !important; }
  .corner-cube { translate: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}