/* 06 · A edição de 2025 — o varal de luzinhas.
   Palco fixado: cabeçalho no alto à esquerda; embaixo dele, um trilho (.mm-track) mais largo que a tela que o JS anda
   de lado (transform). No trilho: o fio de luzinhas em festões (um NL.garland por festão, .mm-seg), os laços dourados nos
   pontos de amarração e as polaroides presas por pregadorzinhos. Tamanho da foto: --mm-ph (altura da foto, medida no
   JS pelo espaço sob o fio). Tudo sob #memorias. */
#memorias .mm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#memorias .mm-stage { isolation: isolate; --mm-ph: 280px; }
/* poça de luz quente das lâmpadas sobre o veludo, na altura do varal */
#memorias .mm-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 34% at 50% var(--mm-glow-y, 42%), rgba(247, 201, 120, .1), rgba(247, 201, 120, 0) 72%),
    linear-gradient(0deg, rgba(3, 12, 6, .42), rgba(3, 12, 6, 0) 34%); }

/* ---- cabeçalho ---- */
#memorias .mm-head { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--top-safe) + clamp(8px, 2vh, 28px)); height: auto; pointer-events: none; container-type: inline-size; }
#memorias .mm-k { margin-bottom: clamp(8px, 1.5vh, 18px); }
#memorias .mm-title-wrap { position: relative; width: fit-content; max-width: 100%; }
/* título pelo token do núcleo (.ch-title: --title-fs com teto pela coluna da .mm-head). A 1ª linha ("A NOITE EM QUE
   FLORIANÓPOLIS", 18 em) fica inteira onde couber; senão quebra em duas, equilibradas (3 linhas no total).
   --title-em = "FLORIANÓPOLIS" (8,64 em), a palavra que não pode quebrar. */
#memorias .mm-title { --title-em: 8.8; max-width: none; }
/* deitado: a 1ª linha inteira (18 em) é a medida — no 2560 o token cresce mais que a coluna e a linha quebrava em
   duas (3 linhas no total, a composição do 1920 perdida); em pé ela quebra normalmente */
@media (orientation: landscape) { #memorias .mm-title { --title-em: 18.4; } }
#memorias .mm-t1, #memorias .mm-t2 { display: block; width: fit-content; }
#memorias .mm-title .fr { font-size: 1.14em; }
/* faísca: o piscar vai no <i> (HTML: opacidade/escala compostas), a faísca SVG dentro fica parada */
#memorias .mm-spark { position: absolute; display: block; width: var(--size); height: var(--size); pointer-events: none; animation: twinkle 3.6s ease-in-out infinite; }
#memorias .mm-spark > .sparkle { display: block; width: 100%; height: 100%; }
#memorias .mm-spark--1 { --size: calc(clamp(15px, 1.3vw, 26px) * var(--ts-screen, 1)); left: calc(var(--mm-tr, 100%) + .3em); top: 8%; }
#memorias .mm-spark--2 { --size: calc(clamp(10px, .8vw, 16px) * var(--ts-screen, 1)); left: calc(var(--mm-tr, 100%) + 1.1em); top: 58%; animation-delay: -1.6s; }
.reduced #memorias .mm-spark { animation: none; }
/* o crédito das fotos reais é a tarja "Fotos da edição 2025" (a plaqueta repetida no canto saiu) */

/* estrela do deck: a do núcleo (.star8--corner .star8--tr, topo no --top-safe), atrás do varal */
#memorias .mm-star { z-index: 1; opacity: .9; }
#memorias .mm-star__svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }

/* ---- o varal ---- */
#memorias .mm-track { position: absolute; z-index: 2; left: 0; top: 0; height: 100%; width: 100%; }
#memorias .mm-wire { position: absolute; inset: 0; z-index: 1; }
/* laços acima do fio e abaixo das polaroides (mesmo z do .mm-list, que vem depois no DOM): na grade final as fotos
   cobrem os laços que ficam atrás delas */
#memorias .mm-bows { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* laço de cetim onde o fio é amarrado (o nó do #bow fica em 50% · 37,6%) */
#memorias .mm-bow { position: absolute; left: 0; top: 0; width: calc(var(--mm-ph) * .2); height: calc(var(--mm-ph) * .1417); margin: calc(var(--mm-ph) * -.0533) 0 0 calc(var(--mm-ph) * -.1); color: var(--gold); max-width: none; overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
#memorias .mm-list { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
#memorias .mm-item { position: absolute; left: 0; top: 0; width: calc(var(--mm-ph) * (var(--arn) + .12)); }
/* pivô do balanço: o ponto do fio (2 px acima da borda da polaroide) */
#memorias .mm-sw { position: relative; transform-origin: 50% -2px; }
#memorias .mm-pol { width: 100%; padding: calc(var(--mm-ph) * .06) calc(var(--mm-ph) * .06) 0; transform-origin: 50% 0; }
#memorias .mm-shot { position: relative; height: var(--mm-ph); overflow: hidden; border-radius: 1px; background: #e7e4dc; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
#memorias .mm-shot img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }
#memorias .mm-shot.has-missing { background: linear-gradient(160deg, #e9e6de, #cfd3cc); }
/* a emulsão que ainda não revelou: branco leitoso, um pouco frio */
#memorias .mm-dev { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 42% 34%, #f6f3ec, #e6e5dd 58%, #d3d7d0); }
/* legenda "escrita à mão": Fraunces itálico, na faixa branca de baixo */
#memorias .mm-pol > figcaption { font-family: var(--f-accent); font-style: italic; font-weight: 420; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
  font-size: calc(var(--mm-ph) * .1 * var(--ts-page, 1.1)); line-height: 1.1; /* --mm-ph já cresce com a tela: só a escala do cliente (?ts=) */ letter-spacing: 0; padding: .42em .3em .54em; color: var(--ink); text-align: center; text-wrap: balance; }
/* pregador de madeira: o fio passa a 56% da altura dele; o dente morde a borda de cima da foto */
#memorias .mm-pin { position: absolute; z-index: 3; left: 50%; top: calc(var(--mm-ph) * -.135); width: calc(var(--mm-ph) * .075); height: calc(var(--mm-ph) * .24); margin-left: calc(var(--mm-ph) * -.0375);
  max-width: none; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .42)); rotate: var(--pin-r, 0deg); transform-origin: 50% 56%; }

/* um fio por festão (o JS põe left/width; a altura é a do palco) */
#memorias .mm-seg { position: absolute; top: 0; bottom: 0; }