
:root{
  --cream:      #F5F0E8;
  --cream-2:    #EBE3D6;
  --cream-3:    #DCD3C4;
  --cream-4:    #C9BEAC;

  --green-900:  #223328;
  --green-800:  #2C4335;
  --green-700:  #3A5544;
  --sage:       #A6B79C;
  --sage-lt:    #C3CFBB;

  --rose-bg:    #F0D6D1;  --blush:      #E9B7BD;
  --rose:       #C2848F;
  --rose-ink:   #96566A;
  --peach:      #E9A184;

  --gold:       #C0A063;  --gold-soft:  #D8C08A;
  --gold-ink:   #7C6030;
  --ink:        #241F1B;
  --ink-mut:    #554D45;
  --inv:        #F3EEE5;
  --inv-mut:    #B3AC9F;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;
  --body:  "Gelasio", Georgia, "Bookman Old Style", serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --gap: clamp(1.25rem, 2.4vw, 2rem);
  --sec: clamp(5.5rem, 13vh, 10rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem, .95rem + .2vw, 1.06rem);
  line-height:1.72;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
}

h1{ font-size:clamp(2.7rem, 7.6vw, 6.1rem); }
h2{ font-size:clamp(1.95rem, 4vw, 3.3rem); }
h3{ font-size:clamp(1.2rem, 1.8vw, 1.45rem); font-weight:500; letter-spacing:-.005em; }

p{ margin:0 0 1.15em; }

a{ color:inherit; }
a,button{ cursor:pointer; }

::selection{ background:var(--blush); color:var(--green-900); }

:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; }
.sec--dark :focus-visible,
.cta :focus-visible,
.foot :focus-visible,
.nav.on-dark :focus-visible{ outline-color:var(--gold-soft); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-800); color:var(--inv);
  padding:.9rem 1.4rem; font-size:.8rem;
}
.skip:focus{ left:0; }


.wrap{ width:100%; max-width:1340px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:750px; }

section[id]{ scroll-margin-top:5.5rem; }

