/* The one-sentence notebook, in the minimal style: a warm white table, a white notebook, black ink and one red for the
   last sign. A tall section keeps the stage still while you scroll. Every page that turns is a chain of thin vertical
   strips, each hinged on the one before, so the paper can curl; the script writes their angles. */
:root {
  --fondo: #f3f0e8;        /* the table */
  --carta: #fdfcf9;        /* the pages */
  --copertina: #e2ddd2;    /* the edge of the cover around the pages */
  --inchiostro: #141414;   /* the words */
  --tenue: #b8b1a5;        /* the words already read, and the small captions */
  --riga: #d6d0c4;         /* the one line on every page */
  --accento: #e2401c;      /* the full stop on the last page */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

/* ------------------------------------------------------------ the stage */
.racconto {
  position: relative;
  height: 660lvh;
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}

.testa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px clamp(16px, 5vw, 72px);
}

.marchio {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 22px;
  font-weight: 560;
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  letter-spacing: -0.02em;
}

.nota {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 460;
}

/* ------------------------------------------------------------ the notebook */
/* the scene gives the depth; the book leans back on the table. Sizes in px come from the script: --w and --h are one
   page, --corpo the size of a word, --frase the size of the sentence on the left page */
.scena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: var(--prospettiva, 2400px);
  perspective-origin: 50% 30%;
}

.libro {
  position: relative;
  width: calc(var(--w, 360px) * 2);
  height: var(--h, 500px);
  transform-style: preserve-3d;
  margin-top: var(--su, 0px);
}

.ombra-libro {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 4%;
  bottom: -5%;
  border-radius: 10px;
  background: rgba(40, 30, 15, 0.16);
  filter: blur(22px);
  transform: translateZ(-3px);
}

.copertina {
  position: absolute;
  inset: calc(var(--w, 360px) * -0.022);
  border-radius: 4px;
  background: var(--copertina);
  transform: translateZ(-1.5px);
}

.fissa {
  position: absolute;
  top: 0;
  width: var(--w, 360px);
  height: var(--h, 500px);
}

.fissa--sinistra {
  left: 0;
}

.fissa--destra {
  left: var(--w, 360px);
}

/* a page that turns: hinged on the spine, in the middle of the book */
.foglio {
  position: absolute;
  top: 0;
  left: var(--w, 360px);
  width: var(--w, 360px);
  height: var(--h, 500px);
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* one strip of the page: the first sits at the spine, every other one at the far edge of the one before. A strip
   is a hair wider than its share, so no seam shows when two of them meet at an angle */
.striscia {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w, 360px) / var(--strisce, 10) + 1.6px);
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
}

.striscia .striscia {
  left: calc(var(--w, 360px) / var(--strisce, 10));
}

.faccia {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.faccia--retro {
  transform: rotateY(180deg);
}

/* the light on a strip: darker the more it turns away from you, blended from one edge to the other. In the hair a
   strip overlaps the next one it keeps the value of that edge, so the two strips match there */
.faccia::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28, 22, 12, var(--b0, 0)), rgba(28, 22, 12, var(--b1, 0)) calc(100% - 1.6px), rgba(28, 22, 12, var(--b1, 0)));
  pointer-events: none;
}

/* the back is mirrored: the overlap is on its left */
.faccia.faccia--retro::after {
  background: linear-gradient(to right, rgba(28, 22, 12, var(--b0, 0)), rgba(28, 22, 12, var(--b0, 0)) 1.6px, rgba(28, 22, 12, var(--b1, 0)));
}

/* the whole page; every strip shows its own slice of it */
.contenuto {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 360px);
  height: var(--h, 500px);
  background-color: var(--carta);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 10, 0.06);
}

/* the gutter: the paper darkens a little where it bends into the spine */
.contenuto--fronte {
  background-image: linear-gradient(to right, rgba(40, 30, 15, 0.07), rgba(40, 30, 15, 0) 9%);
}

.contenuto--retro {
  background-image: linear-gradient(to left, rgba(40, 30, 15, 0.07), rgba(40, 30, 15, 0) 9%);
}

/* the one line on every page, at the same height on both sides */
.riga {
  position: absolute;
  left: 9%;
  right: 9%;
  top: var(--linea, 62%);
  height: 1px;
  background: var(--riga);
  transform-origin: 0 50%;
  transform: scaleX(var(--traccia, 1));
}

.contenuto--retro .riga {
  transform-origin: 100% 50%;
}

