/* Portfolio 2026 — stili consolidati dalla V10 */

:root {
  --ink: #191919;
  --muted: #7d7d79;
  --bg: #f5f5f2;
  --line: #deded9;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 clamp(22px,5vw,90px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background: #fff;
  border-bottom: 1px solid #ededeb;
  height: 76px;
  box-shadow: 0 2px 18px rgba(0,0,0,.025);
}

.brand {
  font-family: Manrope,sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.1em;
}

.brand-dot {
  color: #e00019;
}

.period {
  color: #e00019;
}
.period-2 {
  color: #006cb3
}
.period-3 {
  color: #008e35
}
.site-header nav {
  display: flex;
  gap: clamp(20px,3vw,50px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.intro {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-top: 76px;
  min-height: 100svh;
}

.intro-inner {
  width: min(75vw,540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  transform-origin: center;
}

.hero-logo {
  width: 100%;
  height: auto;
}

.intro-year {
  font-family: Manrope,sans-serif;
  font-size: clamp(48px,9vw,118px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.085em;
}

.intro-bottom {
  position: absolute;
  left: clamp(22px,5vw,90px);
  right: clamp(22px,5vw,90px);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .16em;
  bottom: 28px;
}

.work-feature {
  position: relative;
  scroll-margin-top: 76px;
  height: 300vh;
}

.feature-stage {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 76px;
  isolation: isolate;
  background: var(--bg);
}

.feature-top,
.sequence-top {
  position: absolute;
  left: clamp(22px,5vw,90px);
  right: clamp(22px,5vw,90px);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .16em;
  top: calc(76px + 25px);
  z-index: 5;
  will-change: color;
}

.feature-footer,
.sequence-footer {
  position: absolute;
  left: clamp(22px,5vw,90px);
  right: clamp(22px,5vw,90px);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .16em;
  bottom: 28px;
  z-index: 5;
  will-change: color;
}

.feature-art-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  position: relative;
  z-index: 2;
  width: min(57vw,810px);
  height: min(68svh,690px);
  will-change: transform,opacity;
}

.feature-art {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 20px 65px rgba(0,0,0,.075);
}

.feature-details {
  position: absolute;
  left: clamp(22px,5vw,90px);
  right: clamp(22px,5vw,90px);
  bottom: clamp(65px,9vh,120px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
  z-index: 5;
  color: var(--ink);
}

.feature-details h1 {
  font-family: Manrope,sans-serif;
  font-weight: 500;
  line-height: .99;
  font-size: clamp(32px,5.2vw,82px);
  letter-spacing: -.07em;
  margin: 0;
  will-change: transform,opacity,color;
}

.feature-details h1 em {
  font-style: normal;
}

.feature-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  letter-spacing: .03em;
  text-align: right;
  padding: 12px;
  background: transparent;
  color: inherit;
}

.archive {
  min-height: 75svh;
  background: #e9eae6;
  padding: clamp(70px,10vw,160px) clamp(22px,8vw,140px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  scroll-margin-top: 76px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
}

.archive h2 {
  font: 500 clamp(80px,17vw,250px)/1 Manrope,sans-serif;
  letter-spacing: -.09em;
  margin: 35px 0;
}

.archive p {
  font-size: clamp(16px,1.7vw,22px);
  line-height: 1.6;
  max-width: 550px;
}

.about p {
  font-size: clamp(16px,1.7vw,22px);
  line-height: 1.6;
  max-width: 550px;
}

.archive-note {
  margin-top: 36px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: .1em;
}

.about {
  padding: 160px clamp(22px,8vw,140px);
  min-height: 65svh;
  scroll-margin-top: 76px;
}

.about h2 {
  font: 500 clamp(42px,7vw,90px) Manrope,sans-serif;
  letter-spacing: -.07em;
  margin: 45px 0 20px;
}

footer {
  padding: 35px clamp(22px,5vw,90px);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .13em;
}

.site-header nav a {
  transition: opacity .2s;
}

.site-header nav a[aria-current="page"] {
  font-weight: 600;
}

main {
  background: var(--bg);
}

.work-sequence {
  height: 260vh;
  position: relative;
  scroll-margin-top: 76px;
}

.sequence-stage {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 76px;
}

.sequence-art-wrap {
  width: min(60vw,800px);
  height: min(66svh,670px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
}

.sequence-art-wrap img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 65px rgba(0,0,0,.06);
}

.sequence-details {
  position: absolute;
  left: clamp(22px,5vw,90px);
  right: clamp(22px,5vw,90px);
  bottom: clamp(65px,9vh,120px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
  z-index: 4;
}

.sequence-details h2 {
  font: 500 clamp(32px,5.2vw,82px)/.99 Manrope,sans-serif;
  letter-spacing: -.07em;
  margin: 0;
}

.sequence-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  text-align: right;
  background: rgba(245,245,242,.88);
  padding: 12px;
}

.feature-backdrop {
  position: absolute;
  inset: 76px 0 0;
  z-index: 0;
  background-image: url("assets/toronto-web.webp");
  background-size: auto 185%;
  background-repeat: no-repeat;
  background-position: 85% 47%;
  filter: grayscale(1) contrast(1.22) brightness(1.15);
  transform-origin: 75% center;
  opacity: 0;
  pointer-events: none;
}

.feature-shade {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  background: #090909;
  opacity: 0;
  pointer-events: none;
}

.sequence-visione .sequence-stage {
  color: #fff;
  isolation: isolate;
  background: #244D50;
}

.sequence-visione .sequence-art-wrap {
  width: min(45vw,590px);
  height: min(72svh,770px);
  position: relative;
  will-change: transform,opacity;
  z-index: 2;
}

.sequence-visione .sequence-art-wrap img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 25px 65px rgba(0,0,0,.22);
}

.sequence-visione .sequence-top {
  color: #fff;
  z-index: 4;
}

.sequence-visione .sequence-footer {
  color: #fff;
  z-index: 4;
}

.sequence-visione .sequence-details {
  color: #fff;
  z-index: 4;
}

.sequence-visione .sequence-meta {
  color: #fff;
  background: transparent;
}

.sequence-visione .sequence-details h2 {
  font-size: clamp(46px,7vw,110px);
  text-shadow: 0 2px 20px rgba(0,0,0,.12);
}

.sequence-visione {
  height: 315vh;
}

.sequence-visione .visione-detail {
  position: absolute;
  inset: 76px 0 0;
  z-index: 0;
  background-image: url("assets/visione.webp");
  background-size: cover;
  background-position: 58% 33%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.14);
  filter: saturate(.88);
  will-change: transform,opacity;
}

.sequence-visione .visione-dim {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(8,43,45,.90) 0%,rgba(8,43,45,.57) 47%,rgba(8,43,45,.35) 100%);
  opacity: 0;
  will-change: opacity;
}

.sequence-dissolvenza {
  height: 305vh;
}

.sequence-dissolvenza .sequence-stage {
  background: #382D42;
  color: #fff;
  isolation: isolate;
}

.sequence-dissolvenza .dissolvenza-detail {
  position: absolute;
  inset: 76px 0 0;
  z-index: 0;
  background-image: url("assets/dissolvenza.webp");
  background-size: cover;
  background-position: 50% 12%;
  filter: grayscale(1) contrast(1.1);
  opacity: 0;
  transform: scale(1.2);
  will-change: transform,opacity,filter;
}

.sequence-dissolvenza .dissolvenza-shade {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(27,18,36,.85),rgba(56,45,66,.45));
  opacity: 0;
  will-change: opacity;
}

