/* Version 10: Canva-referenced capability, achievement and project-intro layouts. */
#capabilities.capability-summary {
  padding: clamp(96px, 8vw, 150px) clamp(28px, 6vw, 110px);
}

#capabilities .editorial-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "eyebrow"
    "copy";
  width: min(100%, 1500px);
  margin: 0 auto clamp(46px, 5vw, 78px);
}

#capabilities .editorial-heading > h2 {
  grid-area: title;
  margin: 0;
  font: 300 clamp(48px, 4.6vw, 82px)/0.98 STSong, "Songti SC", "Noto Serif SC", serif;
}

#capabilities .editorial-heading > span {
  grid-area: eyebrow;
  margin-top: 10px;
  font: 600 11px/1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
}

#capabilities .editorial-heading > p {
  grid-area: copy;
  max-width: 780px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  font: 300 clamp(15px, 1.1vw, 19px)/1.8 Arial, "Microsoft YaHei", sans-serif;
}

#capabilities .capability-grid {
  display: block;
  width: min(100%, 1500px);
  margin: 0 auto;
  border: 0;
}

#capabilities .capability-card {
  display: grid;
  grid-template-columns: clamp(44px, 4.8vw, 78px) minmax(180px, 0.7fr) minmax(150px, 0.55fr) minmax(420px, 1.5fr);
  grid-template-areas: "number title eyebrow copy";
  column-gap: clamp(24px, 3.4vw, 62px);
  align-items: center;
  min-height: 0;
  padding: clamp(28px, 3vw, 46px) 0;
  border-bottom: 1px solid rgba(16, 16, 15, 0.22);
}

#capabilities .capability-card + .capability-card {
  border-top: 0;
  border-left: 0;
}

#capabilities .capability-card > b {
  grid-area: number;
  align-self: center;
  margin: 0;
  font: 300 clamp(20px, 1.65vw, 28px)/1 STSong, "Songti SC", serif;
}

#capabilities .capability-card > h3 {
  grid-area: title;
  align-self: center;
  margin: 0;
  font: 500 clamp(23px, 1.8vw, 31px)/1.2 Arial, "Microsoft YaHei", sans-serif;
}

#capabilities .capability-card > small {
  grid-area: eyebrow;
  align-self: center;
  margin: 0;
  font: 500 10px/1.45 Arial, sans-serif;
  letter-spacing: 0.08em;
}

#capabilities .capability-card > p {
  grid-area: copy;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  font: 300 clamp(14px, 1.05vw, 18px)/1.75 Arial, "Microsoft YaHei", sans-serif;
}

#capabilities .achievement-block {
  width: min(100%, 1500px);
  min-height: clamp(360px, 34vw, 560px);
  margin: clamp(92px, 9vw, 150px) auto 0;
  padding: clamp(44px, 5vw, 78px) 0;
  border-top: 1px solid rgba(16, 16, 15, 0.22);
}

#capabilities .achievement-block > h3 {
  margin: 0;
  font: 300 clamp(42px, 4vw, 70px)/1 STSong, "Songti SC", "Noto Serif SC", serif;
}

#capabilities .achievement-block > span {
  margin-top: 9px;
  font: 600 10px/1.3 Arial, sans-serif;
  letter-spacing: 0.14em;
}

#capabilities .achievement-block ul {
  display: block;
  margin: clamp(32px, 3.5vw, 56px) 0 0;
  padding: 0 0 0 1.2em;
  border: 0;
  list-style: disc;
}

#capabilities .achievement-block li {
  display: list-item;
  min-height: 0;
  padding: 0;
  border: 0;
  font: 300 clamp(15px, 1.15vw, 19px)/1.9 Arial, "Microsoft YaHei", sans-serif;
}

#capabilities .achievement-block li + li {
  border: 0;
}

#capabilities .achievement-block li > span {
  display: inline;
}

/* Every 01/02/03 project uses the same editorial introduction system. */
.project-detail .continuous-project {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, 0.82fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(64px, 8vw, 150px);
  align-items: start;
}

.project-detail .continuous-project > .detail-hero {
  display: contents;
}

.project-detail .detail-hero > span {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: clamp(86px, 9vh, 136px) 0 0;
  font: 500 11px/1.4 Arial, sans-serif;
  letter-spacing: 0.16em;
}

.project-detail .detail-hero > h1 {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: start;
  max-width: 14ch;
  margin: 24px 0 clamp(72px, 8vw, 126px);
  font: 300 clamp(52px, 4.8vw, 84px)/1.08 STSong, "Songti SC", "Noto Serif SC", serif;
  white-space: normal;
  overflow-wrap: normal;
}

.project-detail .detail-hero > .detail-intro-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: clamp(86px, 9vh, 136px) 0 0;
  padding-top: 24px;
  border-top: 1px solid #111;
  font: 600 11px/1.4 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0.12em;
}

.project-detail .detail-hero > p,
#detail-nuclear .detail-hero > p,
#detail-meadow .detail-hero > p,
#detail-qinghua .detail-hero > p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font: 300 clamp(15px, 1.08vw, 18px)/1.75 Arial, "Microsoft YaHei", sans-serif;
}

.project-detail .detail-project-notes,
#detail-nuclear .detail-project-notes,
#detail-meadow .detail-project-notes {
  display: block;
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  width: 100%;
  margin: 24px 0 clamp(72px, 8vw, 126px);
  border: 0;
}

.project-detail .detail-project-note {
  min-width: 0;
  padding: 0;
}

.project-detail .detail-project-note + .detail-project-note {
  margin-top: 22px;
  padding-top: 0;
  border: 0;
}

