/* IrregularOdds v0.2 — focused refinements only.
   All other layout, wording, and visual styling remains inherited from styles.css. */

/* 1 — A medium graphite-grey alternate theme, never pure white. */
body.light {
  --bg: #797981;
  --surface: #94939b;
  --surface2: #a5a3ac;
  --ink: #17151c;
  --muted: #35313d;
  --border: #66616f;
  --accent: #51246c;
  --blue: #155a70;
  --shadow: rgba(22, 15, 28, .24);
}
/* Keep the readable dark panels and grey surroundings distinct. */
body.light .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); }

/* 2 — Keep the actual artwork, with a smaller, uncropped foreground
   and a softened atmospheric echo of its sides behind it. */
.hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  padding: 46px clamp(20px, 4vw, 70px) 0;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 12px;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 15%, transparent 55%, var(--bg) 98%),
    linear-gradient(to right, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
    url('assets/hero-purple.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(26px) brightness(.68) saturate(1.18);
  opacity: .8;
}
.hero-image {
  position: relative;
  width: 100%;
  max-width: 1260px;
  height: auto;
  aspect-ratio: 1983 / 793;
  margin: 0 auto;
  background-image: url('assets/hero-purple.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-color: rgba(144, 85, 170, .22);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .30);
}
.hero-bottom {
  position: relative;
  max-width: 1260px;
  margin: auto;
}
/* 3 — Only the final line of the introductory statement is revised. */
.intro h1 em { font-size: .79em; white-space: nowrap; }

@media (max-width: 900px) {
  .hero { padding-top: 28px; }
  .hero-image { max-width: 100%; }
  .intro h1 em { font-size: .72em; }
}
@media (max-width: 600px) {
  .hero { padding: 20px 10px 0; }
  .hero::before { inset: 0 0 0; filter: blur(18px) brightness(.7); }
  .hero-image {
    height: auto;
    aspect-ratio: 1983 / 793;
    background-size: contain;
  }
  .hero-bottom { padding: 24px 10px 14px; }
  .intro h1 em { font-size: .67em; }
}