/* =====================================================================
   Marie Eksteen — DARK VARIANT
   Palette + section-bg overrides on top of styles.css. Loaded after the
   main stylesheet so these rules win the cascade. Hot pink stays as the
   accent (pops better on dark anyway).
   ===================================================================== */

:root {
  /* Inverted base — dark "paper" tones */
  --paper:        #16141B;
  --cream:        #0F0E12;   /* primary near-black page */
  --cream-deep:   #1B1820;   /* warm violet-tinged section */
  --cream-blush:  #201A24;   /* pinker dark for accent sections */
  --cream-rose:   #261E2A;   /* deepest stone-violet */
  --noir:         #050507;   /* true editorial black */

  /* Inverted ink → light */
  --ink:          #F0EBE3;   /* cream body text */
  --ink-soft:     #BCB4A8;   /* dimmed cream */
  --mulberry:     #C26B8A;   /* lifted accent */

  /* Sepia / utility — lift to readable values on dark */
  --sepia:        #A89A88;
  --sepia-light:  #C7BAA6;

  /* Hairlines — light strokes on dark */
  --rule:         rgba(240, 235, 227, 0.16);
  --rule-light:   rgba(240, 235, 227, 0.10);

  /* The accent stays — pink pops harder on dark */
  --pink:         #FF1A75;
  --pink-deep:    #FF3D8E;   /* slightly LIFTED on dark for AA contrast */
  --pink-glow:    #FF7AAE;

  /* Aliases — map to lifted pink-deep for AA contrast on dark sections */
  --red:          var(--pink-deep);
  --rose:         var(--pink);
  --blush:        var(--pink-glow);
  --peach:        var(--pink);
  --gold:         var(--pink-glow);
  --terracotta:   var(--pink);
}

/* Body base — ensure dark bg even before sections paint */
body { background: var(--cream); color: var(--ink); }

/* Body grain — bump opacity slightly on dark so it still reads */
body::before { opacity: 0.06; }

/* ====================================================================
   DARK-MODE TEXT FIX
   styles.css uses `color: var(--cream)` for "light text on dark elements"
   (skip-link, hero, lead card, lightbox, etc). In dark mode --cream is
   redefined as the page bg (a dark color), so those rules apply DARK
   text on DARK surfaces and become invisible. Override every such rule
   to use var(--ink) — which in dark mode IS the light cream tone.
   ==================================================================== */
.skip-link { color: var(--ink); }
::selection { color: var(--ink); }

.hero,
.hero--cover,
.hero__name { color: var(--ink); }

.practice-card--lead { color: var(--ink); }
.practice-rank__name { color: var(--ink); }
.practice-card--lead .practice-rank__name { color: var(--ink); }
.skill-icon { color: var(--ink); }
.client-stamp { color: var(--ink); }
.client-stamp:hover { color: var(--ink); }   /* keep text logos light on the pink hover fill */

.lightbox { background: rgba(5, 5, 7, 0.94); }
.lightbox__close,
.lightbox__nav {
  color: var(--ink);
  border-color: rgba(240, 235, 227, 0.30);
}
.lightbox__close:hover { color: var(--ink); background: var(--pink); border-color: var(--pink); }
.lightbox__nav:hover { color: var(--pink); border-color: var(--pink); }
.lightbox__title { color: var(--ink); }

.contact__value { color: var(--ink); }

/* Pink-filled buttons / badges — styles.css uses `color: var(--cream)` for
   the glyph inside (chevrons, + badge). In dark mode that resolves to dark,
   so the glyph disappears against the pink fill. Force light. */
.gallery__item::after { color: var(--ink); }
.words-carousel__arrow { color: var(--ink); }
.words-carousel__arrow:hover,
.words-carousel__arrow:focus-visible { color: var(--ink); }

/* Lightbox caption sits on the dark overlay — make sure the meta text is
   light, not the now-dark `--cream`. */
.lightbox__caption { color: var(--ink); }

/* ====================================================================
   Section backgrounds — flip to dark variants
   ==================================================================== */
.section--hello,
.section--practice,
.section--words {
  background: var(--cream);
  color: var(--ink);
}
.section--career {
  background: var(--cream-blush);
  color: var(--ink);
}
.section--works,
.section--gallery {
  background: var(--cream-deep);
  color: var(--ink);
}
.section--contact {
  background: var(--cream-rose);
  color: var(--ink);
}
.section--schooling {
  background: var(--cream-deep);
  color: var(--ink);
}

/* ====================================================================
   Topbar — dark background when stuck
   ==================================================================== */
.topbar { color: var(--ink); }
.topbar.is-stuck {
  background: rgba(15, 14, 18, 0.92);
  border-bottom-color: var(--rule);
}
.topbar__title { color: var(--sepia-light); }

