/* Spanne: a minimal physics piece. Warm paper, a taut net of hairlines inside a thin frame, one word printed on
   the net. Everything is drawn on one canvas; the page around it is only the two small captions. */
:root {
  --paper: #f3f0e8;     /* the background */
  --ink: #161513;       /* the word */
  --thread: #c9c2b4;    /* the threads of the net at rest */
  --frame: #8a8478;     /* the frame and the small print */
  --taut: #e0462a;      /* the one accent: the threads and the letters where the net is pulled hardest */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.net {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.brand,
.hint {
  position: absolute;
  margin: 0;
  color: var(--frame);
  font-size: 13px;
  font-weight: 520;
  font-stretch: 92%;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.brand {
  top: clamp(16px, 3vw, 28px);
  left: clamp(16px, 4vw, 44px);
  color: var(--ink);
  font-weight: 680;
  font-stretch: 112%;
}

.hint {
  right: clamp(16px, 4vw, 44px);
  bottom: clamp(14px, 3vw, 26px);
}