/* Two input domains, drawn as the data the kernel checked, on the same black page as the zeta landscape. */
.network-project { overflow: visible; }
.network-feature { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; padding: 40px 0 27px; }
.network-symbol { font: 500 24px/1 var(--sans); color: var(--accent); letter-spacing: -.02em; }
.network-research-content { min-width: 0; }
.network-research-content .plain-explainer { margin-inline: 0; }

.network-domains { position: relative; min-width: 0; margin: 0; background: #000; }
.network-domains-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.domain { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.domain img { width: 100%; height: auto; aspect-ratio: 1; cursor: crosshair; touch-action: pan-y; }
.domain[data-domain='pairs'] img { image-rendering: pixelated; outline: 1px solid var(--line); outline-offset: -1px; }
.domain-tag, .domain-foot { font: 9px/1.6 var(--mono); }
.domain-tag { color: var(--accent); }
.domain-foot { color: var(--quiet); }
.domain[data-domain='leaves'] .domain-tag { color: var(--muted); }
/* The pointed cell or leaf, drawn over the image in page space. */
.domain-mark { position: absolute; pointer-events: none; border: 1px solid var(--text); box-shadow: 0 0 0 1px #000; opacity: 0; transition: opacity .15s; }
.domain[data-active] .domain-mark { opacity: 1; }

/* The same reserved control row as the zeta surface, so the two research sections sit on one grid. */
.network-domains-controls { display: flex; align-items: center; min-height: 59px; padding: 7px 0; margin-top: 12px; border-bottom: 1px solid var(--line); }
#network-domains-status { color: var(--muted); font: 10px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
#network-domains-status b { color: var(--text); font-weight: 500; }
.network-domains > figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.8; }

@media (max-width: 760px) {
  .network-feature { gap: 29px; padding: 28px 0 23px; }
  .network-domains-stage { gap: 14px; }
  .domain-tag, .domain-foot { font-size: 8px; }
  .network-domains-controls { min-height: 74px; }
  #network-domains-status { font-size: 9px; }
  .network-research-content .project-invitation { display: block; padding-top: 22px; }
}

/* The scene belongs to this article, so the next project pushes it away. */
@media (min-width: 1100px) and (min-height: 650px) {
  .network-feature {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.35fr);
    grid-template-areas: 'intro scene' 'research scene';
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: 64px;
    padding-block: 48px 32px;
  }
  .network-feature > .project-copy { grid-area: intro; }
  .network-feature > .network-research-content { grid-area: research; }
  .network-feature > .network-domains { grid-area: scene; position: sticky; top: 104px; align-self: start; }
  .network-research-content .theorem-result { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 0; padding-block: 30px 24px; }
  .network-research-content .theorem-number { font-size: clamp(54px, 5.5vw, 80px); }
  .network-research-content .theorem-result > figcaption { font-size: 13px; }
  .network-research-content .project-invitation { display: block; padding-block: 25px 0; }
  .network-research-content .project-invitation p { margin-bottom: 20px; }
}