/* ==========================================================================
   KATARI JYOTHSNA - stage.css
   --------------------------------------------------------------------------
   The dark "stage" surface, gradient glows, mono kickers, and the header
   colour rules for sitting over a dark hero. Shared by the home page
   (home3d.css) and every inner page (inner.css), so it lives once, here.
   ========================================================================== */

/* ==========================================================================
   0. STAGE - sections that stay dark whatever the theme
   ========================================================================== */
.stage {
  color-scheme: dark;
  --bg: #12040F;
  --surface: #1E0819;
  --surface-2: #2A0C23;
  --ink: #FFF8F4;
  --ink-strong: #FFFFFF;
  --ink-soft: rgba(255,248,244,.78);
  --ink-muted: rgba(255,248,244,.55);
  --line: rgba(255,248,244,.14);
  --line-strong: rgba(255,248,244,.28);
  --accent: var(--brand-magenta-400);
  --glass: rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.14);
  position: relative;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.page-home main { overflow-x: clip; }

/* A gradient glow that can be dropped behind any stage */
.glow {
  position: absolute;
  z-index: -1;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
}
.glow--magenta { background: radial-gradient(circle, rgba(225,29,110,.55), transparent 62%); }
.glow--orange  { background: radial-gradient(circle, rgba(255,107,44,.42), transparent 62%); }
.glow--gold    { background: radial-gradient(circle, rgba(255,197,61,.30), transparent 62%); }

/* Eyebrow in mono - reads as "index", not decoration */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kicker b { color: var(--brand-marigold); font-weight: 500; }
.kicker::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: var(--grad);
}

/* ==========================================================================
   1. HEADER over a dark hero (home page and every inner photo hero)
   The header is transparent until it becomes "stuck"; above a dark stage its
   default dark ink would vanish, so it takes light ink until then.
   ========================================================================== */
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .logo__name,
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .nav__link,
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .theme-toggle,
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .burger { color: #FFF8F4; }
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .nav__link:hover,
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .nav__link[aria-current="page"] { color: #FFFFFF; }
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .theme-toggle,
body:is(.page-home, .has-stage-hero) .site-header:not(.is-stuck) .burger {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}