/* The darkroom print: a room lit only by the red safelight. Every colour is a variable here; the prints are drawn
   in greys and the script tints them between --print-dark and --paper. */
:root {
  --room: #0d0303;          /* the dark of the room, round the edges */
  --wall: #240707;          /* the wall */
  --glow: #ff2f1c;          /* the light of the safelight on the wall */
  --lamp: #1a0606;          /* the hood of the lamp */
  --lamp-glass: #ff5a3c;    /* its red glass, lit */
  --bench-top: #3a0d0b;     /* the bench, near the wall */
  --bench: #1c0505;         /* the bench, towards us */
  --bench-edge: #5c1712;    /* the edge of the bench */
  --paper: #ffb4a2;         /* white paper under the red light */
  --print-dark: #220404;    /* the blacks of the prints */
  --shine: #ffd6c8;         /* the shine on wet things */
  --tray: #6e1a12;          /* the plastic trays */
  --tray-deep: #3c0b07;     /* their inside and their front */
  --liquid: #4a0c08;        /* the developer and the fixer */
  --ripple: #ff9c84;        /* the rings on the liquid */
  --wire: #8a2a1e;          /* the drying line */
  --pin: #c8553c;           /* the wooden clothespins */
  --pin-deep: #7a2a1a;      /* their shaded side and the spring */
  --bamboo: #d8743e;        /* the bamboo tongs */
  --bamboo-deep: #8c3a1a;   /* their shade */
  --rubber: #2a0806;        /* the rubber tips of the tongs */
  --box: #5a1410;           /* the box of paper */
  --label: #ff8a70;         /* the writing on the sign, the trays and the box */
  --digits: #ff5638;        /* the numbers of the timer */
  --drop: #ff9c84;          /* the drops */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 30% 20%, var(--wall), var(--room));
  overflow: hidden;
  font-family: 'Oswald Variable', 'Oswald', 'Arial Narrow', sans-serif;
}
.scena { position: fixed; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.palco { width: 100%; height: 100%; display: block; overflow: visible; }

.pareti { fill: var(--wall); }
.lampada__filo { stroke: var(--lamp); stroke-width: 4; }
.lampada__cappa { fill: var(--lamp); stroke: #3a0e0a; stroke-width: 2; }
.lampada__attacco { fill: #3a0e0a; }
.lampada__vetro { fill: var(--lamp-glass); }
.lampada__riflesso { stroke: var(--shine); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }

.insegna { fill: #1a0505; }
.insegna__bordo { fill: none; stroke: var(--label); stroke-width: 1.5; opacity: 0.55; }
.insegna__nome { fill: var(--label); font-size: 38px; font-weight: 600; letter-spacing: 0.16em; text-anchor: middle; }
.insegna__sotto { fill: var(--label); font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-anchor: middle; opacity: 0.75; }

.gancio { fill: var(--pin-deep); }
.gancio__foro { fill: var(--wall); }
.filo { fill: none; stroke: var(--wire); stroke-width: 3; stroke-linecap: round; }

.banco__bordo { fill: var(--bench-edge); }

.scatola__ombra { fill: #000; opacity: 0.55; }
.scatola { fill: var(--box); }
.scatola__dentro { fill: var(--tray-deep); }
.scatola__fogli { fill: var(--paper); opacity: 0.55; }
.scatola__foglio { fill: var(--paper); opacity: 0.75; }
.scatola__fronte { fill: var(--tray-deep); }

.vasca__ombra { fill: #000; opacity: 0.55; }
.vasca { fill: var(--tray); }
.vasca__fondo { fill: var(--tray-deep); }
.vasca__liquido { fill: var(--liquid); opacity: 0.42; }
.vasca__onda { fill: none; stroke: var(--ripple); }
.vasca__fronte { fill: var(--tray-deep); }
.vasca__orlo { fill: none; stroke: #8e2a1c; stroke-width: 2; }

.etichetta { fill: var(--label); font-size: 15px; font-weight: 600; letter-spacing: 0.22em; text-anchor: middle; }
.etichetta--scura { opacity: 0.85; }

.orologio__ombra { fill: #000; opacity: 0.55; }
.orologio { fill: #2a0806; stroke: #4a120c; stroke-width: 2; }
.orologio__vetro { fill: #0e0202; }
.orologio__fase { fill: var(--label); font-size: 14px; font-weight: 600; letter-spacing: 0.24em; }
.orologio__cifre { fill: var(--digits); font-size: 44px; font-weight: 500; text-anchor: end; font-variant-numeric: tabular-nums; }
.orologio__tasto { fill: #4a120c; }

.foglio__ombra { fill: #000; }
.foglio__bagnato { fill: url(#wet); }
.pinza__braccio { stroke: var(--bamboo); stroke-width: 12; stroke-linecap: round; }
.pinza__gomma { stroke: var(--rubber); stroke-width: 14; stroke-linecap: round; }
.pinza__elastico { fill: var(--rubber); }

.molletta { fill: var(--pin); stroke: var(--pin-deep); stroke-width: 1.2; }
.molla { fill: none; stroke: var(--pin-deep); stroke-width: 2.4; }
.goccia { fill: var(--drop); }
.schizzo { fill: var(--drop); }