/* Preview G: one physical image, one quiet continuation of the editorial spine. */

/* Readability pass. Mono stays reserved for event data and card metadata. */
.tag,
.hero__foot-rule,
.seg__label,
.card__role,
.card__fact::before,
.card__link {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
}

.rail__spec { font-size: 0.6875rem; letter-spacing: 0.15em; }
.card__cred { font-size: 0.9375rem; line-height: 1.48; }
.card__fact { font-size: 0.9375rem; line-height: 1.56; }
.run__t { font-size: 0.75rem; letter-spacing: 0.08em; }
.close__when { font-size: 0.75rem; letter-spacing: 0.15em; }

/* A close crop of the power layer, dissolved into the black field. */
.thesis {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.thesis::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5%;
  right: -7%;
  bottom: 5%;
  width: min(64vw, 980px);
  pointer-events: none;
  background-image: url("/assets/preview-d/posters/02-substation.webp");
  background-repeat: no-repeat;
  background-size: 176% auto;
  background-position: 46% 52%;
  filter: brightness(0.54) saturate(0.74) contrast(1.08);
  opacity: 0;
  transform: translateX(18px);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 72% 51%, #000 0%, rgba(0,0,0,.92) 45%, transparent 82%);
          mask-image: radial-gradient(ellipse 78% 72% at 72% 51%, #000 0%, rgba(0,0,0,.92) 45%, transparent 82%);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
}

.thesis.is-in::before,
.no-js .thesis::before {
  opacity: 0.34;
  transform: none;
}

.thesis__inner { position: relative; z-index: 1; }

/* The close inherits the spine, then lets it divide into a sparse root system. */
.close {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.close__roots {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.close__inner { position: relative; z-index: 1; }

.roots__path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);
}

.roots__path--quiet { stroke: rgba(0, 201, 142, 0.16); stroke-width: 1; }
.roots__path--focus { stroke: rgba(0, 201, 142, 0.34); stroke-width: 1.25; }
.close.is-in .roots__path,
.no-js .roots__path { stroke-dashoffset: 0; }

.roots__nodes rect {
  fill: rgba(0, 201, 142, 0.34);
  opacity: 0;
  transition: opacity 0.35s ease 0.85s;
}
.roots__nodes .roots__node--focus { fill: rgba(0, 201, 142, 0.58); }
.close.is-in .roots__nodes rect,
.no-js .roots__nodes rect { opacity: 1; }

@media (max-width: 860px) {
  .tag,
  .hero__foot-rule,
  .seg__label,
  .card__role,
  .card__fact::before,
  .card__link { font-size: 0.6875rem; }

  .card__cred,
  .card__fact { font-size: 0.9375rem; }

  .thesis::before {
    top: 28%;
    right: -52%;
    bottom: -5%;
    width: 128%;
    background-size: 188% auto;
    background-position: 45% 55%;
  }

  .thesis.is-in::before,
  .no-js .thesis::before { opacity: 0.22; }

  .close__roots {
    width: 150%;
    transform: translateX(-18%);
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thesis::before { opacity: 0.34; transform: none; transition: none; }
  .roots__path { stroke-dashoffset: 0; transition: none; }
  .roots__nodes rect { opacity: 1; transition: none; }
}