/* Guadagnino: base visiva S4, movimento e galleria spaziale S5. */
:root {
  --chocolate:#25120c;
  --ink:#2d1b15;
  --cream:#f1e5d9;
  --cream-deep:#ebddd0;
  --light:#f8efe5;
  --muted:#665148;
  --rule:rgba(45,27,21,.22);
  --light-rule:rgba(241,229,217,.32);
  --display:'Cormorant Garamond','Bodoni MT',Georgia,serif;
  --service:Arial,Helvetica,sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font:14px/1.55 var(--service);
  -webkit-font-smoothing:antialiased;
}
body.menu-is-open {
  overflow:hidden;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:5px;
}
a:hover {
  text-decoration:underline;
}
a:focus-visible,button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
figure,p,h1,h2,h3 {
  margin:0;
}
h1,h2 {
  font-family:var(--display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:balance;
}
h2 {
  font-size:clamp(31px,3.15vw,49px);
}
h3 {
  font-size:13px;
  font-weight:400;
}
p {
  text-wrap:pretty;
}
ul,ol {
  padding:0;
  margin:0;
  list-style:none;
}
[hidden] {
  display:none!important;
}
.page-width {
  width:86.2%;
  max-width:1518px;
  margin-inline:auto;
}
.eyebrow {
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.5;
  margin-bottom:12px;
}
.dark-section {
  color:var(--light);
  background:var(--chocolate);
}
.text-link {
  display:inline-block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding-block:12px;
  border-bottom:1px solid;
}
.pill-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 24px;
  border:1px solid var(--chocolate);
  border-radius:100px;
  background:var(--chocolate);
  color:var(--light);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .2s,color .2s;
}
.pill-link:hover {
  background:var(--cream-deep);
  color:var(--ink);
  text-decoration:none;
}
.outline-link {
  background:transparent;
  color:var(--light);
  border-color:var(--light);
}
.outline-link:hover {
  background:var(--light);
  color:var(--ink);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  z-index:20;
  top:12px;
  left:12px;
  padding:12px 18px;
  background:var(--light);
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:translateY(0);
}

/* 01: scena continua, senza riquadro fotografico. */
.hero {
  position:relative;
  isolation:isolate;
  min-height:0;
  height:46.76vw;
  max-height:830px;
  background:var(--chocolate);
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:#ecd5bc;
  border-bottom-left-radius:30% 10%;
  z-index:-2;
}
.hero-scene::after {
  content:'';
  position:absolute;
  inset:0 3%;
  background:url('../public/assets/hero-torta-ricomposta-d1.webp') center bottom/cover no-repeat;
  border-bottom-left-radius:30% 10%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  z-index:-1;
}
.site-header {
  height:clamp(86px,7vw,110px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  position:relative;
  z-index:auto;
}
.brand {
  width:110px;
  justify-self:start;
  mix-blend-mode:normal;
}
.brand img {
  mix-blend-mode:multiply;
}
.hero-title-line {
  white-space:nowrap;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:clamp(22px,3.4vw,55px);
}
.main-nav a,.header-call {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding-block:14px;
  white-space:nowrap;
}
.main-nav a:first-child {
  text-decoration:underline;
}
.header-call {
  justify-self:end;
  border-bottom:1px solid var(--rule);
}
.menu-toggle {
  display:none;
  justify-self:end;
  border:0;
  border-bottom:1px solid var(--rule);
  background:transparent;
  min-height:44px;
  min-width:64px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
}
.hero-copy {
  position:absolute;
  inset:28% 0 auto;
  pointer-events:none;
}
.hero-copy>* {
  max-width:44%;
  pointer-events:auto;
}
.hero h1 {
  font-size:clamp(36px,4.4vw,68px);
  margin-bottom:14px;
}
.hero .hero-description {
  max-width:30%;
  font-size:clamp(12px,1.02vw,16px);
  line-height:1.55;
}
.hero-link {
  margin-top:12px;
}
.hero-categories {
  position:absolute;
  right:3.6%;
  top:31%;
  width:14%;
  display:grid;
  gap:7px;
}
.hero-categories a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:4px 7px;
  border:1px solid transparent;
  border-radius:50px;
  font-size:clamp(10px,.8vw,13px);
}
.hero-categories img {
  width:37px;
  height:37px;
  object-fit:cover;
  border-radius:50%;
  flex-shrink:0;
}
.hero-categories .featured-category {
  background:rgba(248,239,229,.55);
  border-color:rgba(248,239,229,.35);
}
.hero-categories a:hover {
  background:var(--light);
  text-decoration:none;
}

/* 02: quattro schede ad arco. */
.moods {
  min-height:21.04vw;
  padding-block:20px;
}
.moods-layout {
  display:grid;
  grid-template-columns:24% 1fr;
  gap:3%;
  align-items:center;
}
.section-intro p {
  margin-top:17px;
  max-width:210px;
  font-size:12px;
  line-height:1.55;
}
.moods h2 {
  font-size:clamp(36px,4vw,64px);
}
.title-prelude {
  display:block;
  font-family:var(--service);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.1em;
  margin-bottom:8px;
}
.mood-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
.mood-card {
  min-height:clamp(158px,15vw,234px);
  border-radius:100px 100px 24px 24px;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  border:1px solid var(--cream);
  padding:14px 10px 12px;
  transition:transform .2s,background .2s;
}
.mood-card img {
  width:clamp(54px,5.2vw,82px);
  height:clamp(54px,5.2vw,82px);
  object-fit:cover;
  border-radius:50%;
}
.mood-card>span:not(.card-link) {
  font-size:11px;
  text-transform:uppercase;
  line-height:1.35;
}
.mood-card .card-link {
  font-size:9px;
  border-bottom:1px solid;
  padding-bottom:2px;
  letter-spacing:.08em;
}
.mood-card.is-featured {
  color:var(--light);
  background:#3b241b;
}
.mood-card:hover {
  transform:translateY(-5px);
  text-decoration:none;
}

