:root {
  color-scheme: light;

  --progress: 0;

  --ink:
    rgb(
      calc(33 + 210 * var(--progress)),
      calc(38 + 203 * var(--progress)),
      calc(39 + 195 * var(--progress))
    );

  --paper:
    rgb(
      calc(246 - 220 * var(--progress)),
      calc(243 - 219 * var(--progress)),
      calc(229 - 205 * var(--progress))
    );
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

html {
  background: #111;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  background: var(--paper);
  color: var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 20px;
  line-height: 1.75;

  transition:
    background 250ms linear,
    color 250ms linear;
}


/* sky */

.sky {
  position: fixed;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgb(
        calc(151 - 137 * var(--progress)),
        calc(195 - 176 * var(--progress)),
        calc(219 - 192 * var(--progress))
      ),
      rgb(
        calc(237 - 208 * var(--progress)),
        calc(220 - 193 * var(--progress)),
        calc(166 - 142 * var(--progress))
      )
    );
}

.sky::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    rgba(
      0,
      0,
      0,
      calc(var(--progress) * 0.30)
    );
}

.sun {
  position: absolute;

  left:
    calc(
      12% +
      var(--progress) * 68%
    );

  top:
    calc(
      16% +
      var(--progress) * 58%
    );

  width: 68px;
  height: 68px;

  border-radius: 50%;

  background: #ffe8a7;

  box-shadow:
    0 0 50px
    rgba(255, 225, 145, 0.55);

  opacity:
    calc(
      1 -
      var(--progress) * 0.84
    );
}


/* content */

main {
  position: relative;
  z-index: 2;
}

.opening {
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  align-items: center;

  padding:
    80px
    clamp(25px, 10vw, 160px);
}

.opening > div {
  max-width: 1000px;
}

.opening span,
.chapter time,
.time-marker {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.opening h1 {
  margin:
    30px
    0
    0;

  font-size:
    clamp(
      67px,
      12vw,
      150px
    );

  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.065em;
}


/* prose */

.chapter {
  min-height: 105vh;
  min-height: 105dvh;

  display: grid;
  grid-template-columns:
    120px
    minmax(0, 720px);

  gap: 55px;

  align-content: center;

  padding:
    100px
    clamp(25px, 10vw, 160px);
}

.chapter time {
  opacity: 0.62;
}

.prose p {
  margin:
    0
    0
    28px;
}

.prose p:first-child {
  font-size:
    clamp(
      28px,
      4vw,
      42px
    );

  line-height: 1.35;
}

blockquote {
  margin:
    45px
    0;

  padding:
    20px
    25px;


  font-style: italic;
}

.prose {
  text-shadow:
    0 1px 12px
    rgba(
      0,
      0,
      0,
      calc(var(--progress) * 0.48)
    );
}

.chapter time {
  color: var(--ink);
}

/* clock */

.time-marker {
  position: fixed;

  z-index: 10;

  right:
    max(
      20px,
      env(safe-area-inset-right)
    );

  top:
    max(
      20px,
      env(safe-area-inset-top)
    );

  opacity: 0.5;
}


/* late story */

.final-chapter {
  min-height: 120dvh;
}


/* midnight */

.midnight {
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #050708;
  color: #e2e3df;

  text-align: center;
}

.midnight span {
  color: #777f7d;

  font-family:
    "Courier New",
    monospace;
}

.midnight h2 {
  margin:
    24px
    0
    50px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      84px,
      21vw,
      220px
    );

  line-height: 0.8;
  letter-spacing: -0.08em;
}

.midnight a {
  color: #b7c1bd;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}


/* mobile */

@media (max-width: 700px) {
  body {
    font-size: 18px;
  }

  .opening {
    padding:
      70px
      20px;
  }

  .chapter {
    grid-template-columns: 1fr;

    gap: 27px;

    padding:
      90px
      22px;
  }

  .chapter time {
    font-size: 10px;
  }
}