.atlas-page-header {
  --atlas-header-copy-width: 760px;
  position: relative;
  isolation: isolate;
  min-height: clamp(430px, 58vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--atlas-header-height, 56px) + 5rem) 0 4rem !important;
  border-bottom: 1px solid var(--border);
}

body[data-atlas-directory-header] main {
  padding-top: 0;
}

.atlas-page-header > :not(.atlas-field-canvas) {
  position: relative;
  z-index: 5;
}

.atlas-page-header .section-label,
.atlas-page-header .eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.atlas-page-header .section-label::before,
.atlas-page-header .eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.atlas-page-header h1,
.atlas-page-header .page-heading {
  max-width: 850px;
  margin: 0 0 1.25rem;
  color: var(--text);
  font: 400 clamp(2.8rem, 7vw, 5.25rem)/1 var(--serif);
  letter-spacing: -.02em;
}

.atlas-page-header .page-sub,
.atlas-page-header .lede {
  max-width: var(--atlas-header-copy-width);
  margin: 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.8;
}

.atlas-page-header .page-actions { margin-top: 28px; }

.atlas-page-header > .directory-header-field-canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.atlas-page-header::before,
.atlas-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atlas-page-header::before { z-index: 2; }
.atlas-page-header::after { z-index: 3; }

/* Systems: a routed topology current, not a central vortex. */
.atlas-header-composition--topology-current > .directory-header-field-canvas {
  opacity: .2;
  filter: saturate(.72) brightness(.72) contrast(1.12);
  transform: scaleX(1.42) scaleY(.52) translateY(4%);
  transform-origin: 72% 50%;
  mask-image:
    linear-gradient(90deg, transparent 0 38%, #000 55% 96%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 24px, #000 24px 27px);
  mask-composite: intersect;
}

.atlas-header-composition--topology-current::before {
  inset: 11% 0 9% 43%;
  background:
    radial-gradient(circle at 8% 23%, rgba(74,222,128,.62) 0 2px, transparent 3px),
    radial-gradient(circle at 31% 23%, rgba(56,189,248,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 49%, rgba(74,222,128,.54) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 72%, rgba(56,189,248,.62) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 36%, rgba(245,166,35,.58) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 8%, rgba(74,222,128,.25) 8% 31%, transparent 31% 100%) 0 23% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 31%, rgba(56,189,248,.24) 31% 54%, transparent 54% 100%) 0 49% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 54%, rgba(56,189,248,.22) 54% 92%, transparent 92% 100%) 0 72% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 76%, rgba(245,166,35,.22) 76% 92%, transparent 92% 100%) 0 36% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(56,189,248,.045) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(74,222,128,.035) 47px 48px);
  opacity: .9;
  animation: topology-scan 9s linear infinite;
}

.atlas-header-composition--topology-current::after {
  background:
    linear-gradient(90deg, rgba(10,10,15,.98) 0%, rgba(10,10,15,.9) 40%, rgba(10,10,15,.35) 67%, rgba(10,10,15,.72) 100%),
    linear-gradient(180deg, rgba(10,10,15,.18), transparent 20% 80%, rgba(10,10,15,.3));
}

