/*
 * Smaller-PC proportional compatibility.
 *
 * Full-bleed page and section backgrounds always remain full width. Only the
 * measured inner desktop canvas is scaled, exactly once, so cards, grids,
 * typography, gaps and media retain their original proportions. Between 861px
 * and 1919px the target is the existing 91.6666vw safe area reduced by another
 * 10% (82.5vw), capped at 90% of each original canvas. H5 and >=1920px are
 * intentionally untouched.
 */
@media (min-width: 861px) and (max-width: 1919px) {
  :root {
    --brand-pc-safe-gutter: clamp(32px, 4.1667vw, 80px);
    --brand-pc-safe-width: calc(100vw - var(--brand-pc-safe-gutter) - var(--brand-pc-safe-gutter));
    --brand-pc-scaled-safe-width: 82.5vw;
    --brand-pc-scale-1200: .9;
    --brand-pc-scale-1320: .9;
    --brand-pc-scale-1440: .9;
    --brand-pc-scale-1480: .9;
    --brand-pc-scale-1484: .9;
    --brand-pc-scale-1521: .9;
    --brand-pc-scale-1600: .9;
    --brand-pc-scale-1720: .9;
    --brand-pc-width-1480: 1332px;
    --brand-pc-banner-height-635: 571.5px;
    --brand-pc-banner-height-636: 572.4px;
  }

  body[data-brand-page-key] { overflow-x: clip; }

  /* Header background stays full-width; the measured navigation scales within it. */
  .brand-site-header {
    width: 100%;
    max-width: none;
    height: var(--brand-pc-size-1440-72, 64.8px);
    display: flex;
    align-items: center;
  }

  :is(.up-page-body, .artist-page-body) .brand-site-header,
  :is(.business-page-body, .business-detail-page-body, .about-page-body, .faq-page-body, .cms-page-body) .brand-site-header {
    height: var(--brand-pc-size-1440-80, 72px);
  }

  .artist-gallery-page-body .brand-site-header {
    height: var(--brand-pc-size-1440-72, 64.8px);
  }

  .brand-nav {
    width: 1440px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1440);
  }

  /* Homepage backgrounds remain full-bleed; only each original content canvas scales. */
  body[data-brand-page-key="home"] .bhome-shell {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  body[data-brand-page-key="home"] .bhome-stats > .bhome-shell {
    width: 1521px;
    max-width: none;
    zoom: var(--brand-pc-scale-1521);
  }

  body[data-brand-page-key="home"] .bhome-hero :is(.brand-hero-carousel--home, .brand-hero-fallback--home) {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  body[data-brand-page-key="home"] .bhome-hero {
    height: var(--brand-pc-banner-height-635);
  }

  body[data-brand-page-key="home"] .bhome-popular {
    height: var(--brand-pc-size-1480-519, 467.1px);
    padding-top: var(--brand-pc-size-1480-80, 72px);
  }

  body[data-brand-page-key="home"] .bhome-news {
    height: var(--brand-pc-size-1480-717, 645.3px);
    padding-top: var(--brand-pc-size-1480-80, 72px);
  }

  body[data-brand-page-key="home"] .bhome-original {
    height: var(--brand-pc-size-1480-864, 777.6px);
    padding-top: var(--brand-pc-size-1480-80, 72px);
  }

  body[data-brand-page-key="home"] .bhome-about {
    height: var(--brand-pc-size-1480-569, 512.1px);
    padding-top: var(--brand-pc-size-1480-80, 72px);
  }

  body[data-brand-page-key="home"] .bhome-stats {
    height: var(--brand-pc-size-1480-869, 782.1px);
  }

  body[data-brand-page-key="home"] .bhome-creators {
    height: var(--brand-pc-size-1480-1217, 1095.3px);
    padding-top: var(--brand-pc-size-1480-80, 72px);
  }

  /* Partner section background stays full-width, including on non-home pages. */
  .brand-partners {
    width: 100%;
    height: var(--brand-pc-size-1480-830, 747px);
    max-width: none;
  }

  .brand-partners--two-rows {
    height: var(--brand-pc-size-1480-640, 576px);
  }

  .brand-partners-shell {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  /* Creator and artist canvases keep every fixed card/gap at its original size. */
  :is(.up-page-body, .artist-page-body, .artist-gallery-page-body) .creator-shell:not(.creator-hot) {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  .up-page-body .creator-hot {
    width: 100%;
    height: var(--brand-pc-size-1480-835, 751.5px);
    max-width: none;
    padding-block: var(--brand-pc-size-1480-80, 72px);
    padding-inline: 0;
  }

  .up-page-body .creator-hot-inner {
    display: block;
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  .artist-video-detail {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  /* Original-video list, topic and detail content. */
  .original-video-catalog,
  .original-topic-shell,
  .original-detail-shell {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  /* News page gradient/background remains full width. */
  .news-v2-shell,
  .news-v2-detail-shell {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  .news-v2-list {
    padding-block: var(--brand-pc-size-1480-104, 93.6px) var(--brand-pc-size-1480-128, 115.2px);
  }

  .news-v2-detail {
    min-height: var(--brand-pc-size-1480-2292, 2062.8px);
    padding-block: var(--brand-pc-size-1480-104, 93.6px) var(--brand-pc-size-1480-128, 115.2px);
  }

  /* Recruitment outer section background remains full width. */
  .join-hero {
    width: var(--brand-pc-width-1480);
    height: var(--brand-pc-banner-height-636);
    max-width: none;
    margin: var(--brand-pc-size-1480-24, 21.6px) auto 0;
    aspect-ratio: auto;
  }

  .join-apply-section {
    padding-block: var(--brand-pc-size-1480-80, 72px) var(--brand-pc-size-1480-220, 198px);
  }

  .join-apply-shell {
    width: 1484px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1484);
  }

  /* Current business page content; shared/full backgrounds are not narrowed. */
  .business-page-body .business-hero {
    width: var(--brand-pc-width-1480);
    height: var(--brand-pc-banner-height-635);
    max-width: none;
    margin: var(--brand-pc-size-1480-104, 93.6px) auto 0;
    aspect-ratio: auto;
  }

  .business-page-body .business-hero > :is(.brand-hero-carousel, .brand-hero-fallback) {
    width: 1480px;
    height: 635px;
    max-width: none;
    zoom: var(--brand-pc-scale-1480);
  }

  .business-page-body .business-services {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  .business-section-shell {
    width: 1320px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1320);
  }

  .business-advantages {
    height: var(--brand-pc-size-1320-820, 738px);
  }

  .business-network {
    height: var(--brand-pc-size-1320-930, 837px);
    padding-top: var(--brand-pc-size-1320-88, 79.2px);
  }

  .business-reach {
    height: var(--brand-pc-size-1320-815, 733.5px);
    padding-top: var(--brand-pc-size-1320-92, 82.8px);
  }

  /*
   * Document backgrounds stay on their full-width outer article. A dedicated
   * 1480px inner canvas carries all headings, rich text, images and cards.
   */
  .about-document,
  .faq-document,
  .cms-page-shell,
  .business-detail {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  .about-document {
    min-height: var(--brand-pc-size-1480-827, 744.3px);
    padding-block: var(--brand-pc-size-1480-104, 93.6px) var(--brand-pc-size-1480-80, 72px);
  }

  .faq-document {
    padding-block: var(--brand-pc-size-1480-184, 165.6px) var(--brand-pc-size-1480-80, 72px);
  }

  .cms-page-shell {
    min-height: var(--brand-pc-size-1480-1259, 1133.1px);
    padding-block: var(--brand-pc-size-1480-160, 144px) var(--brand-pc-size-1480-80, 72px);
  }

  .business-detail {
    height: var(--brand-pc-size-1480-731, 657.9px);
    min-height: 0;
    padding-block: var(--brand-pc-size-1480-144, 129.6px) var(--brand-pc-size-1480-40, 36px);
  }

  .brand-document-inner {
    display: block;
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  .about-copy,
  .figma-faq-item,
  .cms-page-shell .cms-richtext {
    width: 1480px;
    max-width: none;
  }

  .business-partners {
    width: 100%;
    height: var(--brand-pc-size-1480-810, 729px);
    max-width: none;
    padding-block: var(--brand-pc-size-1480-80, 72px);
  }

  .business-partner-wall {
    width: 1480px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1480);
  }

  /* Older routed content modules retain their original inner proportions. */
  .section > .container {
    width: 1200px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1200);
  }

  .about-v2-shell {
    width: 1600px;
    max-width: none;
    margin-inline: auto;
    zoom: var(--brand-pc-scale-1600);
  }

  .about-v2-story {
    min-height: var(--brand-pc-size-1600-2298, 2068.2px);
    padding-block: var(--brand-pc-size-1600-112, 100.8px) var(--brand-pc-size-1600-138, 124.2px);
  }

  /* Footer background stays full-width; its complete grid scales inside it. */
  .brand-site-footer {
    width: 100%;
    height: var(--brand-pc-size-1480-373, 335.7px);
    max-width: none;
  }

  .brand-footer-shell {
    width: 1720px;
    max-width: none;
    margin-inline: auto;
    padding-inline: 120px;
    zoom: var(--brand-pc-scale-1480);
  }

  /* 404 radial background remains full-width; only the content card scales. */
  .brand-not-found-main {
    width: 100%;
    max-width: none;
  }

  .brand-not-found {
    width: 760px;
    max-width: none;
    zoom: var(--brand-pc-scale-1480);
  }

  .photo-viewer-dialog { max-width: 1480px; }
}