/* Circle 11 - "a new chapter". Three years later, at the Garden. Grown-up and current rather than nostalgic:
   the flyer's twilight violet and gold (the logo is gold now), clean dark surfaces, gold hairlines, the summary
   film up front, the clips as a tidy grid of reels, and "what we built together": the sixteen crowdfunding goals
   we opened, lighting up one after another. */

.cx-w11 { background: var(--bg); --sec: clamp(48px, 7vw, 100px); }
.cx-w11 .cx-title { font-family: var(--f-hand); }
.cx-w11 .cx-mark { color: var(--acc); }
.cx-w11 .cx-ring { box-shadow: 0 0 14px rgba(243, 200, 106, 0.6); }
.cx-w11 .has-bg { --bgph-tint: #231a4d; --bgph-blend: luminosity; --bgph-o: 0.42;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, #231a4d 60%, transparent) 30%, color-mix(in srgb, #231a4d 60%, transparent) 70%, var(--bg) 100%); }

/* ---------- opening: the Garden at dusk, gold on violet ---------- */
.cx-w11 .v-garden .cx-open-bg img { opacity: 0.85; }
.cx-w11 .v-garden .cx-open-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(12, 10, 31, 0.9) 0%, rgba(12, 10, 31, 0.55) 45%, rgba(138, 92, 255, 0.1) 80%), linear-gradient(180deg, transparent 55%, var(--bg)); }
.cx-w11 .cx-open-num { color: transparent; background: linear-gradient(170deg, #fff4d6, var(--acc) 45%, #b8862f); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 30px rgba(243, 200, 106, 0.4)); }
.cx-w11 .cx-open-name { font-family: var(--f-hand); }
.cx-w11 .cx-open-name::after { content: ''; display: block; width: 2.4em; height: 2px; margin-top: 0.3em; background: linear-gradient(90deg, var(--acc), transparent); }
.cx-w11 .cx-open::after { background: linear-gradient(160deg, #231a4d, var(--acc)); }

/* ---------- the summary film ---------- */
.cx-w11 .v-summary { background: linear-gradient(180deg, var(--bg), #15112f); }
.cx-w11 .v-summary .cx-films-in { max-width: 420px; margin-inline: auto; }
.cx-w11 .v-summary .video { aspect-ratio: 9 / 16; border-radius: 22px; box-shadow: 0 0 0 1px rgba(243, 200, 106, 0.45), 0 40px 100px -40px rgba(138, 92, 255, 0.8); }
.cx-w11 .v-summary .cx-head { text-align: center; margin-inline: auto; }
.cx-w11 .v-summary .cx-mark { justify-content: center; }

/* ---------- reels ---------- */
.cx-w11 .v-reels .cx-loop { border-radius: 16px; box-shadow: 0 0 0 1px rgba(243, 200, 106, 0.3); }
.cx-w11 .v-reels .cx-loop figcaption { font-family: var(--f-hand); }
.cx-w11 .v-garden .cx-v-media .cx-pic { border-radius: 18px; box-shadow: 0 0 0 1px rgba(243, 200, 106, 0.35), 0 30px 60px -30px #000; }
.cx-w11 .cx-strip { background: #15112f; }
.cx-w11 .cx-strip .cx-pic { border-radius: 14px; box-shadow: 0 0 0 1px rgba(243, 200, 106, 0.25); }

/* ---------- what we built together ---------- */
.cx-w11 .cx-goals { background: radial-gradient(60vmax 40vmax at 50% 0%, rgba(243, 200, 106, 0.14), transparent 70%), #15112f; }
.cx-w11 .cx-goals .cx-head { max-width: 900px; }
.cx-w11 .cx-goals .cx-title { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.cx-w11 .cx-goals-in.lit li { box-shadow: 0 0 0 0 transparent; }
.cx-w11 .cx-goals-in.lit li:last-child { filter: drop-shadow(0 0 24px rgba(243, 200, 106, 0.6)); }

.cx-w11 .cx-flyer.v-garden { background: #15112f; }
.cx-w11 .cx-flyer.v-garden .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(243, 200, 106, 0.4), 0 40px 90px -35px rgba(138, 92, 255, 0.8); }
.cx-w11 .cx-wall.v-garden .cx-w-item { border-radius: 12px; }
body:has(.cx-w11) { background: #0c0a1f; }