.routine { background: #fbfaf8; color: #141414; min-height: 320svh; }
.routine__track { min-height: inherit; }
.routine__stage { align-content: start; box-sizing: border-box; display: grid; gap: clamp(52px, 6vw, 112px); grid-template-columns: minmax(480px, 600px) minmax(350px, 560px); height: 100svh; justify-content: start; margin: 0 auto; padding: clamp(104px, 12vh, 152px) var(--page-pad-x); position: sticky; top: 0; width: min(100%, 1420px); }
.routine__content { align-content: start; align-self: start; display: grid; gap: clamp(40px, 4vw, 64px); }
.routine__heading { margin: 0; }
.routine__heading h2 { font-family: var(--font-display); font-size: clamp(34px, 2.7vw, 50px); font-weight: 400; line-height: 1.06; margin: 0 0 18px; }
.routine__heading p { color: var(--color-text-muted); font-size: 15px; line-height: 1.45; margin: 0; max-width: 46ch; }
.routine__timeline { min-height: 122px; position: relative; }
.routine__controls { display: grid; gap: 12px; left: 0; position: absolute; top: 0; z-index: 2; }
.routine__controls button { background: transparent; border: 0; cursor: pointer; height: 32px; padding: 0; width: 32px; }
.routine__controls img { display: block; height: 100%; width: 100%; }
.routine__controls button:focus-visible { outline: 2px solid #a88455; outline-offset: 3px; }
.routine-moment { inset: 0; opacity: 0; pointer-events: none; position: absolute; transform: translateY(32px); transition: opacity 560ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1); }
.routine-moment.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.routine-moment.is-past { transform: translateY(-32px); }
.routine-moment.is-future { transform: translateY(32px); }
.routine-moment__copy { max-width: 40ch; padding-left: 104px; }
.routine-moment__mobile-media { display: none; }
.routine-moment__time { color: #161616; font-size: 16px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; }
.routine-moment__copy h3 { font-size: 18px; font-weight: 500; line-height: 1.2; margin: 0 0 10px; }
.routine-moment__copy p:not(.routine-moment__time) { color: var(--color-text-muted); font-size: 14px; line-height: 1.45; margin: 0; }
.routine__media-frame { align-self: start; aspect-ratio: var(--routine-media-ratio, 9 / 16); border-radius: 10px; height: min(66vh, 560px); max-width: 100%; overflow: hidden; position: relative; width: auto; }
.routine-stage__media { height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transform: scale(1.025); transition: opacity 700ms ease, transform 1000ms ease; width: 100%; }
.routine-stage__media.is-active { opacity: 1; transform: scale(1); }

@media (min-width: 1024px) {
  .routine__stage { grid-template-columns: minmax(0, 600px) minmax(0, 560px); height: max(460px, 85svh); padding-top: clamp(32px, 6vh, 72px); padding-bottom: clamp(24px, 4vh, 48px); }
  .routine__media-frame { height: min(66svh, 560px); margin-top: 64px; }
  .routine__media-frame:has(.routine-stage__media--through-night.is-active) { height: min(60svh, 510px); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .routine__content { gap: 24px; }
  .routine__heading h2 { font-size: 34px; }
  .routine__heading p { font-size: 14px; }
}

/* Large desktop windows with extra vertical room need a fuller composition. */
@media (min-width: 1024px) and (max-width: 1599px) and (min-height: 900px) and (max-aspect-ratio: 3/2) {
  .routine__stage { align-content: center; height: 100svh; }
  .routine__media-frame { height: auto; margin-top: 24px; width: min(100%, 555px); }
  .routine__media-frame:has(.routine-stage__media--through-night.is-active) { height: auto; }
}

@media (min-width: 1600px) and (min-height: 900px) and (max-aspect-ratio: 2/1) {
  .routine__stage { align-content: center; grid-template-columns: minmax(0, 600px) minmax(0, 700px); height: 100svh; width: min(100%, 1600px); }
  .routine__media-frame { height: min(72svh, 740px); margin-top: 24px; }
  .routine__media-frame:has(.routine-stage__media--through-night.is-active) { height: min(66svh, 660px); }
}

@media (max-width: 1023px) {
  .routine { min-height: 0; }
  .routine__track { min-height: 0; }
  .routine__stage { gap: 16px; grid-template-columns: minmax(0, 1fr); height: auto; padding-bottom: 32px; padding-top: 24px; position: relative; }
  .routine__content { gap: 16px; }
  /* The heading intentionally spans beyond the left timeline column on mobile. */
  .routine__heading { position: relative; width: min(72vw, 500px); z-index: 1; }
  .routine__heading h2 { font-size: 28px; max-width: none; }
  .routine__heading p { font-size: 11px; max-width: none; }
  .routine__timeline { margin-top: 16px; min-height: 112px; }
  .routine-moment__time { font-size: 12px; }
  .routine-moment__copy { padding-left: 40px; }
  .routine-moment__copy h3 { font-size: 14px; }
  .routine-moment__copy p:not(.routine-moment__time) { font-size: 11px; }
  .routine__media-frame { align-self: center; aspect-ratio: 1 / 1; height: auto; justify-self: end; margin-top: 0; width: min(calc(68vw - 12px), 516px); }


}

@media (max-width: 1023px) {
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) { grid-template-columns: minmax(0, 1fr); }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine__media-frame { display: none; }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine__timeline { display: grid; gap: 28px; min-height: 0; }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment { display: none; }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment.is-active { display: grid; gap: 16px; inset: auto; position: static; transform: none; }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment__copy { padding-left: 56px; width: 100%; }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment__mobile-media { display: block; margin-left: 56px; overflow: hidden; width: calc(100% - 56px); }
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment__mobile-media img,
  .routine__stage:is(.routine__stage--mobile-page-1, .routine__stage--mobile-page-2) .routine-moment__mobile-media video { aspect-ratio: 1.2; border-radius: 14px; display: block; height: auto; object-fit: cover; width: 100%; }
}

/* On phones, keep the next routine section visible as soon as it enters the
   viewport instead of leaving a blank gap while the desktop reveal runs. */
@media (max-width: 767px) {
  .routine [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
  }



}

@media (prefers-reduced-motion: reduce) {
  .routine-moment, .routine-stage__media { transition-duration: 1ms; }
}