/* The rings of the trunk: a made-up furniture workshop, Alder, in the minimal style. A warm white page, black ink in
   hairlines, one vermilion for the years that mattered. The trunk is drawn by the script in one SVG; the year and the
   notes are plain HTML. */
:root {
  --carta: #f4f1ea;        /* the warm white of the page */
  --inchiostro: #141414;   /* the bark, the year, the text */
  --anello: #6f6a61;       /* the rings */
  --tenue: #8d887e;        /* the small text and the ruler */
  --accento: #e2432a;      /* the years that mattered */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Newsreader Variable', 'Newsreader', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ the opening and the end */
.apertura {
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 92vh;
  padding: 80px clamp(16px, 5vw, 72px);
}

.apertura--fine {
  min-height: 70vh;
}

.piccolo {
  margin: 0;
  font-size: 14px;
  font-variation-settings: 'opsz' 14;
  font-weight: 460;
  letter-spacing: 0.01em;
}

.piccolo--tenue {
  color: var(--tenue);
}

.titolo {
  margin: 0;
  font-size: clamp(44px, 8vw, 120px);
  font-variation-settings: 'opsz' 72;
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.03em;
}

.titolo--medio {
  font-size: clamp(36px, 5.6vw, 84px);
}

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

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

.tronco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.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-size: 20px;
  font-variation-settings: 'opsz' 24;
  font-weight: 620;
  font-style: normal;
  letter-spacing: -0.01em;
}

/* the drawing */
.anello {
  fill: none;
  stroke: var(--anello);
  stroke-width: 0.8;
  stroke-opacity: 0.8;
  stroke-linejoin: round;
}

.anello--segnato {
  stroke: var(--accento);
  stroke-width: 1.4;
}

.corteccia {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.midollo {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1;
}

.raggio {
  stroke: var(--tenue);
  stroke-width: 1;
}

.raggio__tacca {
  stroke: var(--accento);
  stroke-width: 1.4;
}

.raggio__anno {
  fill: var(--accento);
  stroke: var(--carta);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-size: 12px;
  font-variation-settings: 'opsz' 12;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* the year and its note */
.conto {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 5vw, 72px);
  top: var(--conto-y, 52%);
  max-width: var(--conto-w, 34vw);
}

.anno {
  margin: 0;
  font-size: clamp(64px, 9vw, 136px);
  font-variation-settings: 'opsz' 72;
  font-weight: var(--peso, 300);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.nota {
  display: grid;
  margin: 18px 0 0;
  overflow: hidden;
  padding: 2px 0 4px;
}

.nota__riga {
  grid-area: 1 / 1;
  font-size: clamp(17px, 1.5vw, 22px);
  font-variation-settings: 'opsz' 20;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------ phone: the same, with smaller measures */
@media (max-width: 640px) {
  .anello {
    stroke-width: 0.6;
  }

  .raggio__anno {
    font-size: 11px;
  }

  .nota {
    margin-top: 12px;
  }
}