/* Text-only slides of the H&M redesign case study, rebuilt as HTML.
   Mobile first: slides flow and stack. From 992px up they become 16:9 canvases
   whose type and positions scale with the viewport (1 slide px = .1vw). */

.explorative-research.tx-slide {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  padding: 44px 24px 48px;
  background: #fff;
  font-family: Generalsans, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: #777;
}

.tx-slide h2,
.tx-slide p,
.tx-slide ul {
  margin: 0;
  padding: 0;
}

.tx-slide h2 {
  margin-bottom: 20px;
  font-family: Generalsans, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.tx-slide p + p,
.tx-slide ul + p,
.tx-slide p + ul {
  margin-top: 1em;
}

.tx-slide ul {
  list-style: none;
}

.tx-slide li {
  position: relative;
  margin-bottom: 0;
  padding-left: 18px;
}

.tx-slide li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
}

.tx-slide li + li {
  margin-top: 8px;
}

.tx-slide strong {
  font-weight: 600;
}

/* ---- The challenge ---- */
.tx-slide.tx-challenge { color: #727272; }
.tx-challenge h2 { color: #666; }
.tx-challenge .tx-lead {
  margin-bottom: 14px;
  font-weight: 600;
  color: #6a6a6a;
}
.tx-challenge .tx-right { margin-top: 28px; }
.tx-challenge .tx-col + .tx-col { margin-top: 1em; }

/* ---- Understanding H&M and the user ---- */
.tx-slide.tx-understand { color: #787878; }
.tx-understand h2 { color: #666; }

/* ---- Job stories ---- */
.tx-slide.tx-jobs { color: #333; }
.tx-jobs h2 { color: #333; }
.tx-jobs .tx-key {
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #000;
}
.tx-jobs .tx-key li {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 240px;
  padding-left: 0;
  line-height: 1.4;
}
.tx-jobs .tx-key li::before {
  position: static;
  flex: none;
  width: 42px;
  height: 2px;
  content: "";
  background: var(--tx-c);
}
.tx-jobs .tx-key li + li { margin-top: 0; }
.tx-jobs .tx-key span { margin-left: auto; }
.tx-jobs .tx-key .tx-situation,
.tx-jobs .tx-key .tx-motivation,
.tx-jobs .tx-key .tx-outcome { color: #000; }
.tx-jobs .tx-key li:nth-child(1) { --tx-c: #2c3f9b; }
.tx-jobs .tx-key li:nth-child(2) { --tx-c: #f2742e; }
.tx-jobs .tx-key li:nth-child(3) { --tx-c: #4be4cf; }
.tx-jobs .tx-story { line-height: 1.95; }
.tx-jobs .tx-story + .tx-story { margin-top: 28px; }
.tx-jobs .tx-story span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: .32em;
}
.tx-jobs .tx-story .tx-situation { text-decoration-color: #2c3f9b; }
.tx-jobs .tx-story .tx-motivation { text-decoration-color: #f2742e; }
.tx-jobs .tx-story .tx-outcome { text-decoration-color: #4be4cf; }

/* ---- Usability testing ---- */
.tx-slide.tx-usability { color: #111; }
.tx-usability h2 { color: #333; margin-bottom: 28px; }
.tx-usability li { padding-left: 0; }
.tx-usability li::before {
  content: "\2022\00a0";
  position: static;
}
.tx-usability li + li { margin-top: 1em; }
.tx-usability ul { margin-top: 1em; }

/* ---- Atomic design ---- */
.tx-slide.tx-atomic { color: #5a5a5a; }
.tx-atomic h2 { color: #555; }

@media (min-width: 992px) {
  .explorative-research.tx-slide {
    height: 56.25vw;
    padding: 0;
    overflow: hidden;
    font-size: 1.92vw;
    line-height: 2.3vw;
    letter-spacing: .02em;
  }
  .tx-slide h2 {
    position: absolute;
    margin: 0;
    font-size: 2.2vw;
    line-height: 1;
    letter-spacing: .02em;
  }
  .tx-slide .tx-body {
    position: absolute;
  }
  .tx-slide p + p,
  .tx-slide ul + p,
  .tx-slide p + ul {
    margin-top: 2.3vw;
  }
  .tx-slide li {
    padding-left: 1.7vw;
  }
  .tx-slide li::before { left: .1vw; }
  .tx-slide li + li { margin-top: 1.2vw; }

  /* challenge */
  .tx-challenge h2 { left: 11.8vw; top: 10.1vw; font-size: 3.1vw; }
  .tx-challenge .tx-left { left: 11.8vw; top: 20.8vw; width: 34.5vw; }
  .tx-challenge .tx-lead {
    margin: 0 0 .55vw;
    font-size: 1.86vw;
    line-height: 3.2vw;
  }
  .tx-challenge .tx-left ul { margin-top: 1.4vw; width: 32vw; font-size: 1.94vw; line-height: 2.9vw; }
  .tx-challenge li + li { margin-top: 0; }
  .tx-challenge .tx-right { margin: 0; left: 58.4vw; top: 10vw; width: 31.2vw; font-size: 1.92vw; }
  .tx-challenge .tx-col + .tx-col { margin-top: 2.3vw; }

  /* understanding */
  .tx-understand h2 { left: 11.3vw; top: 8.67vw; font-size: 2.27vw; }
  .tx-understand .tx-body { left: 10.1vw; top: 14.15vw; width: 62.2vw; font-size: 1.92vw; }
  .tx-understand li { padding-left: 1.2vw; }
  .tx-understand li + li { margin-top: 1.3vw; }

  /* job stories */
  .tx-jobs h2 { left: 7.5vw; top: 6.63vw; font-size: 2.13vw; }
  .tx-jobs .tx-key {
    position: absolute;
    right: 8.35vw;
    top: 6.2vw;
    margin: 0;
    font-size: 1.06vw;
    line-height: 1.55vw;
    letter-spacing: .01em;
  }
  .tx-jobs .tx-key li {
    gap: 1.5vw;
    width: 14.4vw;
    max-width: none;
    padding-left: 0;
    line-height: 1.55vw;
  }
  .tx-jobs .tx-key li::before { width: 4.2vw; height: .2vw; }
  .tx-jobs .tx-body { left: 7.7vw; top: 16vw; width: 84.5vw; font-size: 1.77vw; }
  .tx-jobs .tx-story { line-height: 3.4vw; }
  .tx-jobs .tx-story + .tx-story { margin-top: 4.8vw; }
  .tx-jobs .tx-story:nth-child(3) { margin-top: 7.7vw; }

  /* usability */
  .tx-usability h2 { left: 8.5vw; top: 12.45vw; margin: 0; font-size: 2.18vw; }
  .tx-usability .tx-body { left: 8.5vw; top: 19.95vw; width: 81vw; font-size: 1.79vw; }
  .tx-usability ul { margin-top: 2.3vw; }
  .tx-usability li { padding-left: 0; }
  .tx-usability li + li { margin-top: 2.3vw; }

  /* atomic */
  .tx-atomic h2 { left: 9.6vw; top: 7.55vw; font-size: 2.11vw; }
  .tx-atomic .tx-body { left: 9.6vw; top: 13.2vw; width: 44.8vw; font-size: 1.55vw; line-height: 1.85vw; letter-spacing: .008em; }
  .tx-atomic .tx-body p + p { margin-top: 1.85vw; }
}