/* Desktop research-article density, calibrated against Dyna-2. */
.hero-title-stage {
  display: contents;
}

@media (min-width: 761px) {
  :root {
    --reading: 760px;
    --section-title-width: 920px;
    --figure-width: 1040px;
  }

  .site-header {
    min-height: 72px;
  }

  .brand {
    width: 222px;
    height: 50px;
  }

  html[data-lang="zh"] .brand {
    width: 210px;
  }

  .brand img {
    flex-basis: 180px;
  }

  html[data-lang="zh"] .brand img {
    flex-basis: 168px;
  }

  .brand-lab {
    font-size: 16px;
  }

  .article-hero {
    padding-top: clamp(82px, 7vw, 112px);
    padding-bottom: clamp(92px, 8vw, 124px);
  }

  .edition {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .article-hero h1,
  html[data-lang="en"] .article-hero h1 {
    max-width: 1040px;
    font-size: clamp(54px, 5.2vw, 72px);
    line-height: 1;
  }

  .hero-thesis,
  html[data-lang="en"] .hero-thesis {
    width: min(1040px, 100%);
    margin-top: 26px;
    font-size: clamp(28px, 2.7vw, 38px);
    line-height: 1.16;
  }

  .dek,
  html[data-lang="en"] .dek {
    width: min(650px, 64%);
    margin-top: 26px;
    font-size: 18px;
    line-height: 1.62;
  }

  .article-meta {
    max-width: 1040px;
    margin-top: 44px;
  }

  .article-meta div {
    min-height: 78px;
    padding: 16px 18px 14px;
  }

  .article-meta div > span {
    font-size: 13px;
  }

  .article-meta strong {
    font-size: 15px;
  }

  .hero-media {
    width: min(1040px, calc(100vw - var(--toc-rail) - 48px));
    margin-top: 64px;
    margin-left: max(
      calc(50% - 520px),
      calc(50% - 50vw + var(--toc-half) + 24px)
    );
  }

  .article-section {
    padding-top: clamp(92px, 8vw, 118px);
    padding-bottom: clamp(92px, 8vw, 118px);
  }

  .section-index {
    margin-bottom: 42px;
    font-size: 14px;
  }

  .section-index > span:first-child {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .section-intro {
    gap: 28px;
  }

  .section-intro h2,
  html[data-lang="en"] .section-intro h2 {
    max-width: 920px;
    font-size: clamp(38px, 3.1vw, 46px);
    line-height: 1.08;
  }

  html[data-lang="zh"] .outlook-intro-title-zh {
    font-size: clamp(38px, 3.1vw, 46px);
  }

  .section-intro p {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.66;
  }

  .editorial-copy {
    width: min(680px, 100%);
    margin-top: 48px;
    gap: 22px;
  }

  .editorial-copy p {
    font-size: 17px;
    line-height: 1.72;
  }

  .editorial-copy p + p {
    padding-top: 20px;
  }

  .chapter-divider {
    min-height: clamp(320px, 42svh, 440px);
    padding-top: clamp(60px, 6vw, 84px);
    padding-bottom: clamp(60px, 6vw, 84px);
  }

  .chapter-divider .chapter-heading {
    width: min(100%, 1040px);
  }

  .chapter-divider .chapter-number {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .chapter-divider .chapter-heading h2,
  html[data-lang="en"] .chapter-infrastructure .chapter-heading h2 {
    font-size: clamp(60px, 7vw, 92px);
    letter-spacing: -0.055em;
    line-height: 0.94;
  }

  .chapter-divider .chapter-subtitle {
    max-width: 760px;
    margin-top: 22px;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.34;
  }

  .article-section > .introduction-loop,
  .article-section > .continuity-figure,
  .article-section > .model-figure-v3,
  .article-section > .scaling-figure,
  .article-section > .infrastructure-figure-v2,
  .article-section > .model-demo-reel,
  .article-section > .distribution-atlas {
    margin-top: clamp(48px, 5vw, 68px);
  }

  .task-landscape-head h2,
  .capture-copy h3,
  .distribution-atlas .field-copy h3,
  .model-insight h3,
  .data-agent-copy h3,
  .closing h2 {
    font-size: clamp(32px, 2.8vw, 40px);
    line-height: 1.08;
  }

  .task-copy h3 {
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.16;
  }

  .thesis {
    margin-top: 76px;
    margin-bottom: 76px;
    padding: 42px 48px 46px;
  }

  .thesis p {
    font-size: clamp(34px, 3.4vw, 48px);
  }

  .model-demo-reel {
    gap: 22px;
    padding: clamp(20px, 2.4vw, 30px);
  }

  .model-demo-copy {
    padding-bottom: 18px;
  }
}

/* On 27-inch 2K displays, use the available canvas instead of leaving a
   second empty rail between the fixed TOC and the reading column. */
@media (min-width: 1600px) {
  :root {
    --reading: 980px;
    --section-title-width: 980px;
  }
}

/* Keep the title as its own first-screen composition on laptops and desktops. */
@media (min-width: 901px) {
  .article-hero {
    padding-top: 0;
  }

  .hero-title-stage {
    display: flex;
    min-height: calc(100svh - 72px);
    padding-top: clamp(92px, 12svh, 144px);
    padding-bottom: clamp(108px, 14svh, 168px);
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
  }

  .hero-media {
    margin-top: clamp(104px, 14svh, 168px);
  }
}

/* Keep the ending deliberate without forcing it to occupy an entire viewport. */
.closing {
  min-height: 0;
  padding-top: clamp(72px, 7vw, 104px);
  padding-bottom: clamp(80px, 8vw, 116px);
}

.closing h2 { margin-top: 28px; }
.closing a { margin-top: 42px; }

@media (max-width: 760px) {
  .brand,
  html[data-lang="zh"] .brand {
    width: 184px;
    height: 51px;
  }

  .brand img,
  html[data-lang="zh"] .brand img {
    flex-basis: 138px;
  }

  .brand-lab {
    font-size: 13px;
  }

  .closing {
    min-height: 0;
    padding: 56px 16px 68px;
  }

  .closing h2 { margin-top: 22px; }
  .closing a { margin-top: 32px; }
}

@media (max-width: 340px) {
  .brand,
  html[data-lang="zh"] .brand {
    width: 150px;
    height: 46px;
  }

  .brand img,
  html[data-lang="zh"] .brand img {
    flex-basis: 108px;
  }

  .brand-lab {
    font-size: 11px;
  }
}