/* Festival pages show each festival's own photography in its natural colors (owner request, 2026-11-02).
   Replaces the purple/pink/cyan tints with neutral readability layers. Loaded after app CSS on festival
   routes except the /festivals list (see partials/head and components/layouts/public). */

/* Hero: no colored glows or tinted backing; a neutral scrim only where text sits. */
html body .ff-festival-hero::before,
html body .ff-festival-hero::after { display: none; }
html body .ff-festival-hero,
html body .ff-festival-hero-media { background-color: #0e0e10; }
html body .ff-festival-hero-media img { filter: none; }
html body .ff-festival-hero-readability-scrim {
    background:
        linear-gradient(90deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 46%) 42%, rgb(0 0 0 / 12%) 72%, transparent 92%),
        linear-gradient(0deg, rgb(0 0 0 / 55%) 0%, transparent 56%);
}
html body .ff-festival-hero-content { background: none; }
html body .ff-festival-hero-action-primary {
    background: #ffffff;
    color: #111113;
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}
html body .ff-festival-hero-action-primary:hover { background: #f1f1f2; color: #111113; }

/* Festival Circle band: neutral link colors; a light left-side shade behind the heading instead of
   a dark tint over the whole photo. */
html body [data-festival-circle] .absolute.inset-0.bg-gradient-to-r {
    background-image: linear-gradient(90deg, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 28%) 45%, transparent 75%);
}
html body [data-festival-circle] > .relative.overflow-hidden > .relative :is(h2, p) { text-shadow: 0 1px 3px rgb(0 0 0 / 50%); }
html body [data-festival-circle] :is([class*="text-fuchsia-"], [class*="text-violet-"]) { color: inherit; }

/* Faint decorative purple/cyan glows behind the page content. */
html body .ff-festival-experience::before,
html body .ff-festival-content-grid--flagship::before,
html body .ff-festival-preparation-showcase::before { display: none; }