/* 03: torta ampia, testo centrale, richiami laterali. */
.spotlight {
  background:#efddd1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:32.84vw;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
.spotlight-layout {
  grid-area:1 / 1;
  margin-block:0;
  padding-block:16px;
  display:grid;
  grid-template-columns:42% 31% 21%;
  gap:3%;
  align-items:center;
}
.featured-image {
  margin-left:0;
  position:relative;
  isolation:isolate;
}
/* D4: stesso fotogramma sotto il crop (600,90,960,780), senza duplicare il dolce. */
.featured-image::before {
  content:'';
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:-11.53846% -22.29167% -2.17949% -62.5%;
  background:url('../public/assets/hero-torta-ricomposta-d1.webp') 0 0 / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 99%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 30%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 99%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.featured-image img {
  width:100%;
  max-height:none;
  object-fit:initial;
  mix-blend-mode:normal;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 98%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 98%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.cake-copy,.cake-notes {
  position:relative;
  z-index:1;
}
.cake-copy>p:not(.eyebrow) {
  margin-top:17px;
  max-width:285px;
  font-size:13px;
}
.cake-copy .pill-link {
  margin-top:18px;
}
.cake-notes {
  padding-left:clamp(12px,2vw,30px);
  display:grid;
  gap:0;
}
.cake-notes li,.occasion-notes li {
  position:relative;
  min-width:0;
}
.cake-notes a,.occasion-notes li {
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding:19px 0 22px;
  text-decoration:none;
}
.cake-notes li::after,.occasion-notes li::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,rgba(126,87,54,.4),rgba(126,87,54,.04));
  pointer-events:none;
}
.note-content { display:grid; gap:6px; }
.note-label {
  color:#705747;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.note-title {
  color:var(--ink);
  font:italic 400 clamp(25px,2.2vw,34px)/1.06 var(--display);
  letter-spacing:-.025em;
}
.note-number {
  color:#8c674c;
  font-size:11px;
  font-family:var(--display);
  line-height:1;
  padding-top:2px;
}
@media(prefers-reduced-motion:no-preference) {
  .note-content { transition:translate .65s cubic-bezier(.16,1,.3,1); }
  .cake-notes li::after,.occasion-notes li::after { transform-origin:left; animation:note-rule-in 1.4s cubic-bezier(.16,1,.3,1) both; }
  .cake-notes li:nth-child(2)::after,.occasion-notes li:nth-child(2)::after { animation-delay:.12s; }
  .cake-notes li:nth-child(3)::after,.occasion-notes li:nth-child(3)::after { animation-delay:.24s; }
  @supports(animation-timeline:view()) {
    .cake-notes li::after,.occasion-notes li::after { animation-timeline:view(); animation-range:entry 0% entry 100%; }
  }
  @media(hover:hover) {
    .cake-notes a:hover .note-content { translate:5px 0; }
  }
  .cake-notes a:focus-visible .note-content { translate:5px 0; }
}
@keyframes note-rule-in {
  from { transform:scaleX(0); opacity:0; }
  to { transform:scaleX(1); opacity:1; }
}
.decorative-name {
  position:absolute;
  right:14%;
  bottom:-40px;
  font-family:var(--display);
  font-size:clamp(95px,12vw,185px);
  letter-spacing:-.04em;
  color:rgba(45,27,21,.045);
  z-index:-1;
  pointer-events:none;
}

/* 04: categorie reali, senza sequenza di lavorazione. */
.journey {
  min-height:23.8vw;
  display:flex;
  align-items:center;
  padding-block:22px;
}
.journey-layout {
  display:grid;
  grid-template-columns:21% 1fr;
  gap:4%;
  align-items:center;
}
.journey h2 {
  font-size:clamp(26px,2.6vw,41px);
}
.journey-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);
}
.journey-item {
  scroll-margin-top:30px;
}
.journey-frame {
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
  padding:6px;
  border-radius:6px;
  background:var(--chocolate);
  border:0;
  box-shadow:-7px -7px 16px #4b32269e,7px 8px 16px #100704c7,inset 1px 1px 2px #5b3c2d4d,inset -1px -1px 2px #0e06034d;
}
.journey-frame::after {
  content:'';
  position:absolute;
  z-index:1;
  inset:6px;
  border-radius:2px;
  box-shadow:inset 2px 2px 5px #0d05037a,inset -1px -1px 2px #6b4c3433;
  pointer-events:none;
}
.journey-frame>img {
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:2px;
}
.journey-frame>img.single-pastry {
  object-position:50% 50%;
}
.journey-caption {
  margin-top:12px;
  padding-left:29px;
  position:relative;
}
.step {
  position:absolute;
  left:0;
  top:0;
  font-family:var(--display);
  font-size:16px;
  line-height:1;
  color:#b9a192;
}
.journey-caption h3 {
  font-size:12px;
  margin-bottom:4px;
}
.journey-caption p {
  font-size:11px;
  line-height:1.5;
  color:#ddcabc;
}

/* 05: occasioni e decorazioni, nessuna ricetta inventata. */
.celebrations {
  min-height:19.77vw;
  padding-block:12px;
  display:flex;
  align-items:center;
}
.celebrations-layout {
  display:grid;
  grid-template-columns:38% 29% 27%;
  align-items:center;
  gap:3%;
}
.celebrations h2 {
  font-size:clamp(26px,2.75vw,43px);
}
.celebrations-copy>p:not(.eyebrow) {
  font-size:11px;
  max-width:340px;
  margin-top:8px;
}
.celebrations-copy .pill-link {
  margin-top:10px;
}
.occasion-image {
  justify-self:center;
  width:min(100%,clamp(144px,15.8vw,230px));
}
.occasion-image img {
  aspect-ratio:1;
  object-fit:cover;
  border-radius:140px 140px 8px 8px;
}
.occasion-notes {
  display:grid;
  gap:0;
  padding-left:clamp(12px,2vw,30px);
}
.occasion-notes li {
  align-items:center;
}
.occasion-notes .note-number {
  align-self:start;
  padding-top:8px;
}

/* 06: momenti editoriali, senza giudizi o recensioni. */
.little-moments {
  min-height:14.35vw;
  background:#f7eee5;
  display:flex;
  align-items:center;
  padding-block:22px;
}
.little-layout {
  display:grid;
  grid-template-columns:25% 1fr;
  gap:3%;
  align-items:center;
}
.little-layout h2 {
  font-size:clamp(24px,2.2vw,35px);
}
.little-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.little-grid article {
  display:flex;
  gap:10px;
  align-items:center;
}
.little-grid img {
  width:clamp(44px,4.2vw,66px);
  height:clamp(44px,4.2vw,66px);
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.little-grid h3 {
  font-size:12px;
  margin-bottom:6px;
}
.little-grid p {
  color:var(--muted);
  font-size:11px;
}

/* 07: chiusura fotografica e contatti reali. */
.contact {
  position:relative;
  isolation:isolate;
  background:var(--chocolate) url('../public/assets/hero-torta-ricomposta-d1.webp') center 57%/cover no-repeat;
  padding-top:14px;
}
.contact::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(37,18,12,.79);
  z-index:-1;
}
.contact-invitation {
  text-align:center;
  padding-bottom:18px;
}
.contact-invitation .eyebrow {
  margin-bottom:5px;
  font-size:9px;
}
.contact h2 {
  font-size:clamp(28px,3.2vw,50px);
}
.contact-invitation>p:not(.eyebrow) {
  margin-top:7px;
  font-size:11px;
}
.contact-invitation .pill-link {
  margin-top:10px;
}
.site-footer {
  border-top:1px solid var(--light-rule);
  padding-block:12px;
  display:grid;
  grid-template-columns:86px 1fr 1.45fr;
  gap:24px;
  align-items:center;
}
.footer-brand {
  display:block;
  padding:0;
  background:transparent;
  border-radius:0;
  width:86px;
}
.footer-brand img {
  mix-blend-mode:screen;
  filter:invert(1);
}
address {
  font-style:normal;
  display:flex;
  flex-direction:column;
  font-size:10px;
  line-height:1.7;
}
.footer-right {
  text-align:right;
  font-size:10px;
}
.footer-right p {
  color:#ddcabc;
}
.footer-right nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:0 21px;
  margin-top:8px;
}
.footer-right nav a {
  padding-block:7px;
}