.sec{ padding-block:var(--sec); }
.sec--dark{ background:var(--green-800); color:var(--inv); }
.sec--dark.t-deep{ background:var(--green-900); }
.sec--dark.t-soft{ background:var(--green-700); }
.sec--dark.t-soft .ev__txt p,
.sec--dark.t-soft .sec__sub{ color:#CCC6BA; }

.sec--dark .eyebrow{ color:var(--gold-soft); }
.sec--dark .eyebrow::after{ background:var(--gold-soft); opacity:.55; }
.sec--dark .step__it p,
.sec--dark .ev__txt p,
.sec--dark .contat__sub{ color:var(--inv-mut); }
.sec--dark .step__it .num{ color:var(--gold-soft); }
.sec--dark .step__it{ border-top-color:rgba(243,238,229,.16); }
.sec--dark .contat__list li{ border-top-color:rgba(243,238,229,.16); }
.sec--dark .contat__list li:last-child{ border-bottom-color:rgba(243,238,229,.16); }
.sec--dark .contat__list .k{ color:var(--inv-mut); }
.sec--dark .contat__list .v{ color:var(--inv); }
.sec--dark a.v:hover{ color:var(--blush); }

.sec__head{ max-width:44ch; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec__sub{ color:var(--ink-mut); margin-top:1.4rem; }
.sec--dark .sec__sub{ color:var(--inv-mut); }

.eyebrow,
.nav__links a,
.sign,
.contat__list .k,
.foot p{ font-family:var(--sans); }

.eyebrow{
  font-size:.75rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::after{
  content:""; flex:1; max-width:4.5rem; height:1px;
  background:var(--gold); opacity:.8;
}
.eyebrow--light{ color:var(--gold-soft); }
.eyebrow--light::after{ background:var(--gold-soft); opacity:.55; }


.orn{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:0 0 2rem;
}
.orn::before,.orn::after{
  content:""; width:clamp(3rem,9vw,7rem); height:1px;
  background:linear-gradient(to right, transparent, var(--gold));
}
.orn::after{ background:linear-gradient(to left, transparent, var(--gold)); }
.orn i{
  width:9px; height:9px; flex:none;
  border:1px solid var(--gold); rotate:45deg;
}


.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation:none !important; }
}


.media{
  position:relative;
  aspect-ratio:4/3;
  background-image:var(--ph);
  background-repeat:repeat;
  background-color:var(--cream-3);
  --ph:repeating-linear-gradient(-45deg,
        rgba(36,31,27,.05) 0 1px, transparent 1px 12px);
  overflow:hidden;
  transition:transform 1.1s var(--ease);
}
.media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media--tall{ aspect-ratio:3/4; }
.sec--dark .media{
  background-color:var(--green-700);
  --ph:repeating-linear-gradient(-45deg, rgba(243,238,229,.055) 0 1px, transparent 1px 12px);
}

.media::after{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(192,160,99,.42);
  opacity:0; transition:opacity .6s var(--ease), inset .6s var(--ease);
  pointer-events:none;
}
.gal__it:hover .media::after{ opacity:1; inset:14px; }


.btn{
  display:inline-block;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:1.1rem 2.8rem;
  border:1px solid transparent;
  border-radius:999px;
  text-indent:.1em;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.1s; }

.btn--gold{ background:var(--green-800); color:var(--inv); }
.btn--gold:hover{ background:var(--gold-ink); }

.btn--ghost{ border-color:rgba(243,238,229,.45); color:var(--inv); }
.btn--ghost:hover{ background:var(--inv); color:var(--green-900); border-color:var(--inv); }

.btn--line{ border-color:rgba(36,31,27,.28); color:var(--ink); }
.btn--line:hover{ background:var(--green-800); color:var(--inv); border-color:var(--green-800); }

.btn--dark{ background:var(--green-800); color:var(--inv); }
.btn--dark:hover{ background:var(--green-900); }


.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-block:1.35rem;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(245,240,232,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(36,31,27,.1);
  padding-block:.7rem;
}

.nav.on-dark .brand,
.nav.on-dark .nav__links a{ color:var(--inv); }
.nav.on-dark .brand__mark{ color:var(--gold-soft); }
.nav.on-dark .burger span{ background:var(--inv); }
.nav.on-dark.is-stuck{
  background:rgba(34,51,40,.92);
  box-shadow:0 1px 0 rgba(243,238,229,.14);
}

.nav__in{
  max-width:1340px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.brand{
  display:flex; align-items:center; gap:1.1rem;
  text-decoration:none; color:var(--ink);
  transition:color .45s var(--ease);
}

.brand__logo{
  width:3.1rem; height:3.1rem; flex:none;
  object-fit:cover; border-radius:3px;
  box-shadow:0 0 0 1px rgba(192,160,99,.45);
  transition:width .5s var(--ease), height .5s var(--ease);
}
.nav.is-stuck .brand__logo{ width:2.7rem; height:2.7rem; }
.brand__logo + .brand__mark{ display:none; }

.brand__mark{
  position:relative; flex:none;
  width:2.9rem; height:2.9rem;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.42rem; letter-spacing:.05em;
  color:var(--gold-ink);
}
.brand__mark::before{
  content:""; position:absolute; inset:2px;
  border:1px solid currentColor; rotate:45deg; opacity:.75;
}

.brand__txt{
  font-family:var(--serif); font-weight:500;
  font-size:1.58rem; line-height:1.05; letter-spacing:.02em;
  display:flex; flex-direction:column;
}
.brand__txt em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.85rem; letter-spacing:normal; text-transform:none;
  margin-top:.22rem;
  color:var(--ink-mut); opacity:.9;
}
.nav.on-dark .brand__txt em{ color:var(--inv); opacity:.72; }

.nav__links{ display:flex; align-items:center; gap:2.3rem; }
.nav__links a{
  text-decoration:none; color:var(--ink);
  font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding-block:.4rem;
  transition:color .5s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }


.burger{
  display:none; width:2.75rem; height:2.75rem; flex:none;
  background:none; border:0; padding:0;
  place-items:center; align-content:center; gap:6px;
}
.burger span{
  display:block; width:24px; height:1px; background:var(--ink);
  transition:transform .4s var(--ease), background .5s var(--ease);
}


.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  gap:clamp(2.5rem,5vw,4.5rem);
  background:var(--rose-bg);
  overflow:hidden; isolation:isolate;
}
@media (min-width:900px){
  .hero{ grid-template-columns:1fr 1fr; }
}

.hero__art{ position:relative; height:100%; display:grid; align-items:center; }
.hero__art > *{ grid-area:1/1; }

