/* Continuous desktop sizing from compact Windows windows to UHD monitors. */
.platform-gallery > *, .platform-gallery__tablist > *,
.music-layout > *, .music-player__inner > * {min-width:0}

/* The gallery is a vertical sidebar here; three columns squeezed its labels. */
@media (min-width:701px) and (max-width:960px) {
  .platform-gallery__tablist {display:flex;flex-direction:column}
  .platform-gallery__tab {padding:16px;gap:10px}
  .roadmap__grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:640px) and (max-width:700px) {
  .hero h1 {font-size:clamp(48px,8.6vw,60px)}
}

/* Leave at least a track row available above the player in short windows. */
@media (max-width:720px) and (max-height:600px) {
  html[data-route="music"] #dreamSoundsPage .provider-card {min-height:38px;padding:4px 7px}
  html[data-route="music"] #dreamSoundsPage .provider-card__symbol {width:26px;height:26px;flex-basis:26px}
  html[data-route="music"] #dreamSoundsPage .music-search {margin-top:6px}
  html[data-route="music"] #dreamSoundsPage .music-search button {padding:8px 9px}
  html[data-route="music"] #dreamSoundsPage .music-discovery__bar {min-height:28px;margin-top:4px;padding-bottom:3px}
}

/* Notebook and landscape windows: let the hero follow available height. */
@media (min-width:961px) and (max-height:800px) {
  .hero {padding-top:calc(var(--header-h) + 28px)}
  .hero__layout {min-height:0}
  .hero h1 {font-size:clamp(54px,5vw,78px);margin-top:24px}
  .hero__description {margin-top:20px;line-height:1.7}
  .hero__actions {margin-top:24px;gap:18px}
  .hero__bottom {margin-top:28px}
  .hero__visual {min-height:0;padding-block:38px 46px}
  .hero__visual .visual-frame {height:clamp(360px,60vh,490px)}
  .hero__foot {height:68px}
}

