/* Desktop and tablet layout: both viewport dimensions constrain the type.
   Phone layout is part of the same page, in responsive.css. */
@media (min-width: 641px) {
  :root { --gutter: clamp(24px, 2.95vw, 64px); }
  .screen { padding-top: clamp(18px, 2.4svh, 30px); }
  .section-meta { font-size: clamp(13px, 1vw, 18px); }
  .wordmark {
    font-size: clamp(92px, min(13vw, 22svh), 236px);
    margin-top: clamp(18px, 2.8svh, 32px);
  }
  .hero-story { margin-top: clamp(24px, 5svh, 56px); }
  .hero-story h2 {
    font-size: clamp(32px, min(3.65vw, 6.1svh), 70px);
    line-height: 1.09;
  }
  .hero-copy { padding-top: 4px; }
  .hero-copy .lead { font-size: clamp(17px, min(1.3vw, 2.35svh), 24px); }
  .hero-copy .support {
    font-size: clamp(14px, 1vw, 18px);
    margin-top: clamp(14px, 2svh, 24px);
  }
  .hero-copy .text-link { margin-top: clamp(16px, 2.4svh, 30px); }
  .text-link { min-height: 44px; font-size: clamp(15px, 1.05vw, 19px); }
  .principles { padding-top: clamp(24px, 4svh, 44px); }
  .principles article { padding-top: clamp(16px, 2.2svh, 24px); }
  .principles h3 { font-size: clamp(15px, 1.15vw, 21px); line-height: 1.3; }
  .principles p { font-size: clamp(13px, 1vw, 17px); line-height: 1.45; margin-top: 10px; }
  .page-number { font-size: 12px; padding: clamp(18px, 2.5svh, 28px) 0 14px; }
  .system { height: 100svh; min-height: 560px; }
  .map-canvas { inset: 46px 0 66px; display: flex; align-items: center; justify-content: center; }
  .system .network { width: 100%; margin-left: 0; max-height: 1000px; }
  .system .network .leaf-label { font-size: 19px; }
  .map-footer { bottom: 28px; font-size: clamp(13px, 1vw, 18px); }
  .system .page-number { bottom: 14px; }
  .result {
    height: 100svh;
    min-height: 580px;
    padding-bottom: 14px;
    display: grid;
    grid-template-rows: auto auto minmax(140px, 1fr) auto auto;
    row-gap: clamp(14px, 2.5svh, 28px);
  }
  .result h2 {
    font-size: clamp(32px, min(3.55vw, 5.65svh), 68px);
    line-height: 1.1;
    margin-top: 0;
    max-width: 100%;
  }
  .home-photo {
    height: 100%;
    min-height: 0;
    max-height: 440px;
    aspect-ratio: auto;
    margin-top: 0;
    align-self: center;
  }
  .result-bottom { margin: 0; }
  .result-bottom > p { font-size: clamp(20px, 1.5vw, 28px); }
  .project-cta { font-size: clamp(16px, 1.1vw, 20px); padding: 15px 24px; min-height: 50px; flex-shrink: 0; }
  .result .page-number { padding: 0; margin: 0; }
}

/* Only decoration pulses; underlying branches and every label remain visible. */
.network .branch-pulse {
  fill: none;
  stroke: #e49657;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 8 118;
  stroke-opacity: .34;
  pointer-events: none;
  animation: branch-flow var(--pulse-duration, 8s) linear infinite;
  animation-delay: var(--pulse-delay, 0s);
  animation-play-state: paused;
}
.network .branch-pulse.reverse { animation-direction: reverse; }
.network.is-in-view .branch-pulse { animation-play-state: running; }
.network .neural-pulse {
  animation: signal-breathe var(--signal-breathe-duration, 5.8s) ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
  animation-play-state: paused;
}
.network.is-in-view .neural-pulse { animation-play-state: running; }
@keyframes branch-flow {
  from { stroke-dashoffset: 126; }
  to { stroke-dashoffset: 0; }
}
@keyframes signal-breathe {
  0%, 100% { opacity: .35; }
  50% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .network .branch-pulse { display: none; animation: none; }
  .network .neural-pulse { animation: none; }
}