.hero__art::before{
  content:""; grid-area:1/1; z-index:-1; pointer-events:none;
  height:min(78svh,720px); width:100%;
  border:1px solid rgba(192,160,99,.65);
  translate:clamp(-1.6rem,-1.6vw,-1rem) clamp(1rem,1.6vw,1.6rem);
  animation:frameIn 1.6s var(--ease) 1s both;
}

.hero__media{
  position:relative;
  height:min(78svh,720px); width:100%;
  background-image:var(--ph);
  --ph:repeating-linear-gradient(-45deg, rgba(36,31,27,.05) 0 1px, transparent 1px 12px);
  background-repeat:repeat;
  background-color:var(--cream-3);
  filter:contrast(1.07) saturate(1.06);
  animation:heroIn 2s var(--ease) .2s both;
}
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

@keyframes frameIn{ from{ opacity:0 } to{ opacity:1 } }

.hero__in{
  padding:8.5rem 0 4rem var(--pad);
  color:var(--ink);
}
@media (max-width:899px){
  .hero__in{ padding:8.5rem var(--pad) 0; }
  .hero__art{ padding-inline:var(--pad); padding-bottom:5rem; }
  .hero__media{ height:min(55svh,460px); }
  .hero__art::before{ display:none; }
}
.hero__in > *{ animation:up 1.1s var(--ease) both; }
.hero__in > :nth-child(1){ animation-delay:.25s }
.hero__in > :nth-child(3){ animation-delay:.94s }
.hero__in > :nth-child(4){ animation-delay:1.1s }
@keyframes up{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }

.hero .eyebrow{ color:#74592C; }
.hero .eyebrow::after{ background:#74592C; opacity:.55; }

.hero h1{ margin:0 0 1.9rem; color:var(--green-900); }
.hero h1 em{ font-style:italic; color:#8B4D61; }

.hero__tit{
  animation:none;
  font-size:clamp(2.4rem, 5.8vw, 4.7rem);
}
.hero__tit > span{ display:block; animation:up 1.1s var(--ease) both; }
.hero__tit > span:nth-child(1){ animation-delay:.40s }
.hero__tit > span:nth-child(2){ animation-delay:.58s }
.hero__tit > span:nth-child(3){ animation-delay:.76s }
.hero__tit .fi{ margin-right:.06em; }

.hero__sub{
  max-width:40ch; font-size:clamp(1.05rem,1.25vw,1.2rem);
  line-height:1.7; color:#3E372F; margin-bottom:2.9rem;
}

.hero__act{ display:flex; flex-wrap:wrap; gap:1rem; }



.manifesto{
  padding-block:clamp(5rem,12vh,8.5rem); text-align:center;
  background:var(--cream);
}
.manifesto .eyebrow{ justify-content:center; }
.manifesto .eyebrow::after{ display:none; }

.lead{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.7vw,2.2rem);
  line-height:1.45; font-weight:400;
  color:var(--green-900);
  margin-bottom:2.2rem;
}
.lead em{ font-style:italic; color:var(--rose-ink); }

.manifesto__testo{
  max-width:33rem; margin:0 auto 2.4rem;
  text-align:left;
  color:var(--ink-mut);
}
.manifesto__testo p:last-child{ margin-bottom:0; }

.sign{
  font-size:.73rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mut); margin:0;
}


.gira{ background:var(--cream-2); text-align:center; }
.gira__head{ max-width:46ch; margin-inline:auto; }
.gira .eyebrow{ justify-content:center; }
.gira .eyebrow::after{ display:none; }

.gira__box{ margin:0 auto; max-width:30rem; position:relative; }

@media (min-width:900px){
  .gira .wrap{
    display:grid;
    grid-template-columns:auto minmax(0,34rem);
    justify-content:center;
    gap:clamp(60px,6vw,80px);
    align-items:center;
    max-width:1100px; margin:0 auto;
  }
  .gira{ text-align:left; }
  .gira__head{ max-width:32ch; margin-inline:0; margin-bottom:0; }
  .gira .eyebrow{ justify-content:flex-start; }
  .gira .eyebrow::after{ display:block; }
  .gira__box{ margin:0; max-width:34rem; }
}

.gira__uso{
  display:grid; gap:.45rem; justify-items:start;
  margin:1.6rem 0 0; padding-top:1.1rem;
  border-top:1px solid rgba(124,96,48,.28);
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.6;
  color:var(--gold-ink);
}
.gira__uso span{ display:inline-flex; align-items:center; gap:.7em; }
.gira__uso svg{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.gira__uso svg .pieno{ fill:currentColor; stroke:none; }
@media (max-width:899px){ .gira__uso{ justify-items:center; } }

.giro{
  position:relative;
  aspect-ratio:4/5;
  cursor:grab;
  touch-action:pan-y;  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  outline-offset:6px;
}
.giro.presa{ cursor:grabbing; }
.giro__foto{
  width:100%; height:100%; display:block;
  pointer-events:none;
}
.giro__foto--sopra{ position:absolute; inset:0; opacity:0; }

.giro__carica{
  position:absolute; left:25%; right:25%; bottom:4%;
  height:1px; background:rgba(124,96,48,.18);
  transition:opacity .5s var(--ease);
}
.giro__carica i{
  display:block; height:100%; width:var(--pronto,0%);
  background:var(--gold-ink);
  transition:width .25s linear;
}
.giro.pronto .giro__carica{ opacity:0; }



.atl__idx{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  padding-bottom:1.6rem; margin-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(243,238,229,.16);
}
.atl__idx a{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--inv-mut);
  padding:.5rem 0; position:relative;
  transition:color .35s var(--ease);
}
.atl__idx a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-soft);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.atl__idx a:hover{ color:var(--inv); }
.atl__idx a:hover::after{ transform:scaleX(1); transform-origin:left; }