/* ====================================================================
   Parallax veils — flip to dark washes
   ==================================================================== */
.parallax-bg__veil {
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(15, 14, 18, 0.62) 0%, rgba(15, 14, 18, 0.40) 100%),
    linear-gradient(180deg, rgba(15, 14, 18, 0.30) 0%, rgba(15, 14, 18, 0.40) 50%, rgba(15, 14, 18, 0.30) 100%);
}
.parallax-bg__veil--cream {
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(15, 14, 18, 0.70) 0%, rgba(15, 14, 18, 0.46) 100%),
    linear-gradient(180deg, rgba(15, 14, 18, 0.36) 0%, rgba(15, 14, 18, 0.45) 50%, rgba(15, 14, 18, 0.36) 100%);
}
.parallax-bg__veil--ink,
.parallax-bg__veil--ink-soft {
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(15, 14, 18, 0.66) 0%, rgba(15, 14, 18, 0.42) 100%),
    linear-gradient(180deg, rgba(15, 14, 18, 0.32) 0%, rgba(15, 14, 18, 0.42) 50%, rgba(15, 14, 18, 0.32) 100%);
}

/* Photos lift slightly so they're visible against the dark veil */
.parallax-bg img { filter: grayscale(1) contrast(1.0) brightness(1.18); }
.parallax-bg--soft img { filter: grayscale(1) contrast(0.95) brightness(1.22); }

/* ====================================================================
   Hero — already dark in light mode, but the cover photo has its own
   path. Keep as-is (B&W portrait + noir bg). Lift kicker + role text.
   ==================================================================== */
.hero { color: var(--ink); }
.hero__sub { color: rgba(240, 235, 227, 0.78); }
.hero__role { color: rgba(240, 235, 227, 0.85); }
.hero__hint { color: rgba(240, 235, 227, 0.65); }

/* ====================================================================
   Eyebrows + folios — flip to lighter pink for AA contrast on dark
   ==================================================================== */
.eyebrow,
.eyebrow--light { color: var(--pink-deep); }
.folio,
.folio--light { color: var(--pink-deep); }
.folio-note { color: var(--sepia-light); }
.folio-note--light { color: var(--sepia-light); }

/* Section margin border (top of grid__margin) — lift for visibility */
.section .grid__margin { border-top-color: var(--rule); }

/* ====================================================================
   Display headings — cream type with pink em accents
   ==================================================================== */
.display { color: var(--ink); }
.display em { color: var(--pink); }
.display--light { color: var(--ink); }
.display--light em { color: var(--pink); }

/* Hero name — already cream. Keep. */
.hero__name { color: var(--ink); text-shadow: 0 2px 32px rgba(0, 0, 0, 0.7); }
.hero__line--italic { color: var(--pink-glow); }

/* ====================================================================
   Body type — flip prose colors
   ==================================================================== */
.prose { color: var(--ink); }
.prose em { color: var(--pink-glow); font-style: italic; }
.signature {
  color: var(--pink-glow);
  border-bottom-color: var(--rule);
}
.signature__line { background: var(--rule-light); }

/* ====================================================================
   Career timeline — light text on dark bg
   ==================================================================== */
.timeline { border-top-color: var(--rule); }
.timeline__entry { border-bottom-color: var(--rule); }
.timeline__entry:hover { background: rgba(240, 235, 227, 0.04); }
.timeline__year { color: var(--pink-deep); }
.timeline__body h3 { color: var(--ink); }
.timeline__org { color: var(--pink-deep); }
.timeline__note { color: var(--ink); }
.timeline__note em { color: var(--pink-glow); }
.timeline__details-summary { color: var(--pink-deep); }
.timeline__details-summary::before {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
}
.timeline__details[open] > .timeline__details-summary::before,
.timeline__details-summary:hover::before {
  background: var(--pink-deep);
  color: var(--ink);
}
.timeline__details-cue { color: var(--sepia-light); }
.timeline__bullets { color: var(--ink); }
.timeline__bullets li { border-top-color: var(--rule); }
.timeline__bullets li::before { background: var(--pink); }

/* ====================================================================
   Practice cards — flip to dark with pink accents
   ==================================================================== */
.practice-card {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: none;
}
.practice-card__label {
  color: var(--pink-deep);
  border-bottom-color: var(--rule);
}

/* The lead "Endorsed (LinkedIn)" card — needs to stand out from the dark
   section background. Lifted bg with rule-coloured border + drop shadow
   so the card reads as a discrete element and the logos inside have a
   defined frame to live in. */
.practice-card--lead {
  background:
    linear-gradient(135deg, rgba(255, 26, 117, 0.06) 0%, transparent 70%),
    var(--noir);
  color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 50px -10px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 26, 117, 0.10);
}
.practice-card--lead .practice-card__label {
  color: var(--pink);
  border-bottom-color: rgba(240, 235, 227, 0.18);
}

