*{box-sizing:border-box}body{margin:0;color:#171717;background:#fff;font-family:Roboto,Arial,sans-serif}.navbar{top:0}.project-hero{position:relative;min-height:100svh;height:100svh;background:#deddd9;isolation:isolate}.project-hero>.visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-info{position:absolute;left:4vw;bottom:5vh;width:min(440px,44vw);padding:30px 32px;background:rgba(255,255,255,.94);z-index:3}.project-info h1{font-size:clamp(30px,3.4vw,54px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:0 0 24px;overflow-wrap:anywhere}.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 24px}.project-meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px;color:#626262}.project-meta dd{margin:0;font-size:14px}.description{font-size:15px;line-height:1.6;white-space:pre-line;margin:0}.project-images{display:grid;grid-template-columns:1fr;gap:28px;padding:28px 28px 0}.project-shot{position:relative;margin:0;overflow:hidden;background:#eeede9}.project-shot .visual{display:block;width:100%;height:auto}.project-shot.portrait{width:76%;justify-self:center}.reveal{overflow:hidden}.reveal::after{content:"";position:absolute;inset:0;z-index:4;background:#fff;pointer-events:none;transform:translateY(0);transition:transform 1.6s cubic-bezier(.65,0,.25,1) var(--entry-delay,0ms)}.reveal.is-visible::after{transform:translateY(101%)}.project-bottom{padding:60px 28px;display:flex;justify-content:space-between;font-size:13px}.project-bottom a{color:inherit;text-decoration:none}.project-bottom a:hover{text-decoration:underline}.demo-note{position:absolute;top:24px;left:4vw;z-index:3;background:white;padding:10px 14px;font-size:12px}.error{padding:160px 8vw}.burger-menu:focus-visible{outline:2px solid black;outline-offset:6px}body.work-menu-open{overflow:hidden}@media(max-width:768px){.project-hero{margin-top:70px;height:calc(100svh - 70px);min-height:650px}.project-info{left:20px;bottom:24px;width:calc(100% - 40px);max-width:440px;padding:24px}.project-info h1{font-size:34px;margin-bottom:18px}.description{font-size:14px}.project-meta{margin-bottom:18px}.project-images{padding:12px 12px 0;gap:12px}.project-shot.portrait{width:100%}.project-bottom{padding:40px 20px}}@media(prefers-reduced-motion:reduce){.reveal::after{display:none;transition:none}}

/* Large project gallery: keep source order, pair consecutive portraits. */
.project-images{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1600px;margin-inline:auto;gap:24px;padding:24px 24px 0;align-items:start}.project-shot{grid-column:1 / -1;width:100%;min-width:0}.project-shot.portrait{grid-column:auto;width:100%;justify-self:stretch}.project-shot .visual{width:100%;height:auto}.project-info{max-height:calc(100% - 72px);overflow:auto}.project-note{font-size:11px;line-height:1.5;color:#606060;border-top:1px solid #d3d3d3;margin:20px 0 0;padding-top:14px}.project-meta{grid-template-columns:minmax(0,1fr) auto}.project-bottom{max-width:1600px;margin-inline:auto}@media(max-width:640px){.project-images{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px 12px 0}.project-shot,.project-shot.portrait{grid-column:1 / -1}.project-hero{min-height:0;height:calc(100svh - 70px)}.project-info{max-height:calc(100% - 40px);left:16px;bottom:20px;width:calc(100% - 32px);padding:20px}.project-info h1{font-size:30px}.description{font-size:13px;line-height:1.5}.project-note{margin-top:14px;padding-top:10px}}

/* Below 1024px, keep the project text beneath the opening image. */
@media (width < 1024px) {
  .project-hero { height: auto; min-height: 0; background: #fff; }
  .project-hero > .visual { position: relative; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; }
  .project-info { position: relative; inset: auto; width: 100%; max-width: none; max-height: none; overflow: visible; padding: clamp(24px, 4vw, 40px); background: #fff; }
  .project-info h1, .project-info .project-meta, .project-info .description, .project-info .project-note { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* Title follows the description size at every breakpoint. */
.project-info { --project-text-size: 15px; }
.project-info h1, .project-info .description { font-size: var(--project-text-size); }
.project-info h1 { font-weight: 700; line-height: 1.6; letter-spacing: normal; margin-bottom: 16px; }
@media (max-width: 768px) { .project-info { --project-text-size: 14px; } }
@media (max-width: 640px) { .project-info { --project-text-size: 13px; } }

/* Teaser preserves its composition; full films keep manual controls. */
.project-hero.has-teaser{height:auto;min-height:0;max-width:1600px;margin-inline:auto;background:#fff}.project-hero.has-teaser>.visual{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:85svh;object-fit:contain;background:#111}.project-hero.has-teaser .project-info{position:relative;inset:auto;width:100%;max-width:none;max-height:none;overflow:visible;padding:clamp(24px,4vw,40px);background:white}.has-teaser .project-info>*{max-width:720px;margin-left:auto;margin-right:auto}.project-shot.has-film{grid-column:1 / -1}.has-film video{min-height:220px;aspect-ratio:16/9;object-fit:contain;background:#111}.video-fallback{display:block;padding:16px;color:inherit}@media(max-width:640px){.has-film video{min-height:0}}

/* Full-width, left-aligned text below opening media. */
.project-hero.has-teaser .project-info { --info-inset: 0px; padding: 28px var(--info-inset); text-align: left; }
.project-hero.has-teaser .project-info > * { max-width: none; margin-left: 0; margin-right: 0; }
.project-hero.has-teaser .project-meta { display: flex; flex-wrap: wrap; gap: 20px 48px; }
@media (width < 1024px) {
  .project-hero .project-info { --info-inset: 16px; padding: 24px var(--info-inset); text-align: left; }
  .project-hero .project-info > * { max-width: none; margin-left: 0; margin-right: 0; }
  .project-hero .project-info .project-meta { display: flex; flex-wrap: wrap; gap: 20px 36px; }
  .project-hero .project-info .project-note { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* Align the project gallery with the opening media and text container. */
.project-images { max-width: 1600px; width: 100%; padding-left: 0; padding-right: 0; }

/* Pair the final portrait in each run with a decorative, non-clickable logo. */
.project-logo-shot { position: relative; height: 100%; background: white; }
.project-logo-shot .visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .project-logo-shot { display: none; } }


/* =========================================================================
   Margini laterali uniformi nella pagina progetto
   Tutti i blocchi (apertura, testi, galleria, piè di pagina) stanno dentro
   la stessa colonna: max 1600px, con un margine ai lati che cresce con lo
   schermo (16px su telefono → 64px su schermi grandi).
   ========================================================================= */
:root { --gutter: clamp(16px, 4vw, 64px); }

.project-hero,
.project-hero.has-teaser,
.project-images,
.project-bottom {
    width: min(1600px, 100% - 2 * var(--gutter));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}
.project-hero { margin-top: var(--gutter); }
.project-hero:not(.has-teaser) { height: calc(100svh - 2 * var(--gutter)); min-height: 0; }
.project-images { padding-top: var(--gutter); gap: var(--gutter); }
.project-bottom { padding-block: calc(var(--gutter) * 1.5); }

/* testi sotto il video di apertura: allineati ai bordi della colonna */
.project-hero.has-teaser .project-info { --info-inset: 0px; padding-inline: 0; }

/* A capo del title.txt rispettati anche nel titolo del progetto. */
.project-info h1 { white-space: pre-line; }

@media (width < 1024px) {
    .project-hero:not(.has-teaser) { height: auto; }
    .project-hero .project-info { --info-inset: 0px; padding-inline: 0; }
    .project-hero .project-info .project-note { width: 100%; margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 768px) {
    .project-hero { margin-top: calc(70px + var(--gutter)); }   /* sotto la barra del menu */
}


/* =========================================================================
   Video nella pagina progetto
   ========================================================================= */
/* Teaser di apertura: riempie sempre il suo riquadro (niente bande laterali). */
.project-hero.has-teaser > .visual {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 85svh;
    object-fit: cover;
}

/* Filmato in galleria: anteprima a tutto riquadro + pulsante play al centro. */
.project-shot.has-film { position: relative; }
.has-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }
.has-film.is-playing video { cursor: auto; }
.video-fallback { display: none !important; }

.film-play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 104px);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(230, 213, 184, .85);
    border-radius: 50%;
    background: rgba(10, 26, 43, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, opacity .35s ease;
}
.film-play::before {                 /* triangolo play, leggermente spostato per centrarlo otticamente */
    content: "";
    width: 30%;
    height: 34%;
    margin-left: 9%;
    background: #e6d5b8;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.film-play:hover,
.film-play:focus-visible { transform: scale(1.07); background: rgba(10, 26, 43, .6); }
.film-play:focus-visible { outline: 2px solid #e6d5b8; outline-offset: 4px; }
.has-film.is-playing .film-play { opacity: 0; transform: scale(.85); pointer-events: none; }