/* Phone-only corrections for the original interactive studies.
   The desktop compositions remain untouched. */
@media (max-width: 640px) {
  html[data-rivra-study="soda"] { overflow-x: clip; }

  html[data-rivra-study="flora"] #hero-title {
    font-size: clamp(31px, 10vw, 40px) !important;
    max-width: calc(100vw - 40px);
  }

  html[data-rivra-study="marcus-vane"] h1[class*="text-mega"] {
    font-size: clamp(72px, 25vw, 112px) !important;
    line-height: .85 !important;
    max-width: 100vw;
    z-index: 30;
    bottom: clamp(112px, 16svh, 150px) !important;
    transform: none !important;
  }

  html[data-rivra-study="laocoon"] .cinematic-container {
    padding: 0 20px 76px;
  }
  html[data-rivra-study="laocoon"] .main-header { gap: 12px; }
  html[data-rivra-study="laocoon"] .brand { font-size: 12px; letter-spacing: 2px; }
  html[data-rivra-study="laocoon"] .header-nav { display: none; }
  html[data-rivra-study="laocoon"] .contact-btn { padding: 8px 12px; font-size: 9px; }
  html[data-rivra-study="laocoon"] .slide,
  html[data-rivra-study="laocoon"] #slide-3,
  html[data-rivra-study="laocoon"] #slide-4 {
    left: 20px !important;
    right: 20px !important;
    bottom: 13%;
    width: auto !important;
    max-width: none !important;
  }
  html[data-rivra-study="laocoon"] .slide-title {
    margin: 0 0 12px !important;
    font-size: clamp(44px, 13vw, 58px);
    line-height: .98;
    white-space: normal !important;
  }
  html[data-rivra-study="laocoon"] .desc-row { display: flex; flex-direction: column; gap: 8px; }
  html[data-rivra-study="laocoon"] .slide-desc,
  html[data-rivra-study="laocoon"] #slide-1 .col-1,
  html[data-rivra-study="laocoon"] #slide-1 .col-2,
  html[data-rivra-study="laocoon"] #slide-2 .slide-desc {
    position: static;
    margin-left: 0;
    width: min(100%, 340px);
    max-width: min(100%, 340px);
    font-size: 13px;
    line-height: 1.4;
  }
  html[data-rivra-study="laocoon"] #slide-2-img {
    top: 82px;
    left: 20px;
    width: min(42vw, 180px);
  }

  html[data-rivra-study="clarix"] {
    overflow-x: clip;
  }
  html[data-rivra-study="clarix"] .animated-title {
    max-width: calc(100vw - 75px);
    overflow-wrap: break-word;
    white-space: normal !important;
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  html[data-rivra-study="clarix"] .footer-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 24px 16px;
    padding-right: 0;
  }
  html[data-rivra-study="clarix"] .footer-col { min-width: 0; }
  html[data-rivra-study="clarix"] .scroll-title-container h3,
  html[data-rivra-study="clarix"] .gc-top-left {
    white-space: normal;
    font-size: clamp(24px, 6vw, 36px);
  }

  /* Kimi's original 320px minimums overflow when a 320px phone also has
     24px side gutters. Keep the composition, but size its copy to the space
     actually available inside those gutters. */
  html[data-rivra-study="kimi"] section[class*="group/timeline"] {
    --copy-min-w: calc(100cqw - 48px);
  }
  html[data-rivra-study="kimi"] section[class*="--intro-min-w:320px"] {
    --intro-min-w: calc(100cqw - 48px);
  }
}