/* Circle 8 - "the free circle". The last circle at the First Station, the flyer's lanterns gone more purple and pink.
   Less "big event", more people doing things: a scrapbook. Noa's list of everything she was that evening becomes
   a board of sticky notes, photos are taped and scribbled on, and the whole page is a little tilted and warm. */

.cx-w8 { background: var(--bg); --sec: clamp(44px, 6.5vw, 92px); }
.cx-w8 .cx-title { font-family: var(--f-hand); }
.cx-w8 .has-bg { --bgph-tint: #5a1a7a; --bgph-blend: luminosity; --bgph-o: 0.45;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, #4a1570 55%, transparent) 30%, color-mix(in srgb, #6a1a55 55%, transparent) 75%, var(--bg) 100%); }

/* ---------- opening: a pile of snapshots ---------- */
.cx-w8 .cx-open { background: radial-gradient(60vmax 50vmax at 80% 20%, rgba(255, 111, 184, 0.3), transparent 70%), linear-gradient(160deg, #2a0f4d, #4a1570 55%, #1a0b33); }
.cx-w8 .cx-open-bg img { opacity: 0.5; filter: saturate(1.2); }
.cx-w8 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(26, 11, 51, 0.92), rgba(42, 15, 77, 0.55) 55%, rgba(74, 21, 112, 0.35)), linear-gradient(180deg, transparent 50%, var(--bg)); }
.cx-w8 .cx-cl { border-radius: 4px; border: 8px solid #fff; border-bottom-width: 30px; }
.cx-w8 .cx-cl::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(255, 230, 160, 0.8); z-index: 2; }
.cx-w8 .cx-open-num { color: var(--pink); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; rotate: 6deg; display: inline-block; width: max-content; }
.cx-w8 .cx-open-name { font-family: var(--f-hand); }
.cx-w8 .cx-open::after { background: linear-gradient(160deg, var(--c1), var(--pink)); }

/* ---------- Noa: everything she was, as notes on a board ---------- */
.cx-w8 .v-roles { background: radial-gradient(60vmax 40vmax at 20% 10%, rgba(255, 111, 184, 0.18), transparent 70%), #24104a; }
.cx-w8 .v-roles .cx-voice-in { grid-template-columns: 1fr; }
.cx-w8 .v-roles .cx-voice-t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px 40px; align-items: start; }
.cx-w8 .v-roles .cx-pull, .cx-w8 .v-roles .cx-sig { grid-column: 1; }
.cx-w8 .v-roles .cx-letter { grid-column: 2; grid-row: 1 / span 3; }
.cx-w8 .v-roles .cx-pull p { font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--acc); }
.cx-w8 .v-roles .cx-letter-in { display: flex; flex-wrap: wrap; gap: 14px; }
.cx-w8 .v-roles .cx-letter-in p { flex: 1 1 220px; margin: 0; padding: 16px 16px 18px; border-radius: 3px; background: var(--paper); color: #2a1a3a; font: 500 1rem/1.55 var(--f-hand);
  box-shadow: 0 12px 24px -12px #000; rotate: calc((mod(var(--k, 0), 3) - 1) * 1.6deg); }
.cx-w8 .v-roles .cx-letter-in p:nth-child(3n + 1) { --k: 0; background: #fff3b8; }
.cx-w8 .v-roles .cx-letter-in p:nth-child(3n + 2) { --k: 1; background: #ffd9ec; }
.cx-w8 .v-roles .cx-letter-in p:nth-child(3n) { --k: 2; background: #d9f0ff; }
.cx-w8 .v-roles .cx-letter-in p:last-child { flex-basis: 100%; background: var(--pink); color: #fff; font-size: 1.25rem; rotate: -1deg; }
.cx-w8 .v-roles .cx-v-media { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); display: grid; margin-top: 30px; }
.cx-w8 .v-roles .cx-v-media .cx-pic { max-height: 360px; }

/* ---------- snapshots taped around ---------- */
.cx-w8 .cx-strip { background: #24104a; }
.cx-w8 .cx-strip .cx-pic { border: 6px solid #fff; border-bottom-width: 22px; border-radius: 3px; rotate: calc((mod(var(--i, 0), 3) - 1) * 2deg); }
.cx-w8 .v-quiz .cx-v-media .cx-pic { border-radius: 16px; box-shadow: 0 24px 50px -24px #000; }
.cx-w8 .v-scrap .cx-loop { border-radius: 6px; border: 5px solid #fff; }
.cx-w8 .cx-clips.v-scrap .cx-loop:nth-child(odd) { rotate: -1deg; }
.cx-w8 .cx-clips.v-scrap .cx-loop:nth-child(even) { rotate: 1.2deg; }
.cx-w8 .cx-flyer.v-scrap .cx-flyer-art { rotate: -3deg; }
.cx-w8 .cx-flyer.v-scrap .cx-flyer-art .cx-pic { border: 8px solid #fff; border-radius: 3px; }
.cx-w8 .cx-wall.v-scrap .cx-w-item { border: 6px solid #fff; border-radius: 3px; rotate: calc((mod(var(--i), 5) - 2) * 1.4deg); aspect-ratio: auto; }
.cx-w8 .cx-wall.v-scrap .cx-w-item img { aspect-ratio: var(--ar); height: auto; }
body:has(.cx-w8) { background: #1a0b33; }
@media (max-width: 800px) {
  .cx-w8 .v-roles .cx-voice-t { grid-template-columns: 1fr; }
  .cx-w8 .v-roles .cx-letter { grid-column: 1; grid-row: auto; }
}
.cx-w8 .v-prep .cx-stack-in .cx-pic { padding: 8px 8px 28px; } .cx-w8 .v-prep .cx-head { text-align: center; margin-inline: auto; } .cx-w8 .v-prep .cx-mark { justify-content: center; }

/* the evening: colour behind every scene, prints with a thin white edge, the hug as the hero */
.cx-w8 .has-bg { --bgph-o: 0.5; }
.cx-w8 .cx-mosaic .cx-mo-p { border: 4px solid #fff; border-radius: 4px; box-shadow: 0 16px 30px -16px #000; }
.cx-w8 .cx-mosaic .cx-mo-p:nth-child(odd) { rotate: -0.8deg; } .cx-w8 .cx-mosaic .cx-mo-p:nth-child(even) { rotate: 0.9deg; }
.cx-w8 .cx-mosaic .cx-mo-v .cx-loop { border-radius: 6px; }
.cx-w8 .cx-bigclip .cx-title { font-family: var(--f-hand); color: #fff; }
.cx-w8 .cx-bigclip .cx-mark { color: var(--acc); }
.cx-w8 .v-roles .cx-voice-t { position: relative; z-index: 1; }
.cx-w8 .cx-open .cx-cut { z-index: 0; opacity: 0.9; }
.cx-w8 .cx-open-in { position: relative; z-index: 1; }