.project-detail .detail-project-note > span {
  display: block;
  margin: 0 0 8px;
  font: 600 11px/1.4 Arial, "Microsoft YaHei", sans-serif;
  letter-spacing: 0.12em;
}

.project-detail .detail-project-note > p {
  margin: 0;
  font: 300 clamp(15px, 1.08vw, 18px)/1.75 Arial, "Microsoft YaHei", sans-serif;
}

.project-detail .continuous-project > :not(.detail-hero):not(.detail-project-notes) {
  grid-column: 1 / -1;
  grid-row: auto;
}

@media (max-width: 900px) {
  #capabilities.capability-summary {
    padding: 82px 20px;
  }

  #capabilities .capability-card {
    grid-template-columns: 46px 1fr;
    grid-template-areas:
      "number title"
      "number eyebrow"
      "copy copy";
    row-gap: 8px;
    padding: 30px 0;
  }

  #capabilities .capability-card > p {
    margin-top: 14px;
  }

  #capabilities .achievement-block {
    min-height: 0;
    margin-top: 74px;
  }

  .project-detail .continuous-project {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 0;
  }

  .project-detail .detail-hero > span,
  .project-detail .detail-hero > h1,
  .project-detail .detail-hero > .detail-intro-label,
  .project-detail .detail-hero > p,
  .project-detail .detail-project-notes {
    grid-column: 1;
    grid-row: auto;
  }

  .project-detail .detail-hero > span {
    margin-top: 72px;
  }

  .project-detail .detail-hero > h1 {
    margin: 18px 0 60px;
  }

  .project-detail .detail-hero > .detail-intro-label {
    margin-top: 0;
  }

  .project-detail .detail-project-notes {
    margin-bottom: 74px;
  }
}

/* Requested directory preview: images reveal inside, and clear of, both rules. */
.contents .flowing-menu {
  height: auto !important;
  overflow: visible !important;
}

.contents .flowing-item {
  height: 120px !important;
  transition: height 0.58s cubic-bezier(0.19, 1, 0.22, 1);
}

.contents .flowing-item:is(:hover, :focus-visible, :focus-within) {
  height: 190px !important;
}

.contents .flowing-item .flowing-previews,
.contents .flowing-item:nth-child(2) .flowing-previews,
.contents .flowing-item:nth-child(3) .flowing-previews {
  top: 50% !important;
  right: clamp(24px, 2.5vw, 48px) !important;
  bottom: auto !important;
  height: min(70%, 132px) !important;
  align-items: center;
}

.contents .flowing-item .flowing-previews img {
  width: auto;
  height: 100%;
  max-width: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
}

/* Remove only the annotated rule above the achievements block. */
#capabilities .achievement-block {
  border-top: 0;
}

/* Keep the annotated capability introduction to exactly two lines. */
#capabilities [data-editor-id="capabilities-intro"] {
  width: 930px !important;
  max-width: 930px !important;
}

/* Preserve the saved homepage position while keeping the last character visible. */
main > #aigc .qinghua-result-copy > p {
  width: 590px !important;
  max-width: 590px !important;
  overflow: visible !important;
  font-weight: 300 !important;
}

@media (min-width: 901px) {
  main > #aigc .qinghua-result-copy {
    margin-top: -149px !important;
  }
}

/* Remove only the annotated link below the public-account long-image presentation. */
main > #visual .continuous-long-copy.home-project-copy > .home-project-link {
  display: none !important;
}

/* Nuclear poster and its project copy share one row: poster left, copy directly right. */
#detail-nuclear.continuous-project {
  grid-template-rows: auto auto auto auto auto;
}

#detail-nuclear .detail-hero > h1 {
  grid-row: 2;
  margin-bottom: clamp(48px, 5vw, 78px);
}

#detail-nuclear .detail-hero > .detail-intro-label {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin-top: 0;
}

#detail-nuclear .detail-hero > p {
  grid-column: 2;
  grid-row: 4;
}

#detail-nuclear .detail-project-notes {
  grid-column: 2;
  grid-row: 5 !important;
  margin-bottom: clamp(72px, 8vw, 126px);
}

#detail-nuclear > .poster-reveal {
  grid-column: 1 !important;
  grid-row: 3 / span 3 !important;
  align-self: start;
  width: 100%;
  min-height: 0;
  margin: 0;
}

#detail-nuclear > .poster-reveal > .reveal-poster {
  justify-items: start;
  width: 100%;
  height: auto;
  min-height: 0;
}

#detail-nuclear > .poster-reveal > .reveal-poster > img {
  width: auto;
  max-width: min(100%, 700px);
  max-height: 820px;
}

/* Qinghua detail keeps the page for the posters only; homepage copy is unchanged. */
#detail-qinghua .qinghua-showcase > .qinghua-result-copy {
  display: none !important;
}

#detail-qinghua .qinghua-stage {
  width: 100%;
}

@media (max-width: 900px) {
  #capabilities [data-editor-id="capabilities-intro"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .contents .flowing-item,
  .contents .flowing-item:is(:hover, :focus-visible, :focus-within) {
    height: 120px !important;
  }

  main > #aigc .qinghua-result-copy > p {
    width: auto !important;
    max-width: 100% !important;
  }

  #detail-nuclear .detail-hero > h1,
  #detail-nuclear .detail-hero > .detail-intro-label,
  #detail-nuclear .detail-hero > p,
  #detail-nuclear .detail-project-notes,
  #detail-nuclear > .poster-reveal {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #detail-nuclear > .poster-reveal {
    margin-bottom: 64px;
  }

  #detail-nuclear > .poster-reveal > .reveal-poster {
    justify-items: center;
  }

  #detail-nuclear > .poster-reveal > .reveal-poster > img {
    max-width: 92vw;
    max-height: 78vh;
  }
}