html {
  transition: background-color .9s var(--ease);
}

/* Night falls on the parchment sections as one dark layer fading in. Only its
   opacity changes, which the GPU composites: the textured paper underneath is
   never repainted while it fades. */
.v6 .aw::before,
.v6 .ct::before,
.v6 .fq::before,
.v6 .rv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgb(var(--dark-rgb));
  opacity: 0;
  transition: opacity .9s var(--ease);
  will-change: opacity;
}
html.is-night .v6 .aw::before,
html.is-night .v6 .ct::before,
html.is-night .v6 .fq::before,
html.is-night .v6 .rv::before { opacity: 1; }
.v6 .aw > *,
.v6 .ct > *,
.v6 .fq > *,
.v6 .rv > * { position: relative; z-index: 1; }

/* Under that layer, keep only the cheap fades (text colours). The FAQ's own
   background and the filters on its titles change at once, unseen. */
.v6 .fq { transition: color .9s var(--ease); }
.v6 .fq-title, .v6 .fq-note, .v6 .fq-ask, .v6 .fq-say p,
.v6 .fq-item, .v6 .fq-btn, .v6 .fq-eyebrow, .v6 .fq-sign i {
  transition-property: border-color, color, -webkit-text-fill-color, opacity;
}

.v6 .st-skin,
.v6 .nt-card,

.v6 .wk,
.v6 .aw,
.v6 .ct,
.v6 .fq,
.v6 .rv,

.cr-page > .cr-why:not(.cr-why--dark),
.cr-open-in::before,
.ni-faq-in::before,

.fd-page > .fd-philo,

.cr-page > .pj-light {
  background-image:
    linear-gradient(rgb(var(--dark-rgb) / var(--np-veil, 0)), rgb(var(--dark-rgb) / var(--np-veil, 0))),

    linear-gradient(90deg,
      rgb(var(--np-burn-deep) / calc(.46 * var(--np-age))) 0%,
      rgb(var(--np-burn) / calc(.28 * var(--np-age))) 3%,
      rgb(var(--np-burn) / calc(.13 * var(--np-age))) 9%,
      rgb(var(--np-burn) / calc(.04 * var(--np-age))) 20%,
      transparent 33%,
      transparent 67%,
      rgb(var(--np-burn) / calc(.04 * var(--np-age))) 80%,
      rgb(var(--np-burn) / calc(.13 * var(--np-age))) 91%,
      rgb(var(--np-burn) / calc(.28 * var(--np-age))) 97%,
      rgb(var(--np-burn-deep) / calc(.46 * var(--np-age))) 100%),

    linear-gradient(180deg,
      rgb(var(--np-burn-deep) / calc(.36 * var(--np-age))) 0%,
      rgb(var(--np-burn) / calc(.14 * var(--np-age))) 7%,
      rgb(var(--np-burn) / calc(.04 * var(--np-age))) 17%,
      transparent 29%,
      transparent 71%,
      rgb(var(--np-burn) / calc(.04 * var(--np-age))) 83%,
      rgb(var(--np-burn) / calc(.14 * var(--np-age))) 93%,
      rgb(var(--np-burn-deep) / calc(.36 * var(--np-age))) 100%),

    url("../assets/img/paper/pepper.png"),

    url("../assets/img/paper/foxing.png"),

    url("../assets/img/paper/stain-wide.png"),

    radial-gradient(118% 88% at 50% 46%,
      rgb(var(--np-lift) / .50) 0%,
      rgb(var(--np-lift) / .34) 34%,
      rgb(var(--np-lift) / .13) 58%,
      rgb(var(--np-lift) / 0) 80%),

    url("../assets/img/paper/tooth.png"),

    url("../assets/img/paper/fibre.png"),

    url("../assets/img/paper/staining.png"),

    linear-gradient(0deg, var(--np-sheet), var(--np-sheet));

  background-size:
    cover,
    cover, cover,
    310px 310px, 590px 590px, 940px 940px,
    cover,
    190px 190px, 430px 430px, 770px 770px,
    cover;
  background-repeat:
    no-repeat,
    no-repeat, no-repeat,
    repeat, repeat, repeat,
    no-repeat,
    repeat, repeat, repeat,
    no-repeat;
  background-blend-mode:
    normal,
    normal, normal,
    multiply, multiply, multiply,
    normal,
    multiply, multiply, multiply,
    normal;

  background-origin: border-box;

  background-color: var(--np-sheet);
}

.v6 .wk-link,
html:not(.is-night) .v6 .rv-card,
.ab-lead,
.cr-why:not(.cr-why--dark) .cr-why-card,
.fd-card,
.pj-am-card {
  background: linear-gradient(180deg, rgba(255, 252, 244, .86), rgba(250, 243, 228, .7));
  border: 1px solid rgba(125, 86, 21, .2);
  box-shadow:
    0 4rem 8rem -5rem rgba(74, 46, 6, .5),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}

.v6 .wk-link { border: 0; }
.v6 .wk-card { border-color: rgba(125, 86, 21, .2); }

.v6 .vt {
  background-color: #0a0908;
  color: var(--paper);
}