/* One shared control scale and one readable mobile/tablet layout. */
@media (max-width: 1279px) {
  .mobile-ecoplants-hero {
    margin: 0;
    width: 100%;
  }
  .mobile-ecoplants-caption {
    margin-top: 12px;
    color: #707070;
    background: transparent;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    overflow-wrap: break-word;
  }
  .mobile-ecoplants-caption p + p {
    margin-top: 8px;
  }
  .mobile-ecoplants-caption p[lang="en"] {
    font-size: 8px;
    line-height: 14px;
  }
}
.mobile-story-image {
  position: relative;
  width: 100%;
  margin: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.mobile-story-image .media-shell {
  position: absolute;
  inset: 0;
}
.mobile-story-image .media-shell > img,
.mobile-story-image .media-shell > video {
  object-fit: contain;
}
/* Reflow instead of shrinking a desktop column to illegible tablet text. */
@media (min-width: 768px) and (max-width: 1279px) {
  .mobile-detail {
    max-width: 800px;
    margin-inline: auto;
  }
}
/* Narrow desktop About needs real text height, not fixed Figma text boxes. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .about-fixed-footer .page-shell.about > .design-section {
    display: grid;
    grid-template-columns: calc(243px * var(--u)) calc(50% - 275px * var(--u));
    gap: calc(80px * var(--u)) 0;
    height: auto !important;
    min-height: 100vh;
    padding: calc(160px * var(--u)) calc(8px * var(--u)) 40px;
  }
  .about-fixed-footer .about .design-text {
    position: static;
    width: auto !important;
    height: auto;
    min-height: 0;
    font-size: max(12px, calc(var(--size) * var(--u) * 1px));
    line-height: max(20px, calc(var(--line) * var(--u) * 1px));
  }
  .about .design-text[data-node="362:23376"] { grid-area: 1 / 1; }
  .about .design-text[data-node="362:23390"] { grid-area: 1 / 2; }
  .about .design-text[data-node="2140:18153"] { grid-area: 2 / 1; }
  .about .design-text[data-node="2084:17138"] { grid-area: 2 / 2; }
}
.article-quote svg {
  display: block;
  width: 100%;
  height: 100%;
}
.image-sequence {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.image-sequence > .sequence-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.film {
  --control-u: var(--u);
}
.ambient-shape .media-fallback,
.mobile-composition [data-node="1927:14213"] .media-fallback {
  position: absolute;
  left: 53.1%;
  top: 56.1%;
  width: 164.5%;
  height: 164.5%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.film-start {
  border: 0;
  outline: none;
  box-shadow: none;
  color: #fff;
  width: calc(56px * var(--control-u));
  height: calc(56px * var(--control-u));
  padding: calc(14px * var(--control-u));
}
.film-start:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 4px #fff);
}
.film-start .start-play-glyph,
.film-start .pause-glyph,
.film-controlbar .sound-glyph,
.film-controlbar .fullscreen-glyph {
  position: relative;
  display: block;
  flex-shrink: 0;
  padding: 0;
  transform: scale(var(--control-u));
  transform-origin: center;
}
.film-start .start-play-glyph {
  width: 20px;
  height: 28px;
}
.film-start .pause-glyph {
  width: 16px;
  height: 20px;
}
.film-start .pause-glyph > img {
  width: 16px;
  height: 20px;
}
.film-start .start-play-glyph > img {
  width: 20px;
  height: 28px;
}
.film-start .start-play-glyph > img,
.film-start .pause-glyph > img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
}
.film-controlbar .sound-glyph,
.film-controlbar .fullscreen-glyph,
.film-controlbar [data-action="mute"].is-muted .sound-glyph {
  width: 20px;
  height: 20px;
  transform: scale(var(--control-u));
}
.film-controlbar [data-action="mute"] .sound-glyph img {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  transform: none;
}
.film-controlbar [data-action="mute"] .sound-glyph .sound-off-overlay {
  width: 13.75px;
}
.film-controlbar .sound-off,
.film-controlbar .is-muted .sound-on {
  display: none;
}
.film-controlbar .is-muted .sound-off {
  display: block;
}
.film-controlbar [data-action="fullscreen"] .full-top,
.film-controlbar [data-action="fullscreen"] .full-bottom {
  width: 20px;
  height: 5px;
  object-fit: contain;
}
.media-shell > .media-fallback {
  z-index: 0;
}
.media-shell > video {
  z-index: 1;
}
.media-shell.media-ready > .media-fallback {
  visibility: hidden;
}
.media-shell.media-failed > video {
  visibility: hidden;
}
/* DRY ZONE: a full-height portrait film over the graded, dimmed wide cover.
   The poster remains a backplate, never a second cropped copy of the film. */
.film-portrait {
  background: #000;
  isolation: isolate;
}
.film-portrait.media-ready > .media-fallback {
  visibility: visible;
}
.film-portrait > .media-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.film-portrait.media-ready::after {
  opacity: .8;
}
.film-portrait > video {
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.film-portrait.media-ready > video {
  visibility: visible;
}
.film-portrait.media-failed > video {
  visibility: hidden;
}
.film-portrait .film-start {
  width: calc(40px * var(--control-u));
  height: calc(40px * var(--control-u));
  padding: 0;
  background: rgba(0, 0, 0, .8);
}
.film-portrait.media-ready .film-start {
  background: transparent;
}
.film-portrait:not(.media-ready) .film-controlbar {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1279px) {
  /* A stable portrait slot avoids tiny video or a layout jump when playback starts. */
  .mobile-detail-composition.mobile-portrait-film {
    aspect-ratio: 9 / 16 !important;
    max-height: 80svh;
  }
  .mobile-portrait-film > .portrait-film {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .film-portrait .film-start {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .film-portrait::after { transition: none; }
}
.media-status {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 8px 12px;
  background: #000b;
  color: #fff;
  font-size: 14px;
  z-index: 4;
}
.media-status[hidden],
.ambient-retry[hidden] {
  display: none;
}
.ambient-retry {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 10px 16px;
  background: #000b;
  color: #fff;
}
.story-gallery-media {
  position: absolute;
}
.sichuan-ending-photo {
  position: relative;
  /* Mirror the existing 120 design-pixel gap from the last paragraph to the
     closing quote, using the same proportional page scale. */
  margin: calc(120px * var(--u)) 0 0;
  z-index: 5;
  height: calc(100svh + 224px * min(var(--u), 1));
  background: #000;
}
.sichuan-ending-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.sichuan-ending-sticky .image-sequence {
  display: block;
  position: absolute;
  inset: 0;
}
.sichuan-ending-sticky .sequence-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sichuan-ending + .site-footer {
  margin-top: calc(-256px * min(var(--u), 1));
  z-index: 6;
  background: transparent;
  color: #fff;
  pointer-events: none;
  text-shadow: none;
  box-shadow: none;
}
.sichuan-ending + .site-footer .footer-home,
.sichuan-ending + .site-footer .footer-top {
  pointer-events: auto;
}
.sichuan-ending + .site-footer .footer-home .footer-mark {
  filter: none;
}
.sichuan-ending + .site-footer .footer-top img {
  filter: invert(1);
}
.gallery-fade-underlay {
  z-index: 1;
  pointer-events: none;
}
.story-gallery-paired .story-gallery-media[data-fixed-portrait="true"] {
  overflow: hidden;
}

/* Figma 1707:6251: full-bleed 1440 × 611 artwork, never stretched to 100vh.
   A transparent trailing runway lets the footer scroll over the pinned image. */
.history-ending-photo {
  --ending-image-height: calc(100vw * 611 / 1440);
  --ending-footer-height: calc(256px * min(var(--u), 1));
  height: calc(var(--ending-image-height) + var(--ending-footer-height));
  background: transparent;
}
.history-ending-photo .sichuan-ending-sticky {
  top: max(0px, calc(100svh - var(--ending-image-height)));
  height: var(--ending-image-height);
}
@media (max-width: 1279px) {
  .mobile-detail.sichuan-ending {
    padding-bottom: 0;
  }
  .mobile-detail.sichuan-ending .sichuan-ending-photo {
    /* Normal reading flow: closing quote, 28px gap, natural-height artwork,
       then the black footer. No viewport-height padding or overlap on mobile. */
    margin: 0 -20px 0;
    height: auto;
    flex-shrink: 0;
    background: transparent;
  }
  .mobile-detail.sichuan-ending .sichuan-ending-sticky {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 2848 / 1590;
  }
  .mobile-detail.sichuan-ending .sequence-frame {
    object-fit: contain;
  }
  .mobile-detail.history-ending .sichuan-ending-sticky {
    aspect-ratio: 1440 / 611;
  }
  .mobile-detail.history-ending .history-ending-photo {
    height: auto;
  }
  .mobile-detail.sichuan-ending + .site-footer {
    height: 228px;
    margin-top: 0;
    background: var(--paper);
    color: #000;
    pointer-events: auto;
  }
  .mobile-detail.sichuan-ending + .site-footer .footer-home .footer-mark {
    filter: invert(1);
  }
  .mobile-detail.sichuan-ending + .site-footer .footer-top img {
    filter: none;
  }
  .mobile-detail.sichuan-ending + .site-footer .footer-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .mobile-detail.sichuan-ending + .site-footer .footer-meta > :last-child {
    margin-left: auto;
  }
}
@media (max-width: 360px) {
  .mobile-detail.sichuan-ending + .site-footer .footer-meta {
    /* Two metadata rows must retain bottom breathing room on 320px phones. */
    top: 142px;
  }
}
.story-gallery-paired .story-gallery-media[data-fixed-portrait="true"] .media-shell > img {
  /* Keep the design column width; only trim the portrait above and below. */
  object-fit: cover;
  object-position: center;
}
.story-gallery-layer {
  /* Supporting imagery stays above the page until the reading passage ends. */
  z-index: 4;
}
.scroll-art[aria-hidden="true"] {
  /* The fixed gallery owns these desktop pictures. Hidden originals must not
     extend scrollable overflow beyond the footer. Mobile originals stay inline. */
  display: none;
}
.page-shell.dry-zone + .site-footer {
  /* Only the black footer artwork/copy scrolls over the fixed photo. */
  z-index: 5;
  background: transparent;
  color: #000;
  text-shadow: none;
  box-shadow: none;
  pointer-events: none;
}
.page-shell.dry-zone + .site-footer .footer-home,
.page-shell.dry-zone + .site-footer .footer-top {
  pointer-events: auto;
}
.page-shell.sichuan + .site-footer {
  z-index: 5;
}
.page-shell.sichuan-ending + .site-footer {
  z-index: 6;
}
.story-gallery-media img {
  object-fit: contain;
}
.story-gallery-media.film {
  pointer-events: auto;
}
.story-gallery-stage {
  transition: none;
  z-index: 0;
}
.story-gallery-stage.is-active {
  transition: none;
  z-index: 2;
}
.story-gallery-media .media-shell > img,
.story-gallery-media .media-shell > video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hero-slides picture {
  display: contents;
}
@media (max-width: 1279px) {
  .mobile-article-quote {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-self: flex-start;
    color: var(--ink);
  }
  .mobile-article-quote.is-closing {
    align-self: flex-end;
  }
  .mobile-article-quote svg {
    display: block;
    width: 40px;
    height: 40px;
  }
  .film {
    --control-u: 1;
  }
  .film-start {
    width: 48px;
    height: 48px;
    padding: 10px;
  }
  .film-controlbar button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .film-controlbar {
    gap: 4px;
    padding: 0 4px;
    height: 48px;
  }
  .media-status {
    bottom: 56px;
    font-size: 12px;
  }
  .mobile-copy .design-text {
    font-size: 16px !important;
    line-height: 28px !important;
    min-height: 0;
  }
  .mobile-copy .design-text[data-heading="true"] {
    font-size: 22px !important;
    line-height: 32px !important;
  }
  .mobile-copy .design-text.english-description:not([data-heading="true"]) {
    /* English monospace descriptions need a denser reading measure than the
       16px/28px Chinese body copy. Titles and mixed Chinese copy stay intact. */
    font-size: 12px !important;
    line-height: 20px !important;
  }
  .mobile-copy .design-text p {
    white-space: normal;
  }
  .mobile-pbrmax-color > .pbrmax-color-section {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .mobile-pbrmax-color .pbrmax-color-copy {
    position: static;
    width: 100%;
    font-size: 16px;
    line-height: 28px;
  }
  .mobile-pbrmax-color .pbrmax-color-copy p + p {
    margin-top: 12px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel {
    position: relative;
    top: auto;
    width: 100%;
    height: 200px;
    margin-top: 28px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-label {
    top: 24px;
    font-size: 12px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-label-blue {
    left: 16px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-label-green {
    right: 16px;
  }
  .mobile-pbrmax-color .pbrmax-color-gradient {
    left: 16px;
    top: 64px;
    width: calc(100% - 32px);
    height: 64px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-percent {
    top: 144px;
    font-size: 12px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-percent-zero {
    left: 16px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-percent-full {
    right: 16px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-percent-half {
    top: 174px;
  }
  .mobile-pbrmax-color .pbrmax-color-panel .color-diamond {
    top: 142px;
    width: 10px;
    height: 10px;
    border-width: 1px;
  }
  .mobile-pbrmax-color .pbrmax-color-art {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--pw) / var(--ph);
    margin-top: 4px;
  }
  .mobile-pbrmax-color .pbrmax-color-art .media-shell {
    position: absolute;
    inset: 0;
  }
  .mobile-pbrmax-color .pbrmax-color-art .media-fallback {
    left: calc(var(--px) / var(--pw) * -100%);
    top: calc((var(--py) + 40) / var(--ph) * -100%);
    width: calc(1424 / var(--pw) * 100%);
    height: calc(1900 / var(--ph) * 100%);
  }
}