/*
 * Sitewide responsive layer.
 * Fluid values handle the ordinary resizing; media queries only change layout
 * when the available space genuinely requires a different composition.
 */
:root {
  --responsive-gutter: clamp(20px, 3.25vw, 72px);
  --responsive-section: clamp(68px, 7vw, 132px);
  --responsive-section-tight: clamp(56px, 5.5vw, 104px);
  --responsive-rule-gap: clamp(22px, 2.1vw, 34px);
  --home-heading-offset: clamp(72px, 5.5vw, 108px);
}

html { overflow-x: clip; }
body { min-width: 0; }
main { overflow: clip; }

#main :is(h1, h2, h3) { text-wrap: balance; }
#main :is(p, li, figcaption) { text-wrap: pretty; }
#main :is(h1, h2, h3)[id] { scroll-margin-top: calc(var(--masthead-height, 80px) + 24px); }
:is(a, button, summary, input, select, textarea) { touch-action: manipulation; }

@media (min-width: 801px) {
  :root {
    --site-gutter: var(--responsive-gutter);
    --masthead-height: clamp(80px, 5vw, 100px);
  }

  .site-header {
    --masthead-height: clamp(80px, 5vw, 100px);
    height: var(--masthead-height);
  }
  .site-header .brand { width: clamp(300px, 21vw, 372px); }
  .site-header nav { gap: clamp(20px, 1.65vw, 34px); }
  .site-header nav a { font-size: clamp(16px, 1.02vw, 19px); }

  main.is-home .hero,
  main.is-home .hero-copy {
    min-height: clamp(680px, calc(100svh - var(--masthead-height)), 900px);
  }
  main.is-home .hero-copy {
    width: min(850px, 61vw);
    padding-block: clamp(82px, 8svh, 126px);
  }

  .page-hero {
    min-height: clamp(460px, max(43vw, 52svh), 720px);
  }
  .page-hero__content {
    width: min(800px, 68vw);
    padding-block: clamp(82px, 9svh, 148px);
  }

  .home-operations,
  .home-partners,
  .home-news,
  .news-archive {
    padding-block: var(--responsive-section);
  }
  .home-cta { padding-block: var(--responsive-section-tight); }

  /* The network stage grows with both viewport height and width. */
  .home-strength {
    height: clamp(720px, max(72svh, 43vw), 1000px);
    min-height: 0;
    grid-template-columns: clamp(220px, 17vw, 310px) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 58px);
    padding-block: clamp(64px, 6.4svh, 100px);
  }
  .network-canvas {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .meta-showcase--system-image {
    padding-top: clamp(82px, 7.4vw, 132px);
    padding-bottom: clamp(76px, 6vw, 112px);
  }
  .jm-system-heading { margin-bottom: clamp(22px, 2vw, 34px); }

  .section,
  .about-profile--brief,
  .about-chronicle--story,
  .culture-section,
  .contact-section,
  .careers-section {
    --section-fluid-block: var(--responsive-section);
  }
}

/* Short laptop screens keep the proven compact rhythm. */
@media (min-width: 801px) and (max-height: 820px) {
  main.is-home .hero,
  main.is-home .hero-copy {
    min-height: clamp(640px, calc(100svh - var(--masthead-height)), 720px);
  }
  main.is-home .hero-copy { padding-block: 72px; }
  .page-hero { min-height: clamp(410px, 62svh, 560px); }
  .page-hero__content { padding-block: clamp(68px, 9svh, 92px); }
  .home-strength {
    height: clamp(680px, calc(100svh - 48px), 720px);
    padding-block: clamp(54px, 6svh, 68px);
  }
}

/* The first structural step: compact desktop and landscape tablets. */
@media (min-width: 801px) and (max-width: 1100px) {
  :root { --responsive-gutter: clamp(28px, 4vw, 44px); }
  .site-header .brand { width: clamp(250px, 27vw, 300px); }
  .site-header nav { gap: clamp(13px, 1.45vw, 18px); }
  .site-header nav a { font-size: clamp(14px, 1.5vw, 16px); }
  .home-strength {
    grid-template-columns: clamp(190px, 22vw, 230px) minmax(0, 1fr);
    gap: 20px;
  }
  .strength-heading h2 { font-size: clamp(48px, 5.4vw, 58px); }
}

