/* Pagine d'archivio: le cinque Flames Cup, Festival 2025 a Formigine, Ale Della Giusta (generate da tools/archivio.py) */

.sez { position: relative; padding: 16svh var(--gut) 0; }
.sez .big { margin-bottom: 7svh; }
.sez-k { margin: 28px 0 0; max-width: 62ch; color: var(--cenere); font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; }

/* ── la finale: tabellone da stadio ── */
.fin { position: relative; height: 240svh; margin-top: 12svh; }
.fin-st { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 4svh; padding: 0 var(--gut); text-align: center; }
.fin-st::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 55%, rgb(176 38 30 / calc(var(--k, 0) * .55)), transparent 70%); pointer-events: none; }
.fin-k { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cenere); }
.fin-board { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 56px); width: min(1500px, 100%); }
.fin-sq { margin: 0; font-weight: 900; font-size: clamp(22px, 3.6vw, 64px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; transition: color .6s, opacity .6s; }
.fin-a { text-align: right; translate: calc((1 - var(--k1, 0)) * -40px) 0; opacity: calc(.25 + var(--k1, 0) * .75); }
.fin-b { text-align: left; translate: calc((1 - var(--k1, 0)) * 40px) 0; opacity: calc(.25 + var(--k1, 0) * .75); }
.fin.done .fin-a { color: var(--fuoco-vivo); }
.fin.done .fin-b { opacity: .38; }
.fin-sc { margin: 0; display: flex; align-items: center; gap: .12em; font-weight: 900; font-size: clamp(110px, 22vw, 380px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.fin-sc i { font-style: normal; color: var(--fuoco); font-weight: 400; }
.roll { display: inline-block; height: .8em; overflow: hidden; }
.roll > span { display: block; transition: translate .12s linear; }
.roll > span > b { display: block; height: .8em; line-height: .8; }
.fin-pen { margin: 0; font-weight: 700; font-size: clamp(16px, 1.4vw, 22px); color: var(--carta); opacity: var(--k2, 0); }
.fin-cam { margin: 0; display: grid; gap: 8px; opacity: var(--k2, 0); translate: 0 calc((1 - var(--k2, 0)) * 20px); }
.fin-cam span { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fuoco-vivo); }
.fin-cam b { font-weight: 900; font-size: clamp(30px, 4.4vw, 76px); letter-spacing: -.03em; text-transform: uppercase; line-height: .95; }

/* ── tabellone a eliminazione ── */
.ko { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 22px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--fuoco) transparent; }
.ko-col { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.ko-col h3 { margin: 0 0 6px; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cenere); }
.match { margin: 0; padding: 0; list-style: none; border: 1px solid rgb(239 232 226 / .18); background: rgb(239 232 226 / .025); }
.match li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-weight: 500; font-size: 14px; color: rgb(239 232 226 / .55); }
.match li + li { border-top: 1px solid rgb(239 232 226 / .1); }
.match li.w { color: var(--carta); font-weight: 700; }
.match b { font-weight: 900; font-variant-numeric: tabular-nums; }
.match small { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--cenere); }
.match.cam { border-color: var(--fuoco); box-shadow: inset 3px 0 0 var(--fuoco-vivo); }
.ko-col:last-child .match.cam { background: rgb(176 38 30 / .22); }
.ko-fin { justify-content: center; gap: 44px; }
.ko-g { display: flex; flex-direction: column; gap: 14px; }
.ko-fin .ko-g:first-child .match { font-size: 1.1em; }
.ko-nota { margin: 0; font-size: 14px; color: var(--cenere); max-width: 30ch; }
.ko-leg { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 14px; color: var(--cenere); }
.ko-leg i { width: 18px; height: 12px; border: 1px solid var(--fuoco); box-shadow: inset 3px 0 0 var(--fuoco-vivo); }
.ko .match { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--c, 0) * 90ms + var(--r, 0) * 30ms); }
.ko.vis .match { opacity: 1; translate: 0 0; }

