/* =====================================================================
   Conventions: a festival walk through three years  (body.fest)
   Poster numerals, tape, stickers, wristband colours. Each year has its own palette and photo style.
   ===================================================================== */
body.fest.memory-page { --mm-gold: #ffe14d; background: #0b1024;
  --mm-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 4h16l-8 14zM16 4h16l-8 14zM32 4h16l-8 14z' fill='%23ff4d8d'/%3E%3Cpath d='M16 4h16l-8 14z' fill='%2333d6ff'/%3E%3Cpath d='M32 4h16l-8 14z' fill='%23ffe14d'/%3E%3C/svg%3E"); }
body.fest .ev-back i { filter: blur(12px) saturate(1.3) brightness(0.62) !important; opacity: 1 !important; }
body.fest .ev-back::after { background: linear-gradient(180deg, rgba(11, 16, 36, 0.4), rgba(11, 16, 36, 0.62)) !important; mix-blend-mode: normal; }
body.fest .mm-hero { min-height: min(100svh, 920px); }
body.fest .mm-hero-photo { inset: 0 -2% 22%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
body.fest .mm-hero::before { background: linear-gradient(180deg, rgba(11, 16, 36, 0.65), transparent 24%, transparent 44%, rgba(11, 16, 36, 0.82) 68%, rgba(11, 16, 36, 0.97) 90%); }
body.fest .mm-hero::after { background: radial-gradient(40% 50% at 82% 24%, rgba(255, 77, 141, 0.55), transparent 70%), radial-gradient(36% 44% at 14% 32%, rgba(51, 214, 255, 0.5), transparent 70%); }
body.fest .mm-title-noir { font-size: clamp(2.8rem, 8vw, 6.2rem); color: #fff; text-shadow: 4px 4px 0 #ff4d8d, -3px -3px 0 #33d6ff, 0 10px 30px #000; rotate: -1.5deg; }
body.fest .mm-title-noir small { color: #ffe14d; text-shadow: 2px 2px 0 #000; rotate: 1deg; }
.fe-bunting { position: absolute; z-index: 3; inset: calc(var(--header-h, 80px) + 6px) 0 auto; height: 44px; pointer-events: none; background: var(--mm-key) center / 72px 36px repeat-x; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.5)); transform-origin: 50% 0; animation: fe-sway 5s ease-in-out infinite alternate; }
@keyframes fe-sway { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
/* year navigation */
.fe-nav { position: relative; z-index: 2; padding: 10px 0 clamp(30px, 4vw, 54px); text-align: center; }
.fe-nav p { margin: 0 0 14px; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 12px #000; }
.fe-nav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fe-nav a { display: grid; min-width: 150px; padding: 12px 26px; text-decoration: none; color: #0b1024; background: var(--c); border-radius: 14px; rotate: -2deg; box-shadow: 0 16px 26px -14px #000; transition: rotate 0.4s var(--ease-spring), transform 0.4s var(--ease-spring);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat; }
.fe-nav a:nth-child(even) { rotate: 2deg; }
.fe-nav a:hover, .fe-nav a:focus-visible { rotate: 0deg; transform: translateY(-5px) scale(1.04); }
.fe-nav b { font-family: var(--font-hand); font-weight: 800; font-size: 2rem; line-height: 1; }
.fe-nav small { font-weight: 700; font-size: 0.85rem; }

/* an era */
.fe-era { --c1: #ffe14d; --c2: #ff4d8d; --ink: #0b1024; position: relative; isolation: isolate; padding: clamp(50px, 7vw, 100px) 0 clamp(40px, 5vw, 70px); overflow: clip; }
.fe-era::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg, #0b1024) 88%, transparent) 8%, color-mix(in srgb, var(--bg, #0b1024) 88%, transparent) 92%, transparent); }
.fe-tape { position: absolute; z-index: 1; top: 18px; inset-inline: -2%; height: 34px; rotate: -1.2deg; background: repeating-linear-gradient(135deg, var(--c1) 0 26px, var(--ink) 26px 52px); opacity: 0.9; box-shadow: 0 10px 20px -10px #000; }
.fe-head { position: relative; display: grid; align-items: end; min-height: clamp(200px, 26vw, 360px); margin-bottom: clamp(18px, 3vw, 36px); }
.fe-year { position: absolute; z-index: -1; inset-inline-end: -2vw; top: 0; font-family: var(--font-hand); font-weight: 800; font-size: clamp(8rem, 30vw, 26rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--c1) 70%, transparent); letter-spacing: -0.04em; opacity: 0.85; translate: 60px 0; transition: translate 1.4s var(--ease-out), opacity 1s; }
.fe-head.in .fe-year { translate: 0 0; }
.fe-kicker { margin: 0; display: inline-block; padding: 3px 14px; font-weight: 800; font-size: 0.95rem; color: var(--ink); background: var(--c1); rotate: -2deg; }
.fe-head h2 { margin: 8px 0 8px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1; color: #fff; text-shadow: 4px 4px 0 var(--c2), 0 8px 26px #000; }
.fe-text p { margin: 0 0 0.6em; max-width: 34em; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.7; color: #fff; text-shadow: 0 2px 14px #000; }
.fe-sub { text-align: center; margin: clamp(34px, 5vw, 64px) auto 18px; padding-inline: 20px; }
.fe-sub h3 { display: inline-block; margin: 0; padding: 4px 22px; font-family: var(--font-hand); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ink); background: var(--c1); rotate: 1.2deg; box-shadow: 5px 5px 0 var(--c2); }
.fe-sub h3:empty { display: none; }
.fe-sub p { margin: 14px auto 0; max-width: 34em; color: #fff; text-shadow: 0 2px 12px #000; }
.fe-sub p:empty { display: none; }
/* collage: one big frame, two that overlap it */
.fe-collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(60px, 6.4vw, 96px); }
.fe-ph { display: block; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #000; box-shadow: 0 34px 60px -30px #000; }
.fe-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.fe-ph:hover img, .fe-ph:focus-visible img { transform: scale(1.06); }
.fe-collage .fe-ph { opacity: 0; translate: 0 50px; transition: opacity 0.9s calc(var(--i) * 0.14s), translate 1s var(--ease-spring) calc(var(--i) * 0.14s), rotate 0.5s var(--ease-spring); }
.fe-collage.in .fe-ph { opacity: 1; translate: 0 0; }
.fe-collage .big { grid-column: 1 / span 9; grid-row: 1 / span 6; border: 8px solid #fff; rotate: -1deg; }
.fe-collage .a { grid-column: 8 / span 5; grid-row: 1 / span 3; z-index: 2; border: 6px solid #fff; rotate: 3deg; translate: 0 -20px; }
.fe-collage .b { grid-column: 9 / span 4; grid-row: 4 / span 3; z-index: 3; border: 6px solid #fff; rotate: -3deg; }
.fe-collage.in .a { translate: 0 -20px; }
/* strip */
.fe-reel { list-style: none; margin: 0; padding: 30px 24px 40px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--c1) transparent; }
.fe-reel li { flex: none; width: clamp(240px, 28vw, 400px); scroll-snap-align: center; rotate: var(--r); transition: rotate 0.5s var(--ease-spring), transform 0.5s var(--ease-spring); }
.fe-reel li:hover { rotate: 0deg; transform: translateY(-8px); }
.fe-reel .fe-ph { width: 100%; aspect-ratio: 4 / 3; border: 7px solid #fff; border-bottom-width: 28px; }
/* video */
.fe-loops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fe-loops figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 0 0 3px var(--c1), 0 30px 50px -30px #000; rotate: calc((var(--i) - 3.5) * 0.5deg); }
/* 8 clips fill a 4 x 3 board exactly: one large, one wide, six small. No holes. */
.fe-loops { grid-auto-flow: dense; }
.fe-loops figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.fe-loops figure:nth-child(8) { grid-column: span 2; }
.fe-loops figure:nth-child(1) video, .fe-loops figure:nth-child(8) video { aspect-ratio: auto; position: absolute; inset: 0; }
.fe-loops figure:nth-child(1), .fe-loops figure:nth-child(8) { min-height: 100%; }
.fe-loops video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.fe-loops figcaption { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 2px 12px; font-weight: 800; color: var(--ink); background: var(--c1); rotate: -2deg; }
.fe-videos { display: grid; gap: 16px; }
.fe-videos figure { margin: 0; }
.fe-videos .main .video { border-radius: 8px; box-shadow: 0 0 0 8px #fff, 0 0 0 12px var(--c2), 0 40px 70px -34px #000; }
.fe-videos .main { max-width: 980px; width: 100%; margin: 12px auto 18px; rotate: -0.6deg; }
.fe-vrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fe-vrow .video { border-radius: 6px; box-shadow: 0 0 0 4px #fff, 0 20px 30px -20px #000; }
.fe-era .masonry { --row: clamp(170px, 20vw, 280px); gap: 12px; }
.fe-era .masonry .g-item { border-radius: 4px; box-shadow: 0 0 0 5px #fff, 0 26px 40px -26px #000; }
/* the three years */
.e2019 { --c1: #ffe14d; --c2: #e0322f; --bg: #2a0c0c; }
.e2019 .fe-collage .big, .e2019 .fe-collage .a, .e2019 .fe-collage .b, .e2019 .fe-reel .fe-ph { border-color: #fff6e0; }
.e2022 { --c1: #ffb347; --c2: #8a3ffc; --bg: #1a0e2e; }
.e2022 .fe-ph, .e2022 .masonry .g-item { border-radius: 22px !important; border-color: rgba(255, 179, 71, 0.9) !important; box-shadow: 0 0 0 0 transparent, 0 0 50px -10px rgba(255, 179, 71, 0.6), 0 34px 60px -30px #000 !important; }
.e2022 .fe-reel .fe-ph { border-width: 3px; }
.e2022 .fe-collage .big, .e2022 .fe-collage .a, .e2022 .fe-collage .b { border-width: 3px; }
.e2023 { --c1: #4fa8ff; --c2: #7c4dff; --bg: #0b1440; }
.e2023 .fe-collage .big, .e2023 .fe-collage .a, .e2023 .fe-collage .b, .e2023 .fe-reel .fe-ph { border-color: #eaf4ff; }
body.fest .mm-end::before { background: linear-gradient(180deg, transparent, rgba(11, 16, 36, 0.75) 30%, rgba(8, 12, 28, 0.95)); }
body.fest .mm-end h2 { text-shadow: 3px 3px 0 #ff4d8d, 0 8px 24px #000; }
@media (max-width: 900px) {
  .fe-collage { grid-auto-rows: 15vw; } .fe-collage .big { grid-column: 1 / -1; grid-row: 1 / span 4; border-width: 5px; } .fe-collage .a { grid-column: 1 / span 6; grid-row: 5 / span 3; translate: 0 -16px !important; border-width: 4px; } .fe-collage .b { grid-column: 7 / span 6; grid-row: 5 / span 3; border-width: 4px; }
  .fe-loops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fe-loops figure:nth-child(1) { grid-row: span 1; } .fe-loops figure:nth-child(1) video, .fe-loops figure:nth-child(8) video { position: static; aspect-ratio: 16 / 9; }
  .fe-vrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fe-vrow figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fe-year { -webkit-text-stroke-width: 2px; } .fe-head { text-align: center; justify-items: center; } .fe-text p { margin-inline: auto; } .fe-nav a { min-width: 0; flex: 1 1 100px; padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .fe-bunting { animation: none; } .fe-collage .fe-ph { opacity: 1; translate: 0 0; transition: none; } .fe-year { translate: 0 0; transition: none; } }

/* a board of 15 clips: two big, three wide, 24 cells on 4 columns, no holes */
.fe-loops[data-n="15"] figure:nth-child(9) { grid-column: span 2; grid-row: span 2; min-height: 100%; }
.fe-loops[data-n="15"] figure:nth-child(12), .fe-loops[data-n="15"] figure:nth-child(15) { grid-column: span 2; min-height: 100%; }
.fe-loops[data-n="15"] figure:nth-child(9) video, .fe-loops[data-n="15"] figure:nth-child(12) video, .fe-loops[data-n="15"] figure:nth-child(15) video { aspect-ratio: auto; position: absolute; inset: 0; }
@media (max-width: 900px) { .fe-loops[data-n="15"] figure:nth-child(9) { grid-row: span 1; } .fe-loops[data-n="15"] figure:nth-child(9) video, .fe-loops[data-n="15"] figure:nth-child(12) video, .fe-loops[data-n="15"] figure:nth-child(15) video { position: static; aspect-ratio: 16 / 9; } }
@media (min-width: 901px) { .fe-loops[data-n="15"] { grid-auto-rows: 1fr; } }

/* 18 clips: two more wide ones close the last row (4 + 2 + 2 + 2 + 14 = 24 cells, a 4 x 6 board) */
.fe-loops figure:nth-child(15):nth-last-child(4), .fe-loops figure:nth-child(18):nth-last-child(1) { grid-column: span 2; }
.fe-loops figure:nth-child(15):nth-last-child(4) video, .fe-loops figure:nth-child(18):nth-last-child(1) video { aspect-ratio: auto; position: absolute; inset: 0; }
.fe-loops figure:nth-child(15):nth-last-child(4), .fe-loops figure:nth-child(18):nth-last-child(1) { min-height: 100%; }
.e2026 { --c1: #ff4d8d; --c2: #ffd23f; --bg: #2a0a24; }
.e2026 .fe-collage .big, .e2026 .fe-collage .a, .e2026 .fe-collage .b, .e2026 .fe-reel .fe-ph { border-color: #fff0f6; }
/* standing phone clips: one even row, captions under them; a swipe row on phones */
.fe-vtall { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); max-width: 980px; }
.fe-vtall figure { margin: 0; }
.fe-vtall .video { aspect-ratio: 9 / 16; width: 100%; border-radius: 22px; border: 4px solid #fff0f6; box-shadow: 0 30px 50px -30px #000; background-size: cover; background-position: center; }
.fe-vtall figcaption { margin-top: 8px; text-align: center; font-weight: 700; font-size: .95rem; }
@media (max-width: 700px) {
  .fe-vtall { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .fe-vtall::-webkit-scrollbar { display: none; }
  .fe-vtall figure { flex: 0 0 62vw; scroll-snap-align: center; }
}