/* Black gallery treatment. Keep every override inside the hero. */
.reference-hero {
  --gallery-ink: #fff;
  --gallery-muted: #bcbcbc;
  --gallery-accent: #ff6468;
  --gallery-focus: #ff8a8e;
  background-color: #000;
  background-image: linear-gradient(#ffffff09 1px, transparent 1px),
    linear-gradient(90deg, #ffffff09 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center top;
  color: var(--gallery-ink);
  color-scheme: dark;
}

.reference-hero .hero-glow { display: none; }
.reference-hero .hero-kicker { background: #101010; border-color: #343434; box-shadow: none; }
.reference-hero .kicker-diamond, .reference-hero .eyebrow { color: var(--gallery-accent); }
.reference-hero .eyebrow i { background: var(--gallery-accent); }
.reference-hero h1, .reference-hero h1 .headline-line, .reference-hero h1 > em { color: var(--gallery-ink); }
.reference-hero h1 .headline-line b { color: var(--gallery-accent); }
.reference-hero .hero-description, .reference-hero .hero-assurance { color: var(--gallery-muted); }
.reference-hero .mini-brand, .reference-hero .hero-emblem > b { background: #090909; border-color: #373737; }
.reference-hero .hero-emblem > span { background: linear-gradient(90deg, transparent, #76272a); }

.reference-hero .fan-card {
  background: #141414;
  border-color: #404040;
  box-shadow: 0 18px 38px #000a, 0 0 0 2px #101010;
}
.reference-hero .fan-card:after { background: none; box-shadow: inset 0 0 0 1px #ffffff18; }
.reference-hero .fan-card figcaption { color: #fff; text-shadow: 0 1px 8px #000; }

.reference-hero .discovery-bar form {
  background: #111;
  border-color: #686868;
  box-shadow: 0 12px 30px #0009, 0 0 0 4px #141414b3;
}
.reference-hero .discovery-bar form > svg { color: var(--gallery-accent); }
.reference-hero .discovery-bar input { background: transparent; color: var(--gallery-ink); caret-color: var(--gallery-accent); }
.reference-hero .discovery-bar input::placeholder { color: #b4b4b4; }
.reference-hero .discovery-bar input:-webkit-autofill {
  -webkit-text-fill-color: var(--gallery-ink);
  box-shadow: inset 0 0 0 1000px #111;
}
.reference-hero .discovery-bar form:focus-within {
  border-color: var(--gallery-focus);
  box-shadow: 0 0 0 3px #ff8a8e45, 0 12px 30px #0009;
}
.reference-hero .discovery-bar button, .reference-hero .button {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  box-shadow: none;
}
.reference-hero .discovery-bar button:hover, .reference-hero .button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
}

.reference-hero .hero-feature { background: #151515; border-color: #333; box-shadow: none; }
.reference-hero .hero-feature > svg { background: #252525; color: var(--gallery-accent); }
.reference-hero .hero-feature strong { color: var(--gallery-ink); }
.reference-hero .hero-feature small { color: var(--gallery-muted); }
.reference-hero #gallery-toggle { background: #171717; border-color: #737373; color: #fff; box-shadow: 0 3px 12px #0009; }
.reference-hero #gallery-toggle:hover { background: #292929; border-color: var(--gallery-accent); color: var(--gallery-accent); }
.reference-hero button:focus-visible, .reference-hero a:focus-visible {
  outline: 2px solid var(--gallery-focus);
  outline-offset: 4px;
}

@media (max-width: 650px) {
  .reference-hero .fan-card { box-shadow: 0 9px 18px #000a, 0 0 0 1px #101010; }
  .reference-hero .discovery-bar form { box-shadow: 0 8px 20px #0009, 0 0 0 3px #141414b3; }
  .reference-hero .discovery-bar form:focus-within { box-shadow: 0 0 0 3px #ff8a8e45, 0 8px 20px #0009; }
}

@media (forced-colors: active) {
  .reference-hero .discovery-bar form:focus-within { outline: 2px solid Highlight; outline-offset: 3px; }
}