*{box-sizing:border-box}body{margin:0;background:white;font-family:Roboto,Arial,sans-serif}.wrapper{max-width:2560px;margin:0 auto;padding:16px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#e7e7e7;color:inherit;text-decoration:none}.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.shade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease}.shade h2{margin:0;color:white;text-align:center;font-size:clamp(22px,2.2vw,38px);font-weight:400}.card:hover .shade,.card:focus-visible .shade{opacity:1}.card:hover img{transform:scale(1.025)}.card:focus-visible{outline:3px solid black;outline-offset:2px;z-index:1}.footer{padding:24px 16px 36px;text-align:center;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#status{text-align:center;padding:60px 20px}.navbar{top:0}.burger-menu:focus-visible{outline:2px solid black;outline-offset:6px}body.work-menu-open{overflow:hidden}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.wrapper{padding:78px 8px 8px}.grid{grid-template-columns:1fr;gap:8px}.footer{font-size:10px}}@media(hover:none){.shade{opacity:1;align-items:flex-end;justify-content:flex-start;background:linear-gradient(transparent 45%,rgba(0,0,0,.65))}.shade h2{font-size:25px;text-align:left}}@media(prefers-reduced-motion:reduce){.card img,.shade{transition:none}.card:hover img{transform:none}}.card video{display:block;width:100%;height:100%;object-fit:cover}.card.will-enter::after{content:"";position:absolute;inset:0;z-index:2;background:#fff;pointer-events:none;transform:translateY(0);transition:transform 1.6s cubic-bezier(.65,0,.25,1) var(--entry-delay,0ms)}.card.will-enter.is-visible::after{transform:translateY(101%)}.shade{pointer-events:none}@media(prefers-reduced-motion:reduce){.card.will-enter::after{display:none;transition:none}}


/* Compact uppercase project labels. */
.shade h2 { text-transform: uppercase; font-size: clamp(15px, 1.3vw, 21px); letter-spacing: .06em; line-height: 1.35; }


/* Reverse the entrance curtain before opening a project. */
.grid.is-leaving .card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; pointer-events: none; transform: translateY(0); transition: transform 1.1s cubic-bezier(.65,0,.25,1) var(--exit-delay,0ms); }
.grid.is-leaving .card { outline: none; }
@media (prefers-reduced-motion: reduce) { .grid.is-leaving .card::after { display: none; transition: none; } }

/* Decorative cards complete each row; the two supplied images swap on hover. */
.logo-card { cursor: default; }
.logo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logo-card .logo-card-inverted { opacity: 0; transition: opacity .3s ease; }
.logo-card:hover .logo-card-inverted { opacity: 1; }
.logo-card:hover img { transform: none; }
@media (hover: none) { .logo-card .logo-card-inverted { opacity: 0; } }

/* Decorative logos stay unchanged on hover and never act as links. */
.logo-card:hover img { transform: none; }
.logo-card img { transition: none; }


/* A capo del title.txt rispettati anche nella scritta sopra la copertina. */
.shade h2 { white-space: pre-line; }


/* Il piè di pagina resta sotto la griglia: nascosto finché i progetti non sono caricati,
   e la griglia occupa almeno tutto lo schermo così non compare in alto all'apertura. */
.wrapper { min-height: 100svh; }
.footer { opacity: 0; transition: opacity .6s ease .4s; }
.work-ready .footer { opacity: 1; }

/* testo sotto la griglia: dice a Google (e a chi legge) cosa c'è in questa pagina */
.work-intro{max-width:760px;margin:clamp(48px,7vw,96px) auto 0;padding:0 16px;text-align:center;font-family:var(--font,"Hanken Grotesk",Arial,sans-serif);font-weight:300;font-size:clamp(16px,1.2vw,19px);line-height:1.65;color:var(--ink,#1a1a1a)}.work-intro p{margin:0}.work-intro__links{display:flex;justify-content:center;gap:28px;margin-top:22px!important}.work-intro__links a{color:inherit;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--line,rgba(26,26,26,.14))}.work-intro__links a:hover,.work-intro__links a:focus-visible{border-bottom-color:var(--ink,#1a1a1a)}