/* Revised 5000 x 2800 coordination illustration with live localized copy.
   The normalized 2048 x 1146.88 scene uses x=362..1710 as its foreground
   frame, aligned to the existing website gutters. Compact flow is retained. */
#network { font-family: var(--site-font); }

@media (min-width: 1400px) {
  html body.homeostasis-reference-page #network {
    padding-block: 0;
    overflow: clip;
    background: #fff;
  }
  #network > .hr-shell {
    --coordination-unit: calc(100cqw / 1348);
    position: relative;
    display: block;
    container-type: inline-size;
    aspect-ratio: 1348 / 1146.88;
    isolation: isolate;
  }
  #network > .hr-shell::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    height: calc(1146.88 * var(--coordination-unit));
    left: -26.854599%;
    width: 151.928783%;
    background: url("../images/homeostasis-20260916/coordination-reference-clean.png?v=20261014") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  /* Copy follows its real height; longer localized headings cannot overlap. */
  #network .hr-intro {
    position: relative;
    padding-block: calc(255.072 * var(--coordination-unit)) calc(254 * var(--coordination-unit));
    width: calc(368 * var(--coordination-unit));
    max-width: none;
    --site-type-h2: calc(54 * var(--coordination-unit));
    --site-line-h2: 1.23;
    --site-letter-h2: -.025em;
    --arotec-body-size: calc(20 * var(--coordination-unit));
    --arotec-body-line-height: 1.23;
  }
  html body.homeostasis-reference-page #main #network .hr-kicker {
    position: static;
    width: 100%;
    padding: 0 0 calc(10 * var(--coordination-unit));
    margin: 0 !important;
    border-bottom: calc(1.4 * var(--coordination-unit)) solid #526db3;
    --arotec-body-size: calc(14.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.3;
    font-weight: 600 !important;
    letter-spacing: .035em;
  }
  html body.homeostasis-reference-page #main #network h2 {
    position: static;
    width: 100%;
    margin: calc(29 * var(--coordination-unit)) 0 0 !important;
    text-wrap: wrap !important;
  }
  #network .hr-intro > p:not(.hr-kicker) {
    position: static;
    margin: calc(33 * var(--coordination-unit)) 0 0 !important;
    width: calc(360 * var(--coordination-unit));
    text-wrap: wrap;
  }
  html body.homeostasis-reference-page #main #network .hr-word-flow {
    position: static;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(8 * var(--coordination-unit));
    margin: calc(42.4 * var(--coordination-unit)) 0 0 !important;
    padding: calc(15 * var(--coordination-unit)) 0 0 !important;
    border-top: calc(1.5 * var(--coordination-unit)) solid #526db3;
    --arotec-body-size: calc(13.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.3;
  }
  #network .hr-word-flow > li {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--coordination-unit));
    white-space: nowrap;
    font-weight: 700 !important;
    letter-spacing: -.02em;
  }
  #network .hr-word-flow .ph {
    flex: none;
    width: calc(18 * var(--coordination-unit));
    height: calc(18 * var(--coordination-unit));
    font-size: calc(18 * var(--coordination-unit));
    line-height: 1;
    color: #254589;
  }
  #network .hr-word-flow svg[data-arotec-arrow-owned="symbols"] path {
    stroke: #254589 !important;
    stroke-width: calc(1.6 * var(--coordination-unit)) !important;
  }

  #network .hr-coordination-diagram,
  #network .hr-system-top,
  #network .hr-system-center,
  #network .hr-system-side,
  #network .hr-system,
  #network .hr-brain,
  #network .hr-brain figcaption,
  #network .hr-regulation,
  #network .hr-balance-influences,
  #network .hr-factor-panel,
  #network .hr-factor-panel ul,
  #network .hr-biology,
  #network .hr-biology figcaption { display: contents; }
  /* Flattened caption containers retain no old painted surface or offset. */
  #network :is(.hr-brain, .hr-brain figcaption, .hr-regulation, .hr-biology, .hr-biology figcaption) {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
  }
  #network .hr-coordination-diagram img,
  #network .hr-coordination-diagram .ph { display: none !important; }
  #network .hr-bidirectional {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #network .hr-system > div {
    position: absolute;
    text-align: center;
    --site-type-h4: calc(17.5 * var(--coordination-unit));
    --site-line-h4: 1.15;
    --site-letter-h4: -.025em;
    --arotec-body-size: calc(12.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.2;
  }
  html body.homeostasis-reference-page #main #network .hr-system h4 {
    margin: 0 0 calc(3 * var(--coordination-unit)) !important;
    text-wrap: wrap !important;
  }
  #network .hr-system p { text-wrap: wrap; }
  #network .hr-system-top .hr-system:nth-child(1) > div {
    left: calc(444 * var(--coordination-unit));
    top: calc(196.072 * var(--coordination-unit));
    width: calc(220 * var(--coordination-unit));
  }
  #network .hr-system-top .hr-system:nth-child(2) > div {
    left: calc(715 * var(--coordination-unit));
    top: calc(174.072 * var(--coordination-unit));
    width: calc(250 * var(--coordination-unit));
  }
  #network .hr-system-top .hr-system:nth-child(3) > div {
    left: calc(995 * var(--coordination-unit));
    top: calc(196.072 * var(--coordination-unit));
    width: calc(256 * var(--coordination-unit));
    --arotec-body-size: calc(11.5 * var(--coordination-unit));
  }
  #network .hr-system-side:first-child .hr-system:nth-child(1) > div {
    left: calc(378 * var(--coordination-unit));
    top: calc(334.072 * var(--coordination-unit));
    width: calc(200 * var(--coordination-unit));
  }
  #network .hr-system-side:first-child .hr-system:nth-child(2) > div {
    left: calc(382 * var(--coordination-unit));
    top: calc(524.072 * var(--coordination-unit));
    width: calc(198 * var(--coordination-unit));
  }
  #network .hr-system-side:last-child .hr-system:nth-child(1) > div {
    left: calc(1079 * var(--coordination-unit));
    top: calc(339.072 * var(--coordination-unit));
    width: calc(270 * var(--coordination-unit));
    --arotec-body-size: calc(11.5 * var(--coordination-unit));
  }
  #network .hr-system-side:last-child .hr-system:nth-child(2) > div {
    left: calc(1106 * var(--coordination-unit));
    top: calc(527.072 * var(--coordination-unit));
    width: calc(242 * var(--coordination-unit));
    --site-type-h4: calc(16.5 * var(--coordination-unit));
    --arotec-body-size: calc(11.5 * var(--coordination-unit));
  }

  html body.homeostasis-reference-page #main #network :is(.hr-brain figcaption h4, .hr-brain figcaption p, .hr-regulation p, .hr-biology figcaption h3, .hr-biology figcaption p) {
    position: absolute;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    text-align: center;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    text-wrap: wrap !important;
  }
  #network .hr-brain figcaption h4 {
    left: calc(722 * var(--coordination-unit));
    top: calc(547.072 * var(--coordination-unit));
    width: calc(232 * var(--coordination-unit));
    --site-type-h4: calc(16.8 * var(--coordination-unit));
    --site-line-h4: 1.15;
    --site-letter-h4: -.025em;
  }
  #network .hr-brain figcaption p {
    left: calc(721 * var(--coordination-unit));
    top: calc(571.072 * var(--coordination-unit));
    width: calc(234 * var(--coordination-unit));
    --arotec-body-size: calc(11.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.2;
    letter-spacing: -.025em;
  }
  #network .hr-regulation p {
    left: calc(698 * var(--coordination-unit));
    top: calc(648.072 * var(--coordination-unit));
    width: calc(277 * var(--coordination-unit));
    height: calc(39 * var(--coordination-unit));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    --arotec-body-size: calc(18 * var(--coordination-unit));
    --arotec-body-line-height: 1.1;
    font-weight: 700 !important;
    letter-spacing: -.025em;
  }
  html body.homeostasis-reference-page #main #network .hr-biology h3 {
    left: calc(719 * var(--coordination-unit));
    top: calc(797.072 * var(--coordination-unit));
    width: calc(240 * var(--coordination-unit));
    --site-type-h3: calc(25 * var(--coordination-unit));
    --site-line-h3: 1.15;
    --site-letter-h3: -.025em;
  }
  #network .hr-biology figcaption p {
    left: calc(720 * var(--coordination-unit));
    top: calc(861.072 * var(--coordination-unit));
    width: calc(238 * var(--coordination-unit));
    --arotec-body-size: calc(12.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.7;
    letter-spacing: -.025em;
  }

  html body.homeostasis-reference-page #main #network .hr-factor-panel h3 {
    position: absolute;
    top: calc(661.072 * var(--coordination-unit));
    margin: 0 !important;
    --site-type-h3: calc(17.5 * var(--coordination-unit));
    --site-line-h3: 1.2;
    --site-letter-h3: -.025em;
    text-align: left;
    text-wrap: wrap !important;
    -webkit-text-fill-color: currentColor !important;
  }
  #network .hr-support h3 {
    left: calc(388 * var(--coordination-unit));
    width: calc(278 * var(--coordination-unit));
    color: var(--hr-green) !important;
  }
  #network .hr-load h3 {
    left: calc(1048 * var(--coordination-unit));
    width: calc(300 * var(--coordination-unit));
    color: var(--hr-red) !important;
  }
  #network .hr-factor-panel li {
    position: absolute;
    display: flex;
    align-items: center;
    min-height: calc(28 * var(--coordination-unit));
    margin: 0;
    padding: 0;
    --arotec-body-size: calc(13 * var(--coordination-unit));
    --arotec-body-line-height: 1.15;
    letter-spacing: -.025em;
  }
  #network .hr-support li { width: calc(180 * var(--coordination-unit)); }
  #network .hr-support li:nth-child(1) { left: calc(476 * var(--coordination-unit)); top: calc(696.072 * var(--coordination-unit)); }
  #network .hr-support li:nth-child(2) { left: calc(486 * var(--coordination-unit)); top: calc(745.072 * var(--coordination-unit)); }
  #network .hr-support li:nth-child(3) { left: calc(492 * var(--coordination-unit)); top: calc(796.072 * var(--coordination-unit)); }
  #network .hr-support li:nth-child(4) { left: calc(494 * var(--coordination-unit)); top: calc(850.072 * var(--coordination-unit)); }
  #network .hr-support li:nth-child(5) { left: calc(500 * var(--coordination-unit)); top: calc(904.072 * var(--coordination-unit)); }
  #network .hr-load li { width: calc(191 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(1) { left: calc(1140 * var(--coordination-unit)); top: calc(689.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(2) { left: calc(1161 * var(--coordination-unit)); top: calc(725.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(3) { left: calc(1163 * var(--coordination-unit)); top: calc(763.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(4) { left: calc(1162 * var(--coordination-unit)); top: calc(800.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(5) { left: calc(1162 * var(--coordination-unit)); top: calc(837.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(6) { left: calc(1158 * var(--coordination-unit)); top: calc(876.072 * var(--coordination-unit)); }
  #network .hr-load li:nth-child(7) { left: calc(1161 * var(--coordination-unit)); top: calc(918.072 * var(--coordination-unit)); }
  html body.homeostasis-reference-page #main #network .hr-factor-conclusion {
    position: absolute;
    top: calc(958.072 * var(--coordination-unit));
    margin: 0 !important;
    padding: 0;
    border: 0;
    --arotec-body-size: calc(13.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.2;
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: -.025em;
    -webkit-text-fill-color: currentColor !important;
  }
  #network .hr-support .hr-factor-conclusion {
    left: calc(425 * var(--coordination-unit));
    width: calc(250 * var(--coordination-unit));
    color: var(--hr-green) !important;
  }
  #network .hr-load .hr-factor-conclusion {
    left: calc(1086 * var(--coordination-unit));
    width: calc(262 * var(--coordination-unit));
    color: var(--hr-red) !important;
  }
  /* Keep longer Thai captions inside their illustration callouts. */
  html[lang="th"] body.homeostasis-reference-page #main #network .hr-load h3 {
    --site-type-h3: calc(13.5 * var(--coordination-unit));
  }
  html[lang="th"] #network .hr-brain figcaption p {
    left: calc(736 * var(--coordination-unit));
    width: calc(204 * var(--coordination-unit));
  }
  html[lang="th"] #network .hr-biology figcaption p {
    left: calc(736 * var(--coordination-unit));
    top: calc(850 * var(--coordination-unit));
    width: calc(206 * var(--coordination-unit));
    --arotec-body-size: calc(11.5 * var(--coordination-unit));
    --arotec-body-line-height: 1.5;
  }
}