/* Practice list */
.practice-list { color: var(--ink); }
.practice-list li { border-bottom-color: var(--rule); }
.practice-list--prose li { color: var(--sepia-light); }

/* Practice rank list (inside lead card — already on dark) — ensure
   correct dark-mode tones for label + dotted dividers. */
.practice-rank li { border-bottom-color: rgba(240, 235, 227, 0.18); }
.practice-rank__num { color: var(--pink); }
.practice-rank__name { color: var(--ink); }

/* Skill icons inside the dark lead card */
.skill-icon {
  border-color: rgba(240, 235, 227, 0.45);
  background: rgba(240, 235, 227, 0.04);
  color: var(--ink);
}
.skill-icon--apple img { filter: brightness(0) invert(1); opacity: 0.95; }

/* Client stamps inside the dark lead card — give each tile a subtle warm
   wash so the white-silhouette logos have a defined frame and don't feel
   like they're floating on the same noir as the card itself. */
.client-stamp {
  border: 1px solid rgba(255, 26, 117, 0.40);
  background: rgba(240, 235, 227, 0.06);
  color: var(--ink);
}
.client-stamp:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}

/* Logos: white silhouette filter on dark.
   mix-blend-mode: lighten ensures any opaque-bg logos blend their (now
   black after invert) backgrounds into the dark card — only the white
   silhouette pixels show through. Defends against logos like Nissan
   where the wordmark letters touch the image edges. */
.client-stamp img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
  mix-blend-mode: lighten;
}
.client-stamp:hover img {
  filter: brightness(0);
  opacity: 1;
  mix-blend-mode: normal;
}

/* ====================================================================
   Gallery — flip card backgrounds + hover treatments
   ==================================================================== */
.gallery-intro { color: var(--ink); }
.gallery-intro em { color: var(--pink-glow); }
.gallery__item {
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 3px 10px -4px rgba(0, 0, 0, 0.40),
    0 18px 40px -20px rgba(0, 0, 0, 0.50);
}
.gallery__item::before { border-color: rgba(240, 235, 227, 0.10); }
.gallery__item:hover,
.gallery__item:focus-visible {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px var(--pink),
    0 6px 16px -6px rgba(255, 26, 117, 0.50),
    0 28px 60px -22px rgba(0, 0, 0, 0.60);
}
.gallery__caption {
  background:
    linear-gradient(180deg, transparent 0%, rgba(15, 14, 18, 0.70) 30%, rgba(15, 14, 18, 0.97) 100%);
  color: var(--ink);
}
.gallery__client { color: var(--pink-deep); }
.gallery__title { color: var(--ink); }
.gallery__year { color: var(--sepia-light); }
.works-note { color: var(--sepia); }

/* ====================================================================
   Words / testimonials carousel — light text on dark
   ==================================================================== */
.quote { border-top-color: var(--rule); }
.quote::before { color: var(--pink); opacity: 0.55; }
.quote blockquote p { color: var(--ink); }
.quote blockquote em { color: var(--pink); }
.quote__name { color: var(--ink); }
.quote__title { color: var(--sepia-light); }
.quote__org { color: var(--sepia-light); }
.quote__rel { color: var(--pink-deep); border-top-color: var(--rule); }

/* Carousel arrows — keep pink-filled stamps; they read fine on dark */

/* ====================================================================
   Schooling — dark bg, light type
   ==================================================================== */
.school { border-right-color: var(--rule); }
.school__year { color: var(--pink-deep); }
.school__name { color: var(--ink); }
.school__qual { color: var(--sepia-light); }
.school__detail { color: var(--ink); }

/* ====================================================================
   Contact — flip
   ==================================================================== */
.section--contact .folio--light { color: var(--pink-deep); }
.section--contact .folio-note--light { color: var(--pink-glow); }
.section--contact .eyebrow--light { color: var(--pink-deep); }
.section--contact .display--light { color: var(--ink); }
.section--contact .display--light em { color: var(--pink); }

.contact { border-top-color: var(--rule); }
.contact__row { border-bottom-color: var(--rule); }
.contact__row:hover {
  background: rgba(255, 26, 117, 0.10);
}
.contact__row:hover .contact__value { color: var(--pink-glow); }
.contact__label { color: var(--pink-deep); }
.contact__value { color: var(--ink); text-shadow: none; }

.colophon { color: var(--sepia); text-shadow: none; }
.colophon em { color: var(--pink); font-style: italic; }

/* ====================================================================
   Lightbox stays dark already — small adjustments
   ==================================================================== */
.lightbox__img { background: var(--paper); }

/* ====================================================================
   Skip link — adjust contrast on dark
   ==================================================================== */
.skip-link { background: var(--pink); color: var(--ink); }