/* Varelyno landing, depth (1 Nov, trial): the story's big bold words carried down the page.
   Each section has one giant word just behind its main picture, so the picture overlaps the
   foot of the letters. As you scroll, the word rises from behind the picture, slower than the
   page, and the picture settles from a slight tilt: the page reads in layers (depth.js).
   With animations off the words simply stand where they rest. */

.dp-word { position: relative; z-index: 0; margin: 0 calc(50% - 50vw) -.13em; text-align: center; white-space: nowrap;
  font-family: Outfit, 'Segoe UI', system-ui, sans-serif; font-weight: 800; letter-spacing: -.055em; line-height: .85;
  font-size: max(56px, min(17vw, 280px, 26vh)); color: var(--dp-c, #187bb1); pointer-events: none; user-select: none;
  transition: color .6s cubic-bezier(.16, .84, .3, 1) }
.dp-word span { display: inline-block; transform-origin: 50% 100% }
/* the picture in front of it */
.dp-front { position: relative; z-index: 1; margin-top: 0 }
/* "Pick your work": the word is the kind of work picked, in its colour */
#for-you .dp-word { color: var(--vx-c, #447d60) }
.dp-word.dp-swap span { animation: dp-swap .7s cubic-bezier(.16, .84, .3, 1) }
@keyframes dp-swap { from { opacity: 0; translate: 0 .18em } to { opacity: 1; translate: 0 0 } }

/* the headings carry the same weight as the story */
.sec-head h2 { font-size: clamp(34px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02 }
.sec-head h2 em { font-weight: 760 }

/* the close: "Your world." as big as the story's words */
.closing3 h2 { font-size: max(56px, min(15vw, 230px)); font-weight: 800; letter-spacing: -.055em; line-height: .88; margin-bottom: 26px }
.closing3 h2 em { display: block; margin-top: .3em; font-size: max(26px, .26em); font-weight: 760; letter-spacing: -.035em; line-height: 1.05 }

@media (prefers-reduced-motion: reduce) {
  .dp-word.dp-swap span { animation: none }
}