/* ============================================================
   stub.css — shared page-hero for the six stub pages.
   Single block: status pill, eyebrow, page title, one-line lead,
   one return CTA. No grids, no lists, no forms — IA scaffolding only.
   ============================================================ */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(4rem, 9vw, 8rem);
  background: var(--bg);
}

/* Warm, low-key atmospheric wash — same palette as home, calmer. */
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page-hero::before {
  background:
    radial-gradient(60% 70% at 85% 0%,
      color-mix(in oklab, var(--color-dune) 26%, transparent),
      transparent 65%),
    radial-gradient(55% 65% at 0% 100%,
      color-mix(in oklab, var(--color-bone) 70%, transparent),
      transparent 70%);
  opacity: 0.85;
}

/* Subtle vertical rule on the right — quiet structural marker. */
.page-hero::after {
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 0.5px),
    var(--surface-line) calc(50% - 0.5px),
    var(--surface-line) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 88% 0;
  opacity: 0;
}

@media (min-width: 1024px) {
  .page-hero::after { opacity: 1; }
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 60rem;
}

.page-hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.45rem 0.95rem;
  background: color-mix(in oklab, var(--color-ivory) 70%, transparent);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-hero__status-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero__status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    animation: stub-pulse 2.4s var(--ease-out) infinite;
  }

  @keyframes stub-pulse {
    0%   { transform: scale(0.8); opacity: 0.6; }
    70%  { transform: scale(1.6); opacity: 0;   }
    100% { transform: scale(1.6); opacity: 0;   }
  }
}

.page-hero__index {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-hero__index-num {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--accent);
}

.page-hero__index-rule {
  display: inline-block;
  width: clamp(2.5rem, 6vw, 4.5rem);
  height: 1px;
  background: var(--surface-line-strong);
  transform: translateY(-3px);
}

.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}

.page-hero__title em {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent-hover);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

.page-hero__lead {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0;
}

.page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ----- Reveal hookup: page-hero pieces fade up on load ----- */

.page-hero [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.page-hero [data-reveal][data-revealed],
html:not(.js) .page-hero [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Inline stagger so the hero settles in one calm cascade */
.page-hero [data-reveal]:nth-child(1) { transition-delay:   0ms; }
.page-hero [data-reveal]:nth-child(2) { transition-delay:  90ms; }
.page-hero [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.page-hero [data-reveal]:nth-child(4) { transition-delay: 270ms; }
.page-hero [data-reveal]:nth-child(5) { transition-delay: 360ms; }