.sequence-dissolvenza .sequence-art-wrap {
  z-index: 2;
  position: relative;
  width: min(56vw,740px);
  height: min(69svh,720px);
  will-change: transform,opacity,filter;
}

.sequence-dissolvenza .sequence-art-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 25px 70px rgba(0,0,0,.2);
}

.sequence-dissolvenza .sequence-details {
  color: #fff;
  z-index: 4;
}

.sequence-dissolvenza .sequence-top {
  color: #fff;
  z-index: 4;
}

.sequence-dissolvenza .sequence-footer {
  color: #fff;
  z-index: 4;
}

.sequence-dissolvenza .sequence-meta {
  background: transparent;
  color: #fff;
}

.sequence-stanza {
  height: 305vh;
  position: relative;
  overflow: clip;
}

.sequence-stanza .sequence-stage {
  color: #fff;
  position: sticky;
  top: 0;
  background: #11273d;
  isolation: isolate;
  overflow: hidden;
}

.sequence-stanza .stanza-detail {
  position: absolute;
  inset: 76px 0 0;
  z-index: 0;
  opacity: 0;
  will-change: opacity,transform;
  background-image: url("assets/stanza.webp");
  background-size: cover;
  background-position: 63% 43%;
  filter: saturate(.88);
  transform-origin: 65% 45%;
  pointer-events: none;
}

