/* Francobolli delle specie: carta avorio, dentellatura, vignetta fotografica, annullo postale. */
.fif{--carta:#F4ECD8;--carta-2:#EADFC4;--inchiostro:#2A2622;--seppia:#6B5A45;--fondo:#E4E9E7;
	font-family:Georgia,"Times New Roman",serif;color:var(--inchiostro);background:var(--fondo);
	background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:6px 6px;
	border-radius:6px;padding:28px 0 18px;margin:0 0 32px;position:relative;box-sizing:border-box;max-width:100%}
.fif *,.fif *::before,.fif *::after{box-sizing:border-box}
.fif [hidden]{display:none!important}
.fif-testa{padding:0 24px 6px}
.fif-testa h2{margin:0 0 4px;font-weight:400;font-size:clamp(26px,4vw,38px);letter-spacing:.01em;line-height:1.1}
.fif-testa p{margin:0;color:var(--seppia);font-style:italic}
.fif-filtri{display:flex;gap:6px;overflow-x:auto;padding:12px 24px 4px;scrollbar-width:none}
.fif-filtri button{flex:none;font:inherit;font-size:14px;padding:6px 14px;border-radius:999px;border:1px solid #BFB59E;background:var(--carta);color:var(--inchiostro);cursor:pointer}
.fif-filtri button[aria-pressed="true"]{background:var(--c,#2A2622);border-color:var(--c,#2A2622);color:#fff}

.fif-palco{position:relative}
.fif-nastro{list-style:none;margin:0;padding:22px 56px 30px;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 56px;scrollbar-width:thin;scrollbar-color:#BFB59E transparent}
.fif-nastro:focus-visible{outline:3px solid #C9A227;outline-offset:-3px}
.fif-f{flex:none;scroll-snap-align:start}
.fif-f[hidden]{display:none}

/* Il francobollo: la dentellatura è un motivo di fori trasparenti attorno alla carta. */
.fif-carta{display:block;width:250px;padding:13px;border:0;cursor:pointer;color:inherit;font:inherit;text-align:center;
	background:radial-gradient(circle at center,transparent 5.2px,var(--carta) 5.6px) -9px -9px/18px 18px;
	filter:drop-shadow(0 2px 2px rgba(60,45,25,.18)) drop-shadow(0 10px 14px rgba(60,45,25,.14));
	transform:rotate(var(--r,0deg));transition:transform .25s ease}
.fif-carta:hover{transform:rotate(0) translateY(-6px) scale(1.03)}
.fif-carta:focus-visible{outline:3px solid #C9A227;outline-offset:6px}
.fif-cornice{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 10px 9px;background:var(--carta);
	background-image:linear-gradient(transparent,rgba(120,95,55,.06)),repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px);
	border:1px solid rgba(70,55,35,.25);box-shadow:inset 0 0 0 4px var(--carta),inset 0 0 0 5px var(--c)}
.fif-alto{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px 0}
.fif-alto span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--seppia)}
.fif-alto b{font-size:22px;font-weight:700;color:var(--c);line-height:1;font-variant-numeric:oldstyle-nums}
.fif-vignetta{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#d9d2c0;border:1px solid rgba(40,30,20,.35)}
.fif-vignetta img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.28) saturate(.86) contrast(1.06) brightness(1.02)}
.fif-vignetta::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px rgba(70,45,15,.35);
	background:radial-gradient(ellipse at center,transparent 55%,rgba(90,60,25,.18))}
.fif-ill{display:grid;place-items:center;width:100%;height:100%;font-size:72px;color:rgba(255,255,255,.85);background:linear-gradient(160deg,var(--c1),var(--c2));font-style:italic}
.fif-nome{display:block;font-size:19px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.fif-sci{display:block;font-style:italic;font-size:13.5px;color:var(--seppia);line-height:1.2;min-height:1.2em}
.fif-basso{display:flex;justify-content:space-between;gap:6px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--seppia);border-top:1px solid rgba(70,55,35,.2);padding-top:5px}

/* Annullo postale su un francobollo ogni tre. */
.fif-f:nth-child(3n+2) .fif-cornice::after{content:"CHIOGGIA";position:absolute;right:-18px;top:26px;width:92px;height:92px;border-radius:50%;
	border:2px solid rgba(40,40,60,.38);display:grid;place-items:center;font:700 10px/1 Georgia,serif;letter-spacing:.2em;color:rgba(40,40,60,.42);
	transform:rotate(-18deg);pointer-events:none;
	background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(40,40,60,.0) 9px 10px)}

.fif-freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid #BFB59E;background:var(--carta);color:var(--inchiostro);font:400 28px/1 Georgia,serif;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.fif-freccia:hover{background:#fff}
.fif-freccia:focus-visible{outline:3px solid #C9A227;outline-offset:2px}
.fif-prec{left:8px}
.fif-succ{right:8px}
.fif-nota{margin:0;padding:0 24px;font-size:12.5px;color:var(--seppia);font-style:italic}

/* Lente: il francobollo in grande. */
.fif-lente{position:fixed;inset:0;z-index:99999;background:rgba(22,18,14,.82);display:grid;place-items:center;padding:16px}
.fif-lente-in{position:relative;width:min(1080px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--carta);border-radius:4px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fif-lente figure{margin:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.fif-l-img{background:#d9d2c0;border:1px solid rgba(40,30,20,.35);aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center}
.fif-l-img img{width:100%;height:100%;object-fit:contain;background:#1d1a16}
.fif-lente h3{margin:6px 0 2px;font-weight:400;font-size:32px;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.fif-l-sci{margin:0 0 12px;font-style:italic;color:var(--seppia);font-size:18px}
.fif-l-desc{margin:0 0 12px;font-size:16px;line-height:1.55}
.fif-l-cred{margin:0 0 8px;font-size:13px;color:var(--seppia)}
.fif-l-cred a,.fif-l-link a{color:#7A4E12}
.fif-chiudi{position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #BFB59E;background:#fff;font-size:24px;cursor:pointer}
.fif-l-prec{left:-6px}
.fif-l-succ{right:-6px}
.fif-lente .fif-freccia{position:absolute;top:calc(18px + 30%)}

@media (max-width:760px){
	.fif-nastro{padding:18px 20px 26px;scroll-padding:0 20px;gap:18px}
	.fif-carta{width:min(72vw,250px)}
	.fif-freccia.fif-prec,.fif-freccia.fif-succ{display:none}
	.fif-lente figure{grid-template-columns:minmax(0,1fr)}
	.fif-lente .fif-freccia{top:auto;bottom:12px}
	.fif-l-prec{left:12px}.fif-l-succ{right:12px}
	.fif-lente-in{padding:12px 12px 64px}
}
@media (prefers-reduced-motion:reduce){.fif-carta{transition:none}.fif-carta:hover{transform:none}}
.fif-l-img>.fif-vignetta{width:100%;height:100%;aspect-ratio:auto;border:0}
.fif-l-img>.fif-vignetta .fif-ill{font-size:160px}
.fif-rotta img{display:none}
.fif-rotta{background:linear-gradient(160deg,#9aa7ae,#eef1f2)}
.fif-rotta::before{content:"\1F41F";position:absolute;inset:0;display:grid;place-items:center;font-size:56px;opacity:.5}
