/* The select-all transition: the whole page gets selected line by line, the highlights close into one blue sheet,
   and the sheet opens again on the lines of the next page, selected, before they let go one after the other. */
:root {
  --paper: #f4f1ea;
  --ink: #161514;
  --muted: #8b867c;
  --night: #141413;
  --night-ink: #ece8df;
  --night-muted: #85817a;
  --accent: #2c4bff;
  --selected: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: 'Newsreader Variable', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  /* the script writes --pad */
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

/* our own selection is the show: the browser's stays out of the way */
.page ::selection {
  background: var(--accent);
  color: var(--selected);
}

/* ------------------------------------------------------------------ the pages */
.page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(var(--pad, 40px) * 0.7) var(--pad, 40px);
  isolation: isolate;
}

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

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

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

/* the highlights live under the text of their page */
.marks {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.mark {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--accent);
  will-change: transform;
}

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-size: 19px;
  font-weight: 600;
  font-style: italic;
  font-variation-settings: 'opsz' 24;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 30px);
  font-size: 15px;
  font-variation-settings: 'opsz' 14;
}

.nav a {
  color: var(--soft);
  text-decoration: none;
}

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

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

/* ------------------------------------------------------------------ the note */
.note {
  margin: auto 0;
  max-width: min(980px, 100%);
  padding: 4vh 0;
}

.label {
  margin: 0 0 clamp(14px, 2.4vh, 24px);
  font-size: 14px;
  font-variation-settings: 'opsz' 14;
  color: var(--soft);
}

.title {
  margin: 0;
  font-size: clamp(44px, 7.4vw, 118px);
  line-height: 0.98;
  font-weight: 420;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}

.body {
  margin: clamp(18px, 3.4vh, 34px) 0 0;
  max-width: 38ch;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.5;
  font-variation-settings: 'opsz' 18;
  color: var(--soft);
}

.go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3.6vh, 36px);
  color: inherit;
  text-decoration: none;
  font-size: 17px;
  font-weight: 520;
  font-variation-settings: 'opsz' 16;
}

.go__t {
  position: relative;
}

.go__arrow {
  color: var(--wc, inherit);
  width: 26px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* hover: the link gets selected, a quick highlight running under its words */
.go__t::before {
  content: '';
  position: absolute;
  inset: -1px -3px;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .go:hover .go__t {
    color: var(--selected);
  }

  .go:hover .go__t::before {
    transform: scaleX(1);
  }

  .go:hover .go__arrow {
    transform: translateX(5px);
  }

  .go--back:hover .go__arrow {
    transform: translateX(-5px);
  }

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

.foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  font-variation-settings: 'opsz' 14;
  color: var(--soft);
}

/* ------------------------------------------------------------------ the words and the cursor */
.wd {
  /* the script writes the colour of a selected word, which fades into the blue as the sheet closes */
  color: var(--wc, inherit);
}

.caret {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  z-index: 5;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

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

  .foot {
    font-size: 13px;
  }

  .body {
    font-size: 17px;
  }
}