/* The layout grid transition: the page shows its layout grid, the columns lift one after another like piano keys and
   carry the old page away in slices, then fall back with the new page on them, each landing with its own bounce. */
:root {
  --paper: #f2efe8;
  --ink: #161615;
  --muted: #8a857c;
  --night: #161615;
  --night-ink: #efebe3;
  --night-muted: #86827a;
  --bare: #dbd6cc;
  --grid: #e2462f;
}

* {
  box-sizing: border-box;
}

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

.stage {
  /* the script writes --cols, --pad and --gut (the layout grid) and where each piece sits on it */
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bare);
}

/* ------------------------------------------------------------------ the pages, both on the same grid */
.page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  column-gap: var(--gut, 20px);
  padding: var(--pad, 40px);
  padding-top: calc(var(--pad, 40px) * 0.7);
  padding-bottom: calc(var(--pad, 40px) * 0.7);
}

.page.is-on {
  visibility: visible;
}

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

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

.bar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-size: 17px;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
  font-size: 14px;
}

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

.page--b .nav a {
  color: var(--night-muted);
}

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

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

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

/* the words that widen under the pointer (the script moves --w) */
.w__t {
  display: inline-block;
  font-stretch: calc(var(--w, 100) * 1%);
}

/* ------------------------------------------------------------------ the first page */
.slab {
  grid-column: var(--at-slab, 6 / span 2);
  grid-row: var(--row-slab, 2 / 4);
  margin-top: clamp(18px, 6vh, 64px);
  margin-bottom: max(18px, calc(var(--fs, 120px) * 0.22));
  background: var(--grid);
}

.big {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  font-size: var(--fs, 120px);
  line-height: 0.9;
  font-weight: 620;
  font-stretch: 116%;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.big__line {
  display: block;
}

.lede {
  grid-column: var(--at-lede, 1 / span 3);
  grid-row: 4;
  margin: clamp(18px, 3.4vh, 34px) 0 0;
  max-width: 36ch;
  text-wrap: pretty;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--muted);
}

.go {
  grid-column: var(--at-go, 5 / span 2);
  grid-row: var(--row-go, 4);
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 3.4vh, 34px);
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 560;
}

.go__arrow {
  width: 26px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot {
  grid-column: 1 / -1;
  grid-row: 6;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(18px, 3.4vh, 34px);
  font-size: 13px;
  color: var(--muted);
}

.page--b .foot {
  color: var(--night-muted);
}

/* ------------------------------------------------------------------ the second page */
.list {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  margin: clamp(18px, 3.4vh, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  column-gap: var(--gut, 20px);
  align-items: baseline;
  padding: clamp(9px, 1.5vh, 14px) 0;
  font-size: clamp(14px, 1.2vw, 17px);
}

.row__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: color-mix(in srgb, var(--night-ink) 26%, transparent);
  transform-origin: 0 50%;
}

.row__name {
  grid-column: var(--at-name, 1 / span 4);
}

.row__kind {
  grid-column: var(--at-kind, 6 / span 2);
  color: var(--night-muted);
}

.row__year {
  grid-column: -2 / -1;
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: var(--night-muted);
}

.row:first-child .row__year {
  color: var(--grid);
}

.go--back {
  grid-column: 1 / -1;
  grid-row: 5;
}

/* ------------------------------------------------------------------ the keys and the grid */
.keys {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.key {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}

.key > .page {
  visibility: visible;
  right: auto;
}

/* in the page that is arriving, the last details wait for the real page */
.key--in [data-late] {
  visibility: hidden;
}

.key--in [data-rule] {
  transform: scaleX(0) !important;
}

.grid {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.grid__col {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid color-mix(in srgb, var(--grid) 48%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--grid) 48%, transparent);
  background: color-mix(in srgb, var(--grid) 8%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.grid__flash {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--grid) 22%, transparent);
  opacity: 0;
}

@media (max-width: 600px) {
  .brand {
    font-size: 16px;
  }

  .foot {
    font-size: 12px;
  }

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