/* Wide desktop: add breathing room and visual scale, not oversized text. */
@media (min-width: 1440px) {
  .home-strength {
    height: clamp(800px, max(72svh, 43vw), 1000px);
  }
  .network-canvas { max-width: 1380px; justify-self: end; }
  .operations-relay,
  .partner-logo-wall,
  .home-news-list { min-height: 0; }
}

@media (min-width: 1920px) and (min-height: 1000px) {
  main.is-home .hero,
  main.is-home .hero-copy { min-height: clamp(840px, calc(100svh - var(--masthead-height)), 960px); }
  .page-hero { min-height: clamp(620px, 58svh, 760px); }
  .strength-heading h2 { font-size: clamp(66px, 3.8vw, 82px); }
  .network-node text { font-size: 16px; }
  .network-node.hub text { font-size: 19px; }
}

/* Ultra-wide monitors retain the readable 1720px frame. */
@media (min-width: 2400px) {
  :root { --responsive-gutter: 72px; }
  .hero-art { background-position: center 52%; }
  .home-strength { grid-template-columns: 320px minmax(0, 1fr); }
}

/* Tablet and phone share a compact masthead and natural document flow. */
@media (max-width: 800px) {
  :root {
    --responsive-section: clamp(62px, 10vw, 82px);
    --responsive-section-tight: clamp(54px, 8vw, 70px);
    --home-heading-offset: clamp(58px, 9vw, 72px);
    --masthead-height: clamp(68px, 9.5vw, 74px);
  }
  .site-header {
    --masthead-height: clamp(68px, 9.5vw, 74px);
    height: var(--masthead-height);
    padding-inline: clamp(18px, 4vw, 28px);
  }
  .site-header .brand { width: clamp(202px, 50vw, 270px); }
  .site-header nav { top: var(--masthead-height); }
  .site-header nav.open { padding-inline: clamp(18px, 4vw, 28px); }

  main.is-home .hero,
  main.is-home .hero-copy {
    min-height: clamp(620px, calc(100svh - var(--masthead-height)), 720px);
  }
  main.is-home .hero-copy {
    padding: clamp(72px, 12vw, 96px) clamp(20px, 6vw, 42px) clamp(76px, 13vw, 110px);
  }
  .page-hero { min-height: clamp(390px, 62vw, 500px); }
  .page-hero__content {
    width: 100%;
    padding: clamp(76px, 12vw, 100px) clamp(20px, 6vw, 42px) clamp(60px, 9vw, 78px);
  }

  .home-operations,
  .home-partners,
  .home-news,
  .news-archive { padding-block: var(--responsive-section); }
  .home-cta { padding-block: var(--responsive-section-tight); }
  .home-strength {
    height: auto;
    min-height: 0;
    padding: var(--responsive-section) clamp(20px, 5vw, 34px);
  }
  .network-canvas { margin-top: clamp(30px, 6vw, 44px); }
  .meta-showcase--system-image {
    padding: var(--responsive-section) clamp(20px, 5vw, 34px) var(--responsive-section-tight);
  }
}

/* Tablet: keep the geographical map and remove the duplicate city ledger. */
@media (min-width: 521px) and (max-width: 800px) {
  .network-map-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }
  .network-mobile-grid { display: none; }
  .network-map-svg .network-node text { display: block; }
  .network-canvas { aspect-ratio: 1.62 / 1; }
}

/* Phone: use the legible city ledger instead of shrinking the map into noise. */
@media (max-width: 520px) {
  .network-map-svg { display: none; }
  .network-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .strength-heading h2 { font-size: clamp(38px, 11vw, 46px); }
  .home-news-card,
  .home-news-card.is-featured { min-height: clamp(250px, 78vw, 360px); }
  .partner-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .site-header .brand { width: clamp(190px, 58vw, 220px); }
  .site-header .nav-toggle { min-width: 42px; min-height: 42px; }
  main.is-home .hero-copy { padding-inline: 18px; }
  .network-mobile-grid span { min-height: 58px; padding: 13px 12px; font-size: 15px; }
}

/* Keep this final so older module-specific padding cannot shift title starts. */
.home-operations,
.meta-showcase--system-image,
.home-partners,
.home-news {
  padding-top: var(--home-heading-offset);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}