/* Il logo dalla moneta che gira: una pagina bianco caldo, una moneta di linee sottili vermiglie che gira come un
   disco di Eulero e, quando si posa piatta, diventa la riga su cui si alza il nome. */
:root {
  --paper: #f3f0e8;    /* la pagina */
  --ink: #141414;      /* il nome */
  --accent: #d4462a;   /* la moneta, la sua iniziale e la riga */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Anybody Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rim {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 2;
}

.rim--in {
  fill: none;
  stroke-width: 1;
}

.mono {
  fill: var(--accent);
  font-variation-settings: 'wght' 700, 'wdth' 100;
  font-family: 'Anybody Variable', system-ui, sans-serif;
}

.line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.name {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink);
}

/* una lettera: GSAP la fa alzare dalla riga (scala); il peso lo scrive lo script */
.l {
  display: inline-block;
  transform: scaleY(0);
}

.base {
  display: inline-block;
  width: 0;
  height: 0;
}