/* The rope title: one SVG as big as the window over a deep harbour blue. Every colour is a variable here: the water
   at night, the hemp of the rope (its core, its strands, the light on them), the wood and the brass of the spool. */
:root {
  --sea: #10283a;            /* the background */
  --sea-deep: #07141e;       /* the dark at the edges */
  --rope-core: #654019;      /* the dark between the strands of the rope */
  --rope: #c18f55;           /* the strands */
  --rope-light: #f0d39c;     /* the light on every strand */
  --fiber: #e2c189;          /* the loose fibres of the frayed end */
  --whip: #2e5f73;           /* the twine whipped round the other end */
  --wood: #94602f;           /* the spool */
  --wood-light: #c08a52;
  --wood-dark: #5e3a1a;
  --brass: #c79a3f;          /* the hub of the spool */
  --brass-light: #f3d88f;
  --brass-dark: #7a5a1c;
  --shadow: #01070c;         /* the shadows on the water */
  --text: #f2e7d3;           /* the line under the title */
  --hint: #7f9cae;           /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--sea);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(120% 90% at 50% 42%, var(--sea) 45%, var(--sea-deep) 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.palco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.t-brass-light { stop-color: var(--brass-light); }
.t-brass { stop-color: var(--brass); }
.t-brass-dark { stop-color: var(--brass-dark); }
.t-wood-light { stop-color: var(--wood-light); }
.t-wood { stop-color: var(--wood); }
.t-wood-dark { stop-color: var(--wood-dark); }

.ombre { fill: var(--shadow); opacity: 0.55; }
.ombra-corda { fill: none; stroke: var(--shadow); stroke-linecap: round; stroke-linejoin: round; }
.corda-fondo { fill: none; stroke: var(--rope-core); stroke-linecap: butt; stroke-linejoin: round; }
.corda-trefoli { fill: var(--rope); }
.corda-luce { fill: var(--rope-light); opacity: 0.85; }
.sfilacci { fill: none; stroke: var(--fiber); stroke-linecap: round; }
.legatura { fill: none; stroke: var(--whip); stroke-linecap: butt; }
.flangia { fill: url(#wood); stroke: var(--wood-dark); }
.venature { fill: none; stroke: var(--wood-dark); opacity: 0.35; }
.foro { fill: var(--sea-deep); }
.mozzo { fill: url(#brass); stroke: var(--brass-dark); }
.mozzo-taglio { fill: none; stroke: var(--brass-dark); stroke-linecap: round; }
.ciuffo { fill: none; stroke: var(--fiber); stroke-linecap: round; }

/* the words are drawn by the rope: this copy is only for screen readers */
.leggibile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.sotto {
  position: absolute;
  left: 16px;
  right: 16px;
  margin: 0;
  font-family: 'Archivo Variable', 'Arial Narrow', sans-serif;
  font-size: clamp(12px, 1.25vw, 17px);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  pointer-events: none;
}
.sotto .lettera {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Archivo Variable', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
}