/* ==========================================================================
   Centro San Biagio · page styles on top of scrollcraft.css
   Brand anchors from the logo: navy #0A0669, coral #F94E51.
   The page ground is plaster by day and navy by night; js/csb.js moves the
   ground and the light along with the clock.
   ========================================================================== */

:root {
  --sc-canvas:     #F4F1EC;   /* intonaco, mattina */
  --sc-surface:    #FBFAF7;
  --sc-ink:        #15123F;   /* the logo navy, softened for reading */
  --sc-ink-soft:   #504D6E;
  --sc-accent:     #F94E51;   /* logo coral: graphic and large only */
  --sc-accent-ink: #15123F;
  --corallo-testo: #BF2C38;   /* coral for small text on plaster, 4.9:1 */
  --blu:           #15123F;
  --blu-notte:     #0E0C2E;
  --intonaco:      #F4F1EC;
  --arco:          #17141B;   /* the shadow under the arch, sampled */

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;
  --sc-font-mono:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 245 40% 12%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;

  --barra: 4.75rem;
}

body { background: var(--sc-canvas); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tnum { font-variant-numeric: tabular-nums; }

.salta {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; background: var(--blu); color: var(--intonaco);
  border-radius: var(--sc-r-sm); text-decoration: none;
}
.salta:focus-visible { top: 1rem; }

/* ---------------------------------------------------------------- type --- */
.titolo {
  font-family: var(--sc-font-display);
  font-stretch: 78%;
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.titolo--hero { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5.1rem); }
.titolo--xl   { font-size: var(--sc-t-3xl); }
.titolo--lg   { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.6rem); }
.titolo--md   { font-size: var(--sc-t-xl); }
.titolo--sm   { font-size: var(--sc-t-lg); font-stretch: 85%; letter-spacing: -0.005em; }
.sc-lede { font-weight: 450; }
.sc-body { color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- buttons -- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1.25rem;
  border-radius: var(--sc-r-md);
  border: 1.5px solid currentColor;
  font-weight: 650; font-size: var(--sc-t-sm); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.bottone--pieno {
  background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent);
  box-shadow: var(--sc-e1);
}
.bottone:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
  .bottone--pieno:hover { background: #FF6467; }
}