/* a word sits on the line: its box ends on the line, and --giu moves it down to the baseline */
.parola {
  position: absolute;
  left: 12%;
  bottom: calc(100% - var(--linea, 62%));
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: var(--corpo, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-weight: var(--peso, 600);
  font-variation-settings: 'opsz' 144, 'SOFT' var(--morbido, 0);
  transform: translateY(var(--giu, 0.14em));
}

.parola--segno {
  color: var(--accento);
  font-weight: 640;
}

.segno {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* the sentence read so far, small, on the line of the left page */
.frase {
  position: absolute;
  left: 11%;
  bottom: calc(100% - var(--linea, 62%));
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: var(--frase, 24px);
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
  font-weight: 380;
  font-variation-settings: 'opsz' 24;
  transform: translateY(var(--giu, 0.14em));
}

.frase .letta {
  color: var(--letta, var(--tenue));
}

.sigla {
  position: absolute;
  left: 11%;
  bottom: 7%;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: calc(var(--w, 360px) * 0.034);
  font-weight: 500;
  font-variation-settings: 'opsz' 14;
  color: var(--tenue);
}

/* the shadow a page throws on the page under it while it turns: from the spine out, as wide as the script says */
.velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.velo--fronte {
  background: linear-gradient(to right, rgba(30, 22, 10, var(--va, 0)), rgba(30, 22, 10, 0) var(--vw, 0px));
}

.velo--retro {
  background: linear-gradient(to left, rgba(30, 22, 10, var(--vb, 0)), rgba(30, 22, 10, 0) var(--vbw, 0px));
}

/* bound at the top, on a narrow screen: the same pages, one above the other, turning upwards around the top edge
   of the lower page. The strips run across the page */
.libro--alto {
  width: var(--w, 360px);
  height: calc(var(--h, 300px) * 2);
}

.libro--alto .fissa--destra {
  left: 0;
  top: var(--h, 300px);
}

.libro--alto .foglio {
  left: 0;
  top: var(--h, 300px);
  transform-origin: 50% 0;
}

.libro--alto .striscia {
  width: 100%;
  height: calc(var(--h, 300px) / var(--strisce, 10) + 1.6px);
  transform-origin: 50% 0;
}

.libro--alto .striscia .striscia {
  left: 0;
  top: calc(var(--h, 300px) / var(--strisce, 10));
}

.libro--alto .faccia--retro {
  transform: rotateX(180deg);
}

.libro--alto .faccia::after {
  background: linear-gradient(to bottom, rgba(28, 22, 12, var(--b0, 0)), rgba(28, 22, 12, var(--b1, 0)) calc(100% - 1.6px), rgba(28, 22, 12, var(--b1, 0)));
}

.libro--alto .faccia.faccia--retro::after {
  background: linear-gradient(to bottom, rgba(28, 22, 12, var(--b0, 0)), rgba(28, 22, 12, var(--b0, 0)) 1.6px, rgba(28, 22, 12, var(--b1, 0)));
}

.libro--alto .contenuto--fronte {
  background-image: linear-gradient(to bottom, rgba(40, 30, 15, 0.07), rgba(40, 30, 15, 0) 9%);
}

.libro--alto .contenuto--retro {
  background-image: linear-gradient(to top, rgba(40, 30, 15, 0.07), rgba(40, 30, 15, 0) 9%);
}

.libro--alto .velo--fronte {
  background: linear-gradient(to bottom, rgba(30, 22, 10, var(--va, 0)), rgba(30, 22, 10, 0) var(--vw, 0px));
}

.libro--alto .velo--retro {
  background: linear-gradient(to top, rgba(30, 22, 10, var(--vb, 0)), rgba(30, 22, 10, 0) var(--vbw, 0px));
}

.libro--alto .contenuto--retro .riga {
  transform-origin: 0 50%;
}

.libro--alto .sigla {
  bottom: 9%;
}

/* reduced motion: the words and the sentences are layers that only cross-fade */
.strato-ridotto {
  opacity: 0;
}

/* ------------------------------------------------------------ captions */
.frase-letta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.invito {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0;
  text-align: center;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 460;
}

.invito span {
  display: inline-block;
}

/* ------------------------------------------------------------ the end of the page */
.coda {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 70vh;
  padding: 80px clamp(16px, 5vw, 72px);
}

.coda__testo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 340;
  font-variation-settings: 'opsz' 72;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.piccolo {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
}

/* ------------------------------------------------------------ phone: the same, smaller */
@media (max-width: 640px) {
  .testa {
    padding-top: 20px;
  }

  .invito {
    bottom: 24px;
  }
}