.atl{ scroll-margin-top:5.5rem; }
.atl + .atl{ margin-top:clamp(4rem,8vw,7rem); }

.atl__head{
  display:grid; gap:.5rem 1.6rem;
  align-items:baseline;
  margin-bottom:clamp(1.8rem,3.5vw,2.8rem);
}
.atl__head p{ max-width:52ch; }
.atl__head h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.atl__head p{ margin:0; color:var(--inv-mut); font-size:.96rem; }


.gal{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
}
.gal__it{ margin:0; }

#atelier .gal__it .media{ aspect-ratio:1/1; }
#atelier .gal__it .media.ha-foto{
  background-color:var(--bg, #F7F7F8);
  --ph:none;
}
#atelier .gal__it .media img{ object-fit:contain; }
.gal__it .media{ margin-bottom:1.1rem; }
.gal__it:hover .media{ transform:scale(1.025); }

.gal__it figcaption h4{
  font-family:var(--serif); font-weight:500;
  font-size:1.12rem; line-height:1.2; letter-spacing:-.005em;
  margin:0 0 .3rem;
}.gal__desc{ display:none; }

.gal__note{
  margin-top:clamp(3rem,6vw,5rem); text-align:center;
  color:var(--inv-mut); font-size:.95rem;
}
.gal__note a{
  color:var(--gold-soft); text-underline-offset:5px;
  display:inline-block; padding:.45rem .2rem;
}


.step{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(245px,1fr));
}
.step__it:nth-child(2){ transition-delay:.12s }
.step__it:nth-child(3){ transition-delay:.24s }

.step__it{ border-top:1px solid var(--cream-3); padding-top:1.9rem; }
.step__it .num{
  font-family:var(--serif); font-size:2.5rem; line-height:1;
  color:var(--gold); display:block; margin-bottom:1.15rem;
}
.step__it h3{ margin-bottom:.9rem; }
.step__it p{ color:var(--ink-mut); font-size:.94rem; margin:0; }


.ev{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
@media (min-width:900px){
  .ev{ grid-template-columns:1.2fr 1fr; }
  .ev__txt{ transition-delay:.15s }
}

.ev__muro{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--gap) * .5);
}
.ev__foto{
  margin:0;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.ev__muro.in .ev__foto{
  opacity:1; transform:none;
  transition-delay:calc(var(--i,0) * 70ms);
}
.ev__foto.nascosta{ display:none; }
.ev__foto .media{
  aspect-ratio:3/4;
  cursor:zoom-in;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transition:transform .5s var(--ease), box-shadow .4s var(--ease);
}
.ev__foto figcaption{ display:none; }

.ev__piu{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(34,51,40,.62);
  color:var(--inv);
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.2rem);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .ev__foto .media:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(0,0,0,.38);
  }
}
@media (prefers-reduced-motion:reduce){
  .ev__foto{ transition:none; }
}

.ev__txt h2{ margin-bottom:1.5rem; }
.ev__txt p{ color:var(--ink-mut); max-width:46ch; }
.ev__txt .btn{ margin-top:1.2rem; }