/* ── gironi ── */
.gir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px 28px; }
.gir-b summary { list-style: none; cursor: pointer; padding: 0 0 12px; border-bottom: 2px solid var(--fuoco); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: -.02em; }
.gir-b summary::-webkit-details-marker { display: none; }
.gir-b table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gir-b th, .gir-b td { padding: 10px 0; text-align: right; font-size: 15px; border-bottom: 1px solid rgb(239 232 226 / .12); }
.gir-b th[scope="row"], .gir-b thead th:first-child { text-align: left; font-weight: 600; }
.gir-b thead th { font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cenere); }
.gir-b td { width: 3.6em; font-weight: 700; }
.gir-b tbody tr:nth-child(-n+2) th { color: var(--carta); }
.gir-b tbody tr:nth-child(n+3) { color: rgb(239 232 226 / .6); }
.gir-p { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--cenere); }
.gir-p b { color: var(--carta); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── marcatori ── */
.cap { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(18px, 3vw, 48px); margin-bottom: 9svh; }
.cap-n { font-weight: 900; font-size: clamp(160px, 26vw, 420px); line-height: .76; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px var(--fuoco-vivo); font-variant-numeric: tabular-nums; }
.cap p { margin: 0; display: grid; gap: 8px; padding-bottom: 1.2vw; }
.cap span { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fuoco-vivo); }
.cap strong { font-weight: 900; font-size: clamp(34px, 5vw, 88px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.cap em { font-style: normal; font-weight: 500; font-size: clamp(16px, 1.3vw, 20px); color: var(--cenere); }
.bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.bars li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgb(239 232 226 / .16); }
.bars li i { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--w) * 100%); background: var(--fuoco-vivo); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) var(--d, 0s); }
.bars.vis li i { transform: scaleX(1); }
.bn { font-weight: 700; font-size: clamp(18px, 1.7vw, 26px); letter-spacing: -.01em; }
.bn em { font-style: normal; margin-left: 12px; font-weight: 500; font-size: .7em; color: var(--cenere); }
.bars b { font-weight: 900; font-size: clamp(24px, 2.4vw, 38px); font-variant-numeric: tabular-nums; }
.tutti { margin-top: 5svh; }
.tutti summary { cursor: pointer; display: inline-flex; gap: 12px; align-items: baseline; padding: 14px 0; font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); border-bottom: 2px solid var(--fuoco-vivo); list-style: none; }
.tutti summary::-webkit-details-marker { display: none; }
.tutti summary span { color: var(--cenere); font-weight: 500; }
.tutti ul { margin: 26px 0 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 40px; }
.tutti li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid rgb(239 232 226 / .08); }
.tutti li em { font-style: normal; color: var(--cenere); }
.tutti li b { font-variant-numeric: tabular-nums; }

/* ── premiati ── */
.pre-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.pre-grid figure { margin: 0; }
.pre-ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--carbone-2); }
.pre-ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .8s var(--ease), scale 1.2s var(--ease); scale: 1.04; }
.pre-grid figure.vis .pre-ph img { filter: none; scale: 1; transition-delay: calc(var(--d, 0s) + .35s); }
.pre-grid figcaption { display: grid; gap: 4px; padding-top: 14px; font-weight: 700; font-size: clamp(17px, 1.4vw, 21px); }
.pre-grid figcaption span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fuoco-vivo); }

/* ── pellicola: le foto scorrono di lato, quella al centro torna a colori ── */
.film { position: relative; height: calc(100svh + var(--n) * 34svh); margin-top: 14svh; }
.film-st { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--head) + 2svh) 0 5svh; }
.film-t { margin: 0; padding: 0 var(--gut); font-weight: 900; font-size: clamp(34px, 5vw, 86px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.film-track { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); padding-left: 50vw; will-change: transform; perspective: 1400px; }
.film-track figure { flex: 0 0 auto; margin: 0; width: clamp(220px, 27vw, 460px); position: relative; transform-style: preserve-3d; }
.film--cap .film-track figure { width: clamp(180px, 19vw, 320px); }
.film-track img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--carbone-2); filter: grayscale(calc(1 - var(--c, 0))) brightness(calc(.55 + var(--c, 0) * .45)); }
.film-track figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-weight: 900; font-size: clamp(16px, 1.5vw, 24px); text-transform: uppercase; letter-spacing: -.01em; background: linear-gradient(0deg, rgb(14 11 10 / .85), transparent); opacity: calc(.2 + var(--c, 0) * .8); }
.film-c { margin: 0; padding: 0 var(--gut); font-weight: 700; font-size: 14px; color: var(--cenere); font-variant-numeric: tabular-nums; }
.film-c b { color: var(--carta); }

