/* Build 739: one calm alignment system for the complete Memory Capsule. */
html body .app-shell .full-memory-capsule,
html body main.app-shell .full-memory-capsule {
  --capsule-content-width: 680px;
  box-sizing: border-box !important;
}

html body .app-shell .full-memory-capsule *,
html body main.app-shell .full-memory-capsule * {
  box-sizing: border-box;
}

/* The cover, title, and body now sit on the same visual axis. */
html body .app-shell .full-memory-capsule .memory-capsule-title-block,
html body main.app-shell .full-memory-capsule .memory-capsule-title-block {
  width: min(100%, var(--capsule-content-width)) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  gap: 8px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-title-block h2,
html body main.app-shell .full-memory-capsule .memory-capsule-title-block h2 {
  max-width: 100% !important;
  font-size: clamp(1.9rem, 5.2vw, 3.25rem) !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-context,
html body main.app-shell .full-memory-capsule .memory-capsule-context {
  min-height: 0 !important;
}

/* Date, place, and people remain useful without the decorative Seal label. */
html body .app-shell .full-memory-capsule .memory-capsule-memory-seal,
html body main.app-shell .full-memory-capsule .memory-capsule-memory-seal {
  display: block !important;
  width: 100% !important;
  max-width: 60ch !important;
  color: rgba(246, 255, 252, 0.82) !important;
  font-size: clamp(0.72rem, 1.7vw, 0.82rem) !important;
  font-weight: 680 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-body,
html body main.app-shell .full-memory-capsule .memory-capsule-body {
  width: min(100%, calc(var(--capsule-content-width) + 68px)) !important;
  margin-inline: auto !important;
  padding-inline: clamp(22px, 4vw, 34px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-inside,
html body main.app-shell .full-memory-capsule .memory-capsule-inside {
  width: 100% !important;
  min-width: 0 !important;
  gap: 14px !important;
  padding-top: clamp(24px, 4vw, 34px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-inside-heading,
html body main.app-shell .full-memory-capsule .memory-capsule-inside-heading {
  position: relative !important;
  width: 100% !important;
  margin: 0 auto 2px !important;
  padding: 13px 0 14px !important;
  gap: 4px !important;
  justify-items: start !important;
  text-align: left !important;
  border-top: 1px solid rgba(19, 112, 135, 0.08) !important;
  border-bottom: 1px solid rgba(16, 117, 110, 0.08) !important;
  background: linear-gradient(
    90deg,
    rgba(222, 241, 248, 0.66) 0%,
    rgba(232, 248, 242, 0.34) 54%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-inside-heading::before,
html body main.app-shell .full-memory-capsule .memory-capsule-inside-heading::before {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 3px !important;
  margin: 0 0 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #1689b9 0%, #22b889 100%) !important;
  box-shadow: 0 4px 12px rgba(18, 143, 143, 0.14) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-inside-heading > span,
html body main.app-shell .full-memory-capsule .memory-capsule-inside-heading > span {
  color: #0b756f !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.16em !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-inside-heading h3,
html body main.app-shell .full-memory-capsule .memory-capsule-inside-heading h3 {
  color: #173f4b !important;
  font-family: inherit !important;
  font-size: clamp(0.96rem, 1.8vw, 1.08rem) !important;
  font-weight: 720 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.28 !important;
}

html body .app-shell .full-memory-capsule :is(.memory-capsule-inside-card, .memory-capsule-video-shelf, .memory-capsule-story),
html body main.app-shell .full-memory-capsule :is(.memory-capsule-inside-card, .memory-capsule-video-shelf, .memory-capsule-story) {
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

/* The story belongs to the content column; it no longer needs a floating rail. */
html body .app-shell .full-memory-capsule .memory-capsule-story,
html body main.app-shell .full-memory-capsule .memory-capsule-story {
  padding: clamp(20px, 3vw, 27px) 0 !important;
  border-top: 1px solid rgba(7, 63, 82, 0.08) !important;
  border-bottom: 1px solid rgba(7, 63, 82, 0.08) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story::before,
html body main.app-shell .full-memory-capsule .memory-capsule-story::before {
  display: none !important;
  content: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-story p,
html body main.app-shell .full-memory-capsule .memory-capsule-story p {
  max-width: 62ch !important;
  margin: 8px 0 0 !important;
}

/* Every primary action has equal weight and a shared baseline. */
html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
html body .app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
html body main.app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more,
html body main.app-shell .full-memory-capsule .memory-capsule-more,
html body .app-shell .full-memory-capsule .memory-capsule-dock-action,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-more-action,
html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 720px) {
  html body .app-shell .full-memory-capsule .memory-capsule-topbar,
  html body main.app-shell .full-memory-capsule .memory-capsule-topbar {
    padding: 12px 14px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-brand,
  html body main.app-shell .full-memory-capsule .memory-capsule-brand {
    gap: 6px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-privacy,
  html body main.app-shell .full-memory-capsule .memory-capsule-privacy {
    padding-left: 6px !important;
    font-size: 0.55rem !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-hero {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-body,
  html body main.app-shell .full-memory-capsule .memory-capsule-body {
    padding-inline: 18px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-inside,
  html body main.app-shell .full-memory-capsule .memory-capsule-inside {
    gap: 12px !important;
    padding-top: 24px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-inside-heading,
  html body main.app-shell .full-memory-capsule .memory-capsule-inside-heading {
    padding-block: 12px 13px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body .app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
  html body .app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 10px 9px max(11px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-dock-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-dock-action,
  html body .app-shell .full-memory-capsule .memory-capsule-more-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
    min-height: 52px !important;
    padding: 6px 3px !important;
  }
}

@media (max-width: 370px) {
  html body .app-shell .full-memory-capsule .memory-capsule-privacy,
  html body main.app-shell .full-memory-capsule .memory-capsule-privacy {
    display: none !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
    gap: 4px !important;
    padding-inline: 7px !important;
  }
}