/* Le immagini a fisarmonica al passaggio: un bianco caldo, sei pannelli stretti fra fili sottili, ognuno con una
   stampa disegnata da noi; l'unico accento è il dettaglio rosso di ogni stampa, che si accende solo a pannello aperto.
   I titoli sono in Archivo, che ha gli assi della larghezza e del peso. */
:root {
  --carta: #f3f0e8;                 /* il fondo della pagina */
  --inchiostro: #1a1a18;            /* i testi e i tratti delle stampe */
  --tenue: #8a857a;                 /* le scritte piccole */
  --filo: rgba(26, 26, 24, 0.22);   /* i fili fra i pannelli */
  --accento: #e2482b;               /* il dettaglio della stampa aperta */
  --molla: cubic-bezier(0.34, 1.9, 0.45, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --margine: clamp(16px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 3vh, 30px);
  height: 100svh;
  min-height: 520px;
  padding: clamp(18px, 3vw, 32px) var(--margine);
}

.top,
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  font-weight: 480;
  color: var(--tenue);
}

.top__name {
  color: var(--inchiostro);
  font-size: 20px;
  font-weight: 640;
  font-stretch: 82%;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- la fila dei pannelli */
.gallery {
  position: relative;
  min-height: 0;
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--filo);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.panel:first-child {
  border-left: 0;
}

.panel:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: -2px;
}

/* la stampa: larga quanto il pannello aperto, così non si deforma mai; il pannello ne mostra una finestra */
.panel__art {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  will-change: transform;
}

.panel__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.paper {
  fill: var(--paper);
}

.ink {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 2.2;
}

.fine {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.2;
  opacity: 0.55;
}

.fill {
  fill: var(--inchiostro);
  opacity: 0.12;
}

.accent {
  fill: var(--accento);
}

/* il velo color carta sotto il titolo: compare con l'apertura, così il titolo non si siede sulla stampa */
.panel::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, var(--paper) 52%, rgba(255, 255, 255, 0));
  opacity: var(--o, 0);
  pointer-events: none;
}

.gallery.is-column .panel::after {
  height: 58%;
}

/* il nome in piedi, quando il pannello è stretto */
.panel__upright {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 18px;
  font-size: 14px;
  font-weight: 520;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform-origin: 0 50%;
  transform: rotate(-90deg) translateY(50%);
  pointer-events: none;
}

/* il titolo a pannello aperto, e la riga sotto */
.panel__title,
.panel__line {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  pointer-events: none;
  opacity: 0;
}

.panel__title {
  bottom: calc(clamp(16px, 2vw, 26px) + 1.6em);
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.panel__line {
  bottom: clamp(16px, 2vw, 26px);
  font-size: 14px;
  font-weight: 460;
  color: var(--inchiostro);
}

/* sul telefono i pannelli stanno uno sopra l'altro: il nome resta orizzontale */
.gallery.is-column .panel {
  border-left: 0;
  border-top: 1px solid var(--filo);
}

.gallery.is-column .panel:first-child {
  border-top: 0;
}

.gallery.is-column .panel__upright {
  left: 16px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.gallery.is-column .panel__title {
  font-size: clamp(28px, 8vw, 40px);
}

.gallery.is-column .panel__line {
  font-size: 13px;
}