/* ── archivio: righe grandi con la foto che segue il mouse ── */
.arc { padding-bottom: 12svh; }
.arc-list { margin: 0; padding: 0; list-style: none; }
.arc-list a { position: relative; display: grid; grid-template-columns: 5.5em 1fr auto auto; align-items: baseline; gap: 22px; padding: 22px 0; border-top: 1px solid rgb(239 232 226 / .2); color: inherit; text-decoration: none; }
.arc-list li:last-child a { border-bottom: 1px solid rgb(239 232 226 / .2); }
.arc-list a::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--fuoco-vivo); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.arc-list a:hover::after, .arc-list a:focus-visible::after { transform: scaleX(1); }
.arc-list a:focus-visible { outline: none; }
.arc-y { font-weight: 700; font-size: 15px; color: var(--cenere); font-variant-numeric: tabular-nums; }
.arc-t { font-weight: 900; font-size: clamp(26px, 3.6vw, 60px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; transition: translate .4s var(--ease), color .3s; }
.arc-list a:hover .arc-t { translate: 10px 0; color: var(--fuoco-vivo); }
.arc-s { font-weight: 500; font-size: 15px; color: var(--cenere); text-align: right; }
.arc-list .arr { width: 18px; height: 18px; }
.arc-win { position: fixed; left: 0; top: 0; z-index: 4; width: 260px; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; scale: .85; transition: opacity .3s, scale .4s var(--ease); }
.arc-win.on { opacity: 1; scale: 1; }
.arc-win img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.05); }

/* ── Festival 2025 ── */
.sere-list { margin: 0; padding: 0; list-style: none; }
.sere-list li { position: relative; display: grid; grid-template-columns: 11em 1fr 15vw; gap: 28px; align-items: center; padding: 28px 0; border-top: 1px solid rgb(239 232 226 / .2); }
.sere-list li:last-child { border-bottom: 1px solid rgb(239 232 226 / .2); }
.sr-g { display: grid; font-weight: 500; font-size: 15px; color: var(--cenere); }
.sr-g b { font-weight: 900; font-size: clamp(20px, 1.8vw, 28px); color: var(--carta); text-transform: uppercase; letter-spacing: -.02em; }
.sr-x h3 { margin: 0 0 10px; font-weight: 900; font-size: clamp(30px, 4.6vw, 80px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; transition: color .3s; }
.sr-x p { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: rgb(239 232 226 / .78); }
.sere-list figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--carbone-2); }
.sere-list img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .7s var(--ease), scale 1s var(--ease); scale: 1.06; }
.sere-list li:hover img { filter: none; scale: 1; }
.sere-list li:hover h3 { color: var(--fuoco-vivo); }
.nsc-l { margin-top: -3svh; }
.film--nsc .film-track img { aspect-ratio: 3 / 4; }
.cupf-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 60px; align-items: end; }
.cupf-in .acts { grid-column: 1 / -1; }
.cupf-r { margin: 0; display: grid; gap: 6px; }
.cupf-r span { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fuoco-vivo); }
.cupf-r b { font-weight: 900; font-size: clamp(24px, 2.6vw, 42px); line-height: 1; text-transform: uppercase; letter-spacing: -.03em; }
.food .pg-lede { margin-bottom: 7svh; }
.food-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 24px; }
.food-list figure { margin: 0 0 16px; aspect-ratio: 1; overflow: hidden; background: var(--carbone-2); }
.food-list img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1s var(--ease); }
.food-list li:hover img { scale: 1.05; }
.food-list h3 { margin: 0 0 8px; font-weight: 900; font-size: clamp(22px, 2vw, 32px); text-transform: uppercase; letter-spacing: -.03em; }
.food-list p { margin: 0; font-size: 15px; line-height: 1.45; color: rgb(239 232 226 / .75); }

