/* The panel pushed by hand: the opening of a made-up designer's portfolio. Underneath, the light grey home page; on
   top, the curtain: a white sheet, the name in red, a black sheet that covers what has not been pushed yet, the little
   figure drawn in SVG standing at the edge of the black, and the count of how far it has pushed. */
:root {
  --nero: #000000;         /* the screen before the push */
  --bianco: #ffffff;       /* the panel being pushed */
  --rosso: #ff4b3e;        /* the name */
  --carta: #ececec;        /* the grey of the home page */
  --inchiostro: #181818;   /* the text of the home page and the lines of the figure */
  --maglia: #8f8f8f;       /* the figure's shirt */
  --berretto: #e2e2e2;     /* the figure's cap */
  --calzoni: #dedede;      /* the figure's shorts */
  --suola: #cfcfcf;        /* the soles and the peak of the cap */
  --ombra: #ececec;        /* the far arm and leg, a touch greyer */
  --misura: 340px;         /* how wide the figure is on a computer */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

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

/* ---------------------------------------------------------------- the home page underneath */
.pagina {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 18px clamp(16px, 2vw, 28px);
}

.testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
}

.firma {
  margin: 0;
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-stretch: 75%;
  font-weight: 750;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.voci {
  display: grid;
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 22px;
  line-height: 0.95;
  text-transform: uppercase;
}

.voci a,
.scrivi {
  color: inherit;
  text-decoration: none;
}

.scrivi {
  border-bottom: 1px solid currentColor;
}

.eroe {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.eroe__sopra,
.eroe__sotto {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.eroe__titolo {
  margin: 0;
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.lavori {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lavoro {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 10px;
  border-radius: 3px;
  background: var(--tinta);
  color: #ffffff;
  font-size: 12px;
}

/* ---------------------------------------------------------------- the curtain */
.sipario {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  --spinta: 0;
}

.sipario__bianco {
  position: absolute;
  inset: 0;
  background: var(--bianco);
}

.sipario__nome {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  color: var(--rosso);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-stretch: 75%;
  font-weight: 720;
  font-size: clamp(110px, 16vw, 250px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% -50%;
}

/* the black covers everything to the right of the push; it stops a little past the right edge */
.sipario__nero {
  position: absolute;
  inset: 0;
  background: var(--nero);
}

.spinta {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--misura);
}

.omino {
  display: block;
  width: 100%;
  height: auto;
  color: var(--inchiostro);
  translate: -97% -50%;
}

/* the drawing: black lines of two weights, white skin, grey clothes */
.omino .arto {
  stroke-width: 15;
}

.omino .arto-dentro {
  stroke: var(--bianco);
  stroke-width: 10;
}

.omino .dettaglio {
  stroke-width: 1.5;
}

.omino .pelle,
.omino .mano,
.omino .colletto,
.omino .calzino,
.omino .scarpa {
  fill: var(--bianco);
}

.omino .maglia {
  fill: var(--maglia);
}

.omino .calzoni {
  fill: var(--calzoni);
}

.omino .berretto {
  fill: var(--berretto);
}

.omino .visiera,
.omino .suola {
  fill: var(--suola);
}

.omino .capelli,
.omino .bottone {
  fill: currentColor;
}

.omino .bocca {
  fill: var(--bianco);
  stroke-width: 1.8;
}

.omino .puntinato {
  fill: url(#puntini);
  stroke: none;
  opacity: 0.45;
}

/* the far leg and arm are a little greyer, so the body has some depth */
.omino .gamba--dietro .arto-dentro,
.omino .braccio--dietro .arto-dentro,
.omino .gamba--dietro .calzino,
.omino .gamba--dietro .scarpa,
.omino .braccio--dietro .mano {
  stroke: currentColor;
  fill: var(--ombra);
}

.omino .gamba--dietro .arto-dentro,
.omino .braccio--dietro .arto-dentro {
  stroke: var(--ombra);
}

.omino .gamba--dietro .calzoni {
  fill: var(--maglia);
}

.omino .goccia {
  fill: #9fd3ff;
  stroke-width: 1.6;
}

.sipario__conto {
  position: absolute;
  right: 16px;
  top: 50%;
  margin: 0;
  color: var(--bianco);
  font-family: 'Geist Variable', 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- play it again */
.ancora {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: 18px;
  z-index: 20;
  padding: 8px 14px;
  border: 1px solid var(--inchiostro);
  border-radius: 99px;
  background: var(--carta);
  color: var(--inchiostro);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) {
  .ancora:hover {
    background: var(--inchiostro);
    color: var(--carta);
  }
}

.ancora:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  :root {
    --misura: 210px;
  }

  .voci {
    font-size: 18px;
  }

  .scrivi {
    display: none;
  }

  .lavori {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 52px;
  }
}