/* Gallerie del portfolio: filtri discreti e immagini protagoniste. */
.portfolio-section{background:var(--cream);color:var(--ink);padding:clamp(75px,9vw,140px) 6%}
.portfolio-intro{max-width:850px;margin-bottom:clamp(45px,7vw,90px)}
.portfolio-intro h2{font:500 clamp(42px,5vw,75px)/1.05 'Playfair Display',serif;letter-spacing:-.04em;margin:26px 0 18px}
.portfolio-intro p{color:var(--muted);line-height:1.7;margin:0;max-width:510px}
.portfolio-layout{display:grid;grid-template-columns:minmax(170px,20%) minmax(0,1fr);gap:4%}
.portfolio-filters{align-self:start;position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-left:1px solid var(--muted);padding-left:23px}
.portfolio-filters>span{font-size:12px;text-decoration:underline;margin-bottom:12px;color:var(--muted)}
.portfolio-filters button{border:0;background:none;color:var(--muted);font:400 14px/1.35 'DM Sans',sans-serif;padding:2px 0;text-align:left;cursor:pointer;transition:color .3s ease}
.portfolio-filters button:hover,.portfolio-filters button[aria-pressed=true]{color:var(--ink)}
.portfolio-filters button[aria-pressed=true]{font-weight:700}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}
.portfolio-card{display:block;position:relative;aspect-ratio:1.35;border:0;padding:0;overflow:hidden;background:#bfc5bd;cursor:pointer;color:white;animation:portfolio-appear .7s both;animation-delay:var(--card-delay)}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.22,1,.36,1),filter .65s ease}
.portfolio-card-caption{position:absolute;inset:0;padding:24px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;opacity:0;background:rgba(13,20,16,.56);transition:opacity .55s ease}
.portfolio-card-caption small{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.portfolio-card-caption strong{font:500 clamp(18px,1.8vw,27px)/1.2 'Playfair Display',serif}
.portfolio-card:hover img,.portfolio-card:focus-visible img{transform:scale(1.045)}
.portfolio-card:hover .portfolio-card-caption,.portfolio-card:focus-visible .portfolio-card-caption{opacity:1}
@keyframes portfolio-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.portfolio-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;border:0;margin:0;padding:0;background:var(--cream);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.portfolio-dialog::backdrop{background:rgba(0,0,0,.65)}
.portfolio-dialog[open] .portfolio-dialog-inner{animation:portfolio-detail-enter .65s cubic-bezier(.22,1,.36,1) both}
@keyframes portfolio-detail-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.portfolio-dialog-inner{min-height:100%;padding:35px 6% 60px}
.portfolio-close{display:block;margin-left:auto;border:0;background:none;color:var(--ink);font:600 11px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:12px}
.portfolio-close span{font-size:25px;vertical-align:middle;margin-left:8px}
.portfolio-detail{display:grid;grid-template-columns:minmax(210px,28%) minmax(0,1fr);gap:5%;align-items:center;min-height:calc(100vh - 120px)}
.portfolio-detail-copy{max-width:360px}.portfolio-detail-meta{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.portfolio-detail-title{font:500 clamp(34px,3.4vw,54px)/1.1 'Playfair Display',serif;letter-spacing:-.035em;margin:22px 0}
.portfolio-detail-description{line-height:1.7;color:var(--muted);font-size:14px}
.portfolio-detail-controls{display:flex;align-items:center;gap:20px;margin-top:30px;font-size:12px;color:var(--muted)}
.portfolio-detail-controls button{border:0;background:none;color:var(--ink);font-size:26px;cursor:pointer;padding:4px}.portfolio-detail-controls button:disabled{opacity:.3;cursor:default}
.portfolio-detail-picture{display:flex;align-items:center;justify-content:center;min-height:40vh}.portfolio-detail-picture img{width:100%;height:auto;max-height:78vh;object-fit:contain}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-layout{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:650px){.portfolio-section{padding:75px 6%}.portfolio-layout{display:block}.portfolio-filters{position:static;border-left:0;border-bottom:1px solid var(--muted);padding:0 0 18px;margin-bottom:20px;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 18px}.portfolio-filters>span{width:100%;margin:0 0 4px}.portfolio-filters button{font-size:13px}.portfolio-card{aspect-ratio:1.05}.portfolio-card-caption{opacity:1;justify-content:flex-end;align-items:flex-start;text-align:left;padding:12px;background:linear-gradient(transparent 30%,rgba(0,0,0,.78))}.portfolio-card-caption small{font-size:8px}.portfolio-card-caption strong{font-size:16px}.portfolio-detail{display:flex;flex-direction:column-reverse;justify-content:center;align-items:stretch;min-height:0}.portfolio-detail-picture{min-height:0;margin:20px 0 30px}.portfolio-detail-picture img{max-height:58vh}.portfolio-detail-copy{max-width:none}.portfolio-dialog-inner{padding:20px 6% 50px}}
@media(prefers-reduced-motion:reduce){.portfolio-card,.portfolio-dialog[open] .portfolio-dialog-inner{animation:none}.portfolio-card img,.portfolio-card-caption{transition:none}}

.portfolio-original{display:inline-block;margin-top:12px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:12px;font-weight:600}
/* Ogni progetto ha una pagina da esplorare, con immagini e testo separati. */
a.portfolio-card{color:white}.story-loading{min-height:70vh;padding:150px 6%}.story-hero{height:100svh;min-height:600px;position:relative;color:#fff;background:#232826;overflow:hidden}.story-hero-image,.story-hero-shade{position:absolute;inset:0}.story-hero-image{background-size:cover;background-position:center;animation:story-hero 1.5s ease both}.story-hero-shade{background:linear-gradient(90deg,rgba(8,15,12,.74),rgba(8,15,12,.12) 85%),linear-gradient(0deg,rgba(8,15,12,.72),transparent 70%)}.story-hero-copy{position:absolute;left:7%;right:7%;bottom:11%;max-width:950px;animation:story-enter 1s .12s both}.story-back{display:inline-block;color:white;font-size:12px;border-bottom:1px solid #fff8;padding-bottom:8px;margin-bottom:45px}.story-eyebrow,.story-index,.story-cue{font:600 10px/1.5 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}.story-eyebrow{color:#fff}.story-title{font:500 clamp(48px,7vw,100px)/1.02 'Playfair Display',serif;letter-spacing:-.04em;margin:18px 0 40px;text-wrap:balance}.story-cue{color:#fff}.story-content{background:var(--cream);color:var(--ink);padding:0 7% 110px}.story-lead{display:grid;grid-template-columns:22% 1fr;gap:7%;padding:clamp(85px,12vw,170px) 0;max-width:1250px}.story-index{color:var(--muted)}.story-intro{font:500 clamp(26px,3.1vw,42px)/1.32 'Playfair Display',serif;margin:0;max-width:850px}.story-chapter{display:grid;grid-template-columns:minmax(240px, .8fr) minmax(0,1.5fr);gap:8%;align-items:center;padding:70px 0;border-top:1px solid var(--muted)}.story-chapter:nth-of-type(odd) .story-chapter-copy{order:2}.story-chapter-copy h2,.story-more h2{font:500 clamp(34px,3.2vw,50px)/1.12 'Playfair Display',serif;letter-spacing:-.03em;margin:24px 0}.story-chapter-copy p{color:var(--muted);font-size:15px;line-height:1.85}.story-figure,.story-photo,.story-more figure{margin:0;background:#fff}.story-figure img,.story-photo img,.story-more img{height:auto;width:100%;object-fit:contain}.story-photo{max-width:1150px;margin:0 auto 70px}.story-more{border-top:1px solid var(--muted);padding-top:70px}.story-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.story-more-grid img{height:100%;max-height:620px}.story-end{display:inline-block;margin-top:80px;padding-bottom:8px;border-bottom:1px solid currentColor;font-weight:600;font-size:13px}.story-await{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}.story-await.visible{opacity:1;transform:none}@keyframes story-hero{from{opacity:.4;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes story-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@media(max-width:700px){.story-hero{min-height:520px}.story-hero-copy{left:6%;right:6%;bottom:9%}.story-back{margin-bottom:32px}.story-title{font-size:clamp(42px,10vw,68px);margin-bottom:30px}.story-content{padding:0 6% 75px}.story-lead{display:block;padding:75px 0}.story-intro{font-size:27px;margin-top:24px}.story-chapter{display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:55px 0}.story-chapter:nth-of-type(odd) .story-chapter-copy{order:0}.story-chapter-copy h2{margin-top:18px}.story-more{padding-top:55px}.story-more-grid{grid-template-columns:1fr}.story-end{margin-top:60px}}@media(prefers-reduced-motion:reduce){.story-hero-image,.story-hero-copy{animation:none}.story-await{opacity:1;transform:none;transition:none}}
/* Le immagini si sollevano come stampe, seguendo con leggerezza il puntatore. */
.portfolio-card{overflow:visible;isolation:isolate;transition:box-shadow .55s ease;will-change:translate}.portfolio-card img{transition:filter .55s ease}.portfolio-card:hover,.portfolio-card:focus-visible{z-index:2;box-shadow:0 20px 38px rgba(0,0,0,.23)}.portfolio-card:hover img,.portfolio-card:focus-visible img{transform:none}.portfolio-card-caption{transition:opacity .55s ease}
.story-figure,.story-photo,.story-more figure{background:transparent;cursor:zoom-in;position:relative;transition:box-shadow .6s ease;will-change:translate}.story-figure:hover,.story-photo:hover,.story-more figure:hover,.story-figure:focus-visible,.story-photo:focus-visible,.story-more figure:focus-visible{z-index:2;box-shadow:0 22px 50px rgba(0,0,0,.26)}.story-more-grid img{max-height:none}.story-hero-open{position:absolute;z-index:1;inset:0;background:transparent;border:0;cursor:zoom-in}.story-hero-shade{pointer-events:none}.story-hero-copy{z-index:2;pointer-events:none}.story-hero-copy a{pointer-events:auto}.story-hero-open:focus-visible{outline:3px solid white;outline-offset:-8px}
.image-viewer{position:fixed;inset:0;z-index:1000;width:100%;height:100%;max-width:none;max-height:none;padding:0;margin:0;border:0;color:#f8f8f4;background:rgba(10,14,12,.75)}.image-viewer::backdrop{background:rgba(9,12,10,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.image-viewer-inner{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:65px 5vw 35px;animation:viewer-enter .5s ease both}.image-viewer figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;gap:14px}.image-viewer figure img{display:block;width:auto;height:auto;max-width:90vw;max-height:75svh;object-fit:contain;box-shadow:0 20px 70px #0009}.image-viewer figcaption{font:400 12px/1.5 'DM Sans',sans-serif;text-align:center;color:#e6ebe5;max-width:90vw}.image-viewer-close{position:absolute;right:5vw;top:16px;border:0;background:transparent;color:#fff;cursor:pointer;font:600 10px 'DM Sans',sans-serif;letter-spacing:.12em;padding:12px}.image-viewer-close span{font-size:26px;vertical-align:middle;margin-left:8px}.image-viewer-controls{display:flex;align-items:center;gap:18px;color:#eee;font-size:11px;margin-top:10px}.image-viewer-controls button{background:none;border:0;color:#fff;font-size:24px;cursor:pointer;padding:5px 12px}.image-viewer-controls button[hidden]{display:none}@keyframes viewer-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:700px){.image-viewer-inner{padding:60px 4vw 25px}.image-viewer figure img{max-width:92vw;max-height:70svh}.image-viewer-close{right:3vw;top:10px}}@media(prefers-reduced-motion:reduce){.image-viewer-inner{animation:none}.portfolio-card,.story-figure,.story-photo,.story-more figure{transition:none}}
.image-viewer-stage{max-width:90vw;max-height:75svh;overflow:auto;overscroll-behavior:contain}.image-viewer-stage img{cursor:zoom-in}.image-viewer-stage.zoomed img{max-width:none;max-height:none;cursor:zoom-out}.image-viewer-stage:focus-within{outline-offset:4px}@media(max-width:700px){.image-viewer-stage{max-width:92vw;max-height:70svh}}
/* Zoom a tutta finestra: spostamento con mouse o dito, senza barre. */
.image-viewer.is-zoomed .image-viewer-stage{position:fixed;inset:0;z-index:2;max-width:none;max-height:none;width:100vw;height:100dvh;overflow:hidden;touch-action:none}.image-viewer.is-zoomed .image-viewer-stage img{position:absolute;top:0;left:0;max-width:none;max-height:none;object-fit:fill;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;box-shadow:none;will-change:transform}.image-viewer.is-zoomed .image-viewer-stage img.is-dragging{cursor:grabbing}.image-viewer.is-zoomed .image-viewer-close{position:fixed;z-index:6;background:#18221dcc;padding:9px 12px}.image-viewer.is-zoomed figcaption,.image-viewer.is-zoomed .image-viewer-controls{display:none}
html:has(.image-viewer[open]){overflow:hidden;scrollbar-gutter:auto}html:has(.image-viewer[open]) body{overflow:hidden}.image-viewer[open]{overflow:hidden}

.image-viewer-stage{touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none}.image-viewer-stage img{-webkit-user-drag:none;user-select:none}

.story-figure:focus:not(:focus-visible),.story-photo:focus:not(:focus-visible),.story-more-grid figure:focus:not(:focus-visible){outline:none;box-shadow:none}
.story-image-caption{margin-top:9px;color:var(--muted);font:400 12px/1.4 'DM Sans',sans-serif}.story-more-grid figure{height:auto;display:flex;flex-direction:column}.story-more-grid img{height:auto}.story-more-grid{align-items:start}
.image-viewer.zoom-leaving .image-viewer-stage img{opacity:0;transition:opacity .25s ease}
.image-viewer.zoom-returning .image-viewer-stage img{opacity:0;transition:none}.image-viewer-stage img{transition:opacity .3s ease}

.image-viewer.zoom-leaving .image-viewer-stage{pointer-events:none}