/* Widen the composition gradually; keep readable line lengths instead of zoom. */
@media (min-width:1921px) {
  :root {
    --container:clamp(1336px,70vw,2240px);
    --header-h:clamp(92px,3.6vw,128px);
    --header-scrolled-h:var(--header-h);
  }
  .header.scrolled,#musicHeader.dream-shared-header.scrolled {height:var(--header-h)}
  .logo__icon,.logo__icon img {width:clamp(47px,2.2vw,68px);height:clamp(47px,2.2vw,68px)}
  .logo__text {font-size:clamp(19px,.9vw,28px)}
  .logo__text small {font-size:clamp(8px,.36vw,11px)}
  .header__nav a {font-size:clamp(13px,.6vw,18px)}
  .header__nav {gap:clamp(27px,1.45vw,44px)}
  .nav-cta {font-size:clamp(11px,.5vw,15px);height:clamp(44px,2vw,60px);padding-inline:clamp(20px,1vw,32px)}
  .hero {padding-top:calc(var(--header-h) + clamp(74px,3.9vw,144px))}
  .hero__layout {min-height:clamp(630px,32vw,1060px);column-gap:clamp(68px,4vw,126px)}
  .hero h1 {font-size:clamp(91px,4.8vw,148px);max-width:none}
  .hero__description {font-size:clamp(16px,.75vw,23px);max-width:34em}
  .hero__tag {font-size:clamp(10px,.45vw,14px);padding:13px 18px}
  .hero__visual {min-height:0}
  .hero__visual .visual-frame {height:clamp(555px,29vw,900px)}
  html:not([data-artwork="original"]) .visual-frame__headline strong {font-size:clamp(47px,2.3vw,74px)}
  html:not([data-artwork="original"]) .visual-frame__headline span {max-width:24em}
  .visual-frame__headline span,.visual-frame__top,.visual-frame__bottom,
  .hero__visual .floating-note strong,.hero__bottom b,.hero__foot {font-size:clamp(10px,.45vw,14px)}
  .hero__visual .floating-note small,.hero__bottom small {font-size:clamp(8px,.36vw,11px)}
  .hero__visual .floating-note {padding:clamp(17px,.8vw,26px) clamp(20px,1vw,32px)}
  .hero__foot {height:clamp(82px,4vw,128px)}
  .btn {font-size:clamp(11px,.5vw,15px);min-height:clamp(57px,2.7vw,80px);padding:22px 30px}
  .text-link,.vision__link {font-size:clamp(11px,.5vw,15px)}
  .overline,.eyebrow {font-size:clamp(11px,.5vw,15px)}
  .section-heading h2,.faq__intro h2 {font-size:clamp(63px,3.2vw,96px)}
  .section-heading>p,.showcase__heading-end {max-width:34em}
  .section-heading>p,.showcase__heading-end p,.cinema__footer p,
  .vision__copy>p,.join p,.faq__intro>p {font-size:clamp(15px,.7vw,21px)}
  .manifesto,.showcase,.roadmap,.faq,.vision,.join {padding-block:clamp(144px,7.5vw,230px)}
  .manifesto-tile {padding:clamp(33px,1.7vw,52px)}
  .manifesto-tile h3 {font-size:clamp(21px,1vw,30px)}
  .manifesto-tile p {font-size:clamp(13px,.6vw,18px);max-width:32em}
  .cinema {min-height:clamp(770px,40vw,1200px)}
  .cinema h2 {font-size:clamp(150px,7vw,220px)}
  .cinema__footer {max-width:1100px}
  .cinema__footer p {max-width:34em}
  .showcase-panel {min-height:clamp(438px,24vw,720px)}
  .showcase-tab {padding:clamp(27px,1.4vw,42px);min-height:clamp(136px,7vw,210px)}
  .showcase-tab strong {font-size:clamp(18px,.85vw,26px)}
  .showcase-tab small {font-size:clamp(12px,.55vw,17px)}
  .showcase-panel__caption h3 {font-size:clamp(46px,2.4vw,74px)}
  .showcase-panel__caption p {font-size:clamp(13px,.6vw,18px);max-width:32em}
  .platform__intro h2,.vision__copy h2,.join h2 {font-size:clamp(83px,4vw,124px)}
  .platform__intro-copy>p {font-size:clamp(16px,.75vw,23px);max-width:36em}
  .platform__orb {height:clamp(430px,23vw,700px)}
  .platform__gallery-head h3,.platform__spec-head h3,.platform__steps-title h3 {font-size:clamp(43px,2.1vw,64px)}
  .platform__gallery-head>p,.platform__spec-intro,.platform__steps-title>p,
  .platform-feature p,.platform-gallery__tab small,.platform-step p {font-size:clamp(13px,.6vw,18px)}
  .platform-feature strong,.platform-gallery__tab strong,.platform-step strong {font-size:clamp(13px,.6vw,18px)}
  .platform-gallery {grid-template-columns:minmax(0,1fr) minmax(300px,.35fr)}
  .platform-spec strong {font-size:clamp(19px,.9vw,27px)}
  .vision__art {min-height:clamp(460px,25vw,760px)}
  .vision__copy>p,.join p,.faq__intro>p {max-width:34em}
  .vision__lines strong {font-size:clamp(12px,.55vw,17px)}
  .roadmap-step {min-height:clamp(300px,15vw,420px);padding:clamp(30px,1.5vw,46px)}
  .roadmap-step b {font-size:clamp(20px,.95vw,28px)}
  .roadmap-step p,.faq__items p {font-size:clamp(13px,.6vw,18px)}
  .faq__items summary {font-size:clamp(17px,.8vw,24px);padding-block:28px}
  .join__art {min-height:clamp(440px,22vw,680px)}
  .join__art img {width:clamp(260px,13vw,400px)}
  .footer__links a {font-size:clamp(12px,.55vw,17px)}
  html[data-route="music"] #dreamSoundsPage .music-layout {grid-template-columns:clamp(270px,15vw,440px) minmax(0,1fr);gap:24px}
  html[data-route="music"] #dreamSoundsPage .music-heading h1 {font-size:clamp(35px,1.7vw,52px)}
  html[data-route="music"] #dreamSoundsPage .music-heading__intro p {font-size:clamp(11px,.6vw,18px)}
  html[data-route="music"] #dreamSoundsPage .music-sidebar {padding:clamp(18px,1vw,30px)}
  html[data-route="music"] #dreamSoundsPage .music-sidebar h2 {font-size:clamp(20px,1vw,30px)}
  html[data-route="music"] #dreamSoundsPage .provider-card {min-height:clamp(59px,3vw,90px);padding:15px}
  html[data-route="music"] #dreamSoundsPage .provider-card__content strong {font-size:clamp(12px,.65vw,20px)}
  html[data-route="music"] #dreamSoundsPage .provider-card__content small {font-size:clamp(10px,.5vw,15px)}
  html[data-route="music"] #dreamSoundsPage .music-discovery__top h2 {font-size:clamp(26px,1.5vw,44px)}
  .music-search input {font-size:clamp(14px,.7vw,21px)}
  html[data-route="music"] #dreamSoundsPage .music-empty h3 {font-size:clamp(22px,1.1vw,34px)}
  html[data-route="music"] #dreamSoundsPage .music-empty p {font-size:clamp(13px,.65vw,20px);max-width:34em}
  .music-track__meta strong {font-size:clamp(13px,.65vw,20px)}
  .music-track__meta small {font-size:clamp(11px,.55vw,17px)}
}