.ev__list{
  list-style:none; margin:0 0 2rem; padding:0;
  max-width:26rem;
}
.ev__list li{
  display:flex; align-items:baseline; gap:1.4rem;
  padding-block:.85rem;
  border-top:1px solid rgba(243,238,229,.18);
}
.ev__list li:last-child{ border-bottom:1px solid rgba(243,238,229,.18); }
.ev__y{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.14em; color:var(--gold-soft);
  flex:none; min-width:3.2rem;
}
.ev__n{ font-family:var(--serif); font-size:1.18rem; color:var(--inv); }


.cta{
  position:relative;
  background:var(--green-900); color:var(--inv);
  padding-block:clamp(5rem,13vh,8.5rem);
  text-align:center;
}
.cta::before{
  content:""; position:absolute; pointer-events:none;
  inset:clamp(.9rem,2vw,1.8rem);
  border:1px solid rgba(220,192,138,.2);
}
.cta .eyebrow{ justify-content:center; }
.cta .eyebrow::after{ display:none; }
.cta h2{ margin-bottom:1.4rem; text-wrap:balance; }
.cta h2 em{ font-style:italic; color:var(--blush); white-space:nowrap; }
.cta h2 .brilla{
  color:#F7D8DD;
  text-shadow:
    0 0 .22em rgba(233,183,189,.45),
    0 0 .8em  rgba(233,183,189,.22);
  animation:lume 5.6s ease-in-out infinite;
}
@keyframes lume{
  0%,100%{ text-shadow:0 0 .22em rgba(233,183,189,.45), 0 0 .8em  rgba(233,183,189,.22); }
  50%    { text-shadow:0 0 .3em  rgba(233,183,189,.78), 0 0 1.35em rgba(233,183,189,.46); }
}
@media (prefers-reduced-motion:reduce){
  .cta h2 .brilla{ animation:lume 5.6s ease-in-out infinite !important; }
}
.cta p{ color:var(--inv-mut); max-width:47ch; margin-inline:auto; margin-bottom:2.5rem; }
.cta .btn--gold{ background:var(--gold); color:var(--green-900); }
.cta .btn--gold:hover{ background:var(--gold-soft); }


.contat h2{ margin-bottom:1.2rem; }
.contat__sub{ color:var(--ink-mut); margin-bottom:3rem; }

.contat__list{ list-style:none; margin:0; padding:0; }
.contat__list li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  align-items:baseline;
  padding-block:1.3rem;
  border-top:1px solid var(--cream-3);
}
.contat__list li:last-child{ border-bottom:1px solid var(--cream-3); }
.contat__list .k{
  font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mut);
}
.contat__list .v{
  font-family:var(--serif); font-size:1.32rem;
  text-decoration:none; color:var(--green-900);
  transition:color .35s var(--ease);
}
a.v:hover{ color:var(--rose-ink); }

.contat__list a.v{ position:relative; display:inline-block; justify-self:start; }
.contat__list a.v::after{
  content:""; position:absolute; left:0; bottom:-.14em;
  width:100%; height:1px; background:var(--gold-soft); opacity:.85;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.contat__list a.v:hover::after{ transform:scaleX(1); transform-origin:left; }

@media (max-width:560px){
  .contat__list li{ grid-template-columns:1fr; gap:.3rem; }
}

.punti{ position:absolute; inset:0; pointer-events:none; }
.punto{
  position:absolute; left:var(--x); top:var(--y);
  translate:-50% -50%;
  width:2.75rem; height:2.75rem;  padding:0; border:0; background:none;
  pointer-events:auto; cursor:pointer;
  --r:15px;  opacity:1; transition:opacity .45s var(--ease);
}
.giro.presa ~ .punti .punto{ opacity:0; pointer-events:none; }
.punto:hover,
.punto:focus-visible{ --r:23px; }

.punto::before,
.punto::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  border-radius:50%;
}
.punto::before{  width:var(--r); height:var(--r);
  border:1px solid rgba(124,96,48,.95);
  box-shadow:0 0 0 1px rgba(245,240,232,.7), 0 1px 4px rgba(36,31,27,.28);
  transition:width .45s var(--ease), height .45s var(--ease);
}
.punto::after{  width:3px; height:3px;
  background:var(--gold-ink);
  animation:onda 5.6s cubic-bezier(.16,.7,.35,1) infinite;
}
.punto:nth-child(2)::after{ animation-delay:1.4s; }
.punto:nth-child(3)::after{ animation-delay:2.8s; }
.punto:nth-child(4)::after{ animation-delay:4.2s; }