/* ---------------------------------------------------- live open status --- */
.stato { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-weight: 600; font-size: var(--sc-t-sm); }
.stato__punto { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.stato.is-aperto .stato__punto { background: #3BD27A; opacity: 1; box-shadow: 0 0 0 3px color-mix(in oklab, #3BD27A 30%, transparent); }
.stato.is-chiuso .stato__punto { background: var(--sc-accent); opacity: 1; }

/* ================================================== LUCE: the day's light */
/* One fixed tint over everything. js/csb.js sets --luce-col / --luce-a from the
   clock: cool and clear at 08:30, golden by 17:00, gone at night. */
.luce {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: var(--luce-col, #ffffff);
  opacity: var(--luce-a, 0);
  mix-blend-mode: soft-light;
}

/* ================================================= NAV: the clock ======= */
.orologio {
  position: fixed; top: max(.9rem, env(safe-area-inset-top)); right: var(--sc-gutter);
  z-index: 70;
}
.orologio__btn {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .8rem .45rem .5rem;
  background: var(--blu); color: var(--intonaco);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .08);
  transition: transform 140ms var(--sc-ease-out);
}
.orologio__btn:active { transform: scale(0.97); }
.orologio__quadrante { width: 2.35rem; height: 2.35rem; flex: none; }
.q-cerchio { fill: var(--intonaco); stroke: none; }
.q-tacche line { stroke: var(--blu); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.q-ore, .q-minuti { stroke: var(--blu); stroke-linecap: round; transform-origin: 20px 20px; }
.q-ore { stroke-width: 2.8; }
.q-minuti { stroke: #D9343F; stroke-width: 1.8; }
.q-perno { fill: var(--blu); }
.orologio__testo { display: grid; text-align: left; line-height: 1.1; }
.orologio__ora {
  font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 720;
  font-size: 1.3rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.orologio__luogo { font-size: .75rem; opacity: .78; font-weight: 500; }
.orologio__apri { display: grid; place-items: center; opacity: .75; transition: transform 200ms var(--sc-ease-out); }
.orologio__btn[aria-expanded="true"] .orologio__apri { transform: rotate(180deg); }

/* ?nav=sole: no clock and no made-up time. A little sky with the sun on its
   arc, the room you are in, and whether the Centre is really open right now. */
.orologio__sole, .orologio__stato { display: none; }
.nav-sole .orologio__quadrante, .nav-sole .orologio__ora { display: none; }
.nav-sole .orologio__sole { display: block; width: 2.35rem; height: 2.35rem; flex: none; }
.nav-sole .orologio__luogo {
  font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 720;
  font-size: 1.08rem; opacity: 1; letter-spacing: .01em;
}
.nav-sole .orologio__stato { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: .72rem; font-weight: 500; opacity: .82; white-space: nowrap; }
.orologio__stato .stato__punto { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .5; }
.orologio__stato.is-aperto .stato__punto { background: #3BD27A; opacity: 1; }
.orologio__stato.is-chiuso .stato__punto { background: var(--sc-accent); opacity: 1; }
.s-cielo { fill: #D6E6F7; }
.s-arco { fill: none; stroke: var(--blu); stroke-width: 1; stroke-dasharray: 1.4 2.2; opacity: .35; }
.s-sole { fill: #F6B531; }
.s-luna { fill: #F4F1EC; opacity: 0; }
.s-terra { fill: var(--blu); opacity: .9; }
.orologio__sole.is-notte .s-arco { stroke: #F4F1EC; }
@media (max-width: 380px) {
  .nav-sole .orologio__btn { gap: .5rem; padding-right: .6rem; }
  .nav-sole .orologio__sole { width: 2.1rem; height: 2.1rem; }
  .nav-sole .orologio__luogo { font-size: 1rem; }
  .nav-sole .orologio__stato { font-size: .66rem; }
}

.giornata {
  position: absolute; right: 0; top: calc(100% + .6rem);
  width: min(20rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--sc-surface); color: var(--blu);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3);
  transform-origin: top right;
  animation: apri 200ms var(--sc-ease-out);
}
@keyframes apri { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.giornata__titolo { margin: 0 0 .5rem; font-weight: 700; font-size: var(--sc-t-sm); color: #504D6E; }
.giornata__lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.giornata__lista a {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .45rem .4rem; border-radius: var(--sc-r-sm);
  text-decoration: none; font-weight: 550;
}
.giornata__lista a span { font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 700; color: var(--corallo-testo); min-width: 3rem; }
.giornata__lista a[aria-current="true"] { background: color-mix(in oklab, var(--blu) 8%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .giornata__lista a:hover { background: color-mix(in oklab, var(--blu) 6%, transparent); }
}
.giornata__cta { width: 100%; }

/* ========================================================= 1 · ARRIVO === */
.arrivo__stage { height: 100vh; height: 100svh; overflow: clip; background: var(--arco); color: var(--intonaco); }
.arrivo { --p: var(--sc-p, 0); }

/* The scene box holds the photo at its own 3:4 shape, parked on the right.
   Planes, back to front: the courtyard (seen only through the real arch
   opening, so nothing invented is ever shown), the headline, the arch.
   The arch grows far faster than the courtyard: you walk through it, and its
   pillar sweeps across the headline on the way. */
.arrivo__scena {
  position: absolute; top: 0; bottom: 0; right: 3vw;
  height: 100%; aspect-ratio: 3 / 4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
.arrivo__scena--davanti { z-index: 4; pointer-events: none; }
.arrivo__piano {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform-origin: 55% 58%; will-change: transform;
}
.arrivo__piano--fondo {
  /* arco-cortile.webp already carries the arch-shaped transparency (no CSS
     mask: Safari and slow connections handled masks unreliably) */
  transform: scale(calc(1 + var(--p) * 0.16));
}
.arrivo__piano--arco {
  transform: scale(calc(1 + var(--p) * var(--p) * 3.4));
  opacity: clamp(0, calc((0.86 - var(--p)) * 3.5), 1);
}
.arrivo__scrim { display: none; }
.arrivo__marchio {
  position: absolute; z-index: 6;
  top: max(1rem, env(safe-area-inset-top)); left: var(--sc-gutter);
  width: clamp(7.5rem, 10vw, 10rem);
}
.arrivo__marchio img { width: 100%; height: auto; }
.arrivo__copia {
  position: absolute; z-index: 3;
  left: var(--sc-gutter); bottom: clamp(3rem, 13vh, 8rem);
  width: min(36rem, 41vw);
}
.arrivo__copia .titolo { color: var(--intonaco); }
.arrivo__sotto { margin: 1.3rem 0 0; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; color: #D9D4E4; }
.arrivo__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.arrivo__luce {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: var(--intonaco);
  opacity: clamp(0, calc((var(--p) - 0.55) * 4), 1);
}

@media (max-width: 860px) {
  /* Phone art direction: the whole arch, parked at the bottom; copy on the
     shadow above it. Cropping the 3:4 photo to a phone would cut the pillars. */
  .arrivo__scena { top: auto; bottom: min(0px, calc(100svh - 21rem - 133.33vw)); right: 0; left: 0; width: 100%; height: auto; aspect-ratio: 3 / 4;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%); }
  .arrivo__scrim {
    display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in oklab, var(--arco) 92%, transparent) 0%,
      color-mix(in oklab, var(--arco) 70%, transparent) 42%, transparent 58%);
    opacity: clamp(0, calc(1 - var(--p) * 1.6), 1);
  }
  .arrivo__copia { z-index: 6; top: calc(max(1rem, env(safe-area-inset-top)) + 4.6rem); bottom: auto; width: auto; right: var(--sc-gutter); }
  .titolo--hero { font-size: clamp(2.05rem, 1.2rem + 4.4vw, 2.8rem); }
  .arrivo__sotto { font-size: var(--sc-t-base); margin-top: .9rem; }
  .arrivo__azioni { margin-top: 1.2rem; }
  .arrivo__marchio { width: 6.4rem; }
}

/* ---------------------------------------- light hero variant (?hero=chiaro) --
   Same idea as the dark hero, inverted: the foreground plane is a plaster wall
   with a soft-edged window (sharp in the middle, blurred then dissolving at
   the edges), the cloister is the sunny wide shot inside it.
   The opening (the wrapper) grows far faster than the photo inside it, which
   counter-scales, so you walk through the wall into the courtyard. */
.arrivo__finestra, .arrivo__stampe, .marchio--chiaro { display: none; }
.hero-collage .marchio--scuro,
.hero-collage .arrivo__scena,
.hero-collage .arrivo__scrim { display: none; }
.hero-collage .marchio--chiaro { display: block; }
.hero-collage .arrivo__stage { background: var(--intonaco); color: var(--sc-ink); }
/* The copy sits above the cloister photo (z 4) and below the prints (z 5,
   later in the page). Where the photo slides under it, a soft plaster cloud
   behind the block lets the image dissolve around the words, like its edges. */
.hero-collage .arrivo__copia { z-index: 5; }
.hero-collage .arrivo__copia .titolo, .hero-collage .arrivo__sotto { width: fit-content; max-width: 100%; }
.hero-collage .arrivo__copia::before {
  content: ""; position: absolute; z-index: -1; inset: -4rem -6rem -4rem -3rem; pointer-events: none;
  background: radial-gradient(closest-side, rgb(244 241 236 / .94) 55%, rgb(244 241 236 / .6) 78%, rgb(244 241 236 / 0));
}
.hero-collage .arrivo__copia .titolo { color: var(--blu); }
.hero-collage .arrivo__sotto { color: var(--sc-ink-soft); }
.hero-collage .arrivo__finestra {
  --s: calc(1 + var(--p) * var(--p) * 3.6);
  display: block; position: absolute; z-index: 4; overflow: hidden;
  top: 0; bottom: 0; right: 4vw; height: 100%; aspect-ratio: 3 / 4;
  /* No cut-out shape: the photo dissolves into the plaster at its edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / .3) 7%, rgb(0 0 0 / .75) 15%, #000 23%, #000 77%, rgb(0 0 0 / .75) 85%, rgb(0 0 0 / .3) 93%, transparent), linear-gradient(180deg, transparent, rgb(0 0 0 / .3) 5%, rgb(0 0 0 / .75) 11%, #000 18%, #000 82%, rgb(0 0 0 / .75) 89%, rgb(0 0 0 / .3) 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / .3) 7%, rgb(0 0 0 / .75) 15%, #000 23%, #000 77%, rgb(0 0 0 / .75) 85%, rgb(0 0 0 / .3) 93%, transparent), linear-gradient(180deg, transparent, rgb(0 0 0 / .3) 5%, rgb(0 0 0 / .75) 11%, #000 18%, #000 82%, rgb(0 0 0 / .75) 89%, rgb(0 0 0 / .3) 95%, transparent);
          mask-composite: intersect;
  transform-origin: 55% 58%;
  transform: translateX(calc(var(--p) * -18vw)) scale(calc(1 + var(--p) * var(--p) * 3.6));
  will-change: transform;
}
.hero-collage .arrivo__finestra img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: 50% 60%;
  transform-origin: 55% 58%;
  transform: scale(1.04); /* fallback for engines without max() / calc division */
  /* The view grows slower than the opening (depth), but never less than 0.86
     of it, so its rectangular edge never shows inside the arch. */
  transform: scale(calc(max(1.04 + var(--p) * 0.16, 0.86 * var(--s)) / var(--s)));
}
/* ?hero=chiaro: the same collage, prints only, no photo behind them. */
.hero-nuda .arrivo__finestra { display: none; }
/* Blurred edges: a soft copy underneath, the sharp photo fades into it. */
.hero-collage .arrivo__finestra-sfondo { filter: blur(5px); }
.hero-collage .arrivo__finestra-nitida {
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, rgb(0 0 0 / .45) 20%, #000 38%, #000 62%, rgb(0 0 0 / .45) 80%, transparent 95%), linear-gradient(180deg, transparent 4%, rgb(0 0 0 / .45) 15%, #000 30%, #000 70%, rgb(0 0 0 / .45) 85%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 5%, rgb(0 0 0 / .45) 20%, #000 38%, #000 62%, rgb(0 0 0 / .45) 80%, transparent 95%), linear-gradient(180deg, transparent 4%, rgb(0 0 0 / .45) 15%, #000 30%, #000 70%, rgb(0 0 0 / .45) 85%, transparent 96%);
          mask-composite: intersect;
}
/* A scatter of printed photos around the window: the nearest planes. Each one
   has its own size, tilt and travel (--w, --r, --tx, --ty): bigger ones move
   faster, so they read as closer. They clear the headline and leave as it fades. */
.hero-collage .arrivo__stampe {
  display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  --b: min(0px, calc(100svh - 21rem - 133.33vw)); /* phone: offset of the window */
}
.stampa {
  position: absolute; margin: 0; width: var(--w, 9rem);
  padding: .5rem .5rem 0; background: #FFFDF9;
  border-radius: 3px; box-shadow: var(--sc-e3);
  transform: translate(calc(var(--p) * var(--tx, 0vw)), calc(var(--p) * var(--ty, 0svh))) rotate(var(--r, 0deg));
  opacity: clamp(0, calc((0.62 - var(--p)) * 4), 1);
  transition: scale 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
  will-change: transform, opacity;
}
.stampa img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.stampa--q img { aspect-ratio: 1; }
.stampa--o img { aspect-ratio: 4 / 3; }
.stampa figcaption { margin: 0; padding: .4rem .1rem .5rem; font-size: .76rem; font-weight: 600; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  .stampa { pointer-events: auto; }
  .stampa:hover { scale: 1.07; z-index: 2; box-shadow: var(--sc-e3), 0 30px 60px -20px rgb(21 18 63 / .35); }
}

/* desktop scatter, gathered toward the middle: the window spans ~55vw–97vw
   and the copy sits left of ~44vw, so the gap between them is filled first. */
.stampa--s1  { --w: 12rem;  right: 6vw;   bottom: 4svh;  --r: -5deg; --tx: 10vw; --ty: -55svh; }
.stampa--s2  { --w: 9.5rem; left: 46vw;   top: 31svh;    --r: 4deg;  --tx: -6vw; --ty: -40svh; }
.stampa--s3  { --w: 7.5rem; left: 37vw;   top: 5svh;     --r: -4deg; --tx: -3vw; --ty: -22svh; }
.stampa--s4  { --w: 11rem;  left: 36vw;   bottom: -11svh;--r: 5deg;  --tx: 3vw;  --ty: -24svh; }
.stampa--s5  { --w: 10rem;  right: 3vw;   top: 40svh;    --r: 8deg;  --tx: 14vw; --ty: -30svh; }
.stampa--s6  { --w: 8.5rem; right: 15vw;  top: 13svh;    --r: -7deg; --tx: 6vw;  --ty: -50svh; }
.stampa--s7  { --w: 7.5rem; left: 50vw;   bottom: 9svh;  --r: -3deg; --tx: -8vw; --ty: -35svh; }
.stampa--s8  { --w: 8.5rem; right: 26vw;  bottom: -8svh; --r: 3deg;  --tx: 3vw;  --ty: -60svh; }
.stampa--s9  { --w: 9rem;   left: 19vw;   bottom: -14svh;--r: -6deg; --tx: -4vw; --ty: -12svh; }
.stampa--s10 { --w: 7rem;   left: 48vw;   top: 4svh;     --r: 6deg;  --tx: 2vw;  --ty: -28svh; }

@media (max-width: 860px) {
  /* phone: six prints around the window's edges, sliding out sideways */
  .stampa { top: auto; right: auto; left: auto; }
  .stampa--s6, .stampa--s7, .stampa--s8, .stampa--s9, .stampa--s10 { display: none; }
  .stampa--s1 { --w: 6.6rem; left: -.6rem;  bottom: calc(133.33vw * .36 + var(--b)); --tx: -45vw; --ty: 0svh; }
  .stampa--s2 { --w: 5.8rem; right: .4rem;  bottom: calc(133.33vw * .14 + var(--b)); --tx: 45vw;  --ty: 0svh; }
  .stampa--s3 { --w: 5.2rem; right: -.6rem; bottom: calc(133.33vw * .40 + var(--b)); --tx: 50vw;  --ty: 0svh; --r: 7deg; }
  .stampa--s4 { --w: 6.4rem; left: .8rem;   bottom: calc(133.33vw * .06 + var(--b)); --tx: -50vw; --ty: 0svh; }
  .stampa--s5 { --w: 6rem;   left: 34vw;    bottom: calc(-2.5rem + var(--b));       --tx: 0vw;   --ty: 30svh; --r: -3deg; }
  .stampa--s6 { --w: 5rem;   right: 24vw;   bottom: calc(133.33vw * .74 + var(--b)); --tx: 30vw;  --ty: -6svh; }
  .hero-collage .arrivo__scrim {
    display: block;
    background: linear-gradient(180deg, var(--intonaco) 0%, color-mix(in oklab, var(--intonaco) 85%, transparent) 40%, transparent 52%);
  }
  .hero-collage .arrivo__finestra {
    top: auto; bottom: min(0px, calc(100svh - 21rem - 133.33vw)); left: 0; right: 0; width: 100%; height: auto;
    transform: scale(var(--s));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage .arrivo__finestra, .hero-collage .arrivo__finestra img { transform: none; }
  .stampa { transform: rotate(var(--r, 0deg)); }
}

/* ---------------------------------------------- light hero (?hero=chiaro) --
   The dark hero's mechanics on a plaster ground: same arch cutout, same
   courtyard seen through the real opening, same walk-through. The photo's
   edges melt into the plaster instead of into shadow. */
.hero-chiaro .marchio--scuro, .hero-chiaro .arrivo__scrim { display: none; }
.hero-chiaro .marchio--chiaro { display: block; }
.hero-chiaro .arrivo__stage { background: var(--intonaco); color: var(--sc-ink); }
.hero-chiaro .arrivo__copia .titolo { color: var(--blu); }
.hero-chiaro .arrivo__sotto { color: var(--sc-ink-soft); }
/* Only the arch: no courtyard inside the opening, just plaster. */
.hero-chiaro .arrivo__piano--fondo { display: none; }
/* The arch is a translucent veil over the plaster: its shade is lifted and
   warmed (no blue-black), and it stays see-through while you walk through it. */
.hero-chiaro .arrivo__piano--arco {
  filter: sepia(.35) saturate(1.15) brightness(1.55) contrast(.85);
  opacity: calc(clamp(0, (0.86 - var(--p)) * 3.5, 1) * 0.5);
}
@media (max-width: 860px) {
  .hero-chiaro .arrivo__scena { bottom: min(0px, calc(100svh - 25rem - 133.33vw)); }
}
@media (min-width: 861px) {
  .hero-chiaro .arrivo__scena {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%);
            mask-composite: intersect;
  }
}

/* Debug switch, only rendered when ?hero= or ?eventi= is in the URL. */
.debug-hero {
  position: fixed; left: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90;
  display: flex; gap: .25rem; align-items: center; padding: .3rem .35rem .3rem .3rem;
  background: #111; color: #eee; border-radius: 1.3rem; font: 600 .75rem/1 var(--sc-font-text);
  box-shadow: var(--sc-e2);
}
.debug-hero__opzioni { display: flex; gap: .25rem; align-items: center; }
.debug-hero__opzioni > span:first-child { padding-left: .35rem; }
.debug-hero a { padding: .45rem .7rem; border-radius: 999px; color: #eee; text-decoration: none; }
.debug-hero a[aria-current="true"] { background: var(--sc-accent); color: var(--blu); }
.debug-hero__sep { margin-left: .5rem; padding-left: .7rem; border-left: 1px solid #444; }
.debug-hero__leva {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: #262626; color: #eee; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.debug-hero__leva:hover { background: #333; }
.debug-hero__leva:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.debug-hero.is-chiusa { padding: .3rem; }
.debug-hero.is-chiusa .debug-hero__opzioni { display: none; }
.debug-hero.is-chiusa .debug-hero__leva { transform: rotate(90deg); }
.debug-hero.is-animando { overflow: hidden; }
@media (max-width: 520px) {
  body.con-debug-aperto .minimappa { bottom: 6.2rem; }
  .debug-hero:not(.is-chiusa) { align-items: flex-start; max-width: calc(100vw - 2rem); border-radius: 14px; }
  .debug-hero__opzioni { flex-wrap: wrap; min-width: 0; row-gap: .15rem; }
}

/* ====================================================== FLOOR PLAN ====== */
.pianta-svg { display: block; width: 100%; height: auto; overflow: visible; }
.stanza__area { fill: transparent; stroke: var(--blu); stroke-width: 5; stroke-linejoin: miter; transition: fill 260ms var(--sc-ease-out); }
.stanza--corridoio .stanza__area { stroke-width: 0; }
.stanza__nome {
  font-family: var(--sc-font-display); font-stretch: 78%; font-weight: 760; letter-spacing: .01em;
  fill: #D9343F; pointer-events: none; transition: fill 260ms var(--sc-ease-out);
}
.pianta-svg__tavoli rect { fill: none; stroke: var(--blu); stroke-width: 2.5; opacity: .55; pointer-events: none; }
.stanza--link { cursor: pointer; outline: none; }
.stanza.is-attiva .stanza__area { fill: color-mix(in oklab, var(--sc-accent) 78%, transparent); }
.stanza.is-attiva .stanza__nome { fill: var(--blu); }
.stanza--link:focus-visible .stanza__area { stroke: var(--sc-accent); stroke-width: 10; }
@media (hover: hover) and (pointer: fine) {
  .stanza--link:hover:not(.is-attiva) .stanza__area { fill: color-mix(in oklab, var(--sc-accent) 22%, transparent); }
}

.pianta { padding-block: var(--sc-7) var(--sc-section); position: relative; z-index: 2; }
.pianta__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pianta__testo .sc-lede { margin-top: 1.3rem; }
.pianta__mappa { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: clamp(1rem, 2.5vw, 2rem); box-shadow: var(--sc-e2), var(--sc-edge); }
.pianta__anteprima {
  margin-top: 2rem !important; width: min(16rem, 70%); padding: .55rem .55rem 0; background: #FFFDF9;
  border-radius: 3px; box-shadow: var(--sc-e3); rotate: -3deg;
}
.pianta__anteprima img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pianta__cartello {
  display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 1rem;
  background: var(--intonaco); color: var(--sc-ink);
  font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 700; font-size: var(--sc-t-lg);
  line-height: 1.15; text-align: center; white-space: pre-line; overflow: hidden;
}
.pianta__cartello[hidden], .pianta__anteprima img[hidden], .pianta__anteprima a[hidden] { display: none; }
.pianta__anteprima figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .1rem .6rem; font-weight: 650; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.pianta__anteprima a { color: var(--corallo-testo); }
@media (max-width: 860px) {
  .pianta__griglia { grid-template-columns: 1fr; }
  .pianta__mappa { order: -1; }
}

/* the fixed "you are here" plan */
.minimappa {
  position: fixed; right: var(--sc-gutter); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 65;
  width: clamp(10.5rem, 17vw, 16rem);
  padding: .7rem .8rem .8rem; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); color: var(--blu); box-shadow: var(--sc-e3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), bottom 340ms cubic-bezier(.2, .8, .2, 1);
}
.minimappa.is-visibile { opacity: 1; transform: none; pointer-events: auto; }
.minimappa__dove { margin: 0 0 .5rem; font-size: .78rem; line-height: 1.25; display: flex; flex-direction: column; }
.minimappa__dove span { color: #504D6E; font-weight: 500; }
.minimappa__dove strong { font-family: var(--sc-font-display); font-stretch: 82%; font-weight: 750; font-size: 1.05rem; }
.minimappa__dove { padding-right: 1.6rem; }
.minimappa__chiudi {
  position: absolute; top: .4rem; right: .4rem; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #504D6E; cursor: pointer;
}
.minimappa__chiudi:hover { background: color-mix(in oklab, var(--blu) 8%, transparent); color: var(--blu); }
.minimappa__chiudi:focus-visible, .minimappa__apri:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.minimappa__apri { display: none; }
.minimappa.is-animando { overflow: hidden; }
.minimappa.is-chiusa .minimappa__apri svg { transition: transform 300ms var(--sc-ease-out); }
.minimappa.is-chiusa .minimappa__apri:hover svg { transform: rotate(-8deg) scale(1.08); }
/* Closed: only a small pill with the room's name, to bring the plan back. */
.minimappa.is-chiusa { width: auto; padding: 0; border-radius: 1.15rem; background: var(--blu); }
.minimappa.is-chiusa > :not(.minimappa__apri) { display: none; }
.minimappa.is-chiusa .minimappa__apri {
  display: flex; align-items: center; gap: .45rem; max-width: 12rem;
  padding: .55rem .9rem .55rem .75rem; border: 0; border-radius: 999px;
  background: none; color: var(--intonaco); cursor: pointer;
  font: 600 .82rem/1 var(--sc-font-text);
}
.minimappa__apri svg { flex: none; }
.minimappa__apri span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Doors, as drawn on the original plan */
.pianta-svg__porte { pointer-events: none; }
.porta__battuta { stroke: var(--blu); stroke-width: 11; }
.porta__anta { stroke: var(--blu); stroke-width: 2.5; }
.porta__arco { fill: none; stroke: var(--blu); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .65; }
.porta__taglio { stroke: var(--sc-surface); stroke-width: 9; }
.porta__varco { stroke: var(--blu); stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .65; }
.pianta-svg--mini .stanza__area { stroke-width: 9; }
.pianta-svg--mini .pianta-svg__tavoli rect { stroke-width: 4; }
@media (max-width: 860px) {
  .minimappa { width: 9.5rem; padding: .5rem .6rem .6rem; right: .8rem; }
  .minimappa__dove strong { font-size: .9rem; }
  .con-debug-aperto .minimappa { bottom: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) { .minimappa { transform: none; } }

/* ======================================================= 2 · CHIOSTRO === */
.chiostro { padding-block: var(--sc-5) var(--sc-section); }
/* The hero's last screen is already plaster: let the cloister ride up over it
   instead of leaving an empty viewport between them. */
@media (prefers-reduced-motion: no-preference) {
  .chiostro { margin-top: -45vh; margin-top: -45svh; position: relative; z-index: 2; }
}
.chiostro__griglia {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.chiostro__foto { grid-column: 1 / 8; grid-row: 1 / 3; margin: 0; }
.chiostro__foto img { width: 100%; height: auto; border-radius: var(--sc-r-md); }
.chiostro__testo { grid-column: 8 / 13; grid-row: 1; padding-top: clamp(1rem, 8vh, 6rem); }
.chiostro__scale {
  grid-column: 9 / 12; grid-row: 2; margin: clamp(2rem, 7vh, 5rem) 0 0 calc(-1 * clamp(3rem, 8vw, 8rem));
  position: relative; z-index: 2;
}
.chiostro__scale img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); border: 6px solid var(--sc-surface); }
figcaption { margin-top: .7rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

@media (max-width: 860px) {
  .chiostro { padding-top: var(--sc-7); }
  .chiostro__griglia { display: block; }
  .chiostro__testo { padding-top: 2rem; }
  .chiostro__scale { width: 62%; margin: 2rem 0 0 auto; }
}

/* ========================================================== 3 · AULE ==== */
/* Each room takes the middle of the screen in turn. js/csb.js writes --fuoco
   (0..1, how centred a room is): the centred one is full, the others recede. */
.aule { --carta: clamp(19rem, 46vw, 40rem); }
.aule__stage { display: flex; align-items: center; }
.aule__binario {
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-left: var(--sc-gutter);
  padding-right: calc((100vw - var(--carta)) / 2);   /* the last room can reach the centre */
  padding-top: var(--barra);
}
.aule__apertura { flex: 0 0 clamp(17rem, 26vw, 25rem); align-self: center; }
.aule__apertura .sc-lede { margin-top: 1.4rem; }
.aula {
  flex: 0 0 var(--carta);
  opacity: calc(0.3 + var(--fuoco, 1) * 0.7);
  transform: scale(calc(0.92 + var(--fuoco, 1) * 0.08));
  transform-origin: 50% 100%;
}
.aula__foto { aspect-ratio: 4 / 3; max-height: 56svh; overflow: hidden; border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); }
.aula__foto img { width: 100%; height: 100%; object-fit: cover; }
.aula:nth-of-type(3) .aula__foto img { object-position: 50% 62%; }
.aula__nome {
  margin: 1.1rem 0 .7rem;
  font-family: var(--sc-font-display); font-stretch: 78%; font-weight: 760;
  font-size: var(--sc-t-2xl); line-height: 1;
}
/* The room sign: how many seats, and whether you talk in there. */
.aula__info {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  padding-top: .7rem; border-top: 1px solid var(--sc-hairline);
}
.aula__posti { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.aula__posti b {
  font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 760;
  font-size: var(--sc-t-xl); line-height: 1; color: var(--sc-ink); margin-right: .15rem;
}
.aula__tipo {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .32rem .8rem .36rem; border-radius: 999px;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  background: var(--tinta); box-shadow: inset 0 0 0 1px var(--bordo-tipo);
}
.aula__tipo b { font-weight: 700; color: var(--sc-ink); letter-spacing: .01em; }
.aula__tipo b::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem;
  border-radius: 50%; background: var(--punto-tipo); translate: 0 -.05rem;
}
.aula__tipo--silenzio { --tinta: #E6EBF3; --bordo-tipo: #C9D3E4; --punto-tipo: #5F7FA6; }
.aula__tipo--gruppo   { --tinta: #F6E6DC; --bordo-tipo: #EBCDBB; --punto-tipo: #D9734E; }

@media (max-width: 860px) {
  .aule { --carta: 82vw; }
  .aula__foto { max-height: 44svh; }
  .aule__apertura { flex-basis: 80vw; }
  .aula__nome { font-size: var(--sc-t-xl); }
}

/* ========================================================== 4 · PAUSA === */
.pausa__stage {
  display: grid; grid-template-columns: 1fr minmax(0, 0.9fr); align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: var(--barra) var(--sc-gutter) 2rem;
}
.pausa__testi { position: relative; display: grid; }
.pausa__blocco { grid-area: 1 / 1; align-self: center; max-width: 34rem; }
.pausa__blocco .sc-lede { margin-top: 1.3rem; }
.pausa__ora {
  margin: 0 0 .6rem; font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 700;
  font-size: var(--sc-t-lg); color: var(--corallo-testo);
}
.pausa__cornice {
  position: relative; justify-self: center;
  height: min(78svh, 46rem); aspect-ratio: 4 / 5; max-width: 100%;
  border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3);
}
.pausa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pausa__foto { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1012 / 1800; translate: 0 -50%; }
.pausa__foto img { width: 100%; height: 100%; }
.pausa__nota { margin: .7rem 0 0; font-size: var(--sc-t-sm); font-style: italic; color: var(--sc-ink-soft); }

/* Highlighter words: one sober colour each, the same colour rings the object
   in the photo while the word is hovered, focused or pressed. */
.evid {
  --c: #E3C69B; --c-forte: #A9773A;
  font: inherit; color: inherit; letter-spacing: inherit;
  padding: 0 .12em; margin: 0 -.04em; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to top, var(--c) 0 58%, transparent 58% 100%) no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.evid--te { --c: #C9D8B4; --c-forte: #6E8C55; }
.evid--cappuccino { --c: #EBD0C5; --c-forte: #B57A66; }
.evid--microonde { --c: #C4D3E4; --c-forte: #5F7FA6; }
.evid[aria-pressed="true"], .evid.is-attiva { background-color: var(--c); box-shadow: inset 0 -2px 0 var(--c-forte); }
.evid:focus-visible { outline: 2px solid var(--c-forte); outline-offset: 2px; }
/* The spot: a pencil ring drawn around the thing (js/csb.js adds the SVG),
   and a soft dim on the rest of the photo. */
.punto {
  position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1;
  translate: -50% -50%; pointer-events: none;
  opacity: 0; transition: opacity 240ms var(--sc-ease-out);
}
.punto::before {
  content: ""; position: absolute; inset: -1000%;
  background: radial-gradient(closest-side, transparent 5.4%, rgb(21 18 63 / .42) 7.6%);
}
.punto--caffe { --c: #E3C69B; } .punto--te { --c: #C9D8B4; } .punto--cappuccino { --c: #EBD0C5; } .punto--microonde { --c: #C4D3E4; }
.punto.is-attivo { opacity: 1; }
.punto__matita {
  position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible;
  rotate: var(--giro, 0deg);
  fill: none; stroke: color-mix(in oklab, var(--c) 85%, white); stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgb(21 18 63 / .35));
}
.punto__matita path {
  stroke-width: 3.8; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 520ms cubic-bezier(.5, 0, .3, 1);
}
.punto__matita path + path { stroke-width: 1.8; opacity: .7; transition-delay: 160ms; }
.punto.is-attivo .punto__matita path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .punto__matita path { transition: none; } }
.pausa__img--cucina img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

@media (max-width: 860px) {
  .pausa__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.2rem; padding-top: 5.2rem; align-content: start; }
  .pausa__cornice { order: -1; height: 40svh; width: 100%; aspect-ratio: auto; }
  .pausa__blocco { align-self: start; }
}

/* ======================================================== 5 · PRATICO === */
.pratico { padding-block: var(--sc-8) var(--sc-9); }
.pratico__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.dotazioni { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.4rem; }
.dotazioni li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; align-items: start; }
.dotazioni svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--corallo-testo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; }
.dotazioni h3 { margin: 0; font-size: var(--sc-t-base); font-weight: 700; }
.dotazioni p { margin: .2rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 40ch; }
.pratico__foto { margin: 0; }
.pratico__cornice { overflow: hidden; border-radius: var(--sc-r-md); }
.pratico__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Soft magnification on entry: the frame grows into place while the photo
   inside settles from a closer crop. Slow and eased, no rise. */
.pratico__foto[data-sc-in] { transform: scale(0.86); transition: opacity 900ms var(--sc-ease-out), transform 1500ms var(--sc-ease-out); }
.pratico__foto[data-sc-in] img { transform: scale(1.16); transition: transform 2200ms var(--sc-ease-out); }
.pratico__foto[data-sc-in].sc-in, .pratico__foto[data-sc-in].sc-in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pratico__foto[data-sc-in], .pratico__foto[data-sc-in] img { transform: none; }
}
@media (max-width: 860px) {
  .pratico__griglia { grid-template-columns: 1fr; }
}

/* ======================================================= 6 · TERRAZZO === */
.terrazzo__stage { background: #2A1E1A; }
.terrazzo__foto, .terrazzo__sera {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.terrazzo__foto--giorno {
  object-position: 50% 62%;
  transform: scale(calc(1.08 - var(--sc-p, 0) * 0.08));
}
.terrazzo__sera .terrazzo__foto { object-position: 50% 30%; transform: scale(calc(1.1 - var(--sc-p, 0) * 0.06)); }
/* The sun going down over the day frame, before the dusk wipe. */
.terrazzo__sole {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, #FFB25E 0%, #F57A3A 45%, #6B2A3A 100%);
  mix-blend-mode: multiply;
  opacity: clamp(0, calc(var(--sc-p, 0) * 1.1), 0.42);
}
.terrazzo__scrim { --sc-canvas: #120E22; }
.terrazzo .sc-copy, .terrazzo .sc-copy .titolo, .terrazzo .sc-copy .sc-lede { color: #FBF7F0; }
.terrazzo .sc-copy { max-width: min(44rem, 80vw); }
.terrazzo .sc-copy .sc-lede { margin-top: 1.2rem; }
.terrazzo__ora-scrim {
  position: absolute; top: 0; right: 0; width: 60%; height: 45%; pointer-events: none;
  background: radial-gradient(80% 90% at 100% 0%, rgb(18 14 34 / .72) 0%, rgb(18 14 34 / .35) 45%, transparent 75%);
}
.terrazzo__ora {
  position: absolute; z-index: 5; margin: 0;
  right: var(--sc-gutter); top: calc(var(--barra) + 1rem);
  font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800;
  font-size: clamp(4.5rem, 2rem + 9vw, 10rem); line-height: .9; letter-spacing: -0.02em;
  color: #FBF7F0;
  text-shadow: 0 4px 24px rgb(18 14 34 / .35);
}
@media (max-width: 860px) {
  .terrazzo__ora { top: auto; bottom: auto; top: 5.6rem; left: var(--sc-gutter); right: auto; font-size: 4.2rem; }
  .terrazzo__ora-scrim { left: 0; width: 100%; height: 35%; background: linear-gradient(180deg, rgb(18 14 34 / .6), transparent); }
}

/* ======================================================== NOTTE ground == */
.notte {
  --sc-canvas: var(--blu-notte); --sc-surface: #1A1744;
  --sc-ink: #F6F2EA; --sc-ink-soft: #B9B5D6;
  --sc-accent-ink: #15123F;
  --sc-hairline: rgb(246 242 234 / .14);
  --sc-shadow-color: 245 60% 3%;
  background: var(--blu-notte); color: var(--sc-ink);
}

/* =========================================================== 7 · SERA === */
.sera { padding-block: var(--sc-9) var(--sc-section); }
.sera__testa { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.sera__foto { margin: 0; }
.sera__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sc-r-md); }

.agenda {
  margin-top: var(--sc-8);
  display: grid; grid-template-columns: minmax(17rem, 21rem) 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.calendario {
  padding: 1.2rem; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
  position: sticky; top: calc(var(--barra) + 1.5rem);
}
.calendario__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.calendario__mese { margin: 0; font-family: var(--sc-font-display); font-stretch: 82%; font-weight: 720; font-size: var(--sc-t-lg); text-transform: capitalize; }
.calendario__freccia {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); cursor: pointer;
  transition: background-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.calendario__freccia:active { transform: scale(.96); }
.calendario__freccia:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .calendario__freccia:not(:disabled):hover { background: rgb(246 242 234 / .08); } }
.calendario__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendario__gs { font-size: .72rem; color: var(--sc-ink-soft); padding: .3rem 0; font-weight: 600; }
.calendario__g {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums;
  border-radius: var(--sc-r-sm); color: var(--sc-ink-soft); background: none; border: 0; padding: 0;
}
.calendario__g--oggi { outline: 1px solid var(--sc-ink-soft); outline-offset: -2px; color: var(--sc-ink); }
.calendario__g--evento { color: var(--sc-ink); font-weight: 700; cursor: pointer; }
.calendario__g--evento::after {
  content: ""; position: absolute; bottom: 18%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--sc-accent);
}
.calendario__g--evento:hover, .calendario__g--evento[aria-pressed="true"] { background: rgb(246 242 234 / .1); }
.calendario__g--passato { opacity: .45; }
.calendario__legenda { margin: .9rem 0 0; font-size: .78rem; color: var(--sc-ink-soft); display: flex; gap: .5rem; align-items: center; }
.calendario__legenda .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }

.eventi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.evento {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.5rem;
  padding: 1.6rem 0; border-top: 1px solid var(--sc-hairline);
  scroll-margin-top: calc(var(--barra) + 2rem);
  transition: background-color 300ms var(--sc-ease-out);
}
.evento:last-child { border-bottom: 1px solid var(--sc-hairline); }
.evento.is-evidenziato { background: rgb(249 78 81 / .1); }
.evento__data { text-align: left; line-height: 1; }
.evento__giorno { display: block; font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800; font-size: 3rem; letter-spacing: -0.02em; }
.evento__mese { display: block; margin-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.evento__titolo { margin: 0; font-family: var(--sc-font-display); font-stretch: 85%; font-weight: 700; font-size: var(--sc-t-xl); line-height: 1.08; }
.evento__meta { margin: .45rem 0 0; font-weight: 600; font-size: var(--sc-t-sm); color: #FF8A8C; }
.evento__desc { margin: .6rem 0 0; color: var(--sc-ink-soft); max-width: 58ch; }
.evento__ics {
  display: inline-flex; gap: .45rem; align-items: center; margin-top: .9rem;
  font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink);
}
.evento__ics svg { width: 1rem; height: 1rem; }
.eventi__vuoto { padding: 1.6rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.eventi__vuoto a { color: var(--sc-ink); }

@media (max-width: 860px) {
  .sera__testa, .agenda { grid-template-columns: 1fr; }
  .sera__foto img { aspect-ratio: 4 / 3; }
  .calendario { position: static; }
  .evento { grid-template-columns: 4rem 1fr; gap: 1rem; }
  .evento__giorno { font-size: 2.4rem; }
}

/* ======================================================= 7b · CHI SIAMO = */
.chi { padding-block: var(--sc-8) var(--sc-section); border-top: 1px solid var(--sc-hairline); }
.chi__griglia {
  display: grid; grid-template-columns: 1.1fr .9fr; column-gap: clamp(2rem, 6vw, 6rem); row-gap: var(--sc-7);
  align-items: start;
}
.chi__testo .sc-lede { margin-top: 1.4rem; }
.chi__principi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; padding-top: .6rem; }
.chi__principi li { padding-top: 1rem; border-top: 2px solid var(--sc-accent); }
.chi__principi h3 { margin: 0; font-family: var(--sc-font-display); font-stretch: 85%; font-weight: 700; font-size: var(--sc-t-lg); line-height: 1.15; }
.chi__principi p { margin: .35rem 0 0; color: var(--sc-ink-soft); }
.chi__foto { margin: 0; grid-column: 2; }
.chi__foto img { width: 100%; height: auto; border-radius: var(--sc-r-md); }
.chi__chiusa {
  grid-column: 1; grid-row: 2; align-self: end; margin: 0;
  font-family: var(--sc-font-display); font-stretch: 78%; font-weight: 760;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.02; color: #FF8A8C; max-width: 16ch;
}
@media (max-width: 860px) {
  .chi__griglia { grid-template-columns: 1fr; }
  .chi__foto, .chi__chiusa { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------- events as posters (?eventi=locandine) */
.eventi-locandine .agenda { display: none; }
.locandine { margin-top: var(--sc-8); }
.locandine__testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.locandine__titolo { margin: 0; font-family: var(--sc-font-display); font-stretch: 82%; font-weight: 720; font-size: var(--sc-t-lg); }
.locandine__frecce { display: flex; gap: .5rem; }
.locandine__binario {
  /* bleeds to both viewport edges; the first poster still lines up with the text */
  --bordo: calc((100vw - min(100vw, var(--sc-maxw))) / 2 + var(--sc-gutter));
  list-style: none; margin: 0 calc(-1 * var(--bordo)); padding: .5rem var(--bordo) 1.5rem;
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--bordo);
  scrollbar-width: thin;
}
.locandine__binario:focus-visible { outline-offset: -2px; }
.locandina { flex: 0 0 clamp(15rem, 24vw, 19.5rem); scroll-snap-align: start; display: flex; flex-direction: column; }
.locandina__poster {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--sc-r-md); overflow: hidden;
  background: var(--sc-surface); box-shadow: var(--sc-e3);
}
.locandina__poster > img { width: 100%; height: 100%; object-fit: cover; }
.locandina__badge {
  position: absolute; top: .7rem; left: .7rem; margin: 0;
  display: grid; justify-items: center; line-height: 1; padding: .45rem .55rem .5rem; min-width: 3.3rem;
  background: var(--intonaco); color: var(--blu); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.locandina__badge strong { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.01em; margin: .1rem 0; }
/* drawn poster when the event has no image */
.locandina__finta {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.2rem; background: var(--intonaco); color: var(--blu);
  background-image: radial-gradient(120% 70% at 100% 0%, color-mix(in oklab, var(--sc-accent) 28%, transparent), transparent 60%);
}
.locandina__finta-giorno { font-family: var(--sc-font-display); font-stretch: 70%; font-weight: 800; font-size: 6.5rem; line-height: .85; color: #D9343F; }
.locandina__finta-mese { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin-top: .4rem; }
.locandina__finta-titolo { font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 760; font-size: 1.6rem; line-height: 1.02; margin-top: .9rem; text-wrap: balance; }
.locandina__finta-logo { position: absolute; top: 1rem; right: 1rem; width: 4.2rem; height: auto; }
.locandina__corpo { padding-top: 1rem; display: flex; flex-direction: column; flex: 1; }
.locandina__quando { margin: 0; font-weight: 650; font-size: var(--sc-t-sm); color: #FF8A8C; }
.locandina__quando::first-letter { text-transform: uppercase; }
.locandina__titolo { margin: .35rem 0 0; font-family: var(--sc-font-display); font-stretch: 85%; font-weight: 720; font-size: var(--sc-t-xl); line-height: 1.05; }
.locandina__luogo { margin: .35rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-weight: 600; }
.locandina__luogo::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--sc-accent); vertical-align: .05em; }
.locandina__desc { margin: .55rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.locandina__ics { margin-top: auto; align-self: flex-start; gap: .5rem; min-height: 2.6rem; color: var(--sc-ink); }
.locandina__corpo > :nth-last-child(2) { margin-bottom: 1.1rem; }
@media (max-width: 860px) {
  .locandina { flex-basis: 74vw; }
}

/* ========================================================= 8 · ORARI ==== */
.orari { padding-block: var(--sc-9) var(--sc-7); background: var(--intonaco); color: var(--sc-ink); position: relative; z-index: 2; }
.orari__titolo { max-width: 14ch; }
.orari__griglia {
  margin-top: var(--sc-7);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
/* The door sign. Navy enamel plate, four screws. */
.cartello {
  position: relative; padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--blu); color: var(--intonaco);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 6px var(--blu), inset 0 0 0 7px rgb(244 241 236 / .22);
  background-image:
    radial-gradient(circle at 18px 18px, #8F8BB0 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 18px) 18px, #8F8BB0 2.5px, transparent 3.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #8F8BB0 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #8F8BB0 2.5px, transparent 3.5px);
}
.cartello__logo { width: 8rem; height: auto; }
.cartello__intesta { margin: 1.2rem 0 1rem; font-weight: 700; font-size: var(--sc-t-sm); letter-spacing: .14em; text-transform: uppercase; color: #C9C5E2; }
.cartello__orari { width: 100%; border-collapse: collapse; font-family: var(--sc-font-display); font-stretch: 80%; }
.cartello__orari th, .cartello__orari td { padding: .7rem 0; border-top: 1px solid rgb(244 241 236 / .2); text-align: left; font-weight: 600; font-size: var(--sc-t-lg); }
.cartello__orari td { text-align: right; font-weight: 800; }
.cartello__orari tr:last-child th, .cartello__orari tr:last-child td { border-bottom: 1px solid rgb(244 241 236 / .2); }
.stato--cartello { margin-top: 1.2rem; font-size: var(--sc-t-base); }
/* Weekend note: short line always; full note on hover/focus (desktop) or always (touch). */
.cartello__asterisco { color: #FF8A8C; margin-left: .1em; }
.weekend { position: relative; margin-top: .7rem; font-size: var(--sc-t-sm); }
.weekend p { margin: 0; }
.weekend__breve { color: #FFB3B4; font-weight: 600; }
.weekend__breve span { color: #FF8A8C; }
.weekend__breve::after { content: " Segui i canali per essere aggiornato."; color: #B9B5D6; font-weight: 500; }
.cartello__nota { margin: .6rem 0 0; color: #D6D2EA; }
.cartello__dove { margin: 1.3rem 0 0; color: #D6D2EA; font-size: var(--sc-t-sm); }
.cartello__dove a { color: var(--intonaco); font-weight: 650; }

.contatti { display: grid; gap: var(--sc-7); }
.contatti .sc-body { margin-top: .6rem; }
.contatti__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.3rem; }
.volontari { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.2rem 1.5rem; }
.volontari li { padding-top: .8rem; border-top: 2px solid var(--sc-accent); }
.volontari p { margin: 0; }
.volontari__nome { font-weight: 700; }
.volontari__ruolo { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.volontari__link { margin-top: .35rem !important; font-size: var(--sc-t-sm); }
.volontari__link a { color: var(--corallo-testo); font-weight: 650; }

.piede {
  margin-top: var(--sc-9); padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.piede img { width: 5.5rem; height: auto; }
.piede p { margin: 0; }

@media (max-width: 860px) {
  .orari__griglia { grid-template-columns: 1fr; }
}

/* ===================================================== reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .arrivo__piano--fondo, .arrivo__piano--arco, .terrazzo__foto--giorno, .terrazzo__sera .terrazzo__foto { transform: none !important; }
  .arrivo__piano--arco { opacity: 1; }
  .arrivo__stage { position: relative; }
  .arrivo__luce { opacity: 0; }
  .giornata { animation: none; }
  /* Wipes are dropped here, so the later photo would cover the earlier one from
     the start. Hand the change over with opacity instead. */
  .terrazzo__sera { opacity: clamp(0, calc((var(--sc-p, 0) - 0.45) * 4), 1); }
  .pausa__img--cucina { opacity: clamp(0, calc((var(--sc-p, 0) - 0.42) * 5), 1); }
}