@media(min-width:1770px) {
  .moods {
    min-height:372px;
  }
  .spotlight {
    min-height:580px;
  }
  .journey {
    min-height:420px;
  }
  .celebrations {
    min-height:350px;
  }
  .little-moments {
    min-height:254px;
  }
}
@media(max-width:1199px) and (min-width:901px) {
  .hero-copy>* {
    max-width:44%;
  }
  .hero h1 {
    font-size:4.4vw;
  }
  .hero .hero-description {
    max-width:31%;
  }
  .hero-categories {
    right:2%;
    width:15%;
  }
  .hero-categories a {
    gap:6px;
  }
  .hero-categories img {
    width:30px;
    height:30px;
  }
  .mood-grid {
    gap:12px;
  }
  .cake-notes {
    padding-left:14px;
  }
  .cake-notes li {
    gap:7px;
    font-size:10px;
  }
  .note-number {
    width:25px;
    height:25px;
  }
  .little-grid {
    gap:15px;
  }
  .little-grid article {
    gap:8px;
  }
}
@media(max-width:900px) {
  .page-width {
    width:calc(100% - 48px);
  }
  .hero {
    height:730px;
    min-height:0;
    max-height:none;
  }
  .hero::before {
    background-size:auto 430px;
    background-position:62% bottom;
    border-bottom-left-radius:30% 4%;
  }
  .site-header {
    height:80px;
    grid-template-columns:1fr auto;
    gap:16px;
  }
  .brand {
    width:99px;
  }
  .main-nav {
    display:none;
  }
  .header-call {
    grid-column:2;
    grid-row:1;
  }
  .js-enhanced .header-call {
    display:none;
  }
  .menu-toggle:not([hidden]) {
    display:block;
    grid-column:2;
    grid-row:1;
  }
  .mobile-menu {
    position:absolute;
    top:73px;
    left:-24px;
    right:-24px;
    height:calc(100dvh - 73px);
    max-height:calc(100vh - 73px);
    overflow-y:auto;
    padding:30px 24px 60px;
    background:var(--cream);
    border-top:1px solid var(--rule);
    box-shadow:0 15px 25px rgba(37,18,12,.12);
  }
  .mobile-menu a {
    display:block;
    font-family:var(--display);
    font-size:31px;
    padding-block:14px;
    border-bottom:1px solid var(--rule);
  }
  .mobile-menu a:last-child {
    margin-top:20px;
    font-family:var(--service);
    font-size:13px;
  }
  .hero-copy {
    top:112px;
  }
  .hero-copy>* {
    max-width:390px;
  }
  .hero h1 {
    font-size:50px;
    margin-bottom:13px;
  }
  .hero .hero-description {
    max-width:340px;
    font-size:13px;
  }
  .hero .eyebrow {
    font-size:9px;
    margin-bottom:12px;
  }
  .hero-link {
    margin-top:8px;
  }
  .hero-categories {
    display:none;
  }
  .moods {
    padding-block:46px;
  }
  .moods-layout {
    grid-template-columns:1fr;
    gap:28px;
  }
  .moods h2 {
    font-size:50px;
  }
  .title-prelude {
    font-size:12px;
    margin-bottom:5px;
  }
  .section-intro p {
    max-width:310px;
    font-size:13px;
    margin-top:12px;
  }
  .mood-grid {
    gap:20px;
  }
  .mood-card {
    min-height:200px;
    gap:12px;
  }
  .mood-card img {
    width:65px;
    height:65px;
  }
  .spotlight-layout {
    padding-block:46px;
  }
  .spotlight-layout {
    grid-template-columns:52% 1fr;
    gap:22px;
  }
  .featured-image {
    margin-left:-16%;
  }
  .cake-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .cake-notes {
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:14px 0 0;
    gap:20px;
  }
  .cake-notes a {
    grid-template-columns:1fr;
    gap:12px;
    padding:12px 0 20px;
  }
  .note-title { font-size:clamp(23px,3.7vw,30px); }
  .note-label { font-size:8px; letter-spacing:.1em; }
  .decorative-name {
    bottom:-15px;
  }
  .journey {
    padding-block:48px;
  }
  .journey-layout {
    grid-template-columns:1fr;
    gap:28px;
  }
  .journey h2 {
    font-size:38px;
  }
  .celebrations {
    padding-block:48px;
  }
  .celebrations-layout {
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .celebrations h2 {
    font-size:36px;
  }
  .occasion-image {
    max-width:245px;
  }
  .occasion-notes {
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding-left:0;
    gap:15px;
  }
  .occasion-notes li {
    grid-template-columns:1fr;
    gap:10px;
  }
  .little-moments {
    padding-block:42px;
  }
  .little-layout {
    grid-template-columns:1fr;
    gap:25px;
  }
  .little-layout h2 {
    font-size:31px;
  }
  .little-grid article {
    flex-direction:column;
    align-items:start;
    gap:12px;
  }
  .little-grid img {
    width:60px;
    height:60px;
  }
  .contact {
    padding-top:43px;
  }
  .contact h2 {
    font-size:44px;
  }
  .contact-invitation {
    padding-bottom:35px;
  }
  .site-footer {
    grid-template-columns:100px 1fr;
    gap:24px;
    padding-block:24px;
  }
  .footer-brand {
    width:100px;
  }
  .footer-right {
    grid-column:1/-1;
    text-align:left;
  }
  .footer-right nav {
    justify-content:flex-start;
    gap:5px 24px;
  }
  .footer-right nav a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}
@media(max-width:600px) {
  .hero {
    height:730px;
  }
  .hero::before {
    background-size:auto 410px;
  }
  .hero h1 {
    font-size:clamp(38px,11.3vw,46px);
  }
  .hero-copy>* {
    max-width:342px;
  }
  .hero .hero-description {
    max-width:305px;
  }
  .mood-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .mood-card {
    min-height:204px;
  }
  .spotlight-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:22px;
  }
  .featured-image {
    margin:-15px -24px -12px;
  }
  .featured-image img {
    max-height:340px;
  }
  .cake-copy h2 {
    font-size:42px;
  }
  .cake-copy>p:not(.eyebrow) {
    max-width:100%;
  }
  .cake-copy .pill-link {
    margin-top:20px;
  }
  .cake-notes {
    margin-top:7px;
    gap:15px;
  }
  .cake-notes li {
    display:block;
    line-height:1.5;
    font-size:10px;
  }
  .note-number {
    display:flex;
    margin-bottom:9px;
  }
  .decorative-name {
    display:none;
  }
  .journey-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 20px;
  }
  .journey-caption {
    margin-top:13px;
    padding-left:25px;
  }
  .journey-caption p {
    font-size:11px;
  }
  .celebrations-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:30px;
  }
  .celebrations h2 {
    font-size:39px;
  }
  .occasion-image {
    align-self:center;
    width:235px;
  }
  .occasion-notes {
    display:grid;
    gap:0;
    grid-template-columns:1fr;
  }
  .occasion-notes li {
    grid-template-columns:18px minmax(0,1fr);
    gap:16px;
    padding:20px 0;
  }
  .occasion-notes .note-title { font-size:30px; }
  .little-grid {
    grid-template-columns:1fr;
    gap:22px;
  }
  .little-grid article {
    flex-direction:row;
    align-items:center;
    gap:20px;
  }
  .little-grid p {
    font-size:12px;
  }
  .little-grid h3 {
    font-size:13px;
  }
  .contact h2 {
    font-size:38px;
  }
  .contact-invitation>p:not(.eyebrow) {
    max-width:260px;
    margin:15px auto 0;
    font-size:12px;
  }
  .contact-invitation .pill-link {
    margin-top:22px;
  }
  .site-footer {
    gap:20px;
  }
  address {
    font-size:10px;
  }
  .footer-right p {
    max-width:300px;
    line-height:1.9;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}