/* Work: discrete assembly marks and interrupted traces. */
.atlas-header-composition--build-fragments > .directory-header-field-canvas {
  opacity: .12;
  filter: saturate(.55) contrast(1.3) brightness(.68);
  transform: skewX(-7deg) scale(1.08);
  transform-origin: 72% 50%;
  clip-path: polygon(47% 6%, 100% 6%, 100% 94%, 36% 94%);
  mask-image: repeating-linear-gradient(0deg, #000 0 8px, transparent 8px 23px);
}

.atlas-header-composition--build-fragments::before {
  inset: 12% 0 10% 43%;
  background:
    linear-gradient(90deg, rgba(245,166,35,.65) 0 18%, transparent 18% 100%) 6% 16% / 32% 2px no-repeat,
    linear-gradient(90deg, rgba(232,232,224,.4) 0 42%, transparent 42% 100%) 45% 28% / 42% 1px no-repeat,
    linear-gradient(90deg, rgba(56,189,248,.55) 0 28%, transparent 28% 100%) 24% 45% / 38% 2px no-repeat,
    linear-gradient(90deg, rgba(245,166,35,.52) 0 64%, transparent 64% 100%) 52% 61% / 34% 1px no-repeat,
    linear-gradient(90deg, rgba(74,222,128,.45) 0 36%, transparent 36% 100%) 15% 78% / 28% 2px no-repeat,
    linear-gradient(90deg, transparent 49%, rgba(245,166,35,.16) 49% 51%, transparent 51%) 0 0 / 96px 100%,
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.035) 49% 51%, transparent 51%) 0 0 / 96px 96px;
  opacity: .9;
  animation: fragment-shift 7s steps(6, end) infinite;
}

.atlas-header-composition--build-fragments::after {
  background:
    linear-gradient(90deg, rgba(10,10,15,.98) 0%, rgba(10,10,15,.9) 43%, rgba(10,10,15,.42) 72%, rgba(10,10,15,.78) 100%),
    linear-gradient(105deg, transparent 55%, rgba(245,166,35,.045) 55% 55.2%, transparent 55.2%);
}

/* Writing: sparse editorial drift with ruled structure and no visible orb. */
.atlas-header-composition--editorial-drift > .directory-header-field-canvas {
  opacity: .18;
  filter: sepia(.28) saturate(.68) brightness(.84) contrast(1.06);
  transform: rotate(-13deg) scale(1.28) translate(10%, -2%);
  transform-origin: 74% 50%;
  mask-image: linear-gradient(90deg, transparent 0 36%, #000 56% 96%, transparent 100%);
}

.atlas-header-composition--editorial-drift::before {
  inset: 8% 0 8% 43%;
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(232,232,224,.085) 43px 44px),
    linear-gradient(104deg, transparent 0 19%, rgba(245,166,35,.24) 19% 19.12%, transparent 19.12% 46%, rgba(232,232,224,.15) 46% 46.1%, transparent 46.1% 72%, rgba(245,166,35,.15) 72% 72.1%, transparent 72.1%),
    radial-gradient(ellipse at 78% 30%, rgba(245,166,35,.09), transparent 36%);
  opacity: .94;
  animation: editorial-drift 18s ease-in-out infinite alternate;
}

.atlas-header-composition--editorial-drift::after {
  background:
    linear-gradient(90deg, rgba(10,10,15,.99) 0%, rgba(10,10,15,.91) 43%, rgba(10,10,15,.38) 76%, rgba(10,10,15,.72) 100%),
    linear-gradient(180deg, transparent 0 75%, rgba(245,166,35,.04));
}

@keyframes topology-scan {
  0% { transform: translateX(-1.5%); opacity: .68; }
  50% { opacity: .98; }
  100% { transform: translateX(1.5%); opacity: .68; }
}

@keyframes fragment-shift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(12px, -6px); }
  66% { transform: translate(-8px, 7px); }
}

@keyframes editorial-drift {
  from { transform: translate3d(0, -5px, 0); opacity: .7; }
  to { transform: translate3d(-18px, 8px, 0); opacity: 1; }
}

@media (max-width: 760px) {
  .atlas-page-header {
    min-height: 390px;
    padding: calc(var(--atlas-header-height, 56px) + 3.5rem) 0 3rem !important;
  }

  .atlas-page-header h1,
  .atlas-page-header .page-heading { font-size: clamp(2.45rem, 13vw, 4rem); }

  .atlas-page-header .page-sub,
  .atlas-page-header .lede {
    max-width: 100%;
    font-size: 14px;
  }

  .atlas-header-composition--topology-current::before,
  .atlas-header-composition--build-fragments::before,
  .atlas-header-composition--editorial-drift::before { left: 28%; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-page-header > .directory-header-field-canvas,
  .atlas-page-header::before {
    animation: none;
    transform: none;
  }
}