/* La cucitura */
:root {
  --blu: #1F4E9C;
  --riga-blu: rgba(242, 246, 255, 0.1);
  --riga-blu-forte: rgba(242, 246, 255, 0.2);
  --gesso: #F2F6FF;
  --carta: #F4EFE4;
  --inchiostro: #2A2622;
  --tenue: #6A635A;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
  /* la misura di un oggetto: fila, didascalie e passo ne discendono */
  --pezzo: clamp(108px, 25vh, 240px);
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  overflow: hidden;
}

.banco {
  position: relative;
  height: var(--alto);
  overflow: hidden;
  touch-action: pan-y;
}

/* ---- i due lati: stessi oggetti, stesse posizioni, ognuno tagliato sulla sua metà ---- */
.lato {
  position: absolute;
  inset: 0;
}
.lato--disegno {
  color: var(--gesso);
  background-color: var(--blu);
  /* la carta da lucido: una griglia fine e una più larga */
  background-image:
    linear-gradient(var(--riga-blu-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--riga-blu-forte) 1px, transparent 1px),
    linear-gradient(var(--riga-blu) 1px, transparent 1px),
    linear-gradient(90deg, var(--riga-blu) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  clip-path: inset(0 calc(100% - var(--cucitura)) 0 0);
}
.lato--cosa {
  background: var(--carta);
  clip-path: inset(0 0 0 var(--cucitura));
}
.lato__titolo {
  position: absolute;
  top: calc(var(--margine) + 3.2rem);
  margin: 0;
  font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1;
}
.lato--disegno .lato__titolo {
  left: var(--margine);
  font-weight: 380;
}
.lato--cosa .lato__titolo {
  right: var(--margine);
  text-align: right;
}

/* ---- la fila: la stessa nei due lati, la muove lo script ---- */
.fila {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: calc(var(--pezzo) * 0.42);
  will-change: transform;
}
.pezzo {
  flex: none;
  width: var(--pezzo);
  margin: 0;
}
.pezzo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pezzo figcaption {
  margin-top: 0.6rem;
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.95rem);
  font-weight: 560;
  text-align: center;
}
.lato--disegno figcaption {
  color: rgba(242, 246, 255, 0.75);
  font-weight: 420;
  letter-spacing: 0.02em;
}

/* il disegno: solo linee di gesso, sottili a qualunque misura, e le linee di costruzione */
.lato--disegno .a,
.lato--disegno .b,
.lato--disegno .c,
.lato--disegno .d,
.lato--disegno .e,
.lato--disegno .t {
  fill: none;
  stroke: var(--gesso);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lato--disegno .g {
  fill: none;
  stroke: rgba(242, 246, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.lato--disegno text.g {
  fill: rgba(242, 246, 255, 0.8);
  stroke: none;
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-size: 7px;
  text-anchor: middle;
}
/* la cosa: pieni di colore con un filo d’inchiostro */
.lato--cosa .a { fill: var(--c1); }
.lato--cosa .b { fill: var(--c2); }
.lato--cosa .c { fill: var(--c3); }
.lato--cosa .e { fill: #FFFFFF; }
.lato--cosa .a,
.lato--cosa .b,
.lato--cosa .c,
.lato--cosa .e {
  stroke: var(--inchiostro);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.lato--cosa .t {
  fill: none;
  stroke: var(--c4, var(--c3));
  stroke-width: 6;
  stroke-linecap: round;
}
.lato--cosa .d {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.lato--cosa .g {
  display: none;
}

/* ---- la cucitura e la sua maniglia ---- */
.cucitura {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--cucitura);
  width: 2px;
  background: linear-gradient(var(--gesso), var(--gesso)) center / 2px 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(42, 38, 34, 0.12);
  transform: translateX(-50%);
}
.maniglia {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: 0 0 0 2px var(--gesso), 0 10px 24px rgba(20, 30, 60, 0.28);
  cursor: ew-resize;
  transform: translate(-50%, calc(-50% - var(--pezzo) * 0.85));
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 220ms ease;
  touch-action: none;
  outline: none;
}
.maniglia svg {
  width: 22px;
  height: 22px;
}
.maniglia:focus-visible {
  box-shadow: 0 0 0 2px var(--gesso), 0 0 0 5px var(--inchiostro), 0 10px 24px rgba(20, 30, 60, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  .maniglia:hover {
    transform: translate(-50%, calc(-50% - var(--pezzo) * 0.85)) scale(1.08);
  }
}
.maniglia--presa,
.maniglia:active {
  transform: translate(-50%, calc(-50% - var(--pezzo) * 0.85)) scale(0.94);
}

.nota {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--margine);
  max-width: 44ch;
  margin: 0;
  padding: 0.6em 1em;
  border-radius: 12px;
  background: rgba(244, 239, 228, 0.92);
  color: var(--tenue);
  font-size: clamp(0.88rem, 0.82rem + 0.25vw, 1rem);
  font-weight: 500;
  line-height: 1.38;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px rgba(20, 30, 60, 0.12);
}

/* ---- telefono: la cucitura è orizzontale e gli oggetti scendono dal disegno alla cosa ---- */
.banco--alto {
  --pezzo: clamp(96px, 17vh, 150px);
}
.banco--alto .lato--disegno {
  clip-path: inset(0 0 calc(100% - var(--cucitura)) 0);
}
.banco--alto .lato--cosa {
  clip-path: inset(var(--cucitura) 0 0 0);
}
.banco--alto .lato__titolo {
  top: var(--margine);
  left: var(--margine);
  right: auto;
  max-width: 11ch;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  text-align: left;
  text-wrap: balance;
}
.banco--alto .lato--cosa .lato__titolo {
  top: auto;
  bottom: calc(var(--margine) + 6.6rem);
}
/* al telefono la colonna sta a destra, i titoli a sinistra */
.banco--alto .fila {
  top: 0;
  left: 66%;
  flex-direction: column;
}
.banco--alto .cucitura {
  top: var(--cucitura);
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
  background: linear-gradient(var(--gesso), var(--gesso)) center / 100% 2px no-repeat;
  transform: translateY(-50%);
}
.banco--alto .maniglia {
  top: 50%;
  left: var(--margine);
  right: auto;
  cursor: ns-resize;
  transform: translate(0, -50%) rotate(90deg);
}
.banco--alto .maniglia--presa,
.banco--alto .maniglia:active {
  transform: translate(0, -50%) rotate(90deg) scale(0.94);
}
.banco--alto .nota {
  max-width: calc(100% - var(--margine) * 2);
}