@keyframes onda{
  0%   { box-shadow:0 0 0 1px rgba(245,240,232,.45), 0 0 0 1px rgba(192,160,99,.45); }
  32%  { box-shadow:0 0 0 1px rgba(245,240,232,.45), 0 0 0 16px rgba(192,160,99,0); }
  100% { box-shadow:0 0 0 1px rgba(245,240,232,.45), 0 0 0 16px rgba(192,160,99,0); }
}

.punto__nome{
  position:absolute; left:50%; bottom:calc(50% + 17px);
  translate:-50% 5px;
  white-space:nowrap;
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink);
  background:rgba(245,240,232,.9);
  padding:.32rem .6rem;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), translate .35s var(--ease);
}
.punto:hover .punto__nome,
.punto:focus-visible .punto__nome{ opacity:1; translate:-50% 0; }

@media (prefers-reduced-motion:reduce){
  .punto::after{ animation:onda 5.6s cubic-bezier(.16,.7,.35,1) infinite !important; }
  .punto:nth-child(2)::after{ animation-delay:1.4s !important; }
  .punto:nth-child(3)::after{ animation-delay:2.8s !important; }
  .punto:nth-child(4)::after{ animation-delay:4.2s !important; }
}


.film{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
  margin-bottom:clamp(3.5rem,7vw,6rem);
}
.film__tessera{ max-width:min(100%, 34rem); margin-inline:auto; }

.film__tessera{
  position:relative; display:block; width:100%;
  padding:0; border:0; background:none;
  aspect-ratio:16/9; overflow:hidden;
  cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.film__loop{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease), filter .5s var(--ease);
}
.film__tessera::after{  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(21,30,24,.5), transparent 55%);
}

.film__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:clamp(4rem,6vw,5.2rem); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(243,238,229,.14);
  border:1px solid rgba(243,238,229,.5);
  backdrop-filter:blur(6px);
  transition:background .4s var(--ease), transform .5s var(--ease);
}
.film__play svg{ width:42%; fill:var(--inv); translate:8% 0; }

.film__durata{
  position:absolute; right:1rem; bottom:.9rem; z-index:2;
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; color:var(--inv);
  background:rgba(21,30,24,.55); padding:.35rem .6rem;
}

@media (hover:hover) and (pointer:fine){
  .film__tessera:hover .film__loop{ transform:scale(1.04); }
  .film__tessera:hover .film__play{
    background:rgba(243,238,229,.26);
    transform:scale(1.06);
  }
}


html:has(dialog[open]),
html:has(dialog[open]) body{ overflow:hidden; }
dialog{ overscroll-behavior:contain; }

.cinema{
  width:100%; max-width:100%; height:100%; max-height:100%;
  margin:0; padding:0; border:0; background:transparent;
  overflow:hidden;
}
.cinema::backdrop{
  background:rgba(25,38,30,.96);
  backdrop-filter:blur(10px);
  animation:velo .5s ease-out both, sfoca .5s ease-out .45s both;
}
@keyframes sfoca{ from{ backdrop-filter:blur(0) } to{ backdrop-filter:blur(10px) } }
.cinema[open]{ animation:velo .35s ease-out both; }

.cinema__scena{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(92vw, calc(88vh * 16 / 9));
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.cinema__scena video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.cinema__film{
  object-fit:contain;
  opacity:0; transition:opacity .55s var(--ease);
}
.cinema__film.acceso{ opacity:1; }

.cinema__x{
  position:absolute; z-index:3;
  top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
}
.cinema :focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .film__loop{ transition:none; }
  .cinema__film{ transition:none; }
}


.lente{
  width:100%; max-width:100%; height:100%; max-height:100%;
  margin:0; padding:0; border:0; background:transparent;
  overflow:hidden;
}
.lente::backdrop{
  background:rgba(25,38,30,.94);
  backdrop-filter:blur(8px);
}
.lente[open]::backdrop{ animation:velo .35s ease-out both; }
.lente[open]{ animation:velo .35s ease-out both; }
@keyframes velo{ from{ opacity:0 } to{ opacity:1 } }

