/* The band round the words: the topics of a made-up journal of making, Marl, on a black page. The words in Bricolage
   Grotesque (a variable sans, weight 200 to 800 and width 75 to 100), one thin vermilion rubber band. The script
   places the words and draws the band. */
:root {
  --night: #0e0e0d;               /* the page */
  --paper: #efeae0;               /* the words caught by the band */
  --dim: #5f5b54;                 /* the words left out */
  --grey: #8a857c;                /* the small texts */
  --accent: #ff5436;              /* the rubber band */
  --tint: rgba(255, 84, 54, 0.035); /* the inside of the band */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100svh;
  background: var(--night);
  color: var(--paper);
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 6vw, 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  padding: clamp(18px, 3.4vw, 40px) var(--pad) clamp(18px, 3vw, 36px);
  user-select: none;
  -webkit-user-select: none;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}

.top__name {
  font-weight: 640;
  font-stretch: 100%;
}

.top__note {
  color: var(--grey);
  font-weight: 400;
  text-align: right;
}

/* ---------------------------------------------------------------- the field */
.field {
  position: relative;
  min-height: 0;
  margin: clamp(10px, 3vh, 30px) 0;
  touch-action: none;
}

.band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.band__fill {
  fill: var(--tint);
  stroke: none;
}

.band__line {
  fill: none;
  stroke: var(--accent);
  stroke-linejoin: round;
}

.tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  line-height: 1;
  font-size: var(--fs, 26px);
  color: var(--dim);
  font-variation-settings: 'wght' 300, 'wdth' 88;
  will-change: transform;
}

.tag__n {
  margin-left: 0.3em;
  font-size: 0.46em;
  vertical-align: 0.95em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 420, 'wdth' 100;
}

/* ---------------------------------------------------------------- the reading */
.read {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(239, 234, 224, 0.14);
  font-size: 14px;
}

.read__win {
  display: inline-block;
  overflow: hidden;
  min-width: 0;
  height: 1.35em;
  line-height: 1.35em;
}

.read__names,
.read__count {
  display: inline-block;
  white-space: nowrap;
}

.read__names {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.read__hint {
  flex: 1;
  text-align: center;
  color: var(--grey);
  white-space: nowrap;
}

.read__count {
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .top {
    font-size: 13px;
  }

  .read {
    font-size: 13px;
  }

  .read__hint {
    display: none;
  }
}