.sequence-stanza .stanza-shade {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
  background: linear-gradient(90deg,rgba(9,25,43,.94) 0%,rgba(12,30,52,.72) 48%,rgba(12,30,52,.58) 100%);
  pointer-events: none;
}

.sequence-stanza .sequence-art-wrap {
  will-change: opacity,transform;
  transform-origin: center;
  width: min(55vw,780px);
  height: min(67svh,720px);
  max-width: calc(100vw - 40px);
  max-height: calc(100svh - 185px);
  margin-left: 10vw;
  position: relative;
  z-index: 2;
}

.sequence-stanza .sequence-art-wrap img {
  box-shadow: 0 25px 65px rgba(0,0,0,.28);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sequence-stanza .sequence-details {
  z-index: 4;
  color: #fff;
}

.sequence-stanza .sequence-top {
  z-index: 4;
  color: #fff;
}

.sequence-stanza .sequence-footer {
  z-index: 4;
  color: #fff;
}

.sequence-stanza .sequence-meta {
  background: transparent;
  color: #fff;
}

.sequence-stanza .sequence-details h2 {
  font-size: clamp(46px,7vw,110px);
}

.sequence-albero {
  height: 305vh;
  position: relative;
  overflow: clip;
}

.sequence-la {
  height: 305vh;
  position: relative;
  overflow: clip;
}

.sequence-albero .sequence-stage {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #142a47;
}

.sequence-la .sequence-stage {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #102b40;
}

.albero-detail {
  position: absolute;
  inset: -594px 0 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  will-change: transform,opacity;
  background-image: url("assets/albero.webp");
  background-position: 53% 14%;
}

.la-detail {
  position: absolute;
  inset: 76px 0 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  will-change: transform,opacity;
  background-image: url("assets/la.webp");
  background-position: 55% 55%;
}

.albero-shade {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  background: linear-gradient(90deg,rgba(12,27,50,.94),rgba(16,34,58,.7) 48%,rgba(16,34,58,.56));
}

.la-shade {
  position: absolute;
  inset: 76px 0 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  background: linear-gradient(90deg,rgba(8,27,43,.94),rgba(11,35,54,.73) 55%,rgba(11,35,54,.5));
}

.sequence-albero .sequence-art-wrap {
  position: relative;
  z-index: 2;
  width: min(52vw,690px);
  height: min(69svh,740px);
  max-width: calc(100vw - 40px);
  max-height: calc(100svh - 185px);
  margin-left: 11vw;
  will-change: transform,opacity;
}

.sequence-la .sequence-art-wrap {
  position: relative;
  z-index: 2;
  width: min(52vw,690px);
  height: min(69svh,740px);
  max-width: calc(100vw - 40px);
  max-height: calc(100svh - 185px);
  margin-left: 11vw;
  will-change: transform,opacity;
}

.sequence-albero .sequence-art-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 25px 65px rgba(0,0,0,.25);
}

.sequence-la .sequence-art-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 25px 65px rgba(0,0,0,.25);
}

.sequence-albero .sequence-details {
  z-index: 4;
  color: #fff;
}

.sequence-albero .sequence-top {
  z-index: 4;
  color: #fff;
}

.sequence-albero .sequence-footer {
  z-index: 4;
  color: #fff;
}

.sequence-la .sequence-details {
  z-index: 4;
  color: #fff;
}