/* S2: ritmo desktop misurato sulla reference; altezza effettiva da ricatturare. */
@media(min-width:901px) {
  .pill-link { min-height:34px; padding:9px 19px; font-size:9.5px; }
  .celebrations-copy .eyebrow { margin-bottom:6px; font-size:9px; }
}
/* S2: prodotto intero sul telefono, senza stiramento della foto. */
@media(max-width:900px) {
  .hero { height:710px; }
  .hero::before { background:#ecd5bc; border-bottom-left-radius:30% 4%; }
  .hero-scene::after {
    inset:0;
    --hero-scene-height:min(400px,87.5vw);
    background-size:auto var(--hero-scene-height);
    background-position:75% bottom;
    border-bottom-left-radius:30% 4%;
    -webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - var(--hero-scene-height)),#000 calc(100% - var(--hero-scene-height) + 28px));
    mask-image:linear-gradient(to bottom,transparent calc(100% - var(--hero-scene-height)),#000 calc(100% - var(--hero-scene-height) + 28px));
  }
  .hero-copy { top:112px; }
  .hero-copy>* { max-width:390px; }
  .hero h1 { font-size:clamp(31px,9.8vw,50px); letter-spacing:-.045em; }
  .hero .hero-description { max-width:340px; }
  .mobile-menu { z-index:10; }
  .menu-toggle { position:relative; z-index:11; }
  .featured-image { margin-left:0; }
  .featured-image img { max-height:none; }
  .mood-card { min-height:200px; }
  .occasion-image { width:min(100%,245px); }
  .celebrations-copy>p:not(.eyebrow) { font-size:12px; margin-top:12px; }
  .celebrations-copy .pill-link { margin-top:17px; }
  .little-layout { grid-template-columns:1fr; }
  .footer-brand { width:100px; }
  .site-footer { grid-template-columns:100px 1fr; padding-block:24px; }
  address { font-size:13px; line-height:1.7; }
  address a { display:inline-flex; align-items:center; min-height:44px; }
}
@media(max-width:600px) {
  .hero { height:710px; }
  .hero .hero-description { max-width:305px; }
  .featured-image { margin:0; }
  .featured-image img { width:100%; height:auto; max-height:none; }
  .occasion-image { width:235px; }
  .site-footer { grid-template-columns:86px minmax(0,1fr); gap:16px; }
  .footer-brand { width:86px; }
  .footer-right { font-size:12px; }
  .footer-right nav { gap:4px 20px; }
}

/* S4 · Colazione editoriale scelta da Andrea. Solo footer, senza gli 80px di contesto. */
.contact-editorial {
  --footer-unit:clamp(.7px,.0694444444vw,1px);
  color:#25120c;
  background:#f1e5d9;
  border-top:1px solid #d8c8b8;
  font-family:var(--service);
  font-size:clamp(13px,1.041666667vw,15px);
  line-height:23px;
}
.contact-editorial-inner {
  position:relative;
  width:86.111111111%;
  max-width:1518px;
  min-height:calc(570 * var(--footer-unit));
  margin-inline:auto;
}
.contact-editorial-photo {
  position:absolute;
  left:0;
  top:calc(50 * var(--footer-unit));
  width:calc(420 * var(--footer-unit));
  aspect-ratio:1;
  box-sizing:border-box;
  padding:calc(14 * var(--footer-unit));
  border:1px solid #ddccb4;
  border-radius:2px;
  background:linear-gradient(135deg,#f8efdc,#ede1c9 48%,#e1d3b7);
  box-shadow:-5px -5px 14px #fff8e980,8px 10px 20px #78654a40,inset 1px 1px 1px #fff9e6cc,inset -1px -1px 2px #b4a18566;
}
.contact-editorial-photo::after {
  content:'';
  position:absolute;
  inset:calc(14 * var(--footer-unit));
  border:1px solid #9c8a6c80;
  box-shadow:inset 2px 3px 6px #38271959,inset -1px -1px 2px #fff1ce80;
  pointer-events:none;
}
.contact-editorial-photo img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
}
.contact-editorial-logo {
  position:absolute;
  left:calc(520 * var(--footer-unit));
  top:calc(46 * var(--footer-unit));
  width:calc(112 * var(--footer-unit));
  background:#f1e5d9;
}
.contact-editorial-logo img {
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}
.contact-editorial-label,
.contact-editorial-title,
.contact-editorial-copy,
.contact-editorial-cta,
.contact-editorial-address {
  position:absolute;
  left:calc(520 * var(--footer-unit));
}
.contact-editorial-label {
  top:calc(141 * var(--footer-unit));
  font-size:clamp(10px,.763888889vw,11px);
  line-height:17px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.contact-editorial-title {
  top:calc(169 * var(--footer-unit));
  right:0;
  font-family:var(--display);
  font-size:calc(58 * var(--footer-unit));
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:none;
  text-wrap:initial;
}
.contact-editorial-copy {
  top:calc(300 * var(--footer-unit));
  right:0;
  line-height:23px;
  text-wrap:initial;
}
.contact-editorial-cta {
  top:calc(345 * var(--footer-unit));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding-inline:26px;
  border-radius:24px;
  background:#25120c;
  color:#f8efe5;
  font-size:13px;
  line-height:20px;
}
.contact-editorial-cta:focus-visible {
  outline:2px solid #25120c;
  outline-offset:5px;
}
.contact-editorial-address {
  top:calc(422 * var(--footer-unit));
  right:0;
  display:block;
  font-size:inherit;
  font-style:normal;
  line-height:23px;
}
.contact-editorial-rule {
  position:absolute;
  left:0;
  right:0;
  top:calc(510 * var(--footer-unit));
  border-top:1px solid #d8c8b8;
}
.contact-editorial-links {
  position:absolute;
  top:calc(535 * var(--footer-unit));
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
  line-height:23px;
}
.contact-editorial-links a { text-decoration:underline; }
@media(max-width:900px) {
  .contact-editorial { font-size:15px; }
  .contact-editorial-inner {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:calc(100% - 48px);
    min-height:0;
    padding-block:36px 24px;
  }
  .contact-editorial-inner > * {
    position:static;
  }
  .contact-editorial-logo {
    order:1;
    width:112px;
  }
  .contact-editorial-photo {
    position:relative;
    inset:auto;
    order:2;
    width:min(100%,420px);
    flex-shrink:0;
    margin-top:24px;
  }
  .contact-editorial-label {
    order:3;
    margin-top:26px;
    font-size:11px;
  }
  .contact-editorial-title {
    order:4;
    margin-top:10px;
    font-size:clamp(36px,10.77vw,48px);
  }
  .contact-editorial-copy {
    order:5;
    max-width:490px;
    margin-top:14px;
  }
  .contact-editorial-cta {
    order:6;
    flex-shrink:0;
    margin-top:22px;
  }
  .contact-editorial-address {
    order:7;
    margin-top:26px;
  }
  .contact-editorial-address a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .contact-editorial-rule {
    order:8;
    width:100%;
    margin-top:28px;
  }
  .contact-editorial-links {
    order:9;
    width:100%;
    margin-top:8px;
    font-size:13px;
  }
  .contact-editorial-links a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

/* S5 · Atelier dei momenti: real photographs in a spatial, interactive gallery. */
.moods {
  position:relative;
  isolation:isolate;
  padding-block:64px 48px;
  overflow:clip;
}
.moods-layout { grid-template-columns:27% minmax(0,1fr); gap:3%; }
.moods .section-intro { align-self:center; padding-bottom:60px; }
.moods h2 { font-size:clamp(44px,4.7vw,76px); line-height:.99; }
.moods .title-prelude { font-size:10px; letter-spacing:.2em; margin-bottom:19px; }
.moods .section-intro p { max-width:220px; line-height:1.8; color:#cbb8a7; }
.moment-experience { min-width:0; }
.mood-gallery-frame { padding-block:24px 34px; }
.is-spatial .mood-gallery-frame { perspective:1200px; perspective-origin:50% 45%; }
.is-spatial .mood-gallery {
  position:relative;
  display:block;
  height:454px;
  transform-style:preserve-3d;
  transform:rotateX(var(--gallery-tilt-x,0deg)) rotateY(var(--gallery-tilt-y,0deg));
  transition:transform 800ms cubic-bezier(.16,1,.3,1);
  touch-action:pan-y;
  cursor:grab;
}
.is-spatial .mood-card {
  position:absolute;
  top:50%; left:50%;
  width:clamp(242px,22vw,304px);
  height:432px;
  min-height:0;
  padding:12px 12px 22px;
  border-radius:150px 150px 24px 24px;
  border:1px solid #b99f84;
  background:#eee3d5;
  color:#2d1b15;
  gap:13px;
  justify-content:flex-start;
  box-shadow:0 28px 40px -22px #0009;
  transform:translate(-50%,-50%) translate3d(var(--card-x,0px),var(--card-y,0px),var(--card-z,0px)) rotateY(var(--card-turn,0deg)) rotateZ(var(--card-roll,0deg)) scale(var(--card-scale,1));
  opacity:var(--card-opacity,1);
  transition:transform 1150ms cubic-bezier(.16,1,.3,1),opacity 900ms ease,border-radius 1100ms cubic-bezier(.16,1,.3,1),box-shadow 700ms ease;
  backface-visibility:hidden;
  user-select:none;
}
.is-spatial .mood-card img {
  width:100%; height:285px;
  flex-shrink:0;
  border-radius:138px 138px 13px 13px;
  object-fit:cover;
  pointer-events:none;
  transition:border-radius 1100ms cubic-bezier(.16,1,.3,1),filter 650ms ease;
}
.is-spatial .mood-card > span:not(.card-link) {
  font-family:var(--display);
  font-size:25px;
  line-height:.98;
  text-transform:none;
  letter-spacing:-.02em;
}
.is-spatial .mood-card .card-link { margin-top:auto; font-size:9px; text-transform:uppercase; letter-spacing:.15em; }
.is-spatial .mood-card.is-current { border-radius:118px 118px 30px 30px; border-color:#e8d4b7; }
.is-spatial .mood-card.is-current img { border-radius:108px 108px 16px 16px; }
.is-spatial .mood-card:focus-visible { outline:2px solid #f8efe5; outline-offset:7px; }
.is-spatial .mood-gallery.is-dragging { cursor:grabbing; }
.is-spatial .is-dragging .mood-card { transition:opacity 160ms ease,border-radius 800ms ease; }
.moment-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #ffffff26; padding-top:17px; }
.moment-controls button,.moment-selectors button { color:inherit; background:transparent; border:0; }
.moment-controls button { min-height:44px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; padding:8px 0; }
.moment-status { display:flex; align-items:baseline; gap:7px; }
.moment-count { font-family:var(--display); font-size:34px; line-height:1; }
.moment-total { color:#cbb8a7; font-size:10px; }
.moment-name { margin-left:11px; font-size:11px; }
.moment-selectors { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 25px; padding-top:20px; }
.moment-selectors button { border-bottom:1px solid transparent; padding:8px 0; font-size:10px; letter-spacing:.04em; color:#cbb8a7; }
.moment-selectors button[aria-pressed="true"] { color:#f8efe5; border-color:#dec09a; }
@media(max-width:900px) {
  .moods { padding-block:48px 38px; }
  .moods-layout { display:block; }
  .moods .section-intro { padding:0 0 15px; }
  .moods h2 { font-size:58px; }
  .moods .section-intro p { max-width:340px; margin-top:16px; }
  .mood-gallery-frame { margin-inline:-24px; padding-block:16px 22px; }
  .is-spatial .mood-gallery { height:430px; }
  .is-spatial .mood-card { width:252px; height:410px; }
  .is-spatial .mood-card img { height:265px; }
  .moment-controls { gap:12px; }
}
@media(max-width:480px) {
  .moods h2 { font-size:54px; }
  .is-spatial .mood-card { width:236px; height:398px; }
  .is-spatial .mood-card img { height:254px; }
  .moment-name { margin-left:2px; font-size:10px; }
  .moment-controls button { font-size:9px; }
  .moment-selectors { gap:10px 17px; }
}
/* Respiro: small gestures everywhere, with native scroll-linked depth. */
@media(prefers-reduced-motion:no-preference) {
  .hero-scene::after { animation:scene-arrival 2000ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes scene-arrival { from { opacity:.55; scale:1.035; } to { opacity:1; scale:1; } }
  .main-nav a,.header-call,.hero-link { transition:text-underline-offset 550ms ease,color 400ms ease,translate 650ms cubic-bezier(.16,1,.3,1); }
  .main-nav a:hover { text-underline-offset:9px; }
  .pill-link,.contact-editorial-cta { transition:translate 700ms cubic-bezier(.16,1,.3,1),background 550ms ease,color 550ms ease,box-shadow 700ms ease; }
  .journey-frame,.journey-frame::after { transition:box-shadow 600ms cubic-bezier(.16,1,.3,1); }
  .occasion-image { transition:translate 1000ms cubic-bezier(.16,1,.3,1),filter 750ms ease; }
  .contact-editorial-photo img { transition:filter 1000ms ease; }
  .mobile-menu:not([hidden]) { animation:menu-arrival 500ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes menu-arrival { from { opacity:0; translate:0 -10px; } to { opacity:1; translate:0 0; } }
  @media(hover:hover) and (pointer:fine) {
    .pill-link:hover,.contact-editorial-cta:hover { translate:0 -3px; box-shadow:0 12px 23px -14px #25120c80; }
    .hero-link:hover { translate:3px 0; }
    .journey-item:hover .journey-frame { box-shadow:-3px -3px 8px #4b322680,4px 4px 9px #100704b3,inset 1px 1px 3px #0c050370,inset -1px -1px 2px #5b3c2d33; }
    .journey-item:hover .journey-frame::after { box-shadow:inset 3px 3px 6px #0d05038c,inset -1px -1px 2px #6b4c3426; }
    .occasion-image:hover { translate:0 -6px; filter:saturate(1.05); }
    .contact-editorial-photo:hover img { filter:saturate(1.06); }
    .is-spatial .mood-card.is-current:hover { border-radius:76px 76px 35px 35px; box-shadow:0 40px 52px -25px #000b; }
    .is-spatial .mood-card.is-current:hover img { border-radius:65px 65px 18px 18px; }
  }
  @supports(animation-timeline:view()) {
    @media(min-width:901px) {
      .hero-scene::after { animation:scene-depth linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
      @keyframes scene-depth { from { transform:translateY(0) scale(1); } to { transform:translateY(50px) scale(1.04); } }
      .is-spatial .mood-gallery { animation:gallery-passage linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
      @keyframes gallery-passage { from { rotate:y -7deg; } to { rotate:y 7deg; } }
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  .is-spatial .mood-gallery { transform:none; }
  .is-spatial .mood-card { transition:none; }
}

/* S7 · Cristallo champagne, selected preview 01. */
.site-header {
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 64px);
  max-width:1518px;
  height:82px;
  padding-inline:30px;
  grid-template-columns:130px minmax(0,1fr) 116px;
  gap:18px;
  color:#352219;
  background:linear-gradient(120deg,#fff9ee6b,#fff9ee1c 48%,#fff9ee45);
  border:1px solid #fff9eea6;
  border-radius:20px;
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 12px 35px -18px #4d322d45,inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #ffffff30;
  z-index:20;
}
.site-header .brand { width:99px; mix-blend-mode:normal; }
.site-header .brand img { filter:brightness(.2); mix-blend-mode:normal; }
.main-nav { justify-content:center; gap:clamp(20px,2.7vw,40px); }
.main-nav a,.header-call { font-size:12px; text-transform:none; letter-spacing:0; }
.main-nav a { position:relative; padding-block:14px; }
.main-nav a:hover,.main-nav a:first-child { text-decoration:none; }
.main-nav a::before {
  content:'';
  position:absolute;
  left:0; right:0; bottom:8px;
  border-bottom:1px solid currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 550ms cubic-bezier(.16,1,.3,1);
}
.main-nav a:hover::before,.main-nav a:focus-visible::before { transform:scaleX(1); }
.main-nav a:first-child { display:inline-flex; align-items:center; gap:8px; }
.main-nav a:first-child::after { content:none; }
.header-call {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  min-width:112px;
  padding:10px 19px;
  border:1px solid #ffffffc9;
  border-radius:100px;
  color:#352219;
  background:#faf4e9b3;
  font-size:11px;
  box-shadow:inset 0 1px 0 #fff,0 5px 14px -9px #3a241e50;
  transition:background 500ms ease,translate 650ms cubic-bezier(.16,1,.3,1);
}
.header-call:hover { text-decoration:none; background:#fffaf2; translate:0 -2px; }
@media(max-width:900px) {
  .site-header {
    top:12px;
    width:calc(100% - 28px);
    height:72px;
    padding-inline:16px;
    grid-template-columns:1fr auto auto;
    gap:8px;
    border-radius:18px;
  }
  .site-header .brand { width:82px; }
  .main-nav { display:none; }
  .js-enhanced .site-header .header-call {
    display:inline-flex;
    grid-column:3;
    grid-row:1;
    min-width:80px;
    min-height:40px;
    padding:9px 13px;
    font-size:10px;
  }
  .menu-toggle:not([hidden]) {
    min-height:42px;
    min-width:60px;
    padding-inline:11px;
    color:#352219;
    background:#faf4e9b3;
    border:1px solid #ffffffc9;
    box-shadow:inset 0 1px 0 #fff,0 5px 14px -9px #3a241e50;
    border-radius:100px;
    text-transform:none;
    letter-spacing:.02em;
  }
  .mobile-menu {
    top:calc(100% + 10px);
    left:0; right:0;
    height:auto;
    max-height:calc(100dvh - 120px);
    padding:18px 24px 28px;
    color:var(--ink);
    background:rgba(255,249,239,.94);
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    border:1px solid #ffffffa6;
    border-radius:20px;
    box-shadow:0 20px 45px -16px #25120c50;
  }
  .mobile-menu a { font-size:29px; }
}

/* Full-bleed gallery masks. The original files remain untouched. */
.is-spatial .mood-card { overflow:hidden; padding:0 0 22px; }
.is-spatial .mood-photo { display:block; width:100%; height:285px; flex-shrink:0; overflow:hidden; }
.is-spatial .mood-card .mood-photo img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0!important;
  transform:scale(var(--photo-zoom,1.06));
  transform-origin:50% 50%;
}
.is-spatial .mood-card:nth-child(2) { --photo-zoom:1.025; }
.is-spatial .mood-card:nth-child(3) { --photo-zoom:1.025; }
.is-spatial .mood-card:nth-child(4) { --photo-zoom:1.025; }
.is-spatial .mood-card > span:not(.card-link):not(.mood-photo) { max-width:90%; }
@media(max-width:900px) { .is-spatial .mood-photo { height:265px; } }
@media(max-width:480px) { .is-spatial .mood-photo { height:254px; } }

/* The signature travels right to left with the section's scroll progress. */
.decorative-name { right:5%; white-space:nowrap; }
@media(prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    .spotlight { view-timeline-name:--guadagnino-signature; view-timeline-axis:block; }
    .decorative-name {
      animation:signature-crossing linear both;
      animation-timeline:--guadagnino-signature;
      animation-range:cover 0% cover 100%;
    }
    @keyframes signature-crossing { from { transform:translateX(110vw); } to { transform:translateX(-110vw); } }
  }
}
@media(max-width:650px) {
  .decorative-name { display:block; font-size:115px; bottom:-16px; }
}

/* S8: the photograph moves inside one stationary curved mask. */
.hero-scene { position:absolute; inset:0; overflow:clip; border-bottom-left-radius:30% 10%; z-index:-1; pointer-events:none; }
.hero-scene::after { border-bottom-left-radius:0; z-index:0; }
@media(max-width:900px) { .hero-scene { border-bottom-left-radius:30% 4%; } }

/* S11 · Cinque torte, una vetrina: scena originale e fotografie autentiche. */
.cake-stage { aspect-ratio:960/780; touch-action:pan-y; }
.cake-stage::before { transition:opacity 900ms ease; }
.cake-stage.has-photo::before { opacity:0; }
.cake-slide {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateX(28px) scale(.975);
  transition:opacity 850ms ease,transform 1100ms cubic-bezier(.16,1,.3,1),visibility 1100ms;
  pointer-events:none;
}
.cake-slide.is-active { opacity:1; visibility:visible; transform:none; }
.cake-slide:first-child img { width:100%; height:100%; }
.spotlight .cake-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:410px; }
.cake-copy #cakes-title { font-size:clamp(32px,3.15vw,49px); }
.cake-navigation { margin-top:24px; }
.cake-controls { display:flex; align-items:center; gap:15px; }
.cake-controls button {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(112,79,52,.3);
  border-radius:50%;
  background:rgba(255,248,237,.28);
  color:var(--ink);
  transition:background 300ms,border-color 300ms;
}
.cake-prev::before,.cake-next::before {
  content:'';
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}
.cake-prev::before { transform:translateX(2px) rotate(-135deg); }
.cake-next::before { transform:translateX(-2px) rotate(45deg); }
.cake-pagination { display:flex; align-items:center; gap:10px; color:#705747; font:13px var(--display); }
.cake-index { color:var(--ink); }
.cake-count-rule { width:30px; height:1px; background:rgba(112,79,52,.3); }
.cake-controls .cake-autoplay { margin-left:5px; width:30px; height:30px; border-color:transparent; background:transparent; }
.cake-autoplay span { width:7px; height:9px; border-inline:2px solid currentColor; }
.cake-autoplay[aria-pressed="true"] span { width:0; height:0; border:5px solid transparent; border-right:0; border-left:7px solid currentColor; }
.cake-picker { display:flex; gap:9px; margin-top:18px; }
.cake-picker button {
  position:relative;
  width:46px;
  height:51px;
  padding:0;
  border:0;
  border-radius:12px 12px 4px 4px;
  background:var(--cream-deep);
  opacity:.55;
  transition:opacity 450ms,translate 450ms;
}
.cake-picker img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.cake-picker button::after { content:''; position:absolute; inset:-4px; border:1px solid transparent; border-radius:15px 15px 6px 6px; transition:border-color 450ms; }
.cake-picker button[aria-pressed="true"] { opacity:1; }
.cake-picker button[aria-pressed="true"]::after { border-color:#967457; }
@media(hover:hover) {
  .cake-controls button:hover { background:rgba(255,248,237,.7); border-color:#967457; }
  .cake-picker button:hover { opacity:1; translate:0 -3px; }
}
@media(max-width:900px) {
  .spotlight:has(.cake-stage) .spotlight-layout { padding-block:36px; }
  .cake-navigation { margin-top:20px; }
  .cake-picker { gap:8px; }
  .cake-picker button { width:40px; height:46px; }
  .cake-controls { gap:10px; }
}
@media(max-width:600px) {
  .cake-stage { margin:-15px -24px 0; aspect-ratio:1.15; }
  .cake-stage .cake-slide img { max-height:none; }
  .cake-stage .cake-slide:first-child img { object-fit:cover; }
  .cake-copy #cakes-title { font-size:40px; min-height:0; }
  .cake-copy .cake-description { min-height:0; }
  .spotlight .cake-copy { min-height:380px; }
  .cake-picker button { width:46px; height:51px; }
  .cake-controls button { width:42px; height:42px; }
  .cake-navigation { margin-top:23px; }
  .cake-notes { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .cake-stage::before,.cake-slide,.cake-picker button,.cake-picker button::after { transition:none; }
  .cake-slide { transform:none; }
  .cake-picker button:hover { translate:none; }
}

/* S21/S22: fondale e contenuti condividono la stessa cella; il padding appartiene ai contenuti. */
.spotlight .cake-environments {
  position:relative;
  inset:auto;
  margin:0;
  padding:0;
  border:0;
  translate:none;
  transform:none;
  grid-area:1 / 1;
  align-self:stretch;
  min-width:0;
  min-height:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}
.spotlight .cake-environment {
  position:absolute;
  left:0;
  top:0;
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 56%,transparent 80%);
  mask-image:linear-gradient(to right,#000 0%,#000 56%,transparent 80%);
  transition:opacity 850ms ease,visibility 850ms;
}
.spotlight .cake-environment.is-active { opacity:1; visibility:visible; }
.spotlight .cake-stage::before { content:none; }
.spotlight .cake-stage { overflow:visible; }
.spotlight .cake-slide {
  isolation:isolate;
  transform:none;
  transition:opacity 850ms ease,visibility 850ms;
}
.spotlight .cake-focus-frame {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  aspect-ratio:960 / 887;
  isolation:isolate;
}
.spotlight .cake-slide .cake-focus-image {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
  -webkit-mask-image:none;
  mask-image:none;
  opacity:0;
}
.spotlight .cake-copy #cakes-title { min-height:2.04em; }
.spotlight .cake-copy .cake-description { min-height:4.65em; }
.spotlight .cake-copy,.spotlight .cake-notes { position:relative; z-index:1; }
@media(max-width:600px) {
  .spotlight .cake-environments { display:none; }
  .spotlight .cake-stage { aspect-ratio:960 / 887; }
  .spotlight .cake-slide .cake-focus-image { opacity:1; }
}
@media(max-width:360px) {
  .spotlight .cake-copy #cakes-title { min-height:3.06em; }
}
@media(prefers-reduced-motion:reduce) {
  .spotlight .cake-slide,.spotlight .cake-environment { transition:none; }
}

/* S23 · Nastro di atelier: scena raster continua, fascia e contenuti HTML. */
.occasion-atelier {
  --atelier-unit:calc(100vw / 1586);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#ecdbca;
  padding-bottom:calc(182 * var(--atelier-unit));
}
.occasion-atelier .atelier-art {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.occasion-atelier .atelier-art img {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}
.occasion-atelier .atelier-foreground {
  position:absolute;
  z-index:3;
  left:59.8991%;
  top:49.3952%;
  width:20.8071%;
  height:auto;
  max-width:none;
  pointer-events:none;
  filter:drop-shadow(3px 5px 6px #30231933);
}
.occasion-atelier .celebrations {
  position:static;
  display:block;
  min-height:calc(577 * var(--atelier-unit));
  padding:0;
  background:transparent;
}
.occasion-atelier .celebrations-layout {
  position:relative;
  z-index:1;
  display:block;
}
.occasion-atelier .celebrations-copy {
  width:calc(720 * var(--atelier-unit));
  max-width:58%;
  padding-top:calc(110 * var(--atelier-unit));
}
.occasion-atelier .celebrations-copy .eyebrow {
  margin:0 0 calc(18 * var(--atelier-unit));
  font-size:calc(16 * var(--atelier-unit));
  line-height:1.5;
  letter-spacing:.22em;
}
.occasion-atelier .celebrations h2 {
  font-size:calc(72 * var(--atelier-unit));
  white-space:nowrap;
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:initial;
}
.occasion-atelier .celebrations-copy>p:not(.eyebrow) {
  max-width:none;
  margin-top:calc(28 * var(--atelier-unit));
  font-size:calc(18 * var(--atelier-unit));
  line-height:1.55;
}
.occasion-atelier .celebrations-copy .pill-link {
  min-height:calc(64 * var(--atelier-unit));
  margin-top:calc(30 * var(--atelier-unit));
  padding:calc(18 * var(--atelier-unit)) calc(36 * var(--atelier-unit));
  font-size:calc(18 * var(--atelier-unit));
  letter-spacing:.02em;
}
.occasion-atelier .occasion-notes {
  display:flex;
  gap:0;
  padding:0;
  margin-top:calc(38 * var(--atelier-unit));
}
.occasion-atelier .occasion-notes li {
  display:block;
  padding:0 calc(32 * var(--atelier-unit));
  border-left:1px solid #70574780;
}
.occasion-atelier .occasion-notes li:first-child { padding-left:0; border-left:0; }
.occasion-atelier .occasion-notes li::after { content:none; animation:none; }
.occasion-atelier .occasion-notes .note-title {
  font-size:calc(30 * var(--atelier-unit));
  line-height:1.15;
  white-space:nowrap;
}
.occasion-atelier .little-moments {
  position:relative;
  z-index:2;
  min-height:calc(233 * var(--atelier-unit));
  padding-block:calc(28 * var(--atelier-unit));
  background:#f7eee5;
  border-top:1px solid #fff9ed;
  box-shadow:0 calc(9 * var(--atelier-unit)) calc(20 * var(--atelier-unit)) #39221135;
}
.occasion-atelier .little-layout {
  width:88.7%;
  max-width:none;
  grid-template-columns:22% minmax(0,1fr);
  gap:3%;
}
.occasion-atelier .little-layout h2 { font-size:calc(58 * var(--atelier-unit)); line-height:1.04; }
.occasion-atelier .little-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,calc((100% - 40 * var(--atelier-unit)) / 3 + 35px)); gap:calc(20 * var(--atelier-unit)); }
.occasion-atelier .little-grid article {
  min-width:0;
  flex-direction:row;
  align-items:center;
  gap:calc(24 * var(--atelier-unit));
  padding-left:calc(30 * var(--atelier-unit));
  border-left:1px solid #d9bfa680;
}
.occasion-atelier .little-grid article:first-child { border-left:0; padding-left:0; }
.occasion-atelier .little-grid img { width:calc(104 * var(--atelier-unit)); height:calc(104 * var(--atelier-unit)); }
.occasion-atelier .little-grid h3 { font-weight:600; font-size:calc(20 * var(--atelier-unit)); margin-bottom:calc(8 * var(--atelier-unit)); }
.occasion-atelier .little-grid p { font-size:calc(18 * var(--atelier-unit)); line-height:1.55; }
@media(max-width:900px) {
  .occasion-atelier {
    --atelier-art-width:max(100vw,min(720px,165vw));
    --atelier-art-unit:calc(var(--atelier-art-width) / 1586);
    padding-bottom:0;
  }
  .occasion-atelier .celebrations { position:relative; min-height:0; padding-bottom:calc(577 * var(--atelier-art-unit)); }
  .occasion-atelier .atelier-art { top:auto; bottom:0; height:calc(577 * var(--atelier-art-unit)); }
  .occasion-atelier .atelier-art img {
    position:absolute; right:0; width:var(--atelier-art-width);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px);
    mask-image:linear-gradient(to bottom,transparent,#000 24px);
  }
  .occasion-atelier .atelier-foreground {
    left:auto;
    right:calc(306 * var(--atelier-art-unit));
    top:auto;
    bottom:calc(-93 * var(--atelier-art-unit));
    width:calc(330 * var(--atelier-art-unit));
    filter:drop-shadow(2px 3px 4px #30231933);
  }
  .occasion-atelier .celebrations-copy { width:100%; max-width:none; padding-block:40px 32px; }
  .occasion-atelier .celebrations-copy .eyebrow { font-size:10px; margin-bottom:15px; }
  .occasion-atelier .celebrations h2 { font-size:clamp(34px,5.8vw,52px); white-space:normal; }
  .occasion-atelier .celebrations-copy>p:not(.eyebrow) { font-size:15px; margin-top:20px; max-width:520px; }
  .occasion-atelier .celebrations-copy .pill-link { min-height:48px; padding:14px 24px; font-size:12px; margin-top:22px; }
  .occasion-atelier .occasion-notes { flex-wrap:wrap; gap:12px 24px; margin-top:26px; }
  .occasion-atelier .occasion-notes li { padding:0; border-left:0; }
  .occasion-atelier .occasion-notes .note-title { font-size:22px; }
  .occasion-atelier .little-moments { min-height:0; padding-block:36px; }
  .occasion-atelier .little-layout { width:86.2%; grid-template-columns:1fr; gap:26px; }
  .occasion-atelier .little-layout h2 { font-size:36px; }
  .occasion-atelier .little-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .occasion-atelier .little-grid article { flex-direction:column; align-items:flex-start; padding:0; border:0; gap:14px; }
  .occasion-atelier .little-grid img { width:72px; height:72px; }
  .occasion-atelier .little-grid h3 { font-size:16px; margin-bottom:6px; }
  .occasion-atelier .little-grid p { font-size:14px; }
  .occasion-atelier::after {
    content:'';
    display:block;
    position:relative;
    height:calc(182 * var(--atelier-art-unit));
    background:url('../public/assets/occasion-atelier/base-scena.webp') right bottom / var(--atelier-art-width) auto no-repeat;
  }
}
@media(max-width:600px) {
  .occasion-atelier .little-grid { grid-template-columns:1fr; gap:20px; }
  .occasion-atelier .little-grid article { flex-direction:row; align-items:center; gap:20px; }
  .occasion-atelier .little-grid article+article { padding-top:20px; border-top:1px solid #d9bfa680; }
}

@media(min-width:901px) and (prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    .occasion-atelier { view-timeline-name:--atelier-passage; view-timeline-axis:block; }
    .occasion-atelier .atelier-art,.occasion-atelier .atelier-foreground {
      animation:atelier-passage linear both;
      animation-timeline:--atelier-passage;
      animation-range:entry 0% exit 100%;
    }
    @keyframes atelier-passage { from { transform:translateY(1.5px); } to { transform:translateY(-1.5px); } }
  }
}