/* The dog-ear transition: the top page has its corner turned down; on a click the fold runs across the whole page,
   flat on the table, and the new title widens out of the crease as it passes. */
:root {
  --paper: #f3f0e8;
  --paper-back: #e7e2d6;
  --night: #141414;
  --night-back: #24231f;
  --stone: #dcd7cb;
  --stone-back: #cfc9bc;
  --ink: #141414;
  --muted: #86816f;
  --muted-night: #8e897d;
  --accent: #e8452c;
}

* {
  box-sizing: border-box;
}

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

.stage {
  /* the script writes --ts (the size of the titles) and --ear (the size of the turned-down corner) */
  --pad: clamp(20px, 4.4vw, 64px);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--night);
}

/* ------------------------------------------------------------------ the pages */
.page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: var(--bg);
  color: var(--fg);
  pointer-events: none;
}

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

.page.is-coming {
  visibility: visible;
  z-index: 2;
}

.page.is-top {
  visibility: visible;
  z-index: 3;
  pointer-events: auto;
}

.page--a {
  --bg: var(--paper);
  --fg: var(--ink);
  --mute: var(--muted);
  --back: var(--paper-back);
  --crease: rgba(20, 20, 20, 0.2);
}

.page--b {
  --bg: var(--night);
  --fg: var(--paper);
  --mute: var(--muted-night);
  --back: var(--night-back);
  --crease: rgba(243, 240, 232, 0.16);
}

.page--c {
  --bg: var(--stone);
  --fg: var(--ink);
  --mute: var(--muted);
  --back: var(--stone-back);
  --crease: rgba(20, 20, 20, 0.2);
}

.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);
}

/* the footer keeps clear of the turned-down corner */
.foot {
  right: max(var(--pad), calc(var(--ear, 46px) * 1.3));
  bottom: calc(var(--pad) * 0.8);
  font-size: 13px;
  font-stretch: 94%;
  color: var(--mute);
}

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

.nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
  font-size: 14px;
  font-stretch: 94%;
}

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

.nav a[aria-current] {
  color: var(--fg);
}

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

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

/* ------------------------------------------------------------------ the title and its line */
.hero {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 36%;
}

.title {
  margin: 0;
  font-size: var(--ts, 160px);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.035em;
  white-space: pre;
  opacity: 0;
}

.stage.is-ready .title {
  opacity: 1;
}

.ch {
  display: inline-block;
  font-stretch: calc(var(--w, 100) * 1%);
  font-weight: var(--g, 600);
}

.ch--dot {
  color: var(--accent);
}

.lede {
  margin: clamp(16px, 3vh, 30px) 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  font-stretch: 92%;
  color: var(--mute);
}

/* the link: its words widen and the small dog-ear beside it turns down */
.turn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 540;
}

.turn__text {
  display: inline-block;
  font-stretch: calc(var(--w, 94) * 1%);
}

.turn__ear {
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ the fold */
.fold {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  visibility: hidden;
}

.flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--paper-back);
}

.flap__ghost {
  position: absolute;
  inset: 0;
  opacity: 0.07;
}

.flap__ghost .page {
  visibility: visible;
  background: none;
}

.flap__shade {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background: linear-gradient(to right,
    var(--crease) 0, var(--crease) 1px,
    rgba(255, 255, 255, 0.14) 1px, rgba(255, 255, 255, 0) 22%,
    rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 100%);
}

/* the turned-down corner, as a button: a triangle a little bigger than the ear */
.corner {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: max(52px, calc(var(--ear, 46px) * 1.5));
  height: max(52px, calc(var(--ear, 46px) * 1.5));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

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

  .nav {
    font-size: 13px;
  }

  .foot {
    font-size: 12px;
  }

  .hero {
    top: 34%;
  }
}