/* Neutral surfaces that were lavender or purple gradients. */
html:not(.dark) body .ff-festival-overview-card--journey { background: #ffffff; }
html body .ff-festival-companion-banner {
    background: linear-gradient(100deg, #18181b 0%, #27272a 100%);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Immersive festival overview (owner-approved direction O, light + dark).
   Scoped to the overview page: the hero is .ff-festival-hero--flagship and the
   page content grid is .ff-festival-immersive (inside main.ff-festival-experience).
   --------------------------------------------------------------------------- */
html body:has(.ff-festival-immersive) {
    --fi-ground: #f6f6f4;
    --fi-ink: #111113;
    --fi-muted: #5f5d57;
    --fi-card: #ffffff;
    --fi-line: #e4e4e0;
    --fi-chip: #f1f1ee;
    --fi-chip-hover: #e7e7e3;
    --fi-panel: #ffffffeb;
    --fi-shadow: 0 14px 36px rgb(0 0 0 / 12%);
    background: var(--fi-ground);
}
html.dark body:has(.ff-festival-immersive) {
    --fi-ground: #0c0c0d;
    --fi-ink: #f4f4f2;
    --fi-muted: #a8a59e;
    --fi-card: #18181a;
    --fi-line: rgb(255 255 255 / 10%);
    --fi-chip: rgb(255 255 255 / 6%);
    --fi-chip-hover: rgb(255 255 255 / 11%);
    --fi-panel: rgb(24 24 26 / 92%);
    --fi-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

/* Tall photo hero, title at the bottom. */
/* Height stays within the existing opening contract: at most 520px wide / 480px narrow. */
html body .ff-festival-hero--flagship .ff-festival-hero-stage {
    min-height: 30.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
html body .ff-festival-hero--flagship .ff-festival-hero-content { padding-bottom: 4rem; }
html body .ff-festival-hero--flagship .ff-festival-title {
    font-size: clamp(2.25rem, 5.6vw, 5rem);
    line-height: .92;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 2px 28px rgb(0 0 0 / 40%);
}
/* Photos keep their natural brightness (owner request, Nov 2): one soft shade only where the
   text sits at the bottom; no full-width top or side darkening. Text shadows carry the rest. */
html body .ff-festival-hero--flagship .ff-festival-hero-readability-scrim {
    background: linear-gradient(0deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 22%) 42%, transparent 70%);
}
/* Dark mode: only the bottom edge melts into the page ground. */
html.dark body .ff-festival-hero--flagship .ff-festival-hero-readability-scrim {
    background: linear-gradient(0deg, #0c0c0d 0%, rgb(12 12 13 / 45%) 14%, rgb(0 0 0 / 18%) 42%, transparent 70%);
}
html body .ff-festival-hero--flagship .ff-festival-hero-content :is(p, span, strong, a:not(.ff-festival-hero-action-primary), div.ff-festival-countdown) {
    text-shadow: 0 1px 3px rgb(0 0 0 / 55%), 0 0 18px rgb(0 0 0 / 35%);
}

/* Edition + tabs card rises over the bottom of the photo. */
html body:has(.ff-festival-immersive) .ff-festival-nav-shell--mockup {
    /* No z-index here: a stacking context would cap the open More menu below the sticky header. */
    position: relative;
    margin-top: -4rem;
}

/* The bar that holds the edition card uses the page ground (it was navy in dark mode). */
html body:has(.ff-festival-immersive) div:has(> .ff-festival-nav-shell--mockup) {
    background: var(--fi-ground);
    border-color: var(--fi-line);
}

/* Page body: neutral ground, neutral cards, no tinted gradients. */
html body:has(.ff-festival-immersive) .ff-festival-experience { background: var(--fi-ground); color: var(--fi-ink); }
html body .ff-festival-immersive :is(section, article, aside)[class*="bg-gradient-to"] {
    background-image: none;
    background-color: var(--fi-card);
    border-color: var(--fi-line);
}
html body .ff-festival-immersive .ff-festival-overview-card { background: var(--fi-card); border-color: var(--fi-line); }

/* No purple/pink/violet accents on the overview: neutral chips, ink text, neutral lines.
   Other small status tones (green, amber, cyan) keep their meaning. */
html body .ff-festival-immersive :is([class*="bg-fuchsia-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-pink-"]):not([class*="from-"]) {
    background-color: var(--fi-chip);
}
html body .ff-festival-immersive :is([class*="text-fuchsia-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-pink-"]) {
    color: var(--fi-ink);
}
html body .ff-festival-immersive :is([class*="border-fuchsia-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-pink-"]) {
    border-color: var(--fi-line);
}
html body .ff-festival-immersive :is(a, button):is([class*="from-fuchsia-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-pink-"]) {
    background-image: none;
    background-color: var(--fi-ink);
    color: var(--fi-ground);
}
html body .ff-festival-immersive :not(a, button):is([class*="from-fuchsia-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-pink-"]) {
    background-image: none;
    background-color: var(--fi-chip);
    border-color: var(--fi-line);
}

/* Plan / Pack / Meet / Go tracker: ink instead of violet. */
html body .ff-festival-immersive .ff-festival-mini-journey::before { background: var(--fi-line); }
html body .ff-festival-immersive .ff-festival-mini-journey span::before { border-color: var(--fi-muted); }
html body .ff-festival-immersive .ff-festival-mini-journey span.is-ready::before { border-color: var(--fi-ink); background: var(--fi-ink); }

/* Plan your weekend. */
.ff-festival-plan {
    margin: 0 0 2rem;
    padding: 1.5rem;
    border-radius: 22px;
    background: var(--fi-panel, #fff);
    border: 1px solid var(--fi-line, #e4e4e0);
    box-shadow: var(--fi-shadow, none);
    color: var(--fi-ink, #111113);
}
.ff-festival-plan-title { margin: 0 0 1.1rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.ff-festival-plan-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ff-festival-plan-phase { border-top: 3px solid var(--fi-ink, #111113); padding-top: .9rem; }
.ff-festival-plan-phase h3 { margin: 0 0 .65rem; font-size: 1.1rem; font-weight: 800; }
.ff-festival-plan-phase ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ff-festival-plan-phase a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .6rem .9rem;
    border-radius: 12px;
    background: var(--fi-chip, #f1f1ee);
    color: var(--fi-ink, #111113);
    font-size: .95rem;
    font-weight: 650;
    text-decoration: none;
    transition: background-color .2s ease-out;
}
.ff-festival-plan-phase a:hover { background: var(--fi-chip-hover, #e7e7e3); }
.ff-festival-plan-phase a:focus-visible { outline: 3px solid var(--fi-ink, #111113); outline-offset: 2px; }
.ff-festival-plan-phase small { color: var(--fi-muted, #5f5d57); font-size: .85rem; font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) {
    .ff-festival-plan-phases { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    html body .ff-festival-hero--flagship .ff-festival-hero-stage { min-height: 0; }
    html body .ff-festival-hero--flagship .ff-festival-hero-content { padding-bottom: 3.5rem; }
    html body:has(.ff-festival-immersive) .ff-festival-nav-shell--mockup { margin-top: -2.5rem; }
}
@media (max-width: 480px) {
    /* Narrow phones: keep the hero within the 480px contract even with wider fallback fonts. */
    html body .ff-festival-hero--flagship .ff-festival-hero-content { padding-bottom: 1.25rem; }
    html body:has(.ff-festival-immersive) .ff-festival-nav-shell--mockup { margin-top: -.75rem; }
}
@media (max-width: 480px) {
    html body .ff-festival-hero--flagship .ff-festival-hero-stage { padding-top: .75rem; }
    html body .ff-festival-hero--flagship .ff-festival-hero-content .max-w-5xl > * + * { margin-top: .6rem; }
}
@media (max-width: 640px) {
    /* The phone More menu is position: fixed to the viewport bottom. Backdrop filters on its ancestors would
       make them its containing block and lift it under the sticky header, so drop them while it is open. */
    html body:has(.ff-festival-immersive) div:has(> .ff-festival-nav-shell--mockup):has([data-festival-more-menu][open]),
    html body:has(.ff-festival-immersive) .ff-festival-navigation--flagship:has([data-festival-more-menu][open]) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) { .ff-festival-plan-phase a { transition: none; } }

/* ---------------------------------------------------------------------------
   Condensed immersive overview (owner-approved direction Q): photo tiles for
   every feature, a one-line lineup, then happening/about beside your plans.
   --------------------------------------------------------------------------- */
.ff-festival-immersive > * + * { margin-top: 2rem; }
.ff-festival-q-heading { margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fi-ink, #111113); }
.ff-festival-tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ff-festival-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 10.5rem;
    overflow: hidden;
    border-radius: 16px;
    background: #18181a;
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
}
.ff-festival-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.ff-festival-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 30%) 38%, transparent 62%); }
.ff-festival-tile:hover img { transform: scale(1.04); }
.ff-festival-tile:focus-visible { outline: 3px solid var(--fi-ink, #111113); outline-offset: 3px; }
.ff-festival-tile-copy { padding: .9rem; }
.ff-festival-tile-copy strong { display: block; font-size: 1.05rem; font-weight: 800; }
.ff-festival-tile-copy span { display: block; margin-top: .1rem; font-size: .85rem; color: #e4e0d8; }

.ff-festival-lineup-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    background: var(--fi-card, #fff);
    border: 1px solid var(--fi-line, #e4e4e0);
    color: var(--fi-ink, #111113);
}
.ff-festival-lineup-strip h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.ff-festival-lineup-strip p { flex: 1; min-width: 14rem; margin: 0; font-size: .95rem; }
.ff-festival-lineup-strip p span { color: var(--fi-muted, #5f5d57); white-space: nowrap; }
.ff-festival-lineup-strip a, .ff-festival-q-card a:not([class]), .ff-festival-q-link { color: var(--fi-ink, #111113); font-weight: 700; font-size: .9rem; }

.ff-festival-q-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; align-items: start; }
.ff-festival-q-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.ff-festival-q-main > section { margin-top: 0; }
.ff-festival-q-side { min-width: 0; }
.ff-festival-q-card {
    padding: 1.25rem;
    border-radius: 18px;
    background: var(--fi-card, #fff);
    border: 1px solid var(--fi-line, #e4e4e0);
    color: var(--fi-ink, #111113);
}
.ff-festival-q-card h2 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 800; }
.ff-festival-q-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--fi-muted, #5f5d57); }
.ff-festival-q-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ff-festival-q-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ff-festival-q-solid, .ff-festival-q-soft {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}
.ff-festival-q-solid { background: var(--fi-ink, #111113); color: var(--fi-ground, #f6f6f4); }
.ff-festival-q-soft { background: var(--fi-chip, #f1f1ee); color: var(--fi-ink, #111113); }
.ff-festival-q-about-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: pre-line; }
.ff-festival-q-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: .9rem 0; font-size: .9rem; }
.ff-festival-q-facts dt { color: var(--fi-muted, #5f5d57); }
.ff-festival-q-facts dd { margin: 0; }

@media (max-width: 1023px) {
    .ff-festival-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ff-festival-q-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .ff-festival-tile { height: 8.25rem; }
    .ff-festival-tile-copy { padding: .7rem; }
    .ff-festival-tile-copy span { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .ff-festival-tile img { transition: none; } }
@media (max-width: 900px) {
    /* Phones: plan links become wrapping pills so the panel stays short. */
    .ff-festival-plan-phase ul { display: flex; flex-wrap: wrap; gap: .4rem; }
    .ff-festival-plan-phase a { min-height: 2.75rem; padding: .5rem .9rem; border-radius: 999px; }
    .ff-festival-plan-phase small { display: none; }
}

/* ---------------------------------------------------------------------------
   Every festival page (overview and sub-pages) shares the neutral palette and
   natural photo color (owner request, Nov 2). Pages are recognised by the
   festival section tabs; purple/pink/violet accents become ink and chips,
   other status tones (green, amber, cyan, red) keep their meaning.
   --------------------------------------------------------------------------- */
html body:has(.ff-festival-navigation) {
    --fi-ground: #f6f6f4;
    --fi-ink: #111113;
    --fi-muted: #5f5d57;
    --fi-card: #ffffff;
    --fi-line: #e4e4e0;
    --fi-chip: #f1f1ee;
    --fi-chip-hover: #e7e7e3;
    --fi-panel: #ffffffeb;
    --fi-shadow: 0 14px 36px rgb(0 0 0 / 12%);
}
html.dark body:has(.ff-festival-navigation) {
    --fi-ground: #0c0c0d;
    --fi-ink: #f4f4f2;
    --fi-muted: #a8a59e;
    --fi-card: #18181a;
    --fi-line: rgb(255 255 255 / 10%);
    --fi-chip: rgb(255 255 255 / 6%);
    --fi-chip-hover: rgb(255 255 255 / 11%);
    --fi-panel: rgb(24 24 26 / 92%);
    --fi-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}
html body:has(.ff-festival-navigation) :is([class*="bg-fuchsia-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-pink-"]):not([class*="from-"]):not(img) {
    background-color: var(--fi-chip);
}
html body:has(.ff-festival-navigation) :is(a, button, summary, span):is([class*="bg-fuchsia-6"], [class*="bg-fuchsia-7"], [class*="bg-violet-6"], [class*="bg-violet-7"], [class*="bg-purple-6"], [class*="bg-purple-7"]):not([class*="from-"]):not(img) {
    background-color: var(--fi-ink);
    color: var(--fi-ground);
}
html body:has(.ff-festival-navigation) :is([class*="text-fuchsia-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-pink-"]) {
    color: var(--fi-ink);
}
html body:has(.ff-festival-navigation) :is([class*="border-fuchsia-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-pink-"]) {
    border-color: var(--fi-line);
}
html body:has(.ff-festival-navigation) :is(a, button, summary):is([class*="from-fuchsia-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-pink-"]) {
    background-image: none;
    background-color: var(--fi-ink);
    color: var(--fi-ground);
}
html body:has(.ff-festival-navigation) :not(a, button, summary, img):is([class*="from-fuchsia-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-pink-"]) {
    background-image: none;
    background-color: var(--fi-chip);
    border-color: var(--fi-line);
}
/* Sub-page heroes: no colored backing behind (or instead of) the festival photo. */
html body .ff-social-subpage-hero [class*="from-fuchsia-"] { background-image: none; background-color: #18181a; }
html body .ff-festival-subpage-readability-scrim {
    background: linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 24%) 45%, transparent 75%);
}

/* Compact festival photo band for sub-pages without their own hero. */
.ff-festival-subpage-band-wrap { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem 0; }
.ff-festival-subpage-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 9rem;
    overflow: hidden;
    border-radius: 20px;
    background: #18181a;
    color: #ffffff;
    isolation: isolate;
}
.ff-festival-subpage-band-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ff-festival-subpage-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 18%) 55%, transparent 85%); }
.ff-festival-subpage-band-copy { padding: 1rem 1.25rem; text-shadow: 0 1px 3px rgb(0 0 0 / 55%); }
.ff-festival-subpage-band-name { display: inline-flex; gap: .4rem; color: #ffffff; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.ff-festival-subpage-band-name:hover { text-decoration: underline; }
.ff-festival-subpage-band-name:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; border-radius: 6px; }
.ff-festival-subpage-band-copy p { margin: .2rem 0 0; font-size: .9rem; font-weight: 600; color: #f1efe9; }
@media (min-width: 640px) { .ff-festival-subpage-band-wrap { padding: 1.25rem 1.5rem 0; } .ff-festival-subpage-band { min-height: 10.5rem; } }
@media (min-width: 1024px) { .ff-festival-subpage-band-wrap { padding: 1.5rem 2rem 0; } }

/* Festival tabs, buttons and kickers: ink and chips instead of violet gradients. */
html body .ff-festival-navigation :is(.ff-festival-primary-nav-link.is-current, summary.is-current) {
    background-image: none;
    background-color: var(--fi-chip, #f1f1ee);
    color: var(--fi-ink, #111113);
    border-color: var(--fi-line, #e4e4e0);
    box-shadow: none;
}
html body .ff-festival-navigation .ff-festival-primary-nav-link.is-current * { color: inherit; }
html body .ff-festival-navigation .ff-festival-more-link.is-current,
html body .ff-festival-navigation .ff-festival-more-link.is-current * { color: var(--fi-ink, #111113); }
html body .ff-festival-navigation .ff-festival-more-link.is-current [class*="bg-violet-"] { background-color: var(--fi-ink, #111113); }
html body:has(.ff-festival-navigation) .ff-primary-cta {
    background-image: none;
    background-color: var(--fi-ink);
    color: var(--fi-ground);
    border-color: transparent;
    box-shadow: none;
}
html body:has(.ff-festival-navigation) .ff-primary-cta:hover { background-color: var(--fi-muted); }
html body:has(.ff-festival-navigation) .ff-consumer-kicker { color: var(--fi-muted); }

/* No decorative purple/teal glows behind festival pages or over their photos. */
html body:has(.ff-festival-navigation) :is(main, .ff-member-canvas, .ff-festival-guide-experience) { background-image: none; }
html body:has(.ff-festival-navigation) :is(main, .ff-member-canvas, .ff-festival-guide-experience)::before,
html body:has(.ff-festival-navigation) :is(main, .ff-member-canvas, .ff-festival-guide-experience)::after,
html body .ff-social-subpage-hero > div::after { background-image: none; background: none; }
html body:has(.ff-festival-navigation) :is(.ff-festival-guide-hero, .ff-packing-hero) {
    background-image: none;
    background-color: var(--fi-card);
    border-color: var(--fi-line);
}

/* Sub-page photo heroes are compact: the page content starts within the first screen. */
html body .ff-social-subpage-hero > div:first-child,
html body .ff-festival-day-hero--live-map > div:first-child { height: 15rem !important; }
@media (min-width: 640px) {
    html body .ff-social-subpage-hero > div:first-child,
    html body .ff-festival-day-hero--live-map > div:first-child { height: 17rem !important; }
}
@media (min-width: 1024px) {
    html body .ff-social-subpage-hero > div:first-child,
    html body .ff-festival-day-hero--live-map > div:first-child { height: 19rem !important; }
}

/* One neutral ground on every festival page (the tab strip and page were navy in dark mode). */
html body:has(.ff-festival-navigation) { background: var(--fi-ground); }
html body:has(.ff-festival-navigation) div:has(> .ff-festival-nav-shell),
html body:has(.ff-festival-navigation) div:has(> div > .ff-festival-navigation) {
    background: var(--fi-ground);
    border-color: var(--fi-line);
}
html body:has(.ff-festival-navigation) :is(main, .ff-member-canvas) { background-color: var(--fi-ground); }
html body:has(.ff-festival-navigation) :is(.ff-festival-guide-hero, .ff-packing-hero)::before,
html body:has(.ff-festival-navigation) :is(.ff-festival-guide-hero, .ff-packing-hero)::after { display: none; }

/* Main-column modules (meetups, who's here, members going) stack with the column gap. */
.ff-festival-q-main > * { margin-top: 0; margin-bottom: 0; }
@media (max-width: 1023px) {
    /* One column on phones/tablets: keep your plans right after About, before meetups and who's here. */
    .ff-festival-q-main, .ff-festival-q-side { display: contents; }
    .ff-festival-q-split > *, .ff-festival-q-main > *, .ff-festival-q-side > * { min-width: 0; }
    .ff-festival-q-main > :is(#festival-meetups, #currently-here, #members-going) { order: 2; }
}

/* Classic (past/cancelled) overview: the recap cards size to their column, not the viewport
   (owner report, Nov 2 - three columns squeezed cards to ~115px beside the app menu and sidebar).
   One per row in a narrow column, two (first card full width) in a medium one, three when there is room. */
html body .ff-festival-overview-main { container-type: inline-size; }
html body .ff-festival-overview-main .ff-festival-overview-strip { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 34rem) {
    html body .ff-festival-overview-main .ff-festival-overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .ff-festival-overview-main .ff-festival-overview-strip > :first-child { grid-column: 1 / -1; }
}
@container (min-width: 56rem) {
    html body .ff-festival-overview-main .ff-festival-overview-strip { grid-template-columns: 1.15fr .925fr .925fr; }
    html body .ff-festival-overview-main .ff-festival-overview-strip > :first-child { grid-column: auto; }
}

/* Breadcrumbs on the #f6f6f4 ground: zinc-500 is 4.38:1, the muted token keeps >= 4.5:1 (axe, Nov 3). */
html body:has(.ff-festival-navigation) nav[aria-label="Breadcrumb"] { color: var(--fi-muted); }

/* Unconfirmed lineup label (owner decision, Nov 3): amber, readable in both themes. */
.ff-festival-lineup-unconfirmed {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #78350f;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
html.dark .ff-festival-lineup-unconfirmed { background: rgb(251 191 36 / 16%); color: #fde68a; }

/* Schedule and Lost & Found (public page tracker #6/#8, Nov 3): plain neutral cards instead of
   lavender/cyan gradients; the schedule hint is plain text, not an outlined pill. */
html body:has(.ff-festival-navigation) :is(.ff-schedule-hero, .ff-schedule-empty, .ff-schedule-day) {
    background: var(--fi-card) !important;
    background-image: none !important;
    border: 1px solid var(--fi-line) !important;
    box-shadow: none !important;
}
html body:has(.ff-festival-navigation) .ff-schedule-hero .ff-schedule-note {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--fi-muted) !important;
}
html body:has(.ff-festival-navigation) :is(.ff-schedule-hero .ff-consumer-kicker) {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--fi-muted) !important;
}
html body:has(.ff-festival-navigation) :is(.ff-lost-found-experience > section) {
    background: var(--fi-card) !important;
    background-image: none !important;
    border-color: var(--fi-line) !important;
}

/* Compact sub-page header (Photos, Community, Activity, Companions; Nov 4): the edition badge was
   styled for the dark photo hero, so it gets a neutral chip on the page ground. */
.ff-subpage-header > div > span.rounded-full {
    border-color: var(--fi-line, #e4e4e0) !important;
    background: var(--fi-chip, #f1f1ee) !important;
    color: var(--fi-ink, #111113) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.ff-subpage-header > div > span.rounded-full > span { color: var(--fi-muted, #5f5d57) !important; }
html.dark .ff-subpage-header > div > span.rounded-full {
    border-color: rgb(255 255 255 / 10%) !important;
    background: rgb(255 255 255 / 6%) !important;
    color: #f4f4f2 !important;
}

/* Past editions: the actual weekend weather (Nov 4). */
.ff-festival-weekend-weather { margin-top: .9rem; }
.ff-festival-weekend-weather-sentence { margin: 0; color: var(--fi-ink, #111113); }
.ff-festival-weekend-weather-days { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.ff-festival-weekend-weather-days li {
    display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .6rem; border-radius: 999px;
    background: var(--fi-chip, #f1f1ee); color: var(--fi-muted, #5f5d57); font-size: .8rem;
}
.ff-festival-weekend-weather-days li strong { color: var(--fi-ink, #111113); }
.ff-festival-weekend-weather-days li em { font-style: normal; color: var(--fi-ink, #111113); }