/* One page and one map for every screen size. */
@media (max-width: 640px) {
  /* Keep the fixed viewport stage outside a size-containment context on iOS. */
  .screen { padding: 24px 20px 0; }
  .section-meta { font-size: 11px; gap: 16px; align-items: flex-start; }
  .section-meta > p:last-child { font-size: 11px; line-height: 1.45; max-width: 42%; }
  .section-meta > .eyebrow { text-align: left; }
  .section-meta > .eyebrow:only-child { max-width: 100%; text-align: left; }
  .eyebrow { max-width: 58%; white-space: normal; gap: 8px; }
  .eyebrow:after { width: 22px; flex-shrink: 0; }
  .hero { height: auto; min-height: 0; }
  .wordmark { font-size: 15.5vw; letter-spacing: normal; margin-top: 32px; line-height: 1.05; }
  .wordmark-dot { width: 8px; height: 8px; margin-left: 10px; }
  .hero-story { display: block; margin-top: 32px; }
  .hero-story h2 { font-size: clamp(28px, 7.9vw, 44px); line-height: 1.1; letter-spacing: normal; }
  .hero-copy { padding-top: 24px; max-width: none; }
  .hero-copy .lead { font-size: 17px; line-height: 1.45; max-width: none; }
  .hero-copy .support { font-size: 14px; line-height: 1.5; margin-top: 14px; max-width: none; }
  .hero-copy .text-link { margin-top: 16px; min-height: 44px; }
  .text-link { font-size: 15px; gap: 14px; min-height: 44px; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); margin-top: 24px; padding-top: 0; row-gap: 0; }
  .principles article { padding: 16px 14px; row-gap: 10px; }
  .principles article:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .principles article:nth-child(odd) { padding-left: 0; }
  .principles article:nth-child(even) { padding-right: 0; }
  .principles article:nth-child(3):before { display: none; }
  .principles h3 { font-size: 15px; line-height: 1.3; }
  .principles p { font-size: 13px; line-height: 1.5; margin-top: 0; }
  .system { display: block; height: auto; min-height: 0; overflow: visible; padding-top: 0; padding-bottom: 0; }
  .hero + .system { margin-top: 24px; }
  .system .section-meta { margin-bottom: 0; gap: 12px; }
  .system .eyebrow { max-width: none; }
  .system .eyebrow:after { display: none; }
  .map-open { font-size: 14px; gap: 8px; flex-shrink: 0; }
  .map-open .arrow-icon { width: 24px; height: 24px; }
  .map-canvas {
    display: block;
    position: relative;
    inset: auto;
    height: auto;
    width: calc(100% + 40px);
    aspect-ratio: 1416 / 1992;
    margin: 18px -20px 0;
    overflow: visible;
  }
  .system .network { position: static; width: 100%; height: 100%; max-height: none; margin: 0; transform: none; }
  .system .network .leaf-label, .detail-map .network .leaf-label { font-size: 24px; }
  .system .network .hub-label, .detail-map .network .hub-label { font-size: 26px; }
  .network [data-discipline="design"] .hub-label, .network [data-discipline="construction"] .hub-label { font-size: 24px; }
  .network .core-system { font-size: 21px; }
  .network .core-brand { font-size: 40px; }
  .network .core-description { font-size: 18px; }
  .network [data-discipline] .hub-label { transform: none; }
  .detail-map .network { width: 1416px; height: 1992px; }
  .result { display: block; height: auto; min-height: 0; padding: 28px 20px 0; }
  .result .section-meta { display: block; }
  .result h2 { font-size: clamp(28px, 7.6vw, 44px); line-height: 1.15; letter-spacing: normal; margin-top: 30px; max-width: none; }
  .desktop-break { display: none; }
  .home-photo { display: grid; grid-template-rows: auto auto; height: auto; max-height: none; margin-top: 26px; aspect-ratio: auto; gap: 12px; }
  .home-photo img { height: auto; aspect-ratio: 4/3; object-position: 54% 50%; }
  .result-caption { align-items: flex-start; flex-direction: column; gap: 14px; font-size: 22px; }
  .result-caption .project-cta { width: 100%; min-height: 53px; font-size: 16px; margin-top: 0; padding: 15px 19px; gap: 25px; }
  .result { padding-bottom: 40px; }
}
@media (max-width: 359px) {
  .result-caption .project-cta { font-size: 15px; gap: 16px; }
}