/* Dark-mode hero background — option 1 "Graphite vignette" (chosen 2026-10-11).
   Loaded by index.html after hero.css. Every rule is scoped to
   :root[data-theme="dark"][data-bg] so light mode and hero.css stay untouched.
   All hero text is pure white; the background stays dark behind every text zone.
   Dark photo = full-dark.jpg (vignette baked in, pixel-aligned with full-original.jpg). It is
   stacked in the same .hero__media parallax layer and cross-fades in on toggle (hero.css,
   "theme cross-fade"); the ::before vignette below only shows if the photo is still loading. */

:root[data-theme="dark"][data-bg] {
  --hero-text: #ffffff;
  --hero-text-2: #ffffff;
  --tab-text: #ffffff;
  /* opaque tab fill (was rgba(255,255,255,.08)): with a translucent tab the white
     "D" of the name showed through behind "Florida" and the two whites merged, so the
     last line looked clipped. Solid graphite ≈ the old .08 tint over the vignette.
     2026-10-12: lifted #26282c -> #3a3d43. On phones the pill sits in the bright top of the
     vignette (~#2a2c30), so the old fill matched the backdrop and the container vanished,
     leaving only the globe + "Miami, Florida" floating. The hairline (below) keeps the edge
     readable wherever the vignette is at its lightest. */
  --tab-bg: #3a3d43;
}
:root[data-theme="dark"][data-bg] .hero .locate,
:root[data-theme="dark"][data-bg] .hero .locate-pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ---- all hero text white ---- */
:root[data-theme="dark"][data-bg] .hero { color: #fff; }
:root[data-theme="dark"][data-bg] .hero .credit,
:root[data-theme="dark"][data-bg] .hero .ix:not(.open),
:root[data-theme="dark"][data-bg] .hero .role__line,
:root[data-theme="dark"][data-bg] .hero .ai-i,
:root[data-theme="dark"][data-bg] .hero .locate,
:root[data-theme="dark"][data-bg] .hero .locate-pill { color: #fff; --ix-color: #fff; --ix-color-active: #fff; }
/* "Available for Hire" (.open) has no colour of its own (hero.css: color: inherit), so it
   follows .hero, which is #fff above. Only the hover variables are set here. Giving it its own
   #fff made it run a separate fade that lagged the hero's and then restarted (2026-10-12). */
:root[data-theme="dark"][data-bg] .hero .open { --ix-color: #fff; --ix-color-active: #fff; }
/* name: plain white, no saturation blend. Its z-index is deliberately NOT changed (stays 2,
   same as light) so nothing re-stacks on toggle; the dark figure cut-out
   (.hero__media--fig, z 3, hero.css) fades in above it, so the white letters pass behind
   the figure instead of over the white t-shirt. */
:root[data-theme="dark"][data-bg] .marquee { color: #fff; mix-blend-mode: normal; }
:root[data-theme="dark"][data-bg] .marquee--tone { display: none; }
:root[data-theme="dark"][data-bg] .scrolldown { color: #fff; } /* matches the white name; pill uses currentColor (hero.css) */
:root[data-theme="dark"][data-bg] .scrolldown { z-index: 3; }

/* ---- background layer (stays put while the photo lifts/parallaxes) ---- */
/* 1 — Graphite vignette: one soft tonal lift behind the head, falling off to near-black
   at the edges and blending into --paper at the bottom. Quiet, photographic. */
:root[data-theme="dark"][data-bg="1"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 70%, var(--paper) 100%),
    radial-gradient(60% 75% at 50% 32%, #34373c 0%, #202226 42%, #141517 72%, #0c0d0e 100%);
}