/* FestivalSpark: ember orange, charcoal night, and warm canvas paper.
   Scoped to the edition so shared application styles remain unchanged.

   Contrast (WCAG 1.4.3, 4.5:1 for text), measured for every pair defined here:
   light  --accent #C2410C on --bg 4.89, --bg-2 4.62, --surface-sunk 4.55,
          --surface 5.06; #ffffff on --accent 5.18; --text-subtle >= 5.4 on
          every light surface.
   dark   --accent #fb923c >= 7.0 on every dark surface; --accent-text on
          --accent 8.28; --text-subtle >= 5.9 on --surface-raised.
   Keep the light surfaces at or above #f7efe5: the brand orange is fixed, so a
   darker paper would drop accent text under 4.5:1. */
:root[data-edition="festivalspark"],
:root[data-edition="festivalspark"]:is([data-theme="dark"], [data-theme="dark-clean"]),
:root[data-edition="festivalspark"] .ribbon .hero {
  --fest-ember: #C2410C;
  --fest-ember-deep: #9a3412;
  --fest-flame: #fb923c;
  --fest-night: #1f1711;
  --fest-canvas: #fcf8f2;
  --accent: var(--fest-flame);
  --accent-deep: #f97316;
  --accent-text: #1c0f06;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-tint: var(--accent-soft);
  --accent-glow: color-mix(in srgb, var(--accent) 15%, transparent);
  --border-accent: color-mix(in srgb, var(--accent) 38%, transparent);
  --bg: #15100c;
  --bg-2: #1a130e;
  --surface: #1f1711;
  --surface-raised: #2a2018;
  --surface-sunk: #110c09;
  --text: #f8efe5;
  --text-muted: #c9b8a8;
  --text-subtle: #ad9a89;
  --border: rgba(240, 214, 190, 0.12);
  --border-strong: rgba(240, 214, 190, 0.22);
  --glass-fill: #1f1711;
  --glass-fill-raised: #2a2018;
  --glass-fill-heavy: rgba(26, 19, 14, 0.94);
  --glass-border: var(--border);
  --glass-border-strong: var(--border-strong);
  --body-glow-1: transparent;
  --body-glow-2: transparent;
  --color-gold: var(--accent);
  --color-gold-400: var(--fest-flame);
  --color-mark: var(--accent);
}

:root[data-edition="festivalspark"][data-theme="light"] {
  --accent: var(--fest-ember);
  --accent-deep: var(--fest-ember-deep);
  --accent-text: #ffffff;
  --bg: var(--fest-canvas);
  --bg-2: #f8f1e8;
  --surface: #fffcf8;
  --surface-raised: #ffffff;
  --surface-sunk: #f7efe5;
  --text: #2a1a10;
  --text-muted: #5c4638;
  --text-subtle: #6b5446;
  --border: rgba(92, 52, 24, 0.13);
  --border-strong: rgba(92, 52, 24, 0.25);
  --glass-fill: rgba(255, 252, 248, 0.82);
  --glass-fill-raised: rgba(255, 255, 255, 0.92);
  --glass-fill-heavy: rgba(252, 248, 242, 0.94);
  --body-glow-1: rgba(194, 65, 12, 0.04);
  --body-glow-2: transparent;
}

/* The marketing glass primitives predate console tokens. */
:root[data-edition="festivalspark"] .ribbon .glass {
  background: var(--glass-fill);
  border-color: var(--border);
}
:root[data-edition="festivalspark"] .ribbon .glass-heavy {
  background: var(--glass-fill-heavy);
  border-color: var(--border-strong);
}

/* Recolor the embedded website illustration along with the product chrome. */
:root[data-edition="festivalspark"] .ribbon .website-preview,
:root[data-edition="festivalspark"] .ribbon .site-hero {
  background: var(--fest-night);
}
:root[data-edition="festivalspark"] .ribbon .site-browser {
  background: #140e0a;
}
:root[data-edition="festivalspark"] .ribbon .site-hero::before {
  border-color: color-mix(in srgb, var(--fest-flame) 28%, transparent);
}
:root[data-edition="festivalspark"] .ribbon .site-hero small {
  color: var(--fest-flame);
}
:root[data-edition="festivalspark"] .ribbon .builder-toolbar b:last-child {
  background: var(--fest-ember);
  border-color: var(--fest-ember);
}
:root[data-edition="festivalspark"] .ribbon .publish-toast > svg {
  background: var(--fest-flame);
  color: var(--fest-night);
}

/* Render the transparent FS monogram in the interface's accent. This changes
   presentation only; the source artwork remains available. */
:root[data-edition="festivalspark"] img[src$="/festivalspark/brand-v1/mark.png"] {
  box-sizing: border-box;
  object-position: -9999px;
  background: var(--accent);
  mask: url('/editions/festivalspark/brand-v1/mark.png') center / contain no-repeat;
  -webkit-mask: url('/editions/festivalspark/brand-v1/mark.png') center / contain no-repeat;
}

