.stala-net,
.stala-directory {
  --net-ink: #292521;
  --net-accent: #c15139;
  --net-rule: #d9d1c4;
  width: 100%;
  max-width: 1528px;
  margin-inline: auto;
  background: var(--paper);
  color: var(--net-ink);
  font-family: 'Geist', Arial, sans-serif;
  container-type: inline-size;
}

.stala-net *,
.stala-directory * { box-sizing: border-box; }

.net-frame,
.env-frame {
  margin: 0 2.618%;
  border-inline: 1px solid var(--net-rule);
}

.net-frame { border-block: 1px solid var(--net-rule); }
.net-intro { padding: 3.08cqw 2% 0; text-align: center; }

.net-intro h2,
.env-intro h2 {
  margin: 0;
  color: var(--net-ink);
  font: 400 3.927cqw/1 'Geist Pixel', 'Geist', sans-serif;
  letter-spacing: -.06em;
}

.net-intro h2 span,
.env-intro h2 span,
.net-line span { color: var(--net-accent); }

.net-intro p {
  margin: 1.11cqw auto 0;
  color: #66594e;
  font-size: 1.243cqw;
  line-height: 1.35;
}

.net-stage {
  display: grid;
  grid-template-columns: 54.69% 35.02%;
  column-gap: 4.14%;
  align-items: start;
  padding-left: 3.1%;
  margin-top: 2.01cqw;
  padding-bottom: 1.5cqw;
}

/* The map and recording share the figure's coordinates as the artwork scales. */
.net-figure {
  position: relative;
  width: 103.2%;
  container-type: inline-size;
}

.net-map { display: block; width: 100%; height: auto; }

.net-recording {
  position: absolute;
  width: 40.42%;
  top: 32.46%;
  left: 22.59%;
  overflow: hidden;
  border: 1px solid #ddcec7;
  background: #fffcf6;
  color: #2d251f;
  font-size: 1.642cqw;
}

.net-capture-location {
  display: flex;
  height: 3.077em;
  align-items: center;
  gap: .692em;
  padding-inline: 1.077em;
  color: #fff8ef;
  background: #28231f;
  white-space: nowrap;
}

.net-capture-location img { width: 1.692em; height: 1.231em; }
.net-capture-location .net-place {min-width:0;white-space:normal;line-height:1.15;}
.net-capture-location img,.net-capture-location code {flex-shrink:0;}
.net-capture-location span { font-size: 1.077em; font-weight: 500; }
.net-capture-location code {
  margin-left: auto;
  color: #ebc6ae;
  font: 400 .923em/1 ui-monospace, monospace;
}
.net-still { display: block; width: 100%; aspect-ratio: 16 / 7; height: auto; object-fit: cover; }

.net-capture-details { padding: 1.077em 1.154em; }

.net-capture-details h3 {
  margin: 0;
  padding-bottom: .53em;
  border-bottom: 1px solid #ddcec7;
  font: 600 1.462em/1.26 'Geist', Arial, sans-serif;
  letter-spacing: -.035em;
}

