/* The view from above, through the clouds: minimal. A pale sage ground, the plan in ink hairlines, clouds in white,
   and one accent, the gold of the two wing letters. A serif title that comes out of a blur. */
:root {
  --fondo: #f6f3ea;        /* the page and the curtains */
  --terra: #dfe2d2;        /* the ground of the plan */
  --inchiostro: #23301f;   /* the lines of the plan and the title */
  --tenue: #7d8476;        /* the small text */
  --accento: #a68150;      /* the letters of the wings */
  --schermo: 100vh;
}

@supports (height: 100lvh) {
  :root {
    --schermo: 100lvh;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--fondo);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the run of scroll is set by the script: twice the part of the plan that does not fit, plus a screen */
.corsa {
  position: relative;
  height: 300vh;
}

.palco {
  position: sticky;
  top: 0;
  height: var(--schermo);
  overflow: hidden;
  background: var(--terra);
}

.pianta {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
}

.disegno {
  display: block;
  width: 100%;
  height: 100%;
}

.nuvole {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}

.titolo {
  position: absolute;
  left: 50%;
  top: 6%;
  margin: 0;
  translate: -50% 0;
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-size: clamp(2.6rem, 8.4vw, 8.6rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--inchiostro);
}

.nota {
  position: absolute;
  left: 50%;
  bottom: 6%;
  margin: 0;
  translate: -50% 0;
  color: var(--inchiostro);
  font-size: 0.72rem;
  font-stretch: 112%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}

/* the two curtains that open at the start */
.tenda {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: var(--fondo);
}

.tenda--sx {
  left: 0;
}

.tenda--dx {
  right: 0;
}

.fine {
  display: grid;
  place-items: center;
  height: 50vh;
  color: var(--tenue);
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
}

@media (max-width: 760px) {
  .titolo {
    top: 9%;
  }
}