/* ── Ale Della Giusta ── */
.sold { position: relative; height: 230svh; }
.sold-st { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-content: center; padding: 0 var(--gut); }
.sold-w, .sold-f { grid-area: 1 / 1; margin: 0; display: grid; font-weight: 900; font-size: clamp(64px, 15vw, 290px); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
.sold-w { color: transparent; -webkit-text-stroke: 1.5px rgb(239 232 226 / .4); }
.sold-f { color: var(--fuoco-vivo); clip-path: inset(calc((1 - var(--k, 0)) * 100%) 0 0 0); }
.sold-w span:last-child, .sold-f span:last-child { padding-left: .5em; }
.sold-p { grid-area: 2 / 1; margin: 6svh 0 0; max-width: 34ch; font-weight: 700; font-size: clamp(18px, 1.6vw, 26px); line-height: 1.3; opacity: var(--k2, 0); translate: 0 calc((1 - var(--k2, 0)) * 16px); }
.ale-2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 40px 6vw; align-items: center; }
.ale-poster { margin: 0; overflow: hidden; }
.ale-poster img { display: block; width: 100%; height: auto; }
.ale-t { display: grid; gap: 22px; }
.ale-t p:not(.pg-lede) { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: rgb(239 232 226 / .82); }
.cap-s { display: grid; gap: 12svh; }
.capi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px 5vw; align-items: center; }
.capi:nth-child(even) figure { order: 2; }
.capi figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--carbone-2); }
.capi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capi h3 { margin: 0 0 16px; font-weight: 900; font-size: clamp(30px, 4vw, 70px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.capi p { margin: 0; max-width: 50ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: rgb(239 232 226 / .82); }
.capi--t { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.serie { margin: 22px 0 0; padding: 0; list-style: none; display: grid; }
.serie li { padding: 10px 0; border-top: 1px solid rgb(239 232 226 / .18); font-weight: 900; font-size: clamp(20px, 2vw, 30px); text-transform: uppercase; letter-spacing: -.02em; }
.grazie { padding-bottom: 4svh; }

@media (max-width: 760px) {
  .sez { padding-top: 12svh; }
  .fin { height: 200svh; }
  .fin-board { grid-template-columns: 1fr; gap: 10px; }
  .fin-a, .fin-b { text-align: center; translate: 0 0; }
  .fin-sc { justify-content: center; font-size: 34vw; }
  .ko { grid-auto-columns: 78vw; scroll-snap-type: x mandatory; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
  .ko-col { scroll-snap-align: start; justify-content: flex-start; }
  .gir-grid { grid-template-columns: 1fr; }
  .gir-b:not([open]) summary::after { content: " +"; color: var(--fuoco-vivo); }
  .cap { grid-template-columns: 1fr; gap: 6px; }
  .cap-n { font-size: 46vw; }
  .bn em { display: block; margin: 4px 0 0; }
  .pre-grid { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .pre-grid figcaption { font-size: 15px; }
  .film { height: calc(100svh + var(--n) * 26svh); }
  .film-track figure { width: 64vw; }
  .film--cap .film-track figure { width: 48vw; }
  .arc-list a { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 0; }
  .arc-y { grid-column: 1; grid-row: 1; }
  .arc-t { grid-column: 1; grid-row: 2; font-size: 30px; }
  .arc-s { grid-column: 1; grid-row: 3; text-align: left; font-size: 14px; }
  .arc-list .arr { grid-column: 2; grid-row: 2; }
  .arc-win { display: none; }
  .sere-list li { grid-template-columns: 1fr 28vw; gap: 10px 16px; align-items: start; }
  .sr-g { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 10px; align-items: baseline; }
  .sere-list figure { grid-column: 2; grid-row: 2; }
  .sere-list img { filter: none; scale: 1; }
  .cupf-in { grid-template-columns: 1fr; }
  .food-list { grid-template-columns: 1fr 1fr; gap: 30px 14px; }
  .food-list p { font-size: 14px; }
  .sold { height: 190svh; }
  .sold-w, .sold-f { font-size: 19vw; }
  .ale-2, .capi { grid-template-columns: 1fr; }
  .capi:nth-child(even) figure { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ko .match { opacity: 1; translate: none; }
  .bars li i { transform: none; }
}