.net-capture-details dl { margin: .69em 0 0; }
.net-capture-details dl div { display: flex; justify-content: space-between; gap: .3em; }
.net-capture-details dl div + div { margin-top: .76em; }
.net-capture-details dl div:last-child { border-top: 1px solid #ddcec7; padding-top: .76em; }
.net-capture-details dt, .net-capture-details dd { margin: 0; font-size: 1em; line-height: 1.31; }
.net-capture-details dt { color: #66594e; }
.net-capture-details dd { text-align: right; font-weight: 500; white-space: nowrap; }

.net-line {
  width: 105%;
  margin: 18.32cqw 0 0 1.72cqw;
  font-size: 3.403cqw;
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -.04em;
}

.env-frame {
  padding: 2.55cqw 2.23cqw 2.94cqw;
  border-bottom: 1px solid var(--net-rule);
}

.env-intro { display: grid; grid-template-columns: 65.2% 34.8%; align-items: end; margin-bottom: 2.43cqw; }
.env-intro h2 { line-height: 1.04; }
.env-intro p {
  max-width: 23.2cqw;
  margin: 0 0 .7cqw;
  font-family: Inter, 'Geist', Arial, sans-serif;
  color: #44382f;
  font-size: 1.243cqw;
  line-height: 1.46;
  letter-spacing: -.02em;
}

.env-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .917cqw;
  align-items: start;
  font-family: Inter, 'Geist', Arial, sans-serif;
}

.env-column { display: grid; gap: .851cqw; }
.env-card {
  --env-card: #f8f5ee;
  --env-chip: #ebe4d9;
  --env-title: #674937;
  --env-badge: #e7dbcb;
  --env-number: #674937;
  font-size: .982cqw;
  padding: .92em 1.16em 1.27em;
  background: var(--env-card);
  border: 1px solid #dccdc0;
  border-radius: .53em;
}

.env-card--warm {
  --env-card: #f7eee6;
  --env-chip: #eedfd3;
  --env-title: #98452e;
  --env-badge: #e9cdbb;
  --env-number: #893d29;
}

.env-card header { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.env-card h3 {
  color: var(--env-title);
  font: 500 1.4em/1.25 Inter, 'Geist', Arial, sans-serif;
  letter-spacing: -.02em;
  margin: 0;
}
.env-count {
  display: inline-grid;
  min-width: 3em;
  height: 1.83em;
  place-items: center;
  border-radius: 99px;
  font-size: .8em;
  font-weight: 500;
  color: var(--env-number);
  background: var(--env-badge);
}
.env-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: .533em .455em;
  padding: 0;
  margin: 1.05em 0 0;
  list-style: none;
}
.env-card li {
  display: grid;
  min-width: var(--chip-width);
  min-height: 2.067em;
  align-items: center;
  justify-items: center;
  padding-inline: .56em;
  color: #3c3028;
  background: var(--env-chip);
  border-radius: 99px;
  font-size: 1em;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.02em;
}

@media (max-width: 1000px) {
  .env-frame { padding: 32px 24px; }
  .env-intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-bottom: 26px; }
  .env-intro h2 { font-size: clamp(32px, 4.8vw, 48px); }
  .env-intro p { max-width: 34ch; margin: 0; font-size: 15px; }
  .env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .env-column { display: contents; }
  .env-card { height: 100%; font-size: 13px; }
  .env-card li { min-width: auto; padding-inline: .8em; }
}

@media (max-width: 760px) {
  .net-frame, .env-frame { margin-inline: max(12px, 2.618%); }
  .net-intro { padding: 32px 12px 0; }
  .net-intro h2 { font-size: clamp(30px, 6.8vw, 48px); }
  .net-intro p { max-width: 46ch; margin-top: 12px; font-size: 14px; }
  .net-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0 10px 28px;
  }
  .net-figure { width: min(100%, 540px); }
  .net-recording {
    width: clamp(175px, 52%, 262px);
    top: 24%;
    left: 18%;
    font-size: clamp(9px, 2.3cqw, 12px);
  }
  .net-line { width: auto; max-width: 18ch; text-align: center; margin: 0; font-size: clamp(24px, 5vw, 34px); }
}

@media (max-width: 600px) {
  .env-frame { padding: 26px 14px; }
  .env-intro { display: block; margin-bottom: 18px; }
  .env-intro p { margin-top: 15px; }
  .env-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .env-card { padding: 12px 13px 13px; }
  .env-card ul { margin-top: 10px; }
}

.net-canvas { display: block; width: 100%; aspect-ratio: 1; }
.net-figure .net-recording { transition: opacity 340ms ease, transform 450ms ease; }
.net-figure.is-traveling .net-recording { opacity: 0; transform: translateY(-5px); }
@media(max-width: 760px) {
  .net-aside { align-self: center; }
  .net-figure .net-recording { left: 12%; }
}
@media(prefers-reduced-motion: reduce) {
  .net-figure .net-recording { transition: none; }
}