/* The ruler archive: the archive of a design studio on warm paper, one project a year from 1996 to 2026. A thin ruler,
   a needle and a big year in Inter Tight (a variable typeface, weight 100 to 900). Under the pointer the ticks rise in
   a wave, the needle snaps to the nearest year and the year rolls like an odometer. */
:root {
  --paper: #f4f1eb;         /* the page */
  --ink: #151412;           /* the year, the ticks under the pointer, the project's name */
  --grey: #948f86;          /* the small texts and the kind of project */
  --rule: rgba(21, 20, 18, 0.14); /* the ruler's base line */
  --accent: #ff4d1a;        /* the needle */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- the top line */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  letter-spacing: -0.005em;
}

.top__name {
  font-weight: 620;
}

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

/* ---------------------------------------------------------------- the year */
.year {
  align-self: center;
  margin: 0 0 0 -0.04em;
  display: flex;
  font-size: clamp(96px, 21vw, 300px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.year__col {
  position: relative;
  display: block;
  width: 0.7em;
  height: 1.24em;
  margin: -0.12em -0.035em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.year__rise {
  display: block;
}

.year__strip {
  display: block;
  will-change: transform;
}

.year__cell {
  display: block;
  height: 1.24em;
  line-height: 1.24em;
  text-align: center;
}

/* ---------------------------------------------------------------- the ruler */
.ruler {
  position: relative;
  height: 210px;
  outline: none;
  cursor: default;
}

.ruler__ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 0;
}

/* the base line, a hair under the ticks */
.ruler__ticks::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 0;
  height: 1px;
  background: var(--rule);
}

.tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 100px;
  margin-left: -0.5px;
  background: var(--ink);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.needle {
  position: absolute;
  left: 0;
  bottom: 44px;
  width: 0;
  height: 0;
  will-change: transform;
}

.needle__line {
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 126px;
  background: var(--accent);
  transform-origin: 50% 100%;
}

/* the caption hangs at the top of the needle; the script slides it to the left of the needle near the right end */
.caption {
  position: absolute;
  left: 0;
  bottom: 120px;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.3;
  will-change: transform;
}

.caption__mask {
  display: grid;
  overflow: hidden;
  padding: 0 1px;
}

.caption__item {
  grid-area: 1 / 1;
  display: block;
}

.caption__name,
.caption__kind {
  display: inline-block;
}

.caption__name {
  font-weight: 600;
}

.caption__kind {
  color: var(--grey);
  font-weight: 420;
  margin-left: 0.4em;
}

.ruler__labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 16px;
}

.label {
  position: absolute;
  top: 0;
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
  transform: translateX(-50%);
  transition: color 0.3s ease;
}

.label.is-near {
  color: var(--ink);
}

.ruler:focus-visible .needle__line {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink);
}

.hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--grey);
}

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

  .year {
    font-size: 33vw;
  }

  .ruler {
    height: 190px;
  }

  .needle__line {
    height: 108px;
  }

  .caption {
    bottom: 102px;
    font-size: 14px;
  }

  .label {
    font-size: 11px;
  }
}