/* 02 · About: short introduction on ink */
.about { background: var(--ink); color: var(--cream); position: relative; }
.about__num { color: var(--orange); margin-bottom: 28px; }

.about__story-wrap { padding: 18vh var(--gutter) 4vh; max-width: 1400px; }
.about__statement { font-size: clamp(40px, 6.4vw, 112px); line-height: 1.02; max-width: 13ch; }
.about__statement .sw { opacity: .14; }
.is-reduced .about__statement .sw, .no-js .about__statement .sw { opacity: 1; }

/* Temporary jobs: they light up and get struck through as you scroll */
.about__jobs-lead { margin-top: clamp(40px, 7vh, 72px); font-size: clamp(17px, 1.4vw, 20px); color: rgba(246, 241, 234, .7); }
.about__jobs-list {
  list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .12em .55em;
  font: 700 clamp(26px, 3.6vw, 60px)/1.1 var(--font-display); letter-spacing: -.02em; max-width: 1320px;
}
.about__job { position: relative; opacity: .18; }
.about__job::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .09em;
  background: var(--orange); transform: scaleX(var(--strike, 0)); transform-origin: left; border-radius: 1em;
}
.is-reduced .about__job, .no-js .about__job { opacity: .5; --strike: 1; }

/* The turning point */
.about__turn { margin-top: clamp(56px, 10vh, 110px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.about__big { font: 800 clamp(48px, 8.4vw, 150px)/.92 var(--font-display); letter-spacing: -.035em; color: var(--orange); }
.about__lead { font-size: clamp(18px, 1.5vw, 22px); color: rgba(246, 241, 234, .85); max-width: 38ch; padding-bottom: .6em; }
@media (max-width: 860px) { .about__turn { grid-template-columns: 1fr; } }