/* The diamond that becomes a circle: the booking corner of a pottery school. A dashed line crosses the page and a
   lump of clay sits on it; the script moves it, turns it and changes its outline. The size of the clay comes from the
   script as --lato. */
:root {
  --fondo: #f3ebe1;        /* the page, raw bisque */
  --argilla: #c2502a;      /* the clay: the shape, the outlines it leaves, the italic words */
  --scritta: #fbf2e8;      /* the words on the clay */
  --inchiostro: #2b1f19;   /* the text */
  --tenue: #8c7465;        /* the small text and the marks on the line */
  --linea: #d9a58c;        /* the dashed line */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Onest Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.pagina {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(18px, 3.2vh, 40px);
  min-height: 100vh;
  padding: clamp(16px, 2.6vw, 36px) clamp(16px, 3vw, 44px) clamp(18px, 3vh, 32px);
  overflow: hidden;
}

/* ---------------------------------------------------------------- the bar */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marchio {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.marchio__segno {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--argilla);
  stroke-width: 2.2;
  overflow: visible;
}

.marchio__segno circle {
  fill: var(--argilla);
  stroke: none;
  transform-origin: 20px 20px;
  transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1);
}

.marchio__nome {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 23px;
  line-height: 1;
}

.marchio__sotto,
.barra__orari,
.invito__occhiello,
.banco__aiuto,
.piede p,
.pezzo__fase {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marchio__sotto {
  color: var(--tenue);
  font-size: 10px;
}

.barra__orari {
  margin: 0;
  color: var(--tenue);
}

@media (hover: hover) {
  .marchio:hover .marchio__segno circle {
    transform: scale(1.42);
  }
}

/* ---------------------------------------------------------------- the invitation */
.invito {
  align-self: end;
  width: min(1000px, 100%);
  margin: 0 auto;
}

.invito__occhiello {
  margin: 0 0 14px;
  color: var(--argilla);
}

.invito__titolo {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.riga {
  display: block;
}

.invito__titolo em {
  color: var(--argilla);
}

.invito__testo {
  max-width: 36em;
  margin: 18px 0 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--inchiostro) 82%, var(--fondo));
}

/* ---------------------------------------------------------------- the line and the clay */
.banco {
  position: relative;
  --lato: 220px;
  padding-bottom: 6px;
}

.linea {
  position: absolute;
  left: calc(-1 * clamp(16px, 3vw, 44px));
  right: calc(-1 * clamp(16px, 3vw, 44px));
  top: calc(var(--lato) / 2);
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--linea) 0 7px, transparent 7px 14px);
  transform-origin: 0 50%;
}

.binario {
  position: relative;
  width: min(1000px, 70vw);
  height: var(--lato);
  margin: 0 auto 58px;
  touch-action: pan-y;
}

.tacche,
.scie {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tacca {
  position: absolute;
  top: calc(var(--lato) / 2 - 9px);
  width: 1.5px;
  height: 18px;
  margin-left: -0.75px;
  background: var(--tenue);
  opacity: 0.55;
  transform-origin: 50% 50%;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.tacca--passata {
  background: var(--argilla);
  opacity: 1;
}

.scia {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lato);
  height: var(--lato);
  overflow: visible;
  fill: none;
  stroke: var(--argilla);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.scia path {
  vector-effect: non-scaling-stroke;
}

.pezzo {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lato);
  height: var(--lato);
  color: var(--scritta);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pezzo__molla {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.pezzo__forma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pezzo__argilla {
  fill: var(--argilla);
}

.pezzo__scritta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: max(9.5px, calc(var(--lato) * 0.06));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.parentesi {
  display: inline-block;
  transition: transform 0.55s cubic-bezier(0.34, 1.9, 0.5, 1);
}

@media (hover: hover) {
  .pezzo:hover .parentesi--a {
    transform: translateX(-0.45em);
  }

  .pezzo:hover .parentesi--b {
    transform: translateX(0.45em);
  }
}

.pezzo:focus-visible .pezzo__forma {
  filter: drop-shadow(0 0 1.5px var(--inchiostro)) drop-shadow(0 0 1.5px var(--inchiostro));
}

/* the name of the stage rides under the clay, centred by a wide box; the script rolls the words in and out */
.pezzo__fase {
  position: absolute;
  left: -120px;
  right: -120px;
  top: calc(100% + 18px);
  display: block;
  text-align: center;
  color: var(--argilla);
  white-space: nowrap;
}

.pezzo__finestra {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
  vertical-align: top;
}

.pezzo__fase-testo {
  display: block;
}

.banco__aiuto {
  margin: 0;
  text-align: center;
  color: var(--tenue);
}

/* ---------------------------------------------------------------- the foot */
.piede {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--tenue) 30%, transparent);
}

.piede p {
  margin: 0;
  color: var(--tenue);
  font-size: 10.5px;
}

@media (max-width: 720px) {
  .barra__orari {
    display: none;
  }

  .binario {
    width: 100%;
  }

  .piede {
    flex-direction: column;
    gap: 6px;
  }
}