/* Studio scene: independently scoped tablet and phone composition. */
@media (max-width: 1100px) {
  .studio-scene .studio-content[data-native-scroll] {
    display: block;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 100px 5% calc(96px + env(safe-area-inset-bottom, 0px));
    scroll-padding-block: 100px 100px;
    -webkit-overflow-scrolling: touch;
  }

  .studio-scene .studio-header,
  .studio-scene .studio-layout,
  .studio-scene .studio-story,
  .studio-scene .studio-promises li > div {
    min-width: 0;
  }

  .studio-scene .studio-layout {
    align-items: start;
    min-height: 0;
    margin-top: 30px;
    column-gap: 6%;
  }

  .studio-scene .studio-story {
    padding: 0 0 4px;
  }

  .studio-scene .studio-story > .scene-script {
    max-width: calc(100% - 12px);
    overflow-wrap: break-word;
  }

  .studio-scene .studio-intro,
  .studio-scene .studio-description,
  .studio-scene .studio-promises h3,
  .studio-scene .studio-promises p {
    overflow-wrap: break-word;
  }

  .studio-scene .studio-description {
    font-size: 13px;
    line-height: 1.7;
  }

  .studio-scene .studio-promises p {
    font-size: 12px;
    line-height: 1.5;
  }

  .studio-scene .studio-promises li {
    gap: 15px;
    padding-block: 13px;
  }

  .studio-scene .studio-promises li > span {
    flex: 0 0 19px;
  }

  .studio-scene .studio-story > .scene-text-link {
    min-height: 52px;
    gap: 14px;
    padding-block: 10px;
    font-size: 12px;
    letter-spacing: 1.1px;
  }

  .studio-scene .scene-demo-note {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.5;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .studio-scene .studio-header .shop-scene-title {
    font-size: clamp(48px, 7.5vw, 75px);
  }

  .studio-scene .studio-layout {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }

  .studio-scene .studio-portrait {
    height: clamp(370px, 56vw, 540px);
    min-height: 0;
  }

  .studio-scene .studio-portrait-type {
    top: 9%;
    font-size: clamp(65px, 10vw, 110px);
  }

  .studio-scene .studio-portrait img {
    width: 114%;
    max-width: none;
    height: 127%;
    left: -5%;
    bottom: -25%;
  }

  .studio-scene .studio-portrait-index {
    padding-block: 14px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 1.3px;
  }

  .studio-scene .studio-story > .scene-script {
    font-size: clamp(31px, 4.5vw, 43px);
    margin-bottom: 31px;
  }

  .studio-scene .studio-intro {
    font-size: 24px;
  }

  .studio-scene .studio-promises h3 {
    font-size: 18px;
    line-height: 1.2;
  }
}

@media (max-width: 700px) {
  .studio-scene .studio-content[data-native-scroll] {
    padding: 88px 6% calc(102px + env(safe-area-inset-bottom, 0px));
    scroll-padding-block: 88px 104px;
  }

  .studio-scene .studio-header .scene-overline {
    gap: 12px;
    margin-bottom: 18px;
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: 1.2px;
  }

  .studio-scene .studio-header .scene-overline > span {
    min-width: 0;
  }

  .studio-scene .studio-header .shop-scene-title {
    font-size: clamp(32px, 9.7vw, 66px);
    line-height: 1.06;
    letter-spacing: -.065em;
  }

  .studio-scene .studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
    margin-top: 24px;
  }

  .studio-scene .studio-portrait {
    width: 100%;
    height: clamp(286px, 76vw, 430px);
    min-height: 0;
    max-height: none;
    order: 1;
  }

  .studio-scene .studio-portrait-type {
    top: 5%;
    font-size: clamp(69px, 21vw, 139px);
  }

  .studio-scene .studio-portrait img {
    width: 104%;
    max-width: none;
    height: 132%;
    left: 0;
    bottom: -28%;
  }

  .studio-scene .studio-portrait-index {
    gap: 15px;
    padding-block: 13px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 1.6px;
  }

  .studio-scene .studio-portrait-index > span {
    flex: 0 0 auto;
    font-size: 30px;
  }

  .studio-scene .studio-story {
    order: 2;
  }

  .studio-scene .studio-story > .scene-script {
    max-width: calc(100% - 12px);
    margin: 0 0 35px 6px;
    font-size: clamp(35px, 10vw, 49px);
    line-height: 1.04;
  }

  .studio-scene .studio-intro {
    margin-bottom: 14px;
    font-size: 26px;
    line-height: 1.25;
  }

  .studio-scene .studio-description {
    max-width: 470px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.75;
  }

  .studio-scene .studio-promises {
    margin-bottom: 17px;
  }

  .studio-scene .studio-promises li {
    gap: 17px;
    padding-block: 16px;
  }

  .studio-scene .studio-promises h3 {
    margin-bottom: 5px;
    font-size: 19px;
    line-height: 1.25;
  }

  .studio-scene .studio-promises p {
    font-size: 12px;
    line-height: 1.6;
  }

  .studio-scene .studio-story > .scene-text-link {
    min-height: 56px;
    font-size: 12px;
    letter-spacing: 1.3px;
  }

  .studio-scene .scene-demo-note {
    margin-top: 16px;
  }
}

@media (max-width: 375px) {
  .studio-scene .studio-content[data-native-scroll] {
    padding-inline: 5.5%;
  }

  .studio-scene .studio-header .scene-overline {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .studio-scene .studio-story > .scene-script {
    font-size: 35px;
  }

  .studio-scene .studio-intro {
    font-size: 24px;
  }

  .studio-scene .studio-promises li {
    gap: 13px;
  }

  .studio-scene .studio-story > .scene-text-link {
    letter-spacing: 1px;
  }
}