/* A tighter reading rhythm; existing typography, surfaces and image framing stay intact. */
@media (min-width: 960px) {
  .responsive-version--desktop {
    --section-space: clamp(4.5rem, 6vw, 6rem);
    --heading-space: clamp(2.5rem, 4vw, 3.5rem);
  }
  .responsive-version--desktop .section { padding-block: var(--section-space); }
  .responsive-version--desktop .section-head { margin-bottom: var(--heading-space); }
  .responsive-version--desktop .hero__kicker { margin-bottom: 1.6rem; }
  .responsive-version--desktop .hero__lede { margin-top: 1.75rem; }
  .responsive-version--desktop .hero__cta-row { margin-top: 2.5rem; }
  .responsive-version--desktop .section.flip-guide {
    padding-top: var(--heading-space);
    padding-bottom: clamp(4rem, 6vw, 5.5rem);
  }
  .responsive-version--desktop .flip-guide__grid { margin-top: var(--heading-space); }
  .responsive-version--desktop .starting-hard--desktop { padding-block: var(--section-space); }
  .responsive-version--desktop .mode-row + .mode-row { margin-top: clamp(3.5rem, 5vw, 5rem); }
  #desktop-moments .section-head { margin-bottom: 0; }
  .responsive-version--desktop .moments-gallery { margin-top: var(--heading-space); }

  .object-page .responsive-version--desktop .hero__copy { justify-content: center; gap: 1.75rem; }
  .object-page .responsive-version--desktop .hero__title { margin-top: 1.6rem; }
  .object-page .responsive-version--desktop .hero__lede { margin-top: 0; }
  .object-page .responsive-version--desktop .hero__measure { margin-top: 1.5rem; }
  .object-page .responsive-version--desktop .hero__cta-row { margin-top: 2rem; }
  .object-page .responsive-version--desktop .object-timeless { padding-block: var(--section-space); }
  .object-page .responsive-version--desktop .object-crafted { padding-block: clamp(4rem, 5vw, 5rem); }
  .object-page .responsive-version--desktop .object-crafted__wrap { row-gap: 2.5rem; }

  .story-page .story-cover__heading { padding-block: clamp(3rem, 5vw, 4.5rem); }
  .story-page :is(.story-beginning, .story-evolved) { padding-block: clamp(3.5rem, 5vw, 5rem); }
  .story-page .story-beginning__prose p { margin-bottom: 1rem; }
  .story-page .story-beginning__prose .story-beginning__closing { margin-top: 1.5rem; }
  .story-page .story-idea p { margin-top: 1rem; }
  .story-page .story-idea h2 + p { margin-top: 1.75rem; }
  .story-page .story-evolved .story-evolved__image { margin-top: clamp(3rem, 4.5vw, 4rem); }

  .responsive-version--desktop .launch-signup { padding-block: var(--section-space); }
  .responsive-version--desktop .launch-signup__form { margin-top: 2rem; }
}

/* Keep the film visible once playback starts while retaining a clear pause control. */
.flip-guide__media .film-toggle[aria-pressed="true"] {
  top: auto;
  right: 0.75rem;
  bottom: 0.75rem;
  left: auto;
  width: 2.75rem;
  height: 2.75rem;
  transform: none;
  background: rgba(34, 30, 31, 0.48);
  opacity: 0.78;
}

.flip-guide__media .film-toggle[aria-pressed="true"]:hover,
.flip-guide__media .film-toggle[aria-pressed="true"]:focus-visible {
  transform: scale(1.04);
  background: rgba(34, 30, 31, 0.72);
  opacity: 1;
}

.flip-guide__media .film-toggle[aria-pressed="true"]::before,
.flip-guide__media .film-toggle[aria-pressed="true"]::after {
  width: 0.25rem;
  height: 1.05rem;
}

.flip-guide__media .film-toggle[aria-pressed="true"]::before {
  transform: translate(-0.52rem, -50%);
}

.flip-guide__media .film-toggle[aria-pressed="true"]::after {
  transform: translate(0.27rem, -50%);
}

/* Both responsive layouts remain in the source; art direction keeps their eager
   hero requests on the same viewport-appropriate file instead of downloading two. */
.responsive-version--mobile .hero > picture { display: contents; }
.responsive-version--desktop :is(.hero__figure, .story-cover__image) > picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Extend only the desktop inner-page surfaces; keep all content in its existing grid.
   The clipped outer shadow paints to both viewport edges without horizontal overflow. */
@media (min-width: 960px) {
  .inner-page .responsive-version--desktop > .page > main > section,
  .inner-page .responsive-version--desktop > .page > footer {
    --section-surface: #f7f4ee;
    box-shadow: 0 0 0 100vmax var(--section-surface);
    clip-path: inset(0 -100vmax);
  }
  .inner-page .responsive-version--desktop > .page > main > :is(.object-timeless, .launch-signup) {
    --section-surface: #f4efe6;
  }
  .inner-page .responsive-version--desktop > .page > footer.colophon {
    --section-surface: #2c3828;
  }
}

/* Signup notes stay visually secondary and share one exact offer across the pages. */
body .responsive-version .launch-cta-note {
  display: block;
  margin-top: 0.75rem;
  color: var(--type-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
}
@media (max-width: 959.98px) {
  .responsive-version--mobile .story-launch-cta { margin-top: 2.1rem; }
  .responsive-version--mobile .story-launch-cta .inner-outline-cta { margin: 0; }
}
@media (min-width: 700px) and (max-width: 959.98px) {
  .responsive-version--mobile .story-launch-cta { width: min(30rem, 100%); margin-top: 2.6rem; }
  .responsive-version--mobile .object-intro .launch-cta-note { width: min(30rem, 100%); }
  .responsive-version--mobile .home-modes > .launch-cta-note { max-width: 36rem; margin-inline: auto; }
}
@media (min-width: 960px) {
  .responsive-version--desktop .modes-launch-cta {
    margin-top: var(--heading-space);
    text-align: center;
  }
  .object-page .responsive-version--desktop .hero__cta-row { flex-wrap: wrap; gap: 0.75rem 1rem; }
  .object-page .responsive-version--desktop .hero__cta-row .cta { flex: 0 0 auto; }
  .object-page .responsive-version--desktop .hero__cta-row .launch-cta-note {
    flex: 1 1 9rem;
    min-width: 0;
    margin: 0;
    text-align: left;
  }
  body .responsive-version--desktop .masthead__nav a[data-launch-modal] {
    border-color: #55624e;
    background-color: #55624e;
    color: #fff;
    text-decoration: none;
  }
  body .responsive-version--desktop .masthead__nav a[data-launch-modal]:focus-visible {
    outline: 2px solid #55624e;
    outline-offset: 3px;
  }
}

/* Only the script marks off-screen content pending; without JS everything stays visible. */
[data-reveal='pending'] { opacity: 0; transform: translateY(12px); }
[data-reveal='shown'] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .responsive-version *, .responsive-version *::before, .responsive-version *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Keep the floating CTA's requested gentle opacity-only transition. */
  .responsive-version .mobile-launch-cta { transition-duration: 280ms, 0s !important; }
}