.lente__fig{
  margin:0; height:100%;
  display:grid; align-content:center; justify-items:center;
  gap:clamp(1.5rem,3vw,3.5rem);
  padding:clamp(3.5rem,7vw,4.5rem) clamp(1rem,4vw,4rem);
}
.lente__foto{
  display:grid; place-items:center; min-width:0; min-height:0;
  overflow:hidden;
}
.lente__foto img{
  max-width:100%; max-height:min(74vh,900px);
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transition:transform .4s var(--ease);
  will-change:transform;
}
.lente__foto.in-zoom img{ transition:transform .1s linear; }
@media (hover:hover) and (pointer:fine){
  .lente__foto{ cursor:zoom-in; }
  .lente__foto.in-zoom{ cursor:crosshair; }
}
@media (prefers-reduced-motion:reduce){
  .lente__foto img{ transition:none; }
}

.lente__info{
  color:var(--inv); text-align:left;
  max-width:42ch; align-self:center;
}
.lente__fam{
  margin:0 0 1rem;
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-soft);
}
.lente__tit{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.15;
  letter-spacing:-.015em; text-wrap:balance;
  margin:0 0 1.2rem;
}
.lente__tit::after{
  content:""; display:block;
  width:2.6rem; height:1px; margin-top:1.2rem;
  background:var(--gold);
}
.lente__desc{
  margin:0; color:#DCD6CB; font-size:1rem; line-height:1.75;
}
@media (min-width:900px){
  .lente__fig{
    grid-template-columns:minmax(0,1fr) min(32vw,26rem);
    align-items:center; justify-items:stretch;
  }
  .lente__foto img{ max-height:min(82vh,1000px); }
}

@media (max-width:899px){
  .lente{ overflow-y:auto; }
  .lente__fig{ height:auto; min-height:100%; }
  .lente__foto img{ max-height:52vh; }
  .lente__info{ text-align:center; max-width:36rem; }
  .lente__tit::after{ margin-inline:auto; }
  .lente__passi{ justify-content:center; }
}

.lente__btn{
  z-index:2; flex:none;
  width:3rem; height:3rem;
  display:grid; place-items:center;
  background:rgba(243,238,229,.1); border:1px solid rgba(243,238,229,.22);
  border-radius:50%; color:var(--inv);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lente__btn:hover{ background:rgba(243,238,229,.2); border-color:rgba(243,238,229,.45); }
.lente__btn svg{
  width:20px; height:20px; fill:none;
  stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.lente__x{
  position:absolute;
  top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
}

.lente__passi{
  display:flex; align-items:center; gap:1.1rem;
  margin-top:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(243,238,229,.16);
}
.lente__conta{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.2em; color:var(--inv-mut);
}

.lente :focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }

#atelier .gal__it .media{ cursor:zoom-in; }

@media (max-width:560px){
  .lente__nav{ top:auto; bottom:clamp(1rem,4vw,2rem); translate:none; }
  .lente__fig img{ max-height:62vh; }
}


.foot{ background:var(--green-900); color:var(--inv-mut); padding-block:3.2rem; }
.foot__in{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  justify-content:center; text-align:center;
}
.foot .brand__mark{ color:var(--gold-soft); width:2.6rem; height:2.6rem; font-size:1.2rem; }
.foot .brand__logo{ width:3.6rem; height:3.6rem; }
.foot p{ margin:0; font-size:.78rem; letter-spacing:.1em; }

.foot__legale{ display:flex; gap:1.6rem; }
.foot__legale a{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--inv-mut);
  padding:.45rem 0;
  transition:color .35s var(--ease);
}
.foot__legale a:hover{ color:var(--gold-soft); }


@media (max-width:430px){
  .brand__txt em{ display:none; }
}

@media (max-width:920px){
  .burger{ display:grid; }

  .nav__links{
    position:fixed; inset:0;
    background:var(--green-900);
    flex-direction:column; justify-content:center; gap:2.3rem;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav__links a,
  .nav.is-stuck .nav__links a{ color:var(--inv); font-size:.95rem; }

  body.menu-open{ overflow:hidden; }
  body.menu-open .nav__links{ opacity:1; visibility:visible; }
  body.menu-open .burger{ position:relative; z-index:2; }
  body.menu-open .burger span,
  body.menu-open .nav.is-stuck .burger span{ background:var(--inv); }
  body.menu-open .burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  body.menu-open .burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
}