/* Written guide callouts. */
:root[data-edition="festivalspark"] .ribbon .festival-guide-card {
  min-width: 0;
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
}
:root[data-edition="festivalspark"] .ribbon .festival-guide-card-inset {
  align-self: center;
  margin: 24px;
}
:root[data-edition="festivalspark"] .ribbon .festival-guide-copy h3 {
  max-width: 30ch;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw + 0.25rem, 3rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
}
:root[data-edition="festivalspark"] .ribbon .festival-guide-copy p {
  max-width: 72ch;
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
:root[data-edition="festivalspark"] .ribbon .festival-guide-copy .text-link {
  margin-top: 24px;
}

/* Documentary-style festival imagery; keep natural colors and full frames. */
:root[data-edition="festivalspark"] .ribbon .festival-photo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
}
:root[data-edition="festivalspark"] .ribbon .festival-photo-wide {
  margin-top: 48px;
}
:root[data-edition="festivalspark"] .ribbon .festival-photo img {
  display: block;
  width: 100%;
  height: auto;
}
:root[data-edition="festivalspark"] .ribbon .festival-photo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 24px;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
:root[data-edition="festivalspark"] .ribbon .festival-photo .text-link {
  margin: 0;
}
:root[data-edition="festivalspark"] .ribbon .festival-photo-credit {
  margin: 32px 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Two-column story with a numbered step card (lineup, map). */
:root[data-edition="festivalspark"] .ribbon .festival-steps-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 80px;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps-layout h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin: 16px 0 24px;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps-layout h2 em {
  color: var(--text-muted);
  font-style: normal;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps-layout p:not(.label) {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 8px 32px;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps article {
  padding: 24px 0;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps article + article {
  border-top: 1px solid var(--border-strong);
}
:root[data-edition="festivalspark"] .ribbon .festival-steps h3 {
  font-size: 1.25rem;
  margin: 10px 0;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps article p {
  margin: 0;
}
:root[data-edition="festivalspark"] .ribbon .festival-steps-media {
  display: grid;
  gap: 24px;
}
@media (max-width: 960px) {
  :root[data-edition="festivalspark"] .ribbon .festival-steps-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Small accent-on-tint chips in the illustrative mockups. The fixed brand
   orange measures 4.34:1 / 3.85:1 on its own tint, so light mode uses the
   deeper ember (6.14:1 / 5.44:1). Dark mode already clears 4.5:1. */
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .float-avatar,
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .event-title > i {
  color: var(--fest-ember-deep);
}

/* Home hero: the main stage at night behind the headline. The photo is dark
   in every theme, so the hero is a night band in light mode too: `.hero` is
   listed in the dark token block at the top of this file, which re-scopes
   text, glass and button tokens for everything inside it.

   Text contrast rests on the scrim, not on the photo. The copy column (left
   55%) sits under at least 76% near-black, so even a white stage light
   composites no brighter than ~#3d; measured contrast for every hero text
   node is recorded in docs/festivalspark-imagery.md. The bottom fades to the
   dark page background, which is seamless in dark mode and a clean edge
   against the canvas in light mode. */
:root[data-edition="festivalspark"] .ribbon .hero {
  color-scheme: dark;
  /* Unstyled text (the float cards' <strong>) inherits from <body>, which
     resolved --text against the page theme; re-resolve it here. */
  color: var(--text);
}
/* Shared light-mode fills that assume a light hero, restored to their dark
   values inside it. */
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .hero .btn-glass {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .hero .btn-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .hero .brief-card {
  background: rgba(255, 255, 255, 0.02);
}
:root[data-edition="festivalspark"][data-theme="light"] .ribbon .hero .float-avatar {
  color: var(--accent);
}
:root[data-edition="festivalspark"] .ribbon .hero-bg {
  background: var(--fest-night);
}
:root[data-edition="festivalspark"] .ribbon .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 45%;
}
:root[data-edition="festivalspark"] .ribbon .hero-scrim {
  background:
    linear-gradient(180deg, rgba(12, 8, 5, 0.5) 0%, rgba(12, 8, 5, 0) 26%, rgba(12, 8, 5, 0) 62%, #15100c 100%),
    linear-gradient(90deg, rgba(12, 8, 5, 0.88) 0%, rgba(12, 8, 5, 0.76) 55%, rgba(12, 8, 5, 0.5) 100%);
}
/* One column on narrow screens: the copy spans the full width. */
@media (max-width: 960px) {
  :root[data-edition="festivalspark"] .ribbon .hero-scrim {
    background:
      linear-gradient(180deg, rgba(12, 8, 5, 0.5) 0%, rgba(12, 8, 5, 0) 26%, rgba(12, 8, 5, 0) 62%, #15100c 100%),
      rgba(12, 8, 5, 0.85);
  }
}