/* The scan-line transition: one thin line runs down the page like the head of a scanner. Above it the new page is
   already there, below it the old one is still left; the moment the line has passed the new title, the title settles,
   gaining width and weight on a spring. On the next page the line runs back up. */
:root {
  --paper: #f3f0e8;
  --ink: #141414;
  --muted: #8a857b;
  --night: #121212;
  --night-ink: #f1ede4;
  --night-muted: #85807a;
  --stone: #e2ded5;
  --scan: #ff4a1c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  /* the script writes --ts (the size of the titles, the same on every page) */
  --pad: clamp(20px, 4.2vw, 64px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

/* ------------------------------------------------------------------ the pages */
.page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  color: var(--ink);
  --fade: var(--muted);
}

.page.is-on {
  visibility: visible;
  z-index: 1;
}

/* the page coming in sits on top; the script clips it to the side of the line it has already scanned */
.page.is-in {
  visibility: visible;
  z-index: 2;
}

.page--paper {
  background: var(--paper);
}

.page--night {
  background: var(--night);
  color: var(--night-ink);
  --fade: var(--night-muted);
}

.page--stone {
  background: var(--stone);
}

.bar,
.foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.bar {
  top: calc(var(--pad) * 0.8);
}

.foot {
  bottom: calc(var(--pad) * 0.8);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--fade);
}

.brand {
  font-size: 17px;
  font-weight: 680;
  font-stretch: 88%;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 14px;
}

.nav a {
  color: var(--fade);
  text-decoration: none;
  transition: color 0.25s ease;
}

.nav a[aria-current] {
  color: inherit;
}

@media (hover: hover) {
  .nav a:not([aria-current]):hover {
    color: var(--scan);
  }
}

a:focus-visible {
  outline: 1px solid var(--scan);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ the title and its neighbours */
/* the title sits at the same height on every page, so the line passes it at the same moment */
.hero {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 31%;
}

.kicker {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fade);
}

.title {
  margin: 0;
  font-size: var(--ts, 180px);
  line-height: 0.9;
  font-weight: 620;
  letter-spacing: -0.035em;
  white-space: pre;
}

/* each letter has its own width (--w, 62 to 125) and weight (--g, 100 to 900), moved by the script */
.ch {
  display: inline-block;
  --w: 100;
  --g: 620;
  font-stretch: calc(clamp(62, var(--w), 125) * 1%);
  font-weight: clamp(100, var(--g), 900);
}

.lede {
  max-width: 36ch;
  margin: clamp(18px, 3vh, 30px) 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--fade);
}

.go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2.6vh, 26px);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 560;
}

.go__text {
  display: inline-block;
}

.go__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 30px;
  height: 12px;
}

.go__shaft {
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transform-origin: 0 50%;
}

.go__head {
  position: absolute;
  left: 9px;
  top: 0;
  width: 8px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ the scan line */
.scan {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

.scan__rule {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.5px;
  background: var(--scan);
  transform-origin: 50% 50%;
}

/* the wash sits on the side the line has scanned, and only shows while it moves */
.scan__trail {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  bottom: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--scan) 16%, transparent), transparent);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.scan.is-up .scan__trail {
  bottom: auto;
  top: 1.5px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--scan) 16%, transparent), transparent);
  transform-origin: 50% 0;
}

.scan__tick {
  position: absolute;
  top: -5px;
  width: 1.5px;
  height: 11.5px;
  background: var(--scan);
}

.scan__tick--l {
  left: var(--pad);
}

.scan__tick--r {
  right: var(--pad);
}

@media (max-width: 600px) {
  .hero {
    top: 35%;
  }

  .brand {
    font-size: 16px;
  }

  .nav {
    gap: 14px;
    font-size: 13px;
  }

  .foot {
    font-size: 12px;
  }

  .go {
    font-size: 14px;
  }
}