/* Contrast guardrails for the Styling Easter Egg.
   The experimental styles can radically change surfaces, but text must remain readable. */

html[data-style-experiment] body {
  color: var(--ink);
}

html[data-style-experiment] :is(
  .experiments-note,
  .experiments-close,
  .about-section,
  .proof-strip
) {
  color: var(--ink) !important;
}

html[data-style-experiment] :is(
  .experiments-note,
  .experiments-close,
  .about-section,
  .proof-strip
) :is(h1, h2, h3, h4, strong, a, button, label) {
  color: var(--ink) !important;
}

html[data-style-experiment] :is(
  .experiments-note,
  .experiments-close,
  .about-section,
  .proof-strip
) :is(p, li, small) {
  color: var(--ink-soft) !important;
}

html[data-style-experiment] :is(
  .section-dark,
  .experiment-section-dark,
  .site-footer
) {
  color: var(--white-soft) !important;
}

html[data-style-experiment] :is(
  .section-dark,
  .experiment-section-dark,
  .site-footer
) :is(h1, h2, h3, h4, strong, a, button, label) {
  color: var(--white-soft) !important;
}

html[data-style-experiment] :is(
  .section-dark,
  .experiment-section-dark,
  .site-footer
) :is(p, li, small) {
  color: var(--white-soft) !important;
  opacity: 0.84;
}

/* Cards and panels establish their own readable foreground even when nested
   inside a section whose surrounding text uses the opposite colour scheme. */
html[data-style-experiment] :is(
  .hero-panel,
  .experiments-hero-panel,
  .work-profile,
  .rate-note,
  .experiments-note-inner,
  .service-card,
  .story-card,
  .experiment-card,
  .engagement-row,
  .contact-option,
  .experiment-index-grid a,
  .style-option
) {
  color: var(--ink) !important;
}

html[data-style-experiment] :is(
  .hero-panel,
  .experiments-hero-panel,
  .work-profile,
  .rate-note,
  .experiments-note-inner,
  .service-card,
  .story-card,
  .experiment-card,
  .engagement-row,
  .contact-option,
  .experiment-index-grid a,
  .style-option
) :is(h1, h2, h3, h4, strong, a, button, label) {
  color: var(--ink) !important;
}

html[data-style-experiment] :is(
  .hero-panel,
  .experiments-hero-panel,
  .work-profile,
  .rate-note,
  .experiments-note-inner,
  .service-card,
  .story-card,
  .experiment-card,
  .engagement-row,
  .contact-option,
  .experiment-index-grid a,
  .style-option
) :is(p, li, small) {
  color: var(--ink-soft) !important;
  opacity: 1;
}

html[data-style-experiment] :is(.story-outcome, .experiment-goal > p:last-child) {
  color: var(--ink) !important;
  opacity: 1;
}

html[data-style-experiment] :is(.story-outcome, .experiment-goal > p:last-child) * {
  color: inherit !important;
  opacity: 1;
}

html[data-style-experiment] input,
html[data-style-experiment] select,
html[data-style-experiment] textarea {
  background: var(--paper-light) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-style-experiment] ::placeholder {
  color: var(--ink-soft) !important;
  opacity: 0.78;
}