/* The photo that comes out of the pixels: a made-up journal of photographs, Coarse. The pictures are canvases drawn
   by the script; the colours of the page are the variables below. */
:root {
  --carta: #f3f0e8;          /* the page */
  --inchiostro: #161512;     /* the text */
  --tenue: #8a857a;          /* the small text and the counter */
  --filetto: #d9d4c8;        /* the hairlines */
  --accento: #e8481c;        /* the line under a sharp picture */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------- the top bar */
.testa {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 3vw, 40px);
  background: linear-gradient(var(--carta) 60%, rgba(243, 240, 232, 0));
}

.marchio {
  color: var(--inchiostro);
  font-size: 19px;
  font-weight: 650;
  font-stretch: 82%;
  letter-spacing: -0.01em;
  text-decoration: none;
}

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

/* ---------------------------------------------------------------- the page */
.pagina {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
  padding-bottom: 30vh;
}

.apertura {
  min-height: 78vh;
  display: grid;
  align-content: end;
  padding-bottom: 14vh;
}

.titolo {
  margin: 0;
  font-size: clamp(3rem, 1.4rem + 7vw, 7.5rem);
  font-weight: 560;
  font-stretch: 78%;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.sotto {
  max-width: 30ch;
  margin: 22px 0 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.4;
}

/* ---------------------------------------------------------------- a picture */
.foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: start;
  gap: 24px;
  margin: 0 0 22vh;
}

.foto:nth-of-type(even) {
  grid-template-columns: 200px minmax(0, 1fr);
}

.foto:nth-of-type(even) .foto__cornice {
  order: 2;
}

.foto__cornice {
  position: relative;
  will-change: transform;
}

.foto[data-shape="0.8"] .foto__cornice {
  width: 72%;
  justify-self: end;
}

.foto:nth-of-type(even)[data-shape="0.8"] .foto__cornice {
  justify-self: start;
}

.foto__tela {
  display: block;
  width: 100%;
  background: var(--filetto);
}

.foto__dida {
  position: relative;
  display: grid;
  padding-bottom: 12px;
}

.foto__conto,
.foto__nome {
  grid-area: 1 / 1;
  font-size: 15px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.foto__conto {
  color: var(--tenue);
  font-weight: var(--peso, 320);
  font-stretch: var(--largo, 75%);
}

.foto__nome {
  font-weight: 520;
  font-stretch: 88%;
  opacity: 0;
}

.foto__riga {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accento);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

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

@media (max-width: 700px) {
  .foto,
  .foto:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 16vh;
  }

  .foto:nth-of-type(even) .foto__cornice {
    order: 0;
  }

  .foto[data-shape="0.8"] .foto__cornice {
    width: 86%;
  }

  .foto__dida {
    width: min(100%, 240px);
  }
}