.sequence-la .sequence-top {
  z-index: 4;
  color: #fff;
}

.sequence-la .sequence-footer {
  z-index: 4;
  color: #fff;
}

.sequence-albero .sequence-meta {
  background: transparent;
  color: #fff;
}

.sequence-la .sequence-meta {
  background: transparent;
  color: #fff;
}

.sequence-albero .sequence-details h2 {
  font-size: clamp(46px,7vw,110px);
}

.sequence-la .sequence-details h2 {
  font-size: clamp(46px,7vw,110px);
}

/* Intro: testo essenziale e invito allo scroll */
.intro-description {
  max-width: 410px;
  margin: -4px 0 0;
  color: #777772;
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.65;
  text-align: center;
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
}
.scroll-arrow {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
  animation: arrow-bob 1.8s ease-in-out infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}
/* La tela cresce, mantenendo il rapporto originale e il titolo leggibile. */
.feature-art-wrap { width: min(67vw, 1020px); height: min(76svh, 820px); }
.sequence-art-wrap { width: min(67vw, 1020px); height: min(76svh, 820px); }
/* Le cinque varianti specifiche usano un'area più ampia ma restano contenute. */
.sequence-visione .sequence-art-wrap,
.sequence-dissolvenza .sequence-art-wrap,
.sequence-stanza .sequence-art-wrap,
.sequence-albero .sequence-art-wrap,
.sequence-la .sequence-art-wrap {
  width: min(64vw, 900px);
  height: min(76svh, 820px);
  max-height: calc(100svh - 155px);
}
/* Contenimento per resize e compositing Firefox. */
.work-feature, .work-sequence { overflow: visible; } /* sticky Firefox: evitare overflow:clip sul contenitore */
.feature-stage, .sequence-stage { width: 100%; max-width: 100%; }
.feature-art-wrap, .sequence-art-wrap { min-width: 0; }

@media (min-width:901px) {
  .feature-art-wrap {
    margin-left: 12vw;
    margin-bottom: 2vh;
  }
  .feature-details {
    bottom: clamp(66px,9vh,112px);
  }
  .feature-details h1 {
    max-width: 36vw;
  }
  .sequence-visione .sequence-art-wrap {
    margin-left: 13vw;
  }
  .sequence-visione .sequence-details h2 {
    max-width: 38vw;
  }
  .sequence-visione .visione-detail {
    background-size: cover;
    background-position: 63% 19%;
  }
  .sequence-dissolvenza .sequence-art-wrap {
    margin-left: 11vw;
  }
  .sequence-dissolvenza .sequence-details h2 {
    max-width: 40vw;
  }
  .sequence-stanza .sequence-art-wrap {
    margin-left: 11vw;
  }
}

@media (max-width:900px) {
  .feature-backdrop {
    background-size: auto 145%;
    background-position: 67% 47%;
  }
  .feature-art-wrap {
    width: 88vw;
    height: 54svh;
    margin-top: -6vh;
  }
  .feature-details {
    bottom: 85px;
  }
  .feature-details h1 {
    font-size: clamp(35px,8vw,62px);
  }
  .feature-meta {
    font-size: 10px;
  }
  .sequence-visione .sequence-art-wrap {
    width: 76vw;
    height: 63svh;
    margin-top: -5vh;
  }
  .sequence-visione .sequence-details {
    bottom: 64px;
  }
  .sequence-visione .sequence-details h2 {
    font-size: clamp(42px,9vw,70px);
  }
  .sequence-stanza .sequence-art-wrap {
    margin-left: 0;
    width: 85vw;
    height: 56svh;
    margin-top: -5vh;
  }
  .sequence-albero .sequence-art-wrap {
    margin-left: 0;
    width: 84vw;
    height: 56svh;
    margin-top: -5vh;
  }
  .sequence-la .sequence-art-wrap {
    margin-left: 0;
    width: 84vw;
    height: 56svh;
    margin-top: -5vh;
  }
}

@media (max-width:700px) {
  .site-header {
    height: 68px;
  }
  .site-header nav {
    gap: 15px;
    font-size: 10px;
  }
  .intro-inner {
    width: 78vw;
    gap: 26px;
  }
  .intro-bottom {
    font-size: 9px;
  }
  .feature-art-wrap {
    width: 91vw;
    height: 48svh;
    margin-top: -11vh;
  }
  .feature-details {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    bottom: 66px;
  }
  .feature-details h1 {
    font-size: clamp(34px,9vw,52px);
  }
  .feature-meta {
    text-align: left;
    padding: 0;
    gap: 3px;
    font-size: 10px;
    background: transparent;
  }
  .feature-top,
  .sequence-top {
    top: calc(68px + 16px);
  }
  .work-feature {
    scroll-margin-top: 68px;
    height: 280vh;
  }
  .archive h2 {
    font-size: clamp(70px,17vw,120px);
  }
  .about {
    padding: 110px 22px;
    scroll-margin-top: 68px;
  }
  .intro {
    padding-top: 68px;
  }
  .feature-stage {
    padding-top: 68px;
  }
  .archive {
    scroll-margin-top: 68px;
  }
  .collection-counter {
    bottom: 15px;
  }
  .work-sequence {
    height: 235vh;
  }
  .sequence-stage {
    padding-top: 68px;
  }
  .sequence-art-wrap {
    width: 90vw;
    height: 55svh;
  }
  .sequence-details {
    bottom: 72px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .sequence-details h2 {
    font-size: clamp(36px,10vw,60px);
  }
  .sequence-meta {
    text-align: left;
    padding: 0;
    gap: 3px;
    font-size: 10px;
  }
  .feature-backdrop {
    inset: 68px 0 0;
  }
  .feature-shade {
    inset: 68px 0 0;
  }
  .sequence-visione .sequence-art-wrap {
    width: 82vw;
    height: 59svh;
    margin-top: -9vh;
  }
  .sequence-visione .sequence-details {
    bottom: 65px;
  }
  .sequence-visione .sequence-meta {
    font-size: 11px;
  }
  .sequence-visione {
    height: 285vh;
  }
  .sequence-visione .visione-detail {
    inset: 68px 0 0;
    background-position: 55% center;
  }
  .sequence-visione .visione-dim {
    inset: 68px 0 0;
  }
  .sequence-dissolvenza {
    height: 270vh;
  }
  .sequence-dissolvenza .dissolvenza-detail {
    inset: 68px 0 0;
  }
  .sequence-dissolvenza .dissolvenza-shade {
    inset: 68px 0 0;
  }
  .sequence-dissolvenza .sequence-art-wrap {
    width: 87vw;
    height: 52svh;
    margin-top: -8vh;
  }
  .sequence-dissolvenza .sequence-details {
    bottom: 66px;
  }
  .sequence-stanza {
    height: 270vh;
  }
  .sequence-stanza .stanza-detail {
    inset: 68px 0 0;
  }
  .sequence-stanza .stanza-shade {
    inset: 68px 0 0;
  }
  .sequence-stanza .sequence-art-wrap {
    max-height: 52svh;
    margin-left: 0;
    width: 88vw;
    height: 49svh;
    margin-top: -8vh;
  }
  .sequence-stanza .sequence-details {
    bottom: 70px;
  }
  .sequence-albero {
    height: 270vh;
  }
  .sequence-la {
    height: 270vh;
  }
  .albero-detail {
    inset: 68px 0 0;
  }
  .albero-shade {
    inset: 68px 0 0;
  }
  .la-detail {
    inset: 68px 0 0;
  }
  .la-shade {
    inset: 68px 0 0;
  }
  .sequence-albero .sequence-art-wrap {
    width: 85vw;
    height: 50svh;
    margin-top: -8vh;
  }
  .sequence-la .sequence-art-wrap {
    width: 85vw;
    height: 50svh;
    margin-top: -8vh;
  }
  .sequence-albero .sequence-details {
    bottom: 70px;
  }
  .sequence-la .sequence-details {
    bottom: 70px;
  }
  /* Mobile: titolo a sinistra, metadati a destra su una sola fascia. */
  .feature-details, .sequence-details {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    bottom: 48px;
  }

  .feature-meta, .sequence-meta {
    flex: 0 0 auto;
    text-align: right;
    align-items: flex-end;
    font-size: 11px;
    line-height: 1.3;
    padding: 0;
    max-width: 42%;
  }
  .feature-art-wrap { width: 95vw; height: 60svh; margin-top: -4vh; }
  .sequence-art-wrap,
  .sequence-visione .sequence-art-wrap,
  .sequence-dissolvenza .sequence-art-wrap,
  .sequence-stanza .sequence-art-wrap,
  .sequence-albero .sequence-art-wrap,
  .sequence-la .sequence-art-wrap {
    width: 94vw;
    height: 61svh;
    max-height: calc(100svh - 170px);
    margin-top: -4vh;
    margin-left: 0;
  }
  .sequence-visione .sequence-details,
  .sequence-dissolvenza .sequence-details,
  .sequence-stanza .sequence-details,
  .sequence-albero .sequence-details,
  .sequence-la .sequence-details { bottom: 48px; }
  .intro-description { max-width: 310px; font-size: 12px; }
  .intro-bottom { align-items: flex-end; }

}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .scroll-arrow { animation: none; }
  .work-feature {
    height: auto;
  }
  .feature-stage {
    position: relative;
    height: 100svh;
  }
  .work-sequence {
    height: auto;
  }
  .sequence-stage {
    height: 100svh;
    position: relative;
  }
  .feature-backdrop {
    opacity: .28;
  }
  .feature-shade {
    opacity: .66;
  }
  .feature-details {
    color: #fff;
  }
  .feature-top,
  .sequence-top {
    color: #fff;
  }
  .feature-footer,
  .sequence-footer {
    color: #fff;
  }
  .feature-art-wrap {
    opacity: 1;
    transform: none;
  }
  .sequence-visione {
    height: auto;
  }
  .sequence-visione .visione-detail {
    opacity: .42;
    transform: none;
  }
  .sequence-visione .visione-dim {
    opacity: 1;
  }
  .sequence-dissolvenza {
    height: auto;
  }
  .sequence-dissolvenza .dissolvenza-detail {
    opacity: .35;
    transform: none;
  }
  .sequence-dissolvenza .dissolvenza-shade {
    opacity: 1;
  }
  .sequence-stanza {
    height: auto;
  }
  .sequence-stanza .stanza-detail {
    opacity: .4;
    transform: none;
  }
  .sequence-stanza .stanza-shade {
    opacity: 1;
  }
  .sequence-albero {
    height: auto;
  }
  .sequence-la {
    height: auto;
  }
  .albero-detail {
    opacity: .35;
    transform: none;
  }
  .la-detail {
    opacity: .35;
    transform: none;
  }
  .albero-shade {
    opacity: 1;
  }
  .la-shade {
    opacity: 1;
  }
}

/* Navigazione guidata — desktop a destra, mobile sotto i metadati. */
.guided-navigation {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: 76px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  color: #202329;
  transition: opacity .25s, color .25s;
}
.guided-navigation.is-dark { color: #fff; }
.guided-navigation.is-hidden { opacity: 0; pointer-events: none; }
.guided-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.guided-button:disabled { opacity: .25; cursor: default; }
.guided-circle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid rgba(127,127,127,.55);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #242424;
  font-size: 20px;
  box-shadow: 0 3px 15px rgba(0,0,0,.09);
}
.guided-next:not(:disabled) .guided-circle {
  animation: guided-bob 2.2s ease-in-out infinite;
}
.guided-button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@keyframes guided-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (max-width:700px) {
  /* I dettagli stanno sopra; la navigazione occupa la fascia inferiore. */
  .feature-details,
  .sequence-details,
  .sequence-visione .sequence-details,
  .sequence-dissolvenza .sequence-details,
  .sequence-stanza .sequence-details,
  .sequence-albero .sequence-details,
  .sequence-la .sequence-details {
    bottom: 62px;
  }
  .guided-navigation {
    right: auto;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .guided-circle { width: 34px; height: 34px; font-size: 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .guided-next .guided-circle { animation: none; }
}