/* =========================================================
   SIAM NETWORK
   Shared by homepage + What Is SIAM?
   ========================================================= */

.network-section {
  padding: 90px 0 120px;
  border-top: 1px solid var(--ink);
}

.network-section > .fig-label {
  text-align: left;
}

.network-section > h2 {
  margin-top: 18px;
  text-align: left;
}


/* =========================================================
   GRAPH
   ========================================================= */

.chapter-graph {
  width: 100%;
  max-width: 1100px;
  margin: 35px auto 0;
}

.network-svg {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   GRAPH EDGES
   ========================================================= */

.chapter-edges line {
  stroke: var(--ink);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.siam-edges line {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.22;
  vector-effect: non-scaling-stroke;
}


/* =========================================================
   GRAPH NODES
   ========================================================= */

.network-node circle {
  fill: var(--ink);
}

.network-node text {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.network-node-iit text {
  font-weight: 500;
}

.network-sub-label {
  fill: #0066ff !important;
  color: #0066ff !important;
  font-size: 9px !important;
  letter-spacing: 0.12em;
}


/* =========================================================
   NETWORK COUNT
   ========================================================= */

.vertex-count {
  margin-top: 25px;
  text-align: center;

  font-family: var(--font-serif);
  font-size: 2.4rem !important;
  font-weight: 400;
  line-height: 1;

  letter-spacing: -0.025em;
}

.vertex-caption {
  margin-top: 10px;
  text-align: center;

  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.3;

  letter-spacing: 0.13em;
}


/* =========================================================
   EXTENDED / GHOST NETWORK
   ========================================================= */

.ghost-network {
  pointer-events: none;
}

.ghost-edges line {
  stroke: var(--ink);
  vector-effect: non-scaling-stroke;
}

.ghost-edges-faint line {
  stroke-width: 0.75;
  opacity: 0.10;
}

.ghost-edges-near line {
  stroke-width: 0.85;
  opacity: 0.16;
}

.ghost-nodes circle {
  fill: var(--ink);
}

.ghost-nodes-faint circle {
  opacity: 0.14;
}

.ghost-nodes-near circle {
  opacity: 0.22;
}


/* =========================================================
   CLICKABLE NETWORK NODES
   ========================================================= */

.network-node-link {
  text-decoration: none;
  color: inherit;
}

.network-node-link .network-node {
  cursor: pointer;
}

.network-node-link circle {
  transform-box: fill-box;
  transform-origin: center;

  transition:
    transform 140ms ease,
    opacity 140ms ease;
}

.network-node-link text {
  transition: opacity 140ms ease;
}

.network-node-link:hover {
  opacity: 1;
}

.network-node-link:hover circle {
  transform: scale(1.35);
}

.network-node-link:hover text {
  opacity: 0.6;
}

@media (max-width: 900px) {

  .chapter-graph {
    width: calc(100% + 80px);
    margin-left: -40px;
    margin-top: 40px;
  }

  .network-svg {
    width: 100%;
    height: auto;
  }

  .network-node text {
    font-size: 30px;
  }

  .network-sub-label {
    font-size: 25px !important;
  }

  .network-node circle {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.2);
  }

  .vertex-count {
    margin-top: 36px;
    font-size: 1.7rem !important;
  }

  .vertex-caption {
    margin-top: 14px;
    font-size: 0.72rem;
  }

}

/* -------------------------------------------------------
   MOBILE NODE LABEL POSITIONING
   ------------------------------------------------------- */

/* Loyola label */
.network-node-link[data-chapter="loyola"] text {
  transform: translateY(8px);
}

/* IIT */
.network-node-iit text {
  transform: translateY(8px);
}

/* YOU ARE HERE — lower than IIT */
.network-node-iit .network-sub-label {
  transform: translateY(16px);
}
/* SIAM label */
.network-node-link[data-chapter="siam"] text {
  transform: translateY(8px);
}

/* UIUC label */
.network-node-link[data-chapter="uiuc"